
Desarrolla una aplicación móvil con Gatsby y Capacitor
Gatsby
nos ofrece una experiencia de desarrollo muy agradable para crear aplicaciones web, y Capacitor
nos permite convertir esta aplicación web en una aplicación móvil
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)
Existe otra alternativa, que incorporar una PWA
(Progressive Web App) en nuestra aplicación web de
Gatsby` (algo extremadamente sencillo) y luego publicar esta aplicación PWA en las tiendas de Google y Apple
Al final, el proceso es similar al que veremos aquí, y como siempre la parte más complicada será la que se refiere a Apple
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
npx
ejecuta paquetes locales como si fueran globales, y no parece haber una versión con yarn
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
En mi caso Android Studio no encontró el SDK necesario (de algún modo no se había instalado, hay una discusión al respecto aquí), y lo solucioné yendo dentro de los Settings
de Android Studio, viendo que no había ningún SDK instalado, apretando el Edit
y allí tuve la opción de descargar el SDK
Después tenía error en las licencias, descargué el plugin (en el mismo menú) de Android SDK Command-line Tools (latest)
y cliqué en el Sync Project with Grade files
, esto (sospecho que la segunda opción) me permitió solventar el tema de las licencias
Sin embargo, salió que no había ningún target device
seleccionado, con lo que al lado del icono del play
puedes ver como efectivamente te dice que no tienes un device seleccionado, allí puedes abrir el menú para crear tus devices virtuales, por ejemplo un Pixel, o puedes conectar físicamente tu móvil android y ejecutar la aplicación directamente en el 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!
🙋♂️
Lista de correo: escribo algo de tanto en cuanto