Mobile App: Apache Cordova Push Notification
20 May 2016En este post vamos a ver como podemos enviar notificaciones push desde Azure a nuestras aplicaciones implementadas en Apache Cordova. En concreto veremos como hacerlo para Android.
¿Que es y para que sirve Azure Mobile Apps?
Azure Mobile Apps es un servicio Platform as a service� (PaaS) que nos proporciona Azure, donde se nos ofrece una plataforma para el desarrollo de aplicaciones� móviles proporcionando una alta disponibilidad, podemos escalar fácilmente� y nos ofrece un conjunto de� herramientas que facilitan el desarrollo y despliegue de estas.
¿Que podemos hacer?
- Podemos enviar notificaciones push.
- Podemos construir aplicaciones� offline y realizar la sincronización de los datos cuando creamos oportuno.
- Conectarnos con la infraestructura de nuestra empresa de forma rápida y sencilla.
- Construcción de aplicaciones móviles nativas o C_ross** Platform_**.
¿QUE nos ofrece?
- Autenticación y autorización: Podemos autenticar nuestra aplicaciones contra: facebook, google, microsoft, AzureAD o Twitter mediante OAuth2
- Acceso a datos: tenemos la posibilidad de conectarnos de forma sencilla a BBDD SQLAzure, SQL on-premises, DocumentDB, MongoDB y Table Storage de forma sencilla� y rápida.
- Además de como hemos comentado anteriormente el envío de notificaciones push y de trabajo offline con sincronización.
Además como A_zure Mobile App_ está incorporado dentro de Azure App Service, junto a logic apps, api apps y web apps, también puede beneficiarse de los servicios que ofrece como:
- Auto escalado.
- Staging: Podemos tener varias versiones de nuestro site e intercambiarlos cuando lo creemos oportuno. Normalmente se utiliza para realizar pruebas antes de una subida a producción, y si el entorno funciona se intercambian los entornos.
- Red Virtual: Podemos conectarnos con entornos on-premise.
- Despliegue continuo.
En este punto tenemos una visión global de que nos ofrece y que podemos hacer con Azure Mobile Apps.� Ahora vamos a entrar en más en detalle que son y como utilizar las notificaciones push.
Notificaciones Push
Una notificación push es aquella notificación de una aplicación que nos llega a nuestro dispositivo móvil.
Lo más destacado de las notifiaciones push es que no hace falta que tengamos abierta nuestra aplicación, cada vez que el servidor push correspondiente reciba una petición está la enviará a los dispositivos de forma inmediata, por tanto la inmediatez es otro de los puntos fuertes de las notificaciones push.
¿Como funcionan las notificaciones push?
Cada plataforma tiene su propio PNS (platform notification system) para enviar las notificaciones, por ejemplo:
- Windows Stroe apps: WNS (Windows notification server)
- Apple: APNS (Apple push notification server)
- Android: GCM (Google Cloud Messaging)
El ciclo de vida sería:
- La app contacta con el PNS para saber de que forma debe trabajar con el, es decir, con que� handler debe trabajar_._
- Registramos en el back-end de la aplicación� este handler.
- Para enviar una notificación push, nuestro back-end usa el handler obtenido y envía la información necesaría al PNS.
- El PNS envía la notificación correspondiente a partir de la información recibida.
Como podemos ver para cada tipo de dispositivo deberíamos tratar con su sistema de notificación, lo cuál aumenta exponencialmente la complejidad y el tiempo de desarrollo.
¿Como Azure Mobile Apps� nos ayuda? � Mediante otro servicio de Azure denominado Notification Hub.
** Notification Hub** lo que nos permite es unificar en un único punto todos los tipos de servicios de notificación, y nos hace de pasarela con estos sistemas, de esta forma nuestra aplicación solo debe entenderse con un sistema y este es el que se encarga de comunicarse con los demás.
Azure Mobile Apps nos hace de pasarela hacía el Notification Hub, haciendo más sencillo todo este proceso.
Vamos a verlo en acción, como ya hemos comentado haremos un ejemplo con una aplicación realizada en_� Apache Cordova_.
- Creamos nuestro Azure Mobile App.
- � Una vez creado la� Azure Mobile App, le añadimos un Notification Hub.
- Una vez creado el� Notification Hub� podemos ver los tipos de notificaciones que podemos añadir.
En este punto deberíamos habilitar� en los sistemas que quisiéramos las notificaciones push y configurar nuestro� Notification Hub.
Como ya he comentado vamos hacerlo para Android. Así que vamos� a ver cuales son los� pasos a seguir para habilitar� Google Cloud Messaging:
- Hacemos login en [Google Cloud Console](https://console.developers.google.com/project “”).
- Creamos un proyecto
- Ahora� en dashboard vamos a� utilities and More,� click en_� Project Information. Debemos apuntarnos el valor del campo� Project Number ya que será el valor que deberemos informar en el campo� _SenderId� cuando estemos configurando en nuestra aplicación mobile las notificaciones push
- Ahora, en el dashboard de nuevo, debajo de� Mobile APIs, click Google Cloud Messaging y en la siguiente página click en� � Enable.
- Ahora� en dashboard de nuevo** Click Credentials > Create Credential > API Key.**
- Seleccionamos� Create a new key, y creamos una un key de tipo Server Key.
- Nos guardamos el valor de� API KEY ya que este valor es el que debemos añadir en nuestro� Notification Hub.
Creación de la aplicación Apache Cordova y envío notificaciones push.
Llegados a este punto vamos a crear una aplicación Apache Cordova en VS2015.
Una vez creada añadimos el plugin de Azure Mobile Apps,� el plugin de** Push�** y el plugin** Device.**
Ahora añadiríamos el código en nuestra aplicación para registrar nuestro dispositivo y poder manejar las notificaciones.
//Inicilizamos nuestro plugin de Mobile Apps
var client = new WindowsAzure.MobileServiceClient('https://xxx.azurewebsites.net');
//Configuramos las notificaciones
var pushOptions = {
android: {
senderID: 'your project number'
},
ios: {
alert: true,
badge: true,
sound: true
},
windows: {
}
};
//Inicializamos el plugin de push con las opciones configuradas
var pushHandler = PushNotification.init(pushOptions);
//Método de callback cuando el registro haya sido satisfactorio
pushHandler.on('registration', function (data) {
// For cross-platform, you can use the device plugin to determine the device
// Best is to use device.platform
var name = 'gcm'; // For android - default
if (device.platform.toLowerCase() === 'ios')
name = 'apns';
if (device.platform.toLowerCase().substring(0, 3) === 'win')
name = 'wns';
//registrmos en nuestro Notification Hub
client.push.register(name, data.registrationId);
});
//Callback cuando llegue una notificación
pushHandler.on('notification', function (data) {
// data is an object and is whatever is sent by the PNS - check the format
// for your particular PNS
alert("Notification: " + data.message)
});
//Callback cuando llegue un error.
pushHandler.on('error', function (error) {
// Handle errors
alert("error push: " + error)
});
Ejecutamos la aplicación.
En este ejemplo, al arrancar la aplicación registramos el dispositivo.
¿Como podemos ver si hemos registrado el dispositivo y enviar una push de prueba?
Se puede hacer desde Visual Studio con las Azure tools.
En Server Explorer conectamos nuestra cuenta de azure, navegamos hata notification hub y hacemos doble click. Aparece una pantalla con dos pestañas,:
- Test Send: Desde podremos enviar notificaciones push para realizar pruebas.
- Device Registration: Donde podemos ver la lista de dispositivos registrados y de que tipo de push se han registrado, en la imagen siguiente se puede ver el resultado del registro al lanzar nuestra aplicación.
Ahora desde la pestaña Test Send enviamos una notificación:
Ahora podemos ver como ha llegado a nuestro dispositivo.
¡Ya tenemos nuestro sistema de notificaciones push funcionando en Azure!
En el siguiente link� podéis indagar más sobre el tema, y como hacer lo mismo para iOS y Windows.
Podéis bajaros el código de aquí.
Hasta la próxima.