Sobre este Ebook

O desenvolvimento de aplicativos mveis j no novidade e est bem consolidado em

suas plataformas. Mas algumas discusses sempre ocorrem na hora de definir qual
plataforma desenvolver, se voc procura est reposta neste ebook no ir encontrar,
pois so vrios os fatores, e pontos de analise, que definem se voc deve desenvolver
nativo ou hbrido e vamos deixar essa discusso para um outro momento.

Este ebook o primeiro de uma srie de ebooks que iro abordar o Ionic Framework,
neles voc ir encontrar, de forma simples e objetiva, explicaes, exemplos e muito
cdigo sobre o desenvolvimento de aplicativos mveis hbridos. Cada ebook ir abordar
um tema especfico, exceto este primeiro que a base de aprendizado para os demais
assuntos.

Todos os ebooks elaborados por mim sero gratuitos, pois o objetivo central destes
materiais o compartilhamento de conhecimento e disseminao deste framework
fantstico.

Pblico alvo
Este ebook foi escrito para voc que est comeando no mundo do desenvolvimento de
aplicativos mveis e tem interesse em aprender sobre uma tecnologia hbrida. No
iremos abordar padres de desenvolvimento e no vamos utilizar lgicas de
programao complexas para facilitar o aprendizado e ter um pblico mais amplo, tendo
em vista que iniciantes tambm no mundo da programao podem estar lendo este
ebook.

Este material no dever ser seu nico ponto de referncia e guia, pois existem outros
ebooks, livros e blogs que falam sobre Ionic Framework e podem ampliar seu
conhecimento.

Sobre o autor
Fbio Rogrio da Silva Jos , conhecido como Fbio Rogrio SJ nas redes sociais,
desenvolvedor de aplicaes web e mobile desde quando o Internet Explorer 7 er um
pesadelo e desenvolver aplicativos hbridos com tecnologias web era um trabalho rduo,
ou seja, desde 2007.

Atualmente Fbio Rogrio trabalha com consultoria e treinamento em desenvolvimento

de aplicaes web e mobile utilizando tecnologias hbridas. E tambm professor, de
curso superior, onde ministra as disciplinas de desenvolvimento frontend,
desenvolvimento de aplicativos mveis, web design, design de interao e lgica de
programao.

1
Sumrio
Introduo
4

Apache Cordova 4

AngularJS 5

ngCordova 5

Ionic 2.0 5

Instalando ambiente
6

NodeJS 6

Git 6

Sublime Text 7

Cordova e Ionic CLI 7

Criando o primeiro app

8

Estrutura dos projetos Ionic

10

config.xml 10

www 11

Componentes
12

Header 12

Content 14

Footer 15

SubHeader e SubFooter 16

Cores 16

Icons 17

Buttons 17

List 20

Cards 25

2
 Forms 28

Toggle 30

Checkbox 31

Radio Buttons 32

Range 33

Select 34

Tabs 36

Grid 38

Concluso sobre componentes 41

Empacotando o aplicativo
42

Android 42

iOS 48

Prximo passo 50

3
Introduo
Desenvolver aplicativos mveis geralmente divertido e, em muitos casos, uma tarefa
complexa dependendo dos requisitos do projeto. Escolher qual tecnologia utilizar um
ponto altamente discutido nas comunidades e a etapa principal do ciclo do
desenvolvimento, pois se voc escolher a tecnologia errada o custo para migrar toda a
aplicao pode ser alto. Acredito que no existe uma tecnologia errada, mas sim
pessoas que no dominam tal tecnologia.

O Ionic um
framework open source e um dos
frameworks
, para desenvolver aplicativos
hbridos, mais utilizado no mundo, tendo mais de 23 mil stars
e mais de 4 mil
forks
no
Github.

Sua premissa utilizar tecnologias web, como HTML5, CSS e JavaScript, para
desenvolver aplicativos mveis hbridos, ou seja, aplicativos que usam tecnologias web e
tambm nativas. Se voc sabe criar um site voc conseguir criar um aplicativo sem
muito esforo.

O diferencial do Ionic Framework sua preocupao com a performance e ganho de

produtividade no desenvolvimento. Voc vai comprovar isto no decorrer desde material
enquanto for criando os projetos exemplos.

O Ionic utiliza como base o projeto Apache Cordova e dispe de uma seria de
componentes e um CLI ( command-line interface)completo para criar, testar e publicar
aplicativos com apenas alguns comandos.

Apache Cordova

Em um evento chamado iPhoneDevCamp, ocorrido em So Francisco em 2006, trs

jovens criaram uma plataforma para criar aplicativos com HTML5/CSS/JS denominado
PhoneGap. Em 2010 a Apple confirmou que a plataforma estava de acordo com os
parmetros da licena para desenvolvedores iOS.

Em 2011 a Adobe comprou o PhoneGap e doou o cdigo fonte do projeto para a

fundao Apache, porem o nome PhoneGap ficou exclusivo para a Adobe e o projeto
foi renomeado para Apache Cordova.

O Apache Cordova tambm open source e utilizado pelo Ionic para acessar as
funcionalidades nativas dos aparelhos mveis como acelermetro, cmera e geo
localizao. Ele tambm tem como requisito gerar o aplicativo para diferentes
plataformas como Android, iOS, Windows Phone, blackberry entre outros.

4
Hoje a maioria das plataformas e frameworks para criao de aplicativos mveis hbridos
utiliza como base o Apache Cordova, entre eles esto: Adobe PhoneGap, Monaca, Onsen
UI, Visual Studio, Taco, Telerik e Ionic. Veja mais detalhes em
http://cordova.apache.org.

AngularJS

AngularJS um framework escrito em JavaScript open source, mantido pela Google, e

tem por objetivo facilitar o desenvolvimento de aplicaes web estendendo o HTML
tradicional para trabalhar com contedo dinmico, com a ligao direta e bidirecional
dos dados (twoway databinding)
que permite sincronizao automticaentreoHTMLeo
objetoemJavaScript.

No faz parte do escopo deste material explicar, de forma ampla, o funcionamento do

AngularJS, porem voc ir aprender com a evoluo dos exerccios aplicados.

Atualmente o AngularJS lanou a verso 2.0, que mudou totalmente a forma de

implementar aplicaes SPA (
single page application)
, tambm no iremos abordar este
tema neste material.

O Ionic utiliza o AngularJS para controlar os objetos e configurar as telas, que chamamos
de rotas, do aplicativo. No se preocupe iremos ver isso passo a passo.

ngCordova

Como j foi dito anteriormente o Ionic utiliza o Apache Cordova para disponibilizar os
recursos nativos para a aplicao, mas quando se utiliza o AngularJS seu aplicativo pode
no funcionar como deveria, pois o bind
do objeto pode no ser atualizado na view
quando no passa pelo apply do AngularJS. Se voc no conhece o AngularJS essa
explicao ficou vaga, no se preocupe pois no futuro voc ir entender.

O ngCordova apenas um atalho para chamar os

plugins
nativos do Apache Cordova, de
forma que seja escutado pelo AngularJS.

Ionic 2.0

No momento em que foi escrito este ebook o Ionic havia lanado recentemente uma
nova verso do seu framework, com vrias melhorias e com a implementao do
AngularJS 2.0, algumas lgicas que so feitas no Ionic 1.0 so bem diferentes da verso
2.0, sendo assim irei aguardar a estabilidade desta nova verso e tratar o contedo em
um novo ebook, focado apenas no Ionic 2.0.

5
Instalando ambiente
Todos os comandos do Ionic, como criar um novo projeto, testar e distribuir, so feitos
direto no terminal atravs de um CLI ( command-line interface ) chamado Ionic CLI. O
Ionic CLI utiliza o NodeJS para executar tarefas e o Git para baixar alguns pacotes.

Para instalar o Ionic Framework voc precisa ter instalado o NodeJS, Git e um editor de
cdigos.

O Ionic pode ser instalado em Windows, Linux ou Mac, os passos seguintes so os

mesmos para os trs sistemas operacionais.

NodeJS

NodeJS, ou Node.js, uma plataforma construda sobre o motor JavaScript do Google

Chrome para facilmente construir aplicaes rpidas e escalveis. Para instalar o NodeJS
baixe a ltima verso, no site oficial, escolhendo seu sistema operacional:
https://nodejs.org
.

Aps baixado abra o executvel e siga os passos de instalao at aparecer a tela de

instalao concluda. Juntamente com o NodeJS instalado o NPM ( Node Package
Manager), que o gerenciador de pacotes dos mdulos escritos em JavaScript utilizando
o NodeJS.

Git

Git um sistema de controle de verso distribudo e um sistema de gerenciamento de

cdigo fonte, com nfase em velocidade. O Git foi inicialmente projetado e desenvolvido
por
Linus Torvalds para o desenvolvimento do kernel Linux, mas foi adotado por muitos
outros projetos.

Como outros projetos open source o Ionic esta hospedado no

GitHub
, que um servidor
de Git gratuito para projetos abertos, sendo assim precisamos do Git instalado na
maquina. Para instalar entre no link:
https://git-scm.com/downloads e baixe a verso
para seu sistema operacional.

6
Aps baixado siga os passos e deixe as configuraes padres de instalao at concluir.

Sublime Text

Sublime Text um editor de cdigo simples, rpido e eficiente, porem este passo no
obrigatrio caso voc j utilize um outro editor. Para baixar o Sublime Text acesse o link:
https://www.sublimetext.com/3 .

Cordova e Ionic CLI

Com o NodeJS e Git instalado vamos instalar o Cordova e o Ionic, o processo bem
simples e consiste em apenas um comando, pois vamos utilizar o NPM para fazer a
instalao.

Abra um terminal, certifique-se que voc tenha permisso de administrador, e digite o

comando abaixo. Os exemplos deste material so apresentados em ambiente Windows,
sendo assim para acessar o terminal abra o programa CMD.

npminstallgcordovaionic

Este processo pode demorar alguns minutos dependendo de sua conexo. Ao concluir
digite o comando abaixo para verificar se a instalao foi efetuada com sucesso:

ionicversion

Se estiver instalado corretamente a verso do Ionic Framework dever ser apresentada

no terminal.

Se voc teve algum problema desconhecido na instalao acesse a lista de discusso

sobre o ambiente de instalao no link abaixo e deixe sua dvida:

http://fabiorogeriosj.com.br/desenvolvendo-aplicativos-mobile-ionic-post-1.html

7
Criando o primeiro app
O Ionic disponibiliza alguns
templates
de projetos, ou seja, aplicativos exemplos prontos
para ser editados, isso facilita para no precisar criar todos os arquivos manuais. Os
templates disponveis so:

blank Cria um projeto em branco apenas com uma tela inicial

sidemenu Cria um projeto com algumas telas e um menu lateral

tabs Cria um projeto com algumas abas

maps Cria um projeto com um mapa exemplo

salesforce Cria um projeto com Ionic e Salesforce

complex-list Cria um projeto com uma lista de exemplo

Vamos comear com um projeto em branco, para isso digite o comando

start
, e seus
parmetros, no terminal:

ionicstartPrimeiroAppblank

Neste momento o Ionic comea a fazer download do arquivo de template

e executar
algumas tarefas, dentre elas, se for a primeira vez que voc executa este comando, ele
pergunta se voc deseja criar uma conta na plataforma ionic.io, iremos discutir sobre
ionic.io em outro material, e voc deve responder sim (Y) ou no (n). Se responder sim
ele ira abrir o site do ionic.io e se responder no ele ira apenas continuar com a criao
do projeto.

Para este momento responda n

:

Createanionic.ioaccounttosendPushNotificationsandusetheIonic
Viewapp?
(Y/n):
n

Vamos entender o que cada comando faz:

start: Cria um novo aplicativo

PrimeiroApp : Define o nome do aplicativo, uma pasta com este nome ser
criada no diretrio que voc est. O nome do aplicativo poder ser alterado
posteriormente caso seja necessrio.
blank: Este o
template
utilizado para criar o app.

8
Para testar nosso primeiro aplicativo entre na pasta que foi criada com o nome do seu
aplicativo, via linha de comando:

cdPrimeiroApp

Em seguida digite o comando para rodar o aplicativo no

browser
:

ionicserve

Na primeira vez que voc executa este comando o Ionic ir perguntar em qual IP voc
deseja deixar acessvel seu projeto, para este momento escolha . Voc ver
localhost
seu aplicativo executando no navegador.

9
Estrutura dos projetos Ionic
Quando criamos um novo aplicativo, o Ionic utiliza o Cordova para cria a estrutura base
do aplicativo j com o
template escolhido, pois como dito anteriormente o Ionic utiliza o
Cordova como base para realizar algumas tarefas.

Abra a pasta PrimeiroApp e veja os seguintes arquivos:

Vamos discutir cada arquivo no seu devido momento, por enquanto precisamos apenas
conhecer o config.xml e a pasta www.

config.xml

Neste arquivo definido os principais parmetros de inicializao e permisses que o

Cordova precisa para startar e compilar, para diferentes plataformas, seu aplicativo.

Se voc estiver utilizando o Sublime Text abra seu projeto e verifique o arquivo
config.xml:

10
A segunda linha define o pacote do projeto e a verso do seu aplicativo, voc precisar
trocar esta verso toda vez que for disponibilizar uma nova verso do seu aplicativo nos
marketplaces como Play Store e Apple Store. Veremos mais detalhes de como publicar
em outro momento.

<widgetid="com.ionicframework.primeiroapp117395"version="0.0.1"

Da linha trs at a linha nove podemos ver o nome do aplicativo, que ira aparecer nos
atalhos do
device
, a descrio e os dados do autor.

As demais linhas so configuraes de inicializao, habilitao de

plugins e permisses,
iremos discutir sobre elas quando chegar o momento.

www

Nesta pasta wwwvoc ir encontrar os arquivos HTML/CSS e JavaScript do seu aplicativo

e todos os arquivos contidos, ou criados por voc, nesta pasta podero ser utilizados
pelo seu aplicativo. Vamos entender a estrutura que o Ionic criou dentro desta pasta:

www
css
style.css
img
ionic.png
js
app.js
lib
ionic
index.html

No arquivo style.cssiremos codificar os estilos personalizados dos elementos quando

necessrio. Na pasta imgiremos colocar todas nossas imagens. O arquivo app.js o
principal arquivo JavasScript do aplicativo, nele iremos configurar as rotas (telas) e criar
ndex.html
os controles. O arquivo i nossa primeira tela do aplicativo (view).

11
Componentes
O Ionic Framework disponibiliza diversos componentes para criar seu aplicativo, estes
componentes nada mais so que classes em CSS para renderizar da melhor forma seu
elemento em HTML. Voc pode adicionar mais atributos em CSS nos componentes ou
at mesmo criar seu prprio componente.

Existem duas formas de utilizar alguns dos componentes do Ionic:

Utilizar elementos nativos do HTML e adicionar as classes CSS

<ul

class
=
"list"
>

<li

class
=
"item"
>
...

</li>
</ul>

Ou utilizar as nomenclaturas dos elementos j customizados do Ionic:

<ionlist>

<ionitem>
...

</ionitem>
</ionlist>

O resultado das duas formas so os mesmos. Neste material vamos utilizar, na maioria
dos casos, os nomes de elementos do Ionic, para reduzir a digitao de cdigos.

Header

Header um componente que fica sempre fixo no topo, utilizado para adicionar ttulo e
botes de aes sobre a tela aberta.

Lembrando que voc pode adicionar novos elementos no CSS para modificar de forma
diferente ao que o Ionic disponibiliza ou at mesmo criar um Header totalmente novo
com o seu prprio CSS.

Crie um novo projeto chamado AppHeader, no se esquea de sair da pasta do projeto

criado anteriormente, para que no gere confuso nas pastas.

Para voltar uma pasta anterior por linha de comando, digite:

cd..

12
Para criar, entrar na pasta e rodar um novo app digite:

ionicstartappHeaderblank
cdappHeader
ionicserve

Quando criamos um novo app com o template blank o

index.htmlj contem um
Header, Vamos edit-lo alterando o arquivo w
ww/index.html.

<ionheaderbar

class
=
"barpositive">

<h1

class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>

Alteramos o estilo do Header e alteramos o seu ttulo. Veremos como adicionar botes
na sesso Buttons.

Quando voc faz alguma alterao no seu projeto e salva, o aplicativo no

browser
automaticamente recarregado. Voc ver um resultado igual a este:

Esta visualizao no muito til pois no simula o tamanho de tela do device.Voc

pode redimensionar seu browser para que fique menor na largura ou utilizar o mdulo
visualizao mobile do Chrome. Para isso pressione F11 no Windows/Linux ou
option+command+J no Mac. Ao lado direito do terminal que foi apresentado clique nos
trs pontinhos e escolha a visualizao
Dock to right
, para que seu terminal fique ao lado
direito da pagina que exibida.

Em seguida, ao lado esquerdo do terminal, habilite a visualizao para

device,com isso
seu aplicativo ser apresentado e configurado nos padres de um smartphone:

13

Por padro os ttulos em Android fico ao lado esquerdo, j no iOS ao centro, porem
possvel forar o ttulo ficar no centro em ambos sistemas adicionado o atributo
aligntitle="center" nocomponenteheader:

<ionheaderbar

class
=
"barpositive"

aligntitle
=
"center"
>

<h1

class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>

Content

Content a rea de contedo do Ionic, apenas o que estiver dentro deste elemento ir
receber rolagem, ou seja, o Header fixo no topo e o Content utiliza o restante da
pgina, caso tenha mais elementos do que pode ser exibido na interface ele ir criar uma
barra de rolagem.

Ainda no aplicativo AppHeader adicione a classe

paddingno elemento
ioncontent,
para adicionar um espao interno, e adicione os elementos dentro de
ioncontent
como mostra o exemplo abaixo:

<body

ngapp
=
"starter">

<ionpane>

<ionheaderbar

class
=
"barpositive">

<h1

class
=
"title"
>
AppExemplo1
</h1>

</ionheaderbar>

<ioncontent

class
=
"padding"
>

<h1>
ExemplodecontedoIonic
</h1>

<h2>
Apenasumademonstraodarolagem
</h2>

<h3>
Aslinhasabaixosoexemplos
</h3>

<img

src
=
"img/ionic.png">

<p>
pargrafo1
</p>

<img

src
=
"img/ionic.png">

<p>
pargrafo2
</p>

<img

src
=
"img/ionic.png">

<p>
pargrafo3
</p>

<img

src
=
"img/ionic.png">

14

<p>
pargrafo4
</p>

<img

src
=
"img/ionic.png">

<p>
pargrafo5
</p>

<img

src
=
"img/ionic.png">

<p>
pargrafo6
</p>

</ioncontent>

</ionpane>
</body>

Salve seu cdigo e veja no

browser
o resultado com a rolagem.

Footer

Footer tambm um componente fixo porem fica sempre posicionado no rodap da

pgina. Adicione o cdigo abaixo aps o componente :
</ioncontent>

<ionfooterbar

class
=
"barbalanced">

<div

class
=
"title"
>
Rodapdoapp
</div>
</ionfooterbar>

O resultado ser algo parecido com isso:

15
SubHeader e SubFooter

Bastante utilizado para combinar botes de ao, o SubHeader e SubFooter tambm so

fixos e ficam como secundrios, ou seja, abaixo do Header, para o SubHeader e a cima do
Footer, para o SubFooter, altere seu Header e Footer seguindo o cdigo abaixo:

...
<ionpane>

<ionheaderbar

class
=
"barpositive">

<h1

class
=
"title"
>
AppExemplo1
</h1>

</ionheaderbar>

<ionheaderbar

class
=
"barsubheaderbardark">

<h1

class
=
"title"
>
SubHeader
</h1>

</ionheaderbar>

<ioncontent

class
=
"padding">
...

</ioncontent>

<ionfooterbar

class
=
"barbarbalanced">

<div

class
=
"title"
>
Rodapdoapp
</div>

</ionfooterbar>

<ionfooterbar

class
=
"barsubfooterbarassertive">

<div

class
=
"title"
>
Rodapsecundrio
</div>

</ionfooterbar>

</ionpane>
...

Foi adicionado as classes barsubfooterpara que o

barsubheadere layout fosse
posicionado da forma correta.

Cores

O Ionic vem com um conjunto de cores e uma nomenclatura onde podemos ver abaixo:

16
Podemos alterar as cores conforme o layout desejado e interessante utilizar uma
nomenclatura para facilitar o uso dessas classes.

A maioria dos componentes podem ser informados qual tema de cor utilizar, por
exemplo o Header e Footer podemos adicionar a classe barNOMETEMA. Para um
elemento ttulo, como H1, H2, etc, podemos adicionar apenas o nome da classe.

Vamos conhecendo as diferentes aplicabilidades dos temas no decorrer deste material.

Icons

Ionic dispe de um coleo de cones baseado em fonte open source, com mais de 500
cones para ser utilizado em seu aplicativo. Para utilizar basta adicionar a classe do cone
desejado, que pode ser encontrado no site http://ionicons.com , em um elemento
<i></i> :

<i

class
=
"iconionstar"
></i>

No site
ionicons ao clicar sobre um determinado cone voc ver a classe que deve ser
adicionado no elemento.

Buttons

Os botes so elementos essenciais de um aplicativo, no Ionic possvel escolher o

tema, estilo e adicionar cone. Crie um novo projeto chamado appButtons:

ionicstartappButtonsblank

Adicione o componente boto utilizando o tema a :

ssertive

<button

class
=
"buttonbuttonassertive"
>
Primeiroboto
</button>

possvel determinar que o componente ocupe 100% da largura da tela adicionando a

classe
buttonblock, ou se for utilizado em um formulrio, por exemplo, e deseja que

17
seja completo, ou seja, sem bordas arredondadas nas laterais pode utilizar a classe
buttonfull:

<button

class
=
"buttonbuttonassertive
buttonblock
">
Primeiroboto
</button>

Os Buttons tem classes para tratar botes de diferentes tamanhos como pequenos,
normais e grandes:

<button

class
=
"button
buttonsmall
buttonbalanced">
Botopequeno
</button>
<button

class
=
"buttonbuttondark">
Botonormal
</button>
<button

class
=
"button
buttonlarge
buttonroyal">
Botogrande
</button>

Outro estilo bem utilizado boto com apenas bordas ou apenas textos:

<button

class
=
"buttonbuttonoutlinebuttonpositive">
Botoapenasborda
</button>
<button

class
=
"buttonbuttonclearbuttonpositive">
Botoapenastexto
</button>

Porem sem dvida o que traz mais elegncia para um aplicativo, e uma melhor
experincia com o usurio, um boto com cone. Podemos customizar de diferente
formas os botes com os cones, basta adicionar o nome da classe do cone desejado:

<button

class
=
"buttoniconleftionhome">
Home
</button>
<button

class
=
"buttoniconleftionstarbuttonpositive">
Favoritos
</button>
<button

class
=
"buttoniconrightionchevronrightbuttoncalm">
Saibamais
</button>
<button

class
=
"buttoniconleftionchevronleftbuttonclearbuttondark">
Voltar
</button>
<button

class
=
"buttoniconiongeara"
></button>
<button

class
=
"buttonbuttoniconiconionsettings"
></button>
<button

class
=
"buttonbuttonoutlineiconrightionnaviconbuttonbalanced">
Aes

18
</button>

O Header e Footer tambm aceitam botes e voc apenas precisa adicionar antes, ou
title
depois, do elemento para deixar a esquerda ou direita:

<ionheaderbar

class
=
"barbalanced">

<button

class
=
"buttoniconionnavicon"
></button>

<h1

class
=
"title"
>
AppButtonsexemplos
</h1>

<button

class
=
"button"
>
Editar
</button>
</ionheaderbar>

Ou se preferir sem as bordas:

<ionheaderbar

class
=
"barbalanced">

<button

class
=
"button
buttonicon
iconionnavicon"
></button>

<h1

class
=
"title"
>
AppButtonsexemplos
</h1>

<button

class
=
"button
buttonclear
"
>
Editar
</button>
</ionheaderbar>

E por fim, na rea de contedo, possvel criar um barra de botes, onde eles ocupam
100% da largura da pgina e divide o tamanho de cada boto por igual:

<div

class
=
"buttonbar">

<button

class
=
"buttonbuttondark"
>
Boto1
</button>

<button

class
=
"buttonbuttondark"
>
Boto2
</button>

<button

class
=
"buttonbuttondark"
>
Boto3
</button>
</div>

Seu projeto deve est com essa aparncia:

19
List

O componente List uma lista de itens e muito comum sua utilizao em aplicativos
mveis, e podem conter textos simples, botes, cones, rtulos e imagens. Crie um novo
aplicativo chamado appList:

ionicstartappListblank

Na rea de contedo adicione um ttulo (H1) e um subttulo (H2), em seguida crie a lista
(ion-list) com cinco elementos de item (ion-item). Cada elemento tem um ttulo (H2) e
um pargrafo (p). Vamos ao cdigo:

<ioncontent

class
=
"padding">

<h1>
Ascincocidadesmaistopsparaseviver!
</h1>

<h4>
SegundositeWalletHub.com
</h4>

<ionlist>

<ionitem>

<h2>
ColoradoSprings,CO
</h2>

<p>
ColoradoSpringsumacidadenorteamericana,localizadanoestadodo
Colorado,noCondadodeElPaso.
</p>

</ionitem>

<ionitem>

<h2>
Denver,CO
</h2>

<p>
Denveracapital,acidademaispopulosaeumdos64condadosdoestado
norteamericanodoColorado.
</p>

</ionitem>

<ionitem>

<h2>
Denver,CO
</h2>

<p>
OmahaumacidadelocalizadanoestadoamericanodoNebraska,noCondado
deDouglas.
</p>

</ionitem>

<ionitem>

<h2>
Tampa,FL
</h2>

<p>
Tampaumacidadelocalizadanacostalestedoestadonorteamericanoda
Flrida,nocondadodeHillsborough,doqualsede.
</p>

</ionitem>

<ionitem>

<h2>
SanDiego,CA
</h2>

<p>
SanDiegoumacidadedosEstadosUnidoslocalizadanosuldoestadoda
Califrnia.
</p>

</ionitem>

</ionlist>
</ioncontent>

O Ionic tem algumas tratativas fixas para as listas e, quando necessrio, preciso
customizar via CSS demais contedos e elementos. Veremos sobre customizao de
elementos no prximo ebook como informado no final deste material.

20
O resultado do cdigo acima ser este:

Podemos adicionar um separador entre os itens adicionando a classe

itemdividerno
item que ser o separador:

<ionitem

class
=
"
itemdivider
">
CidadesdoBrasil
</ionitem>
<ionitem>
RiodeJaneiro
</ionitem>
<ionitem>
Florianpolis
</ionitem>

Dentro de cada item pode ser adicionado os principais componentes do Ionic, mas para
eles serem exibidos da melhor forma precisamos adicionar as classes que iro tratar sua
exibio. Vamos comear pelos cones, adicionando o elemento <i>dentro de um dos
itens:

<ionitem>

<i

class
=
"iconionlocation"
></i>

<h2>
Tampa,FL
</h2>

<p>
Tampaumacidadelocalizadanacosta...
</p>
</ionitem>

21
O resultado desta alterao ficou assim:

Podemos observar que o cone ficou pequeno, e no ficou ao lado direito, como
comum ser utilizado. Agora vamos adicionar a classe , que altera o
itemiconleft
estilo do cone dentro do item ficando assim:

<ionitem

class
=
"
itemiconleft
">

<i

class
=
"iconionlocation"
></i>

<h2>
Tampa,FL
</h2>

<p>
Tampaumacidadelocalizadanacosta...
</p>
</ionitem>

Agora podemos visualizar a exibio correta:

Voc ir perceber, com o tempo, que a maioria dos elementos do Ionic so customizados
desta forma, ou seja, adicionando classes para compor com outros elementos.

Alterando a classe do item para o cone passa a ser exibido na direita:

itemiconright

<ionitem

class
=
"
itemiconright
">

Destacar uma determinada rea comum de ver em listas, em Ionic chamamos esse
atributo de Badge. Altere outro item adicionando um com as classes abaixo:
<span>

<ionitem>

<h2>
Denver,CO
</h2>

<p>
Omahaumacidadelocalizadanoestado...
</p>

<span

class
=
"badgebadgeassertive"
>
3
</span>
</ionitem>

Tambm possvel adicionar um texto informativo de um item, chamada de Note. Altere

o item Rio de Janeiro que contem apenas um texto:

22
<ionitem>

Rio
de
Janeiro

<span

class
=
"itemnote">

Popular

</span>
</ionitem>

Um item pode ser clicvel, basta alterar o componente para

<i>e adicionar a classe
item. Vamos alterar um dos itens deixando o cdigo assim:

<
a

class
=
"
item
">

<h2>
ColoradoSprings,CO
</h2>

<p>
ColoradoSpringsumacidadenorteamericana...
</p>
</
a
>

Perceba que quado clicamos neste item um efeito de fundo cinza exibido.

Vamos inserir um boto em um dos itens que tem apenas um texto, adicionando a classe
itembuttonleft ou
itembuttonright :

<ionitem

class
=
"itembuttonright">

Florian

polis

<button

class
=
"buttonbuttonpositive">

<i

class
=
"iconioniostelephone"
></i>

</button>
</ionitem>

Nossa lista deve apresentar algo como:

23
As listagem que aprendemos acima bem utiliza para telas de parmetros, formulrios e
aes, vamos agora ver listagem com exibio de imagens. Para isso vamos criar um
novo projeto chamado appListImage:

ionicstartappListImageblank

Na pasta img do seu projeto adicione trs imagens diferentes para usarmos como
exemplo, voc pode usar as imagens utilizada neste material que esto no
GitHub
. Salve
todas as imagens na pasta img.

Na rea de contedo adicione a lista abaixo e trs itens com a classe , para
itemavatar
que a exibio das imagens sejam aredondadas:

<ioncontent>

<ionlist>

<ionitem

class
=
"itemavatar">

<img

src
=
"img/city_1.jpg">

<h2>
SanFrancisco,CA
</h2>

<p>
SoFranciscoaquartacidademaispopulosadoestadodaCalifrnia.
</p>

</ionitem>

<ionitem

class
=
"itemavatar">

<img

src
=
"img/city_2.jpg">

<h2>
Lexington,KY
</h2>
<p>
Lexingtonasegundacidademaispopulosadoestadoamericanodo
Kentucky.
</p>

</ionitem>

<ionitem

class
=
"itemavatar">

<img

src
=
"img/city_3.jpg">

<h2>
Washington,DC
</h2>

<p>
Washington,D.C.acapitaldosEstadosUnidos.
</p>

</ionitem>

</ionlist>
</ioncontent>

O resultado deste componente ser este:

24
Outra opo para lista com imagem utilizar a classe , para
itemthumbnailleft
adicionar uma imagens maior e sem arredondamento ao lado esquerdo, ou o
itemthumbnailrightpara adicionar ao lado direito. Tambm podemos adicionar a
classe
itemtextwrappara o texto no ser limitado com reticencias:

Adicione dois item em nossa lista como thumbnail:

<ionitem

class
=
"itemthumbnailleft">

<img

src
=
"img/city_4.jpg">

<h2>
Victoria,BC
</h2>

<p>
VictoriaacapitaldaprovnciacanadensedeColmbiaBritnica.
</p>

</ionitem>

<ionitem

class
=
"itemthumbnailright
itemtextwrap
">

<img

src
=
"img/city_5.jpg">

<h2>
Sacramento,CA
</h2>

<p>
SacramentoacapitaldoestadonorteamericanodaCalifrniaesededo
condadodeSacramento.
</p>

</ionitem>

O resultado esperado:

Cards

comum ver este componente sendo utilizado nas aplicaes mais recentes, pois com
ele podemos exibir informaes com um design ldico de um carto. Embora dentro do
Card pode ser adicionado qualquer estrutura de elementos, indicado utilizar itens
como utilizamos em listas.

Crie um novo aplicativo com o nome appCard:

ionicstartappCardblank

Adicione o componente Card e um item de texto sem limitao:

25
<ioncontent>

<div

class
=
"card">

<ionitem

class
=
"itemtextwrap">
EsteumsimplesCardcomumtextoparavisualizarocomportamentodo
componente.

</ionitem>

</div>
</ioncontent>

O resultado:

Voc pode adicionar a classe

listem um card para ele se comportar igual a uma lista,
desta forma podemos utilizar qualquer componente de lista em nosso card. Veja um
exemplo com diferente classes de itens:

<div

class
=
"listcard">

<div

class
=
"itemitemdivider">
Opesdousurio

</div>

<div

class
=
"itemitemtextwrap">
Escolhaumadasopesabaixo

</div>

<a

href
=
"#"

class
=
"itemitemiconleft">

<i

class
=
"iconionhome"
></i>
Definirendereo

</a>

<a

href
=
"#"

class
=
"itemitemiconleft">

<i

class
=
"iconioniostelephone"
></i>
Editarnmerodetelefone

</a>

<a

href
=
"#"

class
=
"itemitemiconleft">

<i

class
=
"iconionwifi"
></i>
Escolherumaredepreferencial

</a>

<a

href
=
"#"

class
=
"itemitemiconleft">

<i

class
=
"iconioncard"
></i>
Alterardadosdepagamento

</a>
</div>

26
O resultado:

Outro exemplo de itens combinados:

<div

class
=
"listcard">

<div

class
=
"itemitemavatar">

<img

src
=
"img/user1.png">

<h2>
FbioRogrioSJ
</h2>

<p><b>
32min
</b>
Compartilhouumafoto
</p>

</div>

<div

class
=
"itemitembody">

<img

class
=
"fullimage"

src
=
"img/maringa.jpg">

<p>
Pensaemumlugarshow!RecomendotodosiremvisitaragrandeMaringno
Paran:)
</p>

<p>

<a

href
=
"#"

class
=
"subdued"
>
1Curtida
</a>

<a

href
=
"#"

class
=
"subdued"
>
5Comentrios
</a>

</p>

</div>
</div>

O resultado:

27
Forms

Formulrios so componentes essenciais para diferente aplicativos e tambm um

grande desafio, pois pesquisas revelam que usurios de aplicativos mveis no gostam
de preencher formulrios grandes em seus d
evices.

Ionic fornece uma estrutura de formulrios que so utilizados com as listas e itens,
sendo assim cada campo um item de uma lista composto por um label . Como os
outros componentes estes tambm podem ser combinados com os demais
componentes do framework.

importante definir correto o tipo do campo, para que o teclado virtual seja
customizado, dependendo do tipo. Para saber quais tipos so suportados veja na
documentao oficial do Ionic Framework
ou outros documentos sobre tipos em HTML5.

Vamos aos cdigos, crie um novo aplicativo chamado appForms:

ionicstartappFormsblank

Na rea de contedo vamos criar trs campos e um boto. Cada campos deve estar
dentro de um
labelque recebe a classe iteme iteminputpara que os campos ocupe
100% do espao do item da lista e definimos um valor para a propriedade ,
placeholder
do HTML5, para quando um valor for digitado no campo o rtulo oculte. O boto est
em uma outra
divcom a classe p
adding para no ficar colado nas laterias.

<ionlist>

<label

class
=
"itemiteminput">

<input

type
=
"text"

placeholder
=
"Nomecompleto">

</label>

<label

class
=
"itemiteminput">

<input

type
=
"email"

placeholder
=
"Email">

</label>

<label

class
=
"itemiteminput">

<textarea

placeholder
=
"Comentrio"
></textarea>

</label>
</ionlist>
<div

class
=
"padding">

<button

class
=
"buttonbuttonblockbuttonpositive">
Enviarcomentrio

</button>
</div>

28
O resultado esperado :

Podemos adicionar um rtulo fixo ao lado esquerdo adicionando um

spancom a classe
:
inputlabel

<label

class
=
"itemiteminput">

<span

class
=
"inputlabel"
>
Username
</span>

<input

type
=
"text">
</label>

Para deixar um rtulo fixo no topo adicione a classe i no item:

temstackedlabel

<label

class
=
"itemiteminputitemstackedlabel">

<span

class
=
"inputlabel"
>
Primeironome
</span>

<input

type
=
"text"

placeholder
=
"Fbio">
</label>

Outra opo interessante para os rtulos do topo utilizar a classe

para que o rtulo fique flutuando:
itemfloatinglabel

<label

class
=
"itemiteminputitemfloatinglabel">

<span

class
=
"inputlabel"
>
Sobrenome
</span>

<input

type
=
"text"

placeholder
=
"Digiteseusobrenome">
</label>

Os campos podem ser agrupados com botes:

<div

class
=
"itemiteminputinset">

<label

class
=
"iteminputwrapper">

<input

type
=
"email"

placeholder
=
"Email">

</label>

<button

class
=
"buttonbuttonsmallbuttonbalanced">
Enviar

</button>
</div>

Tambm possvel adicionar cones:

29
<label

class
=
"itemiteminput">

<i

class
=
"iconionsearchplaceholdericon"
></i>

<input

type
=
"text"

placeholder
=
"Procurar...">
</label>

Nosso formulrio de exemplo dever est parecido com o resultado abaixo:

Toggle

Toggle um componente criado especificamente para aplicativos mveis, hoje tambm

podemos ver em aplicaes web. Crie um novo projeto com o nome appToggle:

ionicstartappToggleblank

Vamos criar uma lista de opes sendo cada item um toggle marcado com a classe
itemtoggle , sendo assim o texto fica ao lado esquerdo e o boto toggle ao lado
direito. As cores de cada toggle pode ser customizado conforme os temas do Ionic.

Para complementar nosso exemplo vamos adicionar um card como pergunta:

<ioncontent

class
=
"padding">

<div

class
=
"cardpadding">
Quaistecnologiasvocestaaprendendo?

</div>

<ionlist>

30

<ionitem

class
=
"itemtoggle">
HTML5

<label

class
=
"toggletogglebalanced">

<input

type
=
"checkbox">

<div

class
=
"track">

<div

class
=
"handle"
></div>

</div>

</label>

</ionitem>

<ionitem

class
=
"itemtoggle">
CSS

<label

class
=
"toggletogglebalanced">

<input

type
=
"checkbox">

<div

class
=
"track">

<div

class
=
"handle"
></div>

</div>

</label>

</ionitem>

<ionitem

class
=
"itemtoggle">
JavaScript

<label

class
=
"toggletogglebalanced">

<input

type
=
"checkbox">

<div

class
=
"track">

<div

class
=
"handle"
></div>

</div>

</label>

</ionitem>

</ionlist>
</ioncontent>

O resultado:

Checkbox

Os checkbox permitem que o usurio selecione um nmero de itens em um conjunto de

opes. Crie um novo projeto chamado appCheckbox:

31
ionicstartappCheckboxblank

Este componente tambm usa como base o componente lista onde cada item recebe um
checkbox. Voc pode customizar as cores utilizando os temas, para exemplo vamos
deixar o ltimo item com uma cor diferente:

<ionlist>

<ionitem

class
=
"itemcheckbox">

<label

class
=
"checkbox">

<input

type
=
"checkbox">

</label>
HTML5

</ionitem>

<ionitem

class
=
"itemcheckbox">

<label

class
=
"checkbox">

<input

type
=
"checkbox">

</label>
CSS

</ionitem>

<ionitem

class
=
"itemcheckbox">

<label

class
=
"checkboxcheckboxassertive">

<input

type
=
"checkbox">

</label>
JavaScript

</ionitem>
</ionlist>

O resultado:

Radio Buttons

Radio Buttons, ao contrario dos checkbox, permite selecionar apenas uma opo dentre
a listagem enquanto os checkbox permitem selecionar mais de uma opo. Crie um novo
projeto chamado appRadioButtons:

ionicstartappRadioButtonsblank

32
Vamos criar um subHeader e uma lista, na lista vamos adicionar alguns radio buttons. o
da pgina dever estar assim:
body

<body

ngapp
=
"starter">

<ionpane>

<ionheaderbar

class
=
"barpositive"

aligntitle
=
"center">

<h1

class
=
"title"
>
ExemploRadioButtons
</h1>

</ionheaderbar>

<ionheaderbar

class
=
"barsubheaderbarcalm"

aligntitle
=
"center">

<h1

class
=
"title"
>
Qualtecnologiavocmaisdomina?
</h1>

</ionheaderbar>

<ioncontent>

<ionlist>

<ionradio>
PHP
</ionradio>

<ionradio>
Java
</ionradio>

<ionradio>
JavaScript
</ionradio>

<ionradio>
.NET
</ionradio>

<ionradio>
Ruby
</ionradio>

<ionradio>
Python
</ionradio>

<ionradio>
Go
</ionradio>

</ionlist>

</ioncontent>

</ionpane>
</body>

O resultado:

Range

O componente Range utilizado para definir um intervalo de valores com o clicar e

arrastar do toque. possvel customizar seus cones e cores.

Crie um novo projeto com o nome appRange:

ionicstartappRangeblank

33
Adicione na rea de contedo algumas opo com cores diferente para exemplificar o
componente:

<ionlist>

<ionitem

class
=
"rangerangepositive">

<i

class
=
"iconioniossunnyoutline"
></i>

<input

type
=
"range"

min
=
"0"

max
=
"100"

value
=
"12">

<i

class
=
"iconioniossunny"
></i>

</ionitem>

<ionitem

class
=
"rangerangecalm">

<i

class
=
"iconionioslightbulboutline"
></i>

<input

type
=
"range"

min
=
"0"

max
=
"100"

value
=
"25">

<i

class
=
"iconionioslightbulb"
></i>

</ionitem>

<ionitem

class
=
"rangerangebalanced">

<i

class
=
"iconioniosboltoutlineassertive"
></i>

<input

type
=
"range"

min
=
"0"

max
=
"100"

value
=
"38">

<i

class
=
"iconioniosboltassertive"
></i>

</ionitem>
</ionlist>

O resultado:

Select

O componente de seleo listada muito utilizado em sistemas desktop e web, o Ionic

no customiza muito este componente pois os prprios browsers,de cada sistema
operacional mvel, j customizam a visualizao com o seu padro. Neste momento
vamos testar apenas no
browser
do desktop.

Crie um novo projeto com o nome appSelect:

ionicstartappSelectblank

Adicione uma lista com um item contendo um de s

input :
elect

34
<ioncontent>

<ionlist>

<ionitem

class
=
"iteminputitemselect">

<div

class
=
"inputlabel">
Qualfrutavocmaisgosta?

</div>

<select>

<option>
Laranja
</option>

<option

selected
>
Maa
</option>

<option>
Banana
</option>

<option>
Caqui
</option>

<option>
Goiaba
</option>

</select>

</ionitem>

</ionlist>
</ioncontent>

O resultado nos diferentes

devices:

No
browser
desktop: No Android: No iOS:

35
Tabs

O componente tabs permite uma navegao entre telas simulando uma seleo de abas.
Muitos aplicativos em iOS utilizam este padro de navegao. Crie um novo projeto
chamado appTabs:

ionicstartappTabsblank

Este componente melhor utilizado com as rotas em AngularJS, mas como neste
material veremos apenas o essencial dos componentes ento vamos criar algo mais
simples apenas para conhecer o componente.

As tabs podem ser apenas texto, apenas cone ou texto e cone. Tambm podemos
escolher a posio do cone e as cores conforme temas do ionic.

Cada tab tem sua prpria rea de contedo, ento vamos adicionar trs tabs com texto e
cone, e vamos definir diferentes cones para quando a aba estiver selecionada ou no.
Vamos ao cdigo:

<body

ngapp
=
"starter">

<ionpane>

<ionheaderbar

class
=
"barassertive">

<h1

class
=
"title"
>
Exemplotabs
</h1>

</ionheaderbar>

<iontabs

class
=
"tabsassertivetabsicontop">

<iontab

title
=
"Home"

iconon
=
"ioniosfiling"
iconoff
=
"ioniosfilingoutline">

<ionview>

<ioncontent

class
=
"padding">
ContedodotabHome

</ioncontent>

</ionview>

</iontab>

<iontab

title
=
"Sobre"

iconon
=
"ioniosclock"
iconoff
=
"ioniosclockoutline">

<ionview>

<ioncontent

class
=
"padding">
ContedodotabSobre

</ioncontent>

</ionview>

</iontab>

<iontab

title
=
"Configuraes"

iconon
=
"ioniosgear"
iconoff
=
"ioniosgearoutline">

<ionview>

<ioncontent

class
=
"padding">
ContedodotabConfiguraes

</ioncontent>

</ionview>

36

</iontab>

</iontabs>

</ionpane>
</body>

Por ser um componente muito utilizado para navegao, o Android e iOS exibem
diferente, podemos testar utilizando o Ionic lab, que tem por objetivo mostrar nos dois
sistemas a aplicao. Para utilizar o Ionic lab digite
labno final do comando para
testar o aplicativo no
browser
:

ionicserve
lab

Ser exibido desta forma no seu

browser
:

37
Grid
As grids em Ionic so simples e fceis de implementar, pois o componente utiliza o
recurso
FlexBox do CSS3 para desenhar os elementos. Crie um novo projeto chamado
appGrid:

ionicstartappGridblank

Vamos criar uma grid simples com duas linhas e duas colunas, adicione na rea de
contedo o componente:

<ioncontent>

<div

class
=
"row">

<div

class
=
"col"
>
1
</div>

<div

class
=
"col"
>
2
</div>

</div>

<div

class
=
"row">

<div

class
=
"col"
>
3
</div>

<div

class
=
"col"
>
4
</div>

</div>
</ioncontent>

Para ser possvel verificar com mais clareza nossos exemplos vamos alterar a cor de
fundo de cada coluna e adicionar uma borda, editando o s da pasta css:
tyle.css

/*Empty.AddyourownCSSifyoulike*/
.
col{
background

color
:

#CCC;
border
:
2px
solid
#fff;
}

Podemos ver o resultado:

possvel definir um tamanho fixo para uma determinada coluna. Adicione uma nova
linha:

<div

class
=
"row">

<div

class
=
"colcol50"
>
5
</div>

<div

class
=
"col"
>
6
</div>

<div

class
=
"col"
>
7
</div>

38
</div>

Perceba que a primeira coluna est ocupando 50% do espao da linha, e as demais
colunas, que esto sem tamanho fixo, ocupam o espao que sobrou:

Os tamanhos possvel podem ser vistos na tabela abaixo:

Classe Tamanho ocupado

.col10 10%

.col20 20%

.col25 25%

.col33 33.3333%

.col50 50%

.col67 66.6666%

.col75 75%

.col80 80%

.col90 90%

Outro recurso deixar uma coluna em branco, ou seja, reservar o espao porem no
exibir nenhum elemento, adicione uma nova linha:

<div

class
=
"row">

<div

class
=
"colcol33coloffset33"
>
8
</div>

<div

class
=
"col"
>
9
</div>
</div>

Resultado:

39
Os tamanhos para os espaos em branco so os mesmos da tabela acima, porem o nome
deve ser
coloffsetTAMANHO.

Quando temos uma coluna com altura varivel, podemos definir como ser o
alinhamento vertical sendo no topo, centro ou no rodap. Adicione uma nova linha:

<div

class
=
"row">

<div

class
=
"colcoltop"
>
10
</div>

<div

class
=
"colcolcenter"
>
11
</div>

<div

class
=
"colcolbottom"
>
12
</div>

<div

class
=
"col"
>
13
<br>
14
<br>
15
<br>
16
</div>
</div>

Veja os alinhamentos:

Caso o alinhamento for para a linha inteira adicione a classe direto no

rowao invs de
adicionar na desta forma:
col

<div

class
=
"row
rowtop
">

<div

class
=
"col"
>
10
</div>

<div

class
=
"col"
>
11
</div>

<div

class
=
"col"
>
12
</div>

<div

class
=
"col"
>
13
<br>
14
<br>
15
<br>
16
</div>
</div>

Utilizar nmeros fixos de colunas pode no ser apropriado se voc precisa de um layout
responsivo, nestes casos voc pode utilizar trs classes para tamanhos diferentes.
Vamos ver isso na prtica, adicione uma nova linha com quatro colunas:

<div

class
=
"rowresponsivesm">

<div

class
=
"col"
>
17
</div>

<div

class
=
"col"
>
18
</div>

<div

class
=
"col"
>
19
</div>

<div

class
=
"col"
>
20
</div>
</div>

Vejam no resultado que o tamanho da tela validado e conforme existe mais espao as
colunas so exibidas lado a lado, caso seja menor elas so exibidas uma em baixo da
outra.

40
 Tela menor: Tela maior:

Os tamanhos validados podem ser visto na tabela a baixo juntamente com suas
respectivas classes de utilizao:

Classe Quebrar quando

.responsivesm For menor que telefone em visualizao modo

paisagem

.responsivemd For menor que tablet em visualizao modo

retrato

.responsivelg For menor que tablet em visualizao modo

paisagem

Estas so classes criadas pelo

framework
, mas nada impede de voc criar seus prprios
tamanhos e validao de responsividade.

Concluso sobre componentes

Aprendemos e testamos todos os componentes, de HTML e CSS, do Ionic framework,

agora voc tem uma viso ampla do que possvel fazer com os componentes j prontos
do Ionic, mas lembre-se, voc pode, e deve, criar seus prprios componentes com CSS.

Em outro ebook iremos abordar customizao de componentes, bem como a criao de

novos estilos.

Voc pode consultar a documentao oficial dos componentes do Ionic Framework no

link:
http://ionicframework.com/docs/components/

41
Empacotando o aplicativo
O processo de build
, tambm conhecido como empacotamento, utilizado para testar e
publicar o aplicativo final.

Neste material vamos abordar apenas os comandos para gerar o aplicativo para testar
nos diferentes
devices
. Para publicar nas
Stores
iremos ver em outro ebook.

Android

Para criar o aplicativo final na plataforma Android precisamos do Android SDK, que
todas as ferramentas para criar o aplicativo final (.apk) e poder ser testado em
emuladores e devices.

Primeiro passo baixar o Android SDK no site oficial do Android Developer

(
http://developer.android.com/intl/pt-br/sdk/index.html)
. Role at o final da pgina e
baixe apenas o SDK para linha de comando, como mostrado na imagem abaixo. Escolha o
seu sistema operacional e faa o download:

Para usurios Linux o processo bem parecido com algumas diferenas nas definies
de variveis de ambiente. Neste material vamos abordar a instalao do Android SDK em
ambiente Windows.

42
Para usurios do Windows podemos usar o instalador, onde j verificado se existe o
Java JDK instalado, e instalar o SDK em uma determinada pasta.
Execute o instalador e siga os passos abaixo:

Se voc tiver o Java JDK instalado o instalador ir seguir para a instalao do Android
SDK, caso contrario ser exibido esta tela solicitando a instalao do Java JDK:

Clique em e siga os passos abaixo:

Visitjava.oracle.com

43
Aps o download concludo siga os passos abaixo para instalar o Java JDK e suas
dependncias:

Ao concluir a instalao do Java JDK, execute novamente o instalador do Android, ou se

ainda estiver aberto clique no boto Back e depois Next, voc ver que agora ele ir
encontrar a instalao do Java e assim podemos prosseguir com a instalao do Android
SDK clicando em Next:

44
Escolha um caminho de fcil acesso para a instalao, pois em alguns momentos voc
ter que entrar nesta pasta para executar o
Update
do Android:

O Ionic precisa de algumas dependncias do Android para fazer build
, ou seja, gerar o
aplicativo final, para isso vamos fazer alguns Update no Manager Android SDK. No
Manager desmarque tudo que j vem marcado e marque apenas as opes listadas
abaixo. Em seguida clique em Install 9 packages:

45
Em seguida clique em
Accept License e
Install
para o download comear. Este processo
pode demorar alguns minutos.

Ao concluir a tela abaixo ser apresentada:

Vamos agora adicionar algumas variveis de ambiente para que o Ionic encontre o local
onde est instalado o Android SDK. Entre nas
propriedades
do seu computador e vai em
Configuraes avanadas do sistema eVariveis de Ambiente:

46
Em variveis do usurio adicione uma nova chamada
ANDROID_HOMEe em valor preencha
com o caminho onde foi feito a instalao do SDK:

Agora vamos adicionar a plataforma android em nosso projeto e fazer o build
. Se seu
terminal estiver aberto feche ele e abra novamente para que as variveis de ambiente
sejam carregas. Em seguida digite os comandos dentro da pasta de algum projeto criado
nos exemplos acima:

ionicplatformaddandroid
ionicbuildandroid

Se o build ocorrer correto uma mensagem ser exibida em seu terminal parecida com
essa:

BUILDSUCCESSFUL
Totaltime:2mins57.657secs
Builtthefollowingapk(s):
C:/workspace/app1/platforms/android/build/outputs/apk/androiddebug.apk

Na ultima linha apresentado o caminho onde foi gerado o aplicativo final, no caso o
androiddebug.apk . Para testar em seu d
evice
basta instalar este arquivo nele.

Se voc se deparar com algum erro deixe sua mensagem nesta

lista de discusso.

Para testar em emuladores ou at mesmo fazer a instalao direto em seu d evice

, sem
precisar copiar o arquivo apk,
leia este post
em meu site com vrias opes e formas.

47
iOS

Para gerar o aplicativo final para a plataforma iOS (.ipa), utilizando o Ionic Framework,
precisamos estar em um ambiente Mac, ou seja, em uma maquina com o sistema
operacional iOS.

O Ionic.io, que a plataforma de solues em nuvem para aplicativos implementados em

Ionic Framework, fornece uma soluo para compilar o projeto para iOS sem precisar de
uma maquina Mac, porem este servio free com limitaes. Iremos falar sobre o
Ionic.io em outro ebook.

Para compilar nosso projeto vamos precisar do

iossim, um mdulo NPM escrito em
JavaScript rodando via NodeJS responsvel por rodar aplicaes via linha de comando
direto no emulador iOS.

Para instalar digite:

npminstallgiossim

Em seguida, dentro da pasta do projeto, digite:

ionicbuildios

Este processo ira compilar nosso aplicativo e agora podemos abri-lo via Xcode para
emular ou rodar em um
device
com iOS.

Dentro da pasta platforms/ios foi criado um arquivo , que o

AppListImage.xcodeproj
arquivo inicializador do projeto em Xcode:

De um duplo clique neste arquivo e o projeto ser aberto no Xcode:

48
Ao abrir basta escolher um emulador, ou um
device conectado via USB, onde est
"iPhone 6s Plus" e clicar no cone play.

Este processo ir executar o emulador, caso voc escolha um dos emuladores, e em

seguida ir instalar e rodar o aplicativo:

49
Prximo passo
Este ebook abordou os recursos introdutrios e essenciais para se iniciar no Ionic
Framework, agora vamos aprender como customizar os componentes para criar um
design mais proprietrio e melhorar a experincia do usurio.

Veja o
#2 Ionic Framework - Customizando e criando componentes
:

50