Aplikacje na Androida z Apache Cordova i SQlite

Stronę internetową wykonaną w HTML 5, JavaScript, CSS 3 można uruchomić na różnych urządzeniach za pomocą Apache Cordova. Jeśli posiadamy aplikację mobilną i chcemy przechowywać, zarządzać i pobierać dane w sposób wydajny i niezawodny, Apache Cordova udostępnia nam wtyczkę do obsługi baz danych SQLite.
Android ze swojej strony zawiera już w swojej architekturze wszystkie niezbędne narzędzia do tworzenia i zarządzania bazami danych SQLite, dzięki czemu możemy wstawiać, modyfikować, przeglądać i usuwać dane. Ta baza danych będzie lokalna, to znaczy będzie przechowywana na urządzeniu, na którym uruchomiona jest aplikacja.
W innym samouczku wyjaśniliśmy już instalację Apache Cordova, w tym stworzymy aplikację, aby zrozumieć, jak działa baza danych Sqlite z Androida.
W tym przypadku użyjemy terminala Linux, ale Apache Cordova jest wieloplatformowy. Zaczniemy od stworzenia projektu z terminala i w trybie roota za pomocą poniższego kodu:

 cordova utwórz aplikację com.demo.app App01

Po utworzeniu dodajemy platformę, urządzenie na którym zostanie to wykonane pozwala skonfigurować emulator w tym przypadku będzie to Android, z terminala piszemy następujący kod:

 platforma cordova dodaje androida

Przypuszczamy, że w menedżerze Android Adv mamy już skonfigurowane urządzenie, ale konfigurujemy takie, które obsługuje Api 19 wzwyż, czyli Android 4.4.2

Teraz zainstalujemy wtyczkę, aby móc pracować z Sqlite, z terminala wykonamy następujące polecenie, które pobierze i zainstaluje wtyczkę.

 dodaj wtyczkę cordova https://github.com/brodysoft/Cordova-SQLitePlugin.git

Przetestujemy, czy domyślna aplikacja działa, w tym celu idziemy do terminala i piszemy następujący kod

 Cordova emuluje Androida

Rozpocznie się kompilacja aplikacji i jeśli wszystko działa, powinniśmy zobaczyć emulowane urządzenie, jak pokazano poniżej.

POWIĘKSZAĆ

Po sprawdzeniu działania aplikacji zaczniemy rozwijać nasz przykład, otwieramy plik index.html, w nagłówku dodajemy następującą bibliotekę javascript

Następnie modyfikujemy blok Włączyłem formularz do wprowadzania danych

Informacje kontaktowe

Nazwa
E-mail

Grawerować

