cordova что это такое
Что представляет из себя Cordova и PhoneGap?
Экскурс в историю
PhoneGap появился примерно в 2009 году в рамках стартапа под названием Nitobi. Этот фреймворк имеет открытый исходный код и обеспечивает доступ к собственной среде разработки через встроенный в нативное приложение компонент Android-платформы Web View. Цель PhoneGap – обеспечить условия для создания мобильного приложения, пользуясь чистыми веб-технологиями, такими как HTML5, CSS и JavaScript. Одновременно с этим у разработчика должна была оставаться возможность использования (при необходимости) нативного кода.
Новое название, новое развитие
Сначала различия между Cordova и PhoneGap были минимальными. Но компания Adobe, как всегда, добавила в экосистему PhoneGap свои собственные сервисы. Отсюда и возник сервис PhoneGap Build.
Итак, когда вы приступаете к разработке нового гибридного приложения, у вас есть выбор: собственно Cordova, или же PhoneGap (что, в принципе, тоже будет Cordova, но с привязками к сервисам Adobe).
Примечание: в Ionic используется Cordova в чистом виде, а вот PhoneGap не используется совсем (хотя такая возможность существует).
Скрытый потенциал
По своей сути, Cordova предлагает простой, но мощный API для вызова функций JavaScript, которые отображаются на родном коде или плагинах. Это означает, что можно передавать любой вид данных из нативной среды в веб-среду разработки.
Cordova может выполнять многое из того, что вы обычно делаете на мобильном устройстве. Это мощный API нижнего уровня, который существует в комплексе с уже готовыми простыми плагинами, обеспечивающими доступ к камере или, например, к компасу.
Поэтому когда кто-то говорит о том, что Cordova не может делать то, что могут делать другие нативные приложения, это ошибочное суждение. Единственным ограничением может быть отсутствие необходимых плагинов, а также ваша заинтересованность (или возможность) в создании тех плагинов, которые нужны вам для конкретного приложения.
Если Cordova умеет делать все то же самое, что и нативное приложение, почему она не выглядит как приложение? Чтобы ответить на данный вопрос, нужно вернуться к ее целям и назначению.
Сегодня то же самое явление можно проследить на примере navigator.camera API. Это очень простой API для получения изображения с камеры устройства. Можно ожидать, что в будущем данная функция станет для браузеров стандартной.
И вот так, когда браузеры постепенно получают более расширенную функциональность за счет внедрения новых API, Cordova так же постепенно перестает быть актуальной! В принципе, она подсказывает разработчикам, какими должны стать браузеры в будущем.
Является ли Cordova универсальным решением?
Лично я с таким мнением не согласен. Конечно, мы должны улучшать функциональность браузера, внедряя новые API. Но мы также должны дать возможность разработчикам создавать кастомные и совершенно уникальные гибридные приложения. А для этого в составе Cordova нам нужно больше стандартных плагинов из разряда «native-to-browser» и большее количество API.
В этом разница между реально существующим navigator.camera.getPicture() API и теоретически существующим navigator.camera.getPhotos(start, count, size) API. С первым можно лишь снять одно единственное фото: жестко запрограммированный UI не позволит управлять процессом съемки. Второй API не имеет таких жестких ограничений, он лишь направляет поток данных с нативного слоя в ваш JavaScript.
К счастью, у Cordova есть очень качественный API для плагинов. Нам нужно больше хороших плагинов, которые будут предоставлять необходимые данные из нативного слоя. Тем самым ограничения UI перестанут быть проблемой. Дефолтные плагины очень простые, они не совсем подходят, если вы хотите создать что-то по-настоящему «кастомное» (вроде приложения Instagram).
И здесь открывается широкое поле деятельности для Ionic.
Цель Ionic предоставить более расширенный набор стандартных плагинов Cordova, чтобы можно было создавать более сложные и нестандартные приложения. Это довольно сложная задача, но мы уже начали ее реализацию, так что через несколько месяцев появится много интересных материалов, демонстрирующих возможности Cordova.
Выводы
Cordova является одновременно и низкоуровневым API для нативного приложения, запускаемого в окне браузера, и набором дефолтных плагинов, с помощью которых в Cordova-приложения добавляются простые функции по аналогии с простыми API браузера.
Cordova умеет делать все то же самое, что и нативное приложение. Просто для этого требуются необходимые плагины, чтобы отправить нужные данные в веб-код. Нам нужно привлечь большее число разработчиков к созданию таких плагинов, и мы будем искать кадры.
Get Started Fast
Installing Cordova
Create a project
Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type cordova create
Add a platform
After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.
To add a platform, type cordova platform add
$ cordova platform add browser
Run your app
From the command line, run cordova run
Common next steps
Supported Platforms
See a list of features supported in each platform
Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.
More Resources
General
Development
Apache Software Foundation
Contribute
Help Cordova move forward!
Report bugs, improve the docs, or contribute to the code.
Copyright © 2021 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
Apache and the Apache feather logos are trademarks of The Apache Software Foundation.
«Raleway» font used under license. For details see the attributions page.
Пишем фоновый процесс на Apache Cordova
Два года назад я увлекся мобильной разработкой под Android. Тогда я писал простенькие приложения для парсинга веб-сайтов. Программный код писался на Java. Это очень мощный язык, но для написания простых легковесных приложений, не выполняющих сложных задач, его объектно-ориентированная парадигма показалась мне не слишком кстати. В то время я только начинал знакомиться с JavaScript. Изначально он привлек меня своей простотой, затем я стал открывать в нем все большие и большие возможности. Я был знаком с HTML5 и CSS3, удовольствия ради создавал симпатичные веб-страницы.
Однажды я узнал об Apache Cordova — фреймворке, который позволяет писать мобильные приложения на HTML, CSS и JavaScript. Я сразу же установил его.
Работать с Cordova оказалась по-настоящему удобно. Тем не менее, судя по количеству тематических статей в интернете, фреймворк пока не получил достаточно широкого распространения. Хотя на нем реализовано, например, мобильное приложение Википедии.
Я считаю, что это связано с недостаточным функционалом стандартного Cordova API. Для работы с Bluetooth, распознаванием и синтезом речи, камерой и т.д. требуется использовать плагины. Плагины могут писаться для одной или нескольких платформ на их нативном языке.
Для нужд разработчиков были написаны тысячи плагинов, которые находятся в открытом доступе. Я был доволен до того момента, когда мне потребовалось создать приложение, которое бы даже после своего закрытия отправляло пользователю push-уведомления каждый раз через определенный промежуток времени. На Android такой фукнционал реализуется через фоновый процесс. Плагина для создания чего-либо подобного не нашлось. Плагин https://github.com/katzer/cordova-plugin-background-mode позволял запускать фоновый процесс, который останавливался сразу же, как закрывалось приложение.
На форумах утверждали, что создать полноценный фоновый процесс на Cordova невозможно. Но кто мешает написать свой плагин для этих нужд? После нескольких дней работы мне удалось написать плагин и приложение, которое при запуске начинало отправлять пользователю каждые 5 секунд уведомления.
О пути создания приложения и плагина я хочу рассказать в этом посте.
Установка Cordova и запуск приложения
Перед установкой Cordova обязательно установите Android SDK, Apache Ant и Java.
Затем добавьте их в системный путь:
Обязательно укажите СВОИ пути к папкам.
С сайта https://nodejs.org/en/download/ устанавливаем Node.js, позволяющий транслировать JavaScript в нативные коды. Платформа содержит пакетный менеджер npm, с помощью которого мы установим Cordova.
cordova create MyApp com.app.myapp MyApp
Первый аргумент — название папки, в которой будут храниться коды и файлы приложения. В данном случае это MyPluginApp.
Второй аргумент — название пакета приложения, его уникальный идентификатор.
Третий аргумент — название приложения, которое будет видно пользователю. Как правило, совпадает с названием папки.
Не забудьте перейти в папку приложения:
cordova platform add android
cordova run android
Пишем плагин
Теперь создадим плагин, который будет проводить API к классу Service, отвечающему за фоновый процесс.
Для написания плагина требуется создать обычную папку. Создадим ее в той же директории, в которой находится папка приложения. Назовем ее MyPlugin.
Любой плагин содержит файл plugin.xml. Создадим и добавим его в папку плагина.
plugin.xml:
В этом файле хранится информация о плагине, необходимых для его функционирования файлах и библиотеках, а также особенности API. Как вы можете заметить, мы ссылаемся на один JavaScript- и два Java-файла. Так создадим же их!
В папку MyPlugin добавим папку www и там создадим файл MyPlugin.js. Там мы опишем функции, с помощью которых приложение сможет взаимодействовать с нативным кодом. То есть этот файл будет служить своеобразным проводником между JavaScript-кодом разработчика приложения и Java-кодом разработчика плагина.
MyPlugin.js:
Плагин имеет одну единственную функцию runBackground, которая запускает фоновый процесс, отправляющий уведомления. В качестве аргументов мы передаем ей функцию, которая вызывается в случае успешного выполнения команды, и функцию, которая сообщает об ошибке. Далее идет имя класса нативного кода, которому будет отправлена команда и название самой команды. В конце следует массив дополнительных аргументов, который трогать не будем.
И наконец приступим к работе с нативным кодом. Создаем папку src/android внутри MyPlugin. Здесь будет находиться два Java-класса: MyPlugin.java и MyService.java.
MyPlugin.java:
MyService.java:
Этот класс — обычный Service. При запуске сервиса его метод onStartCommand возвращает START_STICKY. Благодаря этому даже после закрытия приложения процесс продолжает жить. Чтобы отправлять push-уведомления каждые 5 секунд, был создан поток Runnable, который вызывается хэндлером каждые 5 секунд. В теле потока происходит создание и отправка уведомления.
Добавляем плагин в приложение
Переходим в директорию приложения и добавляем наш плагин:
Затем переходим в www/js/index.js и переписываем метод onDeviceReady следующим образом:
Через объект MyPlugin вызывается функция runBackground, которой передаем функцию, которая вызывается в случае ошибки и пустую функцию, если все прошло успешно. Эта функция была оставлена пустой, так как подтверждением успешного вызова у нас уже является отправка push-уведомления.
Заключение
Теперь у нас есть работающее приложение, которое отправляет каждые 5 секунд push-уведомления даже после того, как мы его закроем.
Хочу сказать, что это — лишь каркас для создания полезных приложений. Так, к примеру, можно напоминать человеку о том, что пора пробежаться (не каждые 5 секунд, разумеется). В любом случае, этот пример показывает, что Cordova с использованием плагинов не уступает по функциональности нативным приложениям.
Исходные коды приложения и плагина вы можете загрузить по ссылкам: само приложение, плагин.
📱Создаем мобильное приложение для Android на JavaScript с помощью Apache Cordova
Распространение мобильных устройств в наше время достигло невероятных значений. Мобильный телефон есть у 2 из каждых 3 человек на планете. С помощью мобильных люди общаются, делают покупки, получают образование, играют. Это огромный рынок, который нельзя оставлять без внимания.
Однако чтобы разрабатывать приложения для мобильных платформ, нужно владеть определенным языком программирования. Swift – для iOS, Java или Kotlin – для Android. Или JavaScript – для iOS, Android и ряда других ОС!
Да-да, JavaScript везде, и на мобильных в том числе. На данный момент есть несколько известных и проверенных фреймворков для создания кроссплатформенных мобильных приложений на этом языке, например, React Native и Apache Cordova, а также основанные на ней проекты.
Для разработки на React Native требуется знание библиотеки React и основных паттернов работы с ней. Cordova же может взять обычное веб-приложение и обернуть его нужным кодом так, чтобы оно работало на мобильных ОС. Такие «гибридные» приложения не могут похвастаться высокой нативной производительностью, однако очень просты в разработке.
Cordova отлично подходит для создания простых проектов без сложной графики. Сейчас мы как раз разработаем один из них – классическое Todo App для Android на JavaScript.
Шаг #0. Настройка среды разработки
Так как мы пишем приложение для Android, нам понадобится JDK (Java Development Kit) и Android SDK – среда разработки для приложений Android. А также собственно Cordova.
Установочник для нужной платформы можно найти на сайте Oracle. Выбирайте версию не выше JDK 8, с более новыми Cordova не будет работать.
Android Studio
Для разработки под Android также потребуется установить Android Studio.
Добавьте в переменную PATH каталоги tools и platform-tools :
Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).
Создание эмулятора
Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.
Для этого зайдите в меню AVD Manager:
И создайте эмулятор с нужными параметрами.
Cordova
Осталось глобально установить npm-пакет Cordova:
Шаг #1. Превращение веб-страницы в Android-приложение
Подготовительные работы закончены, пора приступать к самому интересному.
Вероятно, самый интересный вопрос – как запустить обычную веб-страницу на устройстве Android. Чтобы ответить на него, создадим пустой проект Cordova и разберемся на практике.
Создание пустого проекта
Команда для создания нового проекта Cordova:
deviceready – это событие, которое вызывает сама Cordova. Нетрудно догадаться, что оно возникает после того, как устройство, на котором запущено приложение будет готово его воспроизводить. Так как мы запустили проект в обход Cordova, это событие не возникает, поэтому надпись Connecting to device не исчезает.
Добавление платформы
Укажем целевые платформы для проекта – у нас это только Android:
Сборка проекта
Команда для сборки проекта для Android-платформы:
Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!
Запуск на эмуляторе или устройстве
Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.
Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:
Кордова сама соберет проект, обнаружит устройство и запустит приложение
Можно обойтись и без реального устройства.
Запустите созданный ранее эмулятор в Android Studio:
и снова выполните команду:
На этот раз кордова найдет эмулятор и запустит проект на нем:
Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.
#Шаг 2. TODO-приложение
Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.
Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:
Отладка
Запущенное на эмуляторе или реально устройстве приложение Cordova можно отлаживать через браузер Chrome.
Для этого перейдите по адресу: chrome://inspect/#devices, найдите устройство в списке и нажмите Inspect.
Шаг #3. Использование функциональности платформы
До сих пор наше приложение использовало только функциональность веб-платформы. Однако Cordova предоставляет доступ и к возможностям мобильного устройства – через многочисленные плагины.
Для примера реализуем нативные диалоговые окна и оповещения.
Диалоговые окна
Теперь в коде приложения нам доступ объект navigator.notification с четырьмя методами:
Нам нужен метод confirm :
Напоминания о делах
Еще одна очень полезная функциональность – напоминание о делах в установленное время.
Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.
Использование в коде:
А для планирования оповещений понадобится плагин cordova-plugin-local-notification.
Использование в коде проекта:
Публикация проекта в Google Play
Приложение готово, осталось только собрать его для продакшена.
В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.
Чтобы выложить проект в Google Play, его нужно подписать.
Для этого нужно сгенерировать ключ:
Теперь скомпилируем проект с ключом:
Важно указать правильное имя ключа и алиас.
Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):
Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.
Создание мобильного приложения на cordova, для любого сайта.
Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данной заметкой. Постарался сделать ее более менее подробной, но при этом не сильно нудной.
Однако, не буду рассматривать момент с регистрацией учетных записей разработчика в AppStore и GooglePlay. Думаю, сможете разобраться самостоятельно. Расскажу только, а сборке самого приложения.
Минусы продукта 1С-Битрикс: Мобильное приложение
У компании 1С-Битрикс, есть собственное решение, для разработки приложений, так и называется: «1С-Битрикс: Мобильное приложение«. Его мы использовать не будем ввиду ряда, достаточно критичных минусов:
Делаем приложение на Cordova
Если говорить по простому: Cordova позволяет упаковать любой сайт в мобильное приложение, с дальнейшей публикацией в магазинах приложений AppStore и GooglePlay. Так же Cordova позволяет создавать и настольные приложения для Windows и macOS (включая платформу Electron)
Любое приложение, можно создать как самодостаточным- содержащим всю логику, контент и функционал внутри себя. Так же, можно создать приложение с сетевыми функциями- по сути, с открытием любого сайта внутри себя.
В этой заметке рассматриваю разработку, приложения, именно для сайта (магазина, инфоресурса и.т.д.) и только для Android и iOs. Важный момент, это ни как не связано с 1C-Битрикс, «заверуть» в приложение можно абсолютно любой сайт- не важно, на чем работающий.
Итак, не буду размусоливать, просто приступим. Детали можно будет обсудить в комментариях. Если забыл что-то важное- дополню заметку
Как сделать приложение на Cordova
Итак. Перво на перво качаем и устанавливаем NodeJS, от него нам нужен менеджер пакетов npm
Создаем папку, в которой будем хранить проекты. Для примера буду использовать /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 НАЗВАНИЕ_ПЛАГИНА
Перечисляю наиболее востребованные, для гипотетического магазина:
В Android Studio добавляем проект из папки /Documents/CordovaProjects/AppName/platforms/android здесь можете его скомпилировать в apk или bundle(предпочтительнее) и опубликовать в GooglePlay
В Xcode открываем /Documents/CordovaProjects/AppName/platforms/ios. И тут все сложнее:
Пример приложения созданного по данному способу: в моем портфолио, там же ссылки на магазины (обратите внимание на вес приложения)
Дополнительно
Поле публикации, приложение можно обновлять выпуская новую версию:
И еще одна штучка
Я не рассматривал разработку самого контента приложения. Тут, надеюсь все понятно: Просто делаете сайт, который будет открываться внутри приложения.
Но вот эти наработочки, могут понадобиться: