Приложения за Android с Apache Cordova и SQlite

Уебсайт, създаден с HTML 5, JavaScript, CSS 3, може да бъде изпълнен на различни устройства с помощта на Apache Cordova. Ако имаме мобилно приложение и искаме да съхраняваме, управляваме и извличаме данни по ефективен и надежден начин, Apache Cordova ни предоставя приставка за обработка на SQLite бази данни.
Android от своя страна вече въвежда в своята архитектура всички необходими инструменти за създаване и управление на SQLite бази данни, така че можем да вмъкваме, променяме, консултираме и изтриваме данни. Тази база данни ще бъде локална, тоест ще се съхранява на устройството, на което се изпълнява приложението.
В друг урок вече обяснихме инсталацията на Apache Cordova, в това ще направим приложение, за да разберем как работи база данни Sqlite от Android.
В този случай ще използваме терминала на Linux, но Apache Cordova е междуплатформена. Ще започнем със създаването на проекта от терминала и в root режим, като използваме следния код:

 cordova създайте приложение com.demo.app App01

След като създадем, добавяме платформата, устройството, на което ще се изпълнява, позволява да се конфигурира емулатора в този случай това ще бъде Android, от терминала пишем следния код:

 платформа кордова добавяне на android

Предполагаме, че в Android Adv Manager вече имаме конфигурирано устройство, но конфигурираме такова, което поддържа Api 19 нататък, това е Android 4.4.2

Сега ще инсталираме приставката, за да можем да работим със Sqlite, от терминала ще изпълним следната команда, която ще изтегли и инсталира плъгина.

 добавяне на плъгин за кордова https://github.com/brodysoft/Cordova-SQLitePlugin.git

Ще тестваме дали приложението по подразбиране работи, за това отиваме до терминала и пишем следния код

 Cordova подражава на Android

Той ще започне да компилира приложението и ако всичко работи, трябва да видим емулираното устройство, както е показано по -долу.

Увеличете

След като проверим дали приложението работи, ще започнем да разработваме нашия пример, отваряме файла index.html, добавяме следната библиотека javascript в заглавката

След това модифицираме блока Включих формуляр за въвеждане на данни

Информация за връзка

Име
Електронна поща

Гравиране

