Enviar notificaciones a usuarios específicos con Onesignal y Firebase

Hasta ahora ya aprendimos como obtener el archivo de configuración de Firebase y también como utilizar ese archivo para enviar notificaciones a nuestros usuarios mediante Onesignal. Ahora, el siguiente paso es enviar notificaciones a usuarios específicos, lo que nos permitirá en un futuro desarrollar una aplicación de chat entre usuarios.

  1. Debemos tener creado nuestro proyecto de Firebase y su respectivo archivo de configuración google-services.json, si no lo tienes puedes seguir el tutorial: https://eduboticsperu.com/archivo-google-services-para-firebase-o-onesignal/
  2. Debemos tener creado nuestro proyecto en Onesignal y el App ID, si no lo tienes puedes seguir el tutorial (hasta el paso 8): https://eduboticsperu.com/enviar-notificaciones-push-con-onesignal/
  3. En Kodular desarrollaremos 2 aplicaciones, un receptor (donde los usuarios se registrarán) y un transmisor (desde donde los usuarios enviaran mensajes). 
  4. Aplicación receptor: constará de 01 campo de texto para escribir nuestro nombre de usuario, 01 BD Firebase para almacenar los datos de usuario, 01 botón para registrar los datos en Firebase y 01 Push Notifications para mostrar las notificaciones en la aplicación. El nombre del paquete de esta aplicación debe ser el mismo que usaste para obtener tu archivo google-services.json de Firebase.



  5. Para configurar el componente BD_Firebase1 necesitaremos el token de Firebase y el URL Firebase, para ello debemos ir a nuestro proyecto de Firebase clic en el ícono de configuración y seleccionar Configuración del proyecto.



  6. En la pestaña General encontraremos la clave de API de la web que viene a ser el token de Firebase que necesitamos, cópialo antes de seguir.
  7. Ahora debemos ir a Database y copiar el URL Firebase.



  8. Con estos datos, volvemos a Kodular y rellenamos los datos de nuestro componente BD_Firebase1. El project bucket será Users ya que bajo esa etiqueta almacenaremos los datos de nuestros usuarios.



  9. En la parte de los bloques, haremos que al darle clic al botón de registrarse, guarde los datos en Firebase de nombre de usuario y su respectivo User ID, este ultimo dato servirá para que Onesignal sepa a que usuario se le debe enviar la notificación. Al mismo tiempo haremos que la aplicación se suscriba a nuestro proyecto de Onesignal y quede listo para recibir notificaciones.



  10. Ya terminamos de desarrollar la aplicación de receptor, ahora debes generar el .apk e instalarlo en tu móvil.



  11. Aplicación transmisor: constará de 02 campo de texto para escribir nuestro nombre de usuario y nuestro mensaje a enviar, 01 BD Firebase para recuperar los datos del usuario, 01 botón para enviar el mensaje al usuario y 01 OneSignalSend que se obtiene al agregar la extensión com.jerin.onesignalsend debes descomprimirlo y agregar a tu proyecto de Kodular.
    Link oficial de la extensión: https://community.kodular.io/t/free-extension-onesignalsend-send-onesignal-notification-from-app-itself/30073



      
  12. Configuraremos nuestro BD_Firebase1 con los mismos datos que usamos en el paso 8.



  13. Para configurar el componente OneSignalSend1 necesitaremos la clave API y App ID. Para obtener la clave API debemos ir a nuestra cuenta de Onesignal, dar clic en el ícono de usuario y luego en Account & API Keys.



  14. Luego bajamos hasta la parte de REST API Keys y copiamos el correspondiente a nuestro proyecto.



  15. Volvemos a Kodular y rellenamos los datos de nuestro componente OneSignalSend1. Recuerda que el APP ID lo obtienes de nuestro tutorial anterior en el que vimos como enviar notificaciones con Onesignal (hasta el paso 8).

  16. En los bloques, haremos que nuestro botón enviar recupere el dato almacenado en Firebase correspondiente al nombre de usuario que ingresemos (obtendrá el User ID). Y luego de obtener ese valor, nuestro componente OneSignalSend se encargará de enviar el mensaje al usuario que tenga asociado ese User ID.



    Los parámetros del bloque OneSignalSend son los siguientes: playerid es el ID del usuario al que enviaremos el mensaje, título es el título de la notificación que en nuestro caso será el nombre de usuario, mensaje es el mensaje de la notificación, smallicon es el icono de la notificación y que sólo acepta los íconos integrados de Android, largeicon es la imagen que se mostrará junto a la notificación que en nuestro caso será la foto de una persona (en un proyecto real puedes obtener la foto de una base de datos), bigpicture es una imagen de tamaño grande que se mostrará normalmente debajo de la notificación (como cuando adjuntas una imagen en whatsapp), launchurl es una URL a donde puedes redirigir al usuario cuando da clic sobre la notificación, groupkey y groupmessage se utilizan cuando deseas enviar mensajes a usuarios de un grupo específico, no entraremos en detalles ya que lo veremos en un futuro tutorial.
  17. Ahora sólo queda generar el archivo .apk, instalarlo y probar su funcionamiento. Primero debemos registrarnos como usuarios, para ello abriremos la aplicación receptor, ingresamos un nombre de usuario y damos clic en Registrarse.



  18. Ahora en la aplicación transmisor debemos ingresar a que usuario deseamos enviar la notificación y el mensaje, luego clic en Enviar mensaje.



  19. La notificación se muestra de la siguiente forma.

Ahora estás listo para desarrollar tu propia aplicación de chat y recibir notificaciones aunque la aplicación esté cerrada, algunas consideraciones que debes tener en cuenta: 

  • La foto y el nombre de usuario puedes almacenarlos en Firebase y obtenerlos antes de enviar la notificación (la foto debe ser necesariamente un URL).
  • El parámetro bigpicture puede ser usado para enviar imágenes adjuntas.
  • Ambas aplicaciones pueden estar integradas en una sola, pero en diferentes pantallas. La de receptor debe ir en tu pantalla de registro (aquí puedes usar Firebase Authentication para obtener automáticamente la foto y nombre asociado a la cuenta de Google del usuario) y la de transmisor puedes usarlo en una pantalla junto al componente chat view que Kodular tiene integrado.

Lista de Small Icons:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *