Table des matières
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
plate-forme cordova ajouter androidNous 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
plug-in cordova ajouter https://github.com/brodysoft/Cordova-SQLitePlugin.gitNous allons tester que l'application par défaut fonctionne, pour cela nous allons au terminal et écrivons le code suivant
cordova émuler androidIl commencera à compiler l'application et si tout fonctionne, nous devrions voir le périphérique émulé comme indiqué ci-dessous.
AGRANDIR
Puis on modifie le bloc J'ai intégré un formulaire pour saisir des données
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.Informations de contact
Graver
- nom
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 androidNous devrions voir l'écran suivant :
AGRANDIR
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 androidLorsque 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
