Primeira App com PhoneGap Build

Primeira App com PhoneGap Build

Iremos falar neste curso sobre o Cordova. O nosso objetivo desenvolver aplicativos
mobile novos. Quando pensamos no cenrio atual de aplicativos, temos uma imagem
um pouco desoladora. As plataformas mais famosas so iOS e Android, mas existem
outras:

Se quisermos desenvolver para cada uma destas plataformas, teremos que aprender
linguagens e frameworks, totalmente diferentes. Por exemplo, se voc est em uma
plataforma iOS ter que trabalhar com Objetive-C ou Swift, no Android, voc
trabalhar com Java. Trabalhamos de forma diferente em cada plataforma.

Para cada uma destas plataformas, temos um custo para desenvolver uma app, porque
precisaremos de uma equipe diferente, com conhecimentos diversos, alm da
manuteno e outros fatores. Vrias questes que no tornam vivel. Porm, todas estas
plataformas, alm de suportarem aplicativos nativos nas diversas linguagens, elas tm
algo em comum: todas suportam Web.

As plataformas suportam o web browser, o que na verdade significa que todas

conseguem executar HTML, CSS e Java Script. Desde o princpio, a Web tem esta
caracterstica multiplataforma j.
Ser que ns no conseguiremos usar o conceito de multiplataforma da Web para
desenvolver app? Web no app... Mas se precisarmos desenvolver um app, teremos
que procurar solues nativas e ficaremos perdidos com a variedade de plataformas?
Por isso, nasceu o Cordova - que ser o foco do nosso curso. Ele ir nos possibilitar
criar aplicativos multiplataformas com a base do HTML e JS. Ou seja, escrevemos apenas

um cdigo e o nosso aplicativo ir rodar em todas as plataformas. No ser Web, mas

efetivamente um aplicativo.
Vamos fixar estas ideias... O Cordova ir permitir que voc escreva o cdigo HTML, CSS
ou JS, da maneira como estiver acostumado a fazer na Web. Existiro algumas
diferenas que trataremos mais adiante, mas ser o mesmo cdigo criado no Front-End.
No entanto, o objetivo do Cordova "empacotar" tudo isto e criar um app.

O Cordova feito das linguagens HTML, CSS e JS empacotado em um app instalvel nos
sistemas operacionais mvel, em geral. Ele seria como uma "casca" - quase nativa da
plataforma - que envolve estas linguagens. Isto permitir que o aplicativo funcione em
tecnologias que, geralmente, usvamos na Web.
Na verdade, no teremos um navegador, em vez disso, teremos o que chamamos de
WebView - uma forma que todas as plataformas (iOS, Androide outras) de executar
HTML, CSSe JS, dentro de si mesmas, porm fora de um navegador. Isto significa que no
teremos barra de endereo, botes de voltar, menu... No precisamos mais da interface

do navegador, sobrando apenas uma espcie de "renderizador" de HTML. Esta a

definio de WebView.
O que o Cordova ir fazer por ns? Ele ir criar a WebView da plataforma, jogar o HTML
dentro e executar o cdigo. Como no estamos rodando em um navegador, isto
significa que o HTML funcione como um app realmente, sem as caracterstica do
navegador na plataforma. Quais as vantagens disto?
Teremos um app instalvel, publicvel na loja (e com todas as vantagens que
correspondem), porm implementada com um cdigo plataforma.
Ns falamos at aqui de Cordova, mas e PhoneGap? Do que se trata?

Ns veremos mais detalhes sobre os dois, durante o curso. Mas para comear, o
PhoneGap o precursor do Cordova. Quando o projeto foi criado h muitos anos, o
nome recebido foi PhoneGap. Ento, a Adobe comprou a empresa e doou o cdigo do
Phonegap para o projeto Apache, que passou a se chamar Apache Cordova.
O Cordova o projeto open source que se originou a partir do projeto PhoneGap. O
projeto original ainda usado hoje em dia? Sim. A Adobe continua usando o nome
Phonegap para alguns projeto comerciais que ela desenvolve. Na verdade, so servios
e funcionalidades a mais para o prprio Cordova. Podemos afirmar que ele 90%
Cordova, porm com algumas caractersticas proprietrias a mais e os servios
oferecidos so bastante teis.
A princpio o que veremos Cordova com alguns detalhes de PhoneGap.
Vamos esclarecer um detalhe sobre a plataforma: Cordova no Web. Por que falamos
isto? comum encontrarmos pessoas que afirmem que o Cordova Web atravs de
App, um conceito bastante misturado. Na verdade, os dois possuem semelhanas,
porque utilizam a mesma linguagem de programao (HTML, CSS e JS). Mas o
Cordova est mais prximo de um aplicativo do que de uma Web. Por exemplo, ela no
se encontra disponvel na internet, no possui uma URL, nem tem links que possam me
direcionar para algum recurso. Vantagens da Web - como estar indexada no Google tambm no possumos, quando trabalhamos com o aplicativo Cordova. No entanto,
temos todas as vantagens de trabalhar com um aplicativo: ele ser instalados na loja,
trabalhar Offline, ter suporte para temas especficos nativos de hardware do aparelho.
Todos recursos que temos acesso em um app, teremos no Cordova. Logo, o Cordova

tem mais caracterstica semelhantes a um aplicativo do que a Web, a semelhana. Temos

uma app nativa desenvolvida com as linguagens usadas na Web.
Voc pode perguntar: por que vamos usar um nativo ou o aplicativo Cordova, que
hbrido (mistura HTML com app)? Quais so as vantagens e desvantagens de cada um?

O hbrido ir trazer grandes vantagens no desenvolvimento, porque iremos economizar

dinheiro ao criar um nico cdigo que rodar em diversas plataformas. J o nativo, ir
oferecer o acesso a detalhes de cada plataforma e dos sistemas operacionais. Do ponto
de vista do usurio, no deve existir diferenas. Ele ir instalar e utilizar os apps nativos
ou hbridos da mesma forma. E existe diferena de performance? Sim. Se o seu projeto
demandar muita performance, que tenha muitos detalhes, realmente o nativo pode ser
um melhor desempenho. Porm, na maioria dos casos, a performance do nativo e
hbrido so equivalentes. Mas sabemos que existem aplicativos ruins em ambos
cenrios. Talvez, a nica distino perceptvel que alguns aplicativos nativos tm a
opo de usar os componentes padres da plataforma que eles esto rodando. Com um
aplicativo hbrido, voc ter mais dificuldade. Como iremos implementar com CSS,
HTML, geralmente, termos um design que ser aplicado a todas as plataformas. Ento,
no conseguiremos fazer um design CSS com caractersticas de OS, porque no Android
teremos um resultado bizarro. Geralmente, iremos fazer um design multiplataforma, que
rodar em vrios lugares. Esta uma vantagem do hbrido.
A escolha entre um nativo ou hbrido mais uma escolha de implementao, do que
algo que seja perceptvel para o usurio. Para ele, no haver diferenas e ambos sero
usados normalmente.

Implementando um aplicativo hbrido

Vamos criar o nosso primeiro aplicativo hbrido com HTML e CSS no Cordova. Iremos
trabalhar com o restaurante S de Cenoura que vende apenas bolo de cenoura e
produtos do gnero.

Eles possuem um estabelecimento, que utiliza cardpios impressos com todas as opes
para os clientes. Com isto, eles tm todos os problemas clssicos do mundo offline:
quando existe alguma opo de preo ou nos pratos, eles precisam imprimir novamente
os cardpios. O mesmo acontece quando o cardpio fica desgastado, alm de
dificuldade com os pedidos. Eles gostariam de modernizar o seus cardpios e nos
convidaram para desenvolver algumas apps.
O primeiro cenrio que resolveremos, ser o do cardpio. Iremos criar uma verso
digital para disponibilizar para os clientes do local, sem nenhuma funo complicada,
apenas para a visualizao do cardpio. Assim poderemos otimizar a atualizaes do
cardpio, sem precisar reimprimi-lo frequentemente.
Ele disponibilizaram as folha do cardpio. So duas imagens feitas no Photoshop. Em
uma das pginas temos diversas opes de bolos e em outra, teremos as bebidas
oferecidas como caf, ch e sucos. Este o cardpio impresso atual.

Nosso primeiro passo ser transformar isto em um app utilizando o Cordova, que ir
permitir que o usurio visualize o cardpio. Quando forem necessrias atualizaes,
apenas faremos alteraes nos arquivos das imagens.
Observe que estamos usando o Sublime como editor e que criamos o projeto cenoura.
Ns inclumos as imagens do Menu e dois cones (arquivos com extenso .svg) para as
opes do cardpio.
O que precisamos fazer? Uma app Cordova baseada e HTML, CSS e JS - ele trabalha
como uma Web, porm dentro de um app. Iremos criar um arquivo index.htmlao
HTML, em que criaremos nossa pgina.

