Share
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 hvordan du legger til Facebook-innlogging på NativeScript-appen din. Du lærer også hvordan du bruker Firebase til å lagre data i gangsøkter i treningsappen.
Plukk opp fra den forrige opplæringen, la oss legge til innholdet for den sosiale kategorien. Som standard vises en knapp for innlogging med Facebook slik:
Når en bruker logger på for første gang, ber Facebook-appen om tillatelse til å få tilgang til den offentlige profilen og e-postadressen:
Det ber også om vennelisten som en tillatelse.
Når brukeren er logget inn, vises følgende skjermbilde:
Det er her informasjonen for den innloggede brukeren og topplisten for gangavgangene vises. Vær oppmerksom på at bare den siste gangsøkten er registrert.
Hvis du har fulgt det forrige innlegget i denne serien, kan du på SQLite 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 prosjektet ditt app mappe.
tns lage fitApp --appid "com.yourname.fitApp"
Deretter må du også installere geolocation, Google Maps og SQLite plugins:
tns plugin legg til nativcript-geolocation tns plugin legg til nativescript-google-maps-sdk tns plugin legg til nativescript-sqlite
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 denne tidligere opplæringen.
Etter det må du også installere fecha, et bibliotek for formatering datoer:
npm installere - lagre fecha
Når alt er gjort, bør du være klar til å følge med denne opplæringen.
Du kan kjøre prosjektet ved å kjøre tns kjøre android. Men siden denne appen vil bruke 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.
Det første du må gjøre når du arbeider med Firebase, er å lage en Firebase-app. Du kan gjøre det ved å gå til console.firebase.com og klikke på Legg til prosjekt. Skriv inn navnet på prosjektet og klikk på Create prosjektet knapp. Pass på at navnet på prosjektet er det samme som navnet på appen. I dette tilfellet er app-ID-en com.yourname.fitApp så navnet på appen er fitApp.
Når appen er opprettet, blir du omdirigert til appens dashboardside. Derfra kan du klikke på Legg til Firebase i Android-appen din, skriv inn app-IDen, og klikk på Registrer App knapp.
Deretter laster du ned google-services.json filen og kopier den til app / App_Resources / android katalogen. Den filen inneholder alle innstillingene som appen trenger for å kommunisere med Firebase.
Det neste trinnet som er oppgitt i Firebase-dashbordet, er å inkludere Firebase SDK. Men det er allerede gjort i plugin, så vi trenger ikke lenger å gjøre det.
Siden vi skal bruke Facebook-innlogging, må vi også lage en Facebook-app. Gå til developers.facebook.com og opprett en ny Facebook-app:
Når appen er opprettet, blir du omdirigert til appens dashbord. Derfra, klikk på + Legg til produkt menyen og velg Facebook Logg inn.
Under Klient OAuth-innstillinger, aktiver alt utenom Force Web OAuth-reauthentication og Logg inn fra enheter. For Gyldig OAuth-omdirigering av URIer, Du kan få det ved å gå tilbake til Firebase dashbordet, klikke på Godkjenning, og muliggjør Facebook som en godkjenningsmetode:
Før du kan aktivere det, må du angi Facebook app ID og app hemmelig nøkkel. Du kan få det fra dashbordet til Facebook-appen du opprettet tidligere.
Når det er gjort, klikk på Lagre og kopier OAuth omdirigere URI over til Facebook-appinnstillingene. Ikke glem å lagre endringene.
Deretter må du også legge til Android som en plattform. Du kan gjøre det ved å gå til grunn~~POS=TRUNC Innstillinger og klikk på Legg til plattform:
Sett com.yourname.fitApp som verdien for Google Play pakke navn og com.tns.NativeScriptActivity for klassenavnet.
Vær oppmerksom på at hvis du skal frigjøre appen til appbutikken senere, må du generere en hash for appens .apk fil og legg til den under nøkkel hashes felt. Vær også oppmerksom på at du bare kan bruke Facebook-utviklerkontoen som du brukte til å lage appen for testing. Hvis du vil legge til andre Facebook-kontoer for testing, kan du legge dem til under Oles.
For å integrere Firebase må vi installere Firebase-plugin for NativeScript. Dette gjør det enklere å implementere Facebook-innlogging og sanntidsdatabasefunksjonen i Firebase:
tns plugin legge til nativcript-plugin-firebase
Når det er ferdig med å installere, skal installatøren stille deg noen spørsmål angående Firebase-funksjonene du vil bruke i appen. Svar ja for Facebook-innlogging og Nei for resten.
Du må la appen vite hvilken Facebook-app den skal snakke med. Du kan gjøre det ved å åpne app \ App_Resources \ Android \ AndroidManifest.xml fil og legge til
Deretter oppretter du en app \ App_Resources \ Android \ verdier \ facebooklogin.xml fil og legg til følgende:
YOUR_FACEBOOK_APP_ID
Pass på å erstatte YOUR_FACEBOOK_APP_ID med app-IDen til Facebook-appen du opprettet tidligere.
Hvis du får byggefeil etter at du har installert pluginet, må du sjekke Kjente problemer på Android delen i repoens README. Hvis det spesifikke problemet ditt ikke er der, kan du prøve å grave gjennom problemsiden.
For meg var det viktigste problemet jeg hadde, et kompatibilitetsproblem med Google Maps-plugin. Siden plugin også bruker Google Play Services, var det en konflikt med ulike versjoner som ble brukt. For å løse det måtte jeg åpne app / App_Resources / Android / app.gradle fil og spesifiser Google Play Services-versjonen som skal brukes:
android // default config here project.ext googlePlayServicesVersion = "11.0. +"
På tidspunktet for skrivingen av denne opplæringen, er den på 11,0. Men sørg for å sjekke hvilken versjon som for øyeblikket er installert for deg via Android SDK.
Når det er gjort, må du avinstallere android plattformen (tns plattform fjerne android) og prøv å kjøre appen igjen (tns kjøre android).
Hvis det ikke virker for deg, og du fortsatt får den samme byggfeilen, kan det hende du må starte over alt ved å lage et nytt prosjekt. Men denne gangen, prøv å installere Firebase-pluginet før Google Maps-plugin-modulen. Deretter endres den nødvendige konfigurasjonen før du prøver å kjøre appen.
Nå er vi klare til å legge til koden. Vi legger først til XML, deretter JavaScript, og til slutt CSS-koden.
Vi jobber primært innenfor sosialt flippevisning. Først legger du til oppslaget for å vise informasjonen for den innloggede brukeren, samt en knapp for å logge ut:
Nedenfor er oppslaget for å vise topplaten. Dette løper gjennom friends_data for å vise brukernavn, avstand og trinn som er laget av brukerens venner, samt brukeren.
Hvis ingen bruker er logget inn, viser vi knappen for å logge inn med Facebook:
Åpne Hoved-view-model.js fil og legg til følgende under koden for import av fecha-biblioteket:
Accentsconagua
var fecha = krever ('fecha'); var firebase = krever ("nativescript-plugin-firebase"); var http = krever ("http"); var applicationSettings = krever ("programinnstillinger");Vi bruker nativescript-plugin-Fire å snakke med Firebase, http å gjøre HTTP-forespørsler til Facebooks Graph API, og applikasjon innstillinger å fortsette brukerens innloggingsdata.
Deretter skal du initialisere Firebase med i det() funksjon. Dette aksepterer et objekt som inneholder alternativer for de forskjellige funksjonene som støttes av Firebase (for eksempel autentisering, sanntidsdatabase, skymeldinger).
Nedenfor legger vi til fortsette alternativet, noe som gjør at Firebase lagrer data lokalt, slik at appen fortsatt kan brukes mens du er offline. Senere legger vi til lytteren når autentiseringsstatusen endres (når brukeren logger på eller logger ut av appen).
firebase.init (vedvarer: true, // add later: kode for å lytte når auth status endres). deretter (funksjon (forekomst) console.log ("firebase.init done");, funksjon console.log ("firebase.init error:" + feil););Deretter legger du til koden som skal utføres når brukeren tapper på knappen for å logge inn på Facebook. Dette bruker Logg Inn funksjon, som aksepterer et objekt som inneholder type og facebookOptions.
De type er autentiseringsmetoden som skal brukes til å logge inn. I dette tilfellet er det Facebook. facebookOptions er et objekt som inneholder en oppstilling som heter omfang. Elementene i denne gruppen er tillatelsene du vil at appen skal be om fra brukeren.
Når brukeren har logget på og godkjent alle tillatelsene som blir forespurt, løser løftet og utfører den første funksjonen som er sendt til deretter(). Facebook-brukerdetaljene er bestått som et argument for denne funksjonen, men det eneste vi trenger er tilgangstoken. Vi kan bruke dette senere til å gjøre forespørsler til Facebooks Graph API for å få mer informasjon.
ViewModel.loginFacebook = funksjon () firebase.login (type: firebase.LoginType.FACEBOOK, facebookOptions: scope: ['public_profile', 'email', 'user_friends']) deretter (funksjon (fb_result) var fb_access_token = fb_result.providers [1] .token; // next: legg til kode for å sjekke om brukeren er ny eller ikke, funksjon (err) console.log ('feil logging inn på facebook:', feil); ); Deretter sender vi en spørring til Firebase-databasen for å sjekke om brukeren allerede eksisterer eller ikke. For dette bruker vi spørsmål() metode. Dette aksepterer funksjonen som skal utføres når et svar returneres som det første argumentet. Det andre argumentet er banen der spørringen utføres, og den tredje er spørringen selv.
Hvis brukeren allerede eksisterer, spørsmål() vil returnere brukerens data. Vi lagrer dataene lokalt ved hjelp av programinnstillinger. Vi vil trenge å få tilgang til disse dataene senere når vi lytter etter auth statusendringer, og når vi oppdaterer den siste gangavstanden til brukeren på Firebase.
firebase.query (funksjon (firebase_result) if (! firebase_result.error) if (firebase_result.value == null) // brukeren eksisterer ikke ennå // neste: legg til kode for lagring av data for ny bruker // brukeren eksisterer allerede for (var user_key i firebase_result.value) // lagre brukerens data lokalt programSettings.setString ('user_key', user_key); applicationSettings.setString ('bruker', JSON.stringify (firebase_result.value)) ; applicationSettings.setString ('fb_token', fb_access_token);, '/ users', singleEvent: true, // for å sjekke om verdien eksisterer (returnere hele data) rekkefølgeBy: // eiendommen i hver av objektene for å utføre søketypen: firebase.QueryOrderByType.CHILD, verdi: 'uid', rekkevidde: // sammenligning operatortype: firebase.QueryRangeType.EQUAL_TO, verdi: fb_result.uid, grense: // grense for å bare returnere den første resultattypen: firebase.QueryLimitType.FIRST, verdi: 1);La oss nå legge til koden for å lagre dataene for en ny bruker. Begynn med å opprette objektet som inneholder brukerdataene. Deretter gjør du en forespørsel til Facebooks Graph API for å få brukerens Facebook ID (som bare gjelder for denne bestemte appen).
Senere bruker vi denne ID-en for å sjekke om en bestemt Firebase-bruker er en venn av den nåværende brukeren. Firebase returnerer ikke denne IDen når du logger på, og derfor må vi lage en separat forespørsel.
Når et svar er returnert, bruker vi Firebase trykk() metode for å lagre brukerens data i / brukere sti. Dette returnerer nøkkelen som tjener som ID for denne bestemte brukeren. Vi skal bruke den senere for å oppdatere brukerens siste gangssesjon. Derfor må vi også lagre det lokalt sammen med brukerens data og Facebook-tilgangstoken.
var user_data = 'uid': fb_result.uid, 'user_name': fb_result.name, 'profile_photo': fb_result.profileImageURL; http.getJSON ('https://graph.facebook.com/me?access_token=' + fb_access_token) .then (funksjon (r) user_data.id = r.id; // facebook bruker ID for dette bestemte app // opprett ny bruker firebase.push ('/ users', user_data) .then (funksjon (resultat) var bruker = ; bruker [result.key] = user_data; // nøkkelen er eiendommen som inneholder brukerens data // lagre brukerens data lokalt programSettings.setString ('user_key', result.key); applicationSettings.setString ('bruker', JSON.stringify (bruker)); applicationSettings.setString ('fb_token', fb_access_token);););Nå som vi har lagt til koden for å logge en bruker inn, er neste trinn å gå tilbake til firebase.init () ring og legg til onAuthStateChanged. Denne funksjonen blir utført hver gang auth status endres (når en bruker logger inn eller ut). Hvis en bruker er logget inn, vil vi oppdatere brukergrensesnittet for å vise gjeldende bruker.
Vær oppmerksom på at vi pakker det innvendig setTimeout () med en fem sekunders forsinkelse fordi det tar noen sekunder etter at du har logget inn for brukerens data (Firebase-brukernøkkel, Firebase-bruker og Facebook Access Token) for å være tilgjengelig.
vedvarer: sant, onAuthStateChanged: funksjon (data) if (data.loggedIn) // er en bruker logget på? setTimeout (funksjon () // Oppdater brukergrensesnitt for å vise gjeldende bruker viewModel.set ('is_loggedin', true); viewModel.set ('profile_photo', data.user.profileImageURL); viewModel.set ('user_name', data .user.name); // next: legg til kode for å få venneliste, 5000); Deretter legger vi til koden for å få brukerens venner. Grafer API returnerer ID og navn for hver av brukerens venner, men vi trenger bare IDene. Vi må også trykke IDen for den nåværende brukeren siden vi skal vise den i topplisten også.
var user_key = applicationSettings.getString ('user_key'); var user = JSON.parse (applicationSettings.getString ('bruker')); var fb_token = applicationSettings.getString ('fb_token'); http.getJSON ('https://graph.facebook.com/me/friends?access_token=' + fb_token) .then (funksjon (r) // pakke ID-er var friends_ids = r.data.map (funksjon (obj ) return obj.id;); friends_ids.push (bruker [user_key] .id); // også trykk ID for den aktuelle brukeren // neste: legg til kode for å lytte etter endringer i databasen, funksjon (e ) console.log ('err:', e););Deretter legger du til koden for å lytte etter endringer i databasen. Frem til nå har vi ikke virkelig implementert "sanntid" -delen av denne appen. Dette er tiden da vi endelig legger til det.
For dette bruker vi addValueEventListener () metode. Dette aksepterer funksjonen du vil utføre når en endring blir gjort til banen du angav som et andre argument. Hele verdien (resultat) sendes inn som et argument for denne funksjonen.
Det er virkelig ingen funksjonalitet for å angi en forespørsel for å bare filtrere resultatet med bestemte ID-er. Så bruker du en rekke venn-IDer (friends_ids), vi løp gjennom resultat og sjekk om den nåværende raden er den nåværende brukeren eller en av vennene sine. Først da skyver vi verdien for den nåværende raden. Derfra sorterer og formaterer vi bare dataene for visning i brukergrensesnittet.
firebase.addValueEventListener (funksjon (resultat) var friends_data = []; for (var rad i result.value) var friend = result.value [rad]; // se om nåværende rad er den nåværende brukeren eller en av deres venner hvis (friends_ids.indexOf (friend.id)! == -1) friends_data.push (result.value [rad]); // sorter data i synkende rekkefølge av trinnene var sorted_friends_data = friends_data.sort (funksjon (a, b) return b.steps - a.steps;); // format dataene for å vise var formatted_sorted_friends_data = sorted_friends_data.map (funksjon (obj, nøkkel) var updated_obj = obj; updated_obj.distance = commafy obj.distance) + 'm'; updated_obj.steps = commafy (obj.steps); return updated_obj;; // oppdater UI viewModel.set ('friends_data', formatted_sorted_friends_data);, "/ users");Når brukeren slutter å spore sin nåværende posisjon, oppdaterer vi avstand og trinn av brukeren på Firebase:
viewModel.set ('går', går); hvis (walks.length> 0) viewModel.set ('has_walks', true); 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; // Oppdater brukerens data firebase.update ('/ users', user_data); Deretter legger du til koden for å logge brukeren ut. Dette tilbakestiller brukergrensesnittet til en tilstand der brukeren ikke er logget inn, og den fjerner også de lokale dataene.
viewModel.logout = funksjon () firebase.logout (); viewModel.set ('is_loggedin', false); viewModel.set ('profile_photo', null); viewModel.set ('user_name', null); applicationSettings.clear (); Til slutt åpner du app / app.css fil og legg til følgende under eksisterende kode:
.btn-facebook bakgrunnsfarge: # 365899; farge: #fff; .btn-logout bakgrunnsfarge: rød; farge: #fff; .profile text-align: center;
Det er det! I denne opplæringen har du lært hvordan du integrerer Facebook-pålogging og Firebase i en NativeScript-app. Som du kanskje har lagt merke til i dokumentasjonen for NativeScript Firebase-plugin, kan du faktisk gjøre mye mer med denne plugin. Faktisk vil vi bruke funksjonen Cloud Messaging for å implementere den siste funksjonen for denne appen: Push Notifications. Så hold deg innstilt for det!
Og i mellomtiden, sjekk ut noen av våre andre innlegg på NativeScript og mobilplattform på mobilplattform!
