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

• Difícil subir a Apple Store: En iOS utiliza el motor de navegador UIWebView, pero la Apple Store ya no lo admite. En su lugar debes usar un plugin de terceros para modificar su base y forzar a usar WKWebView, y siendo necesario bajar algunas versiones de Cordova para que sea compatible. Y ¡cuidado con esto! Si usas algunas extensiones pueden dejar de funcionar por no estar preparadas para una versión inferior de Cordova.
• Android requiere Java 8: Esta versión salió a la luz el marzo del 2014. No es peligrosa, ya que se mantiene con parches de seguridad, pero si estás usando la última versión (la 14 mientras redacto estas líneas) te puede dar algunos dolores de cabeza; sobre todo si necesitas versiones más avanzadas u optimizaciones en Android.
• Problemas pendientes de reparar: Tal vez sea porque los desarrolladores están abrumados por la popularidad del proyecto, o porque no hay una ayuda económica suficiente; pero comprobarás que algunas funcionan no trabajan como deberían y sus Issues abiertos son muy numerosos. Si eres organizado, acabarás con una buena lista de errores y soluciones que irás repitiendo en todos los proyectos.
• La memoria interna no es igual: Las rutas son diferentes en cada plataforma, al igual que las limitaciones. No ofrece una capa que abstraiga lo suficiente para facilitar el trabajo.
• Preparar el equipo es un proceso largo: Para compilar y ejecutar en dispositivos reales conlleva un proceso. Hay una labor de investigación en internet para solventar cada uno de los problemas aleatorios que irás encontrando (por ejemplo: en iOS aparece unas franjas negras, en Android no puedes acceder a internet, el icono se muestra en iOS pero no en Android, las Push Notification no llegan bien en una plataforma, etc). Ello no solo te devora el tiempo a ti, sino al resto del equipo. ¿Con una aplicación híbrida no se desarrolla una sola vez para todas las plataformas?

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:

• Excepcional integración con Frameworks Javascript por medio de ionic: React, Angular y VueJS.
• Crear APPs PWA o escritorio (gracias a Electron).
• Mantenimiento por parte del equipo de ionic.
• No existe incompatibilidad con las tiendas oficiales.
• Sin necesidad de utilizar plugins puedes acceder a capacidades como: cámara, geolocalización, notificaciones, acelerómetro, accesibilidad…
• Dispone de sus extensiones propias, y además es compatible con las de Cordova.
• Y tan importante como todo lo anterior: Rápido de instalar y ejecutar sin complicados procesos.

Tutorial de instalación

Requisitos previos

• Node v8.6.0 o superior.
• NPM 5.6.0 o superior.

Si quieres realizar un APP para Android

• Android Studio en cualquier sistema operativo.
• Opcionalmente un smartphone con una pantalla de 5 pulgadas.

Si quieres realizar un APP para iOS

• XCode instalado en un equipo con MacOS.
• Opcionalmente un iPhone SE.

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