Share
NativeScript is een raamwerk voor het bouwen van cross-platform native mobiele apps met behulp van XML, CSS en JavaScript. In deze serie proberen we enkele van de leuke dingen die u kunt doen met een NativeScript-app: geolocatie en integratie met Google Maps, SQLite-database, Firebase-integratie en pushmeldingen. Onderweg bouwen we een fitness-app met real-time mogelijkheden die elk van deze functies zullen gebruiken.
In deze zelfstudie leert u hoe u een SQLite-database kunt integreren in de app om gegevens lokaal op te slaan. We slaan met name de gegevens van de loopsessies op die we in de vorige zelfstudie hebben verzameld.
Als u ophaalt uit de vorige zelfstudie, voegt u een tabweergave toe voor het weergeven van de verschillende gedeelten van de app. Eerder had onze app net de Tracking pagina, dus we hadden geen tabbladen nodig. In dit bericht voegen we de wandelingen pagina. Deze pagina toont de loopsessies van de gebruiker. Hier wordt telkens een nieuw gegevenspunt toegevoegd wanneer de gebruiker zijn loopsessie volgt. Er zal ook een functie zijn voor het wissen van de gegevens.
Hier is wat de uiteindelijke uitvoer eruit zal zien:
Als u de vorige zelfstudie over geolocatie hebt gevolgd, kunt u eenvoudig hetzelfde project gebruiken en de functies bouwen die we in deze zelfstudie zullen toevoegen. Anders kunt u een nieuw project maken en de starterstbestanden naar uw project kopiëren app map.
tns create fitApp --appid "com.yourname.fitApp"
Hierna moet u ook de geolocatie- en Google Maps-plug-ins installeren:
tns plugin add nativescript-geolocation tns plugin add nativescript-google-maps-sdk
Na de installatie moet u de Google Maps-plug-in configureren. Je kunt de volledige instructies over hoe je dit doet door het hoofdstuk te lezen lezen De Google Maps-plug-in installeren in de vorige tutorial.
Zodra dit allemaal is voltooid, zou je klaar moeten zijn om deze tutorial te volgen.
U kunt het project uitvoeren door het uit te voeren tns voer android uit. Maar aangezien deze app zal bouwen op de geolocatiefunctionaliteit, raad ik u aan een GPS-emulator te gebruiken om snel uw locatie in te stellen en te wijzigen. Je kunt lezen hoe je dat moet doen in het gedeelte over De app uitvoeren in de vorige tutorial.
Het eerste dat u moet doen om met SQLite te gaan werken, is door de plug-in te installeren:
tns plugin voeg nativescript-sqlite toe
Hiermee kunt u dingen doen zoals verbinding maken met een database en bewerkingen CRUD (maken, lezen, bijwerken, verwijderen) uitvoeren.
Open de main-page.js bestand en importeer de SQLite plugin:
Accentsconagua
var Sqlite = require ("nativescript-sqlite");U kunt nu verbinding maken met de database:
var db_name = "walks.db"; nieuwe Sqlite (db_name) .then (db => // next: maak een tabel voor het opslaan van wandelingengegevens, error => );
De walks.db bestand is gemaakt vanaf de terminal met behulp van de aanraken opdracht, dus het is gewoon een leeg bestand. Kopieer het naar de app map.
Als het met succes is verbonden, wordt de oplossingsfunctie van de belofte uitgevoerd. Daarbinnen voeren we de SQL-instructie uit voor het maken van de wandelingen tafel. Om alles eenvoudig te houden, hoeft u alleen maar de totale afgelegde afstand (in meters) en de totale stappen, evenals de start- en eindtijdstempels op te slaan..
db.execSQL ("CREATEER DE TABEL ALS NIET BEGONNEN loopt (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););Nadat de query met succes is uitgevoerd, passeren we de database-instantie (db) in de pagina-context. Dit zal ons in staat stellen om het te gebruiken van de hoofd-view-model.js bestand later.
Nu zijn we klaar om met de gegevens te werken. Maar omdat we met datums werken, moeten we eerst een bibliotheek met de naam fecha installeren. Op deze manier kunnen we eenvoudig datums analyseren en opmaken:
npm install - bewaar fecha
Zodra het is geïnstalleerd, opent u de hoofd-view-model.js bestand en neem de bibliotheek op:
var fecha = require ('fecha');De volgende is de code om te controleren of geolocatie is ingeschakeld. Maak eerst een variabele (walk_id) voor het opslaan van de ID van een looprecord. We hebben dit nodig omdat de app onmiddellijk een nieuw looprecord in de app zal invoegen wandelingen tabel wanneer de gebruiker locattracking start. walk_id zal de ID opslaan die automatisch door SQLite is gegenereerd, zodat we de record kunnen bijwerken zodra de gebruiker stopt met traceren.
var walk_id;
Haal vervolgens de huidige maand en het huidige jaar. We gebruiken het om de tabel te doorzoeken, zodat alleen records worden geretourneerd die zich in dezelfde maand en hetzelfde jaar bevinden. Hierdoor kunnen we het aantal records beperken dat in de gebruikersinterface wordt weergegeven.
var month = fecha.format (new Date (), 'MM'); //e.g 07 var year = fecha.format (new Date (), 'YYYY'); //e.g 2017
We hebben ook een variabele nodig voor het opslaan van het starttijdstempel. We zullen het later gebruiken om de gebruikersinterface bij te werken. Dit komt omdat we slechts één keer naar de tabel vragen wanneer de app is geladen, dus we moeten de gebruikersinterface van alle nieuwe gegevens die beschikbaar komen handmatig bijwerken. En omdat de starttijdstempel alleen een waarde heeft wanneer de gebruiker begint met traceren, moeten we deze buiten het bereik initialiseren, zodat we de waarde later kunnen bijwerken of openen..
var st_datetime; // start datetime
Initialiseer de wandelingengegevens die in de gebruikersinterface worden weergegeven:
var walks = []; viewModel.walks = []; viewModel.has_walks = false;
Verkrijg de gegevens van de wandelingen tabel met behulp van de allemaal() methode. Hier leveren we de maand en het jaar als queryparameters. De strftime () functie wordt gebruikt om het maand- en jaargedeelte van de start_datetime.
db.all ("SELECT * FROM walks WHERE strftime ('% m', start_datetime) ==? EN strftime ('% Y', start_datetime) ==? ORDER BY start_datetime DESC", [maand, jaar]) .then ( (err, rs) => if (! err) // volgende: update de gebruikersinterface met de wandelingengegevens);Zodra een succesantwoord is geretourneerd, doorlopen we de resultatenset zodat we de gegevens correct kunnen opmaken. Merk op dat de indexen waarin we toegang hebben tot de individuele waarden afhangen van de tabelstructuur die eerder in de main-page.js het dossier. De eerste kolom is ID, de tweede is de totale afstand, enzovoort.
De geformatteerde gegevens worden vervolgens naar de wandelingen array en wordt gebruikt om de gebruikersinterface bij te werken. has_walks wordt gebruikt als een schakelaar voor de gebruikersinterface, zodat we dingen kunnen laten zien of verbergen op basis van de waarde.
rs.forEach ((w) => let start_datetime = nieuwe datum (w [3]); laat end_datetime = nieuwe datum (w [4]); walks.push (start: fecha.format (start_datetime, 'MMM D , h: mm '), // bijv. Jun 5, 5:30 end: fecha.format (end_datetime,' h: mm a '), // eg 18.30 uur distance: commafy (w [1]) +' m ', // eg 2.000m stappen: commafy (w [2]) // eg 2300);); if (walks.length) viewModel.set ('has_walks', true); viewModel.set ('wandelingen', wandelingen);Dit levert de gegevens voor de Lijstweergave in de main-page.xml het dossier:
Zodra de gebruiker begint met traceren, stelt u de huidige datetime in als start_datetime en voeg de beginwaarden in de tabel in met behulp van de execSQL () functie. Net als de allemaal() functie, dit verwacht de SQL-query als het eerste argument en een array met parameters als de tweede.
Als de query slaagt, moet deze de automatisch gegenereerde ID voor de ingevoegde record retourneren. We wijzen het dan toe als de waarde voor de walk_id zodat het later kan worden gebruikt om dit specifieke record bij te werken.
st_datetime = nieuwe datum (); 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]) .then ((id) => walk_id = id;, (e ) => dialogs.alert (e.message););Zodra de gebruiker stopt met traceren, krijgen we opnieuw de huidige tijdstempel en formatteren deze dienovereenkomstig voor opslag:
var ed_datetime = new Date (); var end_datetime = fecha.format (ed_datetime, 'YYYY-MM-DD HH: mm: ss');
Omdat we de resultaten van meest tot minst recent hebben besteld, gebruiken we dit unshift () (in plaats van Duwen()) om het nieuwe item toe te voegen aan de bovenkant van de wandelingen rangschikking.
walks.unshift (start: fecha.format (st_datetime, 'MMM D, h: mm'), end: fecha.format (ed_datetime, 'h: mm a'), distance: commafy (total_distance) + 'm', stappen: commafy (total_steps)); viewModel.set ('wandelingen', wandelingen); if (walks.length> 0) viewModel.set ('has_walks', true); Daarna gebruiken we opnieuw de execSQL () functie om de record die we eerder hebben ingevoegd bij te werken:
db.execSQL ("UPDATE wandelingen SET end_datetime =?, total_steps =?, total_distance =? WHERE id =?", [end_datetime, total_steps, total_distance, walk_id]) .then ((err, id) => if (! err ) // todo: voeg hier code toe voor het opnieuw instellen van de tracking-UI);Verplaats de code voor het opnieuw instellen van de tracking-UI (om de totale afstand en stappen opnieuw in te stellen) in de oplossingsfunctie van de belofte, zodat u eenvoudig kunt testen of de updatequery wel of niet is uitgevoerd.
Gegevens worden verwijderd door op de knop te klikken Verwijder gegevens knop onder de lijst met loopgegevens:
...
In de hoofd-view-model.js bestand, voeg de code toe voor het verwijderen van alle gegevens uit de wandelingen tafel. Als u gewend bent aan MySQL, vraagt u zich misschien af waarom we de DELETE query in plaats van TRUNCATE voor het legen van de tafel. Nou, dat komt omdat SQLite niet de TRUNCATE functie. Dat is waarom we het moeten gebruiken DELETE query zonder een voorwaarde te leveren, zodat alle records die momenteel in de tabel staan worden verwijderd.
viewModel.clearData = function () dialogs.confirm ("Weet u zeker dat u uw gegevens wilt wissen?"). then ((agree) => if (agree) db.execSQL ("DELETE FROM walks", [DELETE FROM walks], [ ]). then ((err) => if (! err) dialogs.alert ("Gegevens is gewist!"); walks = []; viewModel.set ('walks', []); viewModel.set ('has_walks', false););); In deze zelfstudie hebt u geleerd hoe u lokaal gegevens opslaat in uw NativeScript-apps met behulp van de SQLite-plug-in. Zoals u hebt gezien, kunt u met SQLite uw bestaande SQL-vaardigheden opnieuw gebruiken bij het beheer van een lokale database. Het is belangrijk op te merken dat niet alle functies die u gewend bent in MySQL worden ondersteund in SQLite. Het is dus altijd verstandig om de documentatie te raadplegen als u niet zeker weet of een bepaalde functie wordt ondersteund of niet.
Als u meer wilt weten over andere opties voor het opslaan van gegevens in NativeScript-apps, raad ik u aan dit artikel te lezen over offline gaan met NativeScript.
In het laatste bericht van deze serie zullen we pushmeldingen toevoegen aan onze app.
Bekijk in de tussentijd enkele van onze andere berichten op NativeScript en cross-platform mobiele codering.
Voor een uitgebreide introductie tot NativeScript, probeer onze videocursus Code een mobiele app met NativeScript. In deze cursus laat Keyvan Kasaei je stap voor stap zien hoe je een eenvoudige applicatie kunt bouwen. Onderweg leert u hoe u een eenvoudige app-workflow implementeert met netwerkverzoeken, een MVVM-architectuur en enkele van de belangrijkste NativeScript UI-componenten. Aan het einde begrijpt u waarom u NativeScript moet overwegen voor uw volgende mobiele app-project.
