React es un marco muy agradable, javascript es agradable, pero ¿qué pasa si necesitas una aplicación android? ¿O una aplicación iOS para eso? Usted ha leído todas las aplicaciones que incrustan un navegador, y en el navegador javascript runtime, usted cargaría una aplicación completa, escrita en la reacción o angular o lo que tiene usted. Tal vez puro javascript.

De hecho, no importa qué marco para el desarrollo de vanguardia usted estaría utilizando - una vez que usted construye y genera public/index. html y los activos relacionados, o similar, entonces puedes empaquetar ese "sitio web estático" - sólo html, javascript y activos - como aplicación android.

En este tutorial, haremos exactamente eso: empaquetaremos una carpeta es archivos con un índice.html, que representan una aplicación web compilada, como un apk que se instalará en un dispositivo android. Este tutorial asume conocimiento intermedio de las tecnologías de frontend. Estoy usando un macbook pero los comandos deben ser similares en todo el sistema operativo.

Una palabra sobre qué tecnologías se describen aquí. Ellos son condensador y electrones. Estoy específicamente interesado en empaquetar un sitio estático como aplicación apk. Esto significa que evito Ionic - sea lo que sea, parece un reemplazo para, digamos, bootstrap css o material UI. Aquí estoy enfocado en el oleoducto de construcción, por lo que no se consideran los marcos de capa de aplicación. De hecho, sólo tengo un índice.html con Hello, world! en él, para probar.

Construir el sitio estático

Ahora, pasaremos un poco de tiempo usando nodo, así que vamos a instalarlo y arrancarlo. Vamos a construir su aplicación de reacción de vainilla pura:

npm run build

De esta manera tendrá una carpeta de activos que puede apuntar a WebView. Ahora vamos a instalar condensador:

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

Obviamente, debe reemplazar los defectos. Entonces corre:

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

Usted debe tener estudio android instalado - es gratis, y para el desarrollo androide que parece necesitar. Así que, emitir el último comando debería haber abierto el estudio android para usted.

Tuve que cambiar / conseguir mis versiones de gris.

Instala Java

Tuve que instalar la versión coincidente de java para mi plato:

brew install openjdk@17

^ Esto tomó demasiado tiempo, así que descargué una java de Oracle en lugar: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

Vea dónde están todas sus versiones de java:

/usr/libexec/java_home -V
which java

Y en Android Studio ver Archivo - Estructura del proyecto - ubicación del SDK. Consigo estos 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
• /Usuarios/piousbox/Library/Android/sdk

Luego, puedo conectar (y verificar) la versión correcta de java:

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

Luego puse la versión de java 17 en Android Studio, Archivo - Estructura del proyecto - Propiedad SDK Ubicación - Propiedad JDK Ubicación .

Borré la aplicación/android, y re-run:

npx cap add android
npx cap copy
npx cap open android

Entonces tuve este error:

El proyecto está utilizando una versión incompatible (AGP 8.7.2) del plugin Android Gradle. La última versión soportada es AGP 7.2.1

Así que, en android/build. gris Cambié esta línea:

Clásico 'com.android.tools.build:gradle:8.7.2'

Clásico 'com.android.tools.build:gradle:7.2.1' después

Y corre:

cd android
./gradlew tasks

Actualización y Downgrading Java, SDK y Gradle versiones

Grado degradado en android/gradpe/wrapper/gradle-wrapper.properties:

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

He bajado la versión de java en app/capacitor.build.gradle :

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

Y cambiar android/variables.gradle :

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

Eso realmente me movió hacia adelante, y ahora podría correr:

./gradlew tasks
./gradlew build

Esto eventualmente funcionó. Algunas de las cosas que hice fueron:

• descargar varias versiones de java, y utilizar una combinación exitosa de versiones de java y gris.

Intenté rebajar primero, pero eso falló y terminé mejorando, desde la java 17, hasta la java 21. Esto funcionó, con compiladorSdkVersion=35.

• También dejé de usar el estudio android

Pensé que era necesario, pero no lo era, y ./gradlew build hizo el trabajo para mí, mientras que el estudio android se quejaba de que las tareas de pastoreo eran indefinidas. El CLI era más fácil que la UI del estudio androide.

• versión es muy confuso: java 21, sdkVersion 35, gradle 8.7.2

Como que perdí la cuenta de todas las versiones y eventualmente enchufé las últimas que GPT me dijo, como ^ arriba. Finalmente encontré una combinación que funcionó.

Así que con esto, el proyecto androide construido, produciendo un ápk. Esto completó el paso según mi requisito, y por lo tanto completó este tutorial. Si estás interesado, más ReactJs tutoriales se pueden encontrar aquí y Tutoriales Android aquí.

.^.