React - это очень приятный фреймворк, javascript - это хорошо, но что, если вам нужно приложение для Android? Или приложение для iOS в этом отношении? Вы все читали о приложениях, которые встраивают браузер, и во время выполнения JavaScript браузера вы загружали полное приложение, написанное в виде реакции или углового или того, что у вас есть. Может, чистый JavaScript.

На самом деле, не имеет значения, какой фреймворк для front-end разработки вы будете использовать, как только вы создадите публичный индекс. html и связанные с ним активы или аналогичные, то вы можете упаковать этот «статический веб-сайт» - только html, javascript и активы - как приложение для Android.

В этом руководстве мы сделаем именно это: мы упакуем папку с файлами index.html, которые представляют собой скомпилированное веб-приложение, как apk, который будет установлен на устройстве Android. Этот учебник предполагает промежуточные знания фронтенд-технологий. Я использую macbook, но команды должны быть одинаковыми в ОС.

Несколько слов о том, какие технологии описаны здесь. Они являются конденсатор и электронМеня особенно интересует упаковка статического сайта в качестве приложения apk. Это означает, что я избегаю ионного - что бы это ни было, это кажется заменой, скажем, загрузочной ОС или материального пользовательского интерфейса. Здесь я сосредоточен на конвейере сборки, поэтому ни одна из структур прикладного уровня не рассматривается. У меня есть только index.html с Hello, world! В нем, для тестирования.

Создайте статический сайт

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

npm run build

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

npm install @capacitor/core @capacitor/cli
npx cap init myapp com.example.myapp

Очевидно, что вы должны заменить дефолты. Тогда беги.

npm install @capacitor/android
npx cap add android
npx cap copy
npx cap open android

У вас должна быть установлена студия Android - она бесплатна, а для разработки Android вам, кажется, она нужна. Итак, выпуск последней команды должен был открыть для вас студию Android.

Мне пришлось изменить/сопоставить свои версии.

Установить Java

Я должен был установить соответствующую версию Java для моего градле:

brew install openjdk@17

Это заняло слишком много времени, поэтому вместо этого я скачал Java из Oracle: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

Посмотрите, где находятся все версии Java:

/usr/libexec/java_home -V
which java

В Android Studio можно посмотреть Файл -> Структура проекта -> Местоположение SDKЯ получаю такие результаты:

• /Библиотека/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
• /Библиотека/Java/JavaVirtualMachines/jdk-19.jdk/Contents/Home
• /Библиотека/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
• /Библиотека/Java/JavaVirtualMachines/zulu-11.jdk/Контенты/Домой
• /opt/java/jdk/Contents/Home/bin/java
• /Пользователи/piousbox/Library/Android/sdk

Затем я могу связать (и проверить) правильную версию Java:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
java -version

Я установил Java-версию 17 в Android Studio. Файл -> Структура проекта -> SDK Location -> JDK Location .

Я удалил приложение / Android и перезапустил:

npx cap add android
npx cap copy
npx cap open android

Я получил эту ошибку:

В проекте используется несовместимая версия (AGP 8.7.2) плагина Android Gradle. Последняя версия с поддержкой AGP 7.2.1

Итак, в Android / Build. Я изменил эту строку:

классный «com.android.tools.build:gradle:8.7.2»

классный «com.android.tools.build:gradle:7.2.1»

И беги:

cd android
./gradlew tasks

Обновление и обновление версий Java, SDK и Gradle

Я понизил градус на android/gradpe/wrapper/gradle-wrapper.properties:

distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-all.zip

Пониженная версия Java в Разработчик: Conventor.build.gradle :

android {
  compileOptions {
      sourceCompatibility JavaVersion.VERSION_17
      targetCompatibility JavaVersion.VERSION_17
  }
}

И перемены Android/variables.gradle :

ext {
    minSdkVersion = 35
    compileSdkVersion = 35
    targetSdkVersion = 35
    ...
}

Это действительно двигало меня вперед, и теперь я мог бежать:

./gradlew tasks
./gradlew build

В конце концов это сработало. Некоторые из вещей, которые я сделал, были:

• Загрузите несколько версий java и используйте удачное сочетание java и gradle версий.

Сначала я попытался понизить рейтинг, но это не удалось, и в итоге я перешел с Java 17 на Java 21. Это сработало с компиляциейSdkVersion=35.

• Я также временно перестал использовать Android-студию.

Я думал, что это необходимо, но это не так, и ./gradlew build Он сделал эту работу для меня, в то время как студия Android продолжала жаловаться на неопределенные задачи. CLI был проще, чем пользовательский интерфейс Android-студии.

• Версия очень запутанная: java 21, sdkVersion 35, gradle 8.7.2

Я как бы потерял счет всем версиям и в конечном итоге подключил последние, которые мне рассказал GPT. В конце концов я нашел комбинацию, которая сработала.

Таким образом, проект Android был построен, производя apk. Это завершило шаг в соответствии с моим требованием, и поэтому завершило это руководство. Если вам интересно, больше Уроки ReactJs можно найти здесь и Android учебники здесь.

.