0

Cómo crear aplicaciones con Polymer Starter Kit

0Puntos

hace 2 años

Polymer 1.0 nos permite crear aplicaciones profesionales de manera fácil y rápida. Para aprovechar mejor el potencial de este framework, se recomienda usar el Polymer Starter Kit (PSK). **Incluye todo lo necesario para crear web apps**basadas en Polymer, listas para usarlas en producción. En el artículo Introducción a Polymer 1.0 aprendimos los primeros pasos para usar el Polymer Starter Kit, hoy vamos a aprender a:

Ya que tengamos una instancia del PSK, empezaremos por instalar en nuestra copia local los Polymer Web Components que vamos a usar. Te recomiendo revisar el catálogo de Polymer Google Web Components listos para producción. Hoy vamos a usar tres:

  • < google-map >
    • Para integrar Google Maps en nuestra aplicación
  • < google-youtube >
    • Con este podemos crear reproductores de Youtube
  • < google-hangout-button >
    • Puedes crear botones para iniciar conferencias vía Google Hangouts directamente desde tu aplicación

Agregar Polymer Components

Instalar nuevos componentes

La mejor forma de instalar Polymer Components nuevos es usando bower, que además de instalarlos en la copia local, los añadirá a la lista de dependencias en el archivo bower.json.

  • < google-map >
    • bower install --save GoogleWebComponents/google-map
  • < google-youtube >
    • bower install --save GoogleWebComponents/google-youtube
  • < google-hangout-button >
    • bower install --save GoogleWebComponents/google-hangout-button

Importar los componentes

Ahora desde el código de nuestra aplicación, debemos agregar los nuevos elementos a la lista de componentes. Cada que agreguemos un nuevo componente, debemos declarar la ruta al archivo principal. Su contenido será importado a nuestra aplicación usando HTML Imports.

app/elements/elements.html

<linkrel="import"href="../bower_components/google-hangout-button/google-hangout-button.html"><linkrel="import"href="../bower_components/google-map/google-map.html"><linkrel="import"href="../bower_components/google-youtube/google-youtube.html">

Navegación Dinámica

Ahora crearemos una sección de nuestra aplicación para cada uno de estos elementos. PSK incluye un motor de navegación dinámico que nos permite declarar fácilmente distintas partes de nuestra aplicación. En nuestro código usaremos la etiqueta

<section> para definir una sección, a la que debemos asignar su ruta en la propiedad data-route.

Landing Page

menu

Como primera sección, vamos a definir una a la que llamaremos home y ahí mostraremos las rutas a las secciones de nuestra aplicación. El motor de navegación usará la ruta en el navegador para saber qué sección mostrar en un momento dado.

app/index.html

<section data-route="home"><paper-material elevation="1">Selecciona un elemento para mostrar: * [Google Maps](/maps) * [Youtube](/youtube) * [Google Hangouts](/hangouts)</paper-material></section>
Menú responsivo [![sideMenu](https://static.platzi.com/blog/uploads/2015/08/sideMenu-300x78.png)](https://static.platzi.com/blog/uploads/2015/08/sideMenu.png) PSK incluye un menú responsivo basado en _Material Design_ encapsulado en la etiqueta **_
<paper-menu>._** Agreguemos las rutas que definimos en el menú: **app/index.html** [html]
    <paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect"> [ Inicio ](/) [ Google Maps ](/maps) [ Youtube ](/youtube) [ Google Hangouts ](/hangouts) </paper-menu>

Enrutamiento dinámico

El PSK inlcuye un motor de navegación dinámica basado en Page.js. Ahora es momento de declarar las rutas en la lógica de nuestro motor de navegación. El código que maneja el enrutamiento dinámico se encuentra en un archivo llamado routing.html. app/elements/routing.html

window.addEventListener('WebComponentsReady', function() { page('/', function() { app.route = 'home'; });
    page('/maps', function() { app.route = 'maps'; });
    page('/youtube', function() { app.route = 'youtube' });
    page('/hangouts', function() { app.route = 'hangouts'; });
    page({ hashbang: true }); });

Ya que tenemos nuestras rutas configuradas, debemos declarar las secciones en nuestro código HTML. Usaremos estas secciones para mostrar nuestros Google Web Components en acción. Cuando termines el tutorial, te invito a que explores entre la documentación oficial y uses un fork de este ejemplo para practicar agregando nuevas funcionalidades. No dudes en compartir con nosotros tus ideas y mejoras en Github, si aún no sabes usarlo, Platzi tiene un excelente Curso Profesional de Github para ti.

Configurar Google Web Components

Google Maps Component

maps

Google Maps es muy popular hoy en día. Para usar su componente debemos colocar la etiqueta < google-map /> en donde deseamos mostrar el mapa. Las configuraciones las pasamos en forma de parámetros. Es posible usar variables en estos parámetros para conectar nuestro mapa con la lógica de nuestra aplicación. Polymer nos ofrece varios métodos para manipular nuestro mapa desde Javascript, para conocer más al respecto, puedes revisar la documentación oficial del componente.
app/index.html

<sectiondata-route="maps"><paper-materialelevation="1"><google-mapapikey="..."latitude="37.77493"longitude="-122.41942"style="height:300px"></google-map></paper-material></section>

YouTube Component

youtube

Agregar un reproductor de Youtube es fácil con este componente; basta con declarar su ubicación con la etiqueta < google-youtube > y asignar por lo menos el id del video que deseamos mostrar. Adicionalmente, se exponen métodos para manipular el reproductor desde Javascript.

Google Hangouts Button Component

hangouts

Este componente nos permite usar la etiqueta < google-hangout-button >, que nos permite declarar dónde deseamos mostrar botones capaces de iniciar de forma automática un Google Hangout.

app/index.html

<sectiondata-route="hangouts"><paper-materialelevation="1"><google-hangout-button></google-hangout-button><google-hangout-buttontype="onair"width="175"></google-hangout-button></paper-material></section>

Cuando tengas todo listo, no olvides ejecutar las tareas que optimizan todo para usarlo en producción. Para lograrlo, simplemente escribe el comando gulp desde tu consola. Recuerda que para iniciar tu servidor local, basta con ejecutar el comando gulp serve.

Si deseas aprender más sobre el poder de Polymer, te invito a que tomes el curso de Polymer de Platzi, y a que sigas pendiente de los próximos artículos.</section>

Cesar
Cesar
@reicek

0Puntos

hace 2 años

Todas sus entradas