Guía rápida de Ionic Framework 1.x

Llevo algo más de un año utilizando Ionic Framework para desarrollar mis apps. Es algo que hago en mi tiempo libre y de forma puntual por lo que con el paso del tiempo siempre termino olvidando alguno de los comandos para crear, actualizar o incluso publicar mis apps y tengo que recurrir a Google para obtener ayuda. Por este motivo, y aprovechando que acabo de actualizar una de mis apps, se me ha ocurrido crear una especie de guía rápida de Ionic con los comandos que más utilizo para tenerla como referencia de cara al futuro.

Ésta guía no pretende ser una guía paso a paso para crear apps con Ionic, es simplemente una recopilación de los comandos que más utilizo para instalar, crear, actualizar y publicar apps.

Instalación

Para poder empezar a crear nuestras apps con Ionic tendremos que instalar NodeJS, Apache CordovaIonic. De Apache Cordova y de Ionic instalaremos las últimas versiones mientras que de NodeJS yo prefiero instalar la versión LTS para evitar posibles incompatibilidades con versiones nuevas. Actualmente la última versión de NodeJS LTS es la 4.5.

# Instalar nodejs 4
sudo wget -qO- https://deb.nodesource.com/setup_4.x | sudo bash -
sudo apt-get install --yes nodejs

# Instalar Ionic & Cordova
sudo npm install -g cordova ionic

Crear y ejecutar App

Para crear una app base a partir de una de las plantillas disponibles tenemos a nuestra disposición el siguiente comando, donde [template] puede ser blank, tabs o sidemenu.

ionic start myapp [template]

Es importante ejecutar este comando sin sudo para que todas las carpetas del nuevo proyecto se creen con los permisos correctos.

Para ejecutar nuestra app en un navegador web tendremos que ejecutar el siguiente comando desde el directorio raíz de nuestra app.

ionic serve

Este comando levantará un servidor en localhost:8100 desde el que tendremos acceso a nuestra app. Por defecto la app se mostrará a pantalla completa en nuestro navegador y no se parecerá en nada a como se verá en un móvil. En mi caso me gusta utilizar la emulación móvil de Chrome para poder ver como se verán mis apps en pantallas pequeñas.

Ejecutar app en un emulador

El primer paso para poder ejecutar nuestra app en un emulador es añadir una plataforma a nuestro proyecto, en mi caso Android. Si instalamos nuevos plugins de Cordova mientras tenemos una plataforma añadida a nuestro proyecto tendremos que eliminarla y volver a añadirla para que los nuevos plugins funcionen.

# Añadir Android platform
ionic platform add android

# Eliminar Android platform
ionic platform remove android

Para poder ejecutar nuestra app en un emulador es necesario que tengamos uno instalado y en ejecución, ya que la instalación de la app se hace en caliente. Para ello solo tenemos que ejecutar el siguiente comando y en unos segundos se abrirá nuestra app en el emulador.

sudo ionic emulate android

Depurar nuestra app en el navegador es muy sencillo y por este motivo a mi me gusta desarrollar la app con el navegador y utilizar el emulador solo al final para probar su funcionamiento en un dispositivo “real”. Aún así hay ciertos plugins o funcionalidades que no podremos testear desde el navegador por lo que tendremos que utilizar si o si el emulador. Para facilitar esta tarea podemos utilizar el siguiente comando, que deberemos de ejecutar una vez nuestra app se haya instalado en el emulador.

# Consola/depurador del emulador de android
adb logcat | grep -i "INFO:CONSOLE"

Este comando nos mostrará en el terminal cualquier error de JS que pueda ocurrir. Además podremos utilizar la instrucción console.log() y los mensajes se mostrarán también en el terminal.

Actualizar

Cada cierto tiempo tanto Cordova como Ionic se van actualizando y siempre es recomendable tener las últimas versiones para poder hacer uso de nuevas funcionalidades o para parchear los bugs que hayan sido corregidos.

Por una parte tendremos que actualizar Cordova e Ionic en nuestro sistema:

# Actualizar cordova
sudo npm install -g cordova

# Actualizar Ionic CLI
sudo npm install -g ionic

Y por otra parte tendremos que actualizar la versión de Ionic y de ngCordova de los proyectos existentes. Para actualizar la versión de Ionic de un proyecto existente tendremos que ejecutar el siguiente comando desde la raiz de nuestro proyecto.

# Actualizar Ionic
ionic lib update

En el caso de ngCordova tendremos que descargar desde su sitio web la última versión disponible y sustituir el nuevo ng-cordova.min.js por el antiguo en nuestro proyecto.

Generar APK

Para generar el .apk de nuestra app tendremos dos posibilidades. Generar un .apk para test (también llamado debug) o un .apk para producción (también llamado release). Para ello tendremos que ejecutar uno de los siguientes comandos:

# Generar .apk de test
sudo ionic build android

# Generar .apk de producción
sudo cordova build --release android

En ambos casos podremos encontrar el .apk generado en mi_proyecto/platforms/android/build/outputs/apk/. El .apk de test se llama android-debug.apk y el de producción android-release-unsigned.apk.

Preparar APK para su publicación

Antes de poder publicar nuestro .apk en Google Play es necesario firmarlo y optimizarlo.

Si no disponemos de un certificado digital para firmar el .apk podremos crearnos uno con la herramienta keytool de Java utilizando el siguiente comando, donde my-release-key es el nombre de nuestra private key, alias_name el nombre corto y 10000 la validez del certificado en días.

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Una vez tengamos nuestro certificado listo tendremos que firmar el .apk de producción que hemos generado antes:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name

Por último solo nos queda alinearlo con la herramienta zipalign que incluye el SDK de Android y darle un nombre al .apk resultante. En mi caso lo he llamado HelloWorld.apk.

zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

Con este ultimo paso ya tendremos listo nuestro .apk para publicarlo en Google Play.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *