Веб-сайт, созданный с использованием 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, с терминала мы пишем следующий код:
платформа Cordova добавить AndroidМы предполагаем, что в диспетчере Android Adv у нас уже настроено устройство, но мы настраиваем то, которое поддерживает Api 19 и выше, то есть Android 4.4.2
добавить плагин Cordova https://github.com/brodysoft/Cordova-SQLitePlugin.gitМы проверим, что приложение по умолчанию работает, для этого мы идем в терминал и напишем следующий код
кордова подражать андроидОн начнет компилировать приложение, и если все будет работать, мы увидим эмулируемое устройство, как показано ниже.
Как только мы проверим, что приложение работает, мы начнем разрабатывать наш пример, откройте файл index.html, добавьте следующую библиотеку javascript в заголовок Затем мы модифицируем блок
Я включил форму для ввода данных
линияSqlite демо
Контактные данные
запись
- Имя
- по электронной почте
Он будет использоваться для отображения данных, введенных в базу данных. Внутри каталога css мы находим файл index.css, открываем этот файл, удаляем его содержимое и добавляем следующий код стиля, чтобы придать дизайну форму.
html, body, h1, form, fieldset, ol, li {margin: 0; отступы: 0; } body {background: #ffffff; цвет: # 111111; семейство шрифтов: Грузия, «Times New Roman», Times, Serif; отступы: 20 пикселей; } form # contacts {background: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; отступы: 20 пикселей; ширина: 400 пикселей; высота: 150 пикселей; } form # fieldset contacts {border: none; нижнее поле: 10 пикселей; } form # fieldset contacts: last-of-type {margin-bottom: 0; } форма # легенда контакты {цвет: # 384313; размер шрифта: 16 пикселей; вес шрифта: полужирный; padding-bottom: 10px; } form # contacts> fieldset> legend: before {content: "Шаг" counter (fieldsets) ":"; приращение счетчика: наборы полей; } form # fieldset contacts fieldset legend {color: # 111111; размер шрифта: 13 пикселей; Вес шрифта: нормальный; padding-bottom: 0; } форма # контакты ol li {background: # b9cf6a; справочная информация: rgba (255 255 255, 3); цвет границы: # e3ebc3; цвет рамки: rgba (255, 255, 255, .6); стиль границы: твердый; ширина границы: 2 пикселя; -moz-border-radius: 5px; -webkit-border-radius: 5px; высота строки: 30 пикселей; стиль списка: нет; обивка: 5px 10px; нижнее поле: 2 пикселя; } форма # контакты ol ol li {background: none; граница: нет; плавать: слева; } form # contacts label {float: left; размер шрифта: 13 пикселей; ширина: 110 пикселей; } form # contacts fieldset labelset {background: none no-repeat left 50%; высота строки: 20 пикселей; отступы: 0 0 0 30px; ширина: авто; } form # fieldset contacts fieldset label: hover {курсор: указатель; } form # textarea contacts {background: #ffffff; граница: нет; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; шрифт: курсив 13px Грузия, «Times New Roman», Times, засечек; контур: нет; обивка: 5px; ширина: 200 пикселей; } форма # контакты ввода: нет ([type = submit]): фокус, форма # контакты textarea: focus {background: #eaeaea; } форма # контакты кнопка {фон: # 384313; граница: нет; плавать: слева; -moz-border-radius: 20 пикселей; -webkit-border-radius: 20 пикселей; -khtml-border-radius: 20 пикселей; радиус границы: 20 пикселей; цвет: #ffffff; дисплей: блок; шрифт: 14px Georgia, "Times New Roman", Times, serif; межбуквенный интервал: 1px; поле: 7px 0 0 5px; обивка: 7px 20px; тень текста: 0 1px 1px # 000000; преобразование текста: верхний регистр; } кнопка формы # контактов: hover {background: # 1e2506; курсор: указатель; } После записи двух файлов мы снова запускаем приложение: кордова подражать андроидМы должны увидеть следующий экран:
Теперь, когда у нас есть дизайн, мы должны выполнить код javascript для управления базой данных. Для этого мы создадим файл в каталоге js, который будет называться sqlitedb.js, и добавим в него следующий код: Внутри файла sqlitedb.js мы пишем следующий код:
// Мы помещаем как событие, когда приложение запускается и начинает связь с устройством document.addEventListener ("deviceready", onDeviceReady, false); // переменные формируют поля var name, email; // Запускаю приложение. Я создаю функцию базы данных onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (Создать БД, ошибка БД); } Каждая транзакция в базе данных выполняется с определенным объектом db и выполняется с помощью метода транзакции, этот метод возвращает параметр с результатом этого выполнения, который сохраняется в соответствии с условием в параметре tx, каждая транзакция имеет в качестве параметра параметр которая представляет собой саму транзакцию, например, данные записи и функцию ошибки в случае сбоя транзакции. Мы продолжаем с функцией CreateDB и функцией errorDB CreateDB (tx) function {tx.executeSql ('CREATE TABLE ЕСЛИ НЕ СУЩЕСТВУЕТ контакты (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, имя TEXT NOT NULL, электронная почта TEXT NOT NULL)'); } function errorDB (tx, err) {alert ("Ошибка SQL:" + err); } // функция Вставка данных в базу данных Функция InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). value; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); оповещение («Запись добавлена»); } // функция, которая генерирует транзакцию добавления данных. record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (вставить SQL, errorDB); // Показать данные в таблице db.transaction (Консультация БД, ошибка БД); } // Мы проверяем все записи в таблице контактов и используем результат в функции ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Функция ListDB получает параметр транзакции и набор записей с содержимым запроса, мы пересекаем набор записей и извлекаем каждое поле, генерируем HTML-список, а затем показываем его в div с идентификатором, готовым через innerHtml, так динамичный. function ListDB (tx, results) {var len = results.rows.length; var list = ''; list = list.concat ("List:" + len + "contacts"); для (var i = 0; i
СТАТЬИ