Cómo crear una aplicación con Node.js con MongoDB, Mongoose, Express y EJS

En el artículo de hoy entenderemos cómo crear una aplicación web básica, solo con listado y registro, utilizando Node.js, Express, EJS, Mongoose y MongoDB. Para quienes aún no saben nada de Node.js, será un excelente lugar de aprendizaje.

MongoDB es una base de datos NoSQL, orientada a documentos JSON, el mismo formato de datos utilizado por JavaScript, además de ser utilizado de forma parecida a través de funciones con sintaxis similar a JS, diferente de las bases de datos SQL tradicionales.

Si observamos bien, ambas bases de datos tienen en común JavaScript, facilitando el uso de las dos tecnologías en conjunto, siendo un excelente motivo para ser utilizadas juntas y con frecuencia en proyectos de todos los tamaños.

En resumen, el objetivo de este artículo será mostrar un primer contacto práctico con ambos, utilizando el famoso CRUD (Create, Retrieve, Update y Delete).

Configurando Node.js

Para comenzar, vamos a instalar Node.js. Haz clic aquí para ir al sitio oficial de Node y luego en el botón grande y verde para descargar el ejecutable para tu SO (se recomienda descargar la versión LTS). Después de descargarlo, se realizará la instalación de Node.js y NPM, que es un gestor de paquetes de Node.

Una vez completada la instalación, vamos a instalar el módulo que nos será útil más adelante en el artículo. Crea un directorio para guardar tus proyectos Node y dentro del directorio, vía terminal y con comando de permiso de administrador (sudo para Linux y Mac), ejecuta el siguiente comando:

Express es un framework web muy famoso para Node.js. Con él, es posible crear aplicaciones y APIs web de manera muy rápida y práctica. Lo que instalamos anteriormente es el generador de aplicaciones de ejemplo de Express. Podemos observarlo utilizando la siguiente línea de comando:

Arriba, el “-e” es para usar el motor de renderización (view-engine) EJS, y el “-git” prepara tu proyecto para su versionamiento con Git. Después de presionar enter, el proyecto será creado; si el terminal pide alguna confirmación, solo escribe ‘y’ y presiona enter.

Después de realizar el proceso anterior, entra en la carpeta y ejecuta la instalación de las dependencias, quedará de la siguiente forma:

Una vez concluido y aún en el terminal, escribe:

El comando anterior hará que la aplicación predeterminada inicie su ejecución. Abre tu navegador y escribe localhost:3000 y verás la siguiente pantalla:

Configurando MongoDB

Ahora que ya tenemos la estructura básica, haremos algunos ajustes en un archivo que se encuentra en la raíz de tu proyecto llamado package.json. Este es el archivo de configuración de tu proyecto. Por ejemplo, determinará qué bibliotecas tienes como dependencias en tu proyecto.

Nuestro siguiente paso será acceder al sitio oficial de MongoDB y descargar MongoDB. Ve al menú superior derecho, haz clic en Products > MongoDB Community Edition > MongoDB Community Server y busca la versión más reciente para el sistema operativo que utilizas. Si estás utilizando Windows, ejecuta el instalador que extraerá los archivos en tu carpeta de archivos de programas y funcionará normalmente.

Dentro de la carpeta de nuestro proyecto Node (creado anteriormente), deberá existir una subcarpeta llamada data. En este momento, crea esta carpeta. Es en ella donde almacenaremos nuestros datos de MongoDB.

Desde el símbolo del sistema, entra en la subcarpeta bin dentro de la carpeta de instalación de tu MongoDB y escribe:

Esto iniciará el servidor de MongoDB. Si no aparece ningún error en el terminal, MongoDB estará listo para usarse.

Para el ejemplo de hoy, recomiendo el uso de MongoDB Compass, que también encontrarás para descargar en el sitio oficial de MongoDB, haciendo clic en Products > Tools > MongoDB Compass.

Después de la descarga, abre Compass y haz clic en lo siguiente:

Luego, haz clic en Create Database:

Añade un nombre y una colección. En mi caso, utilicé la colección clientes y el proyecto webappbasica.

Quedando de la siguiente forma:

Una de las mejores cosas de MongoDB es que usa JSON como estructura de datos. Si no conoces las estructuras de un documento JSON, sugiero que investigues en internet antes de continuar.

Vamos a agregar un nuevo cliente a nuestra colección. También es bueno recordar que, si no quieres determinar el ID de tu registro, MongoDB creará un ID automáticamente.

