Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 1

7 minuto(s)

Demo

Node JS es una de las tecnologías más dinámicas en el mundo del desarrollo de software, nos permite crear proyectos que pueden hacerse escalables con el tiempo, asimismo podemos hacer uso de diferentes paquetes NPM para añadir determinadas características o funcionalidades a nuestros proyectos. Algo importante que mencionar es la velocidad con la que funcionan los proyectos creados con Node JS y para verificar esto te enseñare a Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5, vamos con ello.

Partes


Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque El Lenguaje De Programación Python Es Tan Popular“La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano”

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 1.

Nuevo Proyecto

Para el proyecto tengo que crear un nuevo directorio, yo le pondré de nombre crud-nodejs19-bootstrap5 y dentro de este directorio abro mi consola de comandos y ejecuto el siguiente comando para crear un nuevo proyecto con Node JS:


Luego de ejecutar el comando anterior, Node JS me lanzará en la consola, una serie de preguntas para el proyecto que deseo crear. Tras responder todas las preguntas, al final se me debe crear mi archivo llamado package.json con los siguiente datos que yo le he brindado.


Entonces mi directorio crud-nodejs19-bootstrap5 debe contener en su interior un archivo llamado package.json con los datos de las preguntas que respondí cuando la consola me pregunto.


Parece que nuestro proyecto se ha creado correctamente, pero siempre es bueno verificar si es así. Para esto vamos a crear un servidor básico inicial en Node JS, para probar que todo este funcionando bien.

Dentro del directorio de mi proyecto llamado crud-nodejs19-bootstrap5 creo un archivo llamado app.js:


Abro el archivo apps.js y dentro de el voy a crear un servidor que muestre un simple mensaje que diga Hola Mundo ! y usaré el puerto 3000 para este servidor:


Ahora en mi consola ejecuto el siguiente comando para iniciar el servidor:


Si voy al navegador y abro la ruta http://localhost:3000/ debería de ver el mensaje sin problemas:

Con ello he verificado que mi proyecto se ha creado correctamente y ya puedo comenzar a desarrollar el sistema CRUD.

Paquetes

Para que nuestro proyecto funcione adecuadamente, necesitoe instalar algunas dependencias necesarias.

Express JS

Express al menos hasta la fecha de este Post, es uno de los frameworks más populares para trabajar con Node JS, nos facilita muchas cosas comoel manejo de las rutas, middlewares, etc.

Para instalar Express ejecuto el siguiente comando en la consola de comandos:


Una de las cosas que lo ha hecho popular a Express JS, es su simplesa de uso y el potencial que tiene. 

MySQL

También necesitaré una dependencia que me permita hace una conexión a MySQL en Node JS, ya que usaré este motor de base de datos para el proyecto.

Para instalar MySQL ejecuto el siguiente comando en la consola de comandos:


En otro tutorial usaré MongoDB, pero hay usuarios que necesitan un CRUD con MySQL y este stack les ayudará.

Nodemon

Esta dependencia me ayudará a ver los cambios que realice en el proyecto sin tener que estar reiniciando el servidor a cada rato. Para instalar Nodemon ejecuto el siguiente comando:


Nodemon es una de las dependencia mas populares para desarrollar aplicación Node JS, en lo que se refiere a Live reload o carga instantanea de cambios.

Para que esta dependencia funcione correctamente, abro el archivo package.json que se encuentra en el directorio principal del proyecto:


Dentro del archivo package.json agrego dentro de la sección scripts, la línea “start”: “nodemon server”


Entonces a partir de ahora iniciaré el servidor de Node JS, ejecutando el siguiente comando:


Y en la consola, comenzaré a ver todos los errores que vaya obteniendo durante el desarrollo del proyecto y lo mejor de todo es que pocas veces necesitaré estar iniciando manualmente el servidor de Node JS. Esta dependencia nos hace más productivos a los desarrolladores.

Bootstrap 5

Para poder usar los componentes y elementos del framework Bootstrap 5, ejecuto el siguiente comando:


Mediante Bootstrap 5, puedo agregar a la interface del sistema CRUD, botones, formularios, alerts y otros elementos que necesite. De esta manera solo me enfoco en la lógica del proyecto. Bootstrap se hará cargo de la interface esencialmente.

Body Parser

La dependencia body-parser analiza los cuerpos de las solicitudes entrantes en un middleware antes que sus controladores, disponibles en la propiedad req.body. Para instalar esta dependencia, ejecuto el siguiente comando:

Multer

Para subir las imágenes de cada producto, usaré el paquete Multer, que me brinda una manera sencilla de subirlas al servidor. Estas imágenes se subirán al directorio con el nombre uploads, este directorio lo creo manualmente y le puedes pone el nombre que desees. Para instalar Multer, ejecuto el siguiente comando en la consola de comandos:

Template Engine EJS

Podemos usar HTML simple para cargar las vistas que crearé con Bootstrap 5, pero es solo HTML y si queremos enviar datos dinámicamente desde Node JS a las vistas, por ejemplo si queremos enviar datos desde la base de datos o enviar variables personalizadas, es recomendable usar un motor de plantillas, yo usaré el motor de plantillas EJS porque me permite usar HTML estándar, el cual necesitaré para crear los elementos de la interface con Bootstrap 5. Si quieres usar otro motor de plantilla, puedes ver esta lista en la página oficial de Express.

Para instalar EJS, ejecuto el siguiente comando en la consola de comandos:


Luego de instalar el motor de plantilla o template engine EJS, ahora pasaré a instalar una extensión de sesiones para Express.

Express Session

El paquete express-session nos servirá para mostrar los mensajes después que una tarea haya sido realizada. Para instalarlo ejecuto el siguiente comando:


Por ejemplo cuando se realiza la tarea Crear, el sistema mostrará el mensaje Producto Creado Correctamente !, y express-session nos permite gestionar contextos para enviar los mensajes.

Express Flash

Este paquete nos permite pasar parámetros desde el controlador a la vista, para instalar express-flash ejecuto el siguiente comando:

Los parámetros que pasaré son para los mensajes luego de una tarea realizada.

Bien con esto entonces terminamos de crear el proyecto con Node JS para nuestro sistema CRUD y verificamos que este funcione bien. Asimismo agregamos ciertas dependencias necesarias, para que el proyecto funcione adecuadamente.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte vamos a configurar la base de datos.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.