Tu aplicación mobile en 15 minutos

26 Feb

Te proponemos dedicar 15 minutos de tu vida a tirar unas líneas de código y en 15 minutos tener una aplicación funcionando para mobile, de la mano de Emiliano Tebes que nos compartió un paso a paso para lograrlo. Vamos!

Primero los ingredientes

A la hora de desarrollar una aplicación móvil normalmente nos encontramos con la dificultad de tener que distribuirla en las distintas plataformas que querramos, multiplicando el esfuerzo que tenemos que invertir. Lo ideal sería entonces encontrar una manera de escribir un solo código, y que este sirva en todas las plataformas.  Para lograr este objetivo, vamos a combinar estas herramientas:

  • Android SDK
  • Node JS
  • Apache Cordova
  • Bootstrap
  • Angular JS

A modo de ejemplo, la aplicación que vamos a desarrollar va a ser para Android, aunque podría ser para Blackberry, Windows Phone, o todas a la vez.

PASO 1: Instalar android SDK

Incluyendo la última versión de su API. Debemos asegurarnos de definir la variable de entorno “ANDROID_HOME”, y que las siguientes rutas se encuentren dentro del path de nuestro sistema operativo:
%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools
Para verificar que las mismas funcionen, podemos abrir una ventana de comandos y ejecutar “android”. Si esta correctamente configurado, nos saldrá el dialogo de configuración y actualización.

PASO 2: Instalar Node JS

Nos dirijimos al sitio oficial de Node JS y descargamos el instalador.  Es importante incluir las variables de entorno y agregarlo al path. Para verificar que esté correctamente instalado, ejecutamos en un terminal el comando node.

PASO 3: Instalar Apache Cordova

Cordova es quien hará la “magia” de crear los proyectos y darnos un API unificada para acceder a los recursos de las distintas plataformas.
En un terminal ejecutamos npm install -g cordova . Esto hará que node descargue los paquetes necesarios. (Nota: Si por algún motivo la descarga se corta, vuelvan a ejecutar este comando).  Para verificar que esté correctamente instalado, ejecutamos en un terminal el comando cordova.

PASO 4: crear el proyecto con Cordova

Ejecutamos el comando cordova create hello com.example.hello HelloWorld” , donde le proveemos el nombre del proyecto, el package, y la carpeta en la que se creará el proyecto. Una vez hecho esto, veremos que nos creó la carpeta HelloWorld. Dentro de esta carpeta encontraremos una llamada www. Aquí es donde desarrollaremos nuestro proyecto HTML.  Para mayor facilidad a la hora de hacer responsive la aplicación, recomiendo usar Bootstrap, y como framework MVC, AngularJS; aunque estas herramientas son opcionales. Vemos que cordova ya nos creó un index de ejemplo que podemos levantar desde nuestro navegador.

PASO 5: agregar soporte a las plataformas deseadas

En nuestro caso, ubicados en la raíz del proyecto, ejecutamos en un terminal “cordova platform add android“. Veremos que dentro de la carpeta platforms habrá una subcarpeta llamada android.

PASO 6: ejecutar la aplicación

Ubicados en la raíz del proyecto, ejecutamos en un terminal “cordova build” para compilar.
Debemos ejecutar de manera manual el emulador de android. Tener en cuenta la compatibilidad de cordova con las versiones de este sistema.
Ejecutamos “cordova emulate android” .Esto instalará el proyecto y lo iniciará. Veremos nuestra aplicación corriendo en el emulador.
Eso es todo!

Cualquier consulta, me pueden enviar un mail a emilianotebes@gmail.com

Saludos

Emiliano