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:
- Que es y Como instalar Node JS
- Como Crear tu Primera Aplicación Hola Mundo con Node JS 10
- 5 Principales Frameworks para Node JS
- Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 1
- Gestión de Perdida o Fuga de Memoria en Node JS – Parte 1
- Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 1
- Como Programar Tareas en Node JS
- Las 5 Mejores Herramientas Para Monitorear Servidores Node JS
- Puedes leer más en la categoría Node JS
- Que es Bootstrap, Historia y tu Primer Hola Mundo
- Como Crear una Página Web con Bootstrap 5 – Parte 1
- Puedes leer más en la categoría Bootstrap.
Asimismo, te invito a escuchar el Podcast: “Porque El Lenguaje De Programación Python Es Tan Popular” y “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:
|
1 2 3 4 |
# Comando para crear un nuevo proyecto en Node JS npm init |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "name": "crud-nodejs19-bootstrap5", "version": "1.0.0", "description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "crud", "node", "js" ], "author": "Nube Colectiva", "license": "ISC" } |
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.
|
1 2 3 4 |
/crud-nodejs19-bootstrap5 ├── package.json // Se me ha creado este Archivo |
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:
|
1 2 3 4 5 |
/crud-nodejs19-bootstrap5 ├── app.js // Creo este Archivo ├── package.json |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var http = require('http'); var server = http.createServer(); function Servidor(petic, resp) { resp.writeHead(200, {'content-type': 'text/plain'}); resp.write('Hola Mundo !'); resp.end(); } server.on('request', Servidor); server.listen(3000, function () { console.log('La Aplicación está funcionando en el puerto 3000'); }); |
Ahora en mi consola ejecuto el siguiente comando para iniciar el servidor:
|
1 2 3 4 5 6 |
# Comando para iniciar mi servidor en Node JS node app La Aplicación está funcionando en el puerto 3000 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install express --save added 57 packages, and audited 58 packages in 2s 7 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install mysql --save added 12 packages, and audited 70 packages in 3s 7 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install --save-dev nodemon added 32 packages, and audited 102 packages in 2s 10 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 |
/crud-nodejs19-bootstrap5 ├── /node_modules ├── app.js ├── package.json // Abro este archivo ├── package-lock.json |
Dentro del archivo package.json agrego dentro de la sección scripts, la línea “start”: “nodemon server”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "name": "crud-nodejs19-bootstrap5", "version": "1.0.0", "description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon server" }, "keywords": [ "crud", "node", "js" ], "author": "Nube Colectiva", "license": "ISC", "dependencies": { "bootstrap": "^5.2.3", "express": "^4.18.2", "mysql": "^2.18.1" }, "devDependencies": { "nodemon": "^2.0.20" } } |
Entonces a partir de ahora iniciaré el servidor de Node JS, ejecutando el siguiente comando:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
npm start > crud-nodejs19-bootstrap5@1.0.0 start > nodemon server [nodemon] 2.0.20 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node server app.js` Server is listening on port 3000 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install --save bootstrap added 2 packages, and audited 104 packages in 2s 12 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install body-parser --save up to date, audited 104 packages in 984ms 12 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install multer --save added 11 packages, and audited 115 packages in 4s 13 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install ejs --save added 12 packages, and audited 132 packages in 3s 15 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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:
|
1 2 3 4 5 6 7 8 9 10 |
npm install express-session --save added 5 packages, and audited 132 packages in 5s 15 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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
|
1 2 3 4 5 6 7 8 9 10 |
npm install express-flash --save added 2 packages, and audited 134 packages in 2s 15 packages are looking for funding run `npm fund` for details found 0 vulnerabilities |
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.