header_lecciones_v5

Recibiendo push notifications en una App capacitor-ionic

por Santiago Arias, el 9 de diciembre de 2019

Recibiendo push notifications en una App capacitor-ionic

Una de las funcionalidades más interesantes en los dispositivos móviles (celulares, tablets) es la de recibir notificaciones de sus aplicaciones instaladas. Estas notificaciones o “Push notifications” pueden ser recibidas por cualquier dispositivo de los principales sistemas operativos (Android, iOS, Kindle).

Una notificación push puede ser un canal de comunicación rápido para los usuarios de una aplicación particular. Las notificaciones son enviadas a los diferentes sistemas operativos por medio de servidores de mensajería como: FCM para Android y APNS para iOS.

Al ser estas notificaciones funcionalidades nativas de los dispositivos es necesario tener un trato especial a la hora de desarrollar aplicaciones híbridas (ionic). Para el perfecto funcionamiento de esta funcionalidad se deben tener en cuenta 3 agentes o 3 elementos importantes en la comunicación:

  1. App Ionic - Capacitor: Para recibir notificaciones se debe tener una aplicación móvil instalada en un dispositivo, ésta puede ser iOS o Android. Para este caso en particular dicha aplicación será nativa y construida con Capacitor (ionic).
  2. Firebase: Constituye el elemento más importante en el proceso de comunicación entre pinpoint (AWS) y el dispositivo final o usuario. Este es el encargado de tener la configuración de la app tanto iOS como Android y es el encargado de recibir la petición de notificación y entregársela al dispositivo.
  3. Pinpoint (AWS): Corresponde a la api que expone al backend de la aplicación los diferentes métodos o servicios para envío de notificaciones. 

Para realizar la configuración y puesta en funcionamiento de las notificaciones se debe tener en cuenta cada uno de los 3 puntos anteriormente mencionados.

Paso a paso

Firebase: Uno de los actores más importantes en este paso a paso corresponde a Firebase. Este es el encargado de distribuir los mensajes para cada uno de los destinatarios.

Para efectos del paso a paso se asume que la cuenta de Firebase ya se tiene creada, a continuación se procede a agregar un proyecto:

Para efectos del paso a paso se asume que la cuenta de Firebase ya se tiene creada, a continuación se procede a agregar un proyecto

Como la imagen muestra ya se tiene un proyecto con el nombre fgi-dev creado.

A continuación se muestra cómo se debe configurar una cuenta de Firebase para lograr tener comunicación entre pinpoint y el dispositivo final.

Teniendo el proyecto creado se continúa con la creación de las respectivas fichas de aplicaciones tanto para Android como para iOS. Realizaremos el respectivo paso a paso para la aplicación de Android:

cómo se debe configurar una cuenta de Firebase para lograr tener comunicación entre pinpoint y el dispositivo final.

Como se puede observar en la imagen anterior, es posible crear diferentes tipos de aplicaciones, para nuestro caso vamos a crear una aplicación Android.

El proceso a continuación ilustrado es similar tanto para Android como para iOs. En la imagen siguiente se observa los diferentes pasos para configurar Firebase en una aplicación:

En la imagen siguiente se observa los diferentes pasos para configurar Firebase en una aplicación

Para el caso que se está desarrollando en este paso a paso solo es necesario seguir o realizar los pasos 1 y 2. Para el paso dos solo se necesita descargar el archivo (google-services.json) a continuación ilustrado:

Para el paso dos solo se necesita descargar el archivo (google-services.json)

Con esto se da por finalizada la configuración en Firebase de la aplicación Android.

Ionic: lo primero que debemos realizar es la creación de una aplicación ionic 4, para esto corremos el siguiente comando:

ionic start push-app blank

Una vez se tenga la aplicación creada y estemos dentro de la carpeta del proyecto procedemos a realizar la integración de capacitor en este.

ionic integrations enable capacitor

El comando anterior nos va a solicitar ingresar algunos datos importantes de la app como son: el nombre y el ID de paquete. Debemos estar seguros que el Id de paquete utilizado esté disponible en las tiendas respectivas.

Con estos comandos ya tenemos una aplicación funcional y ya podemos ejecutarla en un dispositivo. Lo primero que debemos hacer es construir la aplicación ionic.

ionic build

Y a continuación compilar el proyecto capacitor Android:

npx cap add android

Una vez se tenga la aplicación corriendo en un dispositivo es momento de configurar las notificaciones push, para esto vamos a importar del core de capacitor el componente de push notifications dentro de una de las páginas de nuestra aplicación.

import { Plugins, PushNotification, PushNotificationToken, PushNotificationActionPerformed } from '@capacitor/core'; const { PushNotifications } = Plugins;

 

Una vez importado el componente de PushNotifications procedemos a agregar algunos métodos que nos permiten hacer monitoreo de las actividades más importantes de las notificaciones push:

// Register with Apple / Google to receive push via APNS/FCM PushNotifications.register(); // On success, we should be able to receive notifications PushNotifications.addListener('registration', (token: PushNotificationToken) => { alert('Push registration success, token: ' + token.value); } ); // Some issue with our setup and push will not work PushNotifications.addListener('registrationError', (error: any) => { alert('Error on registration: ' + JSON.stringify(error)); } ); // Show us the notification payload if the app is open on our device PushNotifications.addListener('pushNotificationReceived', (notification: PushNotification) => { alert('Push received: ' + JSON.stringify(notification)); } ); // Method called when tapping on a notification PushNotifications.addListener('pushNotificationActionPerformed', (notification: PushNotificationActionPerformed) => { alert('Push action performed: ' + JSON.stringify(notification)); } );

Teniendo el componente de notificaciones push importado y sus métodos de control de registro y recepción inicializados en el ngOnInit, procedemos a configurar el firebase dentro de la aplicación, para esto vamos a copiar el archivo google-services.json anteriormente descargado y lo vamos a ubicar en la ruta Android -> app correspondiente a la raíz de la aplicación Android.

NOTA: si no encuentra la carpeta Android recuerde generar el proyecto de android capacitor con sus respectivos comandos.

Con esto concluimos la parte correspondiente al envío de notificaciones entre firebase y el dispositivo final.

Pinpoint (AWS)

Al tener nuestra aplicación consumiendo servicios de AWS se buscó aprovechar uno más de estos servicios el cual corresponde a pinpoint. Pinpoint es una API que permite el control y envío de notificaciones push por medio de firebase.

Para lograr una comunicación entre pinpoint y el dispositivo final se expone un servicio rest que consume la API de Pinpoint, en específico la funcionalidad para registrar los dispositivos.

Adicional se crea el proyecto de pinpoint en la consola de este para así tener un proyecto en el cual realizar los registros de dispositivos anteriormente descrito. A este proyecto se le asocia la cuenta de firebase inicialmente creada para así lograr la comunicación esperada.

Una vez se tiene todo configurado tanto firebase como pinpoint se procede a ejecutar la aplicación y lo que se va a obtener en la inicialización de la aplicación gracias al componente de PushNotificatiosn es el deviceToken. Dicho deviceToken es el que se debe registrar en el servicio expuesto relacionándolo con al usuario con el cual se va a iniciar sesión.

Con esta configuración ya es posible desde el backend de la aplicación enviar una notificación push a un usuario en específico y así alertar sobre la acción que se requiera informar.

Guía para crear una aplicación serverless en 4 pasos

Temas:Tecnologia e Innovación

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal