Compilando nuestro primer proyecto Ionic a Android

Ionic Android

En el artículo anterior vimos como preparar nuestro entorno de trabajo para empezar a trabajar con Ionic  través de un proxy. A continuación veremos como compilar nuestro primer proyecto a Android.

1- Primero tenemos que tener alguna versión del SDK de Android en una carpeta. Este lo podemos obtener del sitio de Developers de google tanto instalando Android Studio o simplemente instalando alguna versión del SDK como esta.

2- Tenemos que instalar alguna versión del JDK de Java, este lo podemos obtener de la página de Oracle.

3- Una vez que tenemos el SDK de Android y el Java instalado, tenemos que verificar que estén creadas las variables de entorno o crearlas nosotros mismo. Para eso vamos en Windows a :

• Propiedades del Equipo.
• Configuración avanzada del sistema.
• Variables de entorno...

Entonces definimos las Variables del sistema: JAVA_HOME y ANDROID_HOME

JAVA_HOME variable del sistema

ANDROID_HOME variable del sistema

También debemos Editar la variable path del sistema y añadir separados por punto y coma (;) las siguientes rutas que hacen alución a las variables del entorno que recién creamos.

%JAVA_HOME%\bin

%ANDROID_HOME%/tools;%ANDROID_HOME%/platform-tools

Una vez realizado esto para verificar que este bien configurado la variable de entorno de JAVA, escribimos en la terminal:

java -version

Si tenemos bien configurado todo debe mostrarnos correctamente la versión de JAVA que hayamos instalado, sino también es posible que debamos reiniciar la máquina para que capte bien las configuraciones que realizamos.

 Una vez configuradas las variables del entorno, estamos listos para compilar nuestra aplicación para android. Pero primero tenemos que configurar algunas cosas

4- Ahora añadimos la plataforma para la que queremos compilar la aplicación, como en este caso es para android, ponemos en la terminal:

ionic platform add android

Gradle logo

 5- Ahora vamos a configurar para que en vez de que descargue el gradle de internet, utilize uno que tengamos ya descargado. Para eso copiamos el archivo del gradle que tiene que ser la versión gradle-2.2.1-all.zip, y lo copiamos dentro de la carpeta de nuestro proyecto Ionic platfforms\android\gradle. Seguidamente buscamos el archivo que se encuentra en platforms\android\cordova\lib\builders\GradleBuilder.js y cambioamos la línea dónde aparece CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL por

Gradle url

6- Ahora, Ionic para poder compilar necesita descargar la primera vez que se compila una app para android una serie de dependencias del Maven. Para esto no es necesario configurar nada de proxy, así que ya podemos compilar nuestra app para android. Pero si al igual que en mi caso, en tu institución hay una copia del Maven y queremos que utilize esta en vez de la ruta del Maven de internet, tenemos que modificar los siguientes archivos gradle:

• platforms/android/CordovaLib/build.gradle
• platforms/android/build.gradle
• platforms/android/cordova/lib/plugin-build.gradle

Añadiendo la siguiente línea antes de dónde dice mavenCentral():
maven { url 'http://maven.prod.uci.cu/nexus/content/repositories/central/' }

 7- Es ahora entonces de finalmente compilar nuestra app para android poniendo en la terminal:

ionic build android

Esto nos genera dos .apk que podemos encontrar en platforms/android/buidl/outputs/apk:

Proyecto generado para android

8- Ahora para visualizar nuestra aplicación, podemos hacerlo mediante un emulador que hayamos creado en nuestro SDK o en un dispositivo real que tengamos conectado mediante USB a nuestra máquina y con el modo desarrollo activado así como el Depuración de USB.

Modo desarrollador en dispositivo real

En el caso que lo vayamos a probar en un emulador, ponemos en la terminal:

ionic emulate android

Y si lo vamos a probar en un dispositivo real, ponemos entonces en la terminal:

ionic run android

Y eso es todo, si tenemos todo bien configurado, debemos de poder ver correctamente nuestra aplicación Ionic. En el próximo post estaré hablando sobre como configurar un IDE (Entorno Integrado de Desarrollo) para facilitar y agilizar el desarrollo con Ionic. Nos vemos.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email