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
