Tras unos años centrado exclusivamente en el desarrollo con la librería React.js, he decidido abrirme también al framework Angular, desarrollado por Google. Aunque sigo dentro del ecosistema javascript, se trata de un cambio bastante grande en las mecánicas y conceptos, no obstante para mí es un reto y una oportunidad de seguir estudiando y aprendiendo (la verdadera habilidad del programador) que acepto gustosamente, porque creo que es la mejor manera de mantener la motivación.
Como siempre suelo hacer, he preparado una pequeña aplicación para poner en práctica todos los conceptos que pueda, porque como mejor se aprende, se comprende y se recuerda, llevando lo estudiado a la práctica.
Esta aplicación consiste en un tracker del riego de las plantas, a modo de diario donde se pueden registrar los riegos, fertilización, adjuntar fotografías y lo que se me vaya ocurriendo. Además permite agruparlas por habitación y consultar sus intrucciones de cuidado.
Lo importante de este ejercicio es que he puesto en práctica todos estos conceptos:
- módulos e inyecciópn de dependencias
- uso de librerías externas como angular material
- uso de pipes y creación de pipes personalizados
- peticiones http usando httpClient
- comunicación entre componentes en ambos sentidos
- creación de servicios y uso de los mismos para comunicación de componentes a diferentes niveles, por ejemplo el servicio de autenticación.
- interceptores http, que he usado para inyectar el token jwt en las cabeceras, refrescar el mismo etc.
- routing; a pesar de ser una app sencilla tengo varias vistas
- guardas; las vistas mencionadas estan restringidas a usuarios registrados
- observables más complejos como BehaviorSubject y distintas operaciones con la lib RxJs.
- Viewchild para acceder a elementos nativos de html5 como son la cámara de fotos y el canvas.
- paginación de resultados
- sesión de usuario basada en tokens
- formularios reactivos con validaciones
- control de errores en observables
- etc...
El backend en esta ocasión lo empecé con un mock basado en Json-server y finalmente lo he migrado a Directus, montado con Docker, un fantástico cms headless, que me permite una gestión granular de permisos y subir binarios. Es la opción perfecta cuando no quieres dedicarle al back mucho tiempo para centrarte en el frontend.
Adjunto algunas capturas (nota: he seguido una estrategia mobile first y por falta de tiempo no está optimizada para pc):
