Olá novamente galera!
Hoje iremos abordar o tópico mais importante sobre o PhoneGap, que é a programação do conteúdo do nosso aplicativo, em HTML.
Aprenderemos a criar um protótipo de aplicação, a projetá-la propriamente dito e também a simular o nosso projeto em diversos dispositivos móveis através do próprio Desktop.
Protótipo
Um programador em HTML pode muito bem atacar o problema diretamente, codificando a estrutura do aplicativo, mas veremos que é possível criar protótipos com ferramentas disponíveis na Web, de forma a predefinir o que iremos implementar em nosso código.Neste site, temos 20 indicações para a prototipagem (wireframing) de aplicações mobile: http://mashable.com/2013/04/02/wireframing-tools-mobile/
Para este tutorial, escolhi arbitrariamente o MockFlow: http://www.mockflow.com.
Não, o protótipo não pode ser convertido em um arquivo HTML, mas nos ajuda a organizar nossas ideias antes de colocá-las na prática, como um esboço do nosso programa.
O design gráfico
"Como o HTML 5 fornece muita liberdade para o desenvolvedor construir interfaces, muitas vezes fica difícil adequar esta interface aos padrões. Existem frameworks que ajudam os desenvolvedores a se adequarem a esses diferentes padrões de interfaces que existem.
Dois desses frameworks são o Ionic e o Ratchet. O Ratchet é o mais simples deles bastando utilizar as suas classes para que a nossa interface seja formatada."
Leia mais em: Projetando e criando Aplicativos para Dispositivos Móveis http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671#ixzz3a8qQysbl
Seguindo os passos do mestre, vamos baixar o Ratchet, conforme a imagem abaixo:
Basta agora descompactar o arquivo .zip e copiar a pasta "dist" para o diretório [www] do nosso projeto, conforme demonstrado no site do devmedia.
Vamos testar o poder desta fabulosa criatura? Vamos usar o próprio código do site do Ratchet para testar o seu potencial. Substitua o código index.html do seu projeto por este abaixo:
------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ratchet template page</title> <!-- Sets initial viewport load and disables zooming --> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> </head> <body> <!-- Make sure all your bars are the first things in your <body> --> <header class="bar bar-nav"> <h1 class="title">Ratchet</h1> </header> <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --> <div class="content"> <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p> <div class="card"> <ul class="table-view"> <li class="table-view-cell"> <a class="push-right" href="http://goratchet.com"> <strong>Ratchet documentation</strong> </a> </li> <li class="table-view-cell"> <a class="push-right" href="https://github.com/twbs/ratchet/"> <strong>Ratchet on Github</strong> </a> </li> <li class="table-view-cell"> <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet"> <strong>Ratchet Google group</strong> </a> </li> <li class="table-view-cell"> <a class="push-right" href="https://twitter.com/goratchet"> <strong>Ratchet on Twitter</strong> </a> </li> </ul> </div> </div> </body> </html>
------------------------------------------------------------------------------------------------
Código HTML
Abra o aplicativo do PhoneGap em seu celular (Aquele que você baixou pela loja virtual, lembra?), insira o número do servidor disponibilizado pelo seu Desktop, conforme explicado na parte 2 deste tópico. Você também pode abrir o arquivo index.html no seu navegador Browser.
Uma forma alternativa de testar o design gráfico do seu projeto é utilizando o site MobileTest.me, que permite prever a visualização do site em diversos aplicativos móveis: http://mobiletest.me/
Enfim, você deverá ver uma formatação deplorável para o seu aplicativo. Sentirá vontade de chorar e desistir desse projeto, depois de tudo o que aprendeu até agora.
Mas acalme-se, eu tenho (ou melhor, Ratchet tem) as palavras mágicas para salvar o visual do seu projeto. O include da framework Ratchet pode ser feito logo após a cláusula <head>, adicionando:
<link href="dist/css/ratchet.css" rel="stylesheet">
<script src="dist/js/ratchet.js"></script>
Muito bom! O seu aplicativo agora deve ter ficado muito show!
"Existem ainda diversas outras classes que podemos utilizar e aprimorar ainda mais nossa aplicação HTML 5 sem nenhum esforço adicional. Essas classes podem ser encontradas na documentação do Ratchet e são exemplificadas na página http://goratchet.com/components/.
Para transformarmos nosso aplicativo HTML em um aplicativo híbrido precisamos adicionar algumas configurações ao código, essas e muitas outras informações são encontradas na página do Ratchet."
Leia mais em: Projetando e criando Aplicativos para Dispositivos Móveis http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671#ixzz3a8v9ZQU9
O código
Que tal enfim construir uma aplicação para PhoneGap?
Comecei tornando o código um pouco mais enxuto, abrindo espaço para adicionar novas estruturas em nosso programa HTML:
------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <link href="dist/css/ratchet.css" rel="stylesheet"> <script src="dist/js/ratchet.js"></script> <meta charset="utf-8"> <title>Ratchet template page</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> </head> <body> <header class="bar bar-nav"> <h1 class="title">Meu Aplicativo</h1> </header> <div class="content"> <p class="content-padded">Bem vindo ao meu primeiro Projeto.</p> <div class="card"> <ul class="table-view"> <li class="table-view-cell"> <a class="push-right" href="http://javadivertido.blogspot.com.br"> <strong>Java Divertido</strong> </a> </li> </ul> </div> </div> </body> </html>
------------------------------------------------------------------------------------------------
Código HTML enxuto.
Vamos agora adicionar um formulário para a inserção de dados. Observe que o código html é bem intuitivo e parecido com o estilo de programação a que estamos acostumados:
------------------------------------------------------------------------------------------------(...)
<p class="content-padded">Bem vindo ao meu primeiro Projeto.</p> <form name="calculo" class="form input-group"> <label for="X">X:</label> <input type="text" name="X" placeholder="Digite X:"/><br /> <label for="Y">Y:</label> <input type="text" name="Y" placeholder="Digite Y"/><br /> <input class="btn" type="button" value="Calcular" onClick="calcular()" /> <label for="R">Resultado:</label> <input type="text" name="resul" size="5" readonly /> <label for="M">Multiplicação:</label> <div id="resultado"></div> </form> <div class="card">(...)
------------------------------------------------------------------------------------------------
Código HTML adicionado.
Tendo a estrutura (o corpo do nosso programa) em HTML, basta criarmos agora um arquivo .js (javascript) e programarmos a função que será executada ao clicar o botão, responsável por dividir e multiplicar, exibindo depois a resposta em nosso aplicativo:
Eu criei o arquivo na pasta [js], por isso, no include deste arquivo, realizado na parte <head> do arquivo html, teremos:
<script src="js/calculo.js"></script>
------------------------------------------------------------------------------------------------
function calcular(){ var X = Number(document.calculo.X.value); var Y = Number(document.calculo.Y.value); var Div = X/Y; var resultado = 'A divisão deu ' + Div; var mult = 'A multiplicação deu ' + X*Y +'</br></br>'; document.calculo.resul.value = resultado; document.getElementById('resultado').innerHTML = mult; }
------------------------------------------------------------------------------------------------Código Javascript adicionado.
Testando o nosso programa no site http://mobiletest.me/
(Lembrando que o endereço a ser inserido é algo do tipo http://192.168.0.19:3000)
Se você quiser testar o aplicativo em seu próprio dispositivo Android, disponibilizei o link do App para download, logo abaixo:
Sentiu um pouco do poder desta ferramenta? Assim encerramos com sucesso a parte 3 deste pequeno tutorial sobre o PhoneGap. Espero que faça bom proveito de seus novos superpoderes.
Conclusão
Depois desta série de 3 posts sobre a framework PhoneGap, considere-se apto para iniciar o desenvolvimento do seu aplicativo. Você já conta com as ferramentas básicas para trabalhar, conhecimento da linguagem de programação empregada, tem informações sobre como melhorar o design gráfico e aprimorar o seu conhecimento.
Agora está na hora da diversão! @javadivertido
Referências:
[PhoneGap - Referências passadas]
http://www.mobiltec.com.br/blog/index.php/tutorial-de-phonegap-primeiros-passos/
http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671
http://coenraets.org/blog/phonegap-tutorial/
http://www.mobiltec.com.br/blog/index.php/tutorial-de-phonegap-primeiros-passos/
http://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671
http://coenraets.org/blog/phonegap-tutorial/
[PhoneGap - Vídeo Aulas]
Nenhum comentário:
Postar um comentário