Share
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 come aggiungere il login di Facebook alla tua app NativeScript. Imparerai anche come utilizzare Firebase per memorizzare i dati delle sessioni di camminata nell'app fitness.
Ritornando al tutorial precedente, aggiungiamo ora il contenuto per la scheda social. Per impostazione predefinita, un pulsante per l'accesso con Facebook viene visualizzato in questo modo:
Quando un utente effettua il login per la prima volta, l'app di Facebook richiede l'autorizzazione per accedere al profilo pubblico e all'indirizzo email:
Richiede anche l'elenco degli amici come autorizzazione aggiuntiva.
Una volta che l'utente ha effettuato l'accesso, viene visualizzata la seguente schermata:
Qui è dove vengono visualizzate le informazioni per l'utente attualmente loggato e la classifica per le sessioni a piedi. Si noti che viene registrata solo l'ultima sessione di camminata.
Se hai seguito il post precedente in questa serie, su SQLite, puoi semplicemente utilizzare lo stesso progetto e creare le funzionalità che verranno aggiunte in questo tutorial. Altrimenti, puoi creare un nuovo progetto e copiare i file di avviamento nei tuoi progetti App cartella.
tns crea fitApp --app "com.yourname.fitApp"
Dopodiché, dovrai anche installare la geolocalizzazione, Google Maps e i plugin SQLite:
tns plug-in aggiungi nativescript-geolocalizzazione tns plug-in aggiungi nativescript-google-maps-sdk tns plug-in aggiungi nativescript-sqlite
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 in questo tutorial precedente.
Dopodiché, devi anche installare fecha, una libreria per le date di formattazione:
installazione npm --salva fecha
Una volta terminato, dovresti essere pronto a seguire questo tutorial.
È possibile eseguire il progetto eseguendo tns esegue Android. Ma dal momento che questa app utilizzerà la 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.
La prima cosa che devi fare quando lavori con Firebase è creare un'app Firebase. Puoi farlo andando su console.firebase.com e cliccando su Aggiungi progetto. Inserire il nome del progetto e fare clic sul Create project pulsante. Assicurati che il nome del progetto sia lo stesso del nome dell'app. In questo caso, l'ID dell'app è com.yourname.fitApp quindi il nome dell'app è fitApp.
Una volta creata l'app, verrai reindirizzato alla pagina della dashboard dell'app. Da lì puoi fare clic su Aggiungi Firebase alla tua app per Android, inserisci l'ID app e fai clic su Registrati App pulsante.
Quindi, scarica il google-services.json archiviare e copiarlo sul app / App_Resources / Android directory. Quel file contiene tutte le impostazioni necessarie all'app per comunicare con Firebase.
Il prossimo passo indicato nel dashboard di Firebase è quello di includere l'SDK di Firebase. Ma questo è già fatto nel plugin, quindi non dobbiamo più farlo.
Dal momento che useremo il login di Facebook, dobbiamo anche creare un'app Facebook. Vai a developers.facebook.com e crea una nuova app di Facebook:
Una volta creata l'app, verrai reindirizzato alla dashboard dell'app. Da lì, fare clic su + Aggiungi prodotto menu e selezionare Accesso a Facebook.
Sotto il Cliente Impostazioni OAuth, abilitare tutto tranne Forza la riautenticazione di OAuth Web e Accedi dai dispositivi. Per il URI di reindirizzamento OAuth validi, puoi ottenerlo tornando alla dashboard di Firebase, facendo clic su Autenticazione, e abilitante Facebook come metodo di autenticazione:
Prima di poterlo abilitare, devi inserire l'ID app di Facebook e la chiave segreta dell'app. Puoi ottenerlo dalla dashboard dell'app Facebook che hai creato in precedenza.
Una volta fatto, fai clic su Salvare e copia il OAuth reindirizza l'URI oltre alle impostazioni dell'app Facebook. Non dimenticare di salvare le modifiche.
Successivamente, devi anche aggiungere Android come piattaforma. Puoi farlo andando al Di base Impostazioni e facendo clic su Aggiungi piattaforma:
Impostato com.yourname.fitApp come valore per il nome del pacchetto di Google Play e com.tns.NativeScriptActivity per il nome della classe.
Tieni presente che se successivamente rilascerai l'app nell'app store, dovrai generare un hash per l'app .apk file e aggiungilo sotto il hash chiave campo. Si noti inoltre che per i test, sarà possibile utilizzare l'account sviluppatore di Facebook che è stato utilizzato per creare l'app. Se si desidera aggiungere altri account Facebook per il test, è possibile aggiungerli sotto Oles.
Per integrare Firebase, è necessario installare il plug-in Firebase per NativeScript. Ciò semplifica l'implementazione dell'accesso a Facebook e la funzionalità del database in tempo reale in Firebase:
Il plugin tns aggiunge nativescript-plugin-firebase
Una volta completata l'installazione, il programma di installazione ti farà alcune domande riguardanti le funzionalità di Firebase che utilizzerai nell'app. Risposta sì per il login di Facebook e no per il resto.
Devi far sapere all'app quale app di Facebook con cui parlerà. Puoi farlo aprendo il app \ App_Resources \ Android \ AndroidManifest.xml file e aggiungendo
Quindi, crea un app \ App_Resources \ Android \ valori \ facebooklogin.xml file e aggiungere il seguente:
YOUR_FACEBOOK_APP_ID
Assicurati di sostituire YOUR_FACEBOOK_APP_ID con l'ID app dell'app Facebook che hai creato in precedenza.
Se ricevi errori di compilazione dopo aver installato il plugin, assicurati di controllare il Problemi noti su Android sezione nel README del repository. Se il tuo problema specifico non è presente, prova a esaminare la pagina dei problemi.
Per quanto mi riguarda, il problema principale che avevo era un problema di compatibilità con il plug-in di Google Maps. Poiché tale plug-in utilizza anche Google Play Services, si è verificato un conflitto con l'utilizzo di versioni diverse. Per risolvere ciò, ho dovuto aprire il app / App_Resources / Android / app.gradle file e specifica la versione di Google Play Services da utilizzare:
android // config di default qui project.ext googlePlayServicesVersion = "11.0. +"
Al momento della stesura di questo tutorial, è alle 11.0. Ma assicurati di controllare quale versione è attualmente installata per te tramite l'SDK di Android.
Una volta fatto, devi disinstallare la piattaforma Android (la piattaforma tns rimuove Android) e provare a eseguire nuovamente l'app (tns esegue Android).
Se ciò non funziona per te e stai ancora ricevendo lo stesso errore di compilazione, potresti dover ricominciare da capo creando un nuovo progetto. Ma questa volta, prova ad installare il plug-in Firebase prima del plug-in di Google Maps. Quindi apportare le modifiche di configurazione necessarie prima di provare a eseguire l'app.
Ora siamo pronti per aggiungere il codice. In primo luogo aggiungeremo l'XML, quindi il codice JavaScript e infine il codice CSS.
Lavoreremo principalmente nella visualizzazione dei tab sociali. Innanzitutto, aggiungi il markup per la visualizzazione delle informazioni per l'utente attualmente loggato e un pulsante per la disconnessione:
Di seguito è riportato il markup per la visualizzazione della classifica. Questo loop attraverso il friends_data per visualizzare il nome utente, la distanza e i passaggi fatti dagli amici dell'utente e dall'utente.
Se nessun utente è attualmente connesso, visualizziamo il pulsante per l'accesso con Facebook:
Apri il main-view-model.js file e aggiungi quanto segue sotto al codice per importare la libreria fecha:
Accentsconagua
var fecha = require ('fecha'); var firebase = require ("nativescript-plugin-firebase"); var http = require ("http"); var applicationSettings = require ("impostazioni dell'applicazione");Stiamo usando nativescript-plugin-Firebase parlare con Firebase, http per fare richieste HTTP all'API Graph di Facebook, e impostazioni dell'applicazione per mantenere i dati di accesso dell'utente.
Successivamente, inizializza Firebase con dentro() funzione. Questo accetta un oggetto che contiene opzioni per le diverse funzionalità supportate da Firebase (ad esempio autenticazione, database in tempo reale, cloud).
Di seguito, stiamo aggiungendo il persistere opzione, che rende Firebase salva i dati localmente, quindi l'app può essere ancora utilizzata offline. Successivamente, aggiungeremo il listener per quando lo stato di autenticazione cambia (quando l'utente esegue l'accesso o esce dall'app).
firebase.init (persist: true, // aggiungi più tardi: codice per l'ascolto quando lo stato dell'autore cambia). then (function (instance) console.log ("firebase.init done");, function (errore) console.log ("errore firebase.init:" + error););Successivamente, aggiungi il codice che verrà eseguito quando l'utente tocca il pulsante per accedere a Facebook. Questo usa il accesso funzione, che accetta un oggetto contenente il genere e facebookOptions.
Il genere è il metodo di autenticazione da utilizzare per l'accesso. In questo caso, è Facebook. facebookOptions è un oggetto che contiene un array chiamato scopo. Gli elementi di questo array sono le autorizzazioni che l'app deve richiedere all'utente.
Una volta che l'utente ha effettuato l'accesso e ha accettato tutte le autorizzazioni richieste, la promessa risolve ed esegue la prima funzione passata a poi(). I dettagli dell'utente di Facebook vengono passati come argomento a questa funzione, ma l'unica cosa di cui abbiamo bisogno è il token di accesso. Possiamo utilizzarlo in seguito per effettuare richieste all'API Graph di Facebook per ottenere ulteriori informazioni.
viewModel.loginFacebook = function () firebase.login (type: firebase.LoginType.FACEBOOK, facebookOptions: scope: ['public_profile', 'email', 'user_friends']). then (function (fb_result) var fb_access_token = fb_result.providers [1] .token; // next: aggiungi codice per verificare se l'utente è nuovo o no, function (err) console.log ('errore di accesso a facebook:', err); ); Successivamente, invieremo una query al database Firebase per verificare se l'utente esiste già o meno. Per questo, usiamo il query () metodo. Questo accetta la funzione da eseguire quando viene restituita una risposta come primo argomento. Il secondo argomento è il percorso in cui viene eseguita la query e il terzo è la query stessa.
Se l'utente esiste già, query () restituirà i dati dell'utente. Quindi salviamo i dati localmente usando le impostazioni dell'applicazione. Avremo bisogno di accedere a questi dati più tardi quando ascolteremo le modifiche dello stato di autenticazione e quando aggiorneremo l'ultima sessione a piedi dell'utente su Firebase.
firebase.query (function (firebase_result) if (! firebase_result.error) if (firebase_result.value == null) // l'utente non esiste ancora // next: aggiungi il codice per salvare i dati per il nuovo utente else // utente esiste già per (var user_key in firebase_result.value) // salva localmente i dati dell'utente applicationSettings.setString ('user_key', user_key); applicationSettings.setString ('user', JSON.stringify (firebase_result.value)) ; applicationSettings.setString ('fb_token', fb_access_token);, '/ users', singleEvent: true, // per verificare se il valore esiste (restituisce l'intero dato) orderBy: // la proprietà in ogni degli oggetti in cui eseguire il tipo di query: firebase.QueryOrderByType.CHILD, valore: 'uid', intervallo: // il tipo di operatore di confronto: firebase.QueryRangeType.EQUAL_TO, valore: fb_result.uid, limite: // limita a restituire solo il primo tipo di risultato: firebase.QueryLimitType.FIRST, valore: 1);Ora aggiungiamo il codice per il salvataggio dei dati per un nuovo utente. Inizia creando l'oggetto che contiene i dati dell'utente. Quindi fai una richiesta all'API Graph di Facebook per ottenere l'ID di Facebook dell'utente (che è valido solo per questa specifica app).
In seguito, utilizzeremo questo ID per verificare se un utente Firebase specifico è un amico dell'utente corrente. Firebase non restituisce questo ID al momento dell'accesso, motivo per cui è necessario effettuare una richiesta separata.
Una volta restituita una risposta, utilizzeremo la base di Firebase Spingere() metodo per salvare i dati dell'utente nel file / utenti sentiero. Questo restituisce la chiave che funge da ID per questo specifico utente. Lo useremo in seguito per aggiornare l'ultima sessione di camminata dell'utente. Ecco perché abbiamo anche bisogno di salvarlo localmente insieme ai dati dell'utente e al token di accesso di Facebook.
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 (function (r) user_data.id = r.id; // ID utente facebook per questa app specifica // crea un nuovo utente firebase.push ('/ users', user_data) .then (function (result) var user = ; user [result.key] = user_data; // la chiave è la proprietà che contiene i dati dell'utente // memorizzare i dati dell'utente localmente applicationSettings.setString ('user_key', result.key); applicationSettings.setString ('user', JSON.stringify (user)); applicationSettings.setString ('fb_token', fb_access_token);););Ora che abbiamo aggiunto il codice per la registrazione di un utente, il passaggio successivo è tornare al firebase.init () chiama e aggiungi onAuthStateChanged. Questa funzione verrà eseguita ogni volta che lo stato di autenticazione cambia (quando un utente esegue l'accesso o l'uscita). Se un utente ha effettuato l'accesso, desideriamo aggiornare l'interfaccia utente per mostrare l'utente corrente.
Nota che lo stiamo avvolgendo setTimeout () con un ritardo di cinque secondi perché dopo pochi secondi dall'accesso i dati dell'utente (chiave utente Firebase, utente Firebase e token di accesso di Facebook) devono essere disponibili.
persist: true, onAuthStateChanged: function (data) if (data.loggedIn) // un utente ha effettuato l'accesso? setTimeout (function () // aggiorna l'interfaccia utente per visualizzare l'utente corrente viewModel.set ('is_loggedin', true); viewModel.set ('profile_photo', data.user.profileImageURL); viewModel.set ('user_name', data .user.name); // next: aggiungi il codice per ottenere la lista amici, 5000); Successivamente, aggiungiamo il codice per ottenere gli amici dell'utente. L'API grafico restituisce l'ID e il nome per ciascuno degli amici dell'utente, ma abbiamo solo bisogno degli ID. Dobbiamo anche inserire l'ID per l'utente corrente dal momento che lo mostreremo anche nella classifica.
var user_key = applicationSettings.getString ('user_key'); var user = JSON.parse (applicationSettings.getString ('user')); var fb_token = applicationSettings.getString ('fb_token'); http.getJSON ('https://graph.facebook.com/me/friends?access_token=' + fb_token) .then (function (r) // estrae la variabile ID friends_ids = r.data.map (function (obj ) return obj.id;); friends_ids.push (user [user_key] .id); // anche spinge l'ID per l'utente corrente // next: aggiungi il codice per ascoltare le modifiche nel database, function (e ) console.log ('err:', e););Successivamente, aggiungi il codice per ascoltare le modifiche nel database. Fino ad ora, non abbiamo davvero implementato la parte "in tempo reale" di questa app. Questo è il momento in cui finalmente lo aggiungiamo.
Per questo, usiamo il addValueEventListener () metodo. Questo accetta la funzione che si desidera eseguire quando viene apportata una modifica al percorso specificato come secondo argomento. L'intero valore (risultato) viene passato come argomento a questa funzione.
Non c'è davvero alcuna funzionalità per specificare una query per filtrare il risultato solo per ID specifici. Quindi, usando l'array di ID amici (friends_ids), passiamo attraverso il risultato e controlla se la riga corrente è l'utente corrente o uno dei loro amici. Solo allora inseriamo il valore per la riga corrente. Da lì, abbiamo solo ordinare e formattare i dati per la visualizzazione nell'interfaccia utente.
firebase.addValueEventListener (function (result) var friends_data = []; for (var row in result.value) var friend = result.value [row]; // controlla se la riga corrente è l'utente corrente o uno dei loro amici if (friends_ids.indexOf (friend.id)! == -1) friends_data.push (result.value [row]); // ordina i dati in ordine decrescente dei passi var sorted_friends_data = friends_data.sort (function (a, b) return b.steps - a.steps;); // formatta i dati per visualizzare var formatted_sorted_friends_data = sorted_friends_data.map (function (obj, key) var updated_obj = obj; updated_obj.distance = commafy ( obj.distance) + 'm'; updated_obj.steps = commafy (obj.steps); return updated_obj;); // aggiorna l'interfaccia utente viewModel.set ('friends_data', formatted_sorted_friends_data);, "/ users");Quando l'utente interrompe il monitoraggio della posizione corrente, aggiorniamo il file distanza e passaggi dell'utente su Firebase:
viewModel.set ('cammina', cammina); if (walks.length> 0) viewModel.set ('has_walks', true); 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; // aggiorna i dati dell'utente firebase.update ('/ users', user_data); Successivamente, aggiungi il codice per la registrazione dell'utente. Ciò ripristina l'interfaccia utente in uno stato in cui l'utente non ha effettuato l'accesso e cancella anche i dati locali.
viewModel.logout = function () firebase.logout (); viewModel.set ('is_loggedin', false); viewModel.set ('profile_photo', null); viewModel.set ('user_name', null); applicationSettings.clear (); Infine, apri il app / app.css file e aggiungi quanto segue sotto il codice esistente:
.btn-facebook background-color: # 365899; colore: #fff; .btn-logout background-color: red; colore: #fff; .profile text-align: center;
Questo è tutto! In questo tutorial hai imparato come integrare login Facebook e Firebase in un'app NativeScript. Come avrai notato nella documentazione del plugin NativeScript Firebase, puoi davvero fare molto di più con questo plugin. In effetti, utilizzeremo la sua funzione di Cloud Messaging per implementare l'ultima funzionalità di questa app: Notifiche push. Quindi rimanete sintonizzati per quello!
Nel frattempo, controlla alcuni dei nostri altri post su NativeScript e app mobili multipiattaforma!
