Applications Android avec Apache Cordova et SQlite

Un site Web réalisé avec HTML 5, JavaScript, CSS 3, peut être exécuté sur différents appareils à l'aide d'Apache Cordova. Si nous avons une application mobile et que nous souhaitons stocker, gérer et récupérer des données de manière efficace et fiable, Apache Cordova nous fournit un plugin pour gérer les bases de données SQLite.
Android pour sa part apporte déjà dans son architecture tous les outils nécessaires pour créer et gérer des bases de données SQLite, ainsi on peut insérer, modifier, consulter et supprimer des données. Cette base de données sera locale, c'est-à-dire qu'elle sera conservée sur l'appareil sur lequel l'application s'exécute.
Dans un autre tutoriel, nous avons déjà expliqué l'installation d'Apache Cordova. Dans celui-ci, nous allons créer une application pour comprendre comment fonctionne une base de données Sqlite à partir d'Android.
Nous utiliserons le terminal Linux dans ce cas, mais Apache Cordova est multiplateforme. On va commencer par créer le projet depuis le terminal et en mode root en utilisant le code suivant :

 cordova créer une application com.demo.app App01

Une fois créé, nous ajoutons la plate-forme, l'appareil dans lequel cela sera exécuté permet de configurer l'émulateur dans ce cas, ce sera Android, à partir du terminal, nous écrivons le code suivant :

 plate-forme cordova ajouter android

Nous supposons que dans le gestionnaire Android Adv, nous avons un appareil déjà configuré, mais nous en configurons un qui prend en charge Api 19, c'est-à-dire Android 4.4.2

Maintenant, nous allons installer le plugin pour pouvoir travailler avec Sqlite, à partir du terminal, nous allons exécuter la commande suivante qui téléchargera et installera le plugin.

 plug-in cordova ajouter https://github.com/brodysoft/Cordova-SQLitePlugin.git

Nous allons tester que l'application par défaut fonctionne, pour cela nous allons au terminal et écrivons le code suivant

 cordova émuler android

Il commencera à compiler l'application et si tout fonctionne, nous devrions voir le périphérique émulé comme indiqué ci-dessous.

AGRANDIR

Une fois que nous avons vérifié que l'application fonctionne, nous allons commencer à développer notre exemple, nous ouvrons le fichier index.html, nous ajoutons la bibliothèque javascript suivante dans l'en-tête

Puis on modifie le bloc J'ai intégré un formulaire pour saisir des données

Informations de contact

nom
E-mail

Graver

