7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Cordova

Como crear una aplicación de lista de tareas con Polymer y Cordova

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Introducción

En los primeros días de Android, cuando no existían buenos marcos de interfaz de usuario y la mayoría de los dispositivos Android tenían poca potencia, crear aplicaciones híbridas (aplicaciones desarrolladas con tecnologías web, como HTML5, CSS y JavaScript) era una muy mala idea.

En comparación con las aplicaciones nativas, se veían notablemente diferentes y rendían pobremente. Sin embargo, esos días, ya pasaron. Hoy en día, la mayoría de los dispositivos móviles pueden ejecutar aplicaciones híbridas sin esfuerzo y hay muchos marcos de trabajo que te permiten simular perfectamente la apariencia nativa de Android. Por lo tanto, si te enfrentas a un plazo corto o si trabajas con un presupuesto reducido, optar por el método híbrido ya no es tan mala idea.

En este tutorial, te mostraré cómo crear una aplicación de lista de tareas simple e híbrida para Android. La interfaz de la aplicación se ajustará a la especificación de diseño de materiales de Google, la apariencia nativa de Android Lollipop y Marshmallow. Para lograr esto, usaremos Polymer, Polymer paper elements y Apache Cordova.

Prerrequisitos

Para seguir adelante, necesitarás:

  • la última versión del Android SDK
  • la última versión de Node.js
  • un dispositivo Android o un emulador que corra Android 5.0 o posterior.
  • un conocimiento básico de HTML5, CSS y JavaScript

Si eres nuevo en Cordova, entonces tómate un momento para leer esta introducción de Wernher-Bel Ancheta Ésta introducción debería ponerte al día.

1. ¿Por qué usar Polymer?

Polymer es un marco de trabajo que te permite crear rápidamente componentes web personalizados, elementos Polymer. Al utilizar elementos Polymer, puedes hacer que tus aplicaciones web sean más modulares y tu código más reutilizable. Una vez creado, un elemento puede ser usado igual que otras etiquetas HTML en páginas HTML. Por ejemplo, si creaste un elemento personalizado llamado my-element, puedes usarlo en cualquier página HTML usando el siguiente código:

Además, al utilizar el marco de Polymer, puedes aprovechar las funciones de enlace de datos que proporciona para hacer que tu código JavaScript sea más simple y menos propenso a errores.

2. ¿Qué son los elementos de papel de Polymer?

Los elementos de papel son los elementos de Polymer que fueron creados siguiendo las indicaciones de diseño de materiales. Se pueden utilizar como alternativas a los elementos HTML habituales. Por ejemplo, si quieres agregar un botón de diseño de material a tu página, puedes usar un elemento paper-button. El código para hacerlo se ve así:

Similarmente, si deseas agregar una tarjeta o un botón de acción flotante, puedes usar los elementos paper-card o paper-fab. Estoy seguro que estás empezando a entender lo útiles que son Polymer y los elementos de papel ahora.

3. ¿Qué es Apache Cordova?

Una aplicación creada usando Polymer y elementos Polymer es básicamente solo una colección de archivos HTML, CSS y JavaScript. Esto significa que necesita un navegador para poder correr. Sin embargo, puede correr dentro de una vista web, un elemento de interfaz de usuario nativo que se comporta como un navegador sin bordes.

Apache Cordova es un marco de trabajo que te deja generar una aplicación nativa que contiene una vista web y especificar las páginas HTML que quieres que se muestren. En este tutorial, estaremos usando Apache Cordova para correr la aplicación de lista de tareas en dispositivos Android.

4. Configuración del proyecto web

Para acelerar el desarrollo y facilitar la depuración, la mayoría de los desarrolladores comienzan a crear sus aplicaciones híbridas como aplicaciones web. Estaremos haciendo lo mismo. Empecemos por crear la aplicación de lista de tareas como un proyecto web ordinario que puede correr en un navegador.