Comearemos a criar o nosso arquivo, com uma estrutura bsica incluindo o DOCTYPE
html, meta e o ttulo S de Cenoura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>S de Cenoura</title>>
</head>
<body>
</body>
</html>

Vamos comear a implementar esta HTML. Antes, precisamos lembrar que estamos
trabalhando com um app mobile que ir rodar como em um navegador mvel no celular.

Ento, iremos trabalhar com design responsivo. Logo, precisaremos incluir a famosa
meta tag viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">

O nosso cdigo ficar assim:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1">
<title>S de Cenoura</title>>
</head>
<body>
</body>
</html>

Quem j trabalhou com design responsivo, viu esta meta tag vrias vezes. Ela permitir
que o design que criaremos em HTML e CSS se adapte a resoluo (a largura) da tela
do dispositivo. Ter um uso padro em todos os designs responsivos.
Agora, queremos que o app mostre as duas imagens do cardpio e que permita o usurio
alternar entre Bebidas e Bolos. Vamos incluir os arquivos de imagem no HTML.
<img src="imagens/menu-bolos.png" alt="Menu Bolos">

Aproveitaremos para incluir alguns ids que sero teis para referenciarmos estes
arquivos no CSS. Iremos colocar uma classe chamada menu.
<img src="imagens/menu-bolos.png" alt="Menu Bolos"
id="menu-bolos" class="menu">

Por que fizemos isto? Porque tambm teremos o menu bebidas. Iremos adicion-la no
cdigo tambm:
<img src="imagens/menu-bebidas.png" alt="Menu Bebidas"
id="menu-bebidas" class="menu">

Os dois tero a classe menu, mas idsdiferentes.

O nosso cdigo est assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1">
<title>S de Cenoura</title>>
</head>
<body>
<img src="imagens/menu-bolos.png" alt="Menu Bolos"

id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" alt="Menu Bebidas"
id="menu-bebidas" class="menu">
</body>
</html>

Iremos jogar o nosso projeto no Chrome. Ele ir exibir as duas imagens, uma embaixo
da outra. Veremos como possvel visualizar a pgina no celular. Vamos usar o inspetor
de elementos, do Chrome.

O navegador ir abrir o inspetor, ele disponibilizar um cone que o Device mode.

Ele dar a opo de escolher um dispositivo, por exemplo, o Google Nexus 5 e ns

poderemos como a pgina ser visualizada no aparelho.

No poderemos ver bem a imagem, porque ela ainda est gigante. Mas basicamente o
que temos um HTML com duas imagens.
Iremos arrumar a largura da imagem no CSS. Para isto, criaremos um arquivo novo que
chamaremos de estilo.css.
Voltaremos no HTML e importaremos como linko arquivo .css.
<link rel="stylesheet" href="estilo.css">

A linha estar localizada abaixo do ttulo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initialscale=1">

<title>S de Cenoura</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<img src="imagens/menu-bolos.png" alt="Menu Bolos"
id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" alt="Menu Bebidas"
id="menu-bebidas" class="menu">
</body>
</html>

Vamos para aba do estilo.css e colocaremos algumas regras. Por exemplo,

indicaremos que o menu no deve ultrapassar o limite da largura. Vamos indicar que o
width das duas imagens ser de 100%
.menu {
width: 100%;
}

Ao acessarmos novamente o navegador, veremos que a visualizao do projeto est

melhor.

As imagens esto posicionadas uma embaixo da outra. O aplicativo est feio, mas j
"usvel".
De volta ao HTML, detalharemos no cdigo que no queremos que as duas imagens
apaream simultaneamente. Atravs de um menu, o usurio tenha a opo de trocar de
imagem. Como implementaremos isto com um HTML simples? Com dois Radio
Buttons .
Teremos um input type="radio" que ter o nome de opcao. Criaremos uma id para a
opo de bolos (opcao-bolos) e outra para bebidas (opcao-bebidas).
<body>

<input type="radio" name="opcao" id="opcao-bolos">

<input type="radio" name="opcao" id="opcao-bebidas">
<img src="imagens/menu-bolos.png" alt="Menu Bolos"
id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" alt="Menu Bebidas"
id="menu-bebidas" class="menu">
</body>

Para acompanhar o input radio comum criarmos labels. Vamos incluir um label
para opcao-bolos e outra para opcao-bebidas.
<input type="radio" name="opcao" id="opcao-bolos">
<label for="opcao-bolos">Bolos</label>
<input type="radio" name="opcao" id="opcao-bebidas">
<label for="opcao-bebidas">Bebidas</label>

Veremos novamente no navegador as alteraes feitas at agora.

Temos labels com input, em que nos permite clicar nas opes "Bolos" e "Bebidas".
Mas ainda no fazemos nada com isto. Queremos que quando clicamos na opo
"Bolos", ele mostre apenas o cardpio de bolos e faa o mesmo com a opo de
"Bebidas". Faremos isto com um CSS puro.
Na aba de index.html do terminal, iremos especificar no cdigo que ele deve esconder
a imagem que no est selecionada. Por exemplo, se tivermos a opo "Bolos"
selecionada no app, queremos que o cardpio de bebidas fique oculto. Queremos que o
contrrio acontea quando selecionarmos "Bebidas": o cardpio de bolo no deve
aparecer. Na aba CSS conseguiremos fazer isto com alguns seletores avanados. Vamos
criar isto no cdigo.

Se tivermos a opcao-bolos selecionada usaremos a opo do seletor checked.

Enquanto isso, para o menu-bebidas usaremos um display: none.
#opcao-bolos:checked ~ #menu-bebidas {
display: none;
}
.menu {
width: 100%;
}

Estamos dizendo que se marcamos a opcao-bolos, esconderemos o menubebidas. O

que significa o seletor ~? Que a primeiro pedao (opcao-bolos) da linha irmo do
segundo (menu-bebidas). Se retornarmos ao nosso HTML, veremos que todas nossas
tags so irms. Isto significa que quando tivermos uma opo marcada, a tag irm usar
um display: none. Em seguida, testaremos se o cdigo funciona:

Se marcarmos a opo "Bolos" no menu, o aplicativo ir esconder o cardpio de

"Bebidas". Mas se selecionarmos "Bebidas", o cardpio de bolos ainda estar visvel.
Precisamos fazer com o menu de bebidas o mesmo que fizemos com o de bolos no CSS.
#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos {
display: none;
}
.menu {
width: 100%;
}

Assim, quando selecionarmos a opcao-bebidas ele ir esconder o menu-bolos. Se

testarmos novamente no navegador, veremos que quando selecionamos o menu
"Bebidas", o cardpio de bolos ir desaparecer.
Outra melhoria que podemos fazer que, por padro, a opo "Bolos" venha
selecionada, quando o aplicativo carregar pela primeira vez. Assim, ele exibir apenas o
primeiro cardpio.
Acrescentaremos checked na linha do input radio da opcao-bolos.
<input type="radio" name="opcao" id="opcao-bolos" checked>
<label for="opcao-bolos">Bolos</label>
<input type="radio" name="opcao" id="opcao-bebidas">
<label for="opcao-bebidas">Bebidas</label>

Agora, ele ir carregar o aplicativo com a opo Bolos selecionada e depois, podemos
trocar para o prximo cardpio. Nosso aplicativo tem uma funcionalidade simples, com
um CSS simples.
Em seguida, queremos deixar o design mais bonito. Para isto, voltaremos no CSS e
faremos alguns ajustes. No corpo (body) do app existia uma margem. Iremos retir-la.
body {
}

margin: 0;

Acrescentaremos tambm um background com uma cor que combine com meu menu
do "S de Cenoura". Faremos outros ajustes, como deixar o texto centralizado, trocar a
fonte para sans-serif.
body {
background: #3D1A11;
margin: 0;
font-family: sans-serif;
text-align: center;
}

Se atualizarmos o navegador, j veremos mudanas.

Observe que o menu est localizado no meio, temos um design sem margem, com a cor
do fundo que combina.
Prximo passo ser incluir melhorias no label. Iremos mover o menu para a parte de
baixo do aplicativo. Ele tambm ser colorido e com cones, sem as atuais bolinhas
azuis.
Faremos as alteraes no CSS, por partes. Comearemos tirando o input radio com
display: none. Com isto, o nosso clique continuar funcionando e no ser quebrado.
input[type=radio] {
display: none;
}

Acrescentaremos as novas linhas abaixo do body no cdigo.

body {
background: #3D1A11;
margin: 0;
font-family: sans-serif;
texte-align: center;
}
input[type=radio] {
display: none;
}

Mesmo que o inputesteja escondido, o prprio label j clicvel no HTML.

Tambm iremos fazer alteraes do design do label, por exemplo, na cor.
Adicionaremos um background color. Mudaremos a cor do label para branco e
combinar com design escuro.
input[type=radio] {
display: none;
}
label {
background-color: #563429
}

A fonte do menu ficou branca.

Vamos mudar outras propriedades. Mudaremos o display, o font-size, o padding,

text-transform`
label {
background-color: #563429
color: white;
display: block;
font-size: 75%;
padding: 4em 0 1em;
text-transform: uppercase;
}

Nosso aplicativo est assim agora:

Queremos colocar um cone no espao entre os labels. Para isto, voltaremos a aba
estilo.css e na parte referente ao label do nosso cdigo, pegaremos o da opcaobolos ter um background-image com a URL do cone da opo "Bolos".
label[for=opcao-bolos] {
background-image: url(imagens/icone-bolos.svg);
}

Faremos o mesmo com o cone da opo "Bebidas".

label[for=opcao-bebidas] {
background-image: url(imagens/icone-bebidas.svg);
}

O cdigo ficar assim:

label {
background-color: #563429
color: white;
display: block;
font-size: 75%;
padding: 4em 0 1em;
text-transform: uppercase;
}
label[for=opcao-bolos] {
background-image: url(imagens/icone-bolos.svg);
}
label[for=opcao-bebidas] {
background-image: url(imagens/icone-bebidas.svg);
}

No navegador, poderemos ver as mudanas.

As imagens ficaram repetidas. O cone ainda precisa de ajustes. Iremos trocar o

background-size para 4em.
label {
background-color: #563429
background-size: 4em;
color: white;
display: block;
font-size: 75%;
padding: 4em 0 1em;
text-transform: uppercase;

O cone j ir aumentar de tamanho. Porm, no queremos que ele repita (no-repeat).

background-repeat: no-repeat;

Agora ele aparecer apenas uma vez em cada label.

Em seguida, iremos deixar o cone mais centralizado. Para isto usaremos o

background-position.
background-position: center top;

Se quisermos, temos a opo de juntarmos todos os backgrounds em uma nica

propriedade.
Agora os cones esto centralizados no aplicativo.

Iremos agora indicar qual cone est selecionado, alterando a cor do label. Como
saberemos se ele est selecionado? No HTML, o radio button posicionado antes do
label estar marcado com um checked.
<input type=" radio" name="opcao" id="opcao-bolos" checked>
<label for="opcao-bolos">Bolos</label>

No outro caso, o radio button posicionado antes do label da opo de bebidas

dever ter um checked.
Ento o que precisamos fazer pintar o label cujo o radio button anterior esteja
marcado com checked.
Como faremos isto? Na aba CSS, iremos adicionar o seletor radio button.

input[type=radio] label

Usaremos tambm um seletor de irmos diferente do que utilizamos anteriormente. O

seletor + significa imediatamente adjacente.
input[type=radio] + label {
}

Ou seja, s iremos pintar o label que estiver logo na sequncia do input. Se for o input
da opo de bolos, usaremos o label relacionado com ele. Se for o input da opo de
bebidas, usaremos o label relacionado com bebidas.
<input type=" radio" name="opcao" id="opcao-bebidas">
<label for="opcao-bebidas">Bebidas</label>

De volta ao CSS, incluiremos um background-color com uma cor diferenciada.

input[type=radio] + label {
background-color: #E4876D
}

Mas queremos que a cor seja alterada no input radio que esteja atualmente
selecionada.
input[type=radio]:checked + label {
background-color: #E4876D
}

Se no acrescentarmos o checked, os dois radios ficaro pintados.

O labelselecionado ter uma cor diferente.

Agora, queremos mover os labels para baixo e deix-los lado a lado.
Vou especificar a posio do menu, com definindo que cada um ocupe uma largura de
50%, assim eles dividiro a tela, que fiquem na parte debaixo, usaremos o bottom igual
a 0. Tambm quero que ele aparea sobre as imagens do cardpio, por isso, usaremos o
z-indexigual a 1.
input[type=radio]:checked + label {
background-color: #E4876D
}
label {
width: 50%;

position: fixed;
bottom: 0;
z-index: 1;

Se atualizarmos o navegador, veremos que o menu mudou de posio. Porm, os dois

cones esto um sobre o outro.

Precisamos posicion-los corretamente. Faltou especificar no cdigo que um precisa

ficar esquerda (left) e o outro direita (right).
label{for=opcao-bolo] {
left:0;

}
label[for=opcao-bebidas] {
right: 0;
}

Agora, os botes "Bolos" e "Bebidas" esto lado a lado.

Est o nosso primeiro app. Ele no sofisticado, mas nosso objetivo mostrar que
qualquer HTML, CSS e, eventualmente, Java Script, pode criar um app mobile. Em
seguida, veremos como fazer o app rodar em um dispositivo.

Rodando o nosso aplicativo mobile

Terminamos de criar nosso app. Iremos agora transform-lo efetivamente em um

aplicativo mobile. A princpio, funcionar apenas para Android, porque ele mais
simples de trabalhar, e a instalao mais fcil.
Quando trabalhamos com Cordova, temos o HTML e CCS que desenvolvemos, porm
para transformarmos isto em um app trabalhoso. Um aplicativo nativo do sistema, o
que significa que quando formos colocar na loja precisaremos de uma srie de recursos
especficos do sistema operacional. Para isto precisaremos ter uma infraestrutura nativa
da plataforma instalada no meu computador. Para fazermos um app - apesar de estar
fazendo em HTML - precisaremos do SDK do Android e estruturas nativas para
conseguir que o projeto seja executado. Faremos isto mais adiante.
No comeo, existem algumas facilidades como o PhoneGap Build. O PhoneGap um
produto da Adobe, com base no Cordova, mas com alguns servios adicionais. Um
deles o Adobe PhoneGap Build que permite empacotar os apps mobiles na nuvem.

Ele prov a estrutura nativa do Android e iOS instalado em suas mquinas e atravs da
nuvem, enviamos nosso aplicativo para ele e receberemos de volta nosso projeto
"buildado". Sem precisarmos executar tarefas do nosso computador, como instalar SDK,
por exemplo.

O PhoneGap Build oferece muitas facilidades: compila, disponibiliza mltiplas

plataformas... O servio pago, mas oferece uma opo de plano gratuito que j ser o
bastante para o nosso aplicativo.

Para utilizar o servio, voc precisar de um cadastro. Ele ir te pedir uma senha da
Adobe ID. Eu j tenho meu cadastro, poderemos seguir para a prxima pgina.

Ns temos a opo de fazer infinitas apps open-source ou apenas uma privada. Com a
open-source precisaremos trabalhar com o Github. Ns faremos uma privada, que conta
com uma facilidade interessante: podemos simplesmente fazer o upload de um
arquivo .zip.

Como fazemos isto? Voltamos ao app, que tem HTML, CSS e vrios cones. Criaremos
um arquivo zipado com todos estes elementos e depois, subiremos para o PhoneGap
Build. Abriremos a pasta onde esto os arquivos e iremos comprimi-los.

Criado o arquivo comprimido, voltaremos ao PhoneGap Build e clicaremos em Upload.

Ele abrir uma nova janela, onde poderemos procurar o arquivo .zip que acabamos de
criar. Aps selecionar o arquivo, clicamos em open e ele comear a fazer o uploading.
Aguaremos um pouco, ele indicar que importou o arquivo e depois, clicaremos em
Ready to Build.

Agora, ele ir "buildar" o aplicativo em trs plataformas que ele suporta por padro
(iOS, Android e Windows Forms). At aqui, apenas subimos um arquivo .zip. No
entanto, percebemos que o cone de iOS est vermelho, indicando que ele no
conseguiu "buildar".

Mas ele consegue com as outras plataformas. Se clicarmos no cone do Android e ir

baixar o arquivo .apk (que o formato de apps do Android para rodar no celular).

Agora queremos testar o aplicativo em um aparelho de celular. Veremos a tela do meu

celular. Aproveitaremos para instalar o app no aparelho. o PhoneGap Buil oferece a
facilidade de j disponibilizar o QR Code, que podemos scanear com o celular.

Ele ir executar o QR Code, iremos executar, e o celular ir abrir o arquivo .apk que ns
geramos no computador. Ele pedir permisso para fazer o download, daremos "OK" e
o arquivo ser baixado. Depois, faremos a instalao.
Para fazer o download de um aplicativo fora da loja, teremos que ir at as
"Configuraes" do seu celular, at me "Segurana".

Iremos at a opo "Fontes desconhecidas". Com isso, poderemos abrir a instalao

para aplicativos fora da loja. Aparecer uma mensagem de segurana, mas o nosso
aplicativo seguro e podemos desabilitar a opo. Ele far o processo de instalao no
aparelho.

Vamos abrir o aplicativo. Veremos adiante como configurar nome e cone.

A mesma app que desenvolvemos em HTML e CSS que funcionou no navegador,

tambm rodou no aplicativo. Se buscarmos o app no menu do celular, ele ter um nome
esquisito de "PG Build App", mas podemos colocar o cone na Homescreen.

Ele ter o funcionamento normal de um app nativo, sendo irrelevante se foi feito em
HTML e CSS.
Resumindo, o PhoneGap Build uma forma fcil de "buildar" o app, tornando
desnecessrio a configurao da gerao de ambiente do Android ou iOS no
computador. Podemos usar o servio da Adobe, que tem a opo gratuita, simples de
trabalhar.

Projeto CenourApp
Sugira uma correo

Fomos chamados para ajudar a trazer o mundo mobile para a S de Cenoura, uma
startup de confeitaria especializada em bolos de cenoura gourmet. Eles ainda funcionam
na base do menu clssico em papel e do garom anotando pedidos no bloquinho. O
servio de delivery por telefone, tambm gerando pedidos em papel.
Muita coisa d errado nesse cenrio. Sempre que h mudana de cardpio, preciso
imprimir tudo de novo. A promoo do dia no pode ser colocada no cardpio, uma vez
que sempre muda, ento fica em uma lousa no canto do restaurante que pouca gente v.
O garom anota o pedido e passa para cozinha, que muitas vezes no entende a letra no
pedido. O telefone do delivery vive ocupado e os clientes reclamam que no conseguem
acompanhar o status do pedido.
Temos de resolver todos esses problemas. E uma App mobile foi a soluo pensada.
Da nasce nosso projeto CenourApp que vamos desenvolver.
A estratgia ser desenvolver a App por partes, resolvendo um problema por vez. Nosso
primeiro passo bastante modesto. O pessoal da boleria quer resolver o caso de precisar
reimprimir o cardpio a cada semestre quando as opes e preos mudam. Querem
tambm dar um ar mais tecnolgico para os clientes e oferecer o cardpio em um
aplicativo mobile.
Os donos compraram alguns tablets Android baratos que ficaro nas mesas dos clientes.
Os cardpios j so desenvolvidos por eles no Photoshop. A diferena que no
queremos mais imprimi-los, e sim mostrar em um aplicativo mobile bonito.
Apesar de todos os tablets da loja hoje serem Android, j queremos desenvolver uma
App hbrida pensando em outras plataformas. Se o projeto der certo, o S de Cenoura
vai crescer e os donos pensam em comprar iPads bonitos para os clientes e um grande
tablet touch screen com Windows para deixar na entrada da loja como demonstrao do
cardpio.
Passo a passo
1. Crie uma nova pasta cenourapp na sua mquina
2. Crie uma subpasta cenourapp/imagens
3. Copie os arquivos dos menus e cones da aplicao para essa pasta
imagens. So 4 arquivos que voc pode baixar aqui.

No prximo exerccio vamos iniciar a implementao do cdigo.

HTML do menu
Sugira uma correo

Crie um novo arquivo index.html como vimos na aula. J crie tambm um menu.css e
importe no html.
Nosso HTML vai importar as duas imagens do menu com <img> e prover 2 radio
buttons com label para o usurio escolher qual menu ver. Faremos o design e a
funcionalidade no prximo exerccio.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initialscale=1.0">
<link rel="stylesheet" href="menu.css">
</head>
<body>
<input type="radio" name="opcao" id="opcao-bolos" checked>
<label for="opcao-bolos">Bolos</label>
<input type="radio" name="opcao" id="opcao-bebidas">
<label for="opcao-bebidas">Bebidas</label>
<img src="imagens/menu-bolos.png" id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" id="menu-bebidas"
class="menu">
</body>
</html>

Design e funcionamento com CSS

Sugira uma correo

Implemente o estilo no arquivo menu.css que criamos antes. Adicione as novas regras
ao que j tnhamos.
Usando CSS, possvel exibir apenas a imagem que estiver selecionada utilizando
seletores avanados do CSS3. Com a pseudoclasse :checked, sabemos qual opo est
selecionada. E com o seletor de irmo adjacentes ~, selecionamos a foto correspondente.
#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos {
display: none;
}

Com esse cdigo, se uma certa opo estiver marcada, a foto da outra opo ficar
escondida. Ainda podemos melhorar bastante o estilo. A imagem do menu pode estourar
em certas telas menores, ento queremos configurar sua largura mxima. E vamos
esconder os input radio, para usar apenas o label para escolha de opo:
input[type=radio] {
display: none;
}
.menu {
width: 100%;
}

Nosso prximo passo deixar os labels com cara de botes, colocar uns cones bonitos
e acertas outras coisas decorativas:
body {
background: #3D1A11;
font-family: sans-serif;
margin: 0;
text-align: center;
}
label {
background: center 0.5em no-repeat #563429;
background-size: 4em;
color: white;
display: block;
font-size: 75%;
padding: 4em 0 1em;
text-transform: uppercase;
}
label[for=opcao-bolos] {
background-image: url(imagens/icone-bolos.svg);
}
label[for=opcao-bebidas] {
background-image: url(imagens/icone-bebidas.svg);
}
:checked + label {
background-color: #E4876D;
}

Por fim, podemos posicionar os botes embaixo na tela fixamente e lado a lado:

label {
width: 50%;

position: fixed;
bottom: 0;
z-index: 1;
label[for=opcao-bolos] {
left: 0;
}
label[for=opcao-bebidas] {
right: 0;
}

.menu {
margin-bottom: 100px;
}

App Android com PhoneGap Build

Sugira uma correo
Vamos usar o PhoneGap Build para gerar uma App Android com nosso cdigo HTML
anterior sem precisarmos ainda da infraestrutura local do Android.
1. A forma mais simples de subir nosso cdigo para o PhoneGap Build criar um
arquivo ZIP com todo o HTML, CSS, JS e imagens necessrios. O arquivo raiz
precisa ser um index.html. Ento, abra a pasta onde voc criou o exerccio
anterior e faa um ZIP com todo seu contedo. Se preferir, o cdigo do primeiro
exemplo est no GitHub e voc pode clicar direto em Download ZIP.
2. Agora, vamos subir o ZIP no PhoneGap Build. Para nossos testes, o plano
gratuito suficiente. Entre em http://build.phonegap.com e crie uma conta Free.
Voc deve precisar de um usurio AdobeID.
3. Marque a aba Private, e clique em Upload a .zip file. Selecione o arquivo ZIP
com nosso projeto.
Aguarde um pouco e nossa App deve finalizar de buildar a verso Android. Vamos
instal-la no aparelho!
1. Baixe o instalvel Android (arquivo apk) no aparelho. Se preferir, s escanear
o qrcode no dispositivo.
2. Seu aparelho precisa estar aberto para instalao de arquivos de fora da Play
Store. Se voc nunca fez uma instalao fora da loja, vai precisar marcar uma
opo. V nas Configuraes e em Segurana. L, marque a opo Permitir
Instalao de Fontes desconhecidas.
3. Ento, basta clicar no apk que voc baixou e seguir a instalao.
Ele vai pedir umas permisses, finalizar a instalao e dar a opo de j abrir a App.
Execute e teste a App no seu aparelho.

Transies animadas com CSS

Sugira uma correo

Se quisermos adicionar uns efeitos, s usar CSS. Por exemplo, fazer uma transio
entre as duas telas, escorregando da direita para a esquerda. Com CSS Transitions, isso
bem simples.
Edite a parte das imagens e coloque um novo div ao redor delas, que ser responsvel
por deslizar quando a transio acontecer:
<div class="container-menus">
<img src="imagens/menu-bolos.png" alt="Nossos bolos"
id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" alt="As Bebidas"
id="menu-bebidas" class="menu">
</div>

E agora o CSS. O deslocamento em si feito com CSS transform, fazendo um

translateX para deslocar horizontalmente. A vantagem do transform que ele
rpido, principalmente em mobile, por ser resolvido na GPU e ter acelerao de
hardware. A animao feita com a propriedade transition, onde controlamos tempo
e tipo de efeito.
Mais alguns ajustes so necessrios. Vamos posicionar fora da tela a imagem no
selecionada, para depois anim-la para dentro quando selecionar. Para evitar um scroll
lateral, precisamos de um overflow-x:hidden.
html,
body {
overflow-x: hidden;
width: 100%;
}
.container-menus {
transform: translateX(0);
transition: transform 300ms ease;
width: 200%;
}
.container-menus .menu {
float: left;
width: 50%;
}
#opcao-bebidas:checked ~ .container-menus {
transform: translateX(-50%);
}

Teste novamente para ver o efeito no navegador. Exporte novamente no PhoneGap

Build, instale no aparelho Android e teste o efeito.