Etiqueta: javascript

Pues se me ha antojado hacer un tutorial CRUD REST API con NextJS debido a que he terminado un proyecto con estas tecnologías.

Tabla de contenidos

Este tutorial esta relacionado con las tecnologías ReactJS, por lo que puedes encontrar mas sobre este tema siguiendo las etiquetas relacionadas. Aquí te dejo un post anterior.

Introducción

Una de las preguntas mas frecuentes que he encontrado en grupos y foros de programación es sobre como hacer un CRUD. Por supuesto, esto es algo que se ha explicado en muchos sitios, como videos, cursos online, Blogs, e incluso en la propia documentación de estas tecnologías. Debido a esto, mi interés es tomármelo con calma para tratar de explicar conceptos que se dejan de lado por la prisa que se tiene para aprender algo especifico para resolver algo especifico. Después de todo, una vez que pasa el apuro, es fácil terminar desorientado y no saber como hacer algo mas complejo por la falta de las bases. Repartiré este tutorial en diversas partes por el volumen de contenido que habrá y adicional a esto, compartiré el código y dejare un demo ejecutable para que se pueda ver el resultado en funcionamiento.

Glosario de la primera parte

Probablemente ya has repasado estos conceptos que están aquí, pero quiero hacer algunas observaciones sobre estos conceptos. Además de entender como funcionan, también es bueno saber como se llaman y cual es la forma correcta de escribirlos. Aunque se dice que la inteligencia artificial puede ayudarte en lo que sea, necesitarás saber como hacerle las preguntas correctas, para obtener las respuestas correctas. (Después de todo, ni en la ferretería saben de que hablas cuando pides el cosito del coso)

Observaciones sobre los acrónimos

Hay algunas cosas que saber sobre los acrónimos aquí citados. Por ejemplo, CRUD no es una palabra sino un acrónimo, por lo que se escribe todo en mayúsculas. La forma correcta de escribirlo en español es todo con mayúsculas y con redondas, si el medio lo permite, o cursivas según la RAE. La RAE recomienda utilizar las formas traducidas de las las siglas, de la misma forma en la que en español usamos ONU organización de las naciones unidas, en lugar de UNO United Nations Organization. Sin embargo, muchos de estos acrónimos ya están asentados, así que no es necesario traducirlos (al menos Google no devuelve ningún resultado útil de CLAB Crear Leer Actualizar Borrar).

CRUD

Acrónimo de Crear, Leer, Actualizar y borrar en sus siglas en ingles (Create, Read, Update, Delete) son las cuatro operaciones básicas del almacenamiento persistente. Puedes aplicarlo a diferentes situaciones como consultas SQL, Consultas API o representaciones de los datos en las interfaces de usuario. Su uso correcto en el lenguaje español esta citado en el apartado anterior de observaciones sobre los acrónimos.

API

Acrónimo de Application Programming Interface, se refiere a dos componentes de software comunicándose entre si mediante un conjunto de definiciones y protocolos. Para el uso de este proyecto, el protocolo es HTTP y las definiciones están establecidos por los Endpoint

Endpoint

Hay un montón de definiciones para esta palabra (que por cierto, no es un acrónimo sino una palabra en ingles) pero para este contexto, un web service endpoint es un servicio web que provee de acceso a un servicio a un cliente. Es el lugar donde el cliente consulta datos de un servidor.

REST

El acrónimo REST, Representational state transfer o transferencia de estado representacional, es un estilo de arquitectura de software que sigue los siguientes principios:

• Comunicación cliente-servidor
• Comunicación sin estado
• Cacheo
• Sistema por capas
• Código por demanda
• Interfaz uniforme

Hay que aclarar que REST tiene varios niveles, en los que, si no utiliza todos los criterios establecidos por el estándar REST, se llama RESTless y si lo hace, se llama RESTful. En el caso del proyecto CRUD REST API con NextJS presentado en este conjunto de entradas, el tipo REST seria RESTless porque solo usaremos el método POST de HTTP.

Next.js

