В первом уроке этого введения в Cordova вы узнали о том, что такое Cordova, как она работает под капотом и какие приложения вы можете создавать с ее помощью. В этом уроке вы перейдете к практической части и на самом деле запачкаете руки, создав первое приложение Cordova.
Сначала я покажу вам, как установить все, что вам нужно, чтобы начать работать с Cordova. Затем вы создадите приложение hello world, которое использует несколько плагинов, инфраструктуру пользовательского интерфейса и веб-представление Crosswalk. В конце этого руководства вы развернете свое приложение на устройстве Android.
1. Установка зависимостей
Шаг 1: Git
Git — это система контроля версий. Он используется для извлечения плагинов, которые вы хотите добавить в свой проект Cordova. Чтобы установить Git, посетите страницу загрузок и выберите установщик для вашей операционной системы.
Шаг 2: Node.js
Node.js — это среда выполнения для веб-приложений, работающих на JavaScript. Он поставляется с менеджером пакетов под названием Node Package Manager или npm , который используется разработчиками для распространения инструментов и библиотек. Cordova и ее плагины распространяются с использованием npm, и поэтому мы должны установить его.
Если вы работаете в Windows или OS X, вы можете установить Node.js с помощью установщика, который доступен на их странице загрузки . Если вы работаете в Ubuntu или другом дистрибутиве Linux, вы можете установить узел с менеджером пакетов, который поставляется с вашей операционной системой. Для Ubuntu вы можете установить Node.js, используя следующие команды:
bash sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs
Шаг 3: Java
Следующий компонент, который нам нужно установить, — это Java. Нам нужна Java, потому что мы будем развертывать приложение hello world на устройстве Android. Нативные приложения для Android написаны на Java, и поэтому нам нужно установить Java.
Чтобы установить Java, посетите страницу загрузок Java и нажмите кнопку « Бесплатная загрузка Java» , чтобы открыть список доступных инсталляторов для вашей операционной системы. Загрузите установщик для вашей операционной системы и установите Java.
Шаг 4: Android SDK
Поскольку мы собираемся развернуть приложение на Android-устройстве, нам нужно установить Software Development Kit (SDK) для Android. Посетите Android Studio и SDK Tools и, в разделе SK Tools Only , загрузите соответствующий пакет для вашей операционной системы.
Для Windows уже есть установщик, который вы можете использовать для выбора пакетов, которые вы хотите установить. Для OS X и Linux вы должны извлечь архив. После извлечения откройте файл .bashrc расположенный в вашем домашнем каталоге, и добавьте путь к инструментам Android SDK и SDK:
bash export ANDROID_HOME=/media/wern/Files/downloads/android-sdk-linux/sdk PATH=$PATH:/media/wern/Files/downloads/android-sdk-linux/sdk/tools export PATH
Замените /media/wern/Files/downloads/ фактическим путем к Android SDK на вашем компьютере. Затем вы можете использовать source команду для перезагрузки файла .bashrc :
bash source ~/.bashrc
Это позволяет вам выполнить команду android из командной строки, запустив Android SDK Manager. Это позволяет вам выбрать, какие пакеты вы хотите установить на свой компьютер. Кордове нужны только следующие пакеты:
- Инструменты Android SDK
- Android SDK Платформа-инструменты
- SDK Платформа новейшего Android API
- Android SDK Build-инструменты для новейшего Android API (Android 6.0 на момент написания статьи)
С выбранными выше пакетами на вашем компьютере это должно выглядеть так:
Нажмите кнопку установки, чтобы начать процесс установки. Откроется окно с запросом подтверждения установки пакетов. Нажмите кнопку « Принять лицензию » для подтверждения и нажмите кнопку «Установить». Это может занять некоторое время в зависимости от вашего интернет-соединения.
Шаг 5: Кордова
После того, как вы установили необходимые зависимости на своем компьютере, вы готовы установить Cordova. Выполните следующую команду из командной строки:
bash sudo npm install -g cordova
Опция -g указывает npm установить Cordova глобально, что означает, что вы можете использовать инструменты командной строки Cordova из любой точки мира.
2. Сборка приложения
Теперь мы готовы создать простое приложение Hello World с Cordova. Мы создадим приложение, которое позволит пользователю делать фотографии с помощью плагина камеры и делиться ими с помощью плагина для обмена социальными данными PhoneGap . Наконец, мы также будем использовать Crosswalk .
Чтобы создать новое приложение Cordova, откройте новое окно терминала и выполните команду cordova create :
bash cordova create photosharer com.yourname.photosharer PhotoSharer
Команда cordova create принимает следующие аргументы:
- каталог: это каталог, который будет создан для хранения файлов вашего приложения.
- идентификатор: это идентификатор, который вы даете своему приложению. Общим соглашением об именах является обратная запись имени домена , например,
com.companyname.appname. - title: это название вашего приложения.
Как только команда завершит выполнение, вы увидите папку photosharer со следующим содержимым:
- ловушки: ловушки — это фрагменты кода, которые вы хотите выполнить в определенные моменты при создании приложения с помощью Cordova. Эта папка, куда вы кладете свои крючки. Мы не будем работать с хуками в этом уроке, так как они нам не понадобятся. Пока помните, что вы можете использовать ловушки для выполнения определенного кода, который может обрабатывать, копировать или удалять файлы до или после выполнения определенной команды cordova.
- платформы: здесь хранятся файлы, необходимые для всех ваших целевых платформ. Примеры платформы включают браузер, Android, iOS и Windows Phone.
- плагины: здесь хранятся плагины, которые вы установили для своего приложения.
- www: эта папка содержит исходный код пользовательского интерфейса приложения. Вы будете проводить большую часть своего времени в этой папке.
- config.xml: это файл конфигурации, который используется для управления основными аспектами и поведением вашего приложения.
Теперь, когда вы знаете, для чего предназначена каждая из папок в приложении Cordova, пришло время перейти к созданию приложения. Откройте index.html , который находится в каталоге www . Это страница по умолчанию, которую обслуживает Cordova. Приложения Cordova лучше всего создавать в виде одностраничного приложения, поэтому пользователь не видит, что страница перезагружается при каждом доступе к странице в приложении. Одностраничное приложение — это не более чем веб-приложение, которое использует только одну HTML-страницу. Затем шаблоны используются для ввода различных состояний приложения по мере необходимости.
По умолчанию index.html содержит следующий код:
« `html <! DOCTYPE html>
Апач Кордова
Подключение к устройству
Устройство готово
« `
Вы можете видеть, что нет ничего особенного. Это простой файл HTML. Единственное, что отличается, это meta . Позвольте мне провести вас через некоторые из них.
Первый meta определяет политику безопасности контента. Это делает приложение Cordova защищенным от атак с использованием межсайтовых сценариев (XSS) . Любой скрипт, который злоумышленнику удается внедрить на страницу, просто отказывается загружаться с этим meta .
« « HTML
« `
format-detection автоматически преобразует номера телефонов в ссылки. Затем пользователь может щелкнуть ссылку, чтобы позвонить на этот номер телефона.
« « HTML
« `
msapplication-tap-highlight отключает выделение серого крана в Windows Phone 8 и более поздних версиях. Если вы не планируете развертывать на устройстве Windows Phone, вы можете безопасно удалить этот тег.
« « HTML
« `
Следующий тег — это meta области viewport . Давайте рассмотрим атрибуты этого тега слева направо. Сначала тег указывает, что пользователь не должен иметь возможность увеличивать или уменьшать масштаб страницы. Затем initial-scale устанавливается на 1. Это означает, что содержимое загружено на 100%. maximum-scale и minimum-scale установлены на 1. Это устанавливает минимальное и максимальное значения, которые пользователь может установить для уровня масштабирования. Атрибут width указывает, что для содержимого используется максимальная ширина устройства.
« « HTML
« `
Далее идет таблица стилей по умолчанию. Эта таблица стилей содержит основные стили для приложения.
« « HTML
« `
Внутри тега body находится разметка для отображения статуса Cordova. Элемент p с классом listening отображается, когда API устройства еще не полностью загружены. Он скрыт, когда API устройства готовы. В этот момент вместо него отображается элемент p под ним. Эта разметка относится к стандартному приложению Cordova, поэтому мы можем безопасно удалить ее позже.
« « HTML
Апач Кордова
Подключение к устройству
Устройство готово
« `
Затем мы сталкиваемся с двумя тегами script . Первый включает cordova.js . Этот файл предоставляет унифицированный API для доступа к собственным функциям устройства. Вы не найдете этот файл в каталоге www , потому что он внедряется в конкретную платформу при создании приложения. Это означает, что существует другая версия cordova.js в зависимости от платформы, на которой запущено приложение.
html <script type="text/javascript" src="cordova.js"></script>
Второй тег script включает в себя index.js . Этот файл относится к приложению по умолчанию, которое создается при запуске нового проекта Cordova. Все, что он делает, это выполняет определенный код, когда происходит конкретное событие.
html <script type="text/javascript" src="js/index.js"></script>
Если вы откроете файл, вы заметите, что функция receiveEvent отвечает за сокрытие и отображение двух элементов p которыми мы столкнулись ранее. Это onDeviceReady событием onDeviceReady . Таким образом, идентификатор события, который передается в функцию deviceready является deviceready .
« `javascript onDeviceReady: function () {app.receivedEvent (‘deviceready’); },
receiveEvent: function (id) {
var parentElement = document.getElementById (id); var listenElement = parentElement.querySelector ('. listen'); var receiveElement = parentElement.querySelector ('. полученный'); listenElement.setAttribute ('style', 'display: none;'); receiveElement.setAttribute ('style', 'display: block;'); console.log ('Полученное событие:' + id);
} « `
Вы ждали достаточно долго. Пришло время пачкать руки. Давайте сначала удостоверимся, что все выглядит хорошо, используя Ratchet , интерфейсную среду для создания мобильных веб-приложений. Вы можете скачать его с их домашней страницы или установить с помощью Bower , выполнив следующую команду:
bash bower install ratchet
Скопируйте файлы в каталог www / lib вашего проекта Cordova и свяжите таблицу стилей с вашим файлом index.html .
« « HTML
« `
Удалите разметку по умолчанию внутри тега body :
« « HTML
Апач Кордова
Подключение к устройству
Устройство готово
« `
И замените его следующим:
« « HTML
Привет кордова
« `
Вышеупомянутая разметка добавляет кнопку для фотографирования. Ниже находится тег div для публикации фотографии. Он имеет текстовое поле для ввода заголовка и кнопку для обмена.
Возьмите копию jQuery и сохраните ее в каталоге www / lib .
html <script type="text/javascript" src="lib/jquery.min.js"></script>
Создайте файл events.js в каталоге www / js и добавьте в него следующий код:
« `javascript (функция (окно) {
$ ( '# Бери фотография'). Нажмите (функция () { var camerOptions = { качество: 90, destinationType: Camera.DestinationType.FILE_URI, encodingType: Camera.EncodingType.JPEG, targetWidth: 200, targetHeight: 350 }; navigator.camera.getPicture (функция (imageURI) { var image = $ ('# photo'); image.attr ('src', imageURI); . $ ( 'Доля-контейнер #') шоу (); }, function (errorMessage) { alert ('Произошла следующая ошибка:' + errorMessage) }, camerOptions); }); $ ( '# Доля'). Нажмите (функция () { var photo_src = $ ('# photo'). attr ('src'); var caption = $ ('# caption'). val (); window.plugins.socialsharing.share (заголовок, ноль, photo_src, ноль); });
})(окно); « `
Добавьте тег script для events.js под тегом jQuery.
html <script type="text/javascript" src="js/events.js"></script>
Посмотрим, что у нас так далеко. Сначала мы оборачиваем все в немедленно вызванное выражение функции. Таким образом, скрипт не конфликтует с другим скриптом, который мы могли бы включить позже.
« `javascript (функция (окно) {
})(окно); « `
Далее мы добавляем прослушиватель событий клика к кнопке для фотографирования.
javascript $('#take-picture').click(function(){ ... });
Внутри него есть опции для плагина камеры .
javascript var camerOptions = { quality: 90, destinationType: Camera.DestinationType.FILE_URI, encodingType: Camera.EncodingType.JPEG, targetWidth: 200, targetHeight: 350 };
Вот краткое описание каждого из вариантов, которые мы используем:
- качество: эта опция позволяет нам указать качество фотографии, которая будет сохранена, 100 — самое высокое, а 0 — самое низкое.
- destinationType: с помощью этой опции мы указываем тип получаемой фотографии. Это может иметь значение
DATA_URL, которое возвращает строку в кодировке base64, илиFILE_URI, которое возвращает путь к файлу в локальной файловой системе. - encodingType: эта опция определяет способ кодирования фотографии. Возможные значения:
JPEGиPNG. - targetWidth: используйте этот параметр, чтобы указать ширину фотографии.
- targetHeight: используйте этот параметр, чтобы указать высоту фотографии.
Далее у нас есть код, который запускает приложение камеры по умолчанию для устройства. У него есть две функции обратного вызова. Первый — это обратный вызов, который выполняется, когда фотография успешно сделана. URL-адрес изображения передается в качестве аргумента. Затем он используется в качестве значения для атрибута src элемента img . Если произошла ошибка, выполняется вторая функция обратного вызова. Если что-то идет не так, мы показываем предупреждение, чтобы уведомить пользователя об ошибке.
« `javascript navigator.camera.getPicture (function (imageURI) {
var image = $ ('# photo'); image.attr ('src', imageURI); . $ ( 'Доля-контейнер #') шоу ();
}, function (errorMessage) {alert (‘Произошла следующая ошибка:’ + errorMessage)}, camerOptions); « `
Как только фотография была сделана, пользователю показывается div #share-container . Это содержит кнопку поделиться, к которой мы добавляем событие щелчка. Это использует плагин социального обмена . В приведенном ниже коде мы передаем значение, введенное в текстовое поле заголовка, и путь к файлу фотографии. Плагин для совместного использования в социальных сетях затем запускает стандартное окно общего доступа операционной системы. В этот момент пользователь может выбрать приложение, в котором можно поделиться фотографией.
javascript $('#share').click(function(){ var photo_src = $('#photo').attr('src'); var caption = $('#caption').val(); window.plugins.socialsharing.share(caption, null, photo_src, null); });
3. Установка плагинов
В предыдущем разделе мы уже использовали два плагина, плагин камеры и плагин социального обмена. Но вы, возможно, заметили, что мы еще не установили ни одного из них. В этом разделе мы сделаем именно это.
Установка плагинов проста, если вы уже знаете, какой плагин вы хотите установить. Все, что вам нужно сделать, это определить идентификатор плагина. Обычно это имя, данное репозиторию GitHub или имя пакета на сайте npm.
Идентификатор плагина камеры является cordova-plugin-camera . Установка плагина так же проста, как выполнение команды cordova plugin add и передача идентификатора плагина:
bash cordova plugin add cordova-plugin-camera
Для плагина для обмена социальными данными все немного по-другому, поскольку он не соответствует соглашению об именах:
bash cordova plugin add cordova-plugin-x-socialsharing
Если вы не уверены, какой плагин вам нужно установить, просто найдите его в Google. Есть также веб-сайт плагинов Cordova, который вы можете использовать для поиска плагинов Cordova. На скриншоте ниже я искал плагин для обмена социальными сетями. Результаты по умолчанию упорядочены по качеству. Это означает, что плагины расположены от самых крутых до наименее крутых. Я не совсем уверен, какой показатель они использовали для этого, хотя. Кроме того, вы можете также фильтровать результаты, чтобы показывать только плагины, которые поддерживают определенные платформы. Он также поставляется с хорошей функцией копирования в буфер обмена, которая позволяет скопировать команду для установки плагина.
И последнее замечание по поводу установки плагинов — вы должны создавать приложение каждый раз, когда устанавливаете новый плагин. Установка плагина не копирует его автоматически на разные платформы, на которых вы хотите установить.
4. Добавление пешеходного перехода
Crosswalk — это подключаемое веб-представление для приложений Cordova на основе Chromium и Blink. Используя Crosswalk, вы заменяете веб-представление по умолчанию, используемое Cordova. Это позволяет вам использовать функции браузера, такие как WebRTC, WebAudio и веб-компоненты в ваших приложениях. Это также повышает производительность вашего приложения. Единственными известными недостатками являются увеличенный объем памяти и размер установочного файла.
Crosswalk распространяется как плагин. Вы можете установить его с помощью следующей команды:
bash cordova plugin add cordova-plugin-crosswalk-webview
В следующий раз, когда вы создадите приложение, оно должно установить веб-представление для платформы, на которой вы развертываете. Это может занять некоторое время в зависимости от вашего интернет-соединения. Но это происходит только при первом создании приложения после установки Crosswalk. Это потому, что он должен загрузить все необходимые файлы с удаленного сервера и затем выполнить компиляцию.
После процесса сборки должно получиться два отдельных файла apk для Android, один для архитектуры armv7 и один для x86. Crosswalk создает отдельный файл пакета для каждой из этих архитектур, потому что в противном случае файл apk станет большим, если он будет упакован в одну. К счастью, магазин Google Play позволяет разработчикам загружать разные версии apk- файла для одного и того же приложения.
5. Настройка приложения
Если вы хотите обновить конфигурацию вашего приложения в какой-то момент, вы можете отредактировать файл config.xml , который находится в корне вашего проекта. Вот как выглядит config.xml по умолчанию:
« `XML
« `
Вы можете обновить идентификатор вашего приложения:
« `XML