I+D Telco: Plug-ins de Ionic

Casi todos, quien más quien menos, hemos utilizado alguna vez algún complemento informático para mejorar nuestra experiencia con algún programa u obtener una funcionalidad que necesitáramos. Estos complementos son los llamados plug-ins (enchufables) y están presentes en multitud de entornos, desde navegadores web a reproductores de audio, con una gran cantidad de funcionalidades como bloquear publicidad, reconocimiento y presentación de texto formateado o permitir la reproducción de contenido en un formato no permitido originalmente.

En este artículo nos centraremos en los plug-ins de Ionic (Para más información consultar el siguiente artículo).

Al tratarse Ionic de un framework de desarrollo de aplicaciones híbridas, el uso de plug-ins se convierte en obligatorio para poder realizar tareas que requieran de comunicación con el dispositivo en el que se ejecutan, tales como el acceso a la cámara, al bluetooth o al almacenamiento del dispositivo. Ionic, más que plug-ins propios, tiene a su disposición todos los plugins de Cordova.

Estos plug-ins se instalan mediante comandos indicando el nombre o la ruta de su repositorio y generan una estructura de ficheros tanto en la web como en los propios sistemas nativos que permiten la comunicación entre ambos. Si usamos “—save” en el comando de instalación lograremos que se añada el plug-in automáticamente al fichero package.json del proyecto Ionic que contiene una referencia a todos los plug-ins instalados y que se utiliza para generar la estrucutra de las aplicaciones de nuevo en caso necesario; logrando así que se genere con todos los plugins necesarios ya instalados.

A continuación, veremos brevemente unos de los plug-ins más utilizados en nuestros proyectos:

Cordova-plugin-camera

En el desarrollo de una aplicación es muy probable que nos enfrentemos a la necesidad de proporcionar al usuario la posibilidad de usar la cámara o aceder a la galería para, por ejemplo, permitirle cambiar la foto de perfil.

Esta necesidad se ve subsanada con este plug-in, que de manera sencilla nos permite obtener una imagen de la cámara o de la galería del dispositivo.

En nuestra aplicación Hi! lo implementamos con esa finalidad en la ventana de perfil del usuario, permitiéndole cambiar su imagen. Primero le damos a elegir el origen de la misma, y después, de manera sencilla, en la respuesta del plugin obtenemos la nueva imagen y la pintamos:

Phonegap-plugin-barcodescanner

Otro de los usos más comunes en para la cámara en aplicaciones móviles es escanear códigos de barras o QR y obtener de ellos distinta información; como pudiera ser un descuento en un restaurante.

Para ello contamos con este plug-in que se encargará de abrir la cámara y tras escanear correctamente un código de los mencionados anteriormente nos devolverá su contenido en el callback.

En De´r nos ha servido para realziar varias funcionalidades, una de ellas se basa en la lectura de un código (QR o de barras) de un artículo para acceder de manera rápida al detalle del mismo a través de la información contenida en él; por ejemplo, a través de su id.

Com.unarin.cordova.beacon

Los beacons son cada vez más utilizados en una gran cantidad de ámbitos distintos, para poder aprovechar su uso en una aplicación Ionic, existe este plug-in el cual nos permite realizar las principales acciones de interacción con estos dispositivos como son: la creación de una región y el escaneo de una o el de un beacon en concreto.

Así hacemos en De´r, escaneando el área cercana al dispositivo en busca del beacon más cercano para localizar al usuario dentro de un establecimiento y poder mostrárselo sobre un plano: