Curso de desarrollo Aplicaciones Polymer 1

Curso online de desarrollo de aplicaciones web y Progressive Web Apps con la librería Polymer
Material disponible
Intermedio
21 Clases 43 h
A éste y otros 200+ cursos
Este curso te ofrecerá toda la base de conocimiento necesaria para realizar proyectos avanzados con Polymer, la librería de Google para el desarrollo frontend basada en Web Components.

Durante el curso enseñaremos a trabajar con Polymer en general, aunque centraremos principalmente en explicar aquellas características enfocadas en el desarrollo de aplicaciones web SPA (Single Page Application), con nuevas y asombrosas características de Firebase y las Progressive Web Apps: Animación, routing, autenticación, service workers, notificaciones push, trabajo offline y mucho más.

Polymer 1 no sería muy recomendable de usar en estos momentos, por lo que, si necesitas aprender Polymer te recomendamos ir directamente al Curso de Polymer 2. O incluso al Curso de Polymer 3.

Objetivos del curso

En este nuevo curso de Polymer en EscuelaIT nos centramos principalmente en el desarrollo de apps, experimentando con muchas de las nuevas características que se engloban dentro del concepto de Progressive Web Apps. No solo aprenderás a desarrollar componentes con Polymer, sino a integrar funcionalidades que hasta hace poco eran ajenas a la web, como el trabajo offline o el envío de notificaciones a los usuarios, incluso sin tener abierta la página del sitio web que nos está notificando.

Es un curso de nivel intermedio a avanzado de Polymer, aunque se puede tomar incluso sin conocimientos previos de la librería, pues en el primer bloque de clases explicaremos las partes básicas del desarrollo con Polymer, de una manera resumida. Así, las personas que no conocen Polymer de antemano, tendrán la oportunidad de seguir el resto de clases en las que exploraremos características más avanzadas de la librería, su catálogo de componentes, así como las herramientas del ecosistema Polymer.

En el segundo bloque de clases del curso aprenderás a trabajar con las herramientas de línea de comandos de Polymer, crear tus propios layouts que se adaptan a todo tipo de pantallas y dispositivos, con las guías de Material Design. Aprenderás a configurar el sistema de routing y hacer lazy loading de componentes, así como a implementar animaciones y transiciones entre secciones de contenido.

En el siguiente bloque enseñaremos los componentes que nos permiten apoyarnos en Firebase para realizar autenticación y almacenamiento de datos en tiempo real. En el bloque final explicaremos cómo trabajar con otras características avanzadas de las Progressive Web Apps, como el almacenamiento en local, los Service Workers, trabajar en modo offline y emitir notificaciones push a los usuarios de las aplicaciones.

Qué tengo que saber

Se necesita Javascript a nivel medio. Nos centraremos principalmente en la construcciones de aplicaciones, por eso, en algunos puntos de este curso se abordan rápidamente conceptos de Polymer básico, que si se necesitan reforzar se pueden ver más detenemidamente en el Curso de Polymer 1 impartido previamente.

Clases y contenidos

Primeros Pasos y posibilidades de Polymer Gratis

Potencia de Polymer en el desarrollo de apps.

Repaso Polymer I

En esta clase se cubre la introducción a Polymer, Propiedades, Métodos, Ciclo de vida, DOM Local y composición con el Light DOM.

Repaso Polymer II

La segunda clase de repaso de características básicas de Polymer. Este es el contenido que nos quedó por ver la la primera unidad temática.

Repaso a Polymer III

En este vídeo se explican: Eventos, eventos personalizados, el sistema de binding, observers y behaviors

Corrección de ejercicios I

En este vídeo corregimos los ejercicios propuestos en el primer bloque temático.

Ejercicios II + Componente search

En esta clase practicamos sobre el ejemplo realizado en la clase en abierto, incorporando nuevos componentes. Además corregimos los ejercicios propuestos en el bloque II del repaso de Polymer

CRUD sobre API REST, I

Trabajamos la parte del CRUD con un API Rest para obtener una referencia de cómo hacer el flujo de la administración de los datos de una aplicación

CRUD sobre API REST, II

En esta clase vimos la segunda parte del CRUD basado en un API y además exploramos de manera práctica las Behaviors de Polymer

Bases del sistema de Routing de Polymer

En esta clase abordamos el sistema de routing de Polymer, mediante ejemplos sencillos que nos permitan entender los dos componentes que Polymer nos ofrece para manejar las rutas de la aplicación.
Comenzamos viendo ejemplos sencillos del sistema de routing y luego incorporamos lazy loading de componentes y controlamos rutas profundas de la aplicación, personalizando el comportamiento del sistema a las necesidades concretas y comunes de aplicaciones profesionales.

Manipulando el sistema de routing

En esta clase se explora el sistema de routing de Polymer y el lazy loading de elementos: "PRPL Pattern".
Polymer Starter Kit 2 incluye un sistema de routing y lazy load ya implementado, que sirve para hacer aplicaciones de una sola página (SPA) que además se encuentran optimizadas gracias al lazy load. En esta clase se explica cómo funciona y se construye desde cero, para acabar con todos los posibles secretos escondidos en este sistema.
El código de la clase se encuentra en dos versiones. En la pestaña de "Recursos" está el código que nos entregó Jorge una vez finalizada la clase. Pero al restaurar ese código hemos tenido problemas y no funciona como es debido. Debido a Ello Vicent Soriano nos ha proporcionado un código, que corresponde con el contenido de la clase, pero que funciona correctamente. Ese c´ódigo se ha enlazado desde la pestaña "Referencias". En cualquier caso, el código de Vicent está en Github en https://github.com/EscuelaIt/Routing-Polymer-EscuelaIT

Polymer CLI

Estudiamos a fondo el Polymer CLI y aprendemos a crear plantillas personalizadas instalables con "polymer init", para incorporar cualquier otro mecanismo que sea necesario para llevar a producción nuestras apps.

Firebase + Polymer I

En esta clase tenemos una introducción a Firebase y Polymerfire. Además mostramos cómo realizar autenticación de usuarios mediante Firebase y guardar los perfiles de los usuarios que entran en la app.

Firebase + Polymer II

En esta clase aprendimos a trabajar con los elementos firebase-document y firebase-query, para el acceso a los datos en tiempo real.

Polymer y PouchDB

Repasamos CouchDB para profundizar en PouchDB como base de datos para hacer aplicaciones online y offline

Firebase + Polymer III Extra

Vemos asuntos avanzados sobre la organización del código mediante FirebaseBehavior

Extra: Accesibilidad en Polymer

Clase dedicada a la accesibilidad y cómo Polymer permite crear páginas y aplicaciones acesibles.

Layout con Polymer

En esta clase nos dedicamos a crear un layout desde cero, usando los componentes app-layout y luego iron-flex-layout para implementar flexbox y maquetar el contenido en nuestros propios componentes.

Animaciones

Neon Animation, animaciones con los elementos del catalogo y cómo crear nuestros propios elementos e incluir animaciones.

Progressive Web Apps

En esta clase abordamos las PWA. Analizamos todo lo que te ofrece Polymer para facilitar el proceso de build, los service workers, detección online/offline. Vemos cómo almacenar datos con local storage y persistir offline datos de Firebase.

Cachear llamadas Ajax + Notificaciones

En este vídeo trabajamos varios temas de las Progressive Web Apps con Polymer, desde cómo realizar el cacheo de solicitudes Ajax mediante el service worker de nuestra aplicación

Notificaciones

En esta clase tratamos el tema de notificaciones, apoyándonos en el servicio cloud de Firebase.

Valoraciones

Erik Ramírez

Daniel

¿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.

Suscríbete