Ваш первый проект на Cordova

Posted on Авг 01, 2026 by

На прошлом занятии мы успешно установили Cordova. Сейчас разберемся, как создавать проекты через консольные команды CLI.

1. Создание проекта Cordova

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

cordova create hello com.foxdevelop.hello HelloWorldCode language: CSS (css)

Описание параметров:

  1. hello — имя папки проекта
  2. com.example.hello — идентификатор пакета приложения (уникальный для Android, обязательно измените перед публикацией)
  3. HelloWorld — отображаемое название приложения

Ниже реальный пример: создаем каталог на диске D, после чего инициализируем внутри него проект.

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Code language: CSS (css)

Теперь на диске D появится каталог cordovademo, внутри него подпапка hello.

Основной каталог исходного кода: hello/www/

Основная страница приложения: www/index.html

Не изменяйте никакие файлы в каталоге platforms — при сборке они перезапишутся!

2. Переход в проект и добавление платформ

cd hello

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

# Платформа Android (работает на Windows)
cordova platform add android

# Платформа iOS (собрать на Windows не получится, поддерживается только macOS)
# cordova platform add iosCode language: PHP (php)

Лог выполнения команды

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electronCode language: CSS (css)

3. Проверка окружения (важно)

cordova requirements

Команда проверяет, настроено ли рабочее окружение: установлен ли JDK и другие компоненты.

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' не распознан как внутренняя или внешняя команда,
исполняемая программа или пакетный файл.
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failedCode language: PHP (php)

Идеальный результат проверки выглядит так:

Java JDK: installed
Android SDK: installed
Gradle: installed

Но в моем случае вывод показывает: Gradle: not installed

Если у вас не установлен JDK — скачайте и установите его. Инструкция по установке JDK есть в других наших занятиях.

На данном компьютере используется JDK версии 11.

При попытке сборки на моем ПК возникла такая ошибка:

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android StudioCode language: JavaScript (javascript)

Вам нужно установить Android Studio — в комплекте идет Android SDK.

Детальная инструкция по Android Studio доступна в других уроках.

Откройте Android Studio, в верхнем меню выберите Tools → SDK Manager и посмотрите путь к установленному SDK.

Далее настроим переменные окружения системы

Имя переменной: ANDROID_HOME
Значение переменной: C:\Users\xxxxx\AppData\Local\Android\Sdk

Помимо создания переменной её каталоги нужно добавить в переменную Path

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Установка консольных инструментов через Android Studio

Откройте Android Studio → Tools → SDK Manager

Перейдите на вкладку SDK Tools

Загрузка бинарного пакета Gradle

Скачать с официального сайта: https://gradle.org/releases/

Распакуйте архив по пути: C:\gradle\gradle-8.5

Gradle by Develocity | Releases

Настройка системных переменных окружения

Имя переменной: GRADLE_HOME
Значение переменной: C:\gradle-8.7

Создайте новую системную переменную

Добавьте путь в переменную Path

Проверьте корректность установки

Откройте командную строку cmd

gradle -v

Запустите проверку окружения повторно. Если вывод выглядит так — конфигурация выполнена успешно.

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failedCode language: CSS (css)

Проблема 2: версия JDK

При запуске команды cordova run android у меня появилась такая ошибка:

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebugCode language: JavaScript (javascript)

На моем ПК установлен JDK11, но актуальный Android Gradle Plugin для платформы Cordova Android требует обязательного использования JDK17. Из-за этого сборка завершается ошибкой.

Я использую Zulu JDK 11, поэтому обновлю его до Zulu JDK 17

Скачать дистрибутив можно по ссылке Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

Скачанный файл имеет расширение msi. Запустите установщик и отметьте предложенные галочки — инсталлятор самостоятельно настроит переменные JAVA_HOME и Path.

Откройте командную строку CMD для проверки версии Java

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)Code language: CSS (css)

Такой вывод означает успешную установку.

4. Сборка приложения

# Собрать все подключенные платформы (сейчас только Android)
cordova build

# Собрать только Android-версию
cordova build android
Code language: PHP (php)

После успешной компиляции APK-файл появится по пути:

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

Пример лога сборки

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apkCode language: JavaScript (javascript)

Найдите APK по адресу D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

5. Запуск для тестирования

Способ 1: запуск на Android-эмуляторе

cordova emulate android

Способ 2: тест на физическом устройстве через USB (включите отладку по USB)

cordova run android

Мы будем тестировать на реальном телефоне — советую и вам использовать физическое устройство. Подключите Android-смартфон кабелем и активируйте режим отладки.

Откройте командную строку в каталоге hello и запустите команду cordova run android

После этого на телефоне установится приложение

Откроется стандартная страница Cordova

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

Доступ к нативным функциям телефона

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

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

cordova plugin add cordova-plugin-camera

Посмотреть список установленных плагинов

cordova plugin ls

Вызов нативных API через JS возможен только после срабатывания события deviceready. Сразу после загрузки страницы плагины использовать нельзя!

Пример базового шаблона (www/js/index.js)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // Устройство готово, можно вызывать любые плагины Cordova
    console.log("Инициализация Cordova завершена");
}
Code language: JavaScript (javascript)

Лог установки плагина

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"Code language: CSS (css)

Далее изменим файл index.html по примеру ниже, чтобы протестировать работу камеры

Сначала разберем структуру каталогов созданного проекта

D:\cordovademo\hello

Весь дальнейший код мы пишем в папке www

Замените содержимое index.html на этот код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест камеры</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">Сделать фото</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("Событие deviceready, Cordova инициализирована");
            cameraReady = true;
        }

        // Используем addEventListener для подписки (onclick часто вызывает конфликты по времени)
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Дождитесь завершения инициализации Cordova!");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("Фото сделано успешно:", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("Ошибка съемки: " + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0, используем число, чтобы избежать ошибок неопределенной переменной
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Code language: C# (cs)

Снова запустите команду cordova run android

Откроется приложение с кнопкой. При нажатии запустится камера, вы сможете сделать снимок.

* 7. Каталог merges: разные файлы для отдельных платформ

По умолчанию все платформы используют общие ресурсы из папки www.

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

merges/
├─android/
│  └─css/overrides.css  # Файл действует только на Android
└─ios/
Code language: PHP (php)

При сборке файлы из каталога merges перезаписывают одноименные файлы из www.

* 8. Обновление Cordova

# Глобальное обновление консольной утилиты Cordova
npm update -g cordova

# Установка конкретной версии
npm install -g cordova@12.0.0

# Обновление версии платформы Android внутри проекта
cordova platform update android --save
Code language: PHP (php)

Свод основных команд

#1 Создание проекта
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Добавление платформы Android
cordova platform add android

#3 Проверка окружения
cordova requirements

#4 Сборка отладочной версии
cordova build android

#5 Запуск на физическом устройстве
cordova run android
Code language: CSS (css)

Ваш первый проект на Cordova

Posted in Учебное пособие по Cordova

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *