CapacitorJS: rear aplicaciones nativas con tecnologías web

¿Qué es CapacitorJS?

CapacitorJS es un framework de código abierto que permite construir aplicaciones móviles nativas para varias plataformas utilizando tecnologías web como HTML, CSS y JavaScript. Se integra con herramientas populares como Ionic y permite acceder a las características nativas de los dispositivos móviles a través de una API unificada. CapacitorJS es fácil de usar y permite a los desarrolladores crear aplicaciones móviles de alta calidad con una experiencia nativa.

Siguiente parte del proyecto

Ahora que hemos podido trabajar con componentes web ionic y con componentes react ionic, vamos a aprender como crear aplicaciones multiplataforma utilizando ionic.

Ionic nos permite aprenderemos como crear nuestra aplicación para el web, después nuestra aplicación para Android y finalmente nuestra aplicación para iOS (Mac).

¿Cómo crear una aplicación web en Ionic?

Hasta este momento hemos estado construyendo una webapp, esta funciona directamente en el navegador. Sin embargo no hemos generado una versión para producción.

Si exploramos el archivo package.json del proyecto nos vamos a encontrar con la sección de scripts.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Dentro de la lista de scripts podemos encontrar el script build que nos permite exportar nuestro proyecto a una versión utilizable para web. Para ello ejecutamos desde la terminal.

$ yarn build

Ionic empezará a preparar el proyecto, se puede ver el mensaje.

Creating an optimized production build...

Al finalizar el proceso, se genera un directorio build con todos los archivos js y css optimizados listos para subir a un servidor web de producción.

¿Cómo crear una aplicación Android en Ionic?

Para desplegar una aplicación Android tenemos que tener listos los requerimientos necesarios para poder compilar una aplicación Android.

En mi caso utilizo para desarrollar la distribución Linux Mint, para ello he tenido que realizar los siguientes pasos.

1. Desinstalar cualquier versión existente de openjdk.

$ sudo apt remove "openjdk*"

2. Desinstalar todos los remanentes que esta desinstalación deja.

$ sudo apt purge --auto-remove "openjdk*"

3. Instalar openjdk-8.

$ sudo apt install openjdk-8-jdk openjdk-8-doc

4. Verificar que java ha sido instalado.

$ javac -version

5. Instalar todas las dependencias necesarias.

$ sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

6. Descargar android studio desde la dirección https://developer.android.com/studio.

7. Descomprimir el archivo de android, moverlo al directorio /opt y cambiar sus permisos.

$ sudo tar xvfz android-studio-ide-####-linux.tar.gz
$ sudo mv android-studio /opt
$ sudo chown -R root:root /opt/android-studio

8. Ejecutar el instalador de Android Studio.

$ /opt/android-studio/bin/studio.sh

Durante la instalación se descargarán diferentes paquetes y también se creara el directorio Android dentro del Home del usuario.

9. Configurar las variables de entorno dentro del archivo .bash_profile, .profile o .zshrc.

export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator

Hay que cerrar y abrir la terminal para que los valores se vuelvan a leer.

¿Cómo crear un emulador de Android en Android Studio?

Antes de iniciar es importante comentar que Android Studio utiliza el directorio /dev/kvm para montar las imágenes de sus emuladores. En mi caso para poder tener permisos de lectura he tenido que agregar antes mi usuario a el grupo kvm y reiniciar el equipo.

$ sudo adduser $USER kvm

Después de reiniciar he seguido los siguientes pasos:

1. Abrir Android Studio.
2. Nos dirigimos a la opción Tools > AVD Manager > Create Virtual Device > Phone > Pixel 2.
3. Completamos todo el proceso de instalación (esto toma tiempo ya que descarga imágenes virtuales por cada emulador de cada dispositivo).

¿Cómo agregar Capacitor a nuestro proyecto Ionic?

Antes de agregar android como parte de las plataformas soportadas por nuestro proyecto, requerimos primero agregar capacitor.

$ ionic integrations enable capacitor

¿Cómo agregar soporte para Android en Ionic?

Ahora vamos a agregar soporte Android a nuestro proyecto Ionic mediante la siguiente instrucción.

$ ionic capacitor add android

Al final de la instalación de las dependencias, ionic enviará un mensaje indicándonos que ya podemos ejecutar nuestra aplicación en Android.

Now you can run npx cap open android to launch Android Studio

Antes de empezar a trabajar con nuestra aplicación Android, es necesario darle un nombre único el cual sirve como identificador dentro de la Android Store. Para hacer esto abrimos el archivo capacitor.config.js y cambiamos el valor de appId por un valor que sea lo menos común posible. Es importante también agregar el path de la variable linuxAndroidStudioPath que es la ruta a en donde se encuentra instalado Android Studio.

{
  "appId": "io.ionic.aqui-le-damos-un-nombre-unico",
  "appName": "miapp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

¿Cómo compilar la aplicación de Android en Ionic?

Para compilar nuestra aplicación en Android, vamos utilizar la instrucción capacitor copy android de Ionic.

$ ionic capacitor copy android

Al finalizar la ejecución tendremos un directorio llamado android dentro de nuestro proyecto. La instrucción capacitor copy android ejecuta primero el build y después realiza una copia de este dentro del directorio android.

¿Cómo ejecutar nuestra aplicación Ionic en Android Studio?

Para ejecutar nuestra aplicación que ya ha sido compilada, vamos a utilizar la instrucción cap open android de npx.

$ npx cap open android

En Android Studio me he topado con el siguiente error en la consola.

Module 'capacitor-android': platform 'android-29' not found.

Para solucionarlo hay que ir a Tools > SDK Manager, en esta parte aparece una columna llamada API Level. Hay que marcar la que tenga el número asociado al error, completar la instalación, cerrar Android Studio y intentar nuevamente la instrucción.

$ npx cap open android

Finalmente dentro de Android Studio en la barra de herramientas veremos listada nuestra aplicación seguida de la imagen virtual en donde ejecutarse, damos clic en el botón Play y esperamos a que se ejecute la aplicación.