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”:
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.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ion-header> | |
| <ion-navbar> | |
| <ion-title> | |
| Ionic Blank | |
| </ion-title> | |
| </ion-navbar> | |
| </ion-header> | |
| <ion-content padding> | |
| <button ion-button full (click)="takePicture()">Tomar foto</button> | |
| <img *ngIf="base64Image" [src]="domSanitizer.bypassSecurityTrustUrl(base64Image)"> | |
| </ion-content> |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| // 1 | |
| import { Platform } from 'ionic-angular'; | |
| // 2 | |
| import { DomSanitizer } from '@angular/platform-browser'; | |
| // 3 | |
| import { Camera, CameraOptions } from '@ionic-native/camera'; | |
| @Component({ | |
| selector: 'page-home', | |
| templateUrl: 'home.html' | |
| }) | |
| export class HomePage { | |
| // 4 | |
| base64Image: string; | |
| // 5 | |
| constructor( | |
| public platform: Platform, | |
| public camera: Camera, | |
| public domSanitizer: DomSanitizer) { | |
| } | |
| // 6 | |
| takePicture() { | |
| // 7 | |
| this.platform.ready().then(() => { | |
| // 8 | |
| const options: CameraOptions = { | |
| destinationType: this.camera.DestinationType.DATA_URL, | |
| quality: 75 | |
| }; | |
| // 9 | |
| this.camera.getPicture(options).then((imageData) => { | |
| // 10 | |
| this.base64Image = 'data:image/jpeg;base64,' + imageData; | |
| }, (error) => { | |
| // 11 | |
| console.log(error); | |
| }); | |
| }); | |
| } | |
| } |
- 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.
- Importamos el servicio DomSanitizer de Angular, veremos más adelante para qué lo utilizamos.
- Es aquí donde importamos el wrapper y clases útiles de Ionic Native para el plugin Camera, en ese caso Camera y CameraOptions.
- Propiedad donde vamos a guardar la representación de la imagen en una cadena con formato base 64.
- 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.
- El método que ya habíamos adicionado para capturar la imagen.
- 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).
- 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.
- 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).
- 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.
- 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 🙂
Hola, I'm Geykel 
[…] publicado una versión más actualizada de este post para la versión 3 de […]
[…] Antes de seguir con este post les recomiendo ver un post anterior sobre cómo utilizar plugins de Cordova con Ionic Native. […]
Me fue de gran ayuda este post, aunque lo utilize en ionic 4 pero sirvió igual. Gracias