miércoles, 1 de marzo de 2017

Ionic 2: Selección de fecha y hora

En el siguiente ejemplo vamos a mostrar paso a paso cómo construir una sencilla app en Ionic 2, la cual permitirá al usuario introducir y visualizar fechas y horas.


Crear la app en Ionic 2

El primer paso será crear la aplicación, construyendo toda la estructura necesaria. Para ello, accederemos a la consola del sistema y accederemos al directorio en donde vayamos a construir la aplicación. A continuación, introduciremos el siguiente comando: 

$ ionic start fechas blank --v2 --ts

Este comando creará el directorio fechas, dentro del cual se creará toda la estructura necesaria para nuestra app. Los parámetros utilizados son:

  • fechas: nombre de la app
  • blank: Nombre de la plantilla (template) que se utilizará para esta app
  • --v2: La app se creará en Ionic 2 (si se omite ser creará en Ionic 1)
  • --ts: Uso de TypeScript

Editar la app

Una vez construida la app, el siguiente paso será abrir el proyecto en un editor o, preferiblemente, en un IDE. Recomiendo utilizar Visual Studio Code o Atom, pero puedes usar el que más te guste.

Código de home.ts

El archivo home.ts (contenido en la carpeta fechas/src/pages) contiene la lógica de negocio de la página principal (y única de la app). Para este ejemplo, no se necesitará nada más que declarar e inicializar las propiedades de dicha página:
  • fechaCorta: Fecha utilizada para la fecha corta (Mes y Año)
  • fecha: Fecha utilizada para la fecha completa (Día, Mes y Año)
  • minFecha: Fecha mínima a gestionar. En este caso se hará por año, que será el año actual menos cinco años
  • maxFecha: Fecha máxima a gestionar. En este caso se hará por año, que será el año actual más cinco años
Al inicializar las fechas, éstas obtendrán el momento actual: día, mes, año, hora, minuto, segundo y milisegundo.

La fecha se almacenará en una cadena (string) con formato ISO 8601: YYYY-MM-DDTHH:mm:ssTZD.

El código para home.html será el siguiente:

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  fechaCorta: string = new Date().toISOString();
  fecha: string = this.fechaCorta;
  minFecha: string = (new Date().getFullYear()-5).toString();
  maxFecha: string = (new Date().getFullYear()+5).toString();
}

Código de home.html

El archivo home.html contiene la vista de la página. En esta vista se visualizarán tres bloques o secciones (card), cada uno de los cuales gestionará y visualizará un ejemplo de fecha y/o hora.

Comenzaremos con el esqueleto básico de esta página:


La parte de ion-heade mostrará, en la parte superior de la página, una cabecera con un título (Fechas). Esta cabecera es común en todas las apps, donde, además de mostrar el título de la página, permite también albergar elementos de navegación, como botones para volver atrás, o sidemenus (el típico botón "hamburguesa", con tres líneas, que despliega un menú lateral).

El contenido de la página estará encerrado en el componente ion-content, declarado entre las etiquetas correspondientes. Se han declarado tres comentarios TODO, que sustituiremos en cada caso.

Card 1: Fecha corta

Ionic 2 posee un rico repertorio de componentes, los cuales poseen características concretas de la app, y que tratan de emular, tanto el diseño como la experiencia de usuario, propios de la interfaz de usuario del smartphone.

El componente card representa un bloque de contenido (una tarjeta). Pero no nos engañemos: en Ionic 2, una tarjeta puede ser simple o muy compleja, dependiendo del contenido que deseemos mostrar (consultar más info en: http://ionicframework.com/docs/v2/components/#cards).


El código de esta tarjeta es el siguiente (sustituir el primer comentario TODO):



Para nuestro ejemplo, la tarjeta será muy simple. La tarjeta es gestionada por el componente ion-card. Dentro de la tarjeta, podremos definir una cabecera (ion-card-header), la cual contendrá un título. La tarjeta debe mostrar un contenido (ion-card-content). Este contenido, será una lista (ion-list) con dos elementos (ion-item).

El primero de estos elementos, mostrará una etiqueta Fecha (mediante label)

El componente ion-datetime mostrará la fecha actual. Si el usuario toca (pulsa o hace clic) sobre dicha fecha, en la parte inferior de la pantalla aparecerá un elemento visual que permitirá al usuario seleccionar otra fecha, cambiando el mes y el año. Una vez seleccionado, el usuario podrá Cancelar la operación (con lo que retornará a la página principal sin cambios) o aceptar (OK) los cambios realizados, retornano a la página principal. El formato de la fecha (mes y año) se configura mediante las propiedades displayFormat y pikerFormat.

Por último, el segundo elemento de la lista mostrará, en la parte inferior de la tarjeta, un literal (Valor de la fecha:) y la fecha actualmente seleccionada.

El componente ion-datetime actualiza automáticamente el valor de la propiedad fechaCorta, gracias a la directiva [(ngModel)]. Dicha directiva de Angular realiza una vinculación de datos (o data binding) en doble sentido (lee y escribe) a la propiedad fechaCorta. Es decir, que visualiza (lee) el valor de la propiedad, y guarda los cambios (escribe) en la propiedad.



En el segundo elemento de la lista, se produce una vinculación de un único sentido. Cuando se encierra una expresión entre dobles llaves ({{ expresión }}), Angular sustituirá dicha expresión por el valor resultante. Esta vinculación lee el valor de la propiedad fechaCorta y a continuación extrae los 7 primeros caracteres de su valor (usando la función substr() de JavaScript), dando como resultado el año y el mes (recordemos que el valor de esta propiedad es un string que contiene la fecha capturada al iniciar la app, en formato ISO 8601: YYYY-MM-DDTHH:mm:ssTZD).


Card 2: Fecha completa

Esta tarjeta es similar a la anterior. Las diferencias son:
  • Permite manipular y mostrar también el día en la fecha (día, mes y año). Para ello, se modificarán las propiedades displayFormat y pikerFormat
  • Permite establecer un rango de fechas (desde cinco años atrás a cinco años adelante). Estas limitaciones se consiguen mediante las propiedades min y max del componente ion-datetime, y que obtienen sus valores a través de las propiedades minFecha y maxFecha, definidas en home.ts


El código de esta tarjeta es el siguiente (sustituir el segundo TODO):



Para separar el valor de la fecha con respecto al de la tarjeta anterior, se utiliza la propiedad fecha, en lugar de fechaCorta.

Card 3: Hora corta

La mecánica de esta tarjeta es muy similar al de la primera tarjeta. La diferencia radica en que el formato de la fecha es la hora y el minuto, lo que se consigue mediante las propiedades code>displayFormat y pikerFormat. Como sólo afecta al tiempo y no al día, se utiliza también la propiedad fecha.


El código de esta tarjeta es el siguiente (sustituir el tercer TODO):


Ejecutar la app

Para probar la app, ejecutar el siguiente comando en la consola del sistema: 

$ ionic serve

Esto compilará todo el código y lo empaquetará en el directorio www de la estructura del proyecto, y a continuación lanzará un navegador web, mostrando la aplicación desde la URL http://localhost:8100/. Recomiendo lanzar la aplicación en Google Chrome, ya que nos permite abrir el entorno de desarrollo y visualizar la app con una apariencia muy parecida a un smartphone o una tablet, pudiendo elegir también dicho dispositivo. Este entorno de desarrollo se obtiene pulsando las teclas Ctrl + Shift + I, o mediante el menú de opciones (tres puntos), opción "Más herramientas" y la opción "Herramientas para desarrolladores". En la parte superior del panel de control, habrá un icono que representa un dispositivo móvil (también se puede pulsar las teclas Ctrl + Shift + M).

Para llevar la app a un dispositivo móvil, previamente hemos de instalar Android Studio (en el caso de un terminal Android) o XCode (en el caso de un terminal iOS). Sin este requerimiento, no se puede compilar y generar los paquetes para dichas plataformas.

El siguiente paso sería agregar la plataforma que deseamos a nuestra aplicación. Para ello, ejecutar los siguientes comandos en la consola del sistema (según corresponda): 

$ ionic platform add android
$ ionic platform add ios


Para ejecutar la app en el emulador, ejecutar los siguientes comandos en la consola del sistema (según corresponda): 

$ ionic emulate android
$ ionic emulate ios


Si lo que queremos es ejecutar la app directamente en el dispositivo, conectar éste al ordenador y ejecutar los siguientes comandos en la consola del sistema (según corresponda): 

$ ionic run android
$ ionic run ios


Enlaces de interés

Publicado por
Etiquetas: , , , , , ,