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 integrare un database SQLite nell'app per archiviare i dati localmente. In particolare, memorizzeremo i dati delle sessioni di camminata che abbiamo raccolto nel precedente tutorial.
Ritornando all'esercitazione precedente, aggiungerai una visualizzazione a schede per visualizzare le diverse parti dell'app. In precedenza la nostra app aveva appena avuto il puntamento pagina, quindi non abbiamo bisogno di schede. In questo post, aggiungeremo il passeggiate pagina. Questa pagina mostrerà le sessioni di camminata dell'utente. Un nuovo punto dati verrà aggiunto qui ogni volta che l'utente tiene traccia della sessione di camminata. Ci sarà anche una funzione per la cancellazione dei dati.
Ecco come apparirà l'output finale:
Se hai seguito il tutorial precedente sulla geolocalizzazione, 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é, devi anche installare la geolocalizzazione e i plugin di Google Maps:
tns plug-in aggiungi nativescript-geolocalizzazione tns plug-in aggiungi nativescript-google-maps-sdk
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 tutorial precedente.
Una volta finiti tutti questi, dovresti essere pronto a seguire questo tutorial.
È 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 tutorial precedente.
La prima cosa che devi fare per iniziare a lavorare con SQLite è installare il plugin:
Il plugin tns aggiunge nativescript-sqlite
Ciò consente di eseguire operazioni come la connessione a un database e l'esecuzione di operazioni CRUD (creazione, lettura, aggiornamento, eliminazione).
Apri il main-page.js file e importa il plugin SQLite:
Accentsconagua
var Sqlite = require ("nativescript-sqlite");Ora puoi connetterti al database:
var db_name = "walks.db"; new Sqlite (nome_db) .then (db => // next: crea una tabella per l'archiviazione dei dati sulle passeggiate, error => );
Il walks.db il file è stato creato dal terminale usando il toccare comando, quindi è solo un file vuoto. Copialo nel App cartella.
Se è collegato correttamente, verrà eseguita la funzione di risoluzione della promessa. Al suo interno, eseguiamo l'istruzione SQL per la creazione di passeggiate tavolo. Per semplificare le cose, tutto ciò che dobbiamo salvare è la distanza totale percorsa (in metri) e i passi totali, nonché i timestamp di inizio e fine.
db.execSQL ("CREATE TABLE IF NOT EXISTS cammina (id INTEGER PRIMARY KEY AUTOINCREMENT, total_distance INTEGER, total_steps INTEGER, start_datetime DATETIME, end_datetime DATETIME)"). then (id => page.bindingContext = createViewModel (db);, error => console.log ("CREATE TABLE ERROR", error););Una volta che la query viene eseguita correttamente, passiamo l'istanza del database (db) nel contesto della pagina. Questo ci permetterà di usarlo dal main-view-model.js file più tardi.
Ora siamo pronti per lavorare con i dati. Ma dal momento che lavoreremo con le date, dobbiamo prima installare una libreria chiamata fecha. Questo ci consente di analizzare e formattare facilmente le date:
installazione npm --salva fecha
Una volta installato, apri il main-view-model.js file e includi la libreria:
var fecha = require ('fecha');Il prossimo è il codice per verificare se la geolocalizzazione è abilitata. Innanzitutto, crea una variabile (walk_id) per memorizzare l'ID di un record di camminata. Ne abbiamo bisogno perché l'app inserirà immediatamente un nuovo record di cammino nel file passeggiate tabella quando l'utente inizia il rilevamento della posizione. walk_id memorizzerà l'ID generato automaticamente da SQLite in modo che saremo in grado di aggiornare il record una volta che l'utente interrompe il tracciamento.
var walk_id;
Quindi, prendi il mese e l'anno corrente. Lo useremo per interrogare la tabella in modo che restituisca solo i record che si trovano nello stesso mese e anno. Questo ci consente di limitare il numero di record visualizzati nell'interfaccia utente.
var month = fecha.format (new Date (), 'MM'); //e.g 07 var year = fecha.format (new Date (), 'YYYY'); //e.g 2017
Abbiamo anche bisogno di una variabile per memorizzare la data / ora di inizio. Lo useremo in seguito per aggiornare l'interfaccia utente. Questo perché stiamo interrogando la tabella una volta sola quando viene caricata l'app, quindi è necessario aggiornare manualmente l'interfaccia utente di tutti i nuovi dati che diventano disponibili. E poiché il timestamp iniziale avrà un valore solo quando l'utente inizia a monitorare, dobbiamo inizializzarlo al di fuori dell'ambito in modo che possiamo aggiornarlo o accedere al suo valore più tardi.
var st_datetime; // avvia datetime
Inizializza i dati delle camminate che verranno visualizzati nell'interfaccia utente:
var cammina = []; viewModel.walks = []; viewModel.has_walks = false;
Ottieni i dati dal passeggiate tabella utilizzando il tutti() metodo. Qui, forniamo il mese e l'anno come parametri di ricerca. Il strftime () la funzione viene utilizzata per estrarre il mese e la parte dell'anno del start_datetime.
db.all ("SELECT * FROM cammina WHERE strftime ('% m', start_datetime) ==? AND strftime ('% Y', start_datetime) ==? ORDER BY start_datetime DESC", [mese, anno]). (err, rs) => if (! err) // next: aggiorna l'IU con i dati di camminata);Una volta che viene restituita una risposta positiva, passiamo in rassegna il set di risultati in modo da poter formattare correttamente i dati. Si noti che gli indici in cui si accede ai singoli valori dipendono dalla struttura della tabella descritta in precedenza nella main-page.js file. La prima colonna è ID, la seconda è la distanza totale e così via.
I dati formattati vengono quindi inviati a passeggiate array e viene utilizzato per aggiornare l'interfaccia utente. has_walks è usato come interruttore per l'interfaccia utente in modo che possiamo mostrare o nascondere le cose in base al suo valore.
rs.forEach ((w) => let start_datetime = new Date (w [3]); let end_datetime = new Date (w [4]); cammina.push (start: fecha.format (start_datetime, 'MMM D , h: mm '), // eg 5 giugno, 5:30 fine: fecha.format (end_datetime,' h: mm a '), // eg 6:30 pm distance: commafy (w [1]) +' m ', // eg 2.000m steps: commafy (w [2]) // eg 2.300);); if (walks.length) viewModel.set ('has_walks', true); viewModel.set ('cammina', cammina);Questo fornirà i dati per il Visualizzazione elenco nel main-page.xml file:
Una volta che l'utente inizia a monitorare, impostare il datetime corrente come start_datetime e inserire i valori iniziali nella tabella usando il execSQL () funzione. Proprio come il tutti() funzione, si aspetta che la query SQL sia il primo argomento e un array di parametri come il secondo.
Se la query ha esito positivo, dovrebbe restituire l'ID generato automaticamente per il record inserito. Quindi lo assegniamo come valore per il walk_id quindi può essere utilizzato in seguito per aggiornare questo record specifico.
st_datetime = new Date (); var start_datetime = fecha.format (st_datetime, 'YYYY-MM-DD HH: mm: ss'); db.execSQL ("INSERT INTO cammina (total_distance, total_steps, start_datetime) VALUES (?,?,?)", [0, 0, start_datetime]) .then ((id) => walk_id = id;, (e ) => dialogs.alert (e.message););Una volta che l'utente interrompe il tracciamento, otteniamo nuovamente la data / ora corrente e la formattiamo di conseguenza per la memorizzazione:
var ed_datetime = new Date (); var end_datetime = fecha.format (ed_datetime, 'YYYY-MM-DD HH: mm: ss');
Dal momento che abbiamo ordinato i risultati dal più recente al meno recente, usiamo unshift () (invece di Spingere()) per aggiungere il nuovo elemento all'inizio del passeggiate schieramento.
walks.unshift (start: fecha.format (st_datetime, 'MMM D, h: mm'), fine: fecha.format (ed_datetime, 'h: mm a'), distanza: virgolafile (total_distance) + 'm', passi: commafy (total_steps)); viewModel.set ('cammina', cammina); if (walks.length> 0) viewModel.set ('has_walks', true); Dopo ciò, usiamo ancora una volta il execSQL () funzione per aggiornare il record che abbiamo inserito in precedenza:
db.execSQL ("UPDATE cammina SET end_datetime =?, total_steps =?, total_distance =? WHERE id =?", [end_datetime, total_steps, total_distance, walk_id]) .then ((err, id) => if (! err ) // todo: aggiungi codice per reimpostare l'interfaccia utente di monitoraggio qui);Assicurati di spostare il codice per reimpostare l'interfaccia utente di tracciamento (per reimpostare la distanza e i passaggi totali) all'interno della funzione di risoluzione della promessa in modo da poter facilmente verificare se la query di aggiornamento eseguita correttamente o no.
L'eliminazione dei dati viene effettuata facendo clic su Eliminare i dati pulsante sotto l'elenco dei dati della camminata:
...
Nel main-view-model.js file, aggiungere il codice per cancellare tutti i dati dal passeggiate tavolo. Se sei abituato a MySQL, ti starai chiedendo perché stiamo usando il ELIMINA query invece di TRONCARE per svuotare il tavolo. Bene, questo perché SQLite non ha il TRONCARE funzione. Ecco perché dobbiamo usare il ELIMINA query senza fornire una condizione in modo che eliminerà tutti i record attualmente presenti nella tabella.
viewModel.clearData = function () dialogs.confirm ("Sei sicuro di voler cancellare i tuoi dati?"). then ((agree) => if (agree) db.execSQL ("DELETE FROM walks", [ ]). then ((err) => if (! err) dialogs.alert ("I dati sono stati cancellati!"); walks = []; viewModel.set ('cammina', []); viewModel.set ('has_walks', false););); In questo tutorial, hai imparato come memorizzare localmente i dati nelle tue app NativeScript usando il plugin SQLite. Come hai visto, SQLite ti consente di riutilizzare le tue competenze SQL esistenti nella gestione di un database locale. È importante notare che non tutte le funzioni a cui sei abituato in MySQL sono supportate in SQLite. Quindi è sempre consigliabile consultare la documentazione se non si è certi che una determinata funzione sia supportata o meno.
Se vuoi conoscere altre opzioni per l'archiviazione dei dati nelle app NativeScript, ti consiglio di leggere questo articolo su Offline con NativeScript.
Nel post finale di questa serie, aggiungeremo notifiche push alla nostra app.
Nel frattempo, controlla alcuni dei nostri altri post su NativeScript e codifica mobile multipiattaforma.
Per un'introduzione completa a NativeScript, prova il nostro corso sui video Code a Mobile App con NativeScript. In questo corso, Keyvan Kasaei ti mostrerà passo passo come costruire una semplice applicazione. Lungo la strada, imparerai come implementare un semplice flusso di lavoro dell'app con le richieste di rete, un'architettura MVVM e alcuni dei più importanti componenti dell'interfaccia utente di NativeScript. Alla fine capirai perché dovresti prendere in considerazione NativeScript per il tuo prossimo progetto di app per dispositivi mobili.
