Crear Aplicación Angular - NodeJS - MySQL

Universidad de San Carlos de Guatemala – Facultad de Ingeniería
Introducción a la Programación y Computación 2.

Segundo Semestre 2019
APLICACIÓN FRONT-END ANGULAR BACKEND NODEJS, BASE DE DATOS

MYSQL
Para la realización de este ejemplo se necesitan los siguientes requerimientos:
• Entorno de ejecución NodeJS versión 10.x o superior.

• Angular CLI versión 8.3 o superior
• MySQL Workbench
• Editor de código (Sublime Text, Visual Studio Code o cualquier otro)
• Entorno de desarrollo de APIs (Postman) opcional
Se realizará una aplicación para ver Mascotas virtuales de un usuario, iniciar

sesión y crear más mascotas.
BASE DE DATOS
Se crea una base de datos que es capaz de almacenar información de Usuarios
y Mascotas.
BACKEND
Se realiza la conexión a la base de datos desde una aplicación de NodeJS.
1. Crear aplicación de Nodejs

Se debe crear una nueva carpeta que contendrá nuestro proyecto, para
este ejemplo se creó la carpeta servidor_lab. Dentro de esta debemos
ejecutar el comando npm init, que iniciará una nueva aplicación en nodejs.
2. Instalar dependencias necesarias
Se debe correr los siguientes comandos (aún dentro de la carpeta creada)
para instalar las dependencias necesarias para el proyecto:
npm install mysql
npm install express –save npm
install body-parser npm install --
save-dev nodemon
3. Crear archivo para la conexión a la base de datos.
Dentro de la carpeta se debe crear un archivo, en el que se almacenará
las solicitudes que podremos utilizar desde el frontend, los query a la base
de datos y cualquier otra función que consideremos necesaria. Para este
ejemplo el archivo se llama conexion.js
4. Agregar dependencias
5. Para permitir las solicitudes del frontend debemos dar acceso a nuestro
backend con el siguiente código:
6. Crear conexión a la base de datos. En este ingresamos los datos de nuestro

usuario en mysql y el nombre de la base de datos que utilizaremos.
7. Probar conexión: podemos probar la conexión creando una función básica en

la que realicemos un select. Esto para confirmar que la conexión es posible.
Una vez creada la función, podemos correr el archivo, escribiendo desde la
consola ubicada en la carpeta el comando: node conexion.js
POSIBLE ERROR:
SOLUCION:
Correr el siguiente comando en MySQL Workbench
Después de esto el error debe desaparecer.
8. Crear solicitudes REST. REST es cualquier interfaz entre sistemas que use
HTTP para obtener datos o generar operaciones sobre esos datos en todos
los formatos posibles. Podemos responder solicitudes de tipo get, post, entre
otras. Para crear una solicitud de tipo get que devuelta todos los usuarios
podemos hacer los siguiente:
Donde ‘/usuarios’ es la ruta a la que accedemos para y de la que esperamos
nos devuelva el listado de usuarios. Para probarla podemos decirle el puerto
que está escuchando estas solicitudes con el siguiente código:
Volvemos a correr node conexion.js y podremos ver una respuesta como la

siguiente:
Podemos ir a nuestro navegador y escribir http
Dato que había ingresado anteriormente en mi base de datos.

De esta forma se deben crear las demás solicitudes, para este ejemplo se
muestra la consulta para el login, mostrar lista de mascotas y crear una nueva
mascota:
Todas las solicitudes pueden ser probadas utilizando Postman
APLICACIÓN ANGULAR
1. Crear Aplicación Angular con Bootstrap

Para esto se utiliza el comando ng new nombreapp. Utilizando CSS,
esperamos a que termine la creación del proyecto. Y accedemos a la
carpeta que se crea con nombre de la aplicación. Agregamos Bootstrap
utilizando el siguiente comando:
2. Accedemos a la carpeta src/app, que es la carpeta donde realizaremos los

componentes necesarios de la aplicación. Con el comando cd app/src
3. Creación de Modelos:
Los modelos son clases que utilizaremos para definir las Entidades que
creamos en MySQL y que utilizaremos dentro de nuestra aplicación en
Angular. Para ello creamos una carpeta Modelos y dentro de ella creamos
los modelos necesarios de la aplicación:
Los modelos para este ejemplo quedan de la siguiente manera:

4. Manejo de Rutas en Angular: Ya que Angular maneja una sola página y lo
único que cambia son los componentes a mostrar, creamos un RouterModule
con las rutas que vamos a utilizar, hacemos esto en el archivo app.module.ts
En este especificamos las rutas posibles y que componente deseamos

mostrar. Cuando el path este vacío lo redirigimos a la ruta de Login.
Tendremos que hacer el siguiente import
import { RouterModule, Routes } from '@angular/router';
Además debemos agregarlo en los imports de la siguiente manera:

Para mostrar al usuario las posibles rutas a las que puede ir, podemos crear
un navbar, haremos esto en el app.component.html
La función del <router-outlet> es manipular el DOM para inyectar un

componente u otro frente al cambio de una ruta. Es decir, que este navbar
se mostrará en los demás componentes que mostremos.
5. Creación de Componentes: Los componentes son la manera en que

construimos nuestras Apps diviendo la funcionalidad en pequeñas piezas que
luego al unirlas construyen una vista de un usuario. P ara comenzar
iniciaremos con el componente para ver todas las mascotas de un usuario.
Para este ejemplo creamos carpetas para los componentes. Una carpeta
para los componentes de mascotas (listar mascota, crear mascota) y otra
para los componentes de usuario (login usuario)
5.1. Componente para Listar Mascotas
Ng generate component mascotas/listaMascotas
Se creará una nueva carpeta con los siguientes archivos.
En el archivo .ts se maneja los datos que se mostrarán en el html. Ya que en

este mostraremos mascotas, se debe importar el modelo de mascota y crear un
arreglo que los almacene. En el archivo html se utiliza una vista de Bootstrap y
el iterador ngFor para crear los elementos html necesarios para mostrar a todas
las mascotas.
En el método ngOnInit se iguala el arreglo de mascotas a un arreglo que

recibimos desde NodeJS. Para esto hacemos uso de un servicio, que vamos a
crear a en el punto 6.
5.2. Componente para crear mascotas

Ng generate component mascotas/listaMascotas
Para este componente se hace uso de NgForm que es el manejo de
formularios de angular, utilizamos el router definido anteriormente para
cambiar el componente que se visualizar al terminar de crear una
mascota. Utilizamos el servicio de mascotas que utiliza el servicio del
backend para insertar una nueva mascota.
5.3. Componente Login

Igual que en el formulario para crear una mascota importamos el ngForm
y Router para cambiar la vista del usuario si ingresa bien su contraseña.
Se utiliza el servicio Login para que este busque la información en el
backend del usuario ingresado.
6. Creación de Servicios: Los servicios en Angular sirven para implementar la
parte de recibir y enviar datos, es decir, que los componentes no tratan con
la comunicación con servidores o datos directamente, sino que lo mejor es
delegar esta funcionalidad a los servicios. Lo servicios deben utilizar la
dependencia de Angular Injectable, y HttpClient ya que realiza solicitudes http
a nuestro servidor en nodejs, Para crear un servicio de Angular lo haremos
simplemente creando un archivo nuevo, con la extensión .ts. Debemos
importar Injectable, los modelos a utilizar, HttpClient, HttpHeader. Ademas de
incluir HttpClient en nuestro app-module. Por cada servicio que creamos,
debemos agregarlo a la sección de providers.
6.1. Servicio de Mascotas
Este servicio tiene dos funciones, listas mascotas y crear una nueva
mascota.
6.2. Servicio de Login

VISTA GENERAL DE LA APLICACIÓN
Pueden consultar el código de ambas aplicaciones en el siguiente link:
https://github.com/Alba21/Angular_NodeJs_MySQL.git

Crear Aplicación Angular - NodeJS - MySQL

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crear Aplicación Angular - NodeJS - MySQL

Cargado por

Copyright:

Formatos disponibles

Universidad de San Carlos de Guatemala – Facultad de Ingeniería

Introducción a la Programación y Computación 2.

APLICACIÓN FRONT-END ANGULAR BACKEND NODEJS, BASE DE DATOS

Para la realización de este ejemplo se necesitan los siguientes requerimientos:

• Entorno de ejecución NodeJS versión 10.x o superior.

Se realizará una aplicación para ver Mascotas virtuales de un usuario, iniciar

Se realiza la conexión a la base de datos desde una aplicación de NodeJS.

1. Crear aplicación de Nodejs

6. Crear conexión a la base de datos. En este ingresamos los datos de nuestro

7. Probar conexión: podemos probar la conexión creando una función básica en

Después de esto el error debe desaparecer.

Volvemos a correr node conexion.js y podremos ver una respuesta como la

Podemos ir a nuestro navegador y escribir http

Dato que había ingresado anteriormente en mi base de datos.

1. Crear Aplicación Angular con Bootstrap

2. Accedemos a la carpeta src/app, que es la carpeta donde realizaremos los

Los modelos para este ejemplo quedan de la siguiente manera:

En este especificamos las rutas posibles y que componente deseamos

import { RouterModule, Routes } from '@angular/router';

Además debemos agregarlo en los imports de la siguiente manera:

La función del <router-outlet> es manipular el DOM para inyectar un

5. Creación de Componentes: Los componentes son la manera en que

En el archivo .ts se maneja los datos que se mostrarán en el html. Ya que en

En el método ngOnInit se iguala el arreglo de mascotas a un arreglo que

5.2. Componente para crear mascotas

5.3. Componente Login

6.2. Servicio de Login

También podría gustarte