Crea un nuevo directorio para el proyecto y llámalo todoWebApp

Para administrar las dependencias del proyecto, usaremos Bower. Si no tienes Bower instalado, entonces usa npm para instalarlo globalmente.

Una vez que Bower esté instalado, navega hasta el directorio del proyecto y usa el comando bower para instalar los elementos de papel de Polymer, así como las dependencias necesarias.

Esto completa la configuración del proyecto web.

5. Creando un elemento Polymer personalizado

Creemos ahora un elemento Polymer personalizado que contenga código tanto para el diseño como la funcionalidad de la aplicación de la lista de tareas. Empieza por crear un nuevo archivo y llámalo tasks-list.html.

Paso 1: Importanto los elementos de papel

Cada elemento de papel usado en el diseño de un elemento personalizado tiene que ser importado individualmente. Para construir la interfaz de la aplicación web, usaremos los siguientes elementos:

  • paper-toolbar para crear la barra de herramientas
  • paper-button para crear varios botones
  • paper-fab para crear un botón de acción flotante
  • paper-listbox para crear la lista que contiene las tareas
  • paper-item para crear las tareas individuales dentro de la lista
  • paper-checkbox para crear los cuadros de verificación que el usuario puede tildar para marcar las tareas que van siendo completadas
  • paper-icon-button para dibujar botones que tengan íconos
  • paper-input para dibujar el campo de text que el usuario puede usar para colocar el nombre de la tarea
  • paper-dialog para crear un diálogo modal
  • iron-icons para dibujar íconos

Además, para utilizar la funcionalidad de enlace de datos proporcionada por Polymer, tendremos que importar el marco de Polymer en sí. Agrega el siguiente código al archivo:

Paso 2: Creando el DOM

Puedes pensar de los elementos de Polymer como páginas HTML. Así como las páginas HTML, los elementos de Polymer tienen su propio árbol DOM que contiene varias etiquetas para elementos de interfaz de usuario, etiquetas style para estilizar, y etiquetas script para codigo JavaScript.

Para crear el DOM, debemos usar la etiqueta dom-module y colocar su atributo id al nombre del elemento Llamemos al elemento personalizado tasks-list Nota que el nombre debe contener un guión.

Paso 3: Creando el diseño

Crear un diseño usando elementos Polymer es tan simple como crear uno usando elementos HTML, solo que las etiquetas son diferentes. Sin embargo, tienes que asegurarte que todos los detalles del diseño estén dentro de la etiqueta template.

Aquí esta el código que puedes agregar al dom-module para crear el diseño del la aplicación de lista de tareas:

Puede parecer una gran cantidad de código, pero si estás familiarizado con HTML y las expresiones de handlebars, notarás que es bastante intuitivo.

Como puedes ver, las etiquetas de elementos de Polymer se pueden usar libremente junto con las etiquetas HTML y los estilos en línea se pueden usar para personalizar su apariencia.

Agregar un detector de eventos a una etiqueta de elemento de Polymer es similar a agregar uno a una etiqueta HTML. En el código anterior, hemos utilizado dos tipos de detectores de eventos, detectores on-click para detectar botones en los que se hace clic y detectores on-change para detectar cambios en los estados de las cuadros de verificación.

También puedes haber notado que, además de los elementos de Polymer y las etiquetas HTML, hemos utilizado una etiqueta template auxiliar dom-repeat. Si aún no lo has adivinado, funciona como una instrucción for y se puede usar para recorrer todos los elementos de una matriz. En nuestro diseño, se utiliza para dibujar las tareas individuales que pertenecen a una serie de tareas.

Paso 4: Registrando el elemento

Antes de que podamos usar el elemento Polymer personalizado en páginas HTML, debemos registrarlo usando la función Polymer. Esta función espera un único objeto JavaScript que contiene las funciones y propiedades del elemento. Como mínimo, el objeto debe tener una propiedad is que especifique el nombre del elemento personalizado.

