Apps en Ionic Framework

Por Zéltika

Recuerdo la primera vez que cree una app en Ionic. Me pareció sencillo, ágil y a la vez muy potente. Ya había desarrollado aplicaciones híbridas antes, con Adobe PhoneGap y con Cordova. Pero Ionic se adaptaba mejor a lo que yo quería, un framework con mucha documentación en la red, con una comunidad enorme de usuarios y que me permitiese hacer desarrollos rápidos, muy rápidos. Además todo el mundo lo ensalzaba y me decidí a probar. Desde entonces es el framework que suelo usar para hacer las apps.

Creando la app con Ionic Framework

Comenzamos en la web de Ionic (https://ionicframework.com), allí tenemos toda la documentación necesaria. Es importante destacar, que la única dificultad que podemos tener es configurar correctamente el equipo (instalar los paquetes, variables de sistema, etc.) El resto es extremadamente sencillo. Necesitaremos también un editor. Yo utilizo el Visual Studio Code, que va muy bien y es muy versatil.

Veamos los pasos a seguir para crear nuestra app.

Creamos una carpeta en nuestro equipo, que será la que contenga todo el proyecto. y desde ella, comprobamos que ionic funciona:

ionic -v

Esto nos permite saber qué versión del CLI de Ionic estamos usando.

Desde línea de comandos, en nuestra carpeta generamos la estructura con:

ionic start nombredelProyecto

Si usamos este comando, el CLI nos guiará en los siguientes pasos que debemos de seguir, si queremos usar un template al momento de iniciar nuestro proyecto, y también el Framework que deseaos usar con Ionic (Angular, React, …). Y nos genera toda la estructura de ficheros. Esta estructura la importamos a nuestro editor y ya podemos desarrollar la aplicación.

Podemos probar como va nuestra app, para ello ionic dispone de un servidor que ejecutamos con una de estas dos opciones (la segunda, nos permite abrir el «ionic lab» con el que podemos ver cómo se presentaría la app en cada tipo de plataforma móvil):

ionic serve 

ionic serve -l

Programando la app

Ahora viene lo divertido! Basándonos en HTML, CSS y JS podemos desarrollar aplicaciones muy chulas. Es posible que necesitemos incorporar funcionalidades (acceso a cámara de fotos, GPS, …). Pero hay mucha documentación en la red y no te resultará dificil.
Es momento de sacar toda la creatividad y el saber hacer para desarrollar la estructura y el código.
Una vez realizado el desarrollo, tenemos que compilarlo y generar el apk o aab para subirlo a Google Play y a la App Store:

Generando los apk y aab

Ahora vamos a generar los paquetes que subiremos a Google Play y a la App Store. Usemos como ejemplo una aplicación para Android: Existen varias formas de hacerlo, pero vamos a la más sencilla.
Desde la consola, vamos a la carpeta del proyecto y utilizamos el comando:

ionic cordova build --release android

Recordamos que ionic CLI está basado en cordova CLI. Con este comando, construimos (build: preparar + compilar) el proyecto para una plataforma determinada, en este caso Android.

Esto nos genera el apk «app-release-unsigned.apk» en la carpeta «release» de nuestro proyecto:

«/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk».

Tras realizar estos pasos deberíamos optimizar firmar el apk (jarsigner) y optimizar (zipalign) para subirlo a Google Play Console pero, al menos en mi caso, la subida me daba un montón de problemas de optimización.
Por ello me decanté por subir un AAB en lugar de los APK.

AAB (Android App Bundles o Paquete de aplicación de Android) es el nuevo formato de carga con extensión .aab lanzado por Google en 2018 que incluye todos los recursos y el código de una aplicación. App Bundle aplaza la generación y firma del APK a través de Google Play.

Para generar los AAAB, hacemos lo siguiente:

cd platforms/android/

./gradlew bundleRelease

Ahora ya tenemos disponible el aaa, en la carpeta:

«platforms/android/app/build/outputs/bundle/release/»

Nos falta firmarla, y para ello debes utilizar:

cd app/build/outputs/bundle/release/

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore zeltika.keystore app.aab zeltika

Donde «zeltika.keystore» es el fichero de firma y «app.abb» es el fichero generado en el paso anterior.
Ahora solo falta acceder a Google Play Console con nuestras credenciales y subir la nueva app.

Detalles interesantes del desarrollo

A la hora de desarrollar apps, lo normal es hacer tanto versión para Android como para iOS, y como para desarrollar estas últimas es necesario utilizar un Mac, pues mejor utilizar un Mac para ambas. Por eso estas notas de programación serán referidas a Mac.

Para publicar una app en Google Play, además de tener perfil de desarrollador (disponemos de la ayuda de Google) necesitamos configurar la aplicación en la Google Play Console. Y subir el fichero APK o AAB.

Para publicar una app en Google Play, es necesario al menos cumplir con los requisitos de versiones de Google, por lo que debemos tener actualizadas las librerías.

Si necesitamos aceptar las licencias del sdk android, porque nos da errores al generar los apk, en Mac podemos usar:

yes | sudo ~/Library/Android/sdk/tools/bin/sdkmanager --licenses

Si intentamos subir este fichero a Google Play Console, y nos da el error «Has subido un APK que no está alineado», debes ejecutar una herramienta de alineación de archivos comprimidos (zip aligned) en tu APK y volver a subirla.

Otra cosa, para generar los iconos y el splash de la aplicación, podemos usar el comando resources. Puede que necesites instalar el paquete:

npm i -g cordova-res

npm i cordova-res@latest --save

Para generar los recursos:

ionic cordova resources

ionic cordova resources ios

ionic cordova resources android

Espero que la próxima vez que necesites desarrollar un app para te decidas por Ionic Framework y compruebes tu mismo que necesitas menos tiempo y que es un proceso muy ágil.

Comentarios cerrados.