Как сделать приложение на cordova

Обновлено: 07.01.2025

В первом уроке этого введения в 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 :

Это позволяет вам выполнить команду 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 принимает следующие аргументы:

Как только команда завершит выполнение, вы увидите папку 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 .

format-detection автоматически преобразует номера телефонов в ссылки. Затем пользователь может щелкнуть ссылку, чтобы позвонить на этот номер телефона.

msapplication-tap-highlight отключает выделение серого крана в Windows Phone 8 и более поздних версиях. Если вы не планируете развертывать на устройстве Windows Phone, вы можете безопасно удалить этот тег.

Следующий тег — это meta области viewport . Давайте рассмотрим атрибуты этого тега слева направо. Сначала тег указывает, что пользователь не должен иметь возможность увеличивать или уменьшать масштаб страницы. Затем initial-scale устанавливается на 1. Это означает, что содержимое загружено на 100%. maximum-scale и minimum-scale установлены на 1. Это устанавливает минимальное и максимальное значения, которые пользователь может установить для уровня масштабирования. Атрибут width указывает, что для содержимого используется максимальная ширина устройства.

body находится разметка для отображения статуса Cordova. Элемент p с классом listening отображается, когда API устройства еще не полностью загружены. Он скрыт, когда API устройства готовы. В этот момент вместо него отображается элемент p под ним. Эта разметка относится к стандартному приложению Cordova, поэтому мы можем безопасно удалить ее позже.

Подключение к устройству

Затем мы сталкиваемся с двумя тегами script . Первый включает cordova.js . Этот файл предоставляет унифицированный API для доступа к собственным функциям устройства. Вы не найдете этот файл в каталоге www , потому что он внедряется в конкретную платформу при создании приложения. Это означает, что существует другая версия cordova.js в зависимости от платформы, на которой запущено приложение.

html <script type="text/javascript" src="https://coderlessons.com/articles/mobilnaia-razrabotka-articles/cordova.js"></script>

Второй тег script включает в себя index.js . Этот файл относится к приложению по умолчанию, которое создается при запуске нового проекта Cordova. Все, что он делает, это выполняет определенный код, когда происходит конкретное событие.

html <script type="text/javascript" src="https://coderlessons.com/articles/mobilnaia-razrabotka-articles/js/index.js"></script>

Если вы откроете файл, вы заметите, что функция receiveEvent отвечает за сокрытие и отображение двух элементов p которыми мы столкнулись ранее. Это onDeviceReady событием onDeviceReady . Таким образом, идентификатор события, который передается в функцию deviceready является deviceready .

receiveEvent: function (id)

Вы ждали достаточно долго. Пришло время пачкать руки. Давайте сначала удостоверимся, что все выглядит хорошо, используя Ratchet , интерфейсную среду для создания мобильных веб-приложений. Вы можете скачать его с их домашней страницы или установить с помощью Bower , выполнив следующую команду:

bash bower install ratchet

Скопируйте файлы в каталог www / lib вашего проекта Cordova и свяжите таблицу стилей с вашим файлом index.html .

Удалите разметку по умолчанию внутри тега body :

Подключение к устройству

И замените его следующим:

Вышеупомянутая разметка добавляет кнопку для фотографирования. Ниже находится тег div для публикации фотографии. Он имеет текстовое поле для ввода заголовка и кнопку для обмена.

Возьмите копию jQuery и сохраните ее в каталоге www / lib .

html <script type="text/javascript" src="https://coderlessons.com/articles/mobilnaia-razrabotka-articles/lib/jquery.min.js"></script>

Создайте файл events.js в каталоге www / js и добавьте в него следующий код:

« `javascript (функция (окно)

Добавьте тег script для events.js под тегом jQuery.

html <script type="text/javascript" src="https://coderlessons.com/articles/mobilnaia-razrabotka-articles/js/events.js"></script>

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

« `javascript (функция (окно)

Далее мы добавляем прослушиватель событий клика к кнопке для фотографирования.

Внутри него есть опции для плагина камеры .

Вот краткое описание каждого из вариантов, которые мы используем:

качество: эта опция позволяет нам указать качество фотографии, которая будет сохранена, 100 — самое высокое, а 0 — самое низкое.
destinationType: с помощью этой опции мы указываем тип получаемой фотографии. Это может иметь значение DATA_URL , которое возвращает строку в кодировке base64, или FILE_URI , которое возвращает путь к файлу в локальной файловой системе.
encodingType: эта опция определяет способ кодирования фотографии. Возможные значения: JPEG и PNG .
targetWidth: используйте этот параметр, чтобы указать ширину фотографии.
targetHeight: используйте этот параметр, чтобы указать высоту фотографии.

Далее у нас есть код, который запускает приложение камеры по умолчанию для устройства. У него есть две функции обратного вызова. Первый — это обратный вызов, который выполняется, когда фотография успешно сделана. URL-адрес изображения передается в качестве аргумента. Затем он используется в качестве значения для атрибута src элемента img . Если произошла ошибка, выполняется вторая функция обратного вызова. Если что-то идет не так, мы показываем предупреждение, чтобы уведомить пользователя об ошибке.

« `javascript navigator.camera.getPicture (function (imageURI)

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 по умолчанию:

PhotoSharer Приложение, которое позволяет пользователям захватывать фотографии и делиться ими, используя приложение для обмена по умолчанию

Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данной заметкой. Постарался сделать ее более менее подробной, но при этом не сильно нудной.

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

Минусы продукта 1С-Битрикс: Мобильное приложение

У компании 1С-Битрикс, есть собственное решение, для разработки приложений, так и называется: "1С-Битрикс: Мобильное приложение". Его мы использовать не будем ввиду ряда, достаточно критичных минусов:

Дороговато: - стоимость лицензии: 47 900 руб. Плюс ежегодные продления за 50% стоимости.
Не удобные обновления - если потребуется внести изменения в приложение: иконку, загрузочные экраны, название и.т.д. метаданные. Нужно оформлять заявку на компиляцию, через ТП Битрикс, ждать обработки заявки, потратить время на прохождение авторизаций в маркетах
Нет контролируемой гибкости - внутри приложения используются только те плагины Cordova, которые заложил сам Битрикс. Возможности расширить их ассортимент нет (как и избавиться от не нужных)
Тяжелый вес - после компиляции и публикации, мобильное приложение весит в пределах 15-35 мегабайт (наше будет в пределах мегабайта)

Делаем приложение на Cordova

Если говорить по простому: Cordova позволяет упаковать любой сайт в мобильное приложение, с дальнейшей публикацией в магазинах приложений AppStore и GooglePlay. Так же Cordova позволяет создавать и настольные приложения для Windows и macOS (включая платформу Electron)

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

В этой заметке рассматриваю разработку, приложения, именно для сайта (магазина, инфоресурса и.т.д.) и только для Android и iOs. Важный момент, это ни как не связано с 1C-Битрикс, "заверуть" в приложение можно абсолютно любой сайт- не важно, на чем работающий.

Итак, не буду размусоливать, просто приступим. Детали можно будет обсудить в комментариях. Если забыл что-то важное- дополню заметку

Как сделать приложение на Cordova

Итак. Перво на перво качаем и устанавливаем NodeJS, от него нам нужен менеджер пакетов npm

После установки, выполняем команду в терминале npm install -g cordova - собственно, установит cordova на компьютер.

Устанавливаем Android Studo и Xcode (не доступен для Windows - для iOs можно сделать, приложение, только на macOS)

Создаем папку, в которой будем хранить проекты. Для примера буду использовать /Documents/CordovaProjects и переходим в нее в терминале cd /Documents/CordovaProjects.

Здесь же выполняем команду cordova create AppName ru.appname.app MihailBazarow эта команда создаст проект в директории AppName и названием ru.appname.app

Далее переходим в директорию /Documents/CordovaProjects/AppName, открываем файл config.xml и приводим примерно к такому виду (подсказки в комментариях)

Теперь добавляем платформы, в нашем случае android и iOs
cordova platform add android
cordova platform add ios

Достаточно важный момент: в cordova, поддерживаются плагины, которые позволяют получить доступ к железу и прочим API устройства (камера, GPS, телефонная книга итд). Но, каждый плагин нужно устанавливать отдельно, их достаточно много. Можно установить все, но лучше отсортировать и использовать те которые вам реально нужны, в конкретном проекте.

Плагины устанавливаются командой cordova plugin add НАЗВАНИЕ_ПЛАГИНА

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

cordova-plugin-wkwebview-engine - важный плагин, переключает движек рендеринга страниц, на более свежий
cordova-plugin-remote-injection - важный плагин, без него не заработают остальные плагины (если открываете контент через веб доступ)
yandex-appmetrica-plugin-cordova - appmetrica для Яндекса
cordova-plugin-geolocation - геопозиция с GPS датчика
cordova-plugin-splashscreen - управление загрузочными экранами
cordova-plugin-statusbar - управление статус-баром
cordova plugin add cordova-plugin-contacts - обеспечивает доступ к базе данных контактов устройства.
cordova plugin add cordova-plugin-device-motion - доступ к акселерометру устройства.
cordova plugin add cordova-plugin-firebase - работа с push через firebase
cordova plugin add cordova-plugin-android-imei - получение IMEI (Только Андроид)

Осталось собрать приложение, выполняем команду cordova build - на ошибки внимания не обращаем, они нас не интересуют и всю дальнейшую работу делаем в IDE

В Android Studio добавляем проект из папки /Documents/CordovaProjects/AppName/platforms/android здесь можете его скомпилировать в apk или bundle(предпочтительнее) и опубликовать в GooglePlay

В Xcode открываем /Documents/CordovaProjects/AppName/platforms/ios. И тут все сложнее:

Проверяем вкладку frameworks: если видим расширения типа AppKit, HomeKit, HealthKit - удаляем их.
Проверяем вкладку с иконками: для Apple их нужно много, разных размеров- если какой-то не хватает (будет висеть подсказка)- добавляем
Добавляем учетку разработчика и ассоциируем с этим приложением
Выполняем архивацию приложения
Из архива, отправляем приложение на проверку. Если есть ошибки, выдаст их список в этом же окне- исправляем
Если ошибок нет, отправляем на публикацию из этого же окна

Пример приложения созданного по данному способу: в моем портфолио, там же ссылки на магазины (обратите внимание на вес приложения)

Дополнительно

Поле публикации, приложение можно обновлять выпуская новую версию:

В config.xml обязательно меняете номер версии. Вносите прочие изменения, если нужны
Добавляете или удаляете плагины
Производите прочие доработки и изменения
Выполняете команду cordova build
Компилируете приложение в IDE-шках
Публикуете не как новое, а именно как обновление имеющегося.

И еще одна штучка

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

Распространение мобильных устройств в наше время достигло невероятных значений. Мобильный телефон есть у 2 из каждых 3 человек на планете. С помощью мобильных люди общаются, делают покупки, получают образование, играют. Это огромный рынок, который нельзя оставлять без внимания.

Однако чтобы разрабатывать приложения для мобильных платформ, нужно владеть определенным языком программирования. Swift – для iOS, Java или Kotlin – для Android. Или JavaScript – для iOS, Android и ряда других ОС!

Да-да, JavaScript везде, и на мобильных в том числе. На данный момент есть несколько известных и проверенных фреймворков для создания кроссплатформенных мобильных приложений на этом языке, например, React Native и Apache Cordova, а также основанные на ней проекты.

Для разработки на React Native требуется знание библиотеки React и основных паттернов работы с ней. Cordova же может взять обычное веб-приложение и обернуть его нужным кодом так, чтобы оно работало на мобильных ОС. Такие "гибридные" приложения не могут похвастаться высокой нативной производительностью, однако очень просты в разработке.

Cordova отлично подходит для создания простых проектов без сложной графики. Сейчас мы как раз разработаем один из них – классическое Todo App для Android на JavaScript.

Так как мы пишем приложение для Android, нам понадобится JDK (Java Development Kit) и Android SDK – среда разработки для приложений Android. А также собственно Cordova.

Установочник для нужной платформы можно найти на сайте Oracle. Выбирайте версию не выше JDK 8, с более новыми Cordova не будет работать.

Запомните, куда установился пакет, и сохраните этот путь в переменной окружения JAVA_HOME .

А также добавьте его в переменную PATH .

Android Studio

Для разработки под Android также потребуется установить Android Studio.

После установки зайдите в программу и откройте меню SDK Manager (при открытом проекте Tools -> SDK Manager).

Здесь вы найдете путь к Android SDK (Android SDK Location), сохраните его в переменную окружения ANDROID_SDK_ROOT .

Добавьте в переменную PATH каталоги tools и platform-tools :

Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).

Создание эмулятора

Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.

Для этого зайдите в меню AVD Manager:

И создайте эмулятор с нужными параметрами.

Cordova

Осталось глобально установить npm-пакет Cordova:

Подготовительные работы закончены, пора приступать к самому интересному.

Вероятно, самый интересный вопрос – как запустить обычную веб-страницу на устройстве Android. Чтобы ответить на него, создадим пустой проект Cordova и разберемся на практике.

Создание пустого проекта

Команда для создания нового проекта Cordova:

Первый аргумент – todo-app – это название новой папки, которую Cordova создаст в текущем каталоге.
Второй аргумент – com.furrycat.todo – это идентификатор проекта.
Третий аргумент – TodoApp – имя приложения.

Появилась новая папка todo-app . Перейдите в нее и запускайте все дальнейшие команды уже внутри этой директории.

Внутри находится файл config.xml , которые содержит все мета-данные, а также папка www – именно в ней и расположен код веб-приложения. Сейчас это простейшая страница – index.html – с логотипом Cordova и парой надписей, к ней подключен файл стилей и скрипт. Вы можете открыть эту страницу в браузере:

Заглянем в файл js/index.js . Здесь очень простой код: установлен слушатель события deviceready , его обработчик просто добавляет класс .ready к одному из html-элементов.

deviceready – это событие, которое вызывает сама Cordova. Нетрудно догадаться, что оно возникает после того, как устройство, на котором запущено приложение будет готово его воспроизводить. Так как мы запустили проект в обход Cordova, это событие не возникает, поэтому надпись Connecting to device не исчезает.

Добавление платформы

Укажем целевые платформы для проекта – у нас это только Android:

Сборка проекта

Команда для сборки проекта для Android-платформы:

В папке platforms/android/app появилась новая директория build . Внутри нее есть файл outputs/apk/app-debug.apk . По сути это уже рабочий apk, который можно запустить на Android-устройстве.

Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!

Как видно, надпись connecting to device сменилась на device is ready. Это значит, что кордова вызвала событие deviceready , а приложение отреагировало на нее.

Запуск на эмуляторе или устройстве

Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.

Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:

Кордова сама соберет проект, обнаружит устройство и запустит приложение

Можно обойтись и без реального устройства.

Запустите созданный ранее эмулятор в Android Studio:

и снова выполните команду:

На этот раз кордова найдет эмулятор и запустит проект на нем:

Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.

Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.

Это очень простое веб-приложение, написанное с использованием фреймворка Vue. Его исходный код находится в корне проекта в новой папке src . Сборка осуществляется с помощью webpack, собранные файлы помещаются непосредственно в папку www .

Есть возможность добавлять, редактировать, удалять дела, а также отмечать их сделанными. Чтобы при перезагрузке список дел не пропадал, все сохраняется в localStorage .

Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:

Отладка

Запущенное на эмуляторе или реально устройстве приложение Cordova можно отлаживать через браузер Chrome.

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

Для примера реализуем нативные диалоговые окна и оповещения.

Диалоговые окна

Добавим подтверждение действия при удалении задачи – модальное окно с кнопками Отменить и Удалить. В вебе мы можем использовать для этого стандартное модальное окно confirm , но его нельзя кастомизировать. Поэтому мы должны получить доступ к нативным диалоговым окнам Android.

Теперь в коде приложения нам доступ объект navigator.notification с четырьмя методами:

navigator.notification.alert
navigator.notification.confirm
navigator.notification.prompt
navigator.notification.beep

Нам нужен метод confirm :

Напоминания о делах

Еще одна очень полезная функциональность – напоминание о делах в установленное время.

Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.

Использование в коде:

А для планирования оповещений понадобится плагин cordova-plugin-local-notification.

Использование в коде проекта:

Чтобы запланировать оповещение на определенное время, используется параметр trigger.at .

Публикация проекта в Google Play

Приложение готово, осталось только собрать его для продакшена.

В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.

Чтобы выложить проект в Google Play, его нужно подписать.

Для этого нужно сгенерировать ключ:

Имя ключа – todoapp.keystore , алиас – todoapp . При создании вам нужно будет ввести пароль и ответить на ряд вопросов (или пропустить их). В результате в текущей директории появится новый файл todoapp.keystore – не потеряйте его.

Теперь скомпилируем проект с ключом:

Важно указать правильное имя ключа и алиас.

Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):

Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.

2016-01-12 в 4:02, admin , рубрики: cordova, crosswalk, Git, web-разработка, Веб-разработка, мобильная разработка, Мобильный веб, разработка мобильных приложений

В первом уроке по серии статей «Введение в Cordova», вы узнали о том, что такое Cordova, как работает под капотом и какие приложения можно сделать с её помощью. В этом уроке, мы перейдем к практической части и создадим свое первое приложение на Cordova.

Для начала, я покажу вам как установить необходимые компоненты для работы с Cordova. Затем мы создадим стандартное Hello World приложение, которое будет использовать несколько плагинов, UI фреймворк, и Crosswalk. В конце этого урока, мы развернем наше приложение на Android устройстве.

Установка компонентов

1. Git

Git — система контроля версий. Благодаря ей, вы сможете добавлять плагины в проект Cordova. Для установки Git, перейдите на страницу загрузки и выберите нужный вариант установки под вашу операционную систему.

2. Node.js

Node.js — среда исполнения для веб-приложений, которая работает на JavaScript. Она поставляется с менеджером пакетов под названием Node Package Manager или npm, который используется разработчиками для распространения инструментов и библиотек. Cordova и его плагины распространяются при помощи npm, поэтому мы должны установить его.

Если вы работаете на Windows или OS X, то вы можете установить Node.js с помощью программы установки, которая доступна для загрузки с официального сайта. Если вы работаете на Ubuntu или другом дистрибутиве Linux, то вы можете установить node при помощи менеджера пакетов, который поставляется вместе с операционной системой. Для Ubuntu, вы можете установить Node.js, используя следующие команды:

3. Java

Следующим этапом будет установка Java. Java необходима для того, чтобы развернуть наше приложение Hello World на Android устройстве. Нативные приложения для Android пишутся на языке Java, поэтому мы должны установить её.

4. Android SDK

Так как мы собираемся развернуть приложение на Android устройстве, нужно установить комплект для разработки программного обеспечения (SDK) для Android. Перейдите в Android Studio и SDK Tools и скачайте SDK Tools Only под вашу операционную систему.

Для Windows, есть готовый инсталлятор, который можно использовать для выбора и установки необходимых пакетов. Для OS X и Linux, вы должны распаковать архив, после этого, откройте файл .bashrc и добавьте путь к Android SDK и SDK tools:

Замените /media/wern/Files/downloads/ на путь к Android SDK в вашем компьютере. Вы можете использовать команду source для загрузки файла .bashrc:

Это позволяет выполнить android команду из командной строки, для запуска Android SDK Manager. При помощи Android SDK Manager, вы сможете выбрать необходимые для вас пакеты и установить их на своем компьютере. Для работы с Cordova нужны следующие пакеты:

Android SDK Tools
Android SDK Platform-tools
SDK Platform of the latest Android API
Android SDK Build-tools for the latest Android API (Android 6.0 at the time of writing)

Как это будет выглядеть на вашем компьютере:

5. Cordova

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

Опция -g говорит npm установить Cordova глобально, это означает, что вы можете использовать инструменты командной строки Cordova из любого места.

Создание приложения

Теперь мы готовы разработать простое приложение Hello World с Cordova. Мы создадим приложение, которое позволяет пользователю сделать фотографию при помощи плагина камеры и поделиться фотографией в социальных сетях при помощи плагина PhoneGap social sharing. В конце мы используем Crosswalk.

Чтобы создать новое приложение Cordova, откройте терминал и выполните команду создания приложения Cordova:

Команда cordova create поддерживает несколько аргументов:

directory — создание нового каталога для хранения файлов приложения.
identifier — идентификатор приложения, обычно именуется доменным именем в виде ru.siteacademy.appname.
title — название вашего приложения.

После выполнения команды, в папке photosharer вы обнаружите следующее содержимое:

hooks — куски кода, которые можно выполнять в определенных местах при создании приложения с Cordova. В этой папке вы можете хранить свои хуки (Hooks). В этом уроке мы будем работать с хуками, так как они нам не понадобятся. Просто запомните, что вы можете воспользоваться хуками для того, чтобы выполнить определенный код, который может обрабатывать, копировать или удалять файлы или выполнить команды Cordova.
platforms — необходимые файлы для целевых платформ вашего приложения. Например может содержать файлы для браузера, Android, IOS, и Windows Phone.
plugins — папка с установленными плагинами.
www — папка с исходным кодом пользовательского интерфейса приложения. Большую часть работы вы будете проводить в этой папке.
config.xml — файл конфигурации, который используется для управления основными аспектами и поведением вашего приложения.

По умолчанию, index.html содержит следующий код:

Обратите внимание, что в данном коде нет ничего особенного. Это простой HTML-файл. Единственное, что отличается это мета-теги. Давайте рассмотрим некоторые из них по подробнее.

Первый мета-тег указывает политику безопасности содержимого. Это делает приложение Cordova безопасным от Cross-Site Scripting (XSS) атак. Любой скрипт, который злоумышленник попытается добавить в страницу, просто будет отклонен благодаря данному мета-тегу.

Мета-тег format-detection автоматически преобразует телефонные номера в ссылки. Пользователь сможет нажать на ссылку, чтобы сделать звонок на этот номер телефона.

Мета-тег msapplication-tap-highlight отключает серую подсветку нажатия на Windows Phone версии 8 и старше. Если вы не планируете развернуть ваше приложение на Windows Phone устройство, можете удалить данный тег.

Следующий мета-тег viewport. Пройдемся по атрибутам данного тега слева направо. Первый атрибут указывает, что пользователь не сможет масштабировать страницу. Далее, initial-scale со значением 1. Это означает, что содержимое загружается на 100%. Атрибуты maximum-scale и minimum-scale установлены в 1. Это устанавливает минимальные и максимальные значения, которые пользователь может установить для масштаба. Атрибут width — максимальная ширина содержания страницы, на экране устройства.

Далее идет таблица стилей используемая по умолчанию. Данный файл содержит основные стили для приложения.

Внутри тела документа находится разметка для индексации состояния Cordova. Элемент p с классом listening, определяет загрузку API устройства. Он будет скрыт, когда API устройства полностью загружено. После загрузки, будет отображаться следующий элемент p. Это специфичная разметка для Cordova приложения создается по умолчанию, поэтому мы можем удалить её в любой момент, без каких-либо потерь.

Затем у нас идут два тега script. Первый подключает файл cordova.js. Этот файл содержит единый API для доступа к нативным функциям устройства. Вы не увидите данный файл в папке www, так как он добавляется в зависимости от выбранной платформы, при создании приложения. Это означает, что будут и другие версии файла cordova.js.

Второй script подключает файл index.js. Это специфичный файл для приложения, который создается по умолчанию, при создании нового проекта Cordova. Он выполняет определенный код, при определенном событии.

Если вы откроете этот файл, вы заметите, что функция receivedEvent отвечает за скрытие и отображения двух элементов p которые мы описали выше. Затем происходит вызов события onDeviceReady. Таким образом, идентификатором события, который передается в функции receivedEvent будет deviceready.

Наконец настало время разработки самого приложения. Для начала давайте добавим платформу фронтэнда для создания мобильных веб-приложений Ratchet. Вы можете скачать его со страницы загрузки или установить его при помощи команды Bower:

Скопируйте все файлы в папку вашего проекта Cordova www/lib и подключите таблицы стилей в файле index.html.

Удалите стандартную разметку из тела документа:

И добавьте следующую:

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

Скачайте библиотеку jQuery и скопируйте в папку www/lib.

Создайте файл events.js в папке www/js со следующим содержанием:

И подключите данный файл к основной HTML странице, после jQuery:

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

В который помещаем настройки плагина камеры:

Краткое описание каждой опции:

quality — качество фотографии, 100 — высокое качество, 0 — низкое.
destinationType — тип фотографии. Может иметь значение DATA_URL, которое возвращает строку в кодировке Base64 или FILE_URI, которое возвращает путь к файлу на локальной файловой системе.
encodingType — расширение фотографии, возможные значения JPEG и PNG.
targetWidth — определение ширины фотографии.
targetHeight — определение высоты фотографии.

Установка плагинов

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

Если у вас уже есть конкретный плагин который вы хотите установить, то установка не составит особого труда. Все что нужно сделать, это определить идентификатор плагина. Как правило, это имя репозитория GitHub или имя пакета на сайте npm.

Идентификатор плагина камеры cordova-plugin-camera. Для установки выполните команду cordova plugin add с нужным идентификатором:

Для установки плагина соц.сетей, просто поменяйте идентификатор:

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

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

Добавление Crosswalk

Crosswalk — подключаемое WebView для приложений Cordova, основано на Chromium и Blink. Благодаря Crosswalk, у вас появится стандартный WebView, используемый в Cordova. Это позволяет выполнять функции браузера, такие как WebRTC, WebAudio и веб-компоненты для ваших приложений. Он также улучшает производительность вашего приложения. Из недостатков — увеличение объема памяти и размер файла установки.

Crosswalk устанавливается как обычный плагин:

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

После процесса сборки, он должен создать два apk файла для Android, один для архитектуры armv7, второй для x86. Crosswalk создаст отдельный файл пакета для каждой из этих архитектур, иначе apk файл стал бы большим. К счастью, Google Play позволяет разработчикам загружать различные версии apk файлов для одного приложения.

Конфигурация приложения

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

Вы можете обновить идентификатор вашего приложения:

Определение версии производится через специальную семантику (major.minor.patch):

Обновление названия приложения:

Вы также можете указать, какой файл использовать по умолчанию при запуске приложения:

Я не рекомендую так делать, так как приложение становится менее безопасным, потому что оно сможет обрабатывать запросы с внешних доменов. Именно поэтому по умолчанию установлен whitelist plugin.
Для получения более подробной информации о конфигурации приложений, прочтите официальную документацию для файла config.xml.

Развертывание приложения

В этом разделе, мы разберем процесс подготовки и развертывания приложения Cordova для магазина Google Play.

1. Добавление платформ

Первое, что вам нужно сделать, это добавить целевые платформы. Чтобы перечислить необходимые платформы, можете воспользоваться специальным списком от Cordova, выполнив команду cordova platform list. Эта команда выводит платформы, которые вы уже установили, а также платформы, которые доступны для публикации:

Как видите, у меня уже установлены две платформы: browser и android. Вы можете сделать то же самое при помощи следующих команд:

Вы можете воспользоваться эмулятором в вашем браузере, чтобы отобразить ваше приложение на мобильном устройстве. Например, в Google Chrome, нажмите на иконку мобильного устройства, в левом верхнем углу инструментов разработчика.

Команда cordova serve копирует ваши исходные файлы в папку platforms/browser. Это означает, что вы можете в любое время вносить изменения в каталог www, но чтобы изменения вступили в силу, необходимо перезапустить сервер. Если вы хотите получить больше информации по данной теме, я рекомендую использовать Grunt и Gulp, это два инструмента автоматизации, которые помогут вам копировать файлы для платформы браузера, каждый раз, когда вы вносите изменения в исходный код. Вот как наше приложение выглядит в браузере:

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

2. Генерирование и сборка приложения

После добавления Android платформы, пришло время построить приложение. Этот процесс генерирует пакет или установочный файл для каждой платформы, которые вы добавили к вашему проекту. Для Android платформы, это будет .apk файл. Вы можете использовать следующую команду, чтобы инициировать процесс сборки для Android платформы:

Если вы хотите построить приложение сразу для всех платформ, воспользуйтесь командой:

Обратите внимание, выше перечислены две команды для генерирования готового .apk файла, для добавления в Google Play. По умолчанию, команда cordova build генерирует отладочную версию вашего приложения. Эта версия приложения предназначена для тестирования разработчиками. Единственное различие между ними — это сертификат, используемый для подписания приложения. Отладочная версия приложения подписана сертификатом от Android SDK, а конечная версия приложения подписывается сертификатом разработчика. Это означает, что когда вы запускаете команду cordova build android, он автоматически подпишет и сгенерирует apk файл. Если вы хотите сгенерировать релизную версию приложения для добавления в Google Play, вы должны добавить опцию --release:

Тогда, Cordova подпишет ваше приложение сертификатом разработчика.

Для подписки на Android, воспользуйтесь файлом keystore. Для создания хранилища ключей, можно использовать keytool, который находится в папке sdk/tools вашего Android SDK. Так как мы уже добавили путь к SDK Tools ранее, мы можем выполнить команду keytool из командной строки.

genkey — команда для генерации ключа.
keystore — имя файла хранилища.
alias — псевдоним ключа.
keyalg — алгоритм генерации ключа.
keysize — размер ключа в битах.
validity — сколько дней ключ будет действителен.

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

И выполните следующую команду:

Эта команда запросит пароль, который вы ввели при создания хранилища ключей. Введите пароль, чтобы начать процесс подписания.

Настало время оптимизировать наше приложения. Чтобы сделать это, мы используем инструмент Zipalign. Zipalign установлен в каталоге build-tools вашего Android SDK. Вы можете скопировать его в каталог Android SDK Tools. Так как ранее мы уже добавили каталог SDK Tools для файла .bashrc, это позволит использовать его в любом терминале. Далее выполните команду указанную ниже. Опция -v выводит полную информацию. 4 — целое число, которое определяет границы выравнивания байта. Оно всегда должно быть установлено со значением 4. android-release-unsigned.apk путь к файлу apk. photosharer.apk это имя выходного файла.

После выполнения всех этапов, вы сможете с легкостью загрузить готовое приложение в Google Play. Если вы использовали Crosswalk, то вам нужно выполнить тот же самый процесс для версий ARMv7 и x86 приложения.

Заключение

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

В следующей статье мы рассмотрим создание более сложного приложения под iOS и Android.

Читайте также: