Apache Cordova a Android - SQL s Javascriptem: Web SQL Database

Zaměříme se pouze na Android a jak s ním ukládat data Web SQL Database a JQuery Mobile.
V předchozím tutoriálu jsme viděli, jak vyvinout jednoduchou aplikaci s Apache Cordova, Jquery mobile, html5 a css, která by nám umožnila přidat záznamy do databáze Sqlite, v tomto případě uvidíme, co každá funkce v kódu dělá.

 Funkce Opendatabase ()

Funkce opendatabase slouží k vytvoření databáze nebo k jejímu otevření, pokud již byla vytvořena, potřebujeme čtyři parametry, název databáze, verzi, název databáze, která bude zobrazena, a velikost v bajtech. Když vytvoříme a otevřeme databázi, uloží se do proměnné, kterou v tomto případě přiřadíme db.

 funkce CreartDB () {db = window.openDatabase („Klienti“, „1,0“, „Seznam klientů“, 10 000 000);}

Funkci můžeme také spustit, když spustíte aplikaci na zařízení Android
Zatímco se aplikace spouští, voláme funkci, která vytváří databázi

 // Událost přidáme, když aplikace zahájila document.addEventListener ("deviceready", DeviceHome, false); funkce DeviceHome () {db = window.openDatabase („Klienti“, „1,0“, „Seznam klientů“, 10 000 000); } 

Také můžeme potřebovat udělat nějaký domácí úkol, když se aplikace spouští. V předchozím případě jsme viděli, jak volat funkci, když se aplikace již spustila.

 funkce Starting () {document.addEventListener ("deviceready", ConfigureApp (), false); } funkce ConfigureAPP () {document.addEventListener ("resume", OtraFuncion (), false); } 

Z HTML s událostí onload, tedy při načítání stránky voláme funkci Starting, zatímco při spouštění (deviceready) volá funkci ConfigureAPP, která poběží na pozadí (resume).
Některé události, které můžeme použít dostupné v systému Android, jsou:
připravený: k této události dochází při spuštění aplikace.
pauza: Tato událost se spustí, když aplikace začne běžet na pozadí.
shrnuje: K této události dochází, když se aplikace přesune z pozadí do popředí.
online a offline: K této události dochází, když se aplikace připojí nebo odpojí od sítě.
Existují další události související s interakcí s telefonem, ale uvidíme ty, které jsou více spojeny s kontrolou kódu.

 Funkce Transaction () 

Když chceme provést transakci typu SQL, použijeme transakční metodu. Funkce se skládá ze tří parametrů: funkce s dotazem sql, funkce pro zobrazení chyby, pokud dotaz selže, a funkce pro zobrazení, zda byl dotaz úspěšný.
Funkce dotazu bude prováděna pomocí metody ExecuteSQL. Při spuštění aplikace vytvoříme tři funkce, které se budou spouštět v řetězci, jsou to tyto:
konzultovatDB: s dotazem sql
chyba CDB (): ukáže, zda je v dotazu sql chyba
úspěch CDB (): zobrazí zprávu, pokud byl dotaz úspěšný.

 script charset = "utf-8"> // Při spouštění aplikace vytvoříme několik sql dotazů document.addEventListener ("deviceready", IniciaSQL, false); funkce StartSQL () {var db = window.openDatabase ("Kontakty", "1.0", "Seznam kontaktů", 400000); db.transaction (consultDB, errorCB, successCB); } funkce queryDB (tx) {// Vytvořte tabulku kontaktů, pokud není vytvořena tx.executeSql ('VYTVOŘIT TABULKU, KDYŽ NEEXISTUJE Kontakty (id, jméno, e -mail)'); // Vložte data do tabulky tx.executeSql ('VLOŽTE DO Kontaktů (ID, jméno, e -mail) HODNOTY (1, „José Cordova”, ”[email protected]”)'); tx.executeSql ('INSERT INTO Contacts (id, jméno, e -mail) HODNOTY (2, „Maria Alpei“, ”[email protected]“) '); } // funkce pro zachycení chyby v transakční funkci errorCDB (chyba) {alert ("Chyba v dotazu SQL:" + error.code); } // Funkce pro zobrazení funkce zprávy o úspěchu exitCDB () {alert ("Dotaz úspěšný!"); } 

Jak dotazovat data a zobrazovat je pomocí sql dotazu, který vrací typ pole nebo matice SQLResultSetList

 funkce queryDB (tx) {tx.executeSql ('SELECT * FROM Contacts', [], successCDB, errorCDB); } funkce db success (tx, results) {// získáme počet řádků var totalcontacts = results.rows.length; // zobrazujeme počet kontaktů console.log ("Celkem kontaktů:" + celkem kontaktů); // Záznamy zobrazujeme ve smyčce, kde zobrazujeme každé pole pole pro (var i = 0; i

Funkce SQLResultSetList má vlastnost row, která obsahuje záznamy pro každý řádek dotazované tabulky. Toto pole je procházeno funkcí rows.item (i) a číslem řádku. Musíme také určit, které pole v tomto řádku chceme zobrazit. Příklad results.rows.item (i) .name. Toto pole můžeme také zobrazit v některém prvku html, například v textovém poli odkazujícím na jeho identifikátor.

 funkce querySuccess (tx, results) {var len = results.rows.length; document.getElementById ("divshow"). innerHTML + = "
Jítnázev

"; pro (var i = 0; i" + results.rows.item (i) .n name +""; } } 

Potom v html kódu musíme mít v tomto případě div s identifikátorem divmotrar, aby se zobrazila tabulka s daty dotazu.

K odesílání parametrů se používají závorky ve funkci executeSQL, tato vlastnost je volitelná, protože nebudeme vždy potřebovat odesílat parametry do dotazu SQL Pokud chceme odeslat parametry do dotazu například pro aktualizaci dat z databáze:

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

Můžeme také přistupovat k funkcím s událostmi z html, jako je kliknutí na tlačítko. Podívejme se na příklad, jako kdybychom měli výchozí indexový soubor projektu Apache Cordova, můžeme přidat kód pro databázi a html kód tlačítkem Nahrát, po kliknutí na tlačítko Nahrát se spustí funkce, která vloží data do databáze.

Vyrýt

Výhody vývoje s WEB SQL DatabaseNení nutné, aby programátor nebo vývojáři znali všechny platformy, protože běží na jakékoli platformě nebo zařízení. Prohlížeče, Android, IOS atd., V některých případech s minimálními změnami. Šetří to spoustu času, protože i grafičtí designéři nebo webmasteři mohou pracovat, aniž by nutně museli být programátory, dokonce i znalosti Jquery, které jsou aplikovány na vývoj webu, jsou plně využity při vývoji aplikací Apache Cordova.
Nevýhody vývoje s WEB SQL DatabaseDatabáze Web Sql používá plugin Sqlite jako prostředek ke zpracování informací a pro datové transakce s nativní platformou používá JSON, který využívá různé funkce a parametry pro zpracování datového komplexu.
Je to jiný projekt než pro Android, takže obsahuje mnoho funkcí z nativní verze.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod