Glab S10 Jcastaneda 2023 Ii

Desarrollo de Aplicaciones Web Avanzado
Dpto. de Informática Pág. 1

Alumno(s): Nota
Grupo: Ciclo:V
Requiere No
Excelente Bueno Puntaje
Criterio de Evaluación mejora acept.
(4pts) (3pts) Logrado
(2pts) (0pts)
Entiende cómo funcionan los Componentes en
Angular
Diseña aplicación con Componentes
Desarrolla el funcionamiento de la aplicación
Realiza con éxito lo propuesto en la tarea.
Es puntual y redacta el informe
adecuadamente
Objetivos:
Al finalizar el laboratorio el estudiante será capaz de:
 Entender el funcionamiento ReactiveForms de Angular
 Desarrollar aplicaciones web con el ReactiveForms de Angular
 Implementación correcta de componentes
Seguridad:
 Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio.

 No ingresar con líquidos, ni comida al aula de Laboratorio.
 Al culminar la sesión de laboratorio apagar correctamente la
computadora y la pantalla, y ordenar las sillas utilizadas.
Equipos y Materiales:
 Una computadora con:

o Windows 7 o superior
o Conexión a la red del laboratorio
 Instalador de node.js
 Instalar la angular CLI.
Procedimiento Backend (API-Rest):
1. Crear un proyecto NodeJS llamado servidor e instalar las dependencias

respectivas para obtener el siguiente Package.Json:

2. Crear un archivo index.js en la raíz del proyecto con el siguiente Código:

3. Crear las siguientes carpetas:
4. En la carpeta routes crear el archivo usuario.js con el siguiente código:
Y el archivo producto.js con el siguiente código:

5. En la carpeta models crear el archivo User.js con el siguiente código:
Y el archivo Producto.js con el siguiente código:

6. En la carpeta controllers crear el archivo userController.js con el

siguiente código:

Y el archivo productoControllers.js con el siguiente código:

7. En la carpeta config crear el archivo db.js con el siguiente código:
el archivo global.js con el siguiente código:

Y el archivo verifyToken.js con el siguiente código:
Procedimiento Frontend (Angular CLI):
1. Crear un proyecto Angular llamado sistema con método de ruteo y css

para los estilos.
2. Crear la carpeta assets y dentro colocar todas las dependencias de la

plantilla Luna:

3. Dentro de la carpeta app crear las carpetas models, pages y services.
4. En el archivo index.html de la raíz del proyecto colocar el siguiente

código:

5. En el archivo app-routing.module.ts de la carpeta app colocar el

siguiente código:
6. En el archivo app.component.html de la carpeta app colocar el siguiente

código:
7. En el archivo app.module.ts de la carpeta app colocar el siguiente

código:

8. Instalar SweetAlert2 a nuestro proyecto angular mediante la sentencia:
9. Configurar SweetAlert2 dentro del archivo angular.json:
10. Crear el componente navbar con el siguiente comando
11. Crear el componente productos con el siguiente comando
crear los componentes: editar-productos, listar-productos y ver-productos.

12. Crear el componente create-users con el siguiente comando:
13. Crear el componente login con el siguiente comando:
14. En el componente navbar verificar la creación de nuestros archivos y

eliminar el de testeo. Luego editar el archivo navbar.component.html y
colocar el siguiente codigo:

En el archivo navbar.components.ts colocar el siguiente código:
15. En el componente crear-productos verificar la creación de nuestros

archivos y eliminar el de testeo. Luego editar el archivo crear-
productos.component.html y colocar el siguiente código:

16. En el archivo crear-productos.component.ts colocar el siguiente código:


17. En el componente editar-productos verificar la creación de nuestros

archivos y eliminar el de testeo. Luego editar el archivo editar-
18. En el archivo editar-productos.component.ts colocar el siguiente código:


19. En el componente listar-productos verificar la creación de nuestros

archivos y eliminar el de testeo. Luego editar el archivo listar-

20. En el archivo listar-productos.component.ts colocar el siguiente código:


21. En el componente create-user verificar la creación de nuestros archivos

y eliminar el de testeo. Luego editar el archivo create-
user.component.html y colocar el siguiente código:
22. En el archivo create-users.component.ts colocar el siguiente código:
23. En el componente login verificar la creación de nuestros archivos y

eliminar el de testeo. Luego editar el archivo login.component.html y
colocar el siguiente código:

24. En el archivo login.component.ts colocar el siguiente código:

25. Crear el servicio producto que conectara el Frontend con el Backend

con la siguiente linea de codigo.
26. Crear el servicio data-login que conectara el Frontend con el Backend

con la siguiente linea de codigo.
27. Dentro del archivo producto.service.ts colocar el siguiente codigo:
28. Dentro del archivo data-login.service.ts colocar el siguiente codigo:

29. Ejecutar por separado el proyecto sistema y el proyecto servidor.
Conclusiones:
Indicar las conclusiones que llegó después de los temas tratados de manera
práctica en este laboratorio.


Glab S10 Jcastaneda 2023 Ii

Cargado por

Información del documento

Título 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

Glab S10 Jcastaneda 2023 Ii

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Aplicaciones Web Avanzado

Dpto. de Informática Pág. 1

 Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio.

 Una computadora con:

Procedimiento Backend (API-Rest):

1. Crear un proyecto NodeJS llamado servidor e instalar las dependencias

Dpto. de Informática Pág. 2

2. Crear un archivo index.js en la raíz del proyecto con el siguiente Código:

Dpto. de Informática Pág. 3

3. Crear las siguientes carpetas:

4. En la carpeta routes crear el archivo usuario.js con el siguiente código:

Y el archivo producto.js con el siguiente código:

Dpto. de Informática Pág. 4

5. En la carpeta models crear el archivo User.js con el siguiente código:

Y el archivo Producto.js con el siguiente código:

Dpto. de Informática Pág. 5

6. En la carpeta controllers crear el archivo userController.js con el

Dpto. de Informática Pág. 6

Y el archivo productoControllers.js con el siguiente código:

Dpto. de Informática Pág. 7

7. En la carpeta config crear el archivo db.js con el siguiente código:

el archivo global.js con el siguiente código:

Dpto. de Informática Pág. 8

Y el archivo verifyToken.js con el siguiente código:

Procedimiento Frontend (Angular CLI):

1. Crear un proyecto Angular llamado sistema con método de ruteo y css

2. Crear la carpeta assets y dentro colocar todas las dependencias de la

Dpto. de Informática Pág. 9

3. Dentro de la carpeta app crear las carpetas models, pages y services.

4. En el archivo index.html de la raíz del proyecto colocar el siguiente

Dpto. de Informática Pág. 10

5. En el archivo app-routing.module.ts de la carpeta app colocar el

6. En el archivo app.component.html de la carpeta app colocar el siguiente

7. En el archivo app.module.ts de la carpeta app colocar el siguiente

Dpto. de Informática Pág. 11

8. Instalar SweetAlert2 a nuestro proyecto angular mediante la sentencia:

9. Configurar SweetAlert2 dentro del archivo angular.json:

10. Crear el componente navbar con el siguiente comando

11. Crear el componente productos con el siguiente comando

crear los componentes: editar-productos, listar-productos y ver-productos.

Dpto. de Informática Pág. 12

12. Crear el componente create-users con el siguiente comando:

13. Crear el componente login con el siguiente comando:

14. En el componente navbar verificar la creación de nuestros archivos y

Dpto. de Informática Pág. 13

En el archivo navbar.components.ts colocar el siguiente código:

15. En el componente crear-productos verificar la creación de nuestros

Dpto. de Informática Pág. 14

16. En el archivo crear-productos.component.ts colocar el siguiente código:

Dpto. de Informática Pág. 15

Dpto. de Informática Pág. 16

17. En el componente editar-productos verificar la creación de nuestros

18. En el archivo editar-productos.component.ts colocar el siguiente código:

Dpto. de Informática Pág. 17

Dpto. de Informática Pág. 18

19. En el componente listar-productos verificar la creación de nuestros

Dpto. de Informática Pág. 19

20. En el archivo listar-productos.component.ts colocar el siguiente código:

Dpto. de Informática Pág. 20

Dpto. de Informática Pág. 21

21. En el componente create-user verificar la creación de nuestros archivos

22. En el archivo create-users.component.ts colocar el siguiente código:

23. En el componente login verificar la creación de nuestros archivos y