Práctica Frontend

Enunciado:

Se debe lograr desarrollar y deployar una aplicación frontend, que permita crear pedidos y visualizar el estado correspondiente de cada uno, siguiendo las prácticas y estándares de Andreani. (Typescript, StyleSystem, CSS Modules, ESLint y SonarQube)

Objetivos

Adquirir conocimientos en:

1. Autenticación y autorización
   1. Routing: Private Route
   2. Usar token en peticiones
2. Integración con Backend
   1. Servicio Pedido
   2. Formularios React Hook Form y Componentes Stylesystem
   3. Validaciones formulario
   4. Estado global Redux y acciones asincronas
3. Estilos
   1. Layout (Grid y Flex)
   2. SCSS y CSS Modules
   3. Material UI
   4. StyleSystem
   5. Pantalla detalle de pedido
4. Manejo de Errores
   1. Error Boundary
5. User feedback
   1. Mensajes de notificación al usuario según sea el caso
   2. Utilización de los skeleton
6. Testings unitarios en componentes
7. Deploy en OCP
8. Componentes y herramientas del Andreani.

Recursos

1. Figma
2. StyleGuide
3. StyleSystem
4. Video Workshop Frontend
5. Workshop Frontend repositiorio

PASO PREVIO

Recordá que debes tener conocimientos básicos de Typescript, internamente disponemos de cuentas de Platzi para capacitarte, consultala con tu líder o referente.

ETAPA 1

Se debe desarrollar un sistema que permita dar de alta a un pedido y pueda consultar la información de dicho pedido.

Template

a. Generar template base, con FrontCli :

Librería de npm que contiene herramientas de cli para generar componentes y archivos de configuraciones de aplicaciones React.

Autenticación

a. Utilizar librería de Azure-B2C (Azure-b2c) para configurar autenticación: - Generar archivo msalInstance y agregar provider como indica la documentación. - Configurar las variables de entorno de forma adecuada. - Implementar componente UserAvatar.

b. Todos las pantallas que permitan interacción con el backend deben estar detrás de una ruta privada.

PR de Autenticación del workshop (Autentication)

Integración con Backend

a. Se debe configurar Redux, como estado global, el slice debe corresponder a la entidad pedido, este slice debe tener tres propiedades: isLoading, data y error.

b. Agregar servicio Pedido (correspondiente con la entidad en el front), debe extender o utilizar la configuración del ServiceBase. con los metodos para interactuar con los endpoints disponibles. Utilizar las variables de entorno cómo lo dispone la documentación.

Tip

Este servicio o los servicios se deben llamar dentro de acciones asíncronas y afectar el slice (porción de estado correspondiente). Nuestra interacción con el backend va a ser a través de acciones asíncronas que llaman a nuestra capa de servicios.

Por lo tanto la información renderizada debe ser la información del slice correspondiente.

Se puede ver un ejemplo de como extender los servicios en el workshop de frontend:

Documentación extensión de servicios y store

Componentes Presentacionales

c. Formularios y StyleSystem: Se debe hacer un componente para la creación del pedido, el mismo debe contener dos campos cuentaCorriente y codigoDeContratoInterno, los cuales deben ser números y son requeridos. Por lo mismo se utilizará el componente Input del StyleSystem y ReactHookForm.

d. Validaciones: Se deben hacer validaciones con las integraciones de React Hook Form y Yup.

Estilos

a. Pantalla detalle de Pedido: Debe tomar el id como parametro (React router), y con ese id obtener la información del pedido y renderizarla.

Se requiere que la información se haga con el principio mobile-first, y que cumpla con las variables de css disponibles en el stylesystem y el StyleGuide.

Para lo mismo se necesita que se utilice scss modules para evitar clases de css globales (buena practica).

Se provee el diseño mobile y en base a ese diseño hacer un maquetado para desktop, que sea similar al diseño. Tomar en cuenta principios de componetización viendo los otros posibles ejemplos de componentes que podría tener nuestra app provista por diseño.

Se puede tener en cuenta el ejercicio de componente presentacional del workshop de frontend, que tiene un flujo similar:

Paso a Paso Componente Presentacional Workshop.

PR con el código del paso a paso.

Manejo de Errores

Implementar componente ErrorBoundery del StyleSystem.

Documentación sobre Error Boundery

ETAPA 2

User feedback

Es importante demostrar cierta interacción con el usuario mientras la aplicación efectúa operaciones.

Para eso vamos a utilizar el componente Alert del StyleSystem para que le avise al usuario del estado de todas las peticiones que se realicen en la aplicación. El componente deberá estar a la escucha de cualquier error en el estado global (redux), pero sin ocasionar renders en toda la aplicación.

En caso de no existir el pedido el backend nos devolverá un código 404.

En el caso de cualquier error en la creación del pedido nos devolverá un código mayor o igual a 400.

Se debe agregar también skeletons cuando cargue la información del pedido en la pantalla de detalle.

Documentación Skeletons

Unit test

Realizar los unit test que crea necesario para cubrir la mayor cantidad de escenarios posibles. (Componentes y sus variantes).

Podes encontar un ejemplo práctico en el workshop:

Workshop Test Unitario

Documentación Unit Test

ETAPA 3

Realizar el deploy del frontend en openshift.