©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Desarrollo PWA práctico con Lit y Vite
Un curso de desarrollo de un juego de Conecta 4 con Web Components y Progressive Web App
Material disponible
En este curso mezclamos varias tecnologías y prácticas de desarrollo actuales de Javascript, como son las PWA (Progressive Web Apps) y el estándar de los Web Components y lo hacemos de manera práctica, con el desarrollo de un juego.
Las Progressive Web Apps nos permitirán implementar características relativamente nuevas en los sitios web, como la posibilidad de que nuestros usuarios puedan instalarse la aplicación en sus dispositivos móviles y ordenadores de escritorio, o que puedan jugar offline.
Por su parte Web Components nos permitirá un desarrollo rápido y ordenado de los componentes que necesitaremos para implementar el juego, lo que nos ofrecerá además la posibilidad de reutilizar el juego de diversas maneras. En este curso lo veremos empaquetado en una PWA, pero lo podríamos usar embebido en otros sitios web, en aplicaciones de escritorio con ElectronJS o en aplicaciones móviles instalables en las correspondientes stores con Ionic, por poner varios ejemplos.
Las Progressive Web Apps nos permitirán implementar características relativamente nuevas en los sitios web, como la posibilidad de que nuestros usuarios puedan instalarse la aplicación en sus dispositivos móviles y ordenadores de escritorio, o que puedan jugar offline.
Por su parte Web Components nos permitirá un desarrollo rápido y ordenado de los componentes que necesitaremos para implementar el juego, lo que nos ofrecerá además la posibilidad de reutilizar el juego de diversas maneras. En este curso lo veremos empaquetado en una PWA, pero lo podríamos usar embebido en otros sitios web, en aplicaciones de escritorio con ElectronJS o en aplicaciones móviles instalables en las correspondientes stores con Ionic, por poner varios ejemplos.
Qué aprenderé en el Desarrollo PWA práctico con Lit y Vite
- Desarrollar Web Components con Lit
- Desarrollar una PWA con el plugin de PWA de Vite
- Crear un proyecto para usar Vite desde cero
- Desplegar un proyecto de PWA en Netlify
Objetivos del curso
Conocer el desarrollo de Lit y las Progressive Web Apps de una manera práctica a través de la construcción de un juego de Conecta 4, desarrollado en vivo desde cero hasta su despliegue en la web.
Por qué debes aprender desarrollo de Web Components
Qué tengo que saber
Para realizar este curso es necesario tener un conocimiento medio del lenguaje de programación Javascript. También es ideal tener soltura a la hora de manejar la consola.
Clases y contenidos
En este vídeo presentamos el curso del juego del Conecta 4 en una PWA con Web Components y Lit + Vite como herramienta de desarrollo y creación de la PWA.
Simplemente vamos a especificar los objetivos del curso, veremos el juego en funcionamiento para que nos podamos hacer una mejor idea de cómo va a ser nuestra práctica y explicaremos algunos detalles con respecto a las tecnologías que vamos a utilizar durante el desarrollo del proyecto.
En esta clase vamos a comenzar el proyecto desde cero, creando la carpeta del juego, inicialmente vacía y donde iremos colocando cada uno de los archivos necesarios para trabajar. Luego iremos desarrollando las partes más básicas del programa como el componente principal del juego.
Durante esta clase veremos la instalación de Vite en el proyecto, veremos cómo instalar dependencias con npm, veremos cómo instalar Lit, explicaremos las bases de Lit para crear componentes web y lo haremos de manera práctica, dirigiéndonos al desarrollo del juego. Llegaremos a implementar el tablero del juego y el sistema para decidir el número de jugadores que vamos a tener en el juego.
En esta clase vamos a realizar la programación de los componentes de mensajes al usuario y el componente de turno, que nos permitirá manejar el flujo. Definiremos todos los eventos de interacción con los jugadores del Conecta 4.
En este vídeo realizamos un repaso del juego completo, explicando los diversos componentes de modo general. Realizamos además algunos ajustes y finalmente resolvemos un asunto pendiente en la interacción del usuario para evitar que procese clics en las columnas para poner fichas nuevas si no hay jugador humano activo.
Usaremos el plugin de Vite PWA para convertir nuestro juego del conecta 4 en una Progressive Web App de manera sencilla y rápida, evitando todas las partes complejas de generación del service Worker.
Usaremos los servidores de Netlify para hacer el build del proyecto de manera automática y su despliegue en un dominio de Internet, cada vez que se hace un push a la rama main del repositorio GitHub.
Valoraciones
Borja
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.