Este proyecto es un reto propuesto por la compañía de seguros Mercantil andina para el puesto de Frontend developer Angular.
Consiste en un formulario guiado por pasos para dar de alta a un asegurado, para lo cual se debe pedir varios datos, validarlos y guardarlos.
Durante su desarrollo fue vital entender como funcionan las consultas a apis externas y como comunicar datos entre componentes.
- Angular CLI 12.2.7
- Bootstrapt 4.6.0
- ng-bootstrap 10.0.0
- Animate.css 4.1.1
- FontAwesome 5.8.2
- SweetAlert2 11.1.9
Hay dos opciones:
- Online. El proyecto esta deployado en Netlify: https://challenge-ma-sinisterraluciano.netlify.app/
- Localmente. Debera seguir los siguiente pasos:
- npm i
- ng serve
- Acceder a localhost:4200 desde su navegador
En primer lugar se creo un componente padre con lazy loading llamado home dentro de la carpeta /pages, el cual sera la vista de la pagina principal.
Luego encontramos la carperta /components, donde en primer lugar esta el componente navbar. Dentro de esta misma carpera se encuantra otro directorio llamado /altaAsegurado donde estan los distintos formularios para los 4 pasos del alta y una pantalla de "exito". Wizard sera el encargado de contener los distintos pasos del alta de asegurado. Tambien encontramos base-form-abstract, el cual es un componente abstracto con la base para validar y mostrar los distintos errores en las entradas de datos, dandonos la posibilidad de reutilizar su codigo en las distintas iteraciones con el usuario.
Cada formulario sigue la misma linea de diseño, las validaciones se han hecho con la biblioteca de angular/forms, utilizando los validadores que nos ofrece.
Tambien encontramos la carpeta /pipes, donde he creado algunos pipes de utilidad para formatear mensajes y textos de una forma mas clara.
Por ultimo tenemos la carpeta /services donde se encuentra el apis.service, el cual mediante el HttpClientModule realiza peticiones get a los distintos endpoints de las apis necesarias para completar los datos en los formularios, tambien encontramos alert.service el cual contiene un metodo de SweetAlert el cual recibe un mensaje, un tipo de mensaje y duracion.