1.

MANUAL DE IMPLEMENTACIÓN

4.1 Instrucciones de implementación

Empecemos por la implementación de la base de datos MongoDB.

4.1.1 Implementación de MongoDB
Requisitos:
 Docker
 Docker compose
Creamos un directorio llamado “db” y agregamos un archivo llamado “docker-
compose.yml”. Este archivo nos permitirá configurar los contenedores necesarios, en
este caso la base de datos MongoDB y un explorador de documentos llamado Mongo
Express.
En el ejemplo a continuación se muestra un archivo de configuración “docker-
compose.yml” con una instancia de mongodb expuesta en el puerto 27017 y una
instancia de mongo-express expuesta en el puerto 8081, además, el usuario
administrador es “root” y su contraseña es “12345678”.

Ilustración 1: Configuración de Docker

 4.1.2 Implementación del ambiente de ejecución Node.js
El siguiente paso es instalar Node.js, para esto vamos a ir a su página web:
https://nodejs.org y descargar la versión LTS (Long Time Support) disponible.

Ilustración 2: Página Web Node.js

A continuación, ejecutamos el instalador y seguimos las instrucciones en pantalla.

Ilustración 3: Instalador de Node.js

 Para asegurarnos que instalamos Node.js exitosamente, ejecutamos el comando
“node -v” en una terminal. Debería respondernos con la versión de node actualmente
instalada.

Ilustración 4: Versión de Node.js

4.1.3 Implementación del servidor web Express

Node.js trae dos paquetes adicionales que nos ayudan a crear proyectos e instalar
dependencias en ellos, llamados npm (Node Package Manager) y npx (Node Package
Runner). Para inicializar un proyecto, creamos el directorio del proyecto y en una
terminal dentro del directorio, utilizamos “npm init”.
El generador de proyectos nos hará unas preguntas, podemos dejar todo en
blanco o responder cosas como el nombre del proyecto, descripción, versión inicial,
autor, repositorio entre otros.
 Ilustración 5: Inicialización de un proyecto Node,js

Una vez creado el proyecto, procedemos a la instalación de la dependencia

Express. Para instalar librerías en proyectos de node, utilizamos el comando “npm
install <<librería>>”, en el caso actual utilizaremos “npm install express”.

Ilustración 6: Instalación de Express

 A continuación creamos un archivo index.js donde el código mínimo requerido
para inicializar un servidor web con express es el siguiente:

Ilustración 7: Código de una aplicación Express

Para inicializar el proyecto, utilizamos “node .”. Una buena práctica es agregar
un alias en la sección de script del archivo package.json. Específicamente agregamos un
atributo llamado “start”:

Ilustración 8: Declaración de un Script en package.json

De esta manera, inicializar los proyectos de node se vuelve más fácil, solo se
debe escribir el comando “npm start”.
4.1.4 Implementación de un proyecto React
React es una librería de interfaces visuales, pero posee un instalador que
configura todas las dependencias necesarias para convertirlo en un framework SPA
(Single Page Application) completo.
El instalador se llama Create React App y se utiliza de la siguiente manera: en
un directorio cualquiera, que se desee usar como directorio padre del proyecto, iniciar
una terminal y ejecutar el comando “npx create-react-app mi-app” donde mi-app puede
cambiar por el nombre que desees ponerle a tu aplicación.
 Ilustración 9: Generación de un proyecto React

Una vez finalizada la creación del proyecto, ingresamos al directorio donde se

generó (cd mi-app) y ejecutamos el comando “npm start” para iniciarlo, generalmente
utilizará el puerto 3000 para ejecutarse. En caso de que ya se encuentre en uso por otra
aplicación, le preguntará si desea utilizar otro puerto.

Ilustración 10: Ejecución de un proyecto React

4.1.5 Implementación de un proyecto Angular
Angular por otro lado, es un framework de desarrollo web completo, por lo tanto
utiliza su CLI (Command Line Interface) no solo para generar nuevos proyectos, sino
también para agregar dependencias, temas, componentes, módulos, entre otros.
 Para utilizar el CLI de Angular, lo instalaremos con el comando “npm install -g
@angular/cli”, este comando se instalará globalmente y podrá ser utilizado desde
cualquier directorio.

Ilustración 11: Instalación de CLI de Angular

Para generar un nuevo proyecto con Angular, utilizamos el comando “ng new
mi-app” donde mi-app puede cambiar por el nombre que desees ponerle a la aplicación.

Ilustración 12: Generación de un proyecto de Angular

Una vez creado el proyecto, debe ingresar al directorio (cd mi-app) y ejecutar el
comando “ng serve -o”, la aplicación se ejecutará en el puerto 4200.

Ilustración 13: Ejecución de un proyecto Angular