NativeScript este un cadru pentru construirea de aplicații mobile native de tip cross-platform utilizând XML, CSS și JavaScript. În această serie, încercăm câteva lucruri interesante pe care le puteți face cu o aplicație NativeScript: localizarea geolocalizării și integrarea Google Maps, baza de date SQLite, integrarea Firebase și notificările push. Pe parcurs, construim o aplicație de fitness cu capabilități în timp real, care vor folosi fiecare dintre aceste caracteristici.
În acest tutorial, veți afla cât de ușor este să adăugați notificări push la aplicația dvs. NativeScript cu serviciul Mesaje Cloud Firebase.
Ce veți crea
Luând din tutorialul anterior, veți adăuga notificări push către aplicație. O notificare va fi declanșată atunci când utilizatorul își va rupe înregistrarea curentă sau când unul dintre prietenii săi va lua primul loc de la ei.
Configurarea proiectului
Dacă ați urmat tutorialul anterior pe Firebase, puteți pur și simplu să utilizați același proiect și să construiți caracteristicile pe care le vom adăuga în acest tutorial. În caz contrar, puteți să creați un nou proiect și să copiați fișierele de pornire în folderul de aplicații al proiectului.
tns a crea fitApp --appid "com.yourname.fitApp"
După aceasta, trebuie să instalați și pluginurile Geolocation, Google Maps, SQLite și Firebase:
Odată instalat, trebuie să configurați pluginul Google Maps. Puteți citi instrucțiunile complete despre cum să faceți acest lucru prin citirea secțiunii Instalarea Plugin-ului Google Maps în tutorialul anterior.
Apoi, instalați biblioteca Fecha pentru formatarea datelor:
npm install --save fecha
Apoi, trebuie să configurați pluginul Firebase. Asigurați-vă că ați citit următoarele secțiuni din tutorialul anterior pentru a putea rula aplicația:
Executarea proiectului
Configurarea unei aplicații Firebase
Configurarea unei aplicații Facebook
Instalarea plug-in-ului Firebase
Configurarea integrării pe Facebook
Deoarece am creat deja pluginul Firebase în postul anterior, există doar o mică lucrare care trebuie făcută pentru a configura notificările push.
În primul rând, trebuie să reconfigurați plugin-ul mergând în interiorul node_modules / nativescript-plugin-firebase director și de funcționare npm run config. De această dată, selectați atât autentificarea prin Facebook, cât și mesajele de mesagerie.
Odată ce sa terminat, deschideți-l firebase.nativescript.json fișier în directorul rădăcină al proiectului dvs. și asigurați-vă că mesagerie este setat sa Adevărat:
În continuare, deschideți-vă app / App_Resources / Android / AndroidManifest.xml și adăugați următoarele servicii în interiorul . Aceasta permite serviciului de mesagerie Firebase pentru aplicație:
Executarea proiectului
Puteți executa proiectul executând tns rula Android. Dar, deoarece această aplicație se va baza pe funcționalitatea geolocație, vă recomandăm să utilizați un emulator GPS pentru setarea și schimbarea rapidă a locației. Puteți citi despre cum să faceți acest lucru în secțiunea de pe Rularea aplicației în tutorialul anterior.
Dacă întâmpinați erori de construire, puteți elimina platforma și reluați aplicația:
platforma tns elimina android tns alerga android
Configurarea funcțiilor Cloud Firebase
Veți utiliza Firebase Cloud Functions pentru a crea un server care va trimite notificările push. Această caracteristică Firebase este utilizată pentru a rula codul de back-end ori de câte ori un anumit eveniment se întâmplă în cadrul funcțiilor Firebase pe care le utilizați - de exemplu, dacă există date noi salvate în baza de date în timp real sau când există un nou utilizator adăugat prin Serviciul de asistență Firebase. Pentru această aplicație, veți utiliza declanșatoarele HTTP pentru a trimite notificări push atunci când aplicația mobilă face o cerere către un anumit parametru final.
Pentru a utiliza funcțiile Firebase Cloud, trebuie mai întâi să instalați firebase-tools pachet global:
npm install -g firebase-tools
Apoi, creați un nou folder care va găzdui codul serverului. Aceasta ar trebui să se afle în afara dosarului aplicației. În interiorul acelui dosar, instalați firebase funcții pachet:
npm instalează firebase-functions @ latest --save
Odată instalat, conectați-vă la Firebase rulând introducere firebase. Aceasta deschide o nouă filă de browser care vă permite să vă conectați cu contul dvs. Google. Treceți prin întregul proces și sunteți de acord cu toate permisiunile solicitate.
Odată ce v-ați conectat, puteți inițializa funcțiile Firebase pentru un anumit proiect Firebase:
firebase funcții init
Acest lucru vă va întreba dacă vreți să configurați un proiect implicit sau nu. Selectați proiectul Firebase pe care l-ați creat în tutorialul anterior:
Apoi, vi se va cere dacă doriți ca dependențele să fie instalate. Spune da.
Odată ce toate dependențele au fost instalate, ar trebui să vedeți a firebase.json fișier și a funcții folder din interiorul directorului. Fișierul pe care veți lucra este Funcții / index.js fişier. Deschideți fișierul respectiv și veți vedea următoarele:
funcții const = cer ("firebase-functions"); // // Creați și implementați primele funcții Cloud // // https://firebase.google.com/docs/functions/write-firebase-functions // // exports.helloWorld = functions.https.onRequest ((solicitați , răspuns) => // response.send ("Bună ziua de la Firebase!"); //);
Dezactivați Salut Lume funcția dvs. și veți putea vedea declanșatorii HTTP în acțiune.
exports.helloWorld = functions.https.onRequest ((cerere, răspuns) => response.send ("Hello from Firebase!"););
Rulați următoarele pentru a implementa funcția în cloud:
firebase desfășura - funcții numai
Odată ce implementarea este finalizată, aceasta ar trebui să vă arate adresa URL unde a fost implementată funcția:
Accesați respectiva adresă URL din browserul dvs. pentru a vedea ieșirea "Hello from Firebase!"
Adăugarea codului serverului
Acum sunteți gata să adăugați codul pentru implementarea notificărilor push. Mai întâi, veți adăuga codul pentru componenta server, apoi codul aplicației.
Deschide Funcții / index.js fișier și goliți conținutul.
Crearea funcției Firebase
Importați pachetele Firebase de care veți avea nevoie:
funcții const = cer ("firebase-functions"); // pentru a asculta http triggerele const admin = require ('firebase-admin'); // pentru accesarea bazei de date în timp real admin.initializeApp (functions.config () firebase); // inițializați SDK-ul Firebase Admin
Creați init_push funcţie. Rețineți că declanșatorul HTTP este apelat pentru orice metodă de solicitare, deci trebuie să filtrați metoda de solicitare pe care doriți să o procesați. În acest caz, vrem doar să procesăm POST solicitări. Ne așteptăm ca aplicația să trimită id, pași, și friend_ids ca date de cerere.
exports.init_push = functions.https.onRequest ((cerere, răspuns) => if (request.method == 'POST') var id = request.body.id; // ID al utilizatorului care a făcut cererea Firebase Auth ID) var pași = parseInt (request.body.steps); // ultimii pași, încă neînregistrați var friend_ids = request.body.friend_ids.split (','); friend_ids.push (id); // de asemenea includeți ID-ul utilizatorului curent // următorul: adăugați codul pentru a obține datele utilizatorului și prietenilor);
Obținerea datelor utilizatorului și a prietenilor
Apoi, interogați baza de date Firebase pentru a verifica dacă există ID-ul utilizatorului. Acest lucru servește ca o modalitate de a asigura punctul final, astfel încât nu numai oricine poate declanșa notificări push. (Desigur, o aplicație reală ar trebui să aibă o securitate mult mai bună, astfel încât utilizatorii să nu-și poată falsifica propriile date sau datele altcuiva.)
Dacă utilizatorul există, interogați din nou baza de date, astfel încât să revină toți utilizatorii. Rețineți că, în prezent, Firebase nu oferă o modalitate de a returna înregistrările bazate pe o serie de coduri de identitate, așa că noi trebuie să filtrăm singuri datele relevante:
("id") .limitToFirst (1) .equalTo (id) .once ('valoare'), apoi (snapshot => var user_data = snapshot.val () / if (user_data) // a obtine toti utilizatorii din baza de date admin.database () ref ('/ users') .once ('value'). obtinerea datelor curente ale utilizatorilor si a prietenilor acestora););
Apoi, buclele prin rezultatele returnate de Firebase și a crea un nou tablou care găzduiește friends_data. Odată ce acest lucru este făcut, sortați matricea în funcție de numărul de pași de către fiecare utilizator. Cel care are cel mai mare număr de pași are primul index.
var prieteni_data = []; var actual_user_data = null; var notification_data = ; var has_notification = false; var utilizatori = snapshot.val (); pentru (cheie var în utilizatori) var user_id = users [key] .id; dacă (friend_ids.indexOf (user_id)! = -1 && id! = user_id) // prietenii utilizatorului curent friends_data.push (users [key]); altfel dacă (id == user_id) // actualul utilizator current_user_data = users [key]; // sortează în ordine descrescătoare după numărul de pași var sort_friends_data = friends_data.sort (funcția (a, b) return b.steps - a.steps;); // next: adăugați codul pentru construirea încărcăturii utile de notificare
Construiți sarcina utilă de notificare
Acum suntem gata să determinăm cine va primi notificarea și va construi sarcina utilă a notificării. Cine este în primul rând? Este utilizatorul curent sau unul dintre prietenii utilizatorului? Întrucât utilizatorul actual va fi rupt propriul record atunci când va rupe înregistrarea generală a celor care sunt pe primul loc, trebuie doar să verificăm dacă acea înregistrare a fost întreruptă.
dacă (pași> sort_friends_data [0] .steps) // notificați prietenul care a fost depășit var diff_steps = steps - sorted_friends_data [0] .steps; message_data = payload: title: 'Unul dintre prietenii tăi a bătut recordul tău', corp: 'Păcat, prietenul tău' + current_user_data.user_name + 'te-a depășit cu' + diff_steps + 'steps', device_token: sorted_friends_data [ 0] .device_token; has_notification = true; altfel dacă (pași> actual_user_data.steps) // notificați utilizatorul curent var diff_steps = pași - actual_user_data.steps; notification_data = payload: title: 'Ai bătut recordul!', body: 'Congrats! Ați bătut înregistrarea curentă cu pașii "+ diff_steps +"! " , device_token: actual_user_data.device_token; has_notification = true; // următor: adăugați codul pentru trimiterea notificării push
Trimiterea Notificării
În cele din urmă, trimiteți notificarea:
dacă (has_notification) var payload = notification: notification_data.payload; / / trimite trimiterea notificării push admin.messaging () sendToDevice (notification_data.device_token, payload) .then (funcția (res) answer.send (JSON.stringify has_notification ': true); că a fost trimisă o notificare) .catch (funcția (eroare) response.send (JSON.stringify (error)); // trimiteți eroarea de notificare push către aplicație); altceva answer.send (JSON.stringify ('has_notification': false)); // informați aplicația că o notificare nu a fost trimisă
Actualizarea codului aplicației
Anterior, ați configurat aplicația pentru a putea primi notificări push. De această dată, veți adăuga cod, astfel încât aplicația dvs. să poată procesa aceste notificări push și să le afișeze utilizatorului.
Primirea notificărilor Push
Primul lucru pe care trebuie să-l faceți pentru a primi notificări push este actualizarea firebase.init () pentru a include un ascultător pentru primirea jetonului dispozitivului:
onPushTokenReceivedCallback: funcția (token) // salvați-o temporar în setările aplicației până când utilizatorul se loghează pentru prima dată applicationSettings.setString ('device_token', token); ,
Această funcție se execută o singură dată, deci trebuie să salvați tokenul local utilizând setările aplicației. Mai târziu, acest lucru ne va permite să obținem jetonul dispozitivului atunci când utilizatorul se conectează pentru prima dată. Dacă totuși vă amintiți din tutorialul anterior, salvăm datele utilizatorilor în Firebase prima dată când vă conectați.
Apoi, puteți adăuga ascultător când se primesc notificări. Aceasta va afișa o casetă de avertizare care utilizează titlul și corpul mesajului drept conținut:
Firebase Cloud Messaging necesită jetonul dispozitivului când trimite o notificare push către un dispozitiv specific. Deoarece deja folosim Firebase, vom salva doar tokenul dispozitivului împreună cu datele utilizatorului. Pentru aceasta, trebuie să editați codul pentru salvarea datelor utilizatorului pentru a include jetonul de dispozitiv pe care l-am primit mai devreme:
dacă (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;
Declanșarea notificărilor push
Anunțurile push sunt declanșate atunci când se întâmplă unul din cele două lucruri:
când utilizatorul își rupe înregistrarea curentă
când unul dintre prietenii utilizatorului își sparge recordul și se duce pe primul loc
Primul este ușor, deci nu este nevoie de setări suplimentare. Dar pentru al doilea, trebuie să faci puțină muncă. În primul rând, trebuie să editați codul pentru momentul în care se schimbă starea auth. Imediat după extragerea ID-urilor de prietenie de pe rezultatul din Facebook, trebuie să salvați ID-urile prietenilor utilizând setările aplicației.
Apoi, actualizați codul pentru momentul în care utilizatorul nu mai urmărește călătoria. Imediat după codul pentru construirea datelor de utilizator pentru actualizarea utilizatorului, obțineți ID-urile prietenilor din setările aplicației și îl includeți în obiectul care conține datele solicitării pentru declanșarea notificării push.
// construiți datele utilizatorului pentru a actualiza distanța și pașii utilizatorului var user_key = applicationSettings.getString ('user_key'); var utilizator = applicationSettings.getString ("utilizator"); var user_data = JSON.parse (utilizator); user_data [user_key] .distance = total_distance; user_data [user_key] .steps = total_steps; // primiți ID-urile prietenilor var friends_ids = JSON.parse (applicationSettings.getString ('friends_ids')); var request_data = 'id': user_data [user_key] .id, 'friend_ids': friends_ids.join (','), 'pași': total_steps;
Faceți cererea către punctul final al funcțiilor Cloud Functions Firebase pe care l-ați creat mai devreme. Odată ce un răspuns de succes este returnat, numai atunci datele utilizatorului vor fi actualizate pe baza de date Firebase.
http.request (url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", metoda: "POST", anteturi: "Content-Type": "application / json" : (StatusCode == 200) // actualizați datele utilizatorului în Firebase firebase.update ('/ users', user_data), apoi (funcția (răspuns)) var statusCode = );, funcția (e) console.log ('A apărut o eroare la inițierea apăsării:', e););
Testare Notificări Push
Puteți testa trimiterea notificărilor push înainte dezinstalați aplicația din emulator sau din dispozitiv. Acest lucru ne permite să declanșăm în mod corespunzător funcția de obținere a jetului de dispozitiv. Asigurați-vă că ați adăugat console.log pentru a scoate tokenul dispozitivului:
onPushTokenReceivedCallback: funcția (token) applicationSettings.setString ('device_token', token); console.log ('token device:', device_token); // <-- add this
Atunci când jetonul dispozitivului este afișat în consola NativeScript, copiați-l, faceți clic pe Bază de date din tabloul de bord al aplicației Firebase și adăugați-l ca jet de dispozitiv pentru toți utilizatorii aplicației. Utilizare device_token ca nume de proprietate.
Pentru a declanșa notificarea push, puteți utiliza curl pentru a face o POST solicitați la sfârșitul funcției Firebase:
curl -X POST -H "Tipul de conținut: aplicație / json" YOUR_FIREBASE_FUNCTION_ENDPOINT -d "" id ":" IDUL UNUI UTILIZATOR FIREBASE "," pașii ": NUMBER_OF_STEPS," friends_ids ": COMMA, SEPARATED, FIREBASE, USER_ID „“
Dacă nu aveți instalat curl, puteți utiliza aplicația Postman pentru a trimite solicitarea. Utilizați următoarele setări pentru solicitare:
Metoda de solicitare:POST
Adresa URL: Funcția dvs. Firebase final
Antet cheie:Tipul de conținut
Anteturi Valoare:application / json
Corp:
"id": "ID-ULUI UNUI UTILIZATOR DE FIRE", "pași": NUMBER_OF_STEPS, "friend_ids": "COMMA, SEPARATED, FIREBASE, USER_IDs"
Odată declanșat, veți vedea o ieșire similară cu următoarea:
Dacă aplicația nu este în prezent deschisă, veți vedea notificarea din zona de notificare:
Concluzie
Felicitări! În sfârșit, ați terminat aplicația de fitness. În cursul a patru tutoriale, ați construit o aplicație NativeScript care utilizează Google maps, SQLite, baza de date Firebase Realtime și Firebase Cloud Messaging. Acum aveți o bază destul de bună pentru construirea de aplicații NativeScript care utilizează aceste tehnologii.
Pentru a afla mai multe despre tehnologiile NativeScript sau alte tehnologii mobile pe platforme, asigurați-vă că ați verificat câteva dintre celelalte cursuri și tutoriale de aici, pe Envato Tuts+!
Share
Accentsconagua
