React é um framework front-end muito bom, javascript é bom, mas e se você precisar de um aplicativo android? Ou uma aplicação iOS? Você leu todos os apps que incorporam um navegador, e no navegador javascript runtime, você carregará um aplicativo completo, escrito em reagir ou angular ou o que tiver. Talvez javascript puro.

Na verdade, não importa que framework para desenvolvimento de front-end você estaria usando - uma vez que você constrói e gera público / índice. html e os ativos relacionados, ou similares, então você pode empacotar esse "site estático" - somente html, javascript e ativos - como um aplicativo android.

Neste tutorial, faremos exatamente isso: empacotaremos uma pasta com um index.html, que representa um aplicativo web compilado, como um apk para ser instalado em um dispositivo android. Este tutorial assume o conhecimento intermediário das tecnologias frontend. Estou a usar um macbook, mas os comandos devem ser semelhantes nos sistemas operacionais.

Uma palavra sobre a qual as tecnologias são descritas aqui. Eles são. condensador e electrão. Estou especificamente interessado em empacotar um site estático como um aplicativo apk. Isso significa que eu evito Ionic - o que quer que seja, parece um substituto para, digamos, bootstrap css ou material UI. Aqui, estou focado no pipeline de construção, então nenhum dos frameworks de camada de aplicação é considerado. Na verdade, eu só tenho um index.html com Hello, world! nele, para testar.

Construir o Site Estático

Agora, vamos passar um pouco de tempo usando o nó, então vamos instalar e inicializá-lo. Vamos construir a sua aplicação de reacção de baunilha pura:

npm run build

Desta forma você terá uma pasta de ativos que você pode apontar um WebView. Agora vamos instalar o capacitor:

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

Obviamente, você deve substituir os padrões. Em seguida, executar:

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

Você deve ter o estúdio android instalado - é livre, e para o desenvolvimento android você parece precisar dele. Então, emitir o último comando deveria ter aberto o estúdio android para você.

Eu tive que mudar / comparar minhas versões do gradle.

Instalar Java

Eu tive que instalar a versão correspondente de java para o meu gradle:

brew install openjdk@17

^ Isso demorou muito, então eu baixei um java da Oracle em vez disso: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

Veja onde estão todas as suas versões java:

/usr/libexec/java_home -V
which java

E no Android Studio ver Arquivo -> Estrutura do projeto -> Localização SDKTenho estes resultados:

• /Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
• /Library/Java/JavaVirtualMachines/jdk-19.jdk/Contents/Home
• /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
• /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
• /opt/java/jdk/Contents/Home/bin/java
• /Users/piousbox/Library/Android/sdk

Então, posso ligar (e verificar) a versão java correta:

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

Eu, em seguida, definir java versão 17 no Android Studio, Arquivo -> Estrutura do projeto -> Localização SDK -> Localização JDK .

Eu apaguei app/android, e re-run:

npx cap add android
npx cap copy
npx cap open android

Então eu recebi este erro:

O projeto está usando uma versão incompatível (AGP 8.7.2) do plugin Android Gradle. A versão mais recente suportada é o AGP 7.2.1

Então, em andróide/construir. Eu mudei esta linha:

classpath 'com.android.tools.build:gradle:8.7.2' # antes

classpath 'com.android.tools.build:gradle:7.2.1' # após

E corre.

cd android
./gradlew tasks

Atualizando e baixando as versões Java, SDK e Gradle

Eu desclassifiquei o android/gradpe/wrapper/gradle-wrapper.properties:

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

Eu rebaixei a versão java em app/capacitor.build.gradle :

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

E mudar android/variables.gradle :

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

Isso realmente me moveu para a frente, e agora eu poderia correr:

./gradlew tasks
./gradlew build

Isto acabou por resultar. Algumas das coisas que fiz foram:

• baixar várias versões de java, e usar uma combinação bem sucedida de java e gradle versões.

Tentei desclassificar primeiro, mas isso falhou e acabei me atualizando, de java 17 para java 21. Isto funcionou, com compilateSdkVersion=35.

• Eu também temporariamente parei de usar estúdio android

Pensei que era necessário, mas não era. ./gradlew build fez o trabalho para mim, enquanto estúdio andróide continuou reclamando sobre tarefas de gradle sendo indefinido. O CLI foi mais fácil do que a UI do estúdio andróide.

• versioning é muito confuso: java 21, sdkVersion 35, gradle 8.7.2

Eu meio que perdi a conta de todas as versões e eventualmente pluged as últimas que GPT me disse, como ^ acima. Finalmente encontrei uma combinação que funcionou.

Então, com isso, o projeto androide construiu, produzindo um apk. Isto completou o passo conforme minha exigência, e, portanto, completou este tutorial. Se você está interessado, mais Tutoriais do ReactJs podem ser encontrados aqui e Tutoriais Android aqui.

.^.