Prueba Técnica Angular 6+

Antes de empezar por favor leer la prueba completa y preguntar dudas sobre la
misma.

Consumir servicios API REST desde Angular 6 en adelante en formato JSON e

implementando un framework de CSS, HTML como Bootstrap 4 creando un administrador
básico y uso de rutas “routes” con angular; también uso de GIT en el proyecto.

1. Crear plantilla Iniciar sesión “Login” mediante correo y contraseña, validar datos
contra un usuario por defecto del sistema para ingresar a la web, guardar sesión en
el navegador; no se puede cargar la ruta principal “/” si no esta la sesión creada.

Ruta: http://localhost/login

// USER DEFAULT
{
"email":"info@yampi.co",
"password":"12345678"
}

2. En la ruta principal http://localhost/

● Mostrar barra de navegación donde muestre el correo y un botón de cerrar

sesión el cual al presionar borre los datos de sesión del navegador y envíe
al usuario a la ruta http://localhost/login

● Mostrar tabla con datos cargado desde la API.

Datos a mostrar en la tabla id, title, body y un botón de Eliminar

Link API metodo listar GET: https://jsonplaceholder.typicode.com/posts

// Estructura de los datos

[
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat",
"body": "et iusto sed quo iure\nvoluptatem"
} ……...
]
 ● Mostrar un botón de agregar el cual al presionar envíe al usuario a la ruta
http://localhost/add

3. En la ruta http://localhost/add
● Mostrar un formulario para ingresar title, body y un botón de enviar; el
formulario debe validar que los campos no esten vacios y al menos tengan
3 caracteres cada uno y mostrar mensaje de error si es el caso; si los datos
son correctos consumir el servicio API mediante POST y al recibir la
respuesta exitosa enviar al usuario a la ruta principal http://localhost/

Link API metodo agregar POST: https://jsonplaceholder.typicode.com/posts

// Estructura de los datos a enviar

{
"title": "exercitationem repellat qui ipsa sit aut",
"body": "occaecati omnis eligendi aut ad",
"userId": 1 // Poner por defecto
}

4. En la tabla al darle click en el id enviar al usuario a la ruta http://localhost/edit/1

pasando id por parámetro en la ruta.

● Mostrar formulario con title, body mostrando los datos consultados mediante
id y un botón de guardar.

Link API metodo GET consultar un elemento por id :

https://jsonplaceholder.typicode.com/posts/1

● Al presionar el botón guardar validar que los campos no esten vacios y al

menos tengan 3 caracteres cada uno y mostrar mensaje de error si es el
caso; si los datos son correctos consumir el servicio API mediante PUT y al
recibir la respuesta exitosa enviar al usuario a la ruta principal http://localhost/

Link API metodo actualiza PUT: https://jsonplaceholder.typicode.com/posts/1

// Estructura de los datos

{
"id": 1,
"title": "información editada",
"body": "body editado",
"userId": 1
}
 5. Al presionar en la tabla el botón de eliminar mostrar un mensaje en un “Popups o
Modals” desea eliminar el elemento con el id “Mostrar ID” y un botón de
confirmación.
● Si presiona el botón de confirmación consumir el servicio API mediante
DELETE pasando el id del elemento y al recibir la respuesta exitosa
actualizar la información de la tabla

Link API metodo eliminar DELETE:

https://jsonplaceholder.typicode.com/posts/1

Observaciones: Puede hacer uso de Angular CLI para la creación, estructura y despliegue
del proyecto; para las plantillas en HTML puede usar diseños ya creados en boostrap 4 de
su preferencia ejemplos https://getbootstrap.com/docs/4.4/examples/.

El proyecto tiene que estar subido en un repositorio publico en https://github.com/ y tiene

que contener un Leeme.md donde indique como se corre en entorno de desarrollo y
cómo realizar el despliegue en producción.

Solo debe enviar el link del repositorio

Gracias y muchos éxitos

"La función de un buen software es hacer que lo complejo aparente ser simple"
-- Grady Booch