Nextjs, NextJS, Next.js o Nextjs.org es un marco de desarrollo o framework que permite la representacion del lado del servidor. Esto significa que, a diferencia de ReactJS cuya primera carga es solo para iniciar la aplicacion, gran parte de los procesos se pueden implementar desde el lado del servidor. NextJS utiliza una arquitectura que diferencia frontend de backend.

Una cosa que quiero destacar es que NextJS es esencialmente un frontend que precarga datos desde el servidor, mientras que ReactJS lo hace desde el cliente, pero tiene la particularidad de que también permite montar un backend mediante API, algo que en este ejercicio vamos a hacer. Destaco esto porque el modelo cliente-servidor se suele definir a la ligera como que el cliente es el dispositivo del usuario y el servidor siempre es la nube.

ReactJS

ReactJS es una biblioteca (¿biblioteca?¿librería?¿marco de desarrollo? dejemos este tema para otra entrada) diseñada para crear interfaces de usuario. Si bien está diseñado para su uso en modelos de cliente como frontend, su versatilidad y facilidad de programación al crear componentes modulares lo hace un candidato perfecto para el modelo de renderizado desde el servidor que utiliza NextJS.

ORM

Mapeo de Objetos relacionales, es una técnica utilizada a modo de puente entre la programación orientada a objetos y una base de datos relacional. Esto es muy útil porque agrega una capa de transparencia al programador, que le permite centrarse en el desarrollo sin perder de vista el modelo de programación orientada a objetos.

Hay que recordar que esto agrega una capa de complejidad al sistema que se esta desarrollando debido a que es básicamente una traducción constante entre lenguaje de base de datos y programación orientada a objetos, con lo que la carga al servidor se incrementará, a diferencia de hacer las sentencias SQL a mano.

Sequelize

Sequelize es una libreria Typescript ORM para nodeJS con soporte para Oracle, Postgres, MySQL, MariaDB, SQLite and SQL Server. Es muy sencilla de utilizar y es muy eficiente. Para el caso de nuestro proyecto de CRUD REST API con NextJS, la utilizaremos con el soporte de SQLite, pero el mismo código se puede utilizar con MySQL.

SQLite

SQLite es un motor de base de datos. No es una aplicación independiente sino que funciona como una librería para una multitud de lenguajes de programación. Permite tener una base de datos compacta y fácil de usar y transportar que no depende de un servidor.

Un detalle que debo destacar es que SQLite no es una base de datos multiusuario a diferencia de MySQL. Una de las razones por las que no se suele utilizar SQLite es justamente esta, pues se teme que haya un congestionamiento o duplicacion de datos, pero tenemos que recordar que MySQL, aunque es multiusuario, en el desarrollo web se lo suele usar con un solo usuario desde un solo cliente, que es el servidor, para servirle datos al cliente final. Los mismos riesgos que corre SQLite los corre MySQL en esta situacion, pero son solventados con el hecho de que al ser un solo cliente, todas las consultas se hacen en secuencia.

CRUD REST API con NextJS

El objetivo de este tutorial es crear un CRUD REST API con NextJS sencillo, por lo que no se abarcaran temas como sesiones, autenticación, autorización y otros, aun así, quiero también explicar el uso de un ORM para la gestión de las bases de datos y un poco de bases de datos relacionales.

El problema a analizar es crear un sistema CRUD basico para demostracion de las tecnologias citadas, por lo que es necesario establecer las cosas que se necesitan y el objetivo a resolver. Para este proposito, se necesitan dos tablas, Usuarios y Personas

La tabla Usuarios contiene la informacion minima para la autorizacion y autenticación de un usuario, por lo que tiene los siguientes campos

• id_usuario
• email
• password
• createdAt
• updatedAt

Hay que tener en cuenta que sequelize sigue ciertos patrones, que son mas fácilmente identificables en inglés, como por ejemplo, que los nombres de las tablas siempre están en minúsculas, separados por subguiones y en plural, por lo tanto, la tabla usuarios seria correctamente escrita como users. pero para esta practica, solo acataré que este en mayusculas y en plural, porque sequelize de todas formas cambiara el nombre de mi tabla a plural.