Share
NativeScript est un cadre permettant de créer des applications mobiles natives multiplates-formes utilisant XML, CSS et JavaScript. Dans cette série, nous essayons certaines des choses intéressantes que vous pouvez faire avec une application NativeScript: géolocalisation et intégration de Google Maps, base de données SQLite, intégration de Firebase et notifications push. En cours de route, nous construisons une application de mise en forme avec des fonctionnalités en temps réel utilisant chacune de ces fonctionnalités..
Dans ce didacticiel, vous apprendrez à intégrer une base de données SQLite dans l'application pour stocker des données localement. Plus précisément, nous allons stocker les données des sessions de marche que nous avons rassemblées dans le précédent tutoriel..
En reprenant le didacticiel précédent, vous ajouterez un onglet permettant d'afficher les différentes parties de l'application. Auparavant, notre application avait juste la suivi page, donc nous n'avons pas besoin d'onglets. Dans ce post, nous ajouterons le Des promenades page. Cette page affichera les sessions de marche de l'utilisateur. Un nouveau point de données sera ajouté ici chaque fois que l'utilisateur suivra sa session de marche. Il y aura aussi une fonction pour effacer les données.
Voici à quoi ressemblera la sortie finale:
Si vous avez suivi le didacticiel précédent sur la géolocalisation, vous pouvez simplement utiliser le même projet et créer les fonctionnalités que nous ajouterons dans ce didacticiel. Sinon, vous pouvez créer un nouveau projet et copier les fichiers de démarrage dans le dossier de votre projet. app dossier.
tns create fitApp --appid "com.yourname.fitApp"
Après cela, vous devez également installer les plug-ins de géolocalisation et Google Maps:
tns plugin ajouter nativescript-geolocation tns plugin ajouter nativescript-google-maps-sdk
Une fois installé, vous devez configurer le plugin Google Maps. Vous pouvez lire les instructions complètes sur la procédure à suivre en lisant la section Installer le plugin Google Maps dans le tutoriel précédent.
Une fois que tout cela est fait, vous devriez être prêt à suivre ce tutoriel..
Vous pouvez exécuter le projet en exécutant tns courir android. Mais puisque cette application s'appuiera sur la fonctionnalité de géolocalisation, je vous recommande d'utiliser un émulateur GPS pour définir et modifier rapidement votre position. Vous pouvez en savoir plus sur la procédure à suivre dans la section Lancer l'application dans le tutoriel précédent.
La première chose à faire pour commencer à travailler avec SQLite est d’installer le plugin:
tns plugin ajoute nativescript-sqlite
Cela vous permet d’effectuer des opérations telles que la connexion à une base de données et l’exécution d’opérations CRUD (création, lecture, mise à jour, suppression) sur celle-ci..
Ouvrez le main-page.js déposer et importer le plugin SQLite:
Accentsconagua
var Sqlite = require ("nativescript-sqlite");Vous pouvez maintenant vous connecter à la base de données:
var nom_base = "promenades.db"; new Sqlite (nom_base) .then (db => // next: créer une table pour stocker les données de parcours, error => );
le promenades.db le fichier a été créé à partir du terminal à l'aide du toucher commande, donc c'est juste un fichier vide. Copiez-le dans le app dossier.
Si la connexion est établie avec succès, la fonction de résolution de la promesse sera exécutée. À l'intérieur de cela, nous exécutons l'instruction SQL pour créer le des promenades table. Pour simplifier les choses, il suffit d’économiser la distance totale parcourue (en mètres) et le nombre total de pas, ainsi que les horodatages de début et de fin..
db.execSQL ("CREATE TABLE SI PAS EXISTE (id INTEGER PRIMARY KEY AUTOINCREMENT, total_distance INTEGER, total_steps INTEGER, start_datetime DATETIME, end_datetime DATETIME)"), alors (id => page.bindingContext = createViewModel) error => console.log ("CREATE TABLE ERROR", erreur););Une fois la requête exécutée avec succès, nous passons l'instance de base de données (db) dans le contexte de la page. Cela nous permettra de l'utiliser depuis le main-view-model.js déposer plus tard.
Nous sommes maintenant prêts à travailler avec les données. Mais comme nous allons travailler avec les dates, nous devons d’abord installer une bibliothèque appelée fecha. Cela nous permet d’analyser et de formater facilement les dates:
npm install --save fecha
Une fois installé, ouvrez le main-view-model.js déposer et inclure la bibliothèque:
var fecha = require ('fecha');Suivant est le code pour vérifier si la géolocalisation est activée. Commencez par créer une variable (walk_id) pour stocker l’identifiant d’un disque de marche. Nous avons besoin de cela car l'application insérera immédiatement un nouveau record de marche dans le des promenades table lorsque l'utilisateur commence le suivi de localisation. walk_id stockera l'ID généré automatiquement par SQLite afin que nous puissions mettre à jour l'enregistrement lorsque l'utilisateur cesse de suivre.
var walk_id;
Ensuite, obtenez le mois et l'année en cours. Nous allons l'utiliser pour interroger la table afin qu'elle ne retourne que les enregistrements du même mois et de la même année. Cela nous permet de limiter le nombre d'enregistrements qui apparaissent dans l'interface utilisateur..
var month = fecha.format (nouvelle Date (), 'MM'); //e.g 07 var year = fecha.format (new Date (), 'YYYY'); //e.g 2017
Nous avons également besoin d'une variable pour stocker l'horodatage de début. Nous l'utiliserons plus tard pour mettre à jour l'interface utilisateur. Cela s'explique par le fait que nous interrogeons la table une seule fois lorsque l'application est chargée. Nous devons donc mettre à jour manuellement l'interface utilisateur de toute nouvelle donnée disponible. Et comme l'horodatage de démarrage n'aura une valeur que lorsque l'utilisateur commencera à effectuer le suivi, nous devons l'initialiser en dehors de l'étendue afin de pouvoir mettre à jour ou accéder à sa valeur ultérieurement..
var st_datetime; // start date / heure
Initialisez les données de parcours qui seront affichées dans l'interface utilisateur:
var promenades = []; viewModel.walks = []; viewModel.has_walks = false;
Obtenir les données du des promenades table en utilisant le tout() méthode. Ici, nous fournissons le mois et l'année en tant que paramètres de requête. le strftime () la fonction est utilisée pour extraire la partie mois et année de la date_début.
db.all ("SELECT * FROM parcourt WHERE strftime ('% m', start_datetime) ==? ET strftime ('% Y', start_datetime) ==? ORDER BY start_datetime DESC", [mois, année]) .then ( (err, rs) => if (! err) // next: met à jour l'interface utilisateur avec les données de parcours);Une fois qu'une réponse de succès est renvoyée, nous parcourons l'ensemble de résultats afin de pouvoir formater les données correctement. Notez que les index dans lesquels nous accédons aux valeurs individuelles dépendent de la structure de table décrite plus haut dans main-page.js fichier. La première colonne est ID, la seconde est la distance totale, etc..
Les données formatées sont ensuite poussées vers le des promenades tableau et est utilisé pour mettre à jour l'interface utilisateur. has_walks est utilisé comme une bascule pour l'interface utilisateur afin que nous puissions afficher ou masquer les choses en fonction de sa valeur.
rs.forEach ((w) => let start_datetime = new Date (w [3]); let end_datetime = new Date (w [4]); walk.push (start: fecha.format (start_datetime, 'MMM D , h: mm '), // par exemple, le 5 juin, 17h30, fin: fecha.format (date_fin,' h: mm a '), //, par exemple, 18h30 distance: commafy (w [1]) +' m ', // par exemple 2 000 m de pas: commafy (w [2]) // par exemple 2 300);); if (promenades.longueur) viewModel.set ('has_walks', true); viewModel.set ('promenades', promenades);Cela fournira les données pour le ListView dans le main-page.xml fichier:
Une fois que l'utilisateur commence à effectuer le suivi, définissez la date / heure actuelle comme date_début et insérez les valeurs initiales dans le tableau à l'aide du execSQL () une fonction. Comme le tout() fonction, cela attend la requête SQL comme premier argument et un tableau de paramètres comme second.
Si la requête aboutit, elle devrait renvoyer l'ID généré automatiquement pour l'enregistrement inséré. Nous l'attribuons ensuite comme valeur pour le walk_id il peut donc être utilisé plus tard pour mettre à jour cet enregistrement spécifique.
st_datetime = new Date (); var start_datetime = fecha.format (st_datetime, 'AAAA-MM-JJ HH: mm: ss'); db.execSQL ("INSERT INTO marche (total_distance, total_steps, start_datetime) VALEURS (?,?,?)", [0, 0, start_datetime]) .then ((id) => walk_id = id;, (e ) => dialogs.alert (e.message););Une fois que l'utilisateur cesse de suivre, nous récupérons l'horodatage actuel et le formons en conséquence pour le stockage:
var ed_datetime = new Date (); var end_datetime = fecha.format (ed_datetime, 'AAAA-MM-JJ HH: mm: ss');
Depuis que nous avons commandé les résultats du plus au moins récent, nous utilisons unshift () (au lieu de pousser()) pour ajouter le nouvel article en haut de la des promenades tableau.
promenades.unshift (début: fecha.format (st_datetime, 'MMM D, h: mm')), fin: fecha.format (ed_datetime, 'h: mm a'), distance: commafy (distance totale) + 'm', étapes: commafy (total_steps)); viewModel.set ('promenades', promenades); if (promenades.longueur> 0) viewModel.set ('has_walks', true); Après cela, nous utilisons encore une fois le execSQL () fonction pour mettre à jour l'enregistrement que nous avons inséré précédemment:
db.execSQL ("UPDATE marche SET end_datetime =?, total_steps =?, total_distance =? WHERE id =?", [end_datetime, total_steps, total_distance, walk_id]) .then ((err, id) => if (! err ) // todo: ajoutez le code pour réinitialiser l'interface utilisateur de suivi ici);Veillez à déplacer le code de réinitialisation de l'interface utilisateur de suivi (pour réinitialiser la distance totale et les étapes) dans la fonction de résolution de la promesse afin de pouvoir facilement tester si la requête de mise à jour a été exécutée avec succès ou non..
La suppression des données se fait en cliquant sur le bouton Effacer les données bouton en dessous de la liste des données de la promenade:
…
dans le main-view-model.js fichier, ajoutez le code permettant de supprimer toutes les données du des promenades table. Si vous êtes habitué à MySQL, vous vous demandez peut-être pourquoi nous utilisons le EFFACER requête au lieu de TRONQUER pour vider la table. Eh bien, c'est parce que SQLite n'a pas le TRONQUER une fonction. C'est pourquoi nous devons utiliser le EFFACER requête sans fournir de condition pour supprimer tous les enregistrements actuellement dans la table.
viewModel.clearData = function () dialogs.confirm ("Êtes-vous sûr de vouloir effacer vos données?"). then ((consent) => if (consentez) db.execSQL ("DELETE FROM promenades", [ ]). then ((err) => if (! err) dialogs.alert ("Les données ont été effacées!"); promenades = []; viewModel.set ('promenades', []); viewModel.set ('has_walks', false););); Dans ce tutoriel, vous avez appris à stocker localement des données dans vos applications NativeScript à l'aide du plug-in SQLite. Comme vous l'avez vu, SQLite vous permet de réutiliser vos compétences SQL existantes dans la gestion d'une base de données locale. Il est important de noter que toutes les fonctions auxquelles vous êtes habitué dans MySQL ne sont pas prises en charge dans SQLite. Il est donc toujours sage de consulter la documentation si vous n'êtes pas sûr de savoir si une fonction est supportée ou non..
Si vous souhaitez en savoir plus sur les autres options de stockage de données dans les applications NativeScript, je vous recommande de lire cet article sur la mise hors ligne avec NativeScript..
Dans le dernier article de cette série, nous ajouterons des notifications push à notre application..
En attendant, consultez certains de nos autres articles sur NativeScript et le codage mobile multiplate-forme..
Pour une introduction complète à NativeScript, essayez notre cours vidéo Coder une application mobile avec NativeScript. Dans ce cours, Keyvan Kasaei vous montrera, étape par étape, comment créer une application simple. En cours de route, vous apprendrez à mettre en œuvre un flux de travail d'application simple avec des requêtes réseau, une architecture MVVM et certains des composants les plus importants de l'interface utilisateur NativeScript. À la fin, vous comprendrez pourquoi vous devriez envisager NativeScript pour votre prochain projet d'application mobile..
