¡Deja de usar Cordova! Actualizate a Capacitor

Cuando hablamos de crear un APP híbrida nos referimos a realizar una aplicación para smartphones (iOS y Android) pero usando tecnología Web (HTML, CSS y Javascript). Visualmente no se diferenciará de cualquier otra APP que el usuario posea en su dispositivo ya que contendrá un icono, pantalla de inicio, trabajará sin necesidad a internet y será posible descargar/actualizar de las tiendas oficiales. Pero hay que ser consciente que en el fondo hay trampa, si corremos la cortina tecnológica nos toparemos con un navegador web modificado para ocultar cualquier borde que ejecuta por detrás un ligero servidor web. Pero eso el usuario nunca lo sabrá. Ello hace que sea fácil desarrollar, capaz de crear una interfaz personalizada compatible su código para todas las plataformas. Puedes llegar a entender su gran popularidad inicial y que hoy en día continúe siendo una gran alternativa a las APPs Nativas.

Cuando quieres desarrollar un APP híbrida la opción más aconsejada es usar el Framework Apache Cordova. Nos ha acompañado desde el 2003, creando soluciones y complementos para que fuera barato dar el salto del Diseño Web/Front-End al smartphone. Pero hoy en día la situación ha cambiado, hay varias razones para no utilizar Cordova y buscar una alternativa.

Y ellos y otros temas técnicos recomiendo usar una alternativa como Capacitor, una solución mantenida por el equipo de Ionic que mejora y actualiza algunos aspectos de Cordova:

Tutorial de instalación

Requisitos previos

Si quieres realizar un APP para Android

Si quieres realizar un APP para iOS

Instalar

Previo en iOS

Debemos incorporar las herramiengas que compilación.

sudo gem install cocoapods
pod repo update
xcode-select --install

Ahora ya estas listo.

Creamos una carpeta para el proyecto y entramos.

mkdir my-app
cd my-app

Iniciamos el proyecto Javascript.

npm init

Instalamos Capacitor, tanto sus herramientas de Core como su cliente.

npm install @capacitor/core @capacitor/cli

Creamos el proyecto de Capacitor.

npx @capacitor/cli create

Activa las plataformas que necesitemos, en este caso Android y iOS.

cd capacitor
npx cap add android
npx cap add ios

Si trabajas con un SPA, como puede ser un cli de Vue, Angular, React… Modifica capacitor/capacitor.config.json con la carpeta que generete los archivos compilados.

"webDir": "../dist",

Ejecutar en dispositivos

iOS

npx cap copy
npx cap open ios

Se abrirá XCode, cuando ejecutemos (pulsemos en el botón de Play) nos dirá que no puede compilar porque es necesario firmar.

Damos nuestro usuario.

Si tenemos una cuenta de Apple developer y una APP registrada solo hay que proporcionar el bundle adecuado.

Al ejecutarla en tu iOS aparecerá el mensaje Untrusted Enterprise Developer

Para confiar en tu aplicación busca en: Settings → General → Device Management → Select developer → Trust

Android

npx cap open android

Herramientas de desarrollo

Las aplicaciones son inspeccionables (con el inspector de elementos) sin hacer nada especial, sin importar el Framework que se utilice. No es una característica proporcionada por Capacitor, sino por la WebView. Lo único que hace Capacitor es habilitar esta característica por defecto en las construcciones de depuración de Android (en iOS no es necesario).

En Android el dispositivo necesita tener las opciones de desarrollo activadas y la depuración del USB. En iOS, en la aplicación de configuración, ve a Safari > Avanzado y activa el inspector web.

No Xcode or CLT version detected!

Cuando ejecutas con npm puedes encontrarte el siguiente problema:

gyp: No Xcode or CLT version detected!
gyp ERR! configure error

Solución 1

sudo xcode-select —-reset

Solución 2

xcode-select --print-path | xargs -I{} sudo rm -r -f {} && xcode-select --install
Versión escritorio