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:

Otros plugins utilizados:

• cordova-plugin-x-socialsharing
• cordova-plugin-x-toast
• phonegap-plugin-push
• in.edelworks.sharedpreferences

Autor: Aitor Pascual

Cómo implementar Notificaciones Push GCM/FCM en una aplicación móvil con Ionic Framework

La tecnología Push es una forma de comunicación en la que un servidor envía un mensaje a un cliente. Lo que caracteriza esta tecnología es que es siempre el servidor el que inicia esta comunicación y se destaca por su inmediatez, ya que no hace falta estar ejecutando la aplicación para que nos llegue. Aunque la tengamos cerrada o en segundo plano.

Por definición, para que el servidor envíe el mensaje al usuario, éste se habrá tenido que suscribir previamente, para que el servidor conozca a donde hay que enviar esa notificación push, es decir, en algún momento hay que solicitar que sea generado un identificador y almacenarlo para poder enviar la notificación push al usuario, en Android es el Registration ID y en iOS el Device Token. Con ese identificador desde el servidor se comunica con Apple y Google y son estos quienes se comunican directamente con el móvil (Google por GCM/FCM y Apple por APNS).

Este tutorial tiene como objetivo explicar cómo implementar las notificaciones push GCM/FCM en una aplicación Ionic. A continuación se van a describir los pasos necesarios para la creación de un proyecto FCM.

Configurar Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging (FCM) es la nueva versión del Google Cloud Messaging (GCM), se hereda la infraestructura GCM, además de nuevas características.

Para enviar las notificaciones push vamos a tener que comunicar con FCM y para eso a continuación vamos a describir cómo obtener un Server Key y un Sender ID generado por FCM necesario para realizar esa comunicación.

Primero que nada debemos crear un proyecto FCM y para eso vamos a Firebase Console y hacemos clic en Create New Project (o agregar Firebase a un proyecto google existente).

Una vez creado tu proyecto vamos a Project settings:

y hacemos clic en Cloud Messaging:

Al crear el proyecto se ha generado una Server Key y un Sender ID que se deben guardar que lo vamos a usar más tarde.

Proyecto Ionic

Para la implementación de las notificaciones push en nuestro proyecto Ionic hemos usado el plugin phonegap-plugin-push (pero existen otros plugins de cordova en que su implementación es similar).

Al compilar para Android deberás asegurarte de que tienes instalado los siguientes pre-requisitos a través del Administrador de Android SDK:

·         Android Support Library la versión 23 o posterior

·         Android Support Repository la versión 20 o posterior

·         Google Play Services la versión 27 o posterior

·         Google Repository la versión 22 o posterior

Para agregar el plugin phonegap-plugin-push a nuestro proyecto abrimos el terminal y dentro de la carpeta del proyecto Ionic ejecutamos el siguiente comando (usar el Sender ID que se ha generado al crear el proyecto FCM): 

>ionic plugin add phonegap-plugin-push --variable SENDER_ID="Sender ID"

Ejemplo implementado en app.js:

.run(function($ionicPlatform){
$ionicPlatform.ready(function() {
var push = PushNotification.init({
android: {
senderID: "Sender ID”
},

ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
});

push.on('registration', function(data) {
console.log("regID:" + data.registrationId);
alert("regID:" + data.registrationId);
});

push.on('notification', function(data) {
console.log("title:" + data.title + " Message:" + data.message);
alert("title:" + data.title + " Message:" + data.message);

// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});

push.on('error', function(e) {
console.log(e.message);
});

});

});

Con todo esto realizado ahora se puede generar el apk. Para eso en el terminal se escriben los siguientes comandos:

>ionic platform add android
>ionic build android     (o “ionic run android” para instalar directamente en tu móvil)

Al abrir la app en tu móvil deberás ver un alerta con el Registration ID y vamos guardar este ID que lo vamos a usar más tarde (es más fácil copiarlo conectando tu móvil y abrir el navegador Chrome y acceder a la consola, se abre con “chrome://inspect”).

Enviar Notificaciones Push

Hay varias maneras de enviar las notificaciones push, en este tutorial vamos a usar un ejemplo rápido para probar que se reciben las notificaciones push en la app que hemos instalado. Para eso vamos a usar la extensíon de Chrome Advanced Rest Client para hacer una petición a FCM para que este envie la notificacion a la app instalada anteriormente (se puede hacer la peticion que vamos a usar de ejemplo de igual modo usando cualquier servidor).

En el Advanced Rest Client vamos hacer una peticion HTTP POST a la URL https://fcm.googleapis.com/fcm/send en que en la cabecera se añaden los campos Authorization con la Server Key y un Content-Type de tipo application/json y enviando el payload de ejemplo que se muestra a continuacion.

Ejemplo del payload de una notificacione push:

{

    "registration_ids": ["Registration ID"],

    "data": {

          "title": "Large Icon",

          "message": "Loaded from assets folder",

          "image": "www/image/logo.png"

    }

}

Nota: Se pueden ver otros ejemplos en https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md

Advanced Rest Client:

Notificación push recibida en el móvil:

Autor: Tiago Coelho