Fullstack javascript 101
Durante el mes de Noviembre, desde Tadil Dev organizamos 2 nuevas charlas sobre desarrollo Fullstack con javascript orientada a estudiantes y profesionales del área de ciencias de la computación. Al igual que en los encuentros anteriores (ver acá y acá también), queremos agradecer el apoyo al Municipio de Tandil y al IDEB por el espacio. También al ISISTAN, a Bons con Produck y a XOOR por su apoyo.
Temario
Durante las jornadas, desarrollamos tanto backend como frontend. El backend se inició con una aplicación “Hola Mundo”, para luego agregarle los primeros endpoint y controladores para realizar un CRUD de noticias. Desde el frontend, se dio una introducción Angular ( Angular 2+), al CLI (Commnd line inteface) con sus principales comandos y experiencias laborales.
Durante la segunda jornada, se utilizó le CLI para crear una nueva Angular App, agregar Angular Material al proyecto, crear componentes de layout, noticias, card(mat-card) y servicio de acceso a las noticias desde el backend.
# Crear una nueva aplicación
ng new FrontLive# Instalar Angular Material
ng add @angular/material# Crear Main Layout
ng generate @angular/material:nav components/main-layout# Crear News Component
ng generate component components/news# Crear Card Component
ng generate component components/card# Crear News Service
ng generate service services/news
Se puede acceder a la lista de comandos completa de Angular CLI acá
En cuanto al backend, se le agregaron middleware en Express para autenticación y autorización mediante Passport.js.
Se utilizó JSON Web Tokens (JWT), se vieron algunas de sus propiedades, como asegurarse que sean válidos y sobre su mantenimiento. Para testear la nueva funcionalidad agregada, se dio una introducción a Postman y como utilizarlo para enviar los nuevos JWT generados.
Material complementario
Como complemento a los temas vistos, este video sobre arquitecturas cliente/servidor ayuda a tener una visión general de los componentes que vamos a estar viendo y trabajando en las próximas reuniones!
Una concepto clave es entender que son las APIs, el siguiente video explica muy bien lo que son y para que se utilizan
Código fuente
El código fuente del proyecto utilizado encuentra separado en 2 repositorios en Github. El frontend se encuentra en acá y el backend acá. Cualquier problema que encuentren el código, una corrección es más que bienvenida ;)
Próximos pasos
Recomendamos revisar el código fuente en Github, y leer (por arriba) la documentación sobre las distintos framework y tecnologías utilizadas.
Otra tema en generar dudas fueron las validaciones de formularios. Para eso existen Reactive forms, validaciones de input en el backend (Por ejemplo, JOI), y validaciones del modelo de la DB utilizando un ORM (Sequelize)
Próximas charlas
Estas fueron las ultimas charlas del año, pero continuaremos durante 2020. Pueden registrarse en nuestro grupo en Meetup para estar al tanto de los próximos eventos.
En LinkedIn nos pueden encontrar como Tandil Dev, donde compartimos información de interés, cursos y resúmenes de nuestras charlas!
Nos vemos el año que viene!