Liniaposłuży do wyświetlenia wprowadzonych danych znalezionych w bazie danych. Wewnątrz katalogu css znajdujemy plik index.css, otwieramy ten plik, usuwamy jego zawartość i dodajemy następujący kod stylu, aby nadać projekt formularzowi.

 html, body, h1, forma, zestaw pól, ol, li {margin: 0; wypełnienie: 0; } ciało {tło: #ffffff; kolor: # 111111; rodzina czcionek: Georgia, „Times New Roman”, Times, szeryf; wypełnienie: 20px; } formularz # kontakty {tło: # 9cbc2c; -moz-border-radius: 5px; -webkit-obramowanie-promień: 5px; wypełnienie: 20px; szerokość: 400px; wysokość: 150px; } formularz # zestaw pól kontaktów {border: none; margines-dolny: 10px; } formularz # kontakty zestaw pól: last-of-type {margin-bottom: 0; } formularz # legenda kontaktów {color: # 384313; rozmiar czcionki: 16px; grubość czcionki: pogrubiona; dopełnienie-dolne: 10px; } formularz # kontakty> zestaw pól> legenda: przed {treść: licznik "kroków" (zestawy pól) ":"; przeciw-inkrementacja: zestawy pól; } formularz # kontakty zestaw pól legenda zestawu pól {kolor: # 111111; rozmiar czcionki: 13px; grubość czcionki: normalna; dopełnienie-dolne: 0; } formularz # kontakty ol li {tło: # b9cf6a; tło: rgba (255,255,255, .3); kolor obramowania: # e3ebc3; kolor obramowania: rgba (255,255,255, .6); styl obramowania: solidny; szerokość obramowania: 2px; -moz-border-radius: 5px; -webkit-obramowanie-promień: 5px; wysokość linii: 30px; styl listy: brak; dopełnienie: 5px 10px; margines-dolny: 2px; } formularz # kontakty ol ol li {tło: brak; granica: brak; pływak: lewy; } formularz # etykieta kontaktów {float: left; rozmiar czcionki: 13px; szerokość: 110px; } formularz # kontakty zestaw pól etykieta zestawu pól {tło: brak bez powtórzeń w lewo 50%; wysokość linii: 20px; dopełnienie: 0 0 0 30px; szerokość: auto; } formularz # kontakty zestaw pól etykieta zestawu pól: hover {kursor: wskaźnik; } formularz # kontakty textarea {background: #ffffff; granica: brak; -moz-border-radius: 3px; -webkit-obramowanie-promień: 3px; -khtml-border-radius: 3px; czcionka: kursywa 13px Georgia, „Times New Roman”, Times, szeryf; zarys: brak; wypełnienie: 5px; szerokość: 200px; } formularz # kontakty input: not ([typ = prześlij]): fokus, formularz # kontakty textarea: focus {background: #eaeaea; } formularz # przycisk kontaktów {tło: # 384313; granica: brak; pływak: lewy; -moz-border-radius: 20px; -webkit-obramowanie-promień: 20px; -khtml-border-radius: 20px; promień obramowania: 20px; kolor: #ffffff; Blok wyświetlacza; czcionka: 14px Georgia, „Times New Roman”, Times, szeryf; odstępy między literami: 1px; margines: 7px 0 0 5px; dopełnienie: 7px 20px; cień tekstu: 0 1px 1px # 000000; transformacja tekstu: wielkie litery; } przycisk formularza # kontakty: najedź {tło: # 1e2506; kursor: wskaźnik; }

Po nagraniu dwóch plików ponownie uruchamiamy aplikację:

 Cordova emuluje Androida

Powinniśmy zobaczyć następujący ekran:

POWIĘKSZAĆ

Teraz, gdy projekt już działa, będziemy musieli stworzyć kod javascript do zarządzania bazą danych. W tym celu utworzymy plik w katalogu js, który będzie nazywał się sqlitedb.js i będziemy się do niego odwoływać, dodając następujący kod:

Wewnątrz pliku sqlitedb.js piszemy następujący kod:

 // Jako zdarzenie umieszczamy moment uruchomienia aplikacji i rozpoczęcia komunikacji z urządzeniem document.addEventListener ("deviceready", onDeviceReady, false); // pola zmiennych w postaci var name, email; // uruchamiam aplikację tworzę funkcję bazy danych onDeviceReady() {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Każda transakcja w bazie danych jest wykonywana ze zdefiniowanym obiektem db i realizowana jest metodą transakcyjną Metoda ta zwraca parametr z wynikiem tej realizacji, który jest umownie zapisywany w parametrze tx, każda transakcja ma funkcję jako parametr czyli sama transakcja, na przykład zapis danych i funkcja błędu w przypadku niepowodzenia transakcji. Kontynuujemy pracę z funkcją CreateDB i funkcją errorDB CreateDB (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS kontakty (id INTEGER NOT NULL AUTOINCREMENT PRIMARY KEY, nazwa TEXT NOT NULL, email TEXT NOT NULL)'); } function errorDB (tx, err) {alert ("Błąd SQL:" + błąd); } // function Wstaw dane do bazy danych function InsertSQL (tx) {name = document.getElementById ('name').value; email = document.getElementById ('email').wartość; tx.executeSql ('WSTAW DO kontaktów (nazwisko, e-mail) WARTOŚCI ("' + nazwa + '", "' + e-mail + '")'); alert („Dziennik dodany”); } // funkcja generująca transakcję w celu dodania rekordu funkcji danych () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Pokaż dane z tabeli db.transaction (ConsultDB, errorDB); } // Sprawdzamy wszystkie rekordy tabeli kontaktów, a wynik jest używany w funkcji ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM Contacts', [], ListDB, errorDB); } // Funkcja ListDB otrzymuje parametr transakcji oraz zestaw rekordów z treścią zapytania, przechodzimy przez zestaw rekordów i wyodrębniamy każde pole, generujemy listę html a następnie pokazujemy ją w div z identyfikatorem listy przez innerHtml tak dynamiczny. function ListDB (tx, wyniki) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Lista:" + len + "kontakty"); dla (zmienna i = 0; i
'+ wyniki.wiersze.item (i) .nazwa +' '+ wyniki.wiersze.item (i) .email); } document.getElementById ('list') innerHTML = lista; }

Gdy mamy już cały kod, przekompilowujemy aplikację z terminala następującym kodem

 Cordova emuluje Androida

Gdy emulator zostanie wdrożony wraz z aplikacją zaczniemy dodawać rekordy do naszej Agendy i pojawią się one poniżej, urządzenie przechowuje dane, które wprowadzamy na stałe w pamięci wirtualnej, czyli baza danych nie zostanie usunięta co gdy uruchomimy aplikację w emulatorze lub w rzeczywistym urządzeniu będziemy mogli zobaczyć dane, które rejestrowaliśmy.

POWIĘKSZAĆ

Aby wyeliminować te dane, będziemy musieli wykonać zapytanie sql, aby wyeliminować tabelę i odtworzyć ją lub usunąć tylko dane, zobaczymy to w innym samouczku.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt