DESARROLLO DE UN SISTEMA CRUD BASADO EN FULL STACK

Entregable 1

Versión:
Fecha: 22/06/2021
 HOJA DE CONTROL

Universidad Central del Ecuador

Institución
Facultad de Ingeniería y Ciencias Aplicadas
Proyecto Desarrollo de un sistema CRUD basado en Full Stack
-Jamil Sebastián Arellano Cepeda jsarellano@[Link]
Autores -Baquero Parra Nelson Ricardo nrbaquero@[Link]
-Mayra Rocío Tituaña Collaguazo mrtituana@[Link]
Versión/Edición Fecha Versión 22/06/2021
Aprobado por Fecha Aprobación 22/06/2021
Nº Total de Páginas

REGISTRO DE CAMBIOS

Fecha del
Versión Causa del Cambio Responsable del Cambio
Cambio
Jamil Sebastián Arellano Cepeda
0100 Versión inicial y desarrollo Baquero Parra Nelson Ricardo 18/06/2021
Mayra Rocío Tituaña Collaguazo
Jamil Sebastián Arellano Cepeda
0101 Presentación Previa Baquero Parra Nelson Ricardo 18/06/2021
Mayra Rocío Tituaña Collaguazo
Jamil Sebastián Arellano Cepeda
0102 Presentación Final Baquero Parra Nelson Ricardo 30/06/2021
Mayra Rocío Tituaña Collaguazo

2
Contenido
1. INTRODUCCIÓN.....................................................................................................5
1.1. Alcance...............................................................................................................5
1.2. Objetivos.............................................................................................................6
2. INFORMACIÓN DEL DOMINIO DEL PROBLEMA............................................6
2.1 Introducción al Dominio del Problema...............................................................6
2.1.1 Estructura de MEAN Stack...........................................................................6
2.1.2 Estructura de MERN Stack...........................................................................7
3. ENTORNO TECNOLÓGICO ACTUAL.................................................................7
3.1 Descripción del Entorno de Software Actual.....................................................7
4. MANUAL DE IMPLEMENTACIÓN....................................................................10
4.1 Instrucciones de implementación..............................................................................10
4.1.1 Implementación de MongoDB.....................................................................10
4.1.2 Implementación del ambiente de ejecución [Link]..................................11
4.1.3 Implementación del servidor web Express.................................................12
4.1.4 Implementación de un proyecto React.......................................................14
4.1.5 Implementación de un proyecto Angular...................................................15
4.2 CRUDS con MEAN y MERN...................................................................................17
4.2.1 Instrucciones.................................................................................................17
5. ANEXOS.....................................................................................................................17
5.1 Capturas de pantalla..............................................................................................17
6. REFERENCIAS..........................................................................................................20

3
 ÍNDICE DE IMAGENES
Imagen 1: Estructura MEAN...........................................................................................6
Imagen 2: Estructura MERN...........................................................................................7
Imagen 3: Logo Windows 10..........................................................................................7
Imagen 4: Logo MongoDB.............................................................................................8
Imagen 5: Logo [Link]..............................................................................................8
Imagen 6: Logo Angular 2..............................................................................................9
Imagen 7: Logo [Link].................................................................................................9
Imagen 8: Logo React...................................................................................................10
Imagen 9: Logo .Net......................................................................................................10

ÍNDICE DE ILUSTRACIONES
Ilustración 1: Configuración de Docker........................................................................11
Ilustración 2: Página Web [Link].................................................................................11
Ilustración 3: Instalador de [Link]...............................................................................12
Ilustración 4: Versión de [Link]..................................................................................12
Ilustración 5: Inicialización de un proyecto Node,js.....................................................13
Ilustración 6: Instalación de Express.............................................................................13
Ilustración 7: Código de una aplicación Express...........................................................14
Ilustración 8: Declaración de un Script en [Link]...............................................14
Ilustración 9: Generación de un proyecto React............................................................15
Ilustración 10: Ejecución de un proyecto React............................................................15
Ilustración 11: Instalación de CLI de Angular..............................................................16
Ilustración 12: Generación de un proyecto de Angular.................................................16
Ilustración 13: Ejecución de un proyecto Angular........................................................16

4
1. INTRODUCCIÓN

El proceso de desarrollo web implica el uso de infinidad de tecnologías y

herramientas. Entre ellas se pueden encontrar librerías, servicios web, paquetes o
Frameworks para back o frontend1 y sistemas de bases de datos. Hoy en día, los
desarrolladores utilizan la estrategia de combinar varias de estas herramientas o
tecnologías para facilitar el proceso de desarrollo de las aplicaciones (Madrid, 2018).
Una de estas combinaciones da lugar a MEAN STACK2, donde MEAN es un
acrónimo de MongoDB3 (Sistema de base de datos), Express 4 (Framework para
backend), Angular 25 (Framework para frontend) y [Link] 6 (Entorno de ejecución que
se lleva a cabo en el servidor).
Otra combinación es MERN STACK7, donde MERN de igual manera es un
acrónimo parecido a Mean, pero con su gran diferencia que en vez de aplicar Angular 2,
utiliza React8, siendo una biblioteca de JavaScript para construir interfaces de usuario.
Finalmente, ambas combinaciones dan paso a una estructura llamada Full Stack 9,
siendo esta una de las más importantes estructuras, ya que, quien la maneje se obtendrá
más oportunidades laborales.

1.1. Alcance

El presente proyecto contempla todas las actividades necesarias para realizar una
plataforma capaz de gestionar una lista de tareas pendientes, con funcionalidades
como:
 Crear una nueva tarea pendiente.
 Modificar la tarea pendiente.
 Buscar las tareas pendientes.
 Eliminar una tarea pendiente.
 Marcar una tarea como realizada.
Las tareas empiezan por construir una base de datos utilizando MongoDB,
pasando a crear la estructura del proyecto, crear la conexión con la base de datos,
codificar las vistas para la interfaz de usuario. Estas actividades se realizarán para
cada STACK mencionado.
El proyecto se limita solamente a las funcionalidades descritas con anterioridad.

1
[Link]
2
[Link]
3
[Link]
4
[Link]
5
[Link]
6
[Link]
7
[Link]
8
[Link]
9
[Link]

5
 1.2. Objetivos

1.2.1. Objetivo general

 Aplicar el modelo Full Stack siguiendo las estructuras de Mean Stack y Mern
Stack, mediante la creación de un Sistema CRUD.

1.2.2. Objetivos específicos

 Entender cuál es la estructura de Mean (MongoDB, Express, Angular 2,

[Link]) y Mern Stack (MongoDB, Express, React, [Link]).
 Analizar conceptos de backend y frontend.
 Investigar la relación de [Link] con React.

2. INFORMACIÓN DEL DOMINIO DEL PROBLEMA

2.1 Introducción al Dominio del Problema

2.1.1 Estructura de MEAN Stack

Es una combinación muy famosa y utilizada en la industria debido a la

unificación de un lenguaje de programación: JavaScript y un entorno de ejecución:
NodeJS para el desarrollo web desacoplado, donde la vista se renderiza en el cliente
directamente y se comunica con el servidor mediante la utilización de APIs, se puede
visualizar esto en la imagen siguiente:

Imagen 1: Estructura MEAN

Fuente:[CITATION Est \l 12298 ]

6
 2.1.2 Estructura de MERN Stack

Al igual que con una aplicación web , se divide la pila MERN en dos bloques:
un back-end y un front-end. A continuación se muestra un diagrama que ayudará a
visualizar cómo se distingui los dos bloques que forman la pila MERN, con el front-end
a la izquierda y el back-end a la derecha. Finalmente, a la derecha, se verá la base de
datos MongoDB, que almacena los datos utilizados en la aplicación o software .

Imagen 2: Estructura MERN

Fuente:[CITATION Mic21 \l 12298 ]

3. ENTORNO TECNOLÓGICO ACTUAL

El entorno de hardware tecnológico actual del grupo de trabajo es variado, debido a

los equipos tecnológicos que posee cada integrante de este proyecto, mientras que el
entorno de software es igual.

3.1 Descripción del Entorno de Software Actual

El entorno de software actual de todos los miembros del grupo es un Sistema

Operativo Windows 10, como se puede observar en la Imagen 1.

Imagen 3: Logo Windows 10

Fuente:[CITATION Win \l 12298 ]

7
 También se describen los programas utilizados para el desarrollo de la estructura
Full Stack, mediante MEAN STACK donde se refiere a la combinación de las
siguientes tecnologías:
MongoDB
Es una base de datos NoSQL10 especialmente útil en aplicaciones escalables.
Permite que los esquemas cambien rápidamente cuando las aplicaciones empiezan a
crecer. Utiliza un estándar JavaScript Object Notattion, o JSON 11, para la manipulación
de datos; lo cual es importante ya que MEAN busca una comunicación sencilla entre
clientes y servidor a la hora de tratar con los datos(Madrid, 2018).

Imagen 4: Logo MongoDB

Fuente: [ CITATION Mon21 \l 12298 ]

[Link]
Es un framework de desarrollo de aplicaciones web minimalista y flexible, de los mas
usados por la comunidad de usuarios de [Link]. Esta inspirado en Sinatra 12, un
conocido framework de Ruby; y basado en Connect 13, otro framework extensible de
manejo de servidores HTTP (Fernández Aranda, 2018).

Imagen 5: Logo [Link]

Fuente: [CITATION And21 \l 12298 ]

Angular 2
La ultima tendencia en el desarrollo web es la creación de aplicaciones SPA 14, o
Single Page Application. Son clientes completos implementados con HTML, CSS y
JavaScript que se comunican con el servidor web a través de una API REST. Angular 2
es un framework especialmente diseñado para crear aplicaciones web SPA (Madrid,
2018).

