Prólogo

React está en todos sitios, y persigue la eterna promesa de simplificar el desarrollo hasta un punto donde el mismo código te sirva para la web y para la aplicación móvil

A día de hoy hay dos grandes aproximaciones a esta promesa

• Ionic, que te encapsula tu código web dentro del móvil (ionicframework.com)

• `React Native, que te ofrece una API nativa a la cual accedes escribiendo tu React de siempre (reactnative.dev)

La primera opción es la menos eficiente en términos de rendimiento ya que utiliza un intermediario para interpretar nuestro código, por lo que si lo que queremos programar necesita velocidad, posiblemente lo querramos reflexionar

La segunda opción es "casi" como si escribieras en nativo, aunque las limitaciones son evidentes sobre todo a nivel de css-in-js

Escribes en React, sí, pero la experiencia pierde muchos enteros si eres de los que utiliza (por ejemplo) styled-components en toda su extensión

En cualquier caso las dos tecnologías son fantásticas

Aquí vamos a ver el primer caso, el Ionic, porque es el que permite un desarrollo más rápido y para aplicaciones que no sean juegos o emulaciones apuesto a que en la gran mayoría de casos el rendimiento percibido es más que suficiente

Pero en realidad no utilizaremos Ionic sino Capacitor, la parte de Ionic que nos convierte la aplicación web en aplicación móvil

Y en lugar de desarrollar en Ionic lo vamos a hacer en Gatsby, que ya lo conocemos (pásate por la página principal para explorar cursos de Gatsby)

Aplicación Gatsby > Pomodoro

Para la programación en React con vscode tienes la configuración del entorno de trabajo en este curso

A partir de aquí, como ejemplo podemos utilizar cualquier starter de Gatsby, sólo necesitamos una aplicación web que nos funcione como tal

Pero para no hacer una página en blanco, voy a utilizar la aplicación de pomodoro que tengo en kuworking (la puedes ver aquí), aunque la he rediseñado para la ocasión

Tienes el repositorio en github.com/kuworking/kuworking_pomodoro_app

Por lo tanto, la aplicación será algo tan sencillo como

git clone https://github.com/kuworking/kuworking_pomodoro_app.git
cd kuworking_pomodoro_app
yarn
gatsby develop

Y ya la podrás ver (en versión web) en localhost:8000

Ahora se trata de utilizar Capacitor

Instalando Capacitor

Una vez tenemos nuestro proyecto gatsby hecho, nos falta compilar el código y continuar con la instalación de las dependencias de Capacitor

Antes, crearemos el archivo de configuración de capacitor, en el directorio base del proyecto de nombre capacitor.config.json

{
  "appId": "com.example.gatsbycapacitor",
  "appName": "gatsby-starter-capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "public",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 1
    }
  }
}

Tienes todas las opciones en la documentación, y respecto al a opción de SplashScreen lo tienes aquí

Siguiendo su documentación, ahora se trata de instalar las dependencias

gatsby build
yarn add @capacitor/core @capacitor/cli
npx cap init
npx cap add android
npx cap add ios

Con npx cap init nos pedirá el nombre de la aplicación, pero por defecto ya leerá el que hayas puesto en el archivo json de antes por lo que clicando un par de veces enter ya lo tendrás

Ahora ya tenemos instalado Capacitor

Instalando los IDE nativos

Capacitor hace de puente entre nosotros y las aplicaciones nativas de los sistemas donde queramos publicar nuestra aplicación

Pero solo nos hace de puente, necesitamos las librerías nativas en sí, así que hay que instalarlas

En el caso de Android, lo tenemos en el Android Studio, lo tienes que descargar e instalar de su página web

En el caso de iOS necesitarás el Xcode, con lo que ...

• Necesitarás algún ordenador Mac
• O bien necesitarás alquilar uno virtual (por ejemplo por horas en macincloud)
• O instalar macOS en un Mac emulado con por ejemplo VirtualBox

De momento aquí me centraré sólo en el caso de Android

Compilando la aplicación (con Android)

Una vez ya tenemos Android Studio instalado, ya lo podemos abrir, aunque lo suyo es hacerlo a través de capacitor, esto es desde el terminal de vscode, y antes habrá que copiar lo que hemos compilado con Gatsby a Capacitor

npx cap copy android
npx cap open android

Y si queremos automatizarlo un poco más, podemos ejecutar sync que como nos dicen en la documentación se encarga de copiar y también de hacer un update (referente a las dependencias de package.json)

npx cap sync
npx cap open android

Al abrirse el programa, abajo a la derecha verás como está generando los archivos necesarios, es un proceso que tarda unos minutos por lo que paciencia, y al final ya podrás emular tu aplicación en tu móvil

A partir de aquí, sólo nos queda publicarla en la tienda de Google Play Store, o en tiendas alternativas y menos abusivas

Lo primero es construir el archivo APK que será el que contendrá nuestra aplicación

Eso lo hacemos en Android Studio, en Build => Generate Signed Bundle, y allí tenemos 2 opciones

• Generar un "bundle" para Android
• Generar un archivo APK

Yo he optado por el segundo ya que como digo permite distribuir tu aplicación por tiendas que no sean la Play Store

A partir de ahí, sigues el proceso (creando una nueva keystore, por ejemplo), seleccionamos el tipo release y seleccionamos las dos variantes que se nos ofrecen para signar la aplicación

El proceso en mi casi ha durado menos de 1 minuto, y en la carpeta /release ya tienes el fichero apk para publicarlo en nuestra tienda favorita

Añadiendo acceso a métodos nativos del móvil

Hasta aquí tenemos un apk que podemos instalar en el móvil y utilizarlo de forma nativa, aunque no tenemos acceso a ninguna capacidad extra del móvil

Por ejemplo, acceder a la cámara o al storage interno

Aquí necesito hacerlo para evitar que la pantalla se apague, ya que en un reloj pomodoro lo suyo es tener siempre el contador a punto para poder mirarlo

Otra posibilidad sería intentar que corriera en segundo plano

Bien, pues para acceder a estos métodos necesitamos echar mano a los plugins, plugins que encontramos en la documentación de ionic framework

Y el plugin que existe para evitar que la pantalla se apague es el insomnia

yarn add cordova-plugin-insomnia @ionic-native/insomnia @ionic-native/core
npx cap copy
npx cap open android

Y luego basta con importar e incluir el plugin como un componente más,

import { Insomnia } from '@ionic-native/insomnia'

useEffect(() => {
  Insomnia.keepAwake()
  return () => Insomnia.allowSleepAgain()
}, [])

Ahora vuelta a compilar el código, a copiarlo, a testearlo en Android Studio, y a compilarlo en un APK

Listos!

🙋‍♂️