Share
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 învăța cum să integrați o bază de date SQLite în aplicație pentru a stoca date local. Mai exact, vom stoca datele privind sesiunile de mers pe care le-am adunat în tutorialul anterior.
Prin preluarea din tutorialul anterior, veți adăuga o vizualizare în file pentru a afișa diferitele porțiuni ale aplicației. Anterior, aplicația noastră avea doar Urmărirea pagină, deci nu am nevoie de file. În acest post, vom adăuga Walks pagină. Această pagină va afișa sesiunile de mers ale utilizatorului. Un nou punct de date va fi adăugat aici de fiecare dată când utilizatorul își urmărește sesiunea de mers pe jos. Va exista, de asemenea, o funcție pentru ștergerea datelor.
Iata ce va arata rezultatul final:
Dacă ați urmat tutorialul anterior despre geolocație, puteți pur și simplu să utilizați același proiect și să construiți funcțiile pe care le vom adăuga în acest tutorial. În caz contrar, puteți crea un nou proiect și copiați fișierele de pornire în proiectul dvs. aplicaţia pliant.
tns a crea fitApp --appid "com.yourname.fitApp"
După aceasta, trebuie, de asemenea, să instalați pluginurile Geolocation și Google Maps:
tns plugin adăuga nativescript-geolocation tns plugin adaugă nativescript-google-maps-sdk
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.
Odată ce toate acestea sunt realizate, ar trebui să fiți gata să urmați acest tutorial.
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.
Primul lucru pe care trebuie să-l faceți pentru a începe să lucrați cu SQLite este să instalați plugin-ul:
pluginul tns adaugă nativescript-sqlite
Acest lucru vă permite să faceți lucruri cum ar fi conectarea la o bază de date și de a face CRUD (crea, citi, actualiza, șterge) operațiunile pe ea.
Deschide Principalul-page.js fișierul și importați pluginul SQLite:
Accentsconagua
var Sqlite = necesită ("nativescript-sqlite");Acum vă puteți conecta la baza de date:
var db_name = "walks.db"; noul Sqlite (db_name) .then (db => // next: creați tabelul pentru stocarea datelor despre plimbări, error => );
walks.db fișierul a fost creat de la terminal folosind atingere comanda, deci este doar un dosar gol. Copiați-l în aplicaţia pliant.
Dacă este conectat cu succes, funcția de rezolvare a promisiunii va fi executată. În interiorul acestuia, rulați instrucțiunea SQL pentru a crea plimbări masa. Pentru a păstra lucrurile simple, tot ce trebuie să salvăm este distanța totală acoperită (în metri) și pașii totali, precum și marcajele de început și de sfârșit.
db.execSQL ("CREATE TABLE DACĂ NU EXISTĂ plimbări (id INTEGER PRIMARY KEY AUTOINCREMENT, total_distance INTEGER, total_steps INTEGER, start_datetime DATETIME, end_datetime DATETIME)"), apoi (id => page.bindingContext = createViewModel (db) error => console.log ("CREATE TABLE ERROR", eroare););Odată ce interogarea se execută cu succes, trecem instanța bazei de date (db) în contextul paginii. Aceasta ne va permite să o folosim de la Vedere la Main-model.js fișier ulterior.
Acum suntem gata să lucrăm cu datele. Dar, deoarece vom lucra cu date, trebuie să instalăm mai întâi o bibliotecă numită fecha. Acest lucru ne permite să analizăm cu ușurință și să formăm date:
npm install --save fecha
Odată ce este instalat, deschideți Vedere la Main-model.js fișier și includeți biblioteca:
var fecha = necesită ("fecha");Următorul este codul pentru verificarea activării geolocalizării. Mai întâi, creați o variabilă (walk_id) pentru stocarea ID-ului unei înregistrări de mers pe jos. Avem nevoie de acest lucru deoarece aplicația va introduce imediat o înregistrare nouă în walkie plimbări atunci când utilizatorul începe urmărirea locației. walk_id va stoca ID-ul care este generat automat de SQLite, astfel încât să putem actualiza înregistrarea odată ce utilizatorul oprește urmărirea.
var walk_id;
Apoi, obțineți luna și anul curent. Îl vom folosi pentru a interoga masa, astfel încât returnează doar înregistrările care sunt în aceeași lună și an. Acest lucru ne permite să limităm numărul de înregistrări care apar în interfața de utilizare.
var luna = fecha.format (noua dată (), 'MM'); //e.g 07 var anul = fecha.format (data nouă (), "AAAA"); //e.g 2017
De asemenea, avem nevoie de o variabilă pentru stocarea marcajului de start. Îl vom folosi mai târziu pentru a actualiza interfața utilizator. Acest lucru se datorează faptului că în momentul în care aplicația este încărcată doar în interogarea tabelului, trebuie să actualizăm manual interfața de utilizare a oricăror date noi care devin disponibile. Și deoarece timestamp-ul de pornire va avea doar o valoare atunci când utilizatorul începe urmărirea, trebuie să-l inițializăm în afara domeniului de aplicare, astfel încât să putem actualiza sau accesa mai târziu valoarea sa.
var st_datetime; // data de începere
Inițializați datele despre călătorii care vor fi afișate în interfața de utilizare:
var plimbări = []; viewModel.walks = []; viewModel.has_walks = false;
Obțineți datele din plimbări tabel folosind toate() metodă. Aici furnizăm luna și anul ca parametri de interogare. strftime () funcția este folosită pentru a extrage partea lunii și anului start_datetime.
db.all ("SELECT * FROM walks WHERE strftime ('% m', start_datetime) ==? ȘI strftime ('% Y', start_datetime) ==? ORDER BY start_datetime DESC", [month, year] (err, rs) => if (! err) // următorul: actualizați interfața utilizator cu datele despre plimbări);Odată ce un răspuns de succes este returnat, vom trece prin setul de rezultate astfel încât să putem corecta datele. Rețineți că indicele în care accesăm valorile individuale depinde de structura tabelului descrisă mai devreme în Principalul-page.js fişier. Prima coloană este ID, a doua este distanța totală și așa mai departe.
Datele formate sunt apoi împinse la plimbări și este utilizat pentru a actualiza interfața utilizator. has_walks este folosit ca o comutare pentru UI, astfel încât să putem arăta sau ascunde lucrurile pe baza valorii sale.
r.forEach ((w) => let start_datetime = data noua (w [3]); , h: mm '), // iunie 5, 5:30 sfârșitul: fecha.format (end_datetime,' h: mm a '), // de exemplu 6:30 pm distanță: commafy (w [1] m ', // de exemplu pași de 2000 m: commafy (w [2]) // eg 2,300);); dacă (walks.length) viewModel.set ('has_walks', true); viewModel.set ("plimbări", plimbări);Aceasta va furniza datele pentru ListView în Principalul-page.xml fişier:
Odată ce utilizatorul începe să urmărească, setați ora curentă ca fiind start_datetime și introduceți valorile inițiale în tabel folosind execSQL () funcţie. La fel ca și toate() , aceasta se așteaptă ca interogarea SQL ca primul argument și o serie de parametri ca a doua.
Dacă interogarea are succes, ar trebui să returneze ID-ul generat automat pentru înregistrarea inserată. Apoi îl atribuim ca valoare pentru walk_id astfel încât acesta să poată fi folosit ulterior pentru a actualiza această înregistrare specifică.
st_datetime = data nouă (); var start_datetime = fecha.format (st_datetime, 'YYYY-MM-DD HH: mm: ss'); db.execSQL ("INSERT INTO walks (total_distance, total_steps, start_datetime) VALUES (?,?,?)", [0, 0, start_datetime] ) => dialogs.alert (e.message););Odată ce utilizatorul oprește urmărirea, obținem din nou amprenta curentă și formatăm corespunzător pentru stocare:
var ed_datetime = data nouă (); var final_datetime = fecha.format (ed_datetime, 'YYYY-MM-DD HH: mm: ss');
Deoarece am comandat rezultatele de la cel mai recent la cel recent, folosim unshift () (in loc de Apăsați()) pentru a adăuga elementul nou în partea de sus a paginii plimbări mulțime.
(time: timcha.format (st_datetime, 'MMM D, h: mm'), sfarsit: fecha.format (ed_datetime, 'h: mm a'), distanta: commafy (total_distance) pași: commafy (total_steps)); viewModel.set ("plimbări", plimbări); dacă (walks.length> 0) viewModel.set ('has_walks', true); După aceea, vom folosi din nou execSQL () pentru a actualiza înregistrarea pe care am inserat-o mai devreme:
db.execSQL ("UPDATE plimbă SET final_datetime =?, total_steps =?, total_distance =? WHERE id =?", [end_datetime, total_steps, total_distance, walk_id]) .then ((err, id) => if ) // todo: adăugați codul pentru resetarea interfeței de urmărire aici);Asigurați-vă că mutați codul pentru a reseta interfața de urmărire (pentru a reseta distanța totală și pașii) în cadrul funcției de rezolvare a promisiunii, astfel încât să puteți testa cu ușurință dacă cererea de actualizare a fost executată cu succes sau nu.
Ștergerea datelor se face făcând clic pe Date clare butonul de sub lista de date despre plimbare:
...
În Vedere la Main-model.js fișier, adăugați codul pentru ștergerea tuturor datelor din plimbări masa. Dacă sunteți obișnuiți cu MySQL, s-ar putea să vă întrebați de ce folosim ȘTERGE interogare în loc de TRUNCHIA pentru golirea mesei. Ei bine, asta pentru că SQLite nu are TRUNCHIA funcţie. De aceea trebuie să folosim ȘTERGE interogare fără a furniza o condiție astfel încât să se șterge toate înregistrările care sunt în prezent în tabel.
ViewModel.clearData = funcția () dialogs.confirm ("Sigur doriți să ștergeți datele?"), apoi ((agree) => if (agree) db.execSQL ]), apoi ((err) => if (! err) dialogs.alert ("Date a fost șters!"); ('has_walks', false););); În acest tutorial, ați învățat cum să stocați date locale în aplicațiile NativeScript utilizând pluginul SQLite. După cum ați văzut, SQLite vă permite să vă reutilizați abilitățile existente SQL în gestionarea unei baze de date locale. Este important să rețineți că nu toate funcțiile la care sunteți obișnuit în MySQL sunt suportate în SQLite. Deci, este întotdeauna înțelept să consultați documentația dacă nu sunteți sigur dacă o anumită funcție este acceptată sau nu.
Dacă doriți să aflați despre alte opțiuni de stocare a datelor în aplicațiile NativeScript, vă recomandăm să citiți acest articol pe Going Offline With NativeScript.
În postarea finală a acestei serii, vom adăuga notificări push către aplicația noastră.
Între timp, verificați unele dintre celelalte postări ale noastre privind codarea mobilă NativeScript și mobile pe mai multe platforme.
Pentru o introducere cuprinzătoare la NativeScript, încercați cursul nostru video Cod un App Mobile Cu NativeScript. În acest curs, Keyvan Kasaei vă va arăta pas cu pas cum să construiți o aplicație simplă. Pe parcurs, veți învăța cum să implementați un flux de lucru simplu cu cereri de rețea, o arhivă MVVM și unele dintre cele mai importante componente UI de pe NativeScript. Până la urmă, veți înțelege de ce ar trebui să luați în considerare sistemul NativeScript pentru următorul proiect de aplicație mobilă.