La ligneservira à afficher les données saisies trouvées dans la base de données. A l'intérieur du répertoire css nous trouvons le fichier index.css, nous ouvrons ce fichier, nous supprimons son contenu et nous ajoutons le code de style suivant pour donner un design au formulaire.

 html, corps, h1, formulaire, ensemble de champs, ol, li {marge : 0; remplissage : 0 ; } corps {arrière-plan : #ffffff; couleur : # 111111 ; famille de polices : Géorgie, « Times New Roman », Times, serif; rembourrage : 20px ; } formulaire # contacts {arrière-plan : # 9cbc2c; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; rembourrage : 20px ; largeur : 400px ; hauteur : 150px ; } form # contacts fieldset {border: none; marge inférieure : 10 px; } form # ensemble de champs de contacts : last-of-type {margin-bottom : 0; } formulaire # contacts legend {couleur: # 384313; taille de la police : 16px ; font-weight : gras ; rembourrage en bas : 10px ; } form # contacts> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; contre-incrément : ensembles de champs; } formulaire # contacts fieldset fieldset legend {color: # 111111; taille de la police : 13px ; font-weight : normal ; rembourrage en bas : 0 ; } formulaire # contacts ol li {arrière-plan : # b9cf6a; arrière-plan : rgba (255,255,255, .3); border-color: # e3ebc3; border-color : rgba (255,255,255, .6) ; border-style : solide ; largeur de bordure : 2px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; hauteur de ligne : 30 px ; style de liste : aucun ; rembourrage : 5px 10px ; marge inférieure : 2px; } formulaire # contacts ol ol li {arrière-plan : aucun; bordure : aucune ; flotteur : gauche ; } form # contacts label {float: left; taille de la police : 13px ; largeur : 110px ; } form # contacts fieldset fieldset label {background: none no-repeat left 50%; hauteur de ligne : 20 px ; remplissage : 0 0 0 30px ; largeur : automatique ; } formulaire # ensemble de champs de contacts étiquette de l'ensemble de champs : hover {curseur : pointeur; } formulaire # contacts textarea {background: #ffffff; bordure : aucune ; -moz-border-radius : 3px ; -webkit-border-radius : 3px ; -khtml-border-radius : 3px ; police : italique 13px Georgia, "Times New Roman", Times, serif ; contour : aucun ; rembourrage : 5px ; largeur : 200px ; } form # contacts input: not ([type = submit]): focus, form # contacts textarea: focus {background: #eaeaea; } formulaire # bouton contacts {arrière-plan : # 384313; bordure : aucune ; flotteur : gauche ; -moz-border-radius : 20px ; -webkit-border-radius : 20px ; -khtml-border-radius : 20px ; rayon de bordure : 20 px ; couleur : #ffffff ; bloc de visualisation; police : 14px Georgia, « Times New Roman », Times, serif; espacement des lettres : 1px ; marge : 7px 0 0 5px ; rembourrage : 7px 20px ; text-shadow : 0 1px 1px # 000000 ; transformation de texte : majuscule ; } formulaire # bouton contacts : survolez {arrière-plan : # 1e2506; curseur : pointeur ; }

Après avoir enregistré les deux fichiers, nous exécutons à nouveau l'application :

 cordova émuler android

Nous devrions voir l'écran suivant :

AGRANDIR

Maintenant que la conception fonctionne, nous devrons créer le code javascript pour gérer la base de données. Pour cela nous allons créer un fichier dans le répertoire js qui s'appellera sqlitedb.js et nous le référencerons en ajoutant le code suivant :

Dans le fichier sqlitedb.js, nous écrivons le code suivant :

 // Nous mettons comme événement le moment où l'application démarre et commence la communication avec le périphérique document.addEventListener ("deviceready", onDeviceReady, false); // champs variables de la forme var name, email; // Je lance l'application Je crée la fonction de base de données onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Chaque transaction sur la base de données est effectuée avec l'objet défini db et est exécutée avec la méthode transaction. Cette méthode retourne un paramètre avec le résultat de cette exécution qui est stocké par convention dans le paramètre tx, chaque transaction a une fonction en paramètre qui est la transaction elle-même, par exemple écrire des données et une fonction d'erreur en cas d'échec de la transaction. On continue avec la fonction CreateDB et la fonction errorDB CreateDB function (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } fonction errorDB (tx, err) {alert ("SQL error:" + err); } // fonction Insérer des données dans la base de données fonction InsertSQL (tx) {nom = document.getElementById ('nom').value; email = document.getElementById ('email'). tx.executeSql ('INSERT INTO contacts (nom, email) VALUES ("' + nom + '", "' + email + '")'); alerte ('Journal ajouté'); } // fonction qui génère la transaction pour ajouter des données fonction record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Afficher les données de la table db.transaction (ConsultDB, errorDB); } // On consulte tous les enregistrements de la table contacts et le résultat est utilisé dans une fonction ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // La fonction ListDB reçoit le paramètre de transaction et le jeu d'enregistrements avec le contenu de la requête, nous parcourons le jeu d'enregistrements et extrayons chaque champ, nous générons une liste html puis nous l'affichons dans un div avec un identifiant de liste via innerHtml donc dynamique. function ListDB (tx, résultats) {var len = results.rows.length; var liste = ''; listing = listing.concat ("Listing:" + len + "contacts"); pour (var i = 0; je
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById (« liste »). innerHTML = liste; }

Quand on a tout le code on recompile l'application depuis le terminal avec le code suivant

 cordova émuler android

Lorsque l'émulateur sera déployé avec l'application, nous commencerons à ajouter des enregistrements à notre agenda et ceux-ci apparaîtront dans la liste ci-dessous, l'appareil conserve les données que nous entrons de manière persistante dans une mémoire virtuelle, c'est-à-dire que la base de données ne sera pas supprimée tous les fois que nous exécutons l'application dans l'émulateur ou dans un appareil réel, nous pourrons voir les données que nous enregistrions.

AGRANDIR

Pour éliminer ces données nous devrons faire une requête sql pour éliminer la table et la recréer ou supprimer uniquement les données, nous verrons cela dans un autre tutoriel.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif