Título de la
Ane Aguinaga Amorós
Desarrollo de Aplicaciones Web – DWEC06
Curso: 2025/26
ÍNDICE
1. INTRODUCCIÓN
2. DIFERENTES APARTADOS DE LA TAREA
3. AUTOEVALUACIÓN
4. BIBLIOGRAFÍA
2
2
2
2
1. INTRODUCCIÓN
Desarrollar una aplicación web en Angular que mediante una API externa permita realizar operaciones
CRUD. Como era de temática libre, he utilizado la API publica https://jsonplaceholder.typicode.com
Para obtener los datos. He creado una web muy sencilla en el que la página home renderiza 9 post diferentes
(con paginación) y desde cada post se puede acceder a las opciones de borrado o ver detalles. En ver detalles
del post se pueden ver los comentarios hechos a ese post y los datos de los usuarios.
En el sidebar he incluido los enlaces a Home, Crear (permite crear tu propio post) y Gráficos (permite ver
charts con los post por usuarios y comentarios por usuarios).
2. ACLARACIONES:
La principal dificultad que he encontrado ha sido desplegar correctamente el código en GitHub Pages.
3. ENLACES:
Código de la Aplicación: https://github.com/BirtLH-DAW/dwec06-te-2526-aaguinaga-ux
Despliegue de la web: https://aaguinaga-ux.github.io/webCRUD/
VideoDemo:
https://drive.google.com/file/d/1nOHu2cmYVg8o8an_gbur__D0FWQydDS2/view?usp=drive_link
4. Capturas de pantalla:
En la página home (post-list.component.ts) uso los métodos delete y get para renderizar la vista de posts y borrarlos
al seleccionar un post.
1
En post-detail.component.ts he hecho llamadas a los métodos update y getById:
En créate-post.component.ts empleo el método post para crear posts mediante un formulario:
AUTOEVALUACION: (7)
•
•
•
Ejercicio 1 Estructura (6):
o Navegación: tiene una barra de navegación funcional con enlaces a las distintas secciones de
la aplicación.
o Componentes: la aplicación está dividida correctamente en múltiples componentes.
o Modelo de datos: no está definido un modelo de datos para la comunicación de la API y la
gestión interna de la información.
Ejercicio 2 Crud (8):
o Servicios y conexión API: no he implementado un servicio Angular que centralice las
llamadas HTTP.
o Create: incluye un formulario funcional con validaciones básicas.
o Read: muestra datos en pantalla desde la API: all y ById al click en el botón ‘ver detalles’
o Update: permite modificar datos existentes.
o Delete: permite eliminar registros desde la interfaz.
Ejercicio 3 (6): gráficos añadidos.
2
3