Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

Codifica una aplicación en tiempo real con NativeScript: Notificaciones Push

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

NativeScript es un framework para crear aplicaciones móviles nativas multiplataforma usando XML, CSS y JavaScript. En esta serie vamos a probar algunas de las geniales cosas que puedes hacer con una aplicación de NativeScript: geolocalización e integración con Google Maps, bases de datos SQLite, integración con Firebase y notificaciones push. En el proceso estaremos construyendo una aplicación de acondicionamiento físico con capacidades en tiempo real que usará cada una de estas características.

En este tutorial aprenderás lo sencillo que es añadir notificaciones push a tu aplicación de NativeScript con el Cloud Messaging Service (servicio de mensajería en la nube) de Firebase.

Lo que crearás

Retomando el tutorial anterior, ahora vas a añadir notificaciones push a la aplicación. Una notificación será desencadenada cuando el usuario rompa su récord actual o cuando uno de sus amigos le quite el primer lugar.

Configurando el proyecto

Si has seguido el tutorial anterior sobre Firebase, simplemente puedes usar el mismo proyecto y crear las funciones que añadiremos en este tutorial. De lo contrario, puedes crear un nuevo proyecto y copiar los archivos de inicio en la carpeta app de tu proyecto.

Después de eso también necesitas instalar los complementos de geolocalización, de Google Maps, de SQLite y de Firebase:

Una vez instalados, necesitas configurar el complemento de Google Maps. Puedes obtener las instrucciones completas sobre cómo hacer esto leyendo la sección Instalando el complemento de Google Maps en el tutorial anterior.

A continuación instala la biblioteca fecha para darle formato a las fechas:

Después de esto también necesitas configurar el complemento de Firebase. Asegúrate de leer las siguientes secciones del tutorial anterior para lograr que la aplicación se ejecute:

  • Ejecutando el proyecto
  • Configurando una aplicación de Firebase
  • Configurando una aplicación de Facebook
  • Instalando el complemento de Firebase
  • Configurando la integración con Facebook

Dado que ya hemos configurado el complemento de Firebase en la publicación anterior, solamente hay un poco de trabajo que debes llevar a cabo para configurar las notificaciones push.

Primero tienes que volver a configurar el complemento yendo al interior del directorio node_modules/nativescript-plugin-firebase y ejecutando npm run config. Esta vez selecciona tanto la autenticación como la mensajería de Facebook.

Una vez hecho lo anterior, abre el archivo firebase.nativescript.json en el directorio raíz de tu proyecto y asegúrate de que messaging esté configurado con el valor true:

A continuación abre app/App_Resources/Android/AndroidManifest.xml y agrega los siguientes servicios dentro de <application>. Esto habilita el servicio de mensajería de Firebase para la aplicación:

Ejecutando el proyecto

Puedes arrancar el proyecto ejecutando tns run android. Pero dado que ésta aplicación aprovechará la funcionalidad de geolocalización, te recomiendo que uses un emulador de GPS para configurar y cambiar tu ubicación rápidamente. Puedes leer sobre cómo lograr lo anterior en la sección Ejecutando la aplicación en el tutorial anterior.

Si aparecen errores de compilación, puedes eliminar la plataforma y volver a ejecutar la aplicación:

Configurando Cloud Functions de Firebase

Vas a usar Cloud Functions de Firebase para crear un servidor que enviará las notificaciones push. Ésta característica de Firebase se usa para ejecutar código de fondo cada vez que ocurra un evento específico en las herramientas de Firebase que estés usando. Por ejemplo, cuando se guarde nueva información en la base de datos en tiempo real, o cuando se agregue a un nuevo usuario a través del servicio de autenticación de Firebase. Para esta aplicación usarás desencadenadores HTTP para enviar notificaciones push cuando la aplicación móvil haga una solicitud a un punto final específico.

Para usar Cloud Functions de Firebase primero necesitas instalar el paquete firebase-tools globalmente:

A continuación crea una nueva carpeta que albergará el código del servidor. Ésta debe estar afuera de tu carpeta app. Dentro de esa carpeta instala el paquete firebase-functions:

Una vez que esté instalado, inicia sesión en Firebase ejecutando firebase login. Esto abre una nueva pestaña de navegación que te permite iniciar sesión con tu cuenta de Google. Lleva a cabo todo el proceso y acepta todos los permisos que se soliciten.

Una vez que hayas iniciado sesión puedes arrancar las funciones de Firebase para un proyecto de Firebase específico:

Este proceso te preguntará si quieres configurar un proyecto predeterminado o no. Selecciona el proyecto de Firebase que creaste en el tutorial anterior:

setup firebase functions

A continuación se te preguntará si quieres instalar las dependencias. Dí que sí.

Una vez que las dependencias hayan sido instaladas, deberás ver un archivo llamado firebase.json y una carpeta llamada functions dentro del directorio. El archivo con el que estarás trabajando es functions/index.js. Abre dicho archivo y verás lo siguiente:

Descomenta la función helloWorld y podrás ver a los desencadenadores HTTP en acción.

Ejecuta lo siguiente para desplegar la función en la nube:

Una vez que dicho proceso haya finalizado, éste deberá mostrarte el URL en el que la función haya sido desplegada:

deploy firebase functions

Accede a dicho URL desde tu navegador para ver la salida "Hello from Firebase!".

Añadiendo el código del servidor

Ahora estás listo para añadir el código necesario para implementar las notificaciones push. Primero agregarás el código para el componente del servidor y luego el código para la aplicación.

Abre el archivo functions/index.js y elimina su contenido.

Creando la función de Firebase

Importa los paquetes de Firebase que necesitarás:

Crea la función init_push. Toma en cuenta que el desencadenador HTTP es invocado para cualquier método request, así que tienes que filtrar para el método request que quieras procesar. En este caso solamente queremos procesar solicitudes POST. Esperamos que la aplicación envíe id, stepsfriend_ids como los datos solicitados.

Obteniendo los datos del usuario y de los amigos

A continuación consulta la base de datos de Firebase para verificar si el ID del usuario existe. Esto sirve como una manera de asegurar el punto final para que no cualquiera pueda desencadenar notificaciones push (desde luego, una aplicación real debería tener una seguridad de fondo mucho mejor, de manera que los usuarios no puedan falsificar sus propios datos o los de otra persona).

Si el usuario existe, consulta la base de datos nuevamente para que devuelva a todos los usuarios. Toma en cuenta que actualmente Firebase no proporciona una manera de devolver registros en base a un arreglo de IDs, por lo que tendremos que filtrar los datos relevantes nosotros mismos:

A continuación recorre con un ciclo los resultados devueltos de Firebase y crea un nuevo arreglo que almacene friends_data. Una vez hecho esto, ordena el arreglo de acuerdo al número de pasos por cada usuario. Aquél que tenga el mayor número de pasos tiene el primer índice.

Construye la carga útil de notificaciones

Ahora estamos listos para determinar quién recibirá la notificación y construir la carga útil de notificaciones. ¿Quién está en primer lugar? ¿es el usuario actual o uno de sus amigos?. Dado que el usuario actual también habrá superado su propio récord al romper el récord general de quien esté en primer lugar, solamente necesitamos verificar si ese récord ha sido superado.

Enviando la notificación

Finalmente envía la notificación:

Actualizando el código de la aplicación

Anteriormente configuraste la aplicación para que pudiera recibir notificaciones push. En esta ocasión vas a añadir código para que tu aplicación pueda procesar esas notificaciones push y mostrarlas al usuario.

Recibiendo notificaciones push

Lo primero que necesitas hacer para recibir notificaciones push es actualizar la función firebase.init() para incluir una función escucha y así recibir el token del dispositivo:

Ésta función solamente se ejecuta una vez, por lo que tienes que guardar el token localmente usando las configuraciones de la aplicación. Más adelante, ésto nos permitirá obtener el token del dispositivo cuando el usuario inicie sesión por primera vez. Si aún recuerdas el tutorial anterior, estamos guardando los datos del usuario en Firebase la primera vez que inicia sesión.

A continuación puedes añadir la función escucha para cuando se reciban las notificaciones. Ésta mostrará un cuadro de alerta que usa el título y el cuerpo del mensaje como contenido:

Guardando el token del dispositivo en Firebase

Cloud Messaging de Firebase requiere el token del dispositivo al enviar una notificación push a un dispositivo específico. Dado que ya estamos usando Firebase, solamente guardaremos el token del dispositivo junto con los datos del usuario. Para eso necesitas editar el código que almacena los datos del usuario con el fin de incluir el token del dispositivo que obtuvimos anteriormente:

Desencadenando notificaciones push

Las notificaciones push se desencadenan cuando una de dos cosas ocurren:

  • cuando el usuario rompe su récord actual
  • cuando uno de los amigos del usuario rompe su récord y sube al primer lugar

El primer caso es sencillo, así que no hay necesidad de llevar a cabo una configuración adicional. Pero para el segundo se necesita un poco de trabajo. Primero tienes que editar el código para cuando el estado de la autenticación cambie. Justo después de extraer los IDs de los amigos del resultado de Facebook tienes que guardarlos usando las configuraciones de la aplicación.

A continuación actualiza el código para cuando el usuario deje de darle seguimiento a su caminata. Justo después del código que se usa para construir los datos del usuario con el fin de actualizarlo, obtén los IDs de los amigos a partir de las configuraciones de la aplicación e inclúyelos en el objeto que contiene los datos de solicitud para desencadenar la notificación push.

Lleva a cabo la solicitud al punto final de Cloud Functions de Firebase que creaste anteriormente. Los datos del usuario serán actualizados en la base de datos de Firebase únicamente hasta que se devuelva una respuesta exitosa.

Verificando las notificaciones push

Puedes probar el envío de notificaciones push desinstalando primero la aplicación del emulador o dispositivo. Esto nos permite desencadenar correctamente a la función para obtener el token del dispositivo. Asegúrate de añadir console.log para mostrar dicho token:

Cuando el token del dispositivo sea mostrado en la consola de NativeScript, cópialo, haz clic en el menú Database (Base de datos) en el panel de control de la aplicación de Firebase y agrégalo como un token de dispositivo para todos los usuarios de la aplicación. Usa device_token como nombre de la propiedad.

Para desencadenar la notificación push puedes usar curl para hacer una solicitud POST al punto final de la función de Firebase:

Si no tienes curl instalado, puedes usar la aplicación Postman para enviar la solicitud. Usa la siguiente configuración para la solicitud:

  • Método de solicitud: POST
  • URL: El punto final de tu función de Firebase
  • Clave de los encabezados: Content-type
  • Valor de los encabezados: application/json
  • Cuerpo:

Una vez desencadenada la notificación, verás una salida similar a la siguiente:

push notification received

Si la aplicación no está abierta actualmente, verás el mensaje en el área de notificaciones:

push notification outside app

Conclusión

¡Felicitaciones! Finalmente has terminado la aplicación de acondicionamiento físico. En el transcurso de cuatro tutoriales has construido una aplicación de NativeScript que usa Google Maps, SQLite, la base de datos en tiempo real de Firebase y Cloud Messaging de Firebase. Ahora tienes una muy buena base para crear aplicaciones de NativeScript que usen esas tecnologías.

Para obtener más información sobre NativeScript u otras tecnologías móviles multiplataforma ¡asegúrate de consultar algunos de nuestros otros cursos y tutoriales aquí en Envato Tuts+!.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.