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

() translation by (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.

1	tns create fitApp --appid "com.yourname.fitApp"

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

1	tns plugin add nativescript-geolocation
2	tns plugin add nativescript-google-maps-sdk
3	tns plugin add nativescript-sqlite
4	tns plugin add nativescript-plugin-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:

1	npm install --save fecha

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:

{
    "using_ios": false,
    "using_android": true,
    "remote_config": false,
    "messaging": true,
    "crash_reporting": false,
    "storage": false,
    "facebook_auth": true,
    "google_auth": false,
    "admob": false,
    "invites": false
}

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:

<application ...>

<service android:name="org.nativescript.plugins.firebase.MyFirebaseInstanceIDService">
    <intent-filter>
        <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
    </intent-filter>
</service>
<service android:name="org.nativescript.plugins.firebase.MyFirebaseMessagingService">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT"/>
    </intent-filter>
</service>

</application>

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:

1	tns platform remove android
2	tns run android

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:

1	npm install -g firebase-tools

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:

1	npm install firebase-functions@latest --save

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:

1	firebase init functions

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

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:

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//  response.send("Hello from Firebase!");
// });

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

1	exports.helloWorld = functions.https.onRequest((request, response) => {
2	response.send("Hello from Firebase!");
3	});

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

1	firebase deploy --only functions

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

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:

const functions = require('firebase-functions'); // for listening to http triggers

const admin = require('firebase-admin'); // for accessing the realtime database

admin.initializeApp(functions.config().firebase); // initialize the Firebase Admin SDK

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, steps y friend_ids como los datos solicitados.

exports.init_push = functions.https.onRequest((request, response) => {
    
    if(request.method == 'POST'){

        var id = request.body.id; // ID of the user who made the request (Firebase Auth ID)
        var steps = parseInt(request.body.steps); // latest steps, not recorded yet
        var friend_ids = request.body.friend_ids.split(','); 

        friend_ids.push(id); // also include the ID of the current user

        // next: add code for getting the user and friends data
    }

});

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:

admin.database().ref('/users')
    .orderByChild('id')
    .limitToFirst(1)
    .equalTo(id)
    .once('value').then(snapshot => {
    
    var user_data = snapshot.val();

    if(user_data){
        // get all users from the database
        admin.database().ref('/users')
            .once('value').then(snapshot => {
            // next: add code for getting the current user's data and their friends data
        });
    }
});

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.

var friends_data = [];
var current_user_data = null;
var notification_data = {};
var has_notification = false;

var users = snapshot.val();
for(var key in users){
    var user_id = users[key].id;
    
    if(friend_ids.indexOf(user_id) != -1 && id != user_id){ // the current user's friends
        friends_data.push(users[key]);
    }else if(id == user_id){ // the current user
        current_user_data = users[key];
    }
}

// sort in descending order by the number of steps
var sorted_friends_data = friends_data.sort(function(a, b) {
    return b.steps - a.steps;
}); 

// next: add code for constructing the notification payload

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.

if(steps > sorted_friends_data[0].steps){
    // notify friend who was overtaken
    var diff_steps = steps - sorted_friends_data[0].steps;
    notification_data = {
        payload: {
            title: 'One of your friends beat your record',
            body: 'Too bad, your friend ' + current_user_data.user_name + ' just overtook you by ' + diff_steps + ' steps'
        },
        device_token: sorted_friends_data[0].device_token
    };
    has_notification = true;
    
}else if(steps > current_user_data.steps){
    // notify current user
    var diff_steps = steps - current_user_data.steps;
    notification_data = {
        payload: {
            title: 'You beat your record!',
            body: 'Congrats! You beat your current record by ' + diff_steps + ' steps!' 
        },
        device_token: current_user_data.device_token
    };
    has_notification = true;
}

// next: add code for sending push notification

Enviando la notificación

Finalmente envía la notificación:

if(has_notification){
    
    var payload = {
      notification: notification_data.payload
    };
    
    // send push notification
    admin.messaging().sendToDevice(notification_data.device_token, payload).then(function(res) {
        
        response.send(JSON.stringify({'has_notification': true})); // inform the app that a notification was sent
    })
    .catch(function(error) {
        response.send(JSON.stringify(error)); // send the push notification error to the app
    });

}else{
    response.send(JSON.stringify({'has_notification': false})); // inform the app that a notification was not sent
}

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:

onPushTokenReceivedCallback: function(token) {
    // temporarily save it to application settings until such time that 
    // the user logs in for the first time
    applicationSettings.setString('device_token', token);
},

É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:

onMessageReceivedCallback: function(message) {
    dialogs.alert({
        title: message.title,
        message: message.body,
        okButtonText: "ok"
    });
},

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:

if(firebase_result.value == null){ 

    var device_token = applicationSettings.getString('device_token');

    var user_data = {
        'uid': fb_result.uid,
        'user_name': fb_result.name,
        'profile_photo': fb_result.profileImageURL,
        'device_token': device_token 
    };

}

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.

// extracting the friend IDs from the Facebook result
var friends_ids = r.data.map(function(obj){
    return obj.id;
});

// save the friend IDs
applicationSettings.setString('friends_ids', JSON.stringify(friends_ids));

friends_ids.push(user[user_key].id);

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.

// construct the user data for updating the user's distance and steps
var user_key = applicationSettings.getString('user_key');
var user = applicationSettings.getString('user');
var user_data = JSON.parse(user);
user_data[user_key].distance = total_distance;
user_data[user_key].steps = total_steps;

// get friend IDs
var friends_ids = JSON.parse(applicationSettings.getString('friends_ids'));

var request_data = {
    'id': user_data[user_key].id,
    'friend_ids': friends_ids.join(','),
    'steps': total_steps
};

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.

http.request({ 
    url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", 
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify(request_data) 
}).then(function (response) {
   
    var statusCode = response.statusCode;
    if(statusCode == 200){
        // update the user's data on Firebase
        firebase.update(
            '/users',
            user_data
        ); 

    }

}, function (e) {
    console.log('Error occurred while initiating push: ', e);
});

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:

1	onPushTokenReceivedCallback: function(token) {
2	applicationSettings.setString('device_token', token);
3	console.log('device token: ', device_token); // <-- add this
4	}

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:

1	curl -X POST -H "Content-Type:application/json" YOUR_FIREBASE_FUNCTION_ENDPOINT -d '{"id":"ID OF A FIREBASE USER", "steps":NUMBER_OF_STEPS, "friend_ids":"COMMA,SEPARATED,FIREBASE,USER_IDs"}'

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:

1	{"id":"ID OF A FIREBASE USER", "steps":NUMBER_OF_STEPS, "friend_ids":"COMMA,SEPARATED,FIREBASE,USER_IDs"}

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

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

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+!.