ioinic

Table of Contents
1. Ionic
2. Sobre Ionic
i. Que es Ionic, y donde encaja?
ii. Por que fue construido Ionic?
iii. Desarrollando aplicaciones hbridas con Ionic
iv. Empecemos a desarrollar!
3. Instalacin
i. Intro
ii. Sobre las distintas plataformas
iii. Instalando Ionic
iv. Creando un proyecto
v. Agregando las diferentes plataformas
vi. A Testear
vii. Lo que viene
4. Empezando nuestra app
i. Intro
ii. Inicializando nuestra app
iii. Testeando nuestra app
5. Testeando nuestra app
i. Intro
ii. Testeo en un browser
iii. Testeando en el simulador
iv. Testeo en navegadores mviles
v. Testeando como una app nativa
6. Construyendo nuestra app
i. Intro
ii. Creando tareas
iii. Agregando proyectos
7. Publicando nuestra app
i. Intro
ii. Publicando aplicaciones Android
iii. Google Play Store
iv. Actualizando nuestra aplicacin

ioinic

El libro de Ionic
Bienvenidos al libro de Ionic, donde vamos a recorrer el proceso de instalacin de Ionic y todas sus dependencias , la
creacin de un proyecto nuevo, el diseo y la construccin de la interfaz de usuario, aadiendo la lgica, pruebas,
instalacin en el dispositivo, y la publicacin en los diferentes stores.

Ionic

ioinic

Sobre Ionic
Que es Ionic, y donde encaja?
Por que fue construido Ionic?
Desarrollando aplicaciones hbridas con Ionic
Empecemos a desarrollar!

Sobre Ionic

ioinic

Que es Ionic, y donde encaja?

Ionic es un framework de aplicaciones mviles HTML5 dirigida a la creacin de aplicaciones mviles hbridas. Las
aplicaciones hbridas son esencialmente pequeos sitios web que se ejecutan en un browser(al que no se ven los
marcos), y que a su vez tiene la capacidad de acceder a recursos del dispositivo(cmara, libreta de contactos). Las
Aplicaciones hbridas tienen muchas ventajas sobre las aplicaciones nativas, especficamente en trminos de soporte en
las distintas plataformas, la velocidad de desarrollo , y la gran disponibilidad de libreras de terceros para que usemos en
nuestros proyectos.
Piensa en Ionic como el framework UI que se encarga de manejar el look and feel y la interaccin del usuario con la
UI(user interface), podramos pensar en Ionic como el bootstrap para app nativas, pero con un amplio abanico de
componentes UI para app mobiles, excelentes animaciones y hermoso diseo.
Al ser un framework HTML5, Ionic necesita un contenedor nativo como Cordova o PhoneGap para poder correr como una
aplicacin nativa. Te recomendamos usar Cordova para tus aplicaciones, y las herramientas de Ionic, que usan Cordova
por debajo.

Que es Ionic, y donde encaja?

ioinic

Por que fue construido Ionic?

Ionic fue construido creyendo en que HTML5 va a marcar el camino en del desarrollo de app mobiles, como lo ha hecho
en las computadoras de escritorio. Una vez que las computadoras de escritorio se hicieron lo suficientemente potentes y la
tecnologa de los browsers haban avanzado lo suficiente , casi todo el mundo estaba gastando su poder de
procesamiento en el navegador. Y los desarrolladores estaban construyendo aplicaciones web de manera
abrumadoramente. Con los recientes avances en la tecnologa mvil , los telfonos inteligentes y tabletas ahora son
capaces de ejecutar muchas de esas mismas aplicaciones web.

Por que fue construido Ionic?

ioinic

Desarrollando aplicaciones hbridas con Ionic

Quienes esten familiarizados con desarrollo web, encontraran la estructura de una aplicacin ionic bastante sencilla. En
esencia , es simplemente una pgina web que se ejecuta en un contenedor nativo! esto significa que podemos utilizar
HTML , CSS y Javascript. La nica diferencia es que en lugar de crear un sitio web que los dems enlazaran, estamos
construyendo una experiencia de aplicacin autnoma.
La mayora del cdigo de un app hecha en ionic estar escrita en html, css y javascript. Desarrolladores ambiciosos quizs
traten de acceder a la capa nativa a traves de plugins de Cordova, o cdigo nativo, pero no es necesario para crear una
gran app.
Ionic tambin utiliza angularjs para una gran parte de la funcionalidad bsica del framework. Aunque podemos utilizar solo
el cdigo css de ionic, te recomendamos que utilices angularjs, por que es una de las mejores maneras de crear web
apps.

Desarrollando aplicaciones hbridas con Ionic

ioinic

Empecemos a desarrollar!
Ahora que hemos entendido que es ionic y por que existe, estamos listo para empezar a crear nuestra primera aplicacin
con este increble framework. En el siguiente capitulo vamos a instalar todo lo necesario y vamos a empezar a desarrollar
con ionic.

Empecemos a desarrollar!

ioinic

Instalacin
Intro
Sobre las distintas plataformas
Instalando Ionic
Creando un proyecto
Agregando las diferentes plataformas
A Testear
Lo que viene

Instalacin

ioinic

Intro
En este capitulo, vamos a ir a travs del proceso de descarga de ionic y de la instalacin de todas sus dependencias.

Intro

10

ioinic

Sobre las distintas plataformas

En primer lugar, tenemos que cumplir unos requerimientos bsicos para desarrollar una app con la actual version de ionic.
Ionic soporta dispositivos iPhone y Android. Actualmente soporta ios 6+, y android 4+(aunque en la versin 2.3 debera
funcionar). Como sea, debido a que hay gran diversidad de dispositivos android, es posible que no funcione en algunos.
Con Ionic nosotros tenemos la libertad de desarrollar bajo cualquier sistema operativo. Como sea, desde ahora vamos a
empezar a utilizar la linea de comandos.
importante: para desarrollar para iphone necesitaras OS X.
Si estas en windows, asegrate de descargar e instalar Git, y Console2(opcional). Vamos a estar ejecutando los comandos
en Git Bash o Console2.
Primero, vamos a instalar la ultima versin de Apache Cordova, el mismo sera el responsable de envolver nuestra
aplicacin(hecha en html, css, javascript) en un contenedor nativo.
Para instalar Cordova, asegurmonos de tener node.js instalado, despus ejecutemos el siguiente comando
$ sudo npm install -g cordova

Si estamos utilizando windows no hace falta que escribamos "sudo". Dependiendo de la plataforma en la que deseamos
desarrollar, necesitaremos instalar herramientas especificas. Afortunadamente, necesitaremos realizar estos pasos solo
una vez.

En linux
Si estamos corriendo Ubuntu 64-bits, va a ser necesario que instalemos las librerias de 32-bits por que Android corre solo
en 32-bits hasta el momento.
$ sudo apt-get install ia32-libs

Si estamos en Ubuntu 13.04 o mayor, las ia32-libs han sido removidas del repositorio. Alternativamente podemos
instalar los siguientes paquetes:
$ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0

En Windows(Java, Ant, Android)

Usuarios de windows que deseen desarrollar en Android: Tendrn que asegurarse de instalar y configurar los siguientes
programadas.
Importante: Siempre que hagas un cambio en un PATH, o cualquier otra variable de entorno, tendrs que restartear o
abrir una nueva tab para que tus cambios tomen efecto.

Java JDK
Instalemos la ultima versin del Java JDK(No solo el JRE).
Despus, creemos una variable de entorno que se llame JAVA_HOME y que apunte al directorio raz donde el Java JDK fue
instalado. Por lo tanto, si instalamos el JDK en C:\Program Files\Java\jdk7 , setearemos JAVA_HOME a ese path. Despus
de eso, agreguemos el directorio bin del JDK al path. Seguramente sea %JAVA_HOME%\bin o el path completo C:\Program
Sobre las distintas plataformas

11

ioinic

Files\Java\jdk7\bin .

Apache Ant
Para instalar Ant, descarguemos el siguiente zip desde aqu, lo descomprimimos, y moveremos el primer directorio en el
zip al lugar donde queramos, despus de esto tenemos que agregar este directorio a la variable de entorno PATH. Por
ejemplo, si movimos el directorio de Ant al c:/ , nosotros vamos a querer agregar el mismo a la variable de entorno
PATH(C:\apache-ant-1.9.2\bin) .

Android SDK
Instalar el Android SDK es tambin necesario. El SDK te provee de una API de libreras, y herramientas de desarrollo para
construir, testear y depurar aplicaciones android.
Cordova requiere que setiemos la variable de entorno ANDROID_HOME. La misma deber apunta hacia el directorio
[ANDROID_SDK_DIR]\android-sdk , por ejemplo c:\android\android-sdk.

Luego, deberemos incluir en la variable PATH el directorio tools y platform-tools. Por lo tanto, en ANDROID_HOME , tendremos
%ANDROID_HOME%\tools y %ANDROID_HOME%\platform-tools .

Sobre las distintas plataformas

12

ioinic

Instalando Ionic
Ionic viene con una CLI que sirve para crear, compilar, y empaquetar Ionic apps.
Para instalar Ionic correremos el siguiente comando:
$ sudo npm install -g ionic

Instalando Ionic

13

ioinic

Creando un proyecto
Ahora necesitamos crear un proyecto Cordova en el directorio que queramos, para hacerlo necesitamos ejecutar el
siguiente comando:
$ ionic start todo blank

Este comando creara un directorio llamado "todo" en donde ejecutamos el comando anterior. Luego, entraremos al
directorio creado y veremos la estructura resultante. El comando anterior deber crear una estructura similar a esta:

$ cd todo && ls
bower.json // dependencias de bower
config.xml // configuracin de cordova
gulpfile.js // tareas de gulp
hooks
ionic.project // configuracin de ionic
package.json // dependencias de nodejs
platforms // compilaciones de iOS/Android estarn en este dir
plugins // Plugins de cordova y ionic
scss // cdigo scss, que compilara a css y lo guardara en www/css/
www // la aplicacin propiamente dicha(codigo javascript, css, html, imagenes, etc)

Creando un proyecto

14

ioinic

Agregando las diferentes plataformas

Ahora, necesitamos decirle a Ionic que deseamos agregar las plataformas Ios y Android. Aclaracin: Si no tenes MacOS,
deja de lado la plataforma ios:

$ ionic platform add ios

$ ionic platform add android

Si aparecen errores al ejecutar estos comandos, asegrate de haber seguido los pasos anteriores.
Android en OS X
Si aparece este error: [Error: ERROR : Make sure JAVA_HOME is set, as well as paths to your JDK and JRE for java.]
Probemos correr este comando antes de agregar la plataforma Android:
$ export JAVA_HOME=$(/usr/libexec/java_home)

Agregando las diferentes plataformas

15

ioinic

A Testear
Para asegurarnos de que el proyecto funciona, probemos compilar y correr el proyecto(para ios deberemos correr los
siguientes comandos, pero si estamos en android solo reemplazaremos ios por android en el comando):

$ ionic build ios

$ ionic emulate ios

Aclaracin sobre el emulador de android

No recomendamos utilizar usar "emulate" para desarrollar en Android. Desafortunadamente, el emulador por defecto en
Android es terriblemente lento, y no representara con precisin un dispositivo android real. Usar el emulador ni siquiera es
recomendable para desarrollo nativo en android.
Afortunadamente, hay muy buenas alternativas. Un muy buen emulador es Genymotion que corre como una "maquina
virtual" en nuestra computadora. Es muy veloz. Cuando utilizamos Genymotion usaremos "run" en vez de "emulate".
Si elegimos utilizar emulate en Android, tendremos que ser pacientes por que toma varios minutos para que inicie. Si
vemos que no pasa nada por unos minutos, tenemos que asegurarnos que haremos creado un Android Virtual
Device(AVD), y que este esta utilizando Android SDK versin 17 o mayor. Deberemos reducir el tamao de la memoria del
AVD si vemos que el emulador tarda mas de un minuto en iniciar.
El emulador toma mucho tiempo en cargar. Despus de 5 a 10 minutos, veremos la app por defecto corriendo en el
emulador.