Haz clic en ADD DATA y luego en Insert Document:

Quedando de la siguiente forma:

Nota que no determiné un ID. Luego, si observamos el resultado:

Observa que el ID fue generado automáticamente por MongoDB. Agrega algunos registros más para que tengas una base mínima para tu desarrollo y, a continuación, comenzaremos a interactuar de verdad con el servidor web + MongoDB.

Conectando MongoDB con Node

Nuestro siguiente paso será unir las dos tecnologías. Necesitaremos agregar una dependencia para que MongoDB funcione correctamente con esta aplicación.

Escribe en tu terminal:

Con este comando, se descargarán dos nuevas dependencias para tu carpeta node_modules y también se añadirán dos nuevas líneas de dependencias en el package.json que darán soporte a MongoDB y a las variables de entorno (con DotEnv). Estas variables de entorno deben ser las primeras en cargarse cuando la aplicación se inicie. A continuación, ve a la carpeta bin en el archivo www y añade esta línea al principio.

La línea anterior buscará un archivo de variables de entorno en la raíz de tu proyecto, que deberás crear con el nombre de .env y deberá tener el siguiente contenido:

La variable de la primera línea MONGO_HOST es la dirección de tu servidor MongoDB, utiliza siempre una IP, nunca localhost. La segunda variable MONGO_DATABASE será el nombre de tu base de datos.

Ahora, para organizar nuestro acceso a los datos, vamos a crear un nuevo archivo que se llamará db.js en la raíz de nuestra aplicación Express (webappbasica). Este será el archivo responsable por la conexión y manipulación de nuestra base de datos. Este archivo usará el driver nativo de MongoDB. El documento quedará así:

Estas líneas cargarán un objeto cliente de conexión a partir del módulo mongodb y luego harán la conexión con nuestra base de datos. Esta conexión será almacenada en una variable global del módulo.

A continuación, utilizando este archivo db., modificaremos nuestra ruta para que nos muestre datos provenientes de la base de datos.

Para poder listar los clientes, el primer paso es tener una función que retorne todos los clientes en nuestro módulo db.js (archivo creado arriba).

Agrega la siguiente función a tu db.js:

Nota que la consulta se hace de forma muy directa, usamos la función que creamos anteriormente connect para obtener la conexión y, a continuación, navegamos hasta la colección de clientes y realizamos un find sin ningún filtro que retorna todos los clientes. El resultado de este find es un cursor, siendo necesario usar toArray para convertirlo en un arreglo y retornarlo.

Observa que la última instrucción es “module.exports = {findAll}” indicando que podrá ser usada en otros puntos de la aplicación que importen nuestro módulo db.

Ahora, escribiremos la lógica que usará esta función. En el archivo que se encuentra en ./routes/index.js en el editor que uses (te sugiero que uses VS Code). Dentro de index.js tenemos solo la ruta por defecto, que es un get en el path raíz.

El router.get define en qué ruta se manejará la solicitud con el verbo GET. Cuando recibimos un GET /, se dispara la función callback de esa ruta y, con ello, se utiliza el findAll que hicimos anteriormente. Como esta función es asíncrona, necesitamos utilizar la palabra reservada await antes de ella; además, también es necesario un try/catch para manejar posibles errores. El callback del router debe tener la palabra async antes de los parámetros de la función. Si no entiendes las funciones asíncronas, te sugiero investigar sobre el tema antes de continuar.

A continuación, haremos nuestra vista para la lista de clientes. Ve a la carpeta ./views/ y edita el archivo index.js, quedando de la siguiente forma:

Aquí, indicamos que el objeto docs, que será retornado por la ruta que creamos anteriormente, será iterado con un forEach y sus objetos serán actualizados uno a uno para componer una lista no ordenada con los nombres.

Esto será suficiente para que la lista funcione. Para que no sea necesario estar deteniendo y reiniciando la aplicación, cambia el script de inicio en tu package.json por lo siguiente:

Ahora usa npm start nuevamente y cada vez que se realicen cambios, estos se cargarán automáticamente.

Después de esto, abre tu navegador, accede a http://localhost:3000/userlist y observa el resultado. Si todo está funcionando, verás la lista con los nombres añadidos a tu base de datos.

En el próximo artículo que traeré con la parte 2, seguiremos adelante con cosas más interesantes de hacer en nuestro proyecto CRUD.