Линиятаще служи за показване на въведените данни, намерени в базата данни. В директорията css намираме файла index.css, отваряме този файл, изтриваме съдържанието му и добавяме следния код на стил, за да придадем дизайн на формуляра.

 html, body, h1, form, fieldset, ol, li {margin: 0; подложка: 0; } body {фон: #ffffff; цвят: # 111111; семейство шрифтове: Джорджия, "Times New Roman", Times, засечки; подплата: 20px; } формулирайте # контакти {фон: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; подплата: 20px; ширина: 400px; височина: 150px; } form # контакти fieldset {border: none; margin-bottom: 10px; } form # контакти fieldset: last-of-type {margin-bottom: 0; } формулирайте # легенда за контакти {цвят: # 384313; размер на шрифта: 16px; тегло на шрифта: удебелен; подплата-дъно: 10px; } form # contacts> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; контра-увеличение: полеви набори; } формуляр # контакти fieldset легенда fieldset {цвят: # 111111; размер на шрифта: 13px; тегло на шрифта: нормално; подплата-дъно: 0; } формулирайте # контакти ol li {фон: # b9cf6a; фон: rgba (255,255,255, .3); border-color: # e3ebc3; цвят на границата: rgba (255,255,255, .6); бордюрен стил: плътен; border-width: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; височина на линията: 30px; списък-стил: няма; подложка: 5px 10px; марж-дъно: 2px; } формулирайте # контакти ol ol li {background: none; граница: няма; поплавък: ляво; } формуляр # етикет на контакти {float: left; размер на шрифта: 13px; ширина: 110px; } формуляр # контакти поле поле набор етикет {фон: няма без повторение вляво 50%; височина на линията: 20px; подложка: 0 0 0 30px; ширина: авто; } формуляр # контакти fieldset етикет на полето: hover {курсор: pointer; } формуляр # контакти textarea {фон: #ffffff; граница: няма; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; шрифт: курсив 13px Джорджия, "Times New Roman", Times, засечки; контур: няма; подложка: 5px; ширина: 200px; } формуляр # вход за контакти: not ([type = submit]): focus, form # contacts textarea: focus {background: #eaeaea; } формуляр # бутон за контакти {фон: # 384313; граница: няма; поплавък: ляво; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; рамка-радиус: 20px; цвят: #ffffff; дисплей: блок; шрифт: 14px Джорджия, "Times New Roman", Times, засечки; интервал между буквите: 1px; марж: 7px 0 0 5px; подложка: 7px 20px; текст-сянка: 0 1px 1px # 000000; преобразуване на текст: главни букви; } формуляр # бутон за контакти: задръжте курсора на мишката {фон: # 1e2506; курсор: показалец; }

След като запишем двата файла, стартираме приложението отново:

 Cordova подражава на Android

Трябва да видим следния екран:

Увеличете

Сега, когато дизайнът работи, ще трябва да направим javascript кода за управление на базата данни. За целта ще създадем файл в директория js, който ще се нарича sqlitedb.js и ще го препратим, като добавим следния код:

Вътре във файла sqlitedb.js пишем следния код:

 // Поставяме като събитие момента, в който приложението стартира и започва комуникация с устройството document.addEventListener ("deviceready", onDeviceReady, false); // променливи полета на формата var name, email; // Стартирам приложението Създавам функцията на базата данни onDeviceReady () {var db = window.openDatabase ("Програма", "1.0", "Програма", 100000); db.transaction (CreateDB, errorDB); } Всяка транзакция в базата данни се извършва с дефиниран обект db и се изпълнява с метода на транзакцията.Този метод връща параметър с резултата от това изпълнение, който се съхранява по конвенция в параметъра tx, всяка транзакция има функция като параметър която е самата транзакция, например запис на данни и функция за грешка в случай, че транзакцията се провали. Продължаваме с функцията CreateDB и функцията errorDB CreateDB функция (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, име TEXT NOT NULL, имейл TEXT NOT NULL)'); } функция errorDB (tx, err) {alert ("SQL грешка:" + err); } // функция Вмъкване на данни във функцията на базата данни InsertSQL (tx) {name = document.getElementById ('name'). value; имейл = document.getElementById ('имейл'). стойност; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); alert ('Дневникът е добавен'); } // функция, която генерира транзакцията за добавяне на функция за данни record () {var db = window.openDatabase ("Програма", "1.0", "Програма", 100000); db.transaction (InsertSQL, errorDB); // Показване на данни от таблица db.transaction (ConsultDB, errorDB); } // Консултираме се с всички записи на таблицата с контакти и резултатът се използва във функция ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Функцията ListDB получава параметъра на транзакцията и набора от записи със съдържанието на заявката, преминаваме през набора от записи и извличаме всяко поле, генерираме html списък и след това го показваме в div с идентификатор на списък чрез innerHtml, така че динамичен. функция ListDB (tx, резултати) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Обява:" + len + "контакти"); за (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('списък'). innerHTML = списък; }

Когато имаме целия код, прекомпилираме приложението от терминала със следния код

 Cordova подражава на Android

Когато емулаторът бъде разгърнат с приложението, ние ще започнем да добавяме записи към нашата програма и те ще се появят в списъка по -долу, устройството съхранява данните, които постоянно въвеждаме във виртуална памет, което означава, че базата данни няма да бъде изтрита всеки когато изпълним приложението в емулатора или в истинско устройство, ще можем да видим данните, които регистрирахме.

Увеличете

За да премахнем тези данни, ще трябва да направим sql заявка, за да премахнем таблицата и да я пресъздадем или да изтрием само данните, ще видим това в друг урок.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка