Desarrollo Móvil con Ionic Framework: Parte I — Preparando Entorno

Published in

ngVenezuela

5 min readAug 25, 2016

Saludos comunidad, en esta oportunidad es grato decirles que estaremos publicando una mini serie de posts hablando sobre el desarrollo móvil usando Ionic, comencemos.

Que es Ionic Framework

Es un proyecto gratuito y open source, que ofrece una set de componentes HTML, CSS y JS optimizados para móvil, así tambien cuenta con herramientas que nos agilizarán nuestro desarrollo como la Ionic-CLI y Creator. Ionic hace uso de AngularJS y Sass, por lo que un conocimiento previo de los mismos nos ayudará a sacarle mayor provecho.

Ionic también emplea el proyecto Apache Cordova que nos permitirá empaquetar nuestra aplicaciones hechas con tecnologías web en su debido formato para el sistema operativo para el que estemos desarrollando, ejemplo, un .apk para Android.

Actualmente existen dos versiones: Ionic v1 basado en AngularJS (La versión de Ionic actual es la v1.3.1) e Ionic v2 basado en Angular (Actualmente se encuentra en beta, no obstante es usada por algunos en producción). En esta serie de posts nos centraremos en la v1 de Ionic y estará orientado al desarrollo hibrido en Android (para iOS el proceso es similar, solo difieren algunos parametros en los comandos).

Si quieres conocer un poco más de este proyecto no dudes en visitar el sitio oficial.

Preparemos el Entorno

Nota: Estos pasos son validos para GNU/Linux y OS X. Para Windows ciertas condiciones aplican.

Lo primero que haremos será preparar nuestro entorno de desarrollo, el proceso es similar para ambas versión, con una ligera diferencia en un comando con npm. Lo que necesitaremos será nuestra amada terminal y las siguientes herramientas:

NVM: Una increíble herramienta que nos dejará cambiar de versión de node sin problemas.
Instalar Ionic y Cordova.
Android SDK: Kit de desarrollo de Android provisto por Google. Con el SDK solo basta, pero hay quienes prefieren descargar el Android Studio completo y es también valido (incluso puede aportar más recursos).
Agregar el ANDROID_HOME al PATH.
Equipo para probar nuestra aplicación. Puede ser un dispositivo físico, si bajaron el Android Studio pueden configurar una AVD (Dispositivo virtual de Android) o Genymotion.

Empezemos:

NVM: Node Versión Manager.

Esta excelente herramienta esta disponible en github, donde encontraremos sus instrucciones de instalación. En mi caso que uso GNU/Linux están sencillo como correr alguno de estos comandos. En el caso de usar cURL:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

o también con wget:

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

una vez instalado nvm con el script, hay dos formas que el sistema nos lo reconozca la primera vez:

Cerrando y abriendo la terminal.
Corriendo el comando:

$ source ~/.bashrc #Si estas usando Bash o .zshrc si es Zsh ``` Para verificar que todo esta funcionado bien podemos correr el comando: ```bash nvm --version #Que nos mostrara la versión de nvm

Ya con nvm funcionando visitamos la pagina oficial de node para ver sus versiones actuales y descargamos la versión LTS estable que para este momento es la v4.4.7 (también me gusta vivir al extremo pero como estamos aprendiendo “vamo a calmarno”).

para instalarla usamos el comando:

$ nvm install 4.4.7 $ nvm use 4.4.7 #para activarla

Instalar Ionic y Cordova.

Nodejs viene con npm (Node package manager) un potente gestor de paquetes que nos permitirá instalar ionic y cordova desde la terminal. Para ello corremos el comando:

Ionic V1:

$ npm install -g cordova ionic

Ionic V2:

$ npm install -g ionic@beta

Para verificar que ionic esta instalado correctamente y tendremos a nuestra dispocisión la Ionic CLI, corremos el comando:

$ ionic #mostrará la versión de la CLI y las opciones disponibles.

Android SDK — Android Studio

Para tener el Android SDK o Android Studio solo basta con ir a la pagina web de desarrolladores y descargar la versión para nuestro sistema operativo y descomprimirlo (Instalarlo en el caso de seleccionar Android Studio).

Agregar el ANDROID_HOME al PATH.

Agregar variables al PATH, es la manera de decirle al sistema donde ubicar el ejecutable para comandos o script ejecutados desde la terminal, en nuestro caso nos interesa que Ionic CLI sepa donde esta ubicado el Android SDK para cuando nos toque compilar nuestra aplicación. Para este fin, definiremos la variable ANDROID_HOME en nuestro archivo .bashrc o .zshrc (Dependiendo de si estamos usando bash o Zsh).

Para ello desde la terminal corremos los siguientes comandos:

cd $HOME #para asegurarnos de estar en el Home gedit .bashrc #use el editor al gusto, ya sea nano o vi. Flame War!!

y agregaremos las siguientes dos lineas al final:

export ANDROID_HOME="/ruta/al/Sdk" #ejemplo: “/home/usuario/Android/Sdk” export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Guardamos y cerramos el archivo, para aplicar los cambios usamos el comando:

$ source .bashrc #o source .zshrc

Para verificar que nuestra variable esta funcionando, al correr el comando

debería mostrar el Android SDK Manager:

Donde Probar mis Aplicaciones.

Con los pasos anteriores ya podemos comenzar a desarrollar nuestra aplicaciones híbridas. Ionic nos permite visualizar nuestra aplicaciones web en el navegador con el comando:

E incluso agregando el flag — lab podemos apreciar como se visualizaría en dispositivos iOS y Android, gracias a Ionic Lab:

Finalmente cuando necesitemos acceder a funcionalidades nativas del telefono como la cámara, siempre necesitaremos un equipo físico o en su defecto un emulador. Android Studio les permitirá crear un emulador facilmente o incluso pueden usar el que les provee Genymotion que tiene mejor perfomance y dispone de un plan gratuito para uso personal.