NativeScript è un framework per la creazione di app mobili native multipiattaforma che utilizzano XML, CSS e JavaScript. In questa serie, stiamo provando alcune delle cose interessanti che puoi fare con un'app NativeScript: geolocalizzazione e integrazione con Google Maps, database SQLite, integrazione Firebase e notifiche push. Lungo la strada, stiamo costruendo un'app per il fitness con funzionalità in tempo reale che utilizzeranno ciascuna di queste funzionalità.
In questo tutorial imparerai quanto è facile aggiungere notifiche push all'app NativeScript con il servizio di messaggistica cloud Firebase.
Cosa starai creando
Ritornando al tutorial precedente, aggiungerai notifiche push all'app. Una notifica verrà attivata quando l'utente interrompe il record corrente o quando uno dei suoi amici si trova al primo posto lontano da loro.
Impostazione del progetto
Se hai seguito il precedente tutorial su Firebase, puoi semplicemente utilizzare lo stesso progetto e creare le funzionalità che aggiungeremo in questo tutorial. Altrimenti, puoi creare un nuovo progetto e copiare i file di avviamento nella cartella dell'app del progetto.
tns crea fitApp --app "com.yourname.fitApp"
Dopodiché, devi anche installare i plugin di geolocalizzazione, Google Maps, SQLite e Firebase:
Una volta installato, devi configurare il plug-in di Google Maps. Puoi leggere le istruzioni complete su come farlo leggendo la sezione su Installazione del plug-in di Google Maps nel precedente tutorial.
Quindi, installa la libreria fecha per le date di formattazione:
installazione npm --salva fecha
Dopodiché, devi anche configurare il plug-in Firebase. Assicurati di leggere le seguenti sezioni nel tutorial precedente in modo da poter avviare l'app:
Esecuzione del progetto
Impostazione di un'app Firebase
Impostazione di un'app Facebook
Installazione del plugin Firebase
Configurazione dell'integrazione di Facebook
Dal momento che abbiamo già configurato il plug-in Firebase nel post precedente, c'è solo un po 'di lavoro da fare per impostare le notifiche push.
Per prima cosa, devi riconfigurare il plugin andando all'interno di node_modules / nativescript-plugin-Firebase directory e in esecuzione npm esegue la configurazione. Questa volta, seleziona sia l'autenticazione Facebook che la messaggistica.
Una volta fatto, apri il firebase.nativescript.json file nella directory principale del tuo progetto e assicurati che messaggistica è impostato per vero:
Avanti, aperto app / App_Resources / Android / AndroidManifest.xml e aggiungere i seguenti servizi all'interno del . Ciò abilita il servizio di messaggistica Firebase per l'app:
Esecuzione del progetto
È possibile eseguire il progetto eseguendo tns esegue Android. Ma dal momento che questa app si baserà sulla funzionalità di geolocalizzazione, ti consiglio di utilizzare un emulatore GPS per impostare e modificare rapidamente la tua posizione. Puoi leggere come farlo nella sezione su Esecuzione dell'applicazione nel precedente tutorial.
Se si verificano errori di compilazione, è possibile rimuovere la piattaforma e rieseguire l'app:
Utilizzerai le funzioni cloud di Firebase per creare un server che invierà le notifiche push. Questa funzione di Firebase viene utilizzata per eseguire il codice back-end ogni volta che si verifica un evento specifico all'interno delle funzionalità di Firebase che stai utilizzando, ad esempio, se c'è un nuovo dato salvato nel database in tempo reale o quando c'è un nuovo utente aggiunto tramite il Firebase auth service Per questa app, utilizzerai i trigger HTTP per inviare notifiche push quando l'app mobile effettua una richiesta a un endpoint specifico.
Per utilizzare le funzioni di Firebase Cloud, è necessario prima installare il file Firebase-tools pacchetto globalmente:
npm install -g firebase-tools
Quindi, crea una nuova cartella che ospiterà il codice del server. Questo dovrebbe essere al di fuori della cartella dell'app. Dentro quella cartella, installa il Firebase funzioni pacchetto:
npm installa firebase-functions @ latest --save
Una volta installato, accedi a Firebase eseguendo login firebase. Si apre una nuova scheda del browser che ti consente di accedere con il tuo account Google. Passare attraverso l'intero processo e accettare tutte le autorizzazioni richieste.
Una volta effettuato l'accesso, è ora possibile inizializzare le funzioni di Firebase per uno specifico progetto Firebase:
firebase init functions
Questo ti chiederà se vuoi impostare un progetto predefinito o meno. Seleziona il progetto Firebase che hai creato nel precedente tutorial:
Successivamente, ti verrà chiesto se vuoi che le dipendenze siano installate. Dì di si.
Una volta che tutte le dipendenze sono state installate, dovresti vedere a firebase.json file e a funzioni cartella all'interno della directory. Il file su cui lavorerai è il funzioni / index.js file. Apri quel file e vedrai quanto segue:
const functions = require ('firebase-functions'); // // Crea e implementa le tue prime funzioni cloud // // https://firebase.google.com/docs/functions/write-firebase-functions // // exports.helloWorld = functions.https.onRequest ((request , response) => // response.send ("Ciao da Firebase!"); //);
Decommentare il Ciao mondo funzione, e vedrai i trigger HTTP in azione.
exports.helloWorld = functions.https.onRequest ((request, response) => response.send ("Hello from Firebase!"););
Eseguire quanto segue per distribuire la funzione nel cloud:
distribuire firebase - solo funzioni
Una volta completata la distribuzione, dovrebbe mostrarti l'URL in cui è stata distribuita la funzione:
Accedi a quell'URL dal tuo browser per vedere l'output "Hello from Firebase!"
Aggiunta del codice server
Ora sei pronto per aggiungere il codice per l'implementazione delle notifiche push. Innanzitutto, aggiungerai il codice per il componente server, quindi il codice per l'app.
Apri il funzioni / index.js file e svuota il suo contenuto.
Creazione della funzione Firebase
Importa i pacchetti Firebase di cui avrai bisogno:
const functions = require ('firebase-functions'); // per ascoltare i trigger http cost admin = require ('firebase-admin'); // per accedere al database in tempo reale admin.initializeApp (functions.config (). firebase); // inizializza l'SDK Admin di Firebase
Crea il init_push funzione. Si noti che il trigger HTTP viene chiamato per qualsiasi metodo di richiesta, quindi è necessario filtrare il metodo di richiesta che si desidera elaborare. In questo caso, vogliamo solo elaborare INVIARE richieste. Ci aspettiamo che l'app presenti il id, passaggi, e friend_ids come i dati della richiesta.
exports.init_push = functions.https.onRequest ((request, response) => if (request.method == 'POST') var id = request.body.id; // ID dell'utente che ha effettuato la richiesta ( Firebase Auth ID) var steps = parseInt (request.body.steps); // ultimi passi, non ancora registrati var friend_ids = request.body.friend_ids.split (','); friend_ids.push (id); // anche includi l'ID dell'utente corrente // successivo: aggiungi il codice per ottenere i dati dell'utente e degli amici);
Ottenere i dati degli utenti e degli amici
Quindi, interrogare il database Firebase per verificare se esiste l'ID utente. Questo serve come modo per proteggere l'endpoint in modo che non tutti possano attivare notifiche push. (Ovviamente, un'app reale dovrebbe avere una sicurezza back-end molto migliore, in modo che gli utenti non possano spoofare i propri dati o i dati di qualcun altro.)
Se l'utente esiste, interrogare nuovamente il database in modo che restituisca tutti gli utenti. Tieni presente che Firebase attualmente non fornisce un modo per restituire i record in base a un array di ID, quindi dovremo filtrare noi stessi i dati rilevanti:
admin.database (). ref ('/ users') .orderByChild ('id') .limitToFirst (1) .equalTo (id) .once ('value'). then (snapshot => var user_data = snapshot.val (); if (user_data) // ottiene tutti gli utenti dal database admin.database (). ref ('/ users') .once ('value'). then (snapshot => // next: aggiungi il codice per ottenere i dati dell'utente corrente e i dati dei propri amici););
Successivamente, passa in rassegna i risultati restituiti da Firebase e crea un nuovo array che ospita il file friends_data. Una volta eseguita questa operazione, ordinare l'array in base al numero di passaggi di ciascun utente. Quello con il maggior numero di passaggi ha il primo indice.
var friends_data = []; var current_user_data = null; var notification_data = ; var has_notification = false; var users = snapshot.val (); per (chiave var negli utenti) var user_id = users [chiave] .id; if (friend_ids.indexOf (user_id)! = -1 && id! = user_id) // gli amici dell'utente corrente friends_data.push (utenti [chiave]); else if (id == user_id) // l'utente corrente current_user_data = users [chiave]; // ordina in ordine decrescente in base al numero di passi var sorted_friends_data = friends_data.sort (function (a, b) return b.steps - a.steps;); // next: aggiungi il codice per la costruzione del payload della notifica
Costruisci il carico utile di notifica
Ora siamo pronti per determinare chi riceverà la notifica e costruiremo il carico utile della notifica. Chi è al primo posto? È l'utente corrente o uno degli amici dell'utente? Dal momento che l'attuale utente avrà anche infranto il proprio record quando ha infranto il record generale di chi è al primo posto, dobbiamo solo controllare se quel record è stato rotto.
if (steps> sorted_friends_data [0] .steps) // notifica all'amico che è stato sorpassato var diff_steps = steps - sorted_friends_data [0] .steps; notification_data = payload: title: "Uno dei tuoi amici batte il tuo record", corpo: "Peccato, il tuo amico" + current_user_data.user_name + "ti ha appena superato da" + diff_steps + "steps", device_token: sorted_friends_data [ 0] .device_token; has_notification = true; else if (steps> current_user_data.steps) // notifica all'utente corrente var diff_steps = steps - current_user_data.steps; notification_data = payload: title: "Hai battuto il tuo record!", corpo: "Congratulazioni! Hai battuto il tuo record attuale con i passaggi "+ diff_steps +"! , device_token: current_user_data.device_token; has_notification = true; // successivo: aggiungi il codice per l'invio di notifiche push
Invio della notifica
Infine, invia la notifica:
if (has_notification) var payload = notification: notification_data.payload; // invia notifica push admin.messaging (). sendToDevice (notification_data.device_token, payload) .then (function (res) response.send (JSON.stringify ('has_notification': true)); // informa l'app che è stata inviata una notifica) .catch (funzione (errore) response.send (JSON.stringify (errore)); // invia l'errore di notifica push all'app); else response.send (JSON.stringify ('has_notification': false)); // informa l'app che non è stata inviata una notifica
Aggiornamento del codice dell'app
In precedenza, hai impostato l'app in modo che fosse in grado di ricevere notifiche push. Questa volta, aggiungerai il codice in modo che la tua app possa elaborare quelle notifiche push e visualizzarle all'utente.
Ricezione di notifiche push
La prima cosa che devi fare per ricevere le notifiche push è aggiornare il file firebase.init () funzione per includere un listener per ricevere il token del dispositivo:
onPushTokenReceivedCallback: function (token) // salva temporaneamente nelle impostazioni dell'applicazione fino al momento in cui // l'utente esegue il login per la prima volta applicationSettings.setString ('device_token', token); ,
Questa funzione viene eseguita solo una volta, quindi è necessario salvare il token localmente utilizzando le impostazioni dell'applicazione. Successivamente, ciò ci consentirà di ottenere il token del dispositivo quando l'utente effettua il login per la prima volta. Se ti ricordi ancora del tutorial precedente, salviamo i dati dell'utente su Firebase la prima volta che eseguono l'accesso.
Successivamente, è possibile aggiungere il listener per quando vengono ricevute le notifiche. Questo mostrerà una casella di avviso che utilizza il titolo e il corpo del messaggio come contenuto:
Firebase Cloud Messaging richiede il token del dispositivo quando invia una notifica push a un dispositivo specifico. Dato che stiamo già utilizzando Firebase, salveremo il token del dispositivo insieme ai dati dell'utente. Per questo, è necessario modificare il codice per salvare i dati dell'utente per includere il token del dispositivo che abbiamo ottenuto in precedenza:
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;
Attivare notifiche push
Le notifiche push vengono attivate quando si verifica una di queste due cose:
quando l'utente interrompe il proprio record corrente
quando uno degli amici dell'utente interrompe il proprio record e passa al primo posto
Il primo è facile, quindi non c'è davvero bisogno di configurazioni aggiuntive. Ma per il secondo, devi fare un po 'di lavoro. Innanzitutto, devi modificare il codice per quando cambia lo stato di autenticazione. Subito dopo aver estratto gli ID amici dal risultato di Facebook, devi salvare gli ID amici usando le impostazioni dell'applicazione.
// estraendo gli ID amici dal risultato di Facebook var friends_ids = r.data.map (function (obj) return obj.id;); // salva gli ID amici applicationSettings.setString ('friends_ids', JSON.stringify (friends_ids)); friends_ids.push (utente [user_key] .id);
Successivamente, aggiorna il codice per quando l'utente interrompe il monitoraggio della sua passeggiata. Subito dopo il codice per la costruzione dei dati utente per l'aggiornamento dell'utente, ottenere gli ID amico dalle impostazioni dell'applicazione e includerlo nell'oggetto che contiene i dati della richiesta per l'attivazione della notifica push.
// costruisce i dati utente per l'aggiornamento della distanza e dei passi dell'utente var user_key = applicationSettings.getString ('user_key'); var user = applicationSettings.getString ('utente'); var user_data = JSON.parse (utente); user_data [user_key] .distance = total_distance; user_data [user_key] .steps = total_steps; // ottiene ID amico 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;
Effettua la richiesta all'endpoint Firebase Cloud Functions creato in precedenza. Una volta che viene restituita una risposta positiva, solo allora i dati dell'utente verranno aggiornati sul database Firebase.
http.request (url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", metodo: "POST", intestazioni: "Content-Type": "application / json", content : JSON.stringify (request_data)). Then (function (response) var statusCode = response.statusCode; if (statusCode == 200) // aggiorna i dati dell'utente su Firebase firebase.update ('/ users', user_data );, function (e) console.log ('Errore durante l'avvio di push:', e););
Test delle notifiche push
È possibile verificare l'invio di notifiche push prima disinstallando l'app dall'emulatore o dal dispositivo. Questo ci consente di attivare correttamente la funzione per ottenere il token del dispositivo. Assicurati di aggiungere console.log per emettere il token del dispositivo:
onPushTokenReceivedCallback: function (token) applicationSettings.setString ('device_token', token); console.log ('dispositivo token:', device_token); // <-- add this
Quando il token del dispositivo viene emesso nella console NativeScript, copialo, fai clic su Banca dati menu sulla dashboard dell'app Firebase e aggiungilo come token dispositivo a tutti gli utenti dell'app. Uso device_token come il nome della proprietà.
Per attivare la notifica push, è possibile utilizzare l'arricciatura per creare un INVIARE richiesta al punto finale della funzione Firebase:
curl -X POST -H "Content-Type: application / json" YOUR_FIREBASE_FUNCTION_ENDPOINT -d '"id": "ID DI UN UTENTE FIREBASE", "steps": NUMBER_OF_STEPS, "friend_ids": "COMMA, SEPARATED, FIREBASE, USER_IDs "'
Se non si dispone di arricciatura installata, è possibile utilizzare l'applicazione Postman per inviare la richiesta. Utilizzare le seguenti impostazioni per la richiesta:
Metodo di richiesta:INVIARE
URL: L'endpoint della funzione Firebase
Chiave intestazioni:Tipo di contenuto
Valore intestazione:application / json
Corpo:
"id": "ID DI UN UTENTE FIREBASE", "passaggi": NUMBER_OF_STEPS, "friend_ids": "COMMA, SEPARATED, FIREBASE, USER_IDs"
Una volta attivato, vedrai un risultato simile al seguente:
Se l'app non è attualmente aperta, vedrai la notifica nell'area di notifica:
Conclusione
Congratulazioni! Hai finalmente completato l'app di fitness. Nel corso di quattro esercitazioni, hai creato un'app NativeScript che utilizza Google Maps, SQLite, il database Firebase Realtime e Firebase Cloud Messaging. Ora hai una buona base per creare app NativeScript che usano queste tecnologie.
Per ulteriori informazioni su NativeScript o altre tecnologie mobili multipiattaforma, assicurati di controllare alcuni dei nostri altri corsi e tutorial qui su Envato Tuts+!
Share
Accentsconagua
