馃 Crear aplicaciones nativas con Capacitor

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

Primero 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*"
  1. Desinstalar todos los remanentes que esta desinstalaci贸n deja.
$ sudo apt purge --auto-remove "openjdk*"
  1. Instalar openjdk-8.
$ sudo apt install openjdk-8-jdk openjdk-8-doc
  1. Verificar que java ha sido instalado.
$ javac -version
  1. Instalar todas las dependencias necesarias.
$ sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
  1. Descargar android studio desde la direcci贸n https://developer.android.com/studio.

  2. 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
  1. 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.

  1. 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.

Utilizar Ionic y React Manejo de errores en Ionic
comments powered by Disqus