Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
Ionic y Cordova
Framework Front-end
Ionic Native
Ionic Native es un contenedor de TypeScript para complementos de Cordova /
PhoneGap que facilita la incorporación de cualquier funcionalidad nativa que
necesite a su aplicación móvil Ionic .
Promesas y Observables
Ionic Native envuelve las devoluciones de llamada de los plugins en Promise
u Observable , proporcionando una interfaz común para todos los complementos
y asegurando que los eventos nativos desencadenen la detección de cambios en
Angular.
Instalación
Para agregar Ionic Native a su aplicación, ejecute el siguiente comando para
instalar el paquete principal:

npm install @ionic-native/core --save

Tenga en cuenta que el paquete básico Ionic Native se incluye de forma

predeterminada con cada aplicación Ionic.
Uso
Instale los complementos necesarios, Instale el paquete Ionic Native para cada
complemento que desee agregar. Por ejemplo, si desea instalar el complemento
de la cámara, deberá ejecutar el siguiente comando:

npm install @ionic-native/camera --save

Luego instale el complemento usando Cordova o Ionic CLI.

ionic cordova plugin add cordova-plugin-camera

Instalación de plugin
Todos los nombres de los paquetes están
documentados en la documentación del
complemento. Se recomienda seguir las
instrucciones de instalación en la
documentación de cada complemento, ya que
algunos complementos requieren pasos
adicionales para la instalación completa.

Agregue complementos al módulo de su

aplicación. Después de instalar el paquete de un
complemento, agréguelo a su aplicación
NgModule.
Plugin Camera
Instalemos el plugin de cordova y el plugin de ionic native
Agregar al app.module
Agreguemos la clase Camera al app.module.ts

Recordemos que todos los plugins de cordova funcionan como providers

Inyectar provider
Vamos a consumir el provider de la cámara desde la pagina home, así que
debemos primero inyectar el provider de la cámara y luego consumir desde
algún evento.
Variables para fotos
El resultado de tomar una foto no es la imagen en si, el verdadero resultado seria
un texto que la información correspondiente a la imagen y demás metadatos.
Para almacenar esto vamos a crear una variable de texto donde almacenemos
ese resultado. También necesitamos una variable para las opciones con las
cuales queremos capturar la imagen.
Método tomar foto
Ahora construyamos un método que consuma el provider camera y use las
opciones que definimos y el resultado lo guarde en nuestra variable.

Recordemos que la mayoría de plugins de Cordova funcionan como promesas u

observables, en este caso es una promesa y su sintaxis es la siguiente.
Evento que llama al método y mostrar imagen
Ahora construyamos un botón que por medio de un evento click llame al método
que acabamos de definir para usar el plugin de la cámara y luego mostremos la
imagen en una etiqueta img, para esto nos podemos apoyar en ngIf sobre
nuestra variable base64Image.
Debug de plugins
A diferencia del código que hemos realizado anteriormente para probar los
plugins el navegador no es una opción valida. En este caso existen varias
opciones como simuladores o el uso de dispositivos reales.

Vamos a compilar una versión para pruebas y vamos a usar nuestra app en un
dispositivo para ver el funcionamiento, esto se realiza conectando un dispositivo
Android, activando la depuración usb y ejecutando el siguiente comando:
Consola de dispositivos
Para hacer debug de los errores de la consola debemos utilizar el navegador
Chrome y desde la herramienta de inspector entrar al dispositivo que tenemos
conectado. Primero se abre el inspector y luego pulsamos Ctrl+shift+p que nos
habilita un recuadro de búsqueda ahí podemos escribir show remote devices y
ver los dispositivos conectados. Luego seleccionamos el dispositivos y vamos a
inspect lo cual nos desplegara una nueva ventana de inspector pero en este caso
es del dispositivo.
Plugin de Geolocalización
Ahora probemos el plugin que me permite usar el GPS de mi dispositivo. Para
esto nuevamente debemos instalar el plugin de ionic y el de cordova en mi
aplicación y luego agregarlo al app.module
Inyectar plugin y definir variables
En nuestro page(componente) vamos a cargar la clase geolocation y la vamos a
inyectar, vamos a crear una variable donde recibir los datos.
Método obtener posición
El provider geolocation funciona igual que el de la cámara como una promesa, a
continuación vemos un ejemplo de como obtener la posición:
Llamar al evento desde la vista
Creemos un botón con un evento click que ejecute el método que acabamos de
definir y una etiqueta de texto donde mostrar el resultado:

Note que el resultado es un objeto que contiene una propiedad coords y esta a
su vez tiene propiedades para la latitud y la longitud.
Despliegue de aplicaciones con cordova
Probar su aplicación en el navegador con ionic serve o con un emulador es rápido, fácil y conveniente
cuando su aplicación está en desarrollo, pero eventualmente tendrá que probar en un dispositivo. No
solo es la única forma de probar con precisión cómo se comportará y cómo se comportará tu
aplicación, muchos complementos de Ionic Native solo funcionarán cuando se ejecuten en hardware
real.

Dispositivos Android
Desplegar en un dispositivo Android es un proceso bastante sencillo. Si tiene un entorno de desarrollo
de Android que funcione, ya está listo.
Requisitos
● Java JDK
● Estudio Android
● Herramientas de Android SDK actualizadas, plataformas y dependencias de componentes.
Disponible a través del SDK Manager de Android Studio
dispositivos iOS
A diferencia de Android, los desarrolladores de iOS necesitan generar un perfil de aprovisionamiento
para firmar con código sus aplicaciones para realizar pruebas. La buena noticia es que, a partir de iOS9,
puede desarrollar y probar sus aplicaciones en su dispositivo iOS sin una cuenta paga de Desarrollador
de Apple. Esto es particularmente bueno para los desarrolladores que desean probar el desarrollo móvil
con Ionic, ya que ahorra el costo pero aún ofrece muchas de las características de tener una cuenta de
Desarrollador de Apple completa. Para ver un desglose completo de las características incluidas,
consulte los documentos de Apple .

Requisitos
● Xcode 7 o superior
● iOS 9
● Una identificación de Apple gratuita o una cuenta de desarrollador de Apple paga
Agregar Plataformas
Al crear un proyecto nuevo de Ionic si tenemos instalado cordova el nos
preguntara si queremos agregar las plataformas para el despliegue, si
confirmamos esta instrucción no debemos hacer nada adicional para iniciar la
compilación. Sino lo hicimos basta con agregar el siguiente comando.

● Ionic platform add ios

● Ionic platform add android

Instalar Android Studio
Como vimos en los requisitos necesitamos Android Studio para compilar
nuestra aplicación en un APK. Para descargarlo vamos a la página oficial de
Android developers.

https://developer.android.com/studio/
Actualizar licencias
Al descargar Android Studio en la versión actual no nos entrega las licencias de
Android actualizadas como las necesita Ionic para compilar nuestro código. Por
tanto debemos hacer este proceso de manera manual. Para ello vamos la ruta
donde se instala el SDK que por defecto es
C:\Users\NOMBRE_USUARIO\AppData\Local\Android\Sdk\tools\bin y desde
esta ruta ejecutar el comando sdkmanager --licenses. Luego de ejecutar el
comando verificara que licencias de Android no tenemos y preguntara una a una
si las queremos instalar. Vamos a marcar si(y) en todas.
Despliegue de android
Ahora que nuestra aplicación esta completa veamos como se hace el despliegue
en apps nativas para los diferentes sistemas operativos a través de cordova.
Para el caso de Android simplemente debemos ejecutar el comando:

Luego de unos minutos se generará un proyecto en java equivalente a nuestro

código de Ionic. Y si tenemos correctamente configurado Android Studio
también encontraremos dentro del proyecto Android un Build en APK
Crear Firma
Para firmar el APK debemos utilizar una herramienta llamada keytool que se
encuentra instalada por defecto junto al jdk. Esta herramienta genera una clave
para nuestra app. Debemos asegurarnos de guardar muy bien esta clave ya que
es la garantía de autenticidad de nuestra app. Para generar la clave debemos
pasar ciertos parámetros como están en la siguiente línea.
Firmar APK
Luego de obtener la firma ahora si podemos agregarla a nuestro archivo .apk
esto lo realizamos a través de otra herramienta que viene con el jdk que es
jarsigner. A continuación vemos un ejemplo de como usar la firma generada
anteriormente en el apk entregado por Ionic.
Optimizar APK
Para finalizar y subir nuestra app al Google play o simplemente instalar
directamente en algún en dispositivo Android debemos usar otra herramienta,
esta vez zipalign que se encuentra junto al sdk de Android Studio la cual permite
optimizar la app comprimiendo algunos archivos y al final nos entrega un apk
mucho mas liviano, lo cual es más apto para subir a la Google play.
Publicar una aplicación Google Play
En el siguiente post podemos encontrar los pasos para publicar nuestra app en
el Google Play, para ello debemos contar con una cuenta de desarrollador de
Google que tiene un costo de 25 USD.

● https://support.google.com/googleplay/android-
developer/answer/113469?hl=es-419
Recurso recomendado
● https://creator.ionic.io

Creator es una sencilla herramienta de arrastrar y soltar para pasar de la

idea al App Store , con solo arrastrar el mouse.