Implementación de notificaciones push con Flutter y OneSignal

Personalmente cuando escuche notificaciones push con OneSignal, la cabeza me exploto, y me hice las siguientes preguntas:

1. Que es OneSignal
2. Cual es la difirencia con Firebase Message
3. Cual sera su curva de aprendizaje

Se podria decir que es una alternativa al servidor de notificaciones Push (push notifications) de Firebase que tanto nos hubiera gustado conocer.

Pero que mismo es OneSignal, OneSignal no es mas que una plataforma que no solo permite el envío de Notificaciones Push a través de diferentes plataformas que estén debidamente registradas en nuestra aplicación, si no que tambien permite enviar campañas de SMS, email, etc, pero en este articulo solo abordaremos todo lo relacionado a las notificaciones Push.

Documentación oficial

Plan	Característica
Free	1 In-App Message
Growth	1000 In-App MessageConfiguracion avanzada en In-AppCarga de listasConfirmacion de deliveryAnalitica
Professional	1000 In-App MessagePersonalizacion AvanzadaExportaciones de CSVConfiguraciones avanzadas de Analitica

Requisitos:

1. Una cuenta de Firebase.
2. Una cuenta de OneSignal.
3. ID de la aplicación OneSignal , disponible en claves e ID
4. Clave del servidor y remitente, proporcionados por firebase

Nota: En este artículo solo veremos la configuración de Android (Flutter).

Una vez registrados en OneSignal crearemos un proyecto nuevo para nuestra aplicación móvil y procederemos a configurarla para Android. Primero seleccionaremos la plataforma, en nuestro caso Android.

Una vez hayamos seleccionado la plataforma nos encontraremos con la siguiente pantalla:

Aquí es donde tendremos que trabajar con Firebase.

Aprendiz: ¿Y esto porque? ¿Porqué Firebase? si se va a usar la plataforma de OneSignal. me mentistes no

Tranquilo no es asi, lo que sucede es que la plataforma de OneSignal utiliza las credenciales de Cloud Messaging generadas por la plataforma de Firebasepara enviar una notificación push a un subscriptor (dispositivo), en pocas palabras OneSignal envia las notificaciones push mediante el canal de firebase,

Aprendiz: Eso me asusta , no te preocupes toda la configuración e implementación de los metodos nativos de firebase lo realiza la plataforma de OneSignal.

Aprendiz: Eso me tranquiliza, entonces nos vuelve la vida mas facil , Exactamente.

Para ello se debe generar o configurar un proyecto existente; activar y asociar el cloud messaging a la plataforma requerida, en nuestro caso Android, para mayor informacion revisar la documentación oficial de Firebase o revise la documentación oficial de Firebase enfocada a Flutter

Documentación para generar credenciales Cloud Messaging de firebase

iOS: Generate an iOS Push Certificate

Android: Generate a Firebase Server Key

Resumen Obtener la clave de API del servidor de Google

1. Crea un proyecto de Firebase.
2. Obtén tu ID de remitente y el token de Firebase Cloud Messaging.
3. Haga clic en el icono de engranaje en la parte superior izquierda y seleccione “Configuración del proyecto”.
4. Seleccione la pestaña Cloud Messaging

Copiamos los datos y los incluimos en los apartados correspondientes. Pasamos a la siguiente ventana en donde deberemos volver a seleccionar la plataforma con la que estamos trabajando: Android.

Aquí ya podemos ver nuestro ID de OneSignal, dato que necesitaremos para posteriormente enlazar nuestro proyecto con dicha plataforma.

Configuración OneSignal en Flutter

Puedes leer la siguiente referencia de configuracion o leer la documentacion oficial

.Una vez llegados a este punto, abrimos el IDE de su preferencua en nuestro caso Visual Studio Code.

Ahora hay que añadir los siguientes datos en el archivo gradle de configuracion del proyecto:

Agregue el SDK de OneSignal Flutter

Para agregar el SDK de OneSignal Flutter a su proyecto, edite el archivo de su proyecto pubspec.yaml.

dependencies:
    onesignal_flutter: ^3.0.0

Ejecutar para instalar el SDK. flutter packages get

Ahora, en su código de Dart, puede usar en el main.dart

import 'package:onesignal_flutter/onesignal_flutter.dart';

Inicialice el SDK de OneSignal

Ahora puede inicializar OneSignal usando el siguiente código en su archivo main.dart

Recuerda, reemplazar el YOUR_ONESIGNAL_APP_ID por el tuyo, generado en los pasos anteriores.

Aprendiz: ¿Eso es todo? ¿Con eso ya puedo recibir notificaciones Push de OneSignal?

Si con esto tu proyecto ya estara listo para recibir notificaciones push.

Aprendiz: eso es genial, esas lineas de codigo lo puedo poner en cualquier archivo .dart de mi proyecto.

Aunque eso es verdad, se recomienda usar la arquitectura o patron mvvm, para una mayor organizacion de tu proyecto. Se adjuntara una version demo del proyecto OneSignal con el patron MVVM, en el repositorio GitHub.

También puede agregar observadores para varios eventos, como recibir o abrir una nueva notificación, u observar cambios en el estado de la suscripción:

OneSignal.shared.setNotificationWillShowInForegroundHandler((OSNotificationReceivedEvent event) {
  // Se llamará siempre que se reciba una notificación en primer plano
  // Mostrar notificación, pasar un parámetro nulo para no mostrar la notificación
  event.complete(event.notification);
});

OneSignal.shared.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
  //Se llamará cada vez que se abra una notificación / se presione un botón.
});

OneSignal.shared.setPermissionObserver((OSPermissionStateChanges changes) {
    // Se llamará siempre que cambie el permiso
    // (es decir, el usuario toca Permitir en la solicitud de permiso en iOS)
});

OneSignal.shared.setSubscriptionObserver((OSSubscriptionStateChanges changes) {
    // Se llamará siempre que cambie la suscripción
    // (es decir, el usuario se registra en OneSignal y obtiene una identificación de usuario)
});

OneSignal.shared.setEmailSubscriptionObserver((OSEmailSubscriptionStateChanges emailChanges) {
  // Se llamará cuando cambie la suscripción de correo electrónico del usuario
  // (es decir, se llama a OneSignal.setEmail (correo electrónico) y el usuario se registra
});

Los eventos descritos anteriormente son los mas utilizados, pero existen aun mas eventos y acciones que permite OneSignal, para mayor informacion leer la siguiente documentación.

Bueno Happy Codding

Aprendiz: Espera no te vayas… Se que molesto pero te falto decir cual es la diferencia con firebase y cual es su curva de aprendizaje, jajaj , no te salvastes.

Oh verdad, pido disculpas por eso.

Curva de aprendizaje

Aunque la curva de aprendizaje dependera de cada individuo, se podria decir que su uso y configuracion es relativamente facil, al principio costara adaptarse a la interfaz de OneSignal pero a medida que se utilice esta interaccion sera cada vez mas sencilla.

Diferencias

Una de las principales diferencias son:

• Notificaciones multiplataforma
• Soporte Web Push
• Notificaciones push de Safari
• Incorporacion de un panel administrativo
• Facilidad de uso

Talvez te interese

Ahora si FIN

Aprendiz: Gracias