Apache Cordova — это открытое программное средство для разработки мобильных приложений. Разработчики могут создавать кроссплатформенные решения с использованием стандартных веб-технологий — HTML5, CSS3 и JavaScript. Приложение работает внутри контейнера, адаптированного под каждую платформу, и обращается к возможностям устройства через совместимые стандартные API: датчики, локальные данные, состояние сети и другие модули.
Один кодовый репозиторий для множества платформ, полностью бесплатное и открытое ПО.
Apache Cordova подойдёт вам, если вы находитесь в одной из следующих ситуаций:
- Вы мобильный разработчик и хотите развернуть одно приложение на нескольких платформах, без повторной разработки под языки и инструменты каждой платформы;
- Вы веб-разработчик и желаете собрать веб-приложение для публикации в популярных магазинах приложений;
- Вы мобильный разработчик, которому нужно сочетать нативные компоненты и WebView (специализированное окно браузера), чтобы код веб-страниц мог обращаться к низкоуровневым API устройства; либо требуется разработка плагинов для организации взаимодействия между нативным кодом и WebView.
Приложение Cordova состоит из множества компонентов. На изображении представлена общая высокоуровневая архитектура приложений Cordova.
WebView (Веб-представление)
WebView с поддержкой Cordova способна отображать весь интерфейс приложения. На некоторых платформах её можно использовать как компонент гибридного приложения вместе с нативными элементами управления.
Web App (Веб-приложение)
Здесь размещается ваш бизнес-код. Приложение реализовано в виде набора веб-страниц, точкой входа по умолчанию выступает локальный файл index.html. Страница подключает необходимые CSS, JavaScript, изображения, медиафайлы и другие ресурсы. Всё приложение выполняется внутри WebView в нативном контейнере, после чего собирается и распространяется через магазины приложений.
В контейнере есть важнейший файл: config.xml. Он хранит основные сведения о приложении и определяет параметры работы, например, разрешение смены ориентации экрана (вертикальный/горизонтальный режим).
Plugins (Плагины)
Плагины — ключевая часть экосистемы Cordova. Они выступают мостом для обмена данными между Cordova и нативным кодом, инкапсулируют стандартные API устройств и позволяют коду JavaScript вызывать нативные функции.
Команда Apache Cordova поддерживает набор основных плагинов, предоставляющих доступ к базовым функциям устройства: состояние аккумулятора, камера, контакты и другие возможности.
Помимо официальных базовых плагинов существует множество сторонних решений, реализующих расширенные функции, работающие не на всех платформах. Искать плагины Cordova можно через специальные платформы или npm; также вы можете самостоятельно разрабатывать плагины по Руководству по созданию плагинов. Типичный пример задачи: настроить взаимодействие Cordova с пользовательскими нативными компонентами.
Важно: при создании нового проекта Cordova плагины не устанавливаются автоматически — это правило актуально для новых версий. Любые плагины, как основные, так и сторонние, нужно устанавливать вручную явной командой.
Cordova не поставляет элементы интерфейса и фронтенд-фреймворки MV. Он предоставляет лишь среду выполнения для веб-кода. Если вам нужны визуальные компоненты или архитектурный фронтенд-фреймворк, вам придётся выбрать и интегрировать его в проект самостоятельно.
Два подхода к разработке
Cordova предлагает два основных рабочих процесса для сборки мобильных приложений. Во многих задачах оба подхода приводят к результату, но каждый имеет свои преимущества:
Кроссплатформенный рабочий процесс (Консольный инструмент CLI)
Подходит для проектов с большим количеством целевых платформ, когда глубокая платформозависимая настройка почти не требуется. Основной инструмент — cordova CLI. CLI — высокоуровневое средство, позволяющее собрать проект сразу для нескольких платформ, скрывая детали низкоуровневых скриптов: инструмент копирует общие веб-ресурсы в папки каждой платформы, автоматически настраивает окружение, запускает скрипты сборки для создания установочных пакетов и предоставляет единую консоль для управления плагинами.
Платформозависимый рабочий процесс
Подходит при разработке под одну платформу, если требуется глубокое изменение низкоуровневых файлов проекта.
Типичный сценарий: объединение пользовательских нативных компонентов и Cordova WebView внутри одного приложения.
Выбирайте этот процесс, если нужно напрямую редактировать файлы проекта внутри SDK платформы.
Данный процесс основан на низкоуровневых скриптах для каждой платформы, управление плагинами осуществляется отдельной утилитой Plugman. Хотя его можно использовать и для кроссплатформенной разработки, трудозатраты значительно выше: нет единого высокоуровневого инструмента, каждую платформу нужно собирать отдельно и поддерживать собственные конфигурации плагинов.
После перехода из режима CLI на режим SDK платформы + низкоуровневые скрипты вернуться обратно невозможно.
CLI хранит общий исходный код для всех платформ и перезаписывает файлы в папках платформ при каждой сборке. Если вы хотите сохранить внесённые изменения в файлы платформенной директории, придётся перейти на режим низкоуровневых скриптов. В этом режиме система больше не читает общий веб-код, а использует отдельные файлы из папки платформы.
Установка Cordova
Способ установки зависит от выбранного рабочего процесса:
Рассмотрим пример кроссплатформенного процесса через CLI.
Консольный инструмент Cordova (CLI) распространяется как пакет npm.
Следуйте шагам для установки cordova CLI:
- Скачайте и установите Node.js. После завершения установки вы сможете вызывать команды
nodeиnpmнапрямую из терминала. - (Опционально) Если Git не установлен, скачайте и установите клиент Git. После установки команда
gitбудет доступна в терминале. Cordova CLI и npm используют git для загрузки ресурсов из репозиториев при необходимости. - Установите модуль cordova через утилиту npm, поставляемую вместе с Node.js; npm автоматически выполнит загрузку пакета.
Установка nodejs
Установка Node.js простая: скачайте файл msi (для Windows), запустите двойным щелчком мыши и следуйте стандартным шагам мастера установки. После завершения установки
Откройте терминал CMD, чтобы проверить успешность установки.
Выполните две команды. Установка считается успешной, только если обе выведут номер версии (результат должен отобразить версию, как на изображении ниже)
node -v
npm -v
После успешной установки Node.js перейдём к установке cordova
Системы macOS / Linux:
npm install -g cordovaПользователям macOS и Linux: при установке инструмента в директории с ограниченными правами, например /usr/local/share, может потребоваться добавить префикс sudo к команде npm.
Если вы используете менеджеры версий nvm / nave, либо у текущей директории есть права на запись, использовать sudo не нужно.
Также рекомендуется по возможности избегать запуска npm с sudo, чтобы предотвратить ошибки прав доступа и проблемы установки пакетов.
Лучше управлять Node.js и npm через nvm (Node Version Manager) или nave, тогда при установке пакетов sudo обычно не требуется.
Система Windows:
C:\>npm install -g cordovaПараметр -g означает глобальную установку cordova. Без этого параметра пакет установится только в подпапку node_modules текущей директории.
После завершения установки выполните в терминале команду cordova без параметров. Если на экране отобразится справочная информация, установка выполнена успешно.
В процессе установки вы увидите сообщение «added 217 packages in 14s»
Проверка успешности установки
cordova -vЕсли выводится номер версии (например 13.0.0), среда готова к работе.
Системные требования и поддержка версий
| Версия CLI Cordova | Минимальная поддерживаемая версия Node.js |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
Установка завершена, теперь мы можем приступить к изучению cordova.
Обзор и установка