Учебное пособие по Apache Cordova: разработка мобильных приложений с помощью Cordova

Мобильные приложения проникают повсюду, начиная со смартфонов и планшетов и заканчивая смарт-часами, а вскоре их можно найти и в других носимых устройствах. Однако разработка для каждой отдельной мобильной платформы может оказаться утомительной задачей, особенно если ваши ресурсы ограничены или если вы являетесь разработчиком-одиночкой, а не компанией по разработке мобильных приложений.

Именно здесь может пригодиться сведущий разработчик Apache Cordova, предоставляющий способ разработки мобильных приложений с использованием стандартных веб-технологий — HTML5, CSS3 и JavaScript.

В 2009 году стартап под названием Nitobi создал PhoneGap, API с открытым исходным кодом для доступа к собственным мобильным ресурсам, с целью дать разработчикам возможность создавать мобильные приложения с использованием стандартных веб-технологий. По замыслу Нитоби, большинство мобильных приложений вскоре будут разрабатываться с использованием PhoneGap, но у разработчиков по-прежнему будет возможность писать собственный код, когда это необходимо, будь то из-за проблем с производительностью или из-за отсутствия метода доступа к определенному оборудованию.

Кордова PhoneGap?

На самом деле такого нет. Случилось так, что Adobe приобрела Nitobi в 2011 году и передала ядро ​​с открытым исходным кодом Apache Software Foundation, который переименовал его в Apache Cordova. Распространенная аналогия, с которой вы часто будете сталкиваться, заключается в том, что Cordova для PhoneGap — это то же самое, что WebKit для Chrome или Safari.

Очевидно, что различия между Cordova и PhoneGap поначалу были минимальными. Со временем Adobe PhoneGap разработала собственный набор проприетарных функций, в то время как Cordova поддерживалась и до сих пор поддерживается сообществом разработчиков открытого исходного кода. В этом обзоре и руководстве по Apache Cordova разработка приложений Cordova будет рассмотрена более подробно, и хотя некоторые из них могут относиться к PhoneGap, само по себе это не следует рассматривать как руководство по PhoneGap.

Возможности Apache Cordova

По сути, Cordova не имеет ограничений по отношению к собственным приложениям. То, что вы получаете с Cordova, — это просто API JavaScript, который служит оболочкой для собственного кода и согласован на всех устройствах. Вы можете рассматривать Cordova как контейнер приложения с веб-представлением, которое охватывает весь экран устройства. Веб-представление, используемое Cordova, — это то же веб-представление, которое используется в родной операционной системе. В iOS это UIWebView Objective-C по умолчанию или пользовательский класс WKWebView ; на Android это android.webkit.WebView .

Apache Cordova поставляется с набором предварительно разработанных подключаемых модулей, которые обеспечивают доступ к камере устройства, GPS, файловой системе и т. д. По мере развития мобильных устройств добавление поддержки дополнительного оборудования — это просто вопрос разработки новых подключаемых модулей.

Наконец, приложения Cordova устанавливаются так же, как и собственные приложения. Это означает, что при создании кода для iOS будет создан файл IPA, для Android — файл APK, а при создании кода для Windows Phone — файл XAP. Если вы вложите достаточно усилий в процесс разработки, ваши пользователи могут даже не осознавать, что они не используют нативное приложение.

Рабочие процессы разработки Apache Cordova

Есть два основных пути, которыми вы можете следовать при разработке с помощью Cordova:

• Если вы намерены развернуть приложение на как можно большем количестве платформ с минимальной или вообще без разработки для конкретных платформ, вам следует использовать кроссплатформенный рабочий процесс. Основным инструментом, поддерживающим этот рабочий процесс, является интерфейс командной строки Cordova (CLI), который служит абстракцией более высокого уровня для настройки и создания вашего приложения для различных платформ. Это наиболее часто используемый путь развития.
• Если вы планируете разрабатывать приложение с учетом конкретной платформы, вам следует использовать рабочий процесс, ориентированный на платформу. Таким образом, вы сможете настраивать и изменять свой код на более низком уровне, смешивая собственные компоненты с компонентами Cordova. Несмотря на то, что вы можете использовать этот подход для кроссплатформенной разработки, этот процесс будет более длительным и утомительным.

Обычно рекомендуется начинать с рабочего процесса кроссплатформенной разработки, поскольку переход на разработку, ориентированную на платформу, довольно прост. Однако, если вы изначально начнете с рабочего процесса, ориентированного на платформу, вы не сможете переключиться на кроссплатформенную разработку, поскольку интерфейс командной строки перезапишет ваши настройки после запуска процесса сборки.

Предварительные условия и установка Cordova

Прежде чем устанавливать и запускать что-либо, связанное с Cordova, вам необходимо установить SDK для каждой платформы, для которой вы собираетесь создавать свое приложение. В этой статье мы сосредоточимся на платформе Android; однако процесс с участием других платформ аналогичен.

Вы должны загрузить Android SDK, найденный здесь. Для Windows SDK поставляется в виде установщика, а для Linux и OSX — в виде архива, который можно просто распаковать. После извлечения/установки пакета вам нужно будет добавить каталоги sdk/tools и sdk/platform-tools в переменную PATH . Переменная PATH используется Cordova для поиска двоичных файлов, необходимых для процесса сборки. Если у вас не установлена ​​Java, вам следует установить JDK вместе с Ant. ANT_HOME и JAVA_HOME должны быть установлены в папки bin JDK и Ant, а после установки Android SDK установите для переменной ANDROID_HOME значение Android/Sdk . Все местоположения в трех переменных *_HOME также должны быть в вашей PATH .

После того, как вы установили команду android SDK, она станет доступна в вашей командной строке. Выполните его, чтобы открыть диспетчер SDK и установить последние инструменты и Android API. Скорее всего, вам потребуются инструменты Android SDK, инструменты платформы Android SDK, инструменты сборки Android SDK, платформа SDK, API-интерфейсы Google Intel x86 Atom System Image, Sources for Android SDK и Intel x86 Emulator Accelerator (установщик HAXM) . После этого вы сможете создать эмулятор с android avd .

Cordova CLI зависит от Node.js и клиента Git, поэтому загрузите и установите Node с nodejs.org и Git с git-scm.com. Вы будете использовать npm для установки самой Cordova CLI, а также для установки дополнительных плагинов, а Cordova будет использовать git за кулисами для загрузки необходимых зависимостей. Наконец, запустите

 npm install -g cordova

… для глобальной установки Cordova CLI ( npm install cordova недостаточно.)

Подводя итог, вот пакеты, которые вам понадобятся:

• Джава
• Муравей
• SDK для Android
• NodeJS
• Гит

И эти переменные среды необходимо будет обновить:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Начальная загрузка приложения

Если вы успешно установили Cordova, теперь у вас должен быть доступ к утилите командной строки Cordova. Откройте терминал или командную строку и перейдите в каталог, в котором вы хотите создать свой первый проект Cordova. Чтобы запустить приложение, введите следующую команду:

 cordova create toptal toptal.hello HelloToptal

Командная строка состоит из имени команды cordova , за которой следует подкоманда create . Подкоманда вызывается с тремя дополнительными параметрами: папкой, в которую будет помещено приложение, пространством имен приложения и его отображаемым именем. Это загружает приложение в папку со следующей структурой:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

Папка www содержит ядро ​​вашего приложения. Здесь вы разместите свой код приложения, который является общим для всех платформ.

Хотя Cordova позволяет легко разрабатывать приложения для разных платформ, иногда вам нужно добавить настройки. При разработке для нескольких платформ вам не нужно изменять исходные файлы в каталогах различных platforms/[platform-name][assets]/www , потому что они регулярно перезаписываются файлами www верхнего уровня.

На этом этапе вы также можете открыть файл config.xml и изменить метаданные для вашего приложения, такие как автор и описание.

Добавьте свою первую платформу, используя:

 cordova platform add android

Если вы передумаете позже, вы можете легко удалить платформу из процесса сборки:

 cordova platform rm android

Изучив каталог платформ, вы заметите в нем папку android . Для каждой добавляемой вами платформы Cordova создаст новый каталог в платформах и продублирует в нем папку www . Если, например, вы хотите настроить свое приложение для Android, вы можете изменить файлы в файле platforms/android/assets/www и переключиться на инструменты оболочки для конкретной платформы.

Однако помните, что если вы пересоберете свое приложение с помощью CLI (используемого для кросс-платформенной разработки), Cordova перезапишет изменения, которые вы сделали для каждой платформы, поэтому либо убедитесь, что они находятся под контролем версий, либо вы делаете специфичные для платформы изменения. изменения после того, как вы закончили кросс-платформенную разработку. Как мы упоминали ранее, перейти от кроссплатформенной разработки к платформенно-ориентированной несложно. Движения в другую сторону нет.

Если вы хотите продолжать использовать кроссплатформенный рабочий процесс и по-прежнему выполнять настройки для конкретной платформы, вам следует использовать папку слияний верхнего уровня. Начиная с Cordova версии 3.5, эта папка была удалена из шаблона приложения по умолчанию, но если она вам нужна, вы можете просто создать ее вместе с другими каталогами верхнего уровня ( hooks , platforms , plugins и www ).

Индивидуальные настройки платформы помещаются в merges/[platform-name] и применяются после исходных файлов в папке www верхнего уровня. Таким образом, вы можете либо добавить новые исходные файлы для определенных платформ, либо переопределить целые исходные файлы верхнего уровня файлами для конкретных платформ. Возьмем, к примеру, следующую структуру:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

В этом случае выходной файл для Android будет содержать файлы app.js и android.js , но выходной файл для Windows Phone 8 будет содержать только файл app.js , который находится в папке merges/wp8 , поскольку файлы в merges/[platform] переопределяют файлы в www .

Каталог плагинов содержит информацию о плагинах для каждой платформы. На данный момент у вас должен быть только файл android.json со следующей структурой:

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

Давайте создадим приложение и развернем его на устройстве Android. Вы также можете использовать эмулятор, если хотите.

Cordova предоставляет несколько шагов CLI для создания и запуска приложений: cordova prepare cordova compile cordova build (сокращение от предыдущих двух), cordova emulate и cordova run (которая включает в себя build и также может запускать эмулятор). Это не должно вас смущать, потому что в большинстве случаев вы хотели бы собрать и запустить свое приложение в эмуляторе:

 cordova run --emulator

При желании вы можете подключить свое устройство через USB-порт, включить режим отладки USB и развернуть свое первое приложение Apache Cordova прямо на своем устройстве, просто запустив его:

 cordova run

Это скопирует все ваши файлы в platforms/* и выполнит все необходимые задачи.

Вы можете ограничить объем процесса сборки, указав имя платформы, для которой вы хотите собрать приложение и/или даже конкретный эмулятор, например:

 cordova run android --emulator

или

 cordova run ios --emulator --target="iPhone-8-Plus"

Практическое руководство по Apache Cordova

Давайте создадим простое учебное приложение, чтобы продемонстрировать использование Cordova и его плагинов. Полную демонстрацию можно найти в этом репозитории GitHub, так что вы можете загрузить ее и просмотреть ее части вместе с этим кратким руководством Cordova.

Мы будем использовать созданную вами первоначальную настройку и добавим дополнительный код. Допустим, мы хотим добавить новые проекты в воображаемую базу данных Toptal, а также просмотреть существующие. Откройте index.html и настройте две вкладки следующим образом:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Обратите внимание, что я добавил Bootstrap и jQuery Mobile в качестве зависимостей. Имейте в виду, что для создания современных гибридных приложений были разработаны гораздо лучшие решения и фреймворки, но, поскольку большинство (если не все) веб-разработчиков знакомы с этими двумя библиотеками, имеет смысл использовать их для обучения новичков. Вы можете загрузить таблицы стилей с GitHub или использовать свои собственные, если хотите.

Давайте перейдем к файлу index.js и сократим его до следующего:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Помните, что рекомендуемая архитектура для приложений Cordova — это создание одностраничного приложения (SPA). Таким образом, все ресурсы загружаются только один раз при запуске приложения и могут оставаться в веб-представлении до тех пор, пока приложение работает. Кроме того, с SPA у пользователя не будет перезагрузки страницы, что не просто типично для нативных приложений. Имея это в виду, давайте настроим простой контроллер для переключения между двумя вкладками:

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

На данный момент у контроллера есть два метода: один для рендеринга представления поиска и один для рендеринга представления пост-проекта. Давайте инициализируем его в нашем файле index.js , сначала объявив его вверху и сконструировав в методе onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Наконец, добавьте ссылку на скрипт в index.html над ссылкой на index.js . Вы можете скачать представления Search и Post прямо с GitHub. Поскольку частичные просмотры считываются из файла, некоторые браузеры, такие как Chrome, при попытке отобразить вашу страницу будут жаловаться на междоменные запросы.

Возможным решением здесь будет запуск локального статического сервера, например, с помощью модуля node-static npm. Кроме того, здесь вы можете начать думать об использовании некоторых фреймворков, таких как PhoneGap и/или Ionic. Все они предоставляют ряд инструментов разработки, включая эмуляцию в браузере, горячую перезагрузку и генерацию кода (скаффолдинг).

А пока давайте просто выполним развертывание на устройстве Android, выполнив следующее:

 cordova run android

На этом этапе ваше приложение должно иметь две вкладки. Первая вкладка позволяет искать проекты:

Вторая вкладка позволяет размещать новые проекты:

Все, что у нас есть сейчас, — это классическое веб-приложение, работающее внутри веб-представления. На самом деле мы не использовали ни одну из встроенных функций, поэтому давайте попробуем сделать это сейчас. Распространенный вопрос — как хранить данные локально на устройстве, а точнее, какой тип хранилища использовать. Есть несколько способов:

• Локальное хранилище
• WebSQL
• ИндекседБД
• Хранилище на стороне сервера, доступ к которому осуществляется через веб-службу
• Сторонние плагины, предоставляющие другие возможности

LocalStorage подходит для хранения небольших объемов данных, но его будет недостаточно, если вы создаете приложение, интенсивно использующее данные, поскольку доступное пространство варьируется от 3 до 10 МБ. IndexedDB может быть лучшим решением для этого случая. WebSQL устарел и не поддерживается на некоторых платформах. Наконец, использование веб-сервисов для извлечения и изменения данных хорошо вписывается в парадигму SPA, но не работает, когда ваше приложение переходит в автономный режим. Методы PWA вместе с Service Workers недавно пришли в мир Cordova, чтобы помочь с этим.

Кроме того, существует множество дополнительных сторонних плагинов, которые заполняют пробелы в ядре Cordova. Плагин File может быть весьма полезен, поскольку он предоставляет вам доступ к файловой системе устройства, позволяя создавать и хранить файлы. А пока давайте попробуем SQLitePlugin, который предоставляет вам локальную базу данных SQLite. Вы можете добавить его в свой проект, запустив:

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin предоставляет API для базы данных SQLite устройства и служит настоящим механизмом сохранения. Мы можем создать простую службу хранилища следующим образом:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Вы можете загрузить код для загрузки и добавления проектов с GitHub и вставить его в соответствующие заполнители. Не забудьте добавить SQLiteStorageService.js в файл index.html над Controller.js и инициализировать его в своем контроллере, изменив функцию инициализации контроллера:

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

Если вы взглянете на service.addProject(), вы заметите, что он вызывает метод navigator.geolocation.getCurrentPosition(). В Cordova есть плагин геолокации, который вы можете использовать для получения текущего местоположения телефона, и вы даже можете использовать метод navigator.geolocation.watchPosition() для получения обновлений при изменении положения пользователя.

Наконец, давайте добавим дескрипторы событий контроллера для добавления и извлечения проектов из базы данных:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Чтобы добавить консоль и диалоговые плагины, выполните следующее:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

Плагин cordova.console поможет вам в отладке, включив функцию console.log() в эмуляторах.

Вы можете легко отлаживать приложения Android с помощью удаленного отладчика Chrome. После подключения устройства щелкните раскрывающееся меню в правом верхнем углу (под кнопкой X), разверните «Дополнительные инструменты» и нажмите «Проверить устройства». Вы должны увидеть свое устройство в списке и открыть его консоль отладки.

Safari предоставляет те же функции для отладки приложений iOS, которые работают на устройстве или эмуляторе, подключенном через USB. Просто включите Инструменты разработчика в разделе «Настройки Safari» > вкладка «Дополнительно».

Плагин cordova.dialogs включает встроенные уведомления. Общепринятой практикой является переопределение метода windows.alert с помощью API cordova.dialogs следующим образом:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

Функцию overrideBrowserAlert следует вызывать в обработчике события deviceready .

Теперь вы сможете добавлять новые проекты и просматривать существующие из базы данных. Если вы установите флажок «Включить местоположение», устройство сделает вызов API геолокации и добавит ваше текущее местоположение в проект.

Добавим последний штрих в приложение, установив иконку и заставку. Добавьте в файл config.xml следующее:

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Наконец, поместите изображение логотипа в папку www/img .

Ваше собственное приложение Cordova

Мы прошли основные этапы разработки приложения Apache Cordova и использовали собственную архитектуру JavaScript и таблицу стилей CSS. Это руководство по Cordova было попыткой показать потенциал Apache Cordova как средства разработки мобильных приложений с использованием знакомых технологий, что сокращает время разработки и усилия, необходимые для создания нескольких приложений для разных платформ.

Однако при создании приложений, которые будут запущены в производство, рекомендуется использовать существующую платформу. В дополнение к структурированию вашего приложения в предопределенной архитектуре это также может предоставить вам набор компонентов, которые помогут вашему приложению приблизиться к естественному внешнему виду. Стоит отметить некоторые фреймворки: Ionic, Framework7, Weex, Ratchet, Kendo UI и Onsen UI. Удачи!