Agrega una etiqueta script después de la etiqueta template y agrégale el siguiente código:

Paso 5: Inicializando el elemento

En el diseño de nuestro elemento, hemos utilizado dos propiedades dentro de las expresiones handlebar, tasks y latestTaskName. Sin embargo, el elemento no tienes esas propiedades todavía. Para agregar e inicializarlas, debemos usar el método ready. Por ahora, podemos simplemente inicializar tasks en una matriz vacía y latestTaskName en una cadena vacía.

Agrega el siguiente código despues de la propiedad is:

Paso 6: Guardando, actualizando y borrando datos

Para almacenar permanentemente las tareas que el usuario agrega a la lista de tareas, usaremos el almacenamiento local a través del objeto localStorage. Escribamos ahora un código para agregar una tarea al almacenamiento local.

El diseño ya contiene un paper-dialog que tiene un campo de entrada en el que el usuario puede ingresar el nombre de una tarea. Sin embargo, el cuadro de diálogo está cerrado de forma predeterminada, que es lo que no queremos. En el detector on-click del botón de acción flotante, llama al método open del cuadro diálogo para abrirlo.

Gracias a la vinculación de datos bidireccional de Polymer, cualquier cosa que el usuario ingrese en paper-input del cuadro de diálogo está disponible inmediatamente en la propiedad latestTaskName. Por lo tanto, dentro del detector on-clic del botón Agregar del cuadro de diálogo, podemos simplemente agregar latestTaskName a localStorage usando el método setItem.

localStorage almacena datos en forma de pares clave-valor. Para almacenar la tarea, usaremos el nombre de la tarea como clave y si está completada o no como valor. Debido a que localStorage solo funciona con cadenas (los valores booleanos actualmente no son compatibles), almacenaremos yes si la tarea se ha completado y no en caso contrario.

Una vez agregada la tarea, podemos cerrar el diálogo usando su método close.

Similarmente, cuando el usuario marca o desmarca la casilla de verificación asociada con una tarea, podemos actualizar el valor almacenado en el objeto localStorage invocando el método setItem. Debido a que usamos la template auxiliar dom-repeat para dibujar los elementos individuales del paper-listbox, podemos usar el objeto model presente en el evento on-change para obtener el nombre de la tarea asociada con la casilla de verificación. Además, necesitamos convertir el valor booleano del estado checked de la casilla de verificación a "sí" o "no" antes de almacenarlo en localStorage.

Si un usuario elige eliminar una tarea, puede hacer clic en el paper-icon-button asociado con la tarea. Para eliminar la tarea de forma permanente, llama al método removeItem del objeto localStorage en el detector on-click del paper-icon-button.

Paso 7: Mostrando las tareas

Es posible que hayas notado las llamadas a updateTasks en los métodos addTask y deleteTask. En el método updateTasks, actualizamos la matriz tasks, la que inicializamos en el método ready, para reflejar el contenido del objeto localStorage. Esto es necesario, porque el template auxiliar dom-repeat, que se utiliza para mostrar la lista de tareas, solo funciona con una matriz.

En la matriz tasks, usamos objetos JSON para representar las tareas. Cada objeto JSON tiene dos campos, taskName y isComplete taskName es una cadena que contiene el nombre de la tarea y isComplete es un valor booleano que indica si la tarea está completa.

Para permitir que Polymer detecte cambios en la matriz tasks, en lugar de usar las funciones de matriz estándar, debemos usar los métodos de manipulación de matriz presentes en el elemento Polymer. Por ahora, usaremos el método splice para eliminar todos los elementos de la matriz a la vez y el método push para agregar elementos a la matriz.

El siguiente código crea el método updateTasks, que recorre todos los elementos del objeto localStorage y los agrega a la matriz tasks.

En este momento, la matriz tasks se actualiza solo cuando el usuario agrega o elimina una tarea. Para mostrar las tareas tan pronto como se abre la aplicación, debemos agregar una llamada al método updateTasks dentro del método ready.

Nuestro elemento Polymer personalizado está listo para ser usado.

6. Usando el elemento Polymer personalizado

Creemos ahora una página HTML y agreguemos el elemento personalizado. Cree un nuevo archivo, asígnale el nombre index.html y agréguele las etiquetas HTML head y body.

Antes de usar el elemento, debemos agregar una etiqueta link para importar tasks-list.html. Además, para eliminar los rellenos y los márgenes, y para usar el diseño flexible, agrega las clases CSS fullbleed, layout y vertical a la etiqueta body. Debido a que estas clases de CSS están definidas por el elemento iron-flex-layout, debemos agregar una etiqueta link para importarlo.

Con las importaciones anteriores en su lugar, podemos agregar la etiqueta tasks-list dentro de la etiqueta body. Tu archivo ahora debería verse así:

7. Corriendo la aplicación en el navegador

Nuestra aplicación de lista de tareas está lista. Debido a que el marco de Polymer necesita un servidor HTTP para ejecutarse, inicia uno usando el módulo SimpleHTTPServer de Python dentro del directorio del proyecto.

Ahora puedes visitar http://localhost:8000/ para usar tu aplicación.

App running in Google ChromeApp running in Google ChromeApp running in Google Chrome

8. Configuración del proyecto Cordova

Ahora que hemos logrado ejecutar con éxito la aplicación en el navegador, es hora de convertirla en una aplicación de Android incrustándola dentro de un proyecto de Cordova.

Esto significa que primero debemos instalar la CLI (Interfaz de línea de comandos) de Cordova a nivel global usando npm:

Para crear un nuevo proyecto Cordova, podemos usar el comando cordovacreate. Como sus argumentos, espera el nombre del directorio donde se debe crear el proyecto Cordova, el identificador de nombre de dominio inverso de la aplicación y el nombre de la aplicación.

Para incrustar nuestro proyecto web dentro del proyecto Cordova, también necesitamos incluir una opción copy-from y especificar la ubicación del proyecto web.

El siguiente comando crea un proyecto Cordova para una aplicación llamada To-do dentro de un directorio llamado todo y que contiene el proyecto web ubicado en todoWebApp:

El proyecto Cordova que acabamos de crear aún no es compatible con ninguna plataforma. Para agregar soporte para la plataforma Android, navega hasta el directorio todo y usa el comando de la cordova platform.

9. Corriendo la aplicación híbrida

Sin tener que escribir una sola línea de código, nuestro proyecto Cordova ya está listo para funcionar. Vamos a construirlo usando el comando cordova build. Antes de continuar, asegúrate de que el valor de la variable de entorno ANDROID_HOME esté establecido en la ubicación del SDK de Android.

Si la compilación falla y dice que no se puede agregar un archivo llamado web-animations.min.js.gz al APK, intenta eliminar el archivo y compilar el proyecto nuevamente.

Una vez que la compilación sea exitosa, implementa la aplicación en tu dispositivo Android usando el comando cordova run.

Ahora deberías poder ver la aplicación ejecutándose en tu dispositivo.

App running on Android deviceApp running on Android deviceApp running on Android device

Conclusión

En este tutorial, has aprendido a usar Polymer y elementos de papel Polymer para crear una aplicación web de lista de tareas. También aprendiste cómo incrustar la aplicación web dentro de un proyecto de Cordova para que se ejecute como una aplicación híbrida en dispositivos Android. Aunque nos enfocamos solo en la plataforma Android, también puedes ejecutar la aplicación en un dispositivo iOS sin ningún cambio en el código. Para que esto funcione, debes usar el comando cordova platform nuevamente para agregar soporte para la plataforma iOS.

Para aprender a construir interfaces más complejas usando Polymer, me gustaría referirte a la documentación de Polymer.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.