Crea una aplicación web con Node.js, MongoDB, Mongoose, Express y EJS - Parte I

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

MongoDB es una base de datos NoSQL, orientada a documentos JSON, mismo formato de datos que utiliza JavaScript, además de usarse de manera similar a través de funciones con sintaxis similar a JS, diferentes a las bases de datos SQL tradicionales.

Si miramos de cerca, ambas bases de datos tienen JavaScript en común, lo que facilita el uso de las dos tecnologías juntas, lo que las convierte en una excelente razón para usarlas juntas 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 e Delete).

Configurando Node.js

Para comenzar, instalemos Node.js. Haz clic aquí para ir al sitio web oficial del Node y en el botón verde grande para descargar el ejecutable para tu sistema operativo (se recomienda descargar la versión LTS). Después de la descarga, se instalarán Node.js y NPM, un administrador de paquetes de Node.

Una vez completada la instalación, instalaremos el módulo que será útil más adelante en este artículo. Crea un directorio para almacenar tus proyectos de Node y dentro del directorio a través de la terminal y con el 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, puedes crear aplicaciones web y API de forma muy rápida y cómoda. Lo que instalamos anteriormente es Express-generator, un generador de aplicaciones de ejemplo. Podemos observarlo usando la siguiente línea de comando:

El “-e” es para usar el motor de renderización (view-engine) EJS, mientras que “-git” deja tu proyecto listo para versionar con Git. Después de presionar Enter, se creará el proyecto. Si la terminal solicita confirmación, simplemente escribe 'y' y presiona Enter.

Luego de realizar el proceso anterior, ingresa a la carpeta e instala las dependencias. Quedará así:

Una vez completado y aún en la terminal, escribe:

El comando anterior hará que la aplicación predeterminada comience a ejecutarse. Abre tu navegador, escribe localhost:3000 y aparecerá la siguiente pantalla:

Configurando MongoDB

Ahora que tenemos la estructura básica, haremos algunos ajustes más a un archivo ubicado en la raíz de tu proyecto llamado package.json, el archivo de configuración de su proyecto. Es lo que determinará, por ejemplo, cuáles bibliotecas tienes como dependencias en tu proyecto.

Nuestro próximo paso será acceder al sitio oficial de MongoDB y descargarlo. Ve al menú superior derecho, haz clic en Products> MongoDB Community Edition> MongoDB Community Server y busca la última versión para el sistema operativo que utilizas. Si es Windows, ejecuta el ejecutable que extraerá los archivos en la carpeta de archivos de tu programa y funcionará normalmente.

Dentro de la carpeta de nuestro proyecto Node (creada previamente), debería haber una subcarpeta llamada data, donde almacenaremos nuestros datos de MongoDB.

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

Esto iniciará el servidor MongoDB. Si no se devuelve ningún error en la terminal, MongoDB está listo para usarse.

Para el ejemplo de hoy, recomiendo usar MongoDB Compass, que también encontrarás para descargar en el sitio web oficial de Mongo, 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 collection. En mi caso, utilicé la collection clientes y el proyecto webappbasica.

Quedando así:

Una de las mejores cosas de MongoDB es que utiliza JSON como estructura de datos. Si no conoces las estructuras de un documento JSON, te sugiero buscar en Internet antes de continuar.

Agreguemos un nuevo cliente a nuestra colección. También es siempre bueno recordar que si no deseas determinar la identificación de tu registro, MongoDB creará un id.

Haz clic en ADD DATA y luego en insert document:

Verás esto:

Ten en cuenta que arriba no determiné un id. A continuación el resultado:

Observa que el id se generó automáticamente por el propio MongoDB. Agrega algunos registros más para que tengas una base mínima para tu desarrollo y luego comenzaremos a interactuar verdaderamente con el servidor web + MongoDB.

Conectando MongoDB con Node

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

Escribe:

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

La línea de arriba buscará un archivo de variables de entorno en la raíz de tu proyecto, el cual debes crear con el nombre .enve y debe tener el siguiente contenido:

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

Ahora, para organizar nuestro acceso a los datos, crearemos un nuevo archivo que se llamará db.js en la raíz de nuestra aplicación Express(webappbasica). Este será el archivo encargado de conectar y manipular nuestra base de datos. Este archivo utilizará el controlador nativo de MongoDB. El documento se verá así:

Estas líneas cargarán un objeto de cliente de conexión desde el módulo mongodb y luego realizarán la conexión a nuestra base de datos. Esta conexión se almacenará en una variable global del módulo.

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

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

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

Nota que la consulta se realiza de una manera muy directa: usamos la función que creamos anteriormente, nos conectamos para obtener la conexión y luego navegamos a la colección de clientes y hacemos un find sin ningún filtro que devuelva todos los clientes. El resultado de esta búsqueda es un cursor, por lo que es necesario utilizar toArray para convertirlo en un array y devolverlo.

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

Ahora escribiremos la lógica que utilizará esta función en el archivo ubicado en ./routes/index.js en el editor que usas. Te sugiero que uses VS Code. Dentro de index.js solo tenemos la ruta default, que es un get no path raíz.

Router.get define en qué ruta se manejará la solicitud con el verbo GET. Cuando recibimos un GET /, se activa la función callback de esa ruta y, con eso, se usa el findAll hecho anteriormente. Como esta función es asincrónica, necesitamos usar la palabra await antes y try/catch para tratar posibles errores. El callback del router debe tener la palabra async antes de los parámetros de la función. Si no comprendes las funciones asincrónicas, sugiero investigar el tema antes de continuar.

A continuación, crearemos nuestra view para la lista de clientes. Ve a la carpeta ./views/ y edita el archivo index.js, quedando así:

Aquí decimos que el objeto docs, que será devuelto por la ruta que creamos anteriormente, se iterará con un forEach y sus objetos se actualizarán uno por uno para componer una lista desordenada con los nombres.

Esto será suficiente para que el listado funcione. Para que no sea necesario seguir eliminando y volviendo a cargar tu aplicación, cambia la script de start en tu package.json para lo siguiente:

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

Después de esto, abre tu navegador, ingresa en http://localhost:3000/userlist y observa el resultado. Si todo funciona, verás la lista de nombres agregados en tu base de datos.

En el próximo artículo, avanzaremos con más detalles interesantes en nuestro proyecto CRUD.