NativeScript er et rammeverk for å bygge opp mobile mobilprogrammer på tvers av plattformer ved hjelp av XML, CSS og JavaScript. I denne serien prøver vi noen av de kule tingene du kan gjøre med en NativeScript-app: geolocation og integrasjon av Google Maps, SQLite-database, Firebase-integrasjon og push-varsler. Underveis bygger vi et treningsprogram med sanntidsfunksjoner som vil bruke hver av disse funksjonene.
I denne opplæringen lærer du hvor lett det er å legge til push-varsler til NativeScript-appen din med Firebase Cloud Messaging Service.
Hva du skal skape
Når du plukker opp fra forrige veiledning, legger du til push-varsler til appen. Et varsel blir utløst når brukeren bryter sin nåværende rekord eller når en av vennene deres tar første plass bort fra dem.
Sette opp prosjektet
Hvis du har fulgt den forrige opplæringen på Firebase, kan du bare bruke det samme prosjektet og bygge funksjonene som vi legger til i denne opplæringen. Ellers kan du opprette et nytt prosjekt og kopiere startfilene til prosjektets appmappe.
tns lage fitApp --appid "com.yourname.fitApp"
Deretter må du også installere geolocation, Google Maps, SQLite og Firebase plugins:
tns plugin legg til nativcript-geolocation tns plugin legg til nativescript-google-maps-sdk tns plugin legg til nativescript-sqlite tns plugin legg til nativescript-plugin-firebase
Når du er installert, må du konfigurere Google Maps-plugin-modulen. Du kan lese de komplette instruksjonene om hvordan du gjør dette ved å lese delen på Installerer Google Maps Plugin i den tidligere opplæringen.
Deretter installerer du fecha-biblioteket for formatering datoer:
npm installere - lagre fecha
Deretter må du også konfigurere Firebase-plugin-modulen. Husk å lese følgende avsnitt i den forrige veiledningen slik at du kan få appen å kjøre:
Kjører prosjektet
Sette opp en brannbaseapp
Sette opp en Facebook-app
Installere Firebase Plugin
Konfigurere Facebook Integration
Siden vi allerede har satt opp Firebase-pluginet i forrige innlegg, er det bare et lite arbeid som må gjøres for å sette opp push notifications.
Først må du omkonfigurer pluginet ved å gå inn i node_modules / nativescript-plugin-utskytnings katalog og kjøring npm kjøre config. Denne gangen, velg både Facebook-godkjenning og Meldinger.
Når det er gjort, åpne firebase.nativescript.json fil i rotkatalogen av prosjektet ditt, og sørg for at meldinger er satt til ekte:
Deretter åpne app / App_Resources / Android / AndroidManifest.xml og legg til følgende tjenester inne i . Dette gjør det mulig for Firebase-meldingstjenesten for appen:
Kjører prosjektet
Du kan kjøre prosjektet ved å kjøre tns kjøre android. Men siden denne appen vil bygge på geolokalitetsfunksjonaliteten, anbefaler jeg at du bruker en GPS-emulator for raskt å sette inn og endre posisjonen din. Du kan lese om hvordan du gjør det i seksjonen på Kjører appen i den tidligere opplæringen.
Hvis du får noen byggefeil, kan du fjerne plattformen og gjenopprette appen:
tns plattform fjerne android tns kjøre android
Sette opp Firebase Cloud Funksjoner
Du bruker Firebase Cloud Functions for å opprette en server som vil sende ut meldingene. Denne Firebase-funksjonen brukes til å kjøre backend-kode når en bestemt hendelse skjer i Firebase-funksjoner som du bruker, for eksempel hvis det er en ny data lagret i sanntidsdatabasen, eller når det er en nylig lagt til bruker via Firebase auth service. For denne appen bruker du HTTP-utløsere til å sende push-varsler når mobilappen gjør en forespørsel til et bestemt sluttpunkt.
For å bruke Firebase Cloud Functions må du først installere Fire-verktøy pakke globalt:
npm installer -g firebase-verktøy
Deretter oppretter du en ny mappe som vil inneholde tjenerkoden. Dette bør være utenfor appmappen din. Inne i den mappen, installer Firefunksjoner pakke:
npm installer firebase-funksjoner @ sist - save
Når den er installert, logg deg på Firebase ved å kjøre Firebase login. Dette åpner en ny nettleserfane som lar deg logge på med Google-kontoen din. Gå gjennom hele prosessen og godta at alle tillatelser blir spurt.
Når du er logget inn, kan du nå initialisere Firebase-funksjoner for et bestemt Firebase-prosjekt:
firebase init funksjoner
Dette vil spørre deg om du vil sette opp et standardprosjekt eller ikke. Velg Firebase-prosjektet du opprettet i forrige veiledning:
Deretter blir du spurt om du vil at avhengighetene skal installeres. Si ja.
Når avhengighetene er alle blitt installert, bør du se en firebase.json fil og a funksjoner mappe inne i katalogen. Filen du vil jobbe med, er funksjoner / index.js fil. Åpne den filen, og du vil se følgende:
const functions = krever ('firebase-funksjoner'); // // Opprett og distribuér dine første Cloud-funksjoner // // https://firebase.google.com/docs/functions/write-firebase-functions // // exports.helloWorld = functions.https.onRequest ((forespørsel , svar) => // response.send ("Hei fra Firebase!"); //);
Uncomment the Hei Verden funksjonen, og du får se HTTP-triggere i aksjon.
exports.helloWorld = functions.https.onRequest ((request, response) => response.send ("Hei fra Firebase!"););
Kjør følgende for å distribuere funksjonen til skyen:
Firebase distribuere - bare funksjoner
Når distribusjonen er fullført, bør den vise deg nettadressen hvor funksjonen har blitt distribuert:
Få tilgang til denne nettadressen fra nettleseren din for å se produksjonen "Hello from Firebase!"
Legge til serverkoden
Nå er du klar til å legge til koden for å implementere push notifikasjoner. Først legger du til koden for serverkomponenten, deretter koden for appen.
Åpne funksjoner / index.js fil og tøm innholdet.
Oppretting av brannbasefunksjonen
Importer Firebase-pakkene du trenger:
const functions = krever ('firebase-funksjoner'); // for å lytte til http triggers const admin = krever ('firebase-admin'); // for tilgang til realtidsdatabasen admin.initializeApp (functions.config (). firebase); // initialiser Firebase Admin SDK
Opprett init_push funksjon. Vær oppmerksom på at HTTP-utløseren kalles for enhver forespørselsmetode, så du må filtrere etter forespørselsmetoden du vil behandle. I dette tilfellet vil vi bare behandle POST forespørsler. Vi forventer at appen skal sende inn id, trinn, og friend_ids som forespørsel data.
exports.init_push = functions.https.onRequest ((forespørsel, svar) => if (request.method == 'POST') var id = request.body.id; // ID av brukeren som gjorde forespørselen ( Firebase Auth ID) var trinn = parseInt (request.body.steps); // siste trinn, ikke innspilt ennå var friend_ids = request.body.friend_ids.split (','); friend_ids.push (id); // også inkludere ID for den gjeldende brukeren // neste: legg til kode for å få bruker- og vennedataene);
Få bruker- og vennedata
Deretter spør Firebase-databasen for å sjekke om bruker-IDen eksisterer. Dette tjener som en måte å sikre sluttpunktet på, så det er ikke bare noen som kan utløse pushvarsler. (Selvfølgelig bør en ekte app ha mye bedre back-end-sikkerhet, slik at brukerne ikke kan spoofe sine egne data eller data fra noen andre.)
Hvis brukeren eksisterer, spør databasen igjen slik at den returnerer alle brukerne. Merk at Firebase for øyeblikket ikke gir en måte å returnere poster basert på en rekke IDer, så vi må selv filtrere de aktuelle dataene:
admin.database () .ref ('/ users') .orderByChild ('id') .limitToFirst (1) .equalTo (id) .once ('value') .Til (snapshot => var user_data = snapshot.val (), hvis (user_data) // få alle brukere fra databasen admin.database () .ref ('/ users') .once ('verdi'). deretter (snapshot => // neste: legg til kode for får den nåværende brukerens data og vennens data;);
Deretter sløyfe gjennom resultatene som returneres fra Firebase, og opprett et nytt utvalg som huser friends_data. Når dette er gjort, sorterer du arrayet i henhold til antall trinn av hver bruker. Den med det høyeste antall trinn har den første indeksen.
var friends_data = []; var current_user_data = null; var notification_data = ; var has_notification = false; var brukere = snapshot.val (); for (var nøkkel til brukere) var user_id = users [key] .id; hvis (friend_ids.indexOf (user_id)! = -1 && id! = user_id) // brukerens nåværende venner friends_data.push (brukere [nøkkel]); annet hvis (id == user_id) // den nåværende brukeren current_user_data = brukere [nøkkel]; // sorter i synkende rekkefølge med antall trinn var sorted_friends_data = friends_data.sort (funksjon (a, b) retur b.steps - a.steps;); // neste: legg til kode for å bygge meldings nyttelast
Konstruer varselbelastningen
Nå er vi klare til å avgjøre hvem som vil motta varselet og konstruere nyttelastet for varsling. Hvem er i første omgang? Er det den nåværende brukeren eller en av brukerens venner? Siden den nåværende brukeren også har brutt sin egen rekord når de bryter den samlede oversikten over den som er i første omgang, må vi bare sjekke om denne posten er brutt.
hvis (trinn> sorted_friends_data [0] .steps) // varsle venn som ble overhalet var diff_steps = trinn - sorted_friends_data [0] .steps; melding_data = nyttelast: tittel: 'En av vennene dine slo posten din', kropp: 'Dessverre, din venn' + current_user_data.user_name + 'bare overtok deg med' + diff_steps + 'steps', device_token: sorted_friends_data [ 0] .device_token; has_notification = true; annet hvis (trinn> current_user_data.steps) // varsle nåværende bruker var diff_steps = trinn - current_user_data.steps; notification_data = nyttelast: title: 'Du slo rekord!', kropp: 'Gratulerer! Du slår din nåværende rekord med '+ diff_steps +' steps! ' , device_token: current_user_data.device_token; has_notification = true; // next: legg til kode for å sende push notifikasjon
Sende varslingen
Endelig send ut varselet:
hvis (has_notification) var nyttelast = varsel: notification_data.payload; // send push melding admin.messaging (). sendToDevice (notification_data.device_token, nyttelast) .then (funksjon (res) response.send (JSON.stringify ('has_notification': true); // informer appen at et varsel ble sendt) .catch (funksjon (feil) response.send (JSON.stringify (error)); // send push varslingsfeilen til appen); ellers response.send (JSON.stringify ('has_notification': false)); // informer appen om at et varsel ikke ble sendt
Oppdaterer App-koden
Tidligere opprettet du appen slik at den kunne motta push-varsler. Denne gangen legger du til kode slik at appen din kan behandle disse pushvarslene og vise dem til brukeren.
Motta Push Notifications
Det første du må gjøre for å motta push-varsler, er å oppdatere firebase.init () funksjon for å inkludere en lytter for å motta enhetstoken:
onPushTokenReceivedCallback: funksjon (token) // midlertidig lagre det til programinnstillinger til det tidspunktet // brukeren logger på for første gang applicationSettings.setString ('device_token', token); ,
Denne funksjonen utføres bare en gang, så du må lagre token lokalt ved hjelp av programinnstillinger. Senere vil dette tillate oss å få enhetstoken når brukeren logger på for første gang. Hvis du fortsatt husker fra den forrige opplæringen, lagrer vi brukerens data til Firebase første gangen de logger på.
Deretter kan du legge til lytteren når meldinger mottas. Dette vil vise en varslingsboks som bruker tittel og kropp av meldingen som innholdet:
Firebase Cloud Messaging krever enhetstoken når du sender ut en push-melding til en bestemt enhet. Siden vi allerede bruker Firebase, lagrer vi bare enhetstoken sammen med brukerdataene. For det må du redigere koden for å lagre brukerens data for å inkludere enhetstoken som vi fikk tidligere:
hvis (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;
Utløsende Push Notifications
Push Notifications utløses når en av to ting skjer:
når brukeren bryter sin nåværende rekord
når en av brukerens venner bryter opp og går til første plass
Den første er enkel, så det er egentlig ikke behov for ekstra oppsett. Men for den andre, må du gjøre litt arbeid. Først må du redigere koden for når auth staten endres. Like etter å ha hentet venn IDene fra Facebook-resultatet, må du lagre venn-IDene ved hjelp av programinnstillinger.
// utvinning av vennens ID fra Facebook-resultatet var friends_ids = r.data.map (funksjon (obj) return obj.id;); // lagre vennen ID-er applicationSettings.setString ('friends_ids', JSON.stringify (friends_ids)); friends_ids.push (bruker [user_key] .id-);
Oppdater deretter koden for når brukeren slutter å spore sin tur. Rett etter koden for å bygge opp brukerdataene for å oppdatere brukeren, få vennens ID-er fra programinnstillinger og inkludere den i objektet som inneholder forespørseldataene for å utløse push-varslingen.
// konstruere brukerdata for å oppdatere brukerens avstand og trinn var user_key = applicationSettings.getString ('user_key'); var user = applicationSettings.getString ('bruker'); var user_data = JSON.parse (bruker); user_data [user_key] .distance = total_distance; user_data [user_key] .steps = total_steps; // få venns ID 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;
Gjør forespørselen til Firebase Cloud Functions-endepunktet du opprettet tidligere. Når et suksessrespons er returnert, vil kun brukerens data bli oppdatert i Firebase-databasen.
http.request (url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", metode: "POST", overskrifter: "Content-Type": "application / json", innhold : JSON.stringify (request_data)). Deretter (funksjon (svar) var statusCode = response.statusCode; hvis (statusCode == 200) // oppdater brukerens data på Firebase firebase.update ('/ users', user_data );, funksjon (e) console.log ('Feil oppstod under initiering av push:', e););
Testing Push Notifications
Du kan teste sending av push-varsler ved først å avinstallere appen fra emulatoren eller enheten. Dette gjør det mulig for oss å utløse funksjonen for å få enhetstoken. Husk å legge til console.log å skrive ut enhetstoken:
Når enhetstokenet sendes ut i NativeScript-konsollen, kopierer du det, klikker du på database menyen på Firebase app-dashbordet, og legg det til som enhetstoken til alle brukerne av appen. Bruk device_token som eiendomsnavnet.
For å utløse push notifikasjonen, kan du bruke krøll for å lage en POST forespørsel til Firebase Function-endepunktet:
curl -X POST -H "Innholdstype: application / json" YOUR_FIREBASE_FUNCTION_ENDPOINT -d '"id": "ID OF A FIREBASE USER", "trinn": NUMBER_OF_STEPS, "friend_ids": "COMMA, SEPARATED, FIREBASE, USER_IDs "'
Hvis du ikke har krøll installert, kan du bruke Postman App til å sende forespørselen. Bruk følgende innstillinger for forespørselen:
Forespørselsmetode:POST
URL: Ditt Firebase-funksjonens sluttpunkt
Headers Key:Innholdstype
Headers Verdi:application / json
Kropp:
"id": "ID OF A FIREBASE USER", "trinn": NUMBER_OF_STEPS, "friend_ids": "COMMA, SEPARATED, FIREBASE, USER_IDs"
Når du har utløst en gang, ser du en utgang som ligner på følgende:
Hvis appen ikke er åpen for øyeblikket, ser du varselet i varslingsområdet:
Konklusjon
Gratulerer! Du har endelig fullført treningsprogrammet. I løpet av fire opplæringsprogrammer har du bygget en NativeScript-app som bruker Google Maps, SQLite, Firebase Realtime-database og Firebase Cloud Messaging. Nå har du et ganske godt grunnlag for å bygge NativeScript-apper som bruker disse teknologiene.
For å lære mer om NativeScript eller andre mobile plattformer på tvers av plattformer, sørg for å sjekke ut noen av våre andre kurs og opplæringsprogrammer her på Envato Tuts+!
Share
Accentsconagua
