Curso de aplicaciones progresivas con Web Components y LitElement

• Qué es Web Components, LitElement y las Progressive Web Apps
• Conocer PWA-Starter-Kit y las tecnologías que usa (Redux, PWA-Helpers, LitElement…)
• Cómo crear una aplicación progresiva en minutos
• Inicio de proyecto de aplicación del curso con Open-WC
• Intercambiar vistas en aplicaciones SPA (Single Page Application

• Introducción a los PWA Helpers
• Cómo personalizar las rutas de la aplicación progresiva o SPA
• Navegación programática entre rutas
• Implementación de rutas a distintos niveles

Un vídeo de actualización del curso, para mostrar cómo solucionar el problema del routing en las aplicaciones SPA (Single Page Application) en el servidor de desarrollo.

• Qué es Redux
• Cómo crear acciones
• Cómo crear reducers
• Cómo suscribirse a cambios en el store

• Cómo cargar de manera perezosa (lazy load) los componentes de la aplicación
• Cargas Lazy load en función de la ruta
• Carga y combinación de reducers por Lazy Load

• Personalizar el estilo y el tema de colores
• Crear nuestra propia librería de iconos optimizada con SVG
• Compartir estilos entre componentes de aplicación
• Usar componentes de terceros
• Integrar menú responsive, mensajes de feedback, etc

• Usar la librería Axios para acceso a servicios web
• Crear acciones de Redux para solicitar datos de manera asíncrona
• Aplicar el acceso de datos asíncrono en el marco de Redux
• Realización de un CRUD de recurso REST, con componentes LitElement, sistema de routing y Redux

• Archivo Manifest.json
• Proceso de Build de una aplicación con Open-WC
• Trabajo con segmentos de carga perezosa
• Deploy de aplicación en servidor remoto
• Configuración de Rollup
• Configuración de las rutas de aplicaciones SPA en el servidor web
• Configuración del service worker con Workbox
• Trabajo offline de la PWA

En este vídeo te enseñamos a instalar un sistema de API REST con un servidor que requiere autenticación de usuarios, basado en JSON-Server. Este sistema permite la creación de un servicio web en pocos minutos y nos servirá para poder realizar la práctica del sistema de login y contraseña en aplicaciones progresivas con Web Components y LitElement, y el acceso con autenticación a ciertos endpoints del API REST.

En este vídeo hacemos las vistas de login y registro de la PWA, así como la de logout para cerrar la sesión. Configuramos el sistema de routing para esa nueva ruta login. Luego realizamos todo el proceso de registro de usuarios, para crear cuentas en el sistema de nuestro API REST. Posteriormente el proceso de login de usuarios, que nos devuelve un token JWT (JSON Web Token) que usaremos para el acceso a las rutas protegidas. Por último hacemos el logout, para eliminar el token de la aplicación y con ello cerrar la sesión.

A diversas rutas de la aplicación les debemos enviar el token para que puedan ejecutarse. En este vídeo mostraremos cómo enviar el token en los headers de la solicitud HTTP. Lo haremos de manera individual para las rutas determinadas y también de manera global, lo que mejorará el flujo de desarrollo en nuestra PWA.

La última parte que nos queda para completar el sistema de autenticación es la creación de un sistema de login que permita almacenar el token en el localstorage del navegador. Así, si el navegador se refresca, la sesión permanece activa, después de la necesaria verificación del token JWT contra el servidor de la API REST. Además solucionaremos algunos problemas menores de nuestra Progressive Web App y mostraremos cómo recuperar el email del usuario una vez verificado el token.