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 integrerer en SQLite-database i appen for å lagre data lokalt. Spesielt lagrer vi dataene for gangavganger som vi samlet i den forrige opplæringen.
Når du plukker opp fra forrige veiledning, legger du til en flippvisning for å vise de forskjellige delene av appen. Tidligere hadde vår app bare sporing siden, så vi trengte ikke faner. I dette innlegget legger vi til Walks side. Denne siden viser brukerens gange. Et nytt datapunkt vil bli lagt til her hver gang brukeren sporer sin gåsøkt. Det vil også være en funksjon for å rydde dataene.
Her er hva den endelige utgangen ser ut som:
Hvis du har fulgt den forrige opplæringen på geolocation, kan du bare bruke det samme prosjektet og bygge funksjonene som vi skal legge 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 og Google Maps plugins:
tns plugin legg til nativcript-geolocation tns plugin legg til nativescript-google-maps-sdk
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 forrige opplæringen.
Når alle disse er ferdige, 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 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 forrige opplæringen.
Det første du må gjøre for å begynne å jobbe med SQLite, er å installere plugin:
tns plugin legge til nativcript-sqlite
Dette lar deg gjøre ting som å koble til en database og gjøre CRUD (opprette, lese, oppdatere, slette) operasjoner på den.
Åpne hoved page.js fil og importer SQLite-plugin:
Accentsconagua
var Sqlite = krever ("nativescript-sqlite");Du kan nå koble til databasen:
var db_name = "walks.db"; ny Sqlite (db_name) .then (db => // neste: opprett tabell for lagring av går data, error => );
De walks.db filen ble opprettet fra terminalen ved hjelp av ta på kommando, så det er bare en tom fil. Kopier det inn i app mappe.
Hvis det er vellykket tilkoblet, vil løftets løsefunksjon bli utført. Innenfor driver vi SQL-setningen for å skape vandringer bord. For å holde ting enkelt, er alt vi trenger å lagre den totale avstanden dekket (i meter) og de totale trinnene, samt start og slutt tidstempler.
db.execSQL ("CREATE TABLE Hvis ikke EXISTS går i gang (ID INTEGER PRIMARY KEY AUTOINCREMENT, total_distance INTEGER, total_steg INTEGER, start_datetime DATETIME, end_datetime DATETIME)"), deretter (id => page.bindingContext = createViewModel (db); error => console.log ("CREATE TABLE ERROR", feil););Når spørringen utføres vellykket, passerer vi databasen forekomsten (db) i sidekonteksten. Dette vil tillate oss å bruke det fra Hoved-view-model.js filen senere.
Nå er vi klare til å jobbe med dataene. Men siden vi skal jobbe med datoer, må vi først installere et bibliotek kalt fecha. Dette gjør at vi enkelt kan analysere og formatere datoer:
npm installere - lagre fecha
Når den er installert, åpner du Hoved-view-model.js fil og ta med biblioteket:
var fecha = krever ('fecha');Neste er koden for å sjekke om geolocation er aktivert. Først opprett en variabel (walk_id) for å lagre ID-en av en walking-plate. Vi trenger dette fordi appen umiddelbart legger inn en ny walk-record i vandringer bord når brukeren starter plasseringssporing. walk_id vil lagre IDen som automatisk genereres av SQLite, slik at vi kan oppdatere platen når brukeren slutter å spore.
var walk_id;
Deretter får du den nåværende måneden og året. Vi bruker det til å spørre bordet, slik at det bare returnerer poster som er i samme måned og år. Dette tillater oss å begrense antall poster som vises i brukergrensesnittet.
var måned = fecha.format (ny dato (), 'MM'); //e.g 07 var år = fecha.format (ny dato (), 'ÅÅÅÅ'); //e.g 2017
Vi trenger også en variabel for lagring av starttidstempel. Vi bruker det senere til å oppdatere brukergrensesnittet. Dette skyldes at vi bare spørre bordet en gang når appen er lastet, så vi må manuelt oppdatere brukergrensesnittet til nye data som blir tilgjengelige. Og siden starttidstempelet bare vil ha en verdi når brukeren begynner å spore, må vi initialisere den utenfor omfanget slik at vi kan oppdatere eller få tilgang til verdien senere.
var st_datetime; // start datetime
Initialiser turdataene som skal vises i brukergrensesnittet:
var går = []; viewModel.walks = []; viewModel.has_walks = false;
Få dataene fra vandringer bord ved hjelp av alle() metode. Her leverer vi måneden og året som spørringsparametere. De strftime () funksjonen brukes til å trekke ut måneden og årdelen av start_datetime.
db.all ("SELECT * FROM walks WHERE strftime ('% m', start_datetime) ==? OG strftime ('% Y', start_datetime) ==? BESTILL AV start_datetime DESC", [måned, år]) .then (feil, rs) => hvis (! err) // neste: Oppdater brukergrensesnittet med turdataene);Når et suksessrespons er returnert, går vi gjennom resultatsettet slik at vi kan formatere dataene riktig. Vær oppmerksom på at indeksene der vi får tilgang til de enkelte verdiene avhenger av tabellstrukturen som ble beskrevet tidligere i hoved page.js fil. Den første kolonnen er ID, den andre er den totale avstanden, og så videre.
De formaterte dataene blir deretter presset til vandringer array og brukes til å oppdatere brukergrensesnittet. has_walks brukes som en bytte for brukergrensesnittet slik at vi kan vise eller skjule ting basert på verdien.
rs.forEach ((w) => let start_datetime = ny Dato (w [3]); la end_datetime = ny Dato (w [4]); walks.push (start: fecha.format (start_datetime, 'MMM D , h: mm '), / / f.eks. 5. juni kl. 5:30: fecha.format (end_datetime,' h: mm a '), / / f.eks 6:30 pm avstand: commafy (w [1]) + m ', // f.eks. 2000m trinn: commafy (w [2]) // f.eks 2.300);); hvis (walks.length) viewModel.set ('has_walks', true); viewModel.set ('går', går);Dette vil levere dataene til Listevisning i hoved page.xml fil:
Når brukeren begynner å spore, må du stille inn gjeldende datetime som start_datetime og sett inn innledende verdier i tabellen ved hjelp av execSQL () funksjon. Akkurat som alle() funksjon, forventer dette SQL-spørringen som det første argumentet og en rekke parametre som den andre.
Hvis spørringen er vellykket, skal den returnere den automatisk genererte IDen for den innsatte posten. Vi tilordner det da som verdien for walk_id så det kan brukes senere til å oppdatere denne spesifikke posten.
st_datetime = ny dato (); var start_datetime = fecha.format (st_datetime, 'ÅÅÅÅ-MM-DD HH: mm: ss'); db.execSQL ("INSERT INT walks (total_distance, total_steps, start_datetime) VALUES (?,?,?)", [0, 0, start_datetime]) .then ((id) => walk_id = id; ) => dialogs.alert (e.message););Når brukeren stopper sporing, får vi igjen det nåværende tidsstempelet og formaterer det tilsvarende for lagring:
var ed_datetime = ny dato (); var end_datetime = fecha.format (ed_datetime, 'ÅÅÅÅ-MM-DD HH: mm: ss');
Siden vi har bestilt resultatene fra de fleste til de minste, bruker vi avskifte () (i stedet for trykk()) for å legge til det nye elementet øverst på vandringer matrise.
walks.unshift (start: fecha.format (st_datetime, 'MMM D, h: mm'), slutt: fecha.format (ed_datetime, 'h: mm a'), avstand: commafy (total_distance) + 'm' trinn: commafy (total_steps)); viewModel.set ('går', går); hvis (walks.length> 0) viewModel.set ('has_walks', true); Deretter bruker vi igjen en gang til execSQL () funksjon for å oppdatere posten som vi satt inn tidligere:
db.execSQL ("UPDATE går SET end_datetime =?, total_steps =?, total_distance =? WHERE id =?", [end_datetime, total_steps, total_distance, walk_id]) .then ((err, id) => ) // todo: legg til kode for å tilbakestille sporingsgrensesnittet her);Pass på å flytte koden for å tilbakestille sporingsgrensesnittet (for å tilbakestille totalavstanden og trinnene) inne i løfteoppløsningsfunksjonen, slik at du enkelt kan teste om oppdateringsspørsmålet ble utført eller ikke.
Sletting av data er gjort ved å klikke på Slett data knappen under listen over gange data:
...
I Hoved-view-model.js fil, legg til koden for å slette alle dataene fra vandringer bord. Hvis du er vant til MySQL, kan du lure på hvorfor vi bruker SLETT spørringen i stedet for avkorte for å tømme bordet. Vel, det er fordi SQLite ikke har avkorte funksjon. Det er derfor vi må bruke SLETT spørring uten å levere en betingelse slik at den vil slette alle postene som for tiden er i tabellen.
viewModel.clearData = function () dialogs.confirm ("Er du sikker på at du vil slette dataene dine?"). da ((enig) => hvis (enig) db.execSQL ("DELETE FROM walks" ]). da ((err) => hvis (! err) dialogs.alert ("Data har blitt fjernet!"); Walks = []; viewModel.set ('walks', []); viewModel.set ('has_walks', false););); I denne opplæringen har du lært hvordan du lokalt lagrer data i NativeScript-appene dine ved hjelp av SQLite-plugin. Som du har sett, lar SQLite deg å gjenbruke eksisterende SQL-ferdigheter i å administrere en lokal database. Det er viktig å merke seg at ikke alle funksjoner som du er vant til i MySQL støttes i SQLite. Så det er alltid lurt å konsultere dokumentasjonen hvis du ikke er sikker på om en bestemt funksjon støttes eller ikke.
Hvis du vil lære om andre alternativer for lagring av data i NativeScript-apper, anbefaler jeg at du leser denne artikkelen om Going Offline med NativeScript.
I den siste innlegget i denne serien legger vi til push-varsler til appen vår.
I mellomtiden kan du sjekke ut noen av våre andre innlegg på NativeScript og mobil plattform på tvers av plattformer.
For en omfattende introduksjon til NativeScript, prøv vårt videokurs Kode en mobilapp med NativeScript. I dette kurset vil Keyvan Kasaei vise deg trinnvis hvordan du bygger en enkel applikasjon. Underveis lærer du hvordan du implementerer en enkel app-arbeidsflyt med nettverksforespørsler, en MVVM-arkitektur og noen av de viktigste NativeScript-UI-komponentene. På slutten forstår du hvorfor du bør vurdere NativeScript for ditt neste mobilapprojekt.
