Coder une application NativeScript en temps réel: SQLite

NativeScript est un framework permettant de créer des applications mobiles natives multiplateformes à l’aide de 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 Google Maps, base de données SQLite, intégration Firebase et notifications push. En cours de route, nous construisons une application de fitness avec des capacités en temps réel qui utilisera 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 stockerons les données des sessions de marche que nous avons rassemblées dans le didacticiel précédent.

Ce que vous allez créer

Reprenant le didacticiel précédent, vous ajouterez un onglet pour afficher les différentes parties de l’application. Auparavant, notre application avait juste le suivi page, nous n’avons donc pas besoin d’onglets. Dans cet article, 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 suit sa session de marche. Il y aura également une fonction pour effacer les données.

Voici à quoi ressemblera la sortie finale:

Sortie finale SQL Lite

Mise en place du projet

Si vous avez suivi le tutoriel 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 tutoriel. Sinon, vous pouvez créer un nouveau projet et copier le fichiers de démarrage dans votre projet app dossier.

Après cela, vous devez également installer les plugins de géolocalisation et Google Maps:

Une fois installé, vous devez configurer le plugin Google Maps. Vous pouvez lire les instructions complètes sur la façon de procéder en lisant la section sur Installation du plug-in Google Maps dans le didacticiel précédent.

Une fois que tout cela est fait, vous devriez être prêt à suivre ce tutoriel.

Lancer le projet

Vous pouvez exécuter le projet en exécutant tns run android. Mais comme 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 emplacement. Vous pouvez lire comment procéder dans la section sur Lancer l’application dans le didacticiel précédent.

Installation du plug-in SQLite

La première chose que vous devez faire pour commencer à travailler avec SQLite est d’installer le brancher:

Cela vous permet de faire des choses comme la connexion à une base de données et d’effectuer des opérations CRUD (créer, lire, mettre à jour, supprimer) sur celle-ci.

Connexion à la base de données

Ouvrez le main-page.js fichier et importez le plugin SQLite:

Vous pouvez maintenant vous connecter à la base de données:

le promenades.db Le fichier a été créé à partir du terminal en utilisant le touch commande, donc c’est juste un fichier vide. Copiez-le dans le app dossier.

Si la connexion réussit, 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 walks table. Pour simplifier les choses, tout ce que nous devons enregistrer est la distance totale parcourue (en mètres) et le nombre total de pas, ainsi que les horodatages de début et de fin.

Une fois la requête exécutée avec succès, nous transmettons l’instance de base de données (db) dans le contexte de la page. Cela nous permettra de l’utiliser à partir du main-view-model.js fichier plus tard.

En relation :  Messenger Lite est désormais disponible aux États-Unis

Récupération des données

Nous sommes maintenant prêts à travailler avec les données. Mais puisque nous allons travailler avec des dates, nous devons d’abord installer une bibliothèque appelée fecha. Cela nous permet d’analyser et de formater facilement les dates:

Une fois installé, ouvrez le main-view-model.js fichier et inclure la bibliothèque:

Vient ensuite le code pour vérifier si la géolocalisation est activée. Commencez par créer une variable (walk_id) pour stocker l’ID d’un enregistrement de marche. Nous en avons besoin car l’application insérera immédiatement un nouveau record de marche dans le walks table lorsque l’utilisateur démarre le suivi de l’emplacement. walk_id stockera l’ID généré automatiquement par SQLite afin que nous puissions mettre à jour l’enregistrement une fois que l’utilisateur aura arrêté le suivi.

Ensuite, obtenez le mois et l’année en cours. Nous l’utiliserons pour interroger la table afin qu’elle ne renvoie 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.

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. En effet, nous n’interrogons la table qu’une seule fois lorsque l’application est chargée, nous devons donc mettre à jour manuellement l’interface utilisateur de toutes les nouvelles données qui deviennent disponibles. Et comme l’horodatage de départ n’aura une valeur que lorsque l’utilisateur commence le suivi, nous devons l’initialiser en dehors de la portée afin que nous puissions mettre à jour ou accéder à sa valeur plus tard.

Initialisez les données de marche qui seront affichées dans l’interface utilisateur:

Obtenez les données du walks table en utilisant le all() méthode. Ici, nous fournissons le mois et l’année comme paramètres de requête. le strftime() La fonction est utilisée pour extraire la partie mois et année du start_datetime.

Une fois qu’une réponse réussie est renvoyée, nous parcourons l’ensemble de résultats afin de pouvoir formater correctement les données. Notez que les index dans lesquels nous accédons aux valeurs individuelles dépendent de la structure de table qui a été décrite précédemment dans le main-page.js fichier. La première colonne est ID, la seconde est la distance totale, et ainsi de suite.

Les données formatées sont ensuite poussées vers le walks array 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 des éléments en fonction de sa valeur.

Cela fournira les données pour le ListView dans le main-page.xml fichier:

La sauvegarde des données

Une fois que l’utilisateur commence le suivi, définissez la date / heure actuelle comme start_datetime et insérez les valeurs initiales dans le tableau en utilisant le execSQL() fonction. Tout comme le all() fonction, cela attend la requête SQL comme premier argument et un tableau de paramètres comme second.

En relation :  Comment créer une introduction YouTube (et 4 outils gratuits pour commencer)

Si la requête aboutit, elle doit renvoyer l’ID généré automatiquement pour l’enregistrement inséré. Nous l’attribuons ensuite comme valeur du walk_id afin qu’il puisse être utilisé plus tard pour mettre à jour cet enregistrement spécifique.

Une fois que l’utilisateur arrête le suivi, nous obtenons à nouveau l’horodatage actuel et le formons en conséquence pour le stockage:

Puisque nous avons ordonné les résultats du plus récent au moins récent, nous utilisons unshift() (au lieu de push()) pour ajouter le nouvel élément en haut de la walks tableau.

Après cela, nous utilisons à nouveau le execSQL() fonction pour mettre à jour l’enregistrement que nous avons inséré précédemment:

Assurez-vous de 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 s’est exécutée avec succès ou non.

Effacement des données

La suppression des données se fait en cliquant sur le Effacer les données bouton sous la liste des données de marche:

dans le main-view-model.js fichier, ajoutez le code pour supprimer toutes les données du walks table. Si vous êtes habitué à MySQL, vous vous demandez peut-être pourquoi nous utilisons le DELETE requête au lieu de TRUNCATE pour vider la table. Eh bien, c’est parce que SQLite n’a pas le TRUNCATE fonction. C’est pourquoi nous devons utiliser le DELETE requête sans fournir de condition afin de supprimer tous les enregistrements qui se trouvent actuellement dans la table.

Conclusion

Dans ce didacticiel, 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 le Documentation si vous n’êtes pas sûr qu’une certaine fonction est prise en charge ou non.

Si vous souhaitez en savoir plus sur les autres options de stockage des données dans les applications NativeScript, je vous recommande de lire cet article sur Passer 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 multiplateforme.

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 à implémenter un flux de travail d’application simple avec des requêtes réseau, une architecture MVVM et certains des composants d’interface utilisateur NativeScript les plus importants. À la fin, vous comprendrez pourquoi vous devriez envisager NativeScript pour votre prochain projet d’application mobile.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.