Ionic 3, plugins de Cordova y Ionic Native

El objetivo de este post es un poco brindar una actualización al post anterios sobre cómo utilizar plugins de Cordova en Ionic 2 con Ionic Native pues algunas cosas han cambiando en la nueva versión y no quería eliminar el post anterior pues todavía hay desarrolladores a los cuales les pueda ser útil si sus proyectos utilizan la versión 2 de Ionic.

En el post sobre la versión anterior mencionamos los beneficios de utilizar los plugins de Cordova para acceder a funcionalidades nativas cuando desarrollamos aplicaciones híbridas con Ionic y qué es Ionic Native, en este no nos vamos a enfocar en los conceptos sino en las actualizaciones relacionadas a Ionic Native en la versión 3.x, en fin, vamos a enfocarnos más en la práctica.

Vamos a desarrollar la misma aplicación pero esta vez vamos a utilizar la plantilla blank.

Proyecto y dependencias

Primero vamos a crear el proyecto (asumiendo que ya tenemos actualizado Ionic), asi que vamos a la consola y ejecutamos:

ionic start ejemploCamara blank

Hasta ahora se mantiene casi igual la forma en la que creamos el proyecto, la pequeña diferencia es que no especificamos la versión de Ionic, en el nuevo CLI la forma en que se especifica el tipo de proyecto es utilizando el parámetro –type.

Ya teniendo el proyecto, debemos instalar el plugin Camera ejecutando:

ionic cordova plugin add cordova-plugin-camera

Si al ejecutar este comando nos pregunta algo como “The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? (Y/n)” respondemos que si “Y”:

install-cli-plugin-cordova
Instalando plugin de Ionic CLI

Esto es debido a que el nuevo CLI de Ionic está separado en módulos (plugin) por lo que nos pregunta si deseamos instalar el módulo relacionado a comandos de Apache Cordova. Luego necesitamos instalar la librería de Ionic Native encargada de manejar este plugin:

npm install --save @ionic-native/camera

Esta es otra de las diferencias, en la versión anterior teníamos que instalar todos los wrappers de Ionic Native, ahora están separados por módulos y sólo necesitamos instalar el que vayamos a utilizar.

install-camera-ionic-native
Instalando wrapper del plugin de la Cámara

Vamos a modificar la única pantalla de nuestra aplicación para colocar el botón con el cuál vamos a tomar la foto y una etiqueta img para mostrar la foto una vez capturada, más adelante explicaremos con más detalles. Para ello modificamos el código HTML de su vista que se encuantra en el archivo src/pages/home/home.html:

Luego modificamos el código de dicha pantalla para implementar el método takePicture() que asignamos al botón en el código de la vista HTML. Modificamos el archivo src/pages/home/home.ts:

  1. Importamos el servicio Platform, el cual se puede utilizar para obtener información sobre la plataforma donde se está ejecutando la aplicación entre otras cosas, como ya veremos.
  2. Importamos el servicio DomSanitizer de Angular, veremos más adelante para qué lo utilizamos.
  3. Es aquí donde importamos el wrapper y clases útiles de Ionic Native para el plugin Camera, en ese caso Camera y CameraOptions.
  4. Propiedad donde vamos a guardar la representación de la imagen en una cadena con formato base 64.
  5. Inyectamos los servicios Platform, Camera y DomSanitizer, este es otro cambio, ahora Camera está implementado como un servicio o proveedor en lugar de ser una clase “estática”, la ventaja principal de este cambio es que ahora lo podemos probar, pues en las pruebas de unidad podemos inyectar un “test double” en lugar de la implementación real del servicio la cual utiliza la cámara del dispositivo.
  6. El método que ya habíamos adicionado para capturar la imagen.
  7. Utilizamos el método ready(), del servicio Platform, el cual devuelve una promesa cuando la plataforma esta disponible o no, en caso de que la plataforma sea un dispositivo, quiere decir que se puede empezar a ejecutar código nativo (como el de los plugins). A su vez, utilizamos el método then() de la promesa para especificar dos callbacks, el primero para cuando la promesa se cumpla satisfactoriamente y el segundo para cuando falla, ambos callbacks están implementados en línea (inline).
  8. Este paso y el siguiente se ejecutan cuando la promesa anterior se haya completado satisfactoriamente, en este paso preparamos las opciones que le queremos pasar al método que utilizaremos en el próximo paso para tomar la foto, para ello utilizamos la clase CameraOptions para especificar que la calidad de la foto es 75 (valores entre 0 y 100 son aceptados y 50 es el valor por defecto) y además, el destino, utilizando el valor camera.DestinationType.DATA_URL lo cual quiere decir que queremos la imagen en formato base 64.
  9. Utilizamos el método getPicture() el cual abre la cámara del dispositivo y nos permito capturar la foto, este método recibe opciones, las cuales configuramos en el paso anterior, hay muchas más opciones que pueden revisar en la documentación. Este método también devuelve una promesa, como dijimos anteriormente acerca de los wrappers de los plugins que se encuantran en Ionic Native. Utilizamos el método then() de la promesa para especificar dos callbacks, el primero para cuando la promesa se cumpla satisfactoriamente y el segundo para cuando falla, ambos callbacks están implementados en línea (inline).
  10. Este es el código del callback que se ejecuta cuando la promesa retornada por getPicture() se ejecuta satisfactoriamente, el cual recibe por parámetro, en este caso imageData, la representación de la imagen en formato base 64 y se la asignamos a nuestra propiedad local base64Image, la cual definimos en el paso 4.
  11. Este es el código del callback que se ejecuta cuando la promesa retornada por getPicture() falla. Recibe en el parametro error el motivo por el cual falló y lo imprimimos en la consola.

En la línea 12 de la vista HTML habíamos adicionado una etiqueta HTML img, la cual usaremos para mostrar la imagen recien capturada por la cámara. Vemos cómo utilizamos la directiva *ngIf para sólo mostrar la imagen cuando tenga algun valor que mostrar, o sea, cuando a la propiedad base64Image se le haya asignado algun valor.

También utilizamos “one-way binding” enlace de un solo sentido para establecer el valor del atributo src de la etiqueta img; podríamos haberle asignado directamente el valor de la propiedad base64Image pero Angular por defecto “esteriliza” los valores que se le pasa a la vista para evitar problemas de seguridad, en el caso de iOS, la etiqueta img no es capaz de interpretar correctamente el valor de base64Image después de haber sido esterilizada por Angular, es por eso que utilizamos el servicio DomSanitizer en la propiedad src para deshabilitar esta funcionalidad de Angular para la propiedad base64Image, lo cual no es recomendado, sólo lo hacemos en el ámbito de este tutorial.

Para ver el resultado final tenemos que ejecutar el proyecto en un dispositivo, para ello debemos conectar el dispositivo a una PC o Mac y utilizar el comando ionic cordova run.

Si te gustó el post ayuda a compartirlo en tus redes sociales 🙂

2 comentarios en “Ionic 3, plugins de Cordova y Ionic Native

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s