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]
Conclusão do Projeto
Conforme descrito no Plano de Projeto, hoje concluímos com sucesso o Projeto Anima, referente ao jogo de tiro Bizuca. O código completo do projeto e o executável do jogo foram disponibilizados no link abaixo:
https://gist.github.com/ftuyama/6a7fa3a15db4d8407788
https://www.sendspace.com/file/okwetg
Comentários sobre o projeto:
Como principal mudança na versão final do programa temos a criação de uma interface gráfica para o software (GUI - Graphic User Interface). A tarefa transcorreu de forma simples e com poucas modificações do problema, tendo em vista que a implementação do programa considerou desde o início as especificações de uma interface, porém sem se preocupar com ela.
Apenas tivemos de relacionar os elementos de uma interface (botões, abas, elementos de texto) às respectivas funções já bem implementadas até o momento, não sendo necessária quase nenhuma modificação do código.
1) Bizuca.java (Main) - 20 linhas
Classe responsável pela criação do JFrame do jogo. Sem alterações.
2) Fase.java - 55 linhas
Classe responsável pela criação da fase e identificação da região de parede e da região do chão, permitindo o jogador/bots/tiros se locomoverem através do cenário.
3) Figura.java - 170 linhas
Classe responsável pelas figuras e suas propriedades no jogo, como por exemplo os bots e o próprio jogador. Foram adicionadas novas variáveis e funcionalidades, em relação à versão passada.
4) Musica.java - 35 linhas
Essa classe surgiu como uma tentativa de descentralizar o código da classe Game.java, que estava se tornando muito grande. Conforme o desenvolvimento do projeto continue, pode ser interessante fragmentar suas funcionalidades de mouse, inteligência artificial, desenho, etc. Em classes menores e especializadas.
5) Game.java - 500 linhas
É a classe faz tudo do jogo, que acabou centralizando todos os processos por se responsabilizar pela pintura do JPanel onde ocorre o jogo. Neste sentido, acabou se encarregando do controle e do sistema de colisão, até mesmo o controle das inteligências artificiais. Sua novas funcionalidades são listadas abaixo:
[AI - Inteligência Artificial]
Os bots tem autonomia de decisão e bom senso no sentido de melhorar a experiência de jogo. Possuem recursos de visão para detecção do jogador, que engatilha o método responsável pelo tiro. Os bots também detectam paredes, o que provoca uma mudança do seu ângulo de visão e consequente desvio dos obstáculos do cenário.
[TE - Eventos Temporais]
Dentre eles, o aparecimento de munição adicional na fase, morte por limite de tempo e regeneração da vida do jogador ao longo do tempo, tornando o jogo muito mais desafiador.
[Cenário editado]
Melhorias do gráfico do cenário, com mais cores e tornando o ambiente de jogo mais agradável.
[Telas de vitória e derrota]
Agora o jogo conta com telas de vitória e de derrota, permitindo ao jogador ter a experiência completa de um jogo. Recursos auditivos (músicas e sons) também aprimoram o jogo nesta nova versão.
Conclusões:
Apesar das muitas dificuldades encontradas durante o projeto, como a de programação de recursos de imagens em baixo nível, tendo de implementar sistemas de colisão, inteligência artificial para a implementação da visão e a decisão dos bots, calibragem das variáveis para o correto funcionamento do jogo, esforços delongados para otimizar o jogo e deixá-lo mais rápido e compacto, o projeto Anima finalmente encontra o seu fim. Trazemos algumas ideias para a sua melhoria no futuro:
[Ideias para melhoria do software no futuro]:
-> Melhoria da programação, com otimizações do código e do sistema de uso de imagens (Uso de API's específicas para jogos).
-> Melhoria do desempenho do jogo, aumentando sua velocidade e diminuindo seu uso de memória.
-> Aprimoramento da rústica inteligência artificial utilizada, introduzindo fundamentos teóricos em sua criação.
-> Criação de um ambiente de jogo em rede, permitindo a ocorrência de jogos online.