10
[Link]
11
[Link]
12
[Link]
13
[Link]
14
[Link]

8
 Imagen 6: Logo Angular 2

Fuente:[CITATION Spr21 \l 12298 ]

[Link]
Es un entorno de ejecución para JavaScript que se ejecuta en el servidor. Esta
desarrollado en el motor v8 de JavaScript15 de Google, lo que da lugar a que compile o
ejecute código JavaScript a gran velocidad (De et al., 2000).

Imagen 7: Logo [Link]

Fuente:[ CITATION Nod21 \l 12298 ]

De manera similar, se presenta la estructura de MERN STACK con los

siguientes programas MongoDB, [Link], React y [Link]. Siendo React la
diferencia con la estructura de Mean Stack.
React16
Es una librería Javascript focalizada en el desarrollo de interfaces de usuario. Así
se define la propia librería y evidentemente, esa es su principal área de trabajo. Sin
embargo, lo cierto es que en React encontramos un excelente aliado para hacer todo tipo
de aplicaciones web, SPA (Single Page Application) o incluso aplicaciones para
móviles. Para ello, alrededor de React existe un completo ecosistema de módulos,
herramientas y componentes capaces de ayudar al desarrollador a cubrir objetivos
avanzados con relativamente poco esfuerzo (Subramanian, 2019).

15
[Link]
16
[Link]

9
 Imagen 8: Logo React

Fuente:[ CITATION Rea21 \l 12298 ]

También se presenta la estructura de .Net17, donde la pila .NET se adapta

perfectamente a JAMstack y se puede usar el servidor MS SQL como base de datos, IIS
o [Link] WebAPI como servidor y Angular, React o [Link] para la interfaz.

Imagen 9: Logo .Net

Fuente:[CITATION Her211 \l 12298 ]

4. 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-
[Link]”. 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-
[Link]” 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”.

17
[Link]

10
 Ilustración 1: Configuración de Docker

4.1.2 Implementación del ambiente de ejecución [Link]

El siguiente paso es instalar [Link], para esto vamos a ir a su página web:
[Link] y descargar la versión LTS (Long Time Support) disponible.

Ilustración 2: Página Web [Link]

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

Ilustración 3: Instalador de [Link]

Para asegurarnos que instalamos [Link] 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 [Link]

4.1.3 Implementación del servidor web Express

[Link] 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.

12
 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

13
 A continuación creamos un archivo [Link] 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 [Link]. Específicamente agregamos un
atributo llamado “start”:

Ilustración 8: Declaración de un Script en [Link]

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.

14
 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.

15
 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

16
 4.2 CRUDS con MEAN y MERN
Se realizó ejemplos de aplicaciones utilizando los pasos anteriores y se los recopiló
en un único repositorio al cual puede acceder aquí:
[Link]
4.2.1 Instrucciones
1. Ingresar al directorio db y ejecutar el comando “docker-compose up”
para levantar el contenedor con la base de datos.
2. Ingresar al directorio backend/express, ejecutar el comando “npm install”
para instalar las dependencias y “npm run dev” para ejecutar el servidor
web.
3. Ingresar al directorio frontend donde se encuentran los ejemplos de
Angular y React.
a. Para ejecutar el proyecto de Angular, ingresar en el directorio
angular-demo, instalar las dependencias con “npm install” e
iniciar la aplicación con “ng serve -o”.
b. Para ejecutar el proyecto de React, ingresar en el directorio react-
demo, instalar las dependencias con “npm install” e iniciar la
aplicación con “npm start”.

5. ANEXOS
5.1 Capturas de pantalla

A continuación, se presenta un prototipo de la aplicación que se desarrolló, esto

se puede visualizar en las imágenes siguientes.

MEAN STACK
a) Pantalla de creación de una nueva tarea.

17
 b) Pantalla de listar tareas.

c) Pantalla de editar una tarea.

MERN STACK
a) Pantalla de creación de una tarea

18
b) Pantalla de listar tareas.

c) Pantalla de editar una tarea.

19
6. REFERENCIAS

De, E., Programa, P., Doctorado, D., Paola, Y., Coila, A., Optar, P., Grado, E., & De, A.
(2000). Universidad Nacional Del Altiplano. UNIVERSIDAD NACIONAL DEL
ALTIPLANO, 2006–2011.
Fernández Aranda, Ó. (2018). Aplicación de metodología Scrum para el desarrollo de
una API web de gestión médica con MEAN Stack. Universidad de Valladolid
Escuela, 181.
Madrid, C. D. E. (2018). Let’S Get Fitness – Desarrollo De Una Aplicación Web Con
Mean Stack. ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA DE SISTEMAS.
Subramanian, V. (2019). Pro MERN Stack. In Pro MERN Stack.
[Link]

20