A Testear

16

ioinic

Por supuesto, podemos probar nuestra app directo en un dispositivo Android real, y es la manera recomendada para
desarrollar en Android debido a la lentitud del emulador. Para hacer eso, debemos ejecutar "run" en vez de "emulate" y
asegurarnos de tener nuestro dispositivo Android conectado a nuestra computadora.

A Testear

17

ioinic

Lo que viene
Ahora estamos listo para empezar con el desarrollo de nuestra aplicacin, que es lo que vamos a empezar en el prximo
capitulo.

Lo que viene

18

ioinic

Empezando nuestra app

Intro
Inicializando nuestra app
Testeando nuestra app

Empezando nuestra app

19

ioinic

Intro
Ahora que tenemos instalado todo lo necesario, y que tenemos creado un proyecto Cordova, empecemos a construir una
aplicacin real!.
El "todo" es una app muy comn cuando empezamos con un framework nuevo, en este tutorial vamos a recorrer el
proceso del desarrollo.
Debido a que una ionic app es bsicamente una pagina web, necesitamos tener un index.html que es lo primero que se
va a cargar cuando inicie nuestra aplicacin. Empecemos creando www/index.html y agregando el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body>
</body>
</html>

En el cdigo anterior, estamos incluyendo los css de ionic, y los js(tanto el core de ionic, como el paquete
ionic.bundle.js ). Ionic viene con ngAnimate , y ngSanitize incluidos por defecto, pero para poder utilizar otros mdulos

necesitaremos incluir esos mdulos en el directorio lib/js/angularjs .

Tengamos en cuenta que los archivos cordova.js o phonegap.js debern ser los ltimos en ser llamados, estos archivos
estn vacos y se generan cuando se corre la aplicacin.
Ahora que tenemos el index.html, y todo el entorno seteado, tenemos que pensar en como va a ser la UI de la aplicacin.
Hay muchas maneras en las que podramos construir la UI de nuestra app. Tenemos a nuestra disposicin unos cuantos
layouts standard, como tabs o side menus, pero prcticamente podramos utilizar cualquiera para construir nuestra app.
En este tutorial utilizaremos un layout con side menu.
En el contenedor central, tendremos una lista con varias tareas que debemos llevar a cabo. En nuestra app vamos a poder
agregar tareas, como as tambin editar tareas existentes. Si apretamos el botn de men que se encuentra arriba a la
izquierda, se desplazara el side menu que nos permite navegar entre los distintos proyectos(editar y crear nuevos). Abajo
se encuentra la imagen del mockup que vamos a llevar a cabo:

Intro

20

ioinic

Para crear side menus en Ionic, haremos uso de la directiva <ion-side-menus> . El cdigo para crear este tipo de mens es
sencillo. Agreguemos en el index.html , dentro del tag <body> el siguiente cdigo:

<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>

En el cdigo de arriba, nosotros hemos aadido la directiva <ion-side-menus> , que se encarga de manejar el evento de
arrastrar y tambin nos mostrara el side menu. Dentro de la misma nosotros tenemos la directiva llamada <ion-side-menucontent> que es el contenedor principal de nuestra app, y otra directiva llamada <ion-side-menu side="left"> que es un

side menu ubicado a la izquierda y que inicialmente esta oculto.

Intro

21

ioinic

Inicializando nuestra app

Ahora, si corremos la app, no veremos nada!. Hay 2 razones para ello: La primera es que todava no hemos creado una
app angularjs, con lo cual los directivas como <ion-side-menus> no van a ser procesadas, y la segunda razn es que no
tenemos ningn contenido hasta ahora.
Corrijamos esto. Primero, necesitamos crear un nuevo modulo angularjs y decirle a angularjs que lo ejecute. Creemos un
archivo nuevo en www/js/app.js y escribamos esta linea:
angular.module('todo', ['ionic'])

Esta es la manera de crear una aplicacin en angularjs, entre corchetes le estamos diciendo que queremos incluir el
modulo de ionic, el mismo incluye todo el core de ionic, como as tambin el cdigo que va a interpretar las directivas que
vimos hasta ahora.
Ahora, volvamos al index.html , y justo despus de <script src="cordova.js"></script> agreguemos la siguiente linea:
<script src="js/app.js"></script> Con esta linea incluimos el cdigo recin creado.

Para poder correr la app angularjs que recin creamos tenemos que agregar un atributo al tag <body> , que tendra que
quedar as:
<body ng-app="todo">

Todava no vamos a poder ver nada si ejecutamos nuestra app, para eso tenemos que agregar algo de contenido a la app.
Agregemos el header para el side menu, y tambin para el contenedor central.
Actualicemos el body para que se vea as:

<body ng-app="todo">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</body>

Inicializando nuestra app

22

ioinic

Testeando nuestra app

En el prximo capitulo vamos a estar testeando nuestra ionic app.

Testeando nuestra app

23

ioinic

Testeando nuestra app

Intro
Testeo en un browser
Testeando en el simulador
Testeo en navegadores mviles
Testeando como una app nativa
Construyendo nuestra app

Testeando nuestra app

24

ioinic

Intro
Ahora que tenemos algo de contenido para ver en nuestra aplicacin, vamos a hablar acerca del proceso de testeo y
desarrollo. Hay 4 maneras de testear nuestra aplicacin mientras estamos en el proceso de desarrollo: en un browser,
mediante el emulador, en el browser de un dispositivo mvil, o como una app nativa en nuestro telfono.

Intro

25

ioinic

Testeo en un browser
Testear nuestra app en una computadora es tan simple como correr siguiente comando en directorio base de nuestro
proyecto
$ ionic serve

Este comando va a iniciar un servidor con live-reload para tu proyecto. Cuando hagamos cualquier cambio en un html, css,
o javascript el browser va a recargar la app automticamente.

Arrastra desde el centro de la pantalla hacia la derecha para que aparezca el side menu.

Testeo en un browser

26

ioinic

Testeando en el simulador
Nosotros podemos testear directo en el simulador. Para testear nuestra app en ios usaremos los siguientes comandos:

$ ionic build ios

$ ionic emulate ios

Para testear en android cambia ios por android en los comandos de arriba.

Testeando en el simulador

27

ioinic

Testeo en navegadores mviles

Tambin podemos testear nuestra app en un navegador mvil. Si estamos usando OS X, y estamos corriendo Safari sobre
OS X podemos depurar websites. Primero tenemos que activar el inspector web remoto en el dispositivo y en el Safari de
la computadora. Para hacer esto en ios 7 y OS X Mavericks, activemos la opcin de inspector web en iOS Settings ->
Safari -> Advanced section, y tambin activemos el Developer Menu en la seccin de opciones avanzadas en la
configuracin de Safari.
Aplicaciones Android que soporten Android 4.4 o superiores, pueden ser depuradas remotamente usando chrome. Para
mas informacin segu este link.
Si estamos corriendo el servidor, y tenemos el celular conectado a la misma red, podemos poner la direccin ip del server
en la barra de navegacin de nuestro dispositivo mvil y podremos ver nuestra app.
El problema con el testeo de apps en navegadores mviles, es que es la experiencia mas alejada de la app real. Esto es
debido a que el navegador mvil fue pensado par sitios web, por lo que a menudo agrega funcionalidades que entran en
conflicto con nuestra app.

Testeo en navegadores mviles

28

ioinic

Testeando como una app nativa

Desde que estamos estamos construyendo una app nativa (o "hbrida"), nosotros podemos testearla como tal. Tenemos
muchas maneras de hacerlo. Si estamos desarrollando un app para ios, tendremos que registrarnos como Apple
Developer para poder testear nuestra app en un iphone o ipad. Desafortunadamente, esto cuesta $99 dolares por ao.
Una vez que tengamos una cuenta y hayamos seteado XCode con nuestros certificados para testear en dispositivos,
nosotros vamos a querer abrir un projecto XCode y hacer nuestro testing desde XCode.
Testear en Android es mucho mas fcil y rpido. Para testear en un dispositivo real tenemos que simplemente conectarlo a
nuestra pc y correr el siguiente comando:
$ ionic run android

Si esto no funciona, tenemos que asegurarnos de que tenemos activado el debug por USB en nuestro dispositivo.

Testeando como una app nativa

29

ioinic

Construyendo nuestra app

Intro
Creando tareas
Agregando proyectos

Construyendo nuestra app

30

ioinic

Intro
Ahora que sabemos todo lo que hay que saber sobre app testing en ionic, y que tenemos ionic instalado en nuestro
sistema, llego la hora de empezar a codear.
Este es el mockup que sera nuestra gua:

Podemos ver que tanto el contenedor central como el side menu tiene listas. Las listas en ionic son un elemento UI muy
poderoso, y vienen con muchas caractersticas diferentes comnmente vistas en aplicaciones nativas. Afortunadamente,
usar listas en ionic es una tarea muy simple.
Desde que estamos usando angularjs, vamos a hacer uso de la directiva ng-repeat para crear un tem por cada tarea en
un proyecto dado:

No entendes angularjs?
No te hagas problema, estos son 2 de lo muchos recursos que hay en la web para aprender angularjs:
egghead.io
Thinkster.io
Intro

31

ioinic

El cdigo del contenedor central debera quedar as:

<!-- Center content -->

<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
<!-- our list and list items -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>

Pero esto todava no hace nada, por que todava no tenemos ninguna tarea o cdigo que haga algo en nuestra app.
Para llevar a cabo esto, necesitamos crear un controlador en angularjs y agregarlo a la pagina. Vamos a necesitar
solo un controlador para esta app, y lo vamos a llamar TodoCtrl. Y lo vamos a agregar como un atributo del tag
<body> :

<body ng-app="todo" ng-controller="TodoCtrl">

Despus, tenemos de definir este controlador en el archivo app.js , y podemos agregar algunas tareas para testing:

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
});

Ahora corramos la app, y veremos una lista con tareas muy importantes!

Intro

32

ioinic

Intro

33

ioinic

Creando tareas
Excelente, ahora tenemos datos de prueba para las tareas, pero como hacemos para crear nuevas?, necesitamos alguna
manera de hacer eso, vamos a aadir una ventana modal, que nos permitir agregar una tarea nueva usando un pequeo
formulario. Agreguemos en el index.html despus del cierre de la directiva </ion-side-menu> dentro del <body> el
siguiente cdigo:

<script id="new-task.html" type="text/ng-template">

<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
</div>
</script>

Hay un montn de informacin en el cdigo de arriba. En primer lugar, estamos definiendo un template de angular usando
<script id="new-task.html" type="text/ng-template"> . Lo bueno de los templates en angularjs es que los podemos cargar

desde cualquier lado: localmente o remota. La URL del template es su id, y si el template es definido a nivel local, este va
a ser buscado de manera local. Templates son una excelente manera de separar layouts y estructurar nuestras vistas, as
que los vamos a usar mucho.
A continuacin, establecimos un header con un botn para cerrar el modal, como as tambin establecimos una rea de
contenido. Con respecto al formulario, nosotros estamos llamando a la funcion createTask(task) al enviar el formulario. La
tarea que estamos pasando como parmetro a createTask es el objeto que almacena los valores del formulario.
Con el fin de activar el modal, necesitamos agregar un botn a la barra de navegacin en nuestro contenedor principal,
que quedara como sigue:

<!-- Center content -->

<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content>
<!-- our list and list items -->
<ion-list>

Creando tareas

34

ioinic

<ion-item ng-repeat="task in tasks">

{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>

Y nuestro controlador queda as:

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope, $ionicModal) {
// No need for testing data anymore
$scope.tasks = [];
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
});

Ahora ejecutemos el cdigo e intentemos agregar una tarea. Deber deslizarse desde abajo hacia arriba una ventana
modal, y despus de enviar el form deber aparecer la tarea nueva en la lista.

Creando tareas

35

ioinic

Agregando proyectos
Ahora necesitamos agregar las funcionalidades de seleccionar y agregar proyectos. Para realizar esto, necesitamos
agregar bastante cdigo similar al que utilizamos para creacin y seleccin de tareas. Ahora vamos a agregar una lista
para mostrar nuestros proyectos y un botn para crear proyectos nuevos. Tambin vamos a abstraer el modelo del
proyecto dentro de un servicio de angularjs, este servicio se va a encargar de guardar y devolvernos nuestros proyectos
desde el local storage.
Vamos a agregar la funcionalidad que nos va a permitir que cuando seleccionemos un proyecto aparezca como
seleccionado.
As debe quedar el cdigo para el contenedor central:

<!-- Center content -->

<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>

El cdigo del side menu deber quedar as:

<!-- Left menu -->

<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>

Este cdigo nos permite ver en el side menu la lista de proyectos, tambin nos permite crear nuevos proyectos a travs del
boton que agregamos, como as tambin que el proyecto seleccionado figure como resaltado.
Para agregar, guardar, y cargar los proyectos, tenemos que agregar un poco de cdigo en el controlador. As deber
quedar el archivo app.js :

Agregando proyectos

36

ioinic

angular.module('todo', ['ionic'])
/**
* The Projects factory handles saving and loading projects
* from local storage, and also lets us save and load the
* last active project index.
*/
.factory('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects'] = angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject'] = index;
}
}
})
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
// A utility function for creating a new project
// with the given projectTitle
var createProject = function(projectTitle) {
var newProject = Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length-1);
}

// Load or initialize projects

$scope.projects = Projects.all();
// Grab the last active, or the first project
$scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];
// Called to create a new project
$scope.newProject = function() {
var projectTitle = prompt('Project name');
if(projectTitle) {
createProject(projectTitle);
}
};
// Called to select the given project
$scope.selectProject = function(project, index) {
$scope.activeProject = project;
Projects.setLastActiveIndex(index);
$ionicSideMenuDelegate.toggleLeft(false);
};
// Create our modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope
});
$scope.createTask = function(task) {
if(!$scope.activeProject || !task) {

Agregando proyectos

37

ioinic

return;
}
$scope.activeProject.tasks.push({
title: task.title
});
$scope.taskModal.hide();
// Inefficient, but save all the projects
Projects.save($scope.projects);
task.title = "";
};
$scope.newTask = function() {
$scope.taskModal.show();
};
$scope.closeNewTask = function() {
$scope.taskModal.hide();
}
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};

// Try to create the first project, make sure to defer

// this by using $timeout so everything is initialized
// properly
$timeout(function() {
if($scope.projects.length == 0) {
while(true) {
var projectTitle = prompt('Your first project title:');
if(projectTitle) {
createProject(projectTitle);
break;
}
}
}
});
});

Si ejecutamos nuestro cdigo, veremos que hemos logrado una app bastante pulida. y funcional.

Agregando proyectos

38

ioinic

Publicando nuestra app

Intro
Publicando aplicaciones Android
Google Play Store
Actualizando nuestra aplicacin

Publicando nuestra app

39

ioinic

Intro
Ahora que tenemos un app funcional, estamos listos para lanzarla al mundo. Sabiendo que el equipo de Ionic ya ha subido
esta aplicacin "todo" al app store, seguramente quieras seguir este capitulo con un app que hayas hecho por tu cuenta.
En principio, necesitamos compilar una versin de lanzamiento de nuestra app, dirigida a cada una de las plataformas en
las que queremos que nuestra app funcione. Antes de lanzar nuestra app, tenemos que hacer ciertos ajustes en los
plugins que utilizamos durante el desarrollo, pero que no queremos que estn presentes en nuestra versin de produccin.
Por ejemplo, seguramente no queramos que nuestra aplicacin utilice el plugin de consola de depuracin, as que
debemos removerlo antes de generar la versin de lanzamiento:
$ cordova plugin rm cordova-plugin-console

Intro

40

ioinic

Publicando aplicaciones Android

Para compilar para android utilizaremos el siguiente comando de cordova:
$ cordova build --release android

Este comando generar una versin de lanzamiento basada en la configuracin del archivo config.xml . Nuestra
aplicaciones tomara los valores por defecto de ese archivo, pero si necesitamos personalizar el compilado de nuestra
aplicacin, necesitaremos editar el archivo para adaptarse a nuestras preferencias. Para mas informacin del archivo
config.xml hace click aqui.

A continuacion, vamos a encontrar nuestra APK sin firmar en el directorio platforms/android/build/outputs/apk . En nuestro
ejemplo, la el APK se encontraba en platforms/android/build/outputs/apk/HelloWorld-release-unsigned.apk . Ahora,
necesitamos firmar nuestra APK, y ejecutar un comando que la optimiza y la prepara para subir al app store. Si ya hemos
firmado nuestra APK podemos pasar por alto estos pasos.
Generemos nuestra clave privada utilizando el comando keytool que viene con el JDK. Si no tenemos este comando,
volvamos al capitulo de instalacion:
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Al ejecutar este comando se nos va pedir que creemos un password para el keystore . Despus de terminar de responder
todas las preguntas que nos haga el comando este creara un archivo que se llamara my-release-key.keystore (en el mismo
directorio que se ejecuto el comando).
Importante: Guardemos este archivo en algn lugar seguro, si perdemos este archivo no podremos enviar actualizaciones
de nuestra aplicacin.
Para firmar nuestra aplicacin necesitamos ejecutar un comando que viene incluido en el JDK, se llama jarsigner :
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-releaseunsigned.apk alias_name

Esto firmara la app. Por ultimo, necesitamos ejecutar el comando zipalign que optimiza nuestra APK. Es comando se
encuentra en /path/to/Android/sdk/build-tools/VERSION/zipalign . Por ejemplo, en OS X con android studio instalado,
zipalign se encuentra en ~/Library/Android/sdk/build-tools/VERSION/zipalign :

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

Finalmente, tenemos nuestra versin de lanzamiento llamada HelloWorld.apk y estamos listo para subir nuestra aplicacin
al Google Play Store.

Publicando aplicaciones Android

41

ioinic

Google Play Store

Ahora que tenemos nuestra APK lista, necesitamos listarla y subirla.
Para empezar, necesitamos ir a la consola de desarrollador de google play(Google Play Store Developer Console) y crear
una cuenta. Desafortunadamente no es gratis. Como sea, el costo es de $25 comparado con Apple que cuesta $100.
Una vez que tengamos nuestra cuenta, tenemos que hacer click en "Publish an Android App on Google Play" como se ve
en la captura de pantalla abajo:

A continuacin, hagamos click en el botn para editar el listado(vamos a subir el APK luego). Tenemos que llenar todos los
campos, as es como tendra que quedar:

Google Play Store

42

ioinic

Cuando estemos listos, vamos a subir nuestra APK para publicar la versin de lanzamiento.

Google Play Store

43

ioinic

Actualizando nuestra aplicacin

A medida que vamos agregando nueva funcionalidad, vamos a querer ir subiendo actualizaciones.
Para que Google Play Store acepte nuestras APK de actualizacin, vamos a tener que incrementar el valor de la versin
en el archivo config.xml , despus tenemos que compilar nuestra aplicacin nuevamente y subirla al Google Play Store.

Actualizando nuestra aplicacin

44