Introducción a Ionic Native y Cordova
En la clase de hoy vamos a empezar a conocer lo que son Ionic Native y los plugins de Apache Cordova.
Con ello conseguiremos que nuestra aplicación se comunique con las aplicaciones nativas de nuestro dispositivo.
[mepr-show if=”rule: 2247″]
[/mepr-show]
Ahora que ya sabemos lo que es, vamos a crear una nueva aplicación donde aplicaremos los conceptos ya vistos y donde finalmente incluiremos el código necesario para abrir la camara en nuestro dispositivo móvil.
App Cámara – Página Home
En este primer paso vamos a crear un nuevo proyecto de Ionic, para ello iremos a nuestro terminal o consola de node, y una vez estemos en la carpeta deseada, ejecutaremos:
ionic start myAppCamera blank
Abriremos nuestro proyecto en Visual Studio Code y modificaremos los ficheros home.page.html y home.page.ts para crear un componente ion-card de bienvenida y un ion-fab-button que abrirá la página modal.
[mepr-show if=”rule: 2247″]
[/mepr-show]
Con esto ya tendremos la base de nuestra aplicación y podremos añadir el resto de elementos.
App Cámara – Página Añadir imagen
Ahora que ya tenemos la página home, vamos de nuevo al terminal para generar una nueva página, que usaremos como modal, para ello ejecutaremos el siguiente comando:
ionic g page addImage
Ahora en esta nueva pantalla añadiremos el método dismiss del modal y añadiremos un componente grid que contendrá dos botones:
- Uno que enlazara con el método hacerFoto()
- El otro lo hará con el método seleccionarImagen()
[mepr-show if=”rule: 2247″]
[/mepr-show]
Una vez tenemos esto, es hora de añadir el código necesario a nuestro método hacerFoto().
App Cámara – Instalando y utilizando plugin de cámara
En este vídeo vamos a instalar Cordova y el plugin de la cámara. Para ello, lo primero que tenemos que ver es si nuestra aplicación tiene la dependencia de Cordova. Se puede comprobar muy rápido si buscamos en la raiz de nuestro proyecto el fichero config,xml, ya que al instalar Cordova se crea este fichero. Si no lo tenemos, debemos ejecutar el siguiente comando:
ionic integrations enable cordova
Ahora que ya tenemos lista nuestra aplicación vamos a ir a la documentación de Ionic Native, y seguiremos los pasos descritos ahí para añadir nuestro código al método hacerFoto().
[mepr-show if=”rule: 2247″]
[/mepr-show]
Ahora es vuestro turno para probar a implementar otros plugins, por ejemplo, buscar el plugin necesario para poder seleccionar una imagen de la galería y añadirlo al botón ‘seleccionar imagen’.
En la siguiente clase instalaremos todo lo necesario para crear un emulador de un dispositivo android y testearemos nuestra app. Además veremos como subir nuestras aplicaciones a las store.