Primeiras aulas do curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

Primeira App com PhoneGap Build - Porque Cordova

Iremos falar neste curso sobre o Cordova. O nosso objetivo é desenvolver aplicativos mobile novos. Quando pensamos no cenário atual de aplicativos, temos uma imagem um pouco desoladora. As plataformas mais famosas são 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, além da manutenção e outros fatores. Várias questões que não tornam viável. Porém, todas estas plataformas, além de suportarem aplicativos nativos nas diversas linguagens, elas têm 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 princípio, a Web tem esta característica multiplataforma já.

Será que nós não conseguiremos usar o conceito de multiplataforma da Web para desenvolver app? Web não é app... Mas se precisarmos desenvolver um app, teremos que procurar soluções 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 código e o nosso aplicativo irá rodar em todas as plataformas. Não será Web, mas efetivamente um aplicativo.

Vamos fixar estas ideias... O Cordova irá permitir que você escreva o código HTML, CSS ou JS, da maneira como estiver acostumado a fazer na Web. Existirão algumas diferenças que trataremos mais adiante, mas será o mesmo código 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 instalável nos sistemas operacionais móvel, 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, usávamos na Web.

Na verdade, não 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, porém fora de um navegador. Isto significa que não teremos barra de endereço, botões de voltar, menu... Não precisamos mais da interface do navegador, sobrando apenas uma espécie de "renderizador" de HTML. Esta é a definição de WebView.

O que o Cordova irá fazer por nós? Ele irá criar a WebView da plataforma, jogará o HTML dentro e executará o código. Como não estamos rodando em um navegador, isto significa que o HTML funcione como um app realmente, sem as característica do navegador na plataforma. Quais as vantagens disto?

Teremos um app instalável, publicável na loja (e com todas as vantagens que correspondem), porém implementada com um código plataforma.

Nós falamos até aqui de Cordova, mas e PhoneGap? Do que se trata?

Nós veremos mais detalhes sobre os dois, durante o curso. Mas para começar, o PhoneGap é o precursor do Cordova. Quando o projeto foi criado há muitos anos, o nome recebido foi PhoneGap. Então, a Adobe comprou a empresa e doou o código 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, são serviços e funcionalidades a mais para o próprio Cordova. Podemos afirmar que ele é 90% Cordova, porém com algumas características proprietárias a mais e os serviços oferecidos são bastante úteis.

A princípio o que veremos é Cordova com alguns detalhes de PhoneGap.

Vamos esclarecer um detalhe sobre a plataforma: Cordova não é Web. Por que falamos isto? É comum encontrarmos pessoas que afirmem que o Cordova é Web através de App, um conceito bastante misturado. Na verdade, os dois possuem semelhanças, porque utilizam a mesma linguagem de programação (HTML, CSS e JS). Mas o Cordova está mais próximo de um aplicativo do que de uma Web. Por exemplo, ela não se encontra disponível na internet, não possui uma URL, nem tem links que possam me direcionar para algum recurso. Vantagens da Web - como estar indexada no Google - também não possuímos, 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 específicos nativos de hardware do aparelho. Todos recursos que temos acesso em um app, teremos no Cordova. Logo, o Cordova tem mais característica semelhantes a um aplicativo do que a Web, a semelhança. 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 é híbrido (mistura HTML com app)? Quais são as vantagens e desvantagens de cada um?

O híbrido irá trazer grandes vantagens no desenvolvimento, porque iremos economizar dinheiro ao criar um único código 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 usuário, não deve existir diferenças. Ele irá instalar e utilizar os apps nativos ou híbridos da mesma forma. E existe diferença de performance? Sim. Se o seu projeto demandar muita performance, que tenha muitos detalhes, realmente o nativo pode ser um melhor desempenho. Porém, na maioria dos casos, a performance do nativo e híbrido são equivalentes. Mas sabemos que existem aplicativos ruins em ambos cenários. Talvez, a única distinção perceptível é que alguns aplicativos nativos têm a opção de usar os componentes padrões da plataforma que eles estão rodando. Com um aplicativo híbrido, você terá mais dificuldade. Como iremos implementar com CSS, HTML, geralmente, termos um design que será aplicado a todas as plataformas. Então, não conseguiremos fazer um design CSS com características de OS, porque no Android teremos um resultado bizarro. Geralmente, iremos fazer um design multiplataforma, que rodará em vários lugares. Esta é uma vantagem do híbrido.

A escolha entre um nativo ou híbrido é mais uma escolha de implementação, do que algo que seja perceptível para o usuário. Para ele, não haverá diferenças e ambos serão usados normalmente.

Primeira App com PhoneGap Build - Nossa Primeira App

Vamos criar o nosso primeiro aplicativo híbrido com HTML e CSS no Cordova. Iremos trabalhar com o restaurante Só de Cenoura que vende apenas bolo de cenoura e produtos do gênero.

Eles possuem um estabelecimento, que utiliza cardápios impressos com todas as opções para os clientes. Com isto, eles têm todos os problemas clássicos do mundo offline: quando existe alguma opção de preço ou nos pratos, eles precisam imprimir novamente os cardápios. O mesmo acontece quando o cardápio fica desgastado, além de dificuldade com os pedidos. Eles gostariam de modernizar o seus cardápios e nos convidaram para desenvolver algumas apps.

O primeiro cenário que resolveremos, será o do cardápio. Iremos criar uma versão digital para disponibilizar para os clientes do local, sem nenhuma função complicada, apenas para a visualização do cardápio. Assim poderemos otimizar a atualizações do cardápio, sem precisar reimprimi-lo frequentemente.

Eles disponibilizaram as folha do cardápio. São duas imagens feitas no Photoshop. Em uma das páginas temos diversas opções de bolos e em outra, teremos as bebidas oferecidas como café, chá e sucos. Este é o cardápio impresso atual.

Nosso primeiro passo será transformar isto em um app utilizando o Cordova, que irá permitir que o usuário visualize o cardápio. Quando forem necessárias atualizações, apenas faremos alterações nos arquivos das imagens.

Observe que estamos usando o Sublime como editor e que criamos o projeto cenoura. Nós incluímos as imagens do Menu e dois ícones (arquivos com extensão .svg) para as opções do cardápio.

O que precisamos fazer? Uma app Cordova é baseada e HTML, CSS e JS - ele trabalha como uma Web, porém dentro de um app. Iremos criar um arquivo index.htmlao HTML, em que criaremos nossa página.

Começaremos a criar o nosso arquivo, com uma estrutura básica incluindo o DOCTYPE html, meta e o título Só de Cenoura.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Só de Cenoura</title>
</head>
<body>

</body>
</html>

Vamos começar a implementar esta HTML. Antes, precisamos lembrar que estamos trabalhando com um app mobile que irá rodar como em um navegador móvel no celular. Então, 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 código ficará assim:

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

</body>
</html>

Quem já trabalhou com design responsivo, viu esta meta tag várias vezes. Ela permitirá que o design que criaremos em HTML e CSS se adapte a resolução (a largura) da tela do dispositivo. Terá um uso padrão em todos os designs responsivos.

Agora, queremos que o app mostre as duas imagens do cardápio e que permita o usuário 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 serão ú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 também teremos o menu bebidas. Iremos adicioná-la no código também:

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

Os dois terão a classe menu, mas idsdiferentes.

O nosso código está assim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=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 é possível visualizar a página 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 opção de escolher um dispositivo, por exemplo, o Google Nexus 5 e nós poderemos como a página será visualizada no aparelho.

Não 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 título.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=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 não 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 visualização do projeto está melhor.

As imagens estão posicionadas uma embaixo da outra. O aplicativo está feio, mas já é "usável".

De volta ao HTML, detalharemos no código que não queremos que as duas imagens apareçam simultaneamente. Através de um menu, o usuário tenha a opção 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 opção 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 alterações feitas até agora.

Temos labels com input, em que nos permite clicar nas opções "Bolos" e "Bebidas". Mas ainda não fazemos nada com isto. Queremos que quando clicamos na opção "Bolos", ele mostre apenas o cardápio de bolos e faça o mesmo com a opção de "Bebidas". Faremos isto com um CSS puro.

Na aba de index.html do terminal, iremos especificar no código que ele deve esconder a imagem que não está selecionada. Por exemplo, se tivermos a opção "Bolos" selecionada no app, queremos que o cardápio de bebidas fique oculto. Queremos que o contrário aconteça quando selecionarmos "Bebidas": o cardápio de bolo não deve aparecer. Na aba CSS conseguiremos fazer isto com alguns seletores avançados. Vamos criar isto no código.

Se tivermos a opcao-bolos selecionada usaremos a opção 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 pedaço (opcao-bolos) da linha é irmão do segundo (menu-bebidas). Se retornarmos ao nosso HTML, veremos que todas nossas tags são irmãs. Isto significa que quando tivermos uma opção marcada, a tag irmã usará um display: none. Em seguida, testaremos se o código funciona:

Se marcarmos a opção "Bolos" no menu, o aplicativo irá esconder o cardápio de "Bebidas". Mas se selecionarmos "Bebidas", o cardápio de bolos ainda estará visível. 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 cardápio de bolos irá desaparecer.

Outra melhoria que podemos fazer é que, por padrão, a opção "Bolos" venha selecionada, quando o aplicativo carregar pela primeira vez. Assim, ele exibirá apenas o primeiro cardápio.

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 opção Bolos selecionada e depois, podemos trocar para o próximo cardápio. 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 também 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 mudanças.

Observe que o menu está localizado no meio, temos um design sem margem, com a cor do fundo que combina.

Próximo passo será incluir melhorias no label. Iremos mover o menu para a parte de baixo do aplicativo. Ele também será colorido e com ícones, sem as atuais bolinhas azuis.

Faremos as alterações no CSS, por partes. Começaremos tirando o input radio com display: none. Com isto, o nosso clique continuará funcionando e não será quebrado.

input[type=radio] {
    display: none;
}

Acrescentaremos as novas linhas abaixo do body no código.

body {
    background: #3D1A11;
    margin: 0;
    font-family: sans-serif;
    texte-align: center;
}

input[type=radio] {
    display: none;
}

Mesmo que o inputesteja escondido, o próprio label já é clicável no HTML.

Também iremos fazer alterações 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 espaço entre os labels. Para isto, voltaremos a aba estilo.css e na parte referente ao label do nosso código, pegaremos o da opcao-bolos terá um background-image com a URL do ícone da opção "Bolos".

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

}

Faremos o mesmo com o ícone da opção "Bebidas".

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

}

O código 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 mudanças.

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. Porém, não 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 opção de juntarmos todos os backgrounds em uma única propriedade.

Agora os ícones estão 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 opção de bebidas deverá ter um checked.

Então 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 também um seletor de irmãos 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 sequência do input. Se for o input da opção de bolos, usaremos o label relacionado com ele. Se for o input da opção 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 não acrescentarmos o checked, os dois radios ficarão pintados.

O labelselecionado terá uma cor diferente.

Agora, queremos mover os labels para baixo e deixá-los lado a lado.

Vou especificar a posição do menu, com definindo que cada um ocupe uma largura de 50%, assim eles dividirão a tela, que fiquem na parte debaixo, usaremos o bottom igual a 0. Também quero que ele apareça sobre as imagens do cardápio, 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 posição. Porém, os dois ícones estão um sobre o outro.

Precisamos posicioná-los corretamente. Faltou especificar no código que um precisa ficar à esquerda (left) e o outro à direita (right).

label[for=opcao-bolos] {
    left:0;

}

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

Agora, os botões "Bolos" e "Bebidas" estão lado a lado.

Está é o nosso primeiro app. Ele não é 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.

Primeira App com PhoneGap Build - PhoneGap Build e Execução

Terminamos de criar nosso app. Iremos agora transformá-lo efetivamente em um aplicativo mobile. A princípio, funcionará apenas para Android, porque ele é mais simples de trabalhar, e a instalação é mais fácil.

Quando trabalhamos com Cordova, temos o HTML e CCS que desenvolvemos, porém para transformarmos isto em um app é trabalhoso. Um aplicativo é nativo do sistema, o que significa que quando formos colocar na loja precisaremos de uma série de recursos específicos 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 começo, existem algumas facilidades como o PhoneGap Build. O PhoneGap é um produto da Adobe, com base no Cordova, mas com alguns serviços 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 máquinas e através 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 múltiplas plataformas... O serviço é pago, mas oferece uma opção de plano gratuito que já será o bastante para o nosso aplicativo.

Para utilizar o serviço, você precisará de um cadastro. Ele irá te pedir uma senha da Adobe ID. Eu já tenho meu cadastro, poderemos seguir para a próxima página.

Nós temos a opção de fazer infinitas apps open-source ou apenas uma privada. Com a open-source precisaremos trabalhar com o Github. Nós 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 vários ícones. Criaremos um arquivo zipado com todos estes elementos e depois, subiremos para o PhoneGap Build. Abriremos a pasta onde estão 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. Após selecionar o arquivo, clicamos em open e ele começará a fazer o uploading. Aguardaremos um pouco, ele indicará que importou o arquivo e depois, clicaremos em Ready to Build.

Agora, ele irá "buildar" o aplicativo em três plataformas que ele suporta por padrão (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 não 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 nós geramos no computador. Ele pedirá permissão para fazer o download, daremos "OK" e o arquivo será baixado. Depois, faremos a instalação.

Para fazer o download de um aplicativo fora da loja, teremos que ir até as "Configurações" do seu celular, até me "Segurança".

Iremos até a opção "Fontes desconhecidas". Com isso, poderemos abrir a instalação para aplicativos fora da loja. Aparecerá uma mensagem de segurança, mas o nosso aplicativo é seguro e podemos desabilitar a opção. Ele fará o processo de instalação 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, também 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 fácil de "buildar" o app, tornando desnecessário a configuração da geração de ambiente do Android ou iOS no computador. Podemos usar o serviço da Adobe, que tem a opção gratuita, simples de trabalhar.

Sobre o curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

O curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS possui 210 minutos de vídeos, em um total de 90 atividades. Gostou? Conheça nossos outros cursos de Multiplataforma em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Multiplataforma acessando integralmente esse e outros cursos, comece hoje!

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana