Digamos que ya tienes tu app hecha con Ionic para iOS y para Android. Incluso has adaptado los plugins nativos para que todo funcione incluso en navegador, independientemente de la plataforma. Pero ahora además quieres crear la app de escritorio para MacOS y para Windows, pero, ¿puedo hacerlo? Y de ser así, ¿cómo?
Pues la respuesta es que sí puedes, gracias a Electron. Y es que esta herramienta nos permite compilar apps de escritorio con código escrito en HTML+CSS+JS.
En este caso vamos a ver los pasos para crear una app de escritorio para MacOS:
Instalar y configurar electron
Para instalar electron debes utilizar el siguiente comando:
$ npm install electron --save-dev
Para configurarlo necesitas crear un archivo index.js en la raíz de tu proyecto con el siguiente contenido: electron-quick-start/main.js
Luego modificaremos dicho archivo, pero de momento cópialo tal cual.
Instalar y configurar electron-builder
Electron-builder es un creador de paquetes de MacOS y Windows para apps que utilizan electron. Para instalar electron-builder es recomendable hacerlo con yarn (instálalo mediante homebrew con el comando
$ brew install yarn
Una vez lo tengas, instala electron builder con:
$ yarn add electron-builder --dev
Para configurar electron-builder sigue los siguientes pasos:
https://github.com/electron-userland/electron-builder#quick-setup-guide
Corregir las rutas
En principio ya tendríamos todo lo necesario para generar el ejecutable y el instalador para MacOS, pero hay un pequeño problema. Tal y como gestiona los ficheros Electron, en el fichero index.js que hemos creado antes se está intentando abrir el archivo index.html. Pero este fichero no existe en la misma ruta que index.js, sino que se va a crear dentro de la carpeta www. Así que edita index.js y establece la ruta correctamente:
win.loadFile('www/index.html')Ahora compila la aplicación de Ionic como si fueras a subirla a una web, es decir, con uno de los siguientes comandos:
$ ionic build --prod $ ng build --prod $ yarn build --prod
Ya tenemos la carpeta www, pero ocurre un nuevo problema. El empaquetador de la app de escritorio va a almacenar los ficheros de nuestra app en una subcarpeta, pero el index.html que genera Ionic lo carga como si la raíz estuviera en la raíz «/». Para corregir esto, edita el fichero www/index.html y modifica la el base href por lo siguiente.
base href='./'
La próxima vez que compiles, para evitar tener que modificar el archivo manualmente ejecuta el comando como:
$ yarn build --prod --base-href="./"
Construir el instalador y el ejecutable
Ahora ya está todo configurado y podemos proceder a crear el binario empaquetado:
$ yarn dist
Este comando nos creará varios archivos en la carpeta dist: el instalador .dmg, un fichero .zip y el propio ejecutable dentro de la carpeta mac.
Firmar y subir a la App Store
Para el último paso necesitamos, en primer lugar, crear un provisioning profile en Apple Developer. Tal y como hacemos con las apps para iOS, pero para la «Mac App Store». Nota: Si no tenías el identificador generado para la app de iOS primero deberás crearlo también; al igual que los 3 certificados para aplicaciones de Mac (Mac Development, Mac App Distribution y Mac Installer Distribution).
Descargamos el fichero y lo copiamos en la raíz de la app. A continuación editamos de nuevo el fichero package.json para establecer el provisioning profile en el nodo:
build > mac > «provisioningProfile»: «NOMBRE_FICHERO.provisionprofile»
Opcionalmente podemos añadir otra serie de campos al fichero package.json descritos aquí; entre ellos es necesario establecer también el target como «mas» (Mac App Store); y «entitlementsInherit»: «build/entitlements.mas.inherit.plist».
Ahora debemos crear los dos siguientes ficheros en la carpeta build/
https://gist.github.com/jahertor/410bb8662645b785bdb5b337ba4aaf45
Ya podemos ejecutar de nuevo el comando yarn dist para generar el archivo a subir a la tienda de aplicaciones de Mac:
$ yarn dist
Esto nos generará un archivo .pkg en la carpeta dist/mas/. Para subir la app lo más sencillo es instalar la aplicación Transporter de Apple.
Alternativamente podemos utilizar la herramienta de XCode altool mediante el siguiente comando:
$ xcrun altool --upload-app -f dist/mas/NOMBRE.pkg -t osx -u [email protected] -p APP_PASSWORD
Para la contraseña debes utilizar una «Contraseña de Aplicación», creada desde aquí.
Ahora ya solo queda rellenar la información y… ¡publicar la aplicación en Itunes Connect!
IMPORTANTE: A partir de MacOS 10.14.5 es necesario realizar también los siguientes pasos para que los usuarios puedan instalar tu aplicación.