¿Pensando en implementar la librería Ionic App Center Push en tu aplicación móvil? O, quizás ya sabes cómo se hace, pero te falta algún detalle para hacerla funciona ¿verdad?
Si has respondido sí a alguna de estas preguntas, o preguntas que puedas estar derivadas de ellas, tranquilo. No eres el único, ni serás el último, que ha pasado por aquí te lo aseguro ¡Además, lo digo por experiencia!
Por si no me conoces aún, mi nombre es Aitor Sánchez, soy desarrollador de apps desde el año 2014 y en este artículo te explicaré, de manera sencilla y aplicable, cómo realizar esta implementación.
Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.
P.D: Darse de alta es gratis y de baja, también.
Consultar estructura del artículo
Qué es Ionic App Center Push
Básicamente, es una biblioteca que nos permite, en conjunto con su backend, poder enviar notificaciones push a los usuarios de nuestras aplicaciones que la implementen.
La plataforma donde se aloja el backend es propiedad de Microsoft, y por extensión esta librería. Puedes acceder a dicha plataforma desde el siguiente enlace: https://appcenter.ms/
Y una vez finalizada la explicación, vamos con el tutorial.
Cómo instalar Ionic App Center Push
Al tratarse de una librería de terceros y no estar incluida en el core del sistema, tenemos que instalarla en nuestra aplicación para poder hacer uso de ella. Lo haremos con las dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-appcenter-push $ npm install @awesome-cordova-plugins/app-center-push
La primera instalará el plugin de Cordova que permitirá la comunicación con la parte nativa del sistema.
La segunda instalará el código TS necesario para que podamos, desde nuestro código TS, comunicarnos con el plugin.
Configurando la biblioteca
Al igual que la instalación, al tratarse de un módulo externo al core, tenemos que colocarlo en los providers de nuestra app. Nos dirigimos al archivo «app.module.ts» de nuestra app y lo haremos de la siguiente manera:
import { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx';
...
providers: [
...,
AppCenterPush,
...
]
...
Cómo este es un módulo que si que debe ejecutarse al abrir la app, no debemos colocarlo en otro module que no sea el principal de la app.
Plataformas soportadas
Cómo es de imaginar, las plataformas soportadas por la librería son las siguientes:
- Android
- iOS
Cómo usar Ionic App Center Push
Llegamos al meollo de la cuestión, pero cómo en todos los tutoriales del curso, vamos a escribir el código y luego comentamos debajo de él ¡Vamos con ellos!
import { AppCenterPush } from '@awesome-cordova-plugins/app-center-push/ngx';
constructor(private appCenterPush: AppCenterPush) { }
...
this.appCenterPush.setEnabled(true).then(() => {
this.appCenterPush.addEventListener('My Event').subscribe(pushNotification => {
console.log('Recived push notification', pushNotification);
});
});
Cómo puedes ver, un código sencillo pero totalmente funcional. Primer importaremos la clase «AppCenterPush» en nuestro archivo para poder hacer uso de su funcionalidad.
Posteriormente, mendiante el constructor inyectaremos una instancia de la clase. Recuerda, si no lo has incluido en los providers de la app, en este paso fallará.
Ahora, a través el método «setEnable» activamos todo el sistema y controlamos el retorno de su promesa para conocer cuando ha terminado de configurar. Una vez resuelta esta, ya podemos hacer uso del resto de funcionalidad que pone a neustra disposición.
Y, para terminar, nos suscribimos al «Observable» que nos devuelve la función «addEventListener» que será la que nos permita definir el canal desde el que vamos a recibir las notificaciones. Cuando el observable sea notificado, nos llegará a través de él la notificación push, con la respectiva información enviada desde el backend, cuando el usuario haya abierto la aplicación.
Con todo esto explicado ya estarías en condiciones de realizar una implementación completa. Ahora veamos un poco más sobre sus campos y funciones.
Funciones y campos de clase de Ionic App Center Push
Cómo la mayoría de librerías que tienen que ver con app center, esta no dispone de mucha variedad de funciones y son las siguientes:
addEventListener(eventName)
Cómo hemos visto en el ejemplo, nos permite suscribirnos a un evento registrado previamente en el backend de App Center. Dicho evento nos permite filtrar y discriminar a la audiencia que va a recibir la notificación de una manera bastante eficaz.
Nota: Recuerda que no únicamente puedes suscribirte a un evento desde el cliente.
- eventName -> string -> El nombre del evento al que nos vamos a suscribir
Retornará un observable que tendremos que controlar para saber cuando el usuario ha abierto la aplicación desde una notificación y, por otro lado, si ha llegado alguna iformación con ella.
isEnable()
Nos permite conocer el estado actual del componente. Tanto si está apagado, cómo encendido.
No recibe parámetros y retornará una promesa que tenemos que controlar. Con dicha promesa llegará un booleanos que será el que nos permita conocer en qué estado está.
setEnable(shouldEnable)
Este método nos permite encender, o apagar, el módulo en tiempo de ejecución.
- shouldEnable -> boolean -> Si es verdadero, activará la librería y al contrario, la desactivará.
Devuelve una promesa que tenemos que controlar. Con ella no llegará nada, pero nos permite conocer cuando ha terminado de realizar todo.
Más tutoriales de Ionic
App Version Ionic | Controla tu app desde su código de versión
FCM Ionic | Aquí te enseño a usarlo cómo un PRO
Call Directory Ionic – ¡Qué es y cómo se usa!
Bueno compañero, hasta aquí el artículo de hoy. Solo te pido que si te ha gustado/ayudado te pases por «El Círculo» desde aquí. Que, cómo te dicho al principio, si te molan las apps no te arrepentirás.
Y ahora sí, nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.