Una vez hayas probado tu aplicación en el navegador con el comando ionic serve, puedes compilar el código para subirlo a PhoneGap Build y obtener el fichero .apk para instalarlo en tus dispositivos móviles. Bastará con seguir los pasos que se indican a continuación.
En primer lugar debemos cambiar el archivo tsconfig.json para que el campo target tenga el valor es5 (más información en stackoverflow):
...
"target": "es5"
...
El segundo paso consistirá en ejecutar el siguiente comando desde el directorio del proyecto (puedes encontrar más información aquí):
ionic build --prod -- --base-href .
Ese comando generará una carpeta www dentro de tu proyecto con todo el código web necesario. A continuación deberemos añadir allí el fichero config.xml, incluyendo el plugin cordova-plugin-ionic-webview (puedes obtener más información en la página de github de dicho plugin):
Si deseamos utilizar algún plugin (la cámara, por ejemplo) también deberemos modificar el fichero src/index.html para enlazar el fichero cordova.js (no tenemos que crearlo nosotros, sólo enlazarlo, ya que dicho archivo se creará automáticamente al compilar el código con PhoneGap Build):
Como último paso sólo deberemos comprimir todos los archivos dentro de la carpeta www (index.html, config.xml, …) para generar el archivo zip que subiremos a PhoneGap Build.
En los ejercicios que hemos desarrollado hasta ahora sólo hemos utilizado IONIC de manera independiente, sin echar mano de ningún otro framework adicional, ya que hemos interactuado con los nuevos elementos HTML utilizando código JavaScript.
Para aplicaciones sencillas, puede ser una opción completamente válida y muy recomendable, dado el bajo nivel de requerimientos. Sólo necesitamos conocimientos básicos de desarrollo web, y con una simple referencia desde el código HTML, ya tenemos a nuestro alcance todo el potencial ofrecido por IONIC 4.
Sin embargo, si pretendemos desarrollar aplicaciones más complejas, resulta muy recomendable usar la segunda posibilidad que nos ofrece IONIC 4, al permitirnos combinar unos resultados visuales muy buenos, con un estilo de programación muy estructurado, y con amplias posibilidades dentro del desarrollo web.
En este ejercicio vamos a dar un paso adelante, y observaremos el potencial del que disponemos al usar IONIC con un framework tan utilizado y conocido como Angular. Desarrollaremos la misma aplicación que en un ejercicio anterior, pero veremos que el código fuente estará mucho mejor estructurado, y nos ofrecerá muchas más posibilidades que el simple código JavaScript.
Además, al tener la suerte de poder utilizar IONIC 4, disponemos de toda la documentación por duplicado para que podamos escoger la opción que más nos interese. En las versiones anteriores, IONIC se encontraba empaquetado con Angular, con lo que sólo teníamos una alternativa. Ahora mismo tenemos a nuestro alcance las mismas facilidades, tanto si escogemos desarrollar nuestra app utilizando HTML+JavaScript o Angular. Además, sea cual sea la opción por la que nos declinemos, IONIC nos proporciona la funcionalidad y la documentación necesaria para cada uno de sus componentes en ambos casos:
Como opinión personal, me gustaría decir que una vez se aprende Angular, resulta difícil desprenderse de él, ya que se pueden desarrollar aplicaciones más complejas y mucho más estables, con un código fuente más legible y mucho más fácil de mantener y actualizar.
La funcionalidad de la aplicación
La funcionalidad a implementar será la misma que en el ejercicio anterior, aunque en esta ocasión vamos a estructurar mejor el código y dividiremos la aplicación en dos pantallas.
Vamos a enumerar de nuevo los aspectos principales de la aplicación, y observaremos que podemos obtener el mismo resultado desarrollando la aplicación con Angular.
La pantalla principal
Gestionar varias listas de tareas independientes.
Borrar de golpe todas las tareas de una lista.
Borrar una sola tarea de una lista determinada mediante un botón oculto que se visualizará al deslizar hacia la derecha la tarea a borrar.
Pedir confirmación antes de borrar cualquier tarea.
Permitir ordenar las tareas arrastrando cualquier elemento a una nueva posición.
La pantalla de detalles
Añadir tareas indicando la fecha, la descripción de la tarea, y un icono identificativo de la prioridad.
Visualizar y editar los detalles de cada tarea haciendo clic sobre el elemento correspondiente de la lista.
Primeros pasos
Requisitos
La mayoría de las aplicaciones de IONIC se crean y desarrollan principalmente utilizando la herramienta de la línea de comandos. A continuación enumeraremos los pasos necesarios para instalar el software necesario en nuestros ordenadores para poder desarrollar y compilar desde la consola aplicaciones de IONIC utilizando Angular.
En primer lugar, deberemos instalar Node.js (la versión LTS, recomendada para la mayoría de usuarios, tal como se indica en la web). Podremos comprobar si se ha instalado correctamente de la siguiente forma:
node --version
npm --version
A continuación deberemos instalar el cliente de IONIC, de la siguiente forma:
npm install -g ionic
La opción -g significa que se va a instalar de manera global en nuestros equipos, y por lo tanto necesitaremos permisos de administrador. En el caso de utilizar un sistema operativo Windows es recomendable abrir un terminal en modo administrador. Para sistemas operativos Mac/Linux, el comando se deberá ejecutar con sudo.
Código base de la aplicación
Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:
Al ejecutar el comando, IONIC nos informará del proceso con algunos avisos y si todo va bien, al final nos mostrará un mensaje similar al siguiente:
[INFO] Next Steps:
- Go to your newly created project: cd ./tareas
- Run ionic serve within the app directory to see your app
- Build features and components: https://ion.link/scaffolding-docs
- Get Ionic DevApp for easy device testing: https://ion.link/devapp
Al finalizar el proceso, se habrá creado un directorio con el nombre tareas, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:
cd tareas
Y por último, puesto que la aplicación básica que acabamos de crear sólo dispone de una pantalla principal, procederemos además a añadir una página adicional, y un fichero auxiliar (servicio) donde ubicaremos la funcionalidad básica para gestionar las listas y sus elementos:
ionic generate page AddEditItem
ionic generate service list
Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Aunque la funcionalidad sea la misma, al utilizar Angular, el código fuente sí tendrá variaciones, que como vamos a observar a continuación, nos permitirán generar un código mejor estructurado y más legible que el de una aplicación del mismo tamaño desarrollada simplemente con JavaScript.
Si hemos ejecutado correctamente los comandos anteriores, IONIC ya nos habrá creado todos los ficheros que vamos a utilizar en este ejercicio:
src/app/list.service.ts: Funciones auxiliares.
src/app/home/home.page.html: Código HTML de la pantalla principal.
src/app/home/home.page.ts: Código TypeScript de la pantalla principal.
src/app/add-edit-item/add-edit-item.page.html: Código HTML de la pantalla con los detalles de las tareas.
src/app/add-edit-item/add-edit-item.page.ts: Código TypeScript de la pantalla con los detalles de las tareas.
Probando la aplicación en el navegador
Una de las primeras ventajas con las que nos encontramos es que la misma herramienta de consola de IONIC se puede utilizar como servidor web, con lo que nos permitirá probar nuestra aplicación en el navegador al mismo tiempo que se actualiza automáticamente después de realizar cualquier cambio en el código fuente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:
ionic serve
Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:
(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)
Funciones auxiliares
En el fichero list.service.tsdesarrollaremos el código de una clase que contenga un array de listas de tareas y las funciones básicas para acceder a las mismas y a sus elementos:
getList(index): Nos devolverá la lista completa ubicada en la pestaña index (la primera pestaña vendrá indicada por el valor cero).
saveList(listIndex): Guardará la lista indicada de manera permanente utilizando localStorage.
getItem(listIndex, itemIndex): Devolverá una tarea en particular.
setItem(listIndex, item, itemIndex?): Añadirá una tarea a la lista indicada, o si se indica el índice de una tarea concreta, la actualizará en vez de añadirla.
deleteItem(listIndex, itemIndex): Borrará la tarea indicada.
deleteList(listIndex): Borrará una lista entera.
moveItem(listIndex, from, to): Cambiará de orden una tarea, moviéndola de la posición from a la posición to.
En el fichero home.page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para manipular las listas y las tareas que se visualizan en la pantalla principal:
constructor(ListService, AlertController): En el constructor inicializaremos el array de objetos con las propiedades que definen las diferentes listas (etiqueta, icono y lista de tareas). Si ya existen tareas al iniciar la aplicación, se leerán para que aparezcan en pantalla.
toggleReorder(): Para activar o desactivar el botón de los elementos para reordenarlos.
setTab(tabIndex): Activará la pestaña con el índice indicado.
deleteItem(item?): Después de pedir confirmación, borrará todos los elementos de la lista de tareas activa, o sólo el elemento indicado, si éste se ha pasado por parámetro.
moveItem(indexes): Recibe un objeto con la posición inicial de una tarea en la lista y la posición final donde se debe mover.
Para implementar la barra superior de la pantalla principal, ahora utilizaremos el siguiente código:
Ya podemos observar algunas diferencias respecto al código JavaScript. En primer lugar, en vez de utilizar el atributo del evento onclick utilizaremos la sintaxis (click) (más detalles en la documentación de Angular). En segundo lugar, observamos una gran diferencia respecto a la opción de añadir un nuevo elemento. En este caso vamos a diseñar una nueva página (a la que accederemos con la url /add-edit-item) en vez de abrir un cuadro de diálogo modal. La sintaxis de Angular utilizada en este caso, nos permite pasar información ({ tab:tabIndex, item:-1 }) de una página a otra, de forma que sepamos a qué lista debemos añadir la nueva tarea, colocando además el índice del item a -1 para indicar que no queremos modificar ninguna tarea existente, sino añadir una nueva:
Respecto a la versión con JavaScript, la mayor diferencia la observamos en las siguientes líneas:
<ion-item-sliding *ngFor="let item of tabs[tabIndex].list; let i=index">
...
<ion-tab-button *ngFor="let tab of tabs; let i=index" (click)="setTab(i)" [tab]="tab.label">
Utilizando Angular podemos insertar bucles dentro de nuestro código HTML que nos permitirán mostrar muy fácilmente varios elementos que tengan las mismas propiedades (consultar la documentación de angular para más detalles). De esta forma tendremos el mismo código independientemente de la cantidad de listas de tareas que vayamos a utilizar. Bastará con especificar en el constructor las etiquetas y los iconos de cada pestaña utilizando un simple array:
En este caso, la propiedad disabled se encierra entre corchetes para unirla a la variable reorder, y el evento ionItemReorder se encierra entre paréntesis.
En el fichero add-edit-item-page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para editar o crear una tarea:
constructor(Router, ActivatedRoute, AlertController, ListService): En el constructor inicializaremos por un lado un array con los nombres de los iconos para indicar las prioridades de las tareas, y a continuación recogeremos los parámetros proporcionados desde la pantalla principal (índices de la lista y elemento a modificar, si es el caso).
error(message): Para mostrar mensajes de error si por ejemplo no se ha especificado ningún texto en la descripción de la tarea y pulsamos el botón de confirmar.
save(): Comprobará si desde la pantalla principal se ha elegido una tarea a modificar o si por el contrario se ha pulsado el botón de nueva tarea, y llamará a la función del servicio, volviendo a la pantalla principal a continuación.
La barra superior de esta pantalla sólo contendrá un título y dos botones, uno para cancelar y otro para confirmar. Ambos nos llevarán de nuevo a la pantalla principal, pero si pulsamos el botón de confirmar, previamente se grabarán los datos introducidos:
La novedad a destacar es el uso de [(ngModel)], una de las indudables ventajas que nos ofrece Angular, ya que nos permite enlazar un atributo de la clase con un campo del formulario, de forma que las modificaciones que se produzcan queden reflejadas en los dos sentidos: el valor que tenga dicho atributo en el código TypeScript se mostrará en el código HTML, y cualquier modificación que hagamos en el formulario, también cambiará el valor del atributo de la clase. Se puede consultar la documentación oficial para más detalles.
Por otro lado, también estamos implementando un bucle para mostrar los posibles iconos indicativos de la prioridad de la tarea, lo que sin duda nos ahorra código HTML:
<ion-segment-button *ngFor="let button of buttons" [value]="button">
<ion-icon [name]="button"></ion-icon>
</ion-segment-button>
Al igual que en el constructor de la página principal, bastará con especificar mediante un array todos los botones que deseemos visualizar:
El procedimiento utilizado en este ejemplo supera obviamente al de la versión basada sólo en JavaScript, ya que ahora no sólo hemos mejorado a nivel de código, sino que hemos agilizado el proceso de desarrollo y actualización, obteniendo además una app que no requiere Internet, ya que ahora IONIC no se encuentra enlazado directamente como librería, sino empaquetado dentro de la propia aplicación.
Puedes hacer clic aquí para observar que también podemos acceder al código generado desde el navegador, como cualquier otra página web.
¿Dónde está el límite en el uso de los teléfonos móviles?
La evolución de las nuevas tecnologías podría llegar a conducirnos a un futuro en el que no todo es mejor que antes.
Bilingüe
Texto en castellano y en inglés. Incluye ilustraciones relacionadas con el cuento para aprender el abecedario, repartidas en tres secciones:
Learn the alphabet
Letter … is for …
Spell it out
Nueva edición con letra caligráfica
Ideal para aprender a leer y escribir, en castellano y en inglés.
Otros libros de la serie «Cuentos para ser escuchados»
También está disponible la colección completa de cuentos en español en un solo libro, además de la edición especial de cada uno de los relatos en su versión bilingüe, con más ilustraciones, en formato de libro electrónico y en papel:
¿Te has olvidado de traer almuerzo? ¡No pasa nada!
Nuestro protagonista se olvida un día el almuerzo en casa, y su profesora y compañeros le enseñarán lo bonito que puede llegar a ser el mero hecho de compartir algo.
Bilingüe
Texto en castellano y en inglés. Incluye ilustraciones relacionadas con el cuento para aprender el abecedario, repartidas en tres secciones:
Learn the alphabet
Letter … is for …
Spell it out
Nueva edición con letra caligráfica
Ideal para aprender a leer y escribir, en castellano y en inglés.
Otros libros de la serie «Cuentos para ser escuchados»
También está disponible la colección completa de cuentos en español en un solo libro, además de la edición especial de cada uno de los relatos en su versión bilingüe, con más ilustraciones, en formato de libro electrónico y en papel:
Una forma muy diferente de entender algunos de los motivos que nos mueven a los adultos a tomar ciertas decisiones.
Bilingüe
Texto en castellano y en inglés. Incluye ilustraciones relacionadas con el cuento para aprender el abecedario, repartidas en tres secciones:
Learn the alphabet
Letter … is for …
Spell it out
Nueva edición con letra caligráfica
Ideal para aprender a leer y escribir, en castellano y en inglés.
Otros libros de la serie «Cuentos para ser escuchados»
También está disponible la colección completa de cuentos en español en un solo libro, además de la edición especial de cada uno de los relatos en su versión bilingüe, con más ilustraciones, en formato de libro electrónico y en papel:
En este ejercicio vamos a demostrar que puede resultar muy sencillo desarrollar una aplicación que nos permita mantener un registro de lugares interesantes, guardando la ubicación precisa y una imagen identificativa de cada uno.
Será el mismo navegador el que nos proporcione la ubicación actual de forma automática, y nos permita elegir las imágenes a utilizar, de entre las que tengamos en nuestros equipos. Además, al ejecutar la app en nuestros móviles, podremos utilizar también la cámara en el mismo momento, pudiendo hacer una foto que se quedará guardada en nuestra aplicación. De esa forma, tendremos imágenes asociadas con la latitud y la longitud de los sitios donde hayamos hecho las fotos, pudiendo acceder además al mapa correspondiente con un solo clic.
Con menos de 100 líneas de código
Veremos que al utilizar IONIC 4, con menos de 100 líneas de código JavaScript podemos desarrollar una aplicación multiplataforma, que funcionará perfectamente en cualquier navegador, o instalada como app en nuestros dispositivos móviles. Y todo ello, con el mismo código fuente, sin cambiar ni una sola línea.
La funcionalidad de la aplicación
La aplicación dispondrá de un cuadro de texto donde podamos especificar la descripción del nuevo lugar que queramos registrar.
Además de poder introducir alguna descripción, se habilitará un nuevo control para poder elegir una imagen. Si estamos ejecutando la aplicación desde nuestro ordenador de escritorio, podremos elegir cualquier imagen de las que se encuentran en nuestro equipo. Si ejecutamos la aplicación desde nuestros dispositivos móviles, podremos hacer una foto en ese mismo momento.
Una vez introducida la descripción y elegida o hecha la foto, la aplicación obtendrá automáticamente la ubicación en la que nos encontremos y creará un elemento en la lista de lugares en el que aparecerá la foto y la descripción.
Al hacer clic sobre cada elemento de la lista, si estamos utilizando el navegador de nuestro ordenador de escritorio, abrirá la página web correspondiente de Google Maps para mostrarnos la ubicación precisa. Si estamos ejecutando la aplicación desde nuestros dispositivos móviles, nos permitirá elegir qué aplicación se utilizará para visualizar la ubicación.
Además, podremos reordenar los elementos de la lista activando un control por cada elemento, que se podrá ocultar o mostrar mediante un botón ubicado en la barra superior de la aplicación.
Por último, permitiremos borrar cualquier elemento de la lista utilizando un botón oculto que se mostrará al deslizar el elemento correspondiente a la derecha.
Código HTML
El encabezado
Como ya viene siendo habitual, colocaremos una barra superior que contenga el título y el botón de reordenar:
En cada pulsación del botón de reordenar, activaremos o desactivaremos dicha funcionalidad cambiando simplemente el valor del atributo correspondiente.
El formulario para la descripción y la imagen
Utilizaremos un simple cuadro de texto para introducir la descripción del lugar que queramos registrar y un elemento HTML estándar de tipo fichero para elegir la imagen:
Destacamos el uso del elemento <input type="file">, que automatiza la creación del campo de tipo fichero, y nos permitirá elegir fácilmente una imagen para asociarla al lugar que queramos dejar registrado.
Por último, al final del cuadro de elección de imagen colocaremos un icono para acceder a la cámara de nuestros dispositivos móviles, utilizando como imagen la fotografía que realicemos en ese momento. Esta funcionalidad no estará operativa cuando utilicemos la aplicación desde el navegador.
Los elementos de la lista
Cada elemento de la lista será un enlace a la página web correspondiente de Google Maps para conocer la ubicación del lugar, de forma que podamos acceder fácilmente con un simple clic en el elemento correspondiente. Para ello bastará con especificar la url mediante el atributo href del elemento <ion-item></ion-item> (más información aquí).
Además, utilizaremos el elemento <ion-thumbnail></ion-thumbnail> para mostrar una miniatura de la imagen. Por último, añadiremos dos botones, uno para reordenar (<ion-reorder></ion-reorder>) y otro para borrar (<ion-item-option></ion-item-option>):
Sólo necesitamos recorrer la lista utilizando por ejemplo un bucle forEach, que además nos proporcionará cada elemento item del array, así como el índice index de cada uno de ellos.
En este ejercicio sólo necesitamos gestionar una lista de lugares, con lo que desarrollaremos funciones para leer, actualizar e imprimir dicha lista, utilizando para ello localStorage, como en ejercicios anteriores:
function getList() {
let list = localStorage.getItem('places-list');
return list ? JSON.parse(list) : [];
}
function saveList(list) {
localStorage.setItem('places-list', JSON.stringify(list));
printItems();
}
function printItems() {
document.querySelector('ion-reorder-group').innerHTML = "";
getList().forEach((item, index) => {
document.querySelector('ion-reorder-group').innerHTML += ... ;
});
}
Al iniciar la aplicación
Al iniciar la aplicación capturaremos el evento de IONIC que nos indicará cuándo debemos reordenar los elementos de la lista, y además, imprimiremos los lugares que tengamos guardados de una ejecución anterior:
Para conocer la ubicación desde la que vamos a registrar un nuevo lugar, utilizaremos la funcionalidad de geolocalización de HTML, de forma que consigamos que el código funcione perfectamente tanto en el navegador, como en la app una vez compilada (más información aquí):
navigator.geolocation.getCurrentPosition(pos => {
let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
...
});
Además, crear un enlace a Google Maps conociendo la ubicación resulta muy sencillo. En nuestro caso especificamos un zoom razonable (z=15), el tipo de mapa satélite (t=k), y la latitud y la longitud (q=…). Se puede obtener más información en la página oficial de Google, o también por ejemplo aquí.
Indicador de ejecución en proceso
Mientras se obtiene la ubicación y se procesa la imagen, resulta conveniente bloquear la aplicación mediante algún indicador para informar al usuario que todavía no se ha completado la acción. Para ello mostraremos un indicador en pantalla utilizando la funcionalidad que nos proporciona IONIC (más información aquí):
Utilizando simple código HTML y JavaScript, podemos obtener la imagen seleccionada en formato base 64, de forma que la podemos guardar como si se tratara de cualquier otra cadena de texto (más información aquí, o aquí):
Además, añadiremos la funcionalidad necesaria para abrir la cámara cuando ejecutemos la aplicación en nuestros dispositivos móviles (más información en la documentación de Cordova):
function onLoad() {
document.addEventListener('ionItemReorder', (event) => { moveItem(event.detail); });
printItems();
}
function getList() {
let list = localStorage.getItem('places-list');
return list ? JSON.parse(list) : [];
}
function saveList(list) {
localStorage.setItem('places-list', JSON.stringify(list));
printItems();
}
function printItems() {
document.querySelector('ion-reorder-group').innerHTML = "";
getList().forEach((item, index) => {
document.querySelector('ion-reorder-group').innerHTML +=
`<ion-item-sliding>
<ion-item href='`+item.url+`'>
<ion-thumbnail slot="start"><img src="`+item.img+`" />
</ion-thumbnail>`+item.name+`<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item-options side="start">
<ion-item-option color="danger" onclick="deleteItem(`+index+`)">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>`;
});
}
function addItem(event = false) {
const loading = document.createElement('ion-loading');
loading.duration = 15000;
document.querySelector('ion-app').appendChild(loading);
loading.present();
navigator.geolocation.getCurrentPosition(pos => {
let text = document.querySelector('ion-input').value;
let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
if (event) {
let reader = new FileReader();
reader.onload = (data) => {
saveItem({ name:text, img:data.target.result, url:url });
event.target.value = '';
loading.dismiss();
}
reader.readAsDataURL(event.target.files[0]);
}
else {
loading.dismiss();
navigator.camera.getPicture(function success(data) {
saveItem({ name:text, img:"data:image/jpeg;base64,"+data, url:url });
}, function error(msg) {
alert(msg);
}, { targetWidth:100, destinationType:Camera.DestinationType.DATA_URL });
}
});
}
function saveItem(item) {
let list = getList();
list.unshift(item);
saveList(list);
}
function deleteItem(item) {
document.querySelector('ion-list').closeSlidingItems();
let list = getList();
list.splice(item, 1);
saveList(list);
}
function moveItem(indexes) {
let list = getList();
let item = list[indexes.from];
list.splice(indexes.from, 1);
list.splice(indexes.to, 0, item);
indexes.complete();
saveList(list);
}
function toggleReorder() {
let reorder = document.querySelector('ion-reorder-group').disabled;
document.querySelector('ion-reorder-group').disabled = !reorder;
}
Icono y pantalla de bienvenida
Si queremos cambiar el icono o la pantalla de bienvenida, bastará con actualizar los archivos icon.png y splash.png respectivamente, colocándolos en el mismo archivo zip que el código fuente de nuestro proyecto.
Compilando la aplicación
Plugins de geolocalización y cámara
Para que la aplicación tenga los permisos correctos, y podamos utilizar la funcionalidad nativa para conocer la ubicación, añadiremos el plugin correspondiente (más información aquí):
<plugin name="cordova-plugin-geolocation" />
Además, para utilizar la cámara también echaremos mano de otro plugin, ya que sólo podemos acceder a dicha funcionalidad en nuestros dispositivos móviles (más información aquí):
<plugin name="cordova-plugin-camera" />
Debemos recordar que toda la funcionalidad de la aplicación se encontrará disponible tanto en el navegador como en la app, exceptuando la cámara, ya que es específica del dispositivo, y no estará operativa en el navegador.
Para instalar la aplicación en nuestros dispositivos móviles, tenemos que compilar el código fuente, con lo que deberemos incluir los siguientes archivos en el fichero zip que subiremos a la página web de PhoneGap:
index.html
places.js
config.xml
icon.png
splash.png
El resultado
Puedes hacer clic aquí para probar la aplicación propuesta. Se puede observar que el mismo código de la app generada también puede funcionar perfectamente en el navegador como una página web.
Una emotiva historia de dos amigas inseparables con habilidades muy especiales
En clase siempre hemos tenido compañeros y compañeras con diferentes destrezas, y el trabajo en equipo nos permite hacer tareas que no podríamos llevar a cabo nosotros solos. Descubre las fantásticas habilidades de nuestras protagonistas cuando se ponen a trabajar juntas.
Nueva edición en color y para colorear
Un relato precioso en un libro de gran tamaño (21,5 x 28 cm), con más de 70 páginas y 100 ilustraciones en color y también para colorear. El cuaderno de actividades perfecto para niños y niñas, con el que aprenderán el abecedario y vocabulario básico en inglés. Todas las letras y palabras están ilustradas de manera sencilla para facilitar su aprendizaje.
Cuento bilingüe español-inglés y cuaderno de caligrafía
Ideal para aprender a leer y escribir, en castellano y en inglés. Incluye además ilustraciones relacionadas con el cuento para aprender el abecedario, repartidas en tres secciones:
Learn the alphabet
Letter … is for …
Spell it out
Otros libros de la serie «Cuentos para ser escuchados»
También está disponible la colección completa de cuentos en español en un solo libro, además de la edición especial de cada uno de los relatos en su versión bilingüe, con más ilustraciones, en formato de libro electrónico y en papel:
Una emotiva historia que ensalza el valor de la familia
Conoceremos a un médico que sólo receta inyecciones y medicinas. ¿Conseguirá curar a todos los pacientes que pasan por su consulta? En este emotivo relato nos meteremos en la piel de un niño que tiene miedo a los pinchazos y que además tal vez necesite un tratamiento especial.
Nueva edición en color y para colorear
Un relato precioso en un libro de gran tamaño (21,5 x 28 cm), con más de 70 páginas y 100 ilustraciones en color y también para colorear. El cuaderno de actividades perfecto para niños y niñas, con el que aprenderán el abecedario y vocabulario básico en inglés. Todas las letras y palabras están ilustradas de manera sencilla para facilitar su aprendizaje.
Cuento bilingüe español-inglés y cuaderno de caligrafía
Ideal para aprender a leer y escribir, en castellano y en inglés. Incluye además ilustraciones relacionadas con el cuento para aprender el abecedario, repartidas en tres secciones: Learn the alphabet, Letter … is for …, Spell it out.
Learn the alphabet
Letter … is for …
Spell it out
Otros libros de la serie «Cuentos para ser escuchados»
También está disponible la colección completa de cuentos en español en un solo libro, además de la edición especial de cada uno de los relatos en su versión bilingüe, con más ilustraciones, en formato de libro electrónico y en papel:
Como habremos observado, PhoneGap Build utiliza un icono por defecto al compilar nuestras aplicaciones. En este ejercicio vamos a ver cómo podemos cambiar el icono de nuestra aplicación de lista de tareas fácilmente y sin necesidad de instalar ningún software adicional en nuestros equipos. Además, también veremos cómo añadir una pantalla de bienvenida, lo que sin duda le dará un toque más profesional a nuestra aplicación.
El icono nos servirá para distinguir claramente cuál es nuestra app de entre todas las instaladas en el móvil, pudiendo elegir una imagen cualquiera que podemos descargar de Internet, o también diseñándola nosotros mismos.
La pantalla de bienvenida se visualizará al arrancar la aplicación, y permanecerá unos segundos, mientras el móvil carga nuestra app, o incluso se puede prorrogar el tiempo que nosotros decidamos.
Por ejemplo, yo he buscado un par de imágenes etiquetadas para reutilización, y he escogido las siguientes como icono y pantalla de bienvenida respectivamente:
El archivo config.xml
Deberemos incluir las opciones específicas en nuestro archivo config.xml para que PhoneGap Build pueda reconocer y enlazar ambos archivos. Además, deberemos añadir una línea con <plugin name="cordova-plugin-splashscreen" /> para poder utilizar el plugin para mostrar la pantalla de bienvenida:
Como opciones adicionales podemos configurar el tiempo que permanece mostrándose la pantalla de bienvenida. El valor por defecto es de tres segundos. Por ejemplo, con la siguiente línea lo establecemos a cinco segundos para que la podamos ver un poco mejor:
También debemos tener en cuenta que por defecto, la pantalla de bienvenida sólo se mostrará la primera vez que se abra la aplicación. Una vez se haya ejecutado la app, para volver a visualizar la imagen de nuevo, deberemos cerrar la aplicación por completo y volverla a abrir. Nosotros en este ejemplo vamos a configurar dicha opción para que se muestre siempre:
También debemos tener en cuenta que por simplificar, estamos utilizando únicamente una imagen como pantalla de bienvenida. Para asegurar que se ajuste automáticamente al tamaño de la pantalla, independientemente de la orientación y el tamaño del dispositivo, activaremos además la opción específica para que cambie la proporción de la imagen automáticamente:
Y por último, para asegurar que no tenemos problema con nuevos dispositivos, recomendamos añadir también la siguiente opción para utilizar la última versión del compilador hasta la fecha:
Finalmente deberemos incluir en el fichero ZIP que subamos a PhoneGap las dos imágenes que hayamos elegido como icono y pantalla de bienvenida (icon.pngy splash.png en nuestro ejemplo, aunque podríamos haber utilizado cualquier otro nombre). De esta forma, el archivo ZIP contendría los siguientes ficheros:
En esta ocasión añadiremos al ejercicio anterior la opción de compartir, de forma que desde nuestra aplicación podamos enviar la lista de tareas mediante un mensaje de WhatsApp, un correo electrónico, un SMS, etc.
Además, añadiremos el código necesario para disponer de un menú lateral donde podremos añadir más opciones, y donde sugerimos además colocar la opción de borrar la lista de tareas, para que no esté tan accesible desde la pantalla principal:
El menú lateral
Primero añadiremos en la barra superior de la pantalla principal de nuestra aplicación un botón para desplegar el menú lateral:
Como podemos leer en la documentación de IONIC, el elemento <ion-menu-button></ion-menu-button> se encarga de todo, ya que crea automáticamente el icono del botón y añade la funcionalidad necesaria para desplegar el menú en la página actual.
Sólo nos falta añadir el código necesario con el menú lateral, que tendrá su propio encabezado y una lista con las opciones que deseemos. En nuestro caso pondremos la opción de reordenar, de compartir y de borrado de todos los elementos de la lista seleccionada. Además, añadiremos también un botón para volver a ocultar el menú:
Observaremos que el elemento <ion-menu></ion-menu> por defecto creará un menú que aparece desde la izquierda de la pantalla actual, tal como se especifica en la documentación de IONIC. Se podrá ocultar pulsando de nuevo el botón de menú, o con un gesto swipe hacia la izquierda, o incluso pulsando fuera del menú. Además, utilizaremos el elemento <ion-menu-toggle></ion-menu-toggle> para conseguir que al pulsar en cualquier opción, el menú también se cierre automáticamente.
Utilizaremos la funcionalidad nativa de nuestros dispositivos móviles para poder enviar la lista de tareas a alguno de nuestros contactos. Para incluir en nuestra aplicación el plugin necesario para acceder a dicha funcionalidad, bastará con añadir la siguiente línea al archivo config.xml:
A continuación modificaremos el código fuente del archivo todo.js para añadir la función share(), que creará una cadena de texto y se la proporcionará al plugin de compartir para que se pueda enviar utilizando otra aplicación.
Bastará con crear la función share() con el código necesario para obtener en una única cadena de texto todas las tareas una detrás de otra, separadas por saltos de línea. Después sólo necesitamos llamar a la función socialsharing.share() del plugin para activar y mostrar el menú de compartir de nuestros móviles:
function share() {
let text = "";
getList().forEach((task, index) => {
text += (index+1) + ". " + task.text + " - " + task.date.slice(0,10) + "\n";
});
window.plugins.socialsharing.share(text);
}