Apache Cordova et Android - SQL avec Javascript : Base de données Web SQL

Nous nous concentrerons uniquement sur Android et comment stocker des données avec Base de données Web SQL et JQuery Mobile.
Dans un tutoriel précédent, nous avons vu comment développer une application simple avec Apache Cordova, Jquery mobile, html5 et css qui nous permettrait d'ajouter des enregistrements à une base de données Sqlite, dans ce cas, nous verrons ce que chaque fonction fait dans le code.

 Fonction Opendatabase()

La fonction opendatabase permet de créer une base de données ou de l'ouvrir si elle a déjà été créée, nous avons besoin de quatre paramètres, nom de la base de données, version, nom de la base de données qui sera vue et la taille en octets. Lorsque nous créons et ouvrons une base de données, elle est enregistrée dans la variable que nous attribuons dans ce cas db.

 function CreartDB () {db = window.openDatabase ("Clients", "1.0", "Liste des clients", 1000000);}

Nous pouvons également exécuter la fonction lorsque vous démarrez l'application sur l'appareil Android
Pendant que l'application démarre, nous appelons la fonction qui crée la base de données

 // Nous ajoutons un événement lorsque l'application a démarré document.addEventListener ("deviceready", DeviceHome, false); function DeviceHome () {db = window.openDatabase ("Clients", "1.0", "Clients List", 1000000); } 

On peut aussi avoir besoin de faire quelques devoirs pendant que l'application démarre.Dans le cas précédent, nous avons vu comment appeler une fonction alors que l'application avait déjà démarré.

 function Démarrage () {document.addEventListener ("deviceready", ConfigureApp (), false); } fonction ConfigureAPP () {document.addEventListener ("resume", OtraFuncion (), false); } 

À partir du HTML avec l'événement onload, c'est-à-dire que lors du chargement de la page, nous appelons la fonction de démarrage, tandis que lors du démarrage (deviceready), il appelle la fonction ConfigureAPP qui s'exécutera en arrière-plan (resume).
Certains événements que nous pouvons utiliser disponibles sur Android sont :
appareil prêt : cet événement se produit lorsque l'application a démarré.
pause: Cet événement est déclenché lorsqu'une application démarre en arrière-plan.
résume : Cet événement se produit lorsque l'application passe de l'arrière-plan au premier plan.
en ligne et hors ligne : Cet événement se produit lorsque l'application se connecte ou se déconnecte d'un réseau.
Il existe d'autres événements liés à l'interaction avec le téléphone, mais nous verrons ceux qui sont davantage associés au contrôle du code.

 Fonction de transaction () 

Lorsque nous voulons effectuer une transaction de type SQL, nous utilisons la méthode transaction. La fonction se compose de trois paramètres : une fonction avec la requête SQL, une fonction pour afficher l'erreur si la requête échoue et une fonction pour montrer si la requête a réussi.
La fonction de requête sera exécutée via la méthode ExecuteSQL. Nous allons créer trois fonctions à exécuter en chaîne au démarrage de l'application, ce sont :
consulterDB : avec requête SQL
errorCDB (): affichera s'il y a une erreur dans la requête SQL
succès CDB (): affichera un message si la requête a réussi.

 script charset = "utf-8"> // Au démarrage de l'application, nous effectuons des requêtes SQL document.addEventListener ("deviceready", IniciaSQL, false); function StartSQL () {var db = window.openDatabase ("Contacts", "1.0", "Liste de contacts", 400000); db.transaction (consultDB, errorCB, successCB); } function queryDB (tx) {// Crée la table des contacts si elle n'est pas créée tx.executeSql ('CREATE TABLE IF NOT EXISTS Contacts (id, name, email)'); // Insérer des données dans la table tx.executeSql ('INSERT INTO Contacts (id, name, email) VALUES (1, "José Cordova", ”[email protected]”)'); tx.executeSql ('INSERT INTO Contacts (identifiant, nom, e-mail) VALEURS (2, "Maria Alpei", "[email protected]") '); } // fonction pour intercepter l'erreur dans la transaction function errorCDB (error) {alert ("Error in the SQL query:" + error.code); } // Fonction pour afficher un message de réussite function exitCDB () {alert ("Requête réussie!"); } 

Comment interroger des données et les afficher à l'aide d'une requête SQL qui renvoie un type de tableau ou de matrice SQLResultSetList

 fonction queryDB (tx) {tx.executeSql ('SELECT * FROM Contacts', [], successCDB, errorCDB); } function db success (tx, results) {// on obtient le nombre de lignes var totalcontacts = results.rows.length; // nous montrons le nombre de contacts console.log ("Total Contacts:" + totalcontacts); // Nous montrons les enregistrements dans une boucle où nous montrons chaque champ du tableau pour (var i = 0; i

La fonction SQLResultSetList a la propriété rows qui contient les enregistrements pour chaque ligne de la table interrogée. Ce tableau est parcouru avec la fonction rows.item (i) et le numéro de ligne. Nous devons également indiquer quel champ de cette ligne nous voulons afficher. Exemple results.rows.item (i) .name. Nous pouvons également afficher ce champ dans un élément html tel qu'un champ de texte faisant référence à son identifiant.

 fonction querySuccess (tx, résultats) {var len = results.rows.length; document.getElementById ("divshow"). innerHTML + = "
Allernom

"; pour (var i = 0; je"+ résultats.lignes.élément (i) .n nom +""; } } 

Ensuite dans le code html nous devons avoir dans ce cas le div avec l'identifiant divmotrar pour que le tableau avec les données de la requête soit affiché.

Les crochets dans la fonction executeSQL sont utilisés pour envoyer des paramètres cette propriété est facultative car nous n'aurons pas toujours besoin d'envoyer des paramètres à la requête SQL Si nous voulons envoyer des paramètres à une requête par exemple pour mettre à jour des données de la base de données :

 function Update (id, name) {db.transaction (function (tx) {tx.executeSql ("UPDATE Contacts SET name" =? WHERE id =? ", [name, id], errorCDB);}); 

Nous pouvons également accéder à des fonctions avec des événements à partir de HTML comme cliquer sur un bouton. Veamos un ejemplo como si tenemos el archivo index por defecto de un proyecto Apache Cordova podemos añadir el código para la base de datos y el código html con el botón Grabar, al hacer clic en el botón Grabar se ejecutara una función que insertara datos en la base de données.

Graver

Avantages de développer avec WEB SQL DatabaseIl n'est pas nécessaire que le programmeur ou les développeurs connaissent toutes les plates-formes car il s'exécute sur n'importe quelle plate-forme ou appareil. Navigateurs, Android, IOS, etc, dans certains cas avec des changements minimes. Cela fait gagner beaucoup de temps puisque même les graphistes ou les webmasters peuvent travailler sans nécessairement être programmeur, même la connaissance de Jquery qui est appliquée au développement web est pleinement utilisée dans le développement d'applications Apache Cordova.
Inconvénients du développement avec WEB SQL DatabaseLa base de données Web Sql utilise le plugin Sqlite comme moyen de traiter les informations et pour les transactions de données avec la plate-forme native, elle utilise JSON, qui utilise différentes fonctions et paramètres pour gérer les données complexes.
C'est un projet différent d'Android donc il intègre beaucoup de fonctionnalités de la version native.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif