Hace ya algunos años que nació el término Progressive Web Apps. En tiempos de la web actual, eso es una eternidad.
En este workshop vamos a armar una aplicación completa, aprovechando varias de las nuevas funcionalidades que la web ahora nos permite implementar. WebSockets, Audio, Video, bases de datos, algo de machine learning (porque no puede faltar) y algunas sorpresas más!
Todo en un navegador! Porque una PWA es mucho más que una web que puede recibir notificaciones push, y es nuestra tarea aprovechar y hacer crecer esos estándares.
Durante el workshop construiremos una aplicación de chat que funcione completamente en el navegador. Está dividido en módulos por funcionalidades, los módulos son:
- Configurando el ambiente ⚙️
- Explorando el proyecto inicial 🔎
- Conceptos principales 📜
- Capturar audio 🎙️
- Speech recognition 🗣️️
- Speech synthesis 👂️
- Enviando imágenes 🤳️
- Aplicando filtros a la imagen 📸 -> 🌆 -> 🌇
- Detectando caras en las fotos 🤦♀️ 🤦♂️
- Picture-in-Picture (PIP) 📺
- Almacenamiento offline 📦
- Final 🔚
En este módulo se verá cuáles son las herramientas necesarias para poder desarrollar con estas tecnologías.
En este módulo se verá la aplicación inicial para entender el contexto en el cual estamos trabajando.
En este módulo se verán algunos de los conceptos principales que están detrás de la aplicación.
En este módulo enviaremos archivos de audio como mensajes del chat.
En este módulo realizaremos transcripción de audio a texto.
En este módulo haremos que el navegador "lea" los mensajes de texto.
En este módulo enviaremos fotos como mensajes del chat.
En este filtro aplicaremos un filtro en la imagen usando WebAssembly.
En este módulo haremos detección de caras sobre las imágenes.
En este módulo usaremos la API de PIP para reproducir videos flotantes.
En este módulo usaremos IndexedDB para almacenamiento de datos en el navegador.
12. Final 🔚
En este módulo plantearemos oportunidades de mejora.
Una vez terminado el workshop, se agradece completar la encuesta para poder mejorarlo. También se aceptan issues y pull requests.
- Leonardo Pittelli
- Twitter: @leopittelli
Avanzar al módulo 1 - Configurando el ambiente ⚙