Aplicação usada como exemplo:
http://itunes.apple.com/app/zeroes/id368251065?mt=8
Havia prometido o tutorial e finalmente chegou o dia. Vamos ver se conseguimos fazer as 3 partes em 3 dias consecutivos. Talvez, você que esperou tanto tempo esteja se perguntando porque ele demorou tanto para fazer o tutorial? Demorei porque esperei o programa que vou usar como modelo ficar aprovado na loja da Apple, o tempo de revisão é de 5 a 7 dias e hoje pela manhã ele foi publicado. Este programa que vou usar como modelo chamado Zeroes é um jogo de raciocínio que custa US$ 0.99 (você gostará tanto do tutorial que vai comprar ele, não vai?)
O caminho convencional de desenvolvimento para o IPhone é usando o compilador XCode com a linguagem Objective-C (que de C aliás tem muito pouco), este caminho não é acessível a todos os desenvolvedores e tem uma curva de aprendizado bastante lenta. O outro caminho, aprovado pela Apple, é o do desenvolvimento Web com Javascript + HTML5 + CSS3. No entanto o desenvolvimento Web não permite que o aplicativo seja vendido na loja da Apple a menos que você compile ele em um executável e este é o objetivo do tutorial.
Agora que você já comprou a aplicação, vai 0,99 obamas não aleijam ninguém e o Zeletron tem que pagar o leitinho das crianças :), vamos começar a desenvolver nosso exemplo como uma aplicação Web. Na parte II do tutorial veremos como compilar e na parte III veremos como ter o programa aprovado na ITunes App Store no menor tempo possível e sem risco de ter ele rejeitado.
Para desenvolver a parte Web há várias bibliotecas já com os estilos parecidos com o do IPhone, eu recomendo que você use uma chamada jQTouch que tem um visual muito bonito, tem todos os efeitos de uma interface nativa e é bem rápida.
Para começar a usar o jQTouch você precisa fazer download dele e seguir três passos rápidos:
1) Adicionar as seguintes linhas ao header do seu HTML:
<script src="jqtouch/jquery-1.4.2.min.js" type="application/x-javascript" charset="utf-8"> </script> <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"> <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> |
2) Antes do evento onload da página inserir o seguinte código:
$.jQTouch({ icon: 'jqtouch.png', // opcional esta linha statusBar: 'black-translucent', preloadImages: [ 'themes/jqt/img/chevron_white.png', 'themes/jqt/img/bg_row_select.gif', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png' ] }); |
3) No corpo do HTML incluir tudo que sera jQTouchizado dentro de
<div id="jqt"></div> |
Recomendo que para visualizar, você use o Safari (pode ser o para Windows mesmo). Caso você queira uma visualização menos fiel ao que vai sair pode usar o Chrome.
Vencidas estas etapas vamos ao nosso aplicativo de exemplo. O Zeroes (que você já comprou e já jogou até) tem como objetivo transformar todos os botões em Zero. Cada botão tem um número e ao clicar num deles você subtrai um do valor do botão e dos quatro vizinhos dele. Subtraindo um de 0 faz você obter 3 e não -1. Simples não? Mais ou menos. Há oito níveis no jogo (Anta, Bobinho, Muito Fácil, Fácil, Normal, Difícil, Muito Difícil, Master e Jedi) acho que acima de muito difícil a coisa é complicada mesmo.
O jogo pode ser todo feito em Javascript, uma implementação de exemplo pode ser encontrada em: http://javascript.internet.com/games/button-mania.html como eu já estava usando jQuery acabei fazendo toda a lógica do jogo em jQuery, mas você pode usar o link que eu indiquei para se inspirar.
O importante quando se trabalha com o jQTouch é que cada página do aplicativo é um div numa posição hierárquica inferior ao id=”jqt”:
<div id=jqt"> <div id="pagina1"> <p> pagina 1 aqui </p> <a class "button flip" href="#pagina2">Mudar para a 2</a> </div> <div id="pagina2"> <p> pagina 2 aqui </p> <a class "button flip" href="#pagina3">Mudar para a 3</a> </div> <div id="pagina3"> <p> pagina 3 aqui </p> <a class "button flip" href="#pagina1">Mudar para a 1</a> </div> </div> |
A class “button flip” é uma das classes de botões que o jQTouch possui. Nesta classe você tem um botão que ao ser clicado levará para uma outra página com o efeito de flip na página que entra.
Feito isto você pode juntar tudo num arquivo HTML e verificar no browser seu exemplo.
Antes de prosseguir algumas observações: a documentação do jQTouch (http://code.google.com/p/jqtouch/w/list) não é tão civilizada assim, portanto deixo a área de comentários aberta para caso você tenha dúvidas. Outra observação: na hora de fazer uma app para valer baixe a versão mais recente do jQTouch (http://code.google.com/p/jqtouch/source/checkout) e não a que é oferecida para download.
Desta forma o header de nossa app Zeroes ficou assim:
<html> <HEAD> <title>Zeroes</title> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script src="jqtouch/jquery-1.4.2.min.js" type="application/x-javascript" charset="utf-8"> </script> <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"> </script> <script type="text/javascript" charset="utf-8" src="meujogo_zeroes.js"> </script> <style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.css";</style> <script type="application/x-javascript"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', statusBar: 'black-translucent', preloadImages: [ 'themes/jqt/img/chevron_white.png', 'themes/jqt/img/bg_row_select.gif', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png' ] }); </script> <style type="text/css"> #board table { margin-left: auto; margin-right:auto; } .score { font-size:1.2em; padding: 12px; color: #eee; } </style> </HEAD> |
Já o corpo da app sem a lógica do jogo que está no arquivo meujogo_zeroes.js fica assim:
<BODY onLoad="doOnload()"> <div id="jqt"> <div id="board"> <div class="toolbar"> <h1>Play</h1> <a class="button flip" href="#settings"> ... </a> </div> <div> <div style="height:40px"> <p class="score">Clicks used: <span id="clicksForm">0</span> </p> </div> |
O tabuleiro:
<table id="playform" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img id="img0" src="0.png" width=48 onClick="buttonMove('0-0')"></td> <td><img id="img1" src="0.png" width=48 onClick="buttonMove('1-0')"></td> <td><img id="img2" src="0.png" width=48 onClick="buttonMove('2-0')"></td> <td><img id="img3" src="0.png" width=48 onClick="buttonMove('3-0')"></td> <td><img id="img4" src="0.png" width=48 onClick="buttonMove('4-0')"></td> <td><img id="img5" src="0.png" width=48 onClick="buttonMove('5-0')"></td> </tr> <tr> <td><img id="img6" src="0.png" width=48 onClick="buttonMove('0-1')"></td> <td><img id="img7" src="0.png" width=48 onClick="buttonMove('1-1')"></td> <td><img id="img8" src="0.png" width=48 onClick="buttonMove('2-1')"></td> <td><img id="img9" src="0.png" width=48 onClick="buttonMove('3-1')"></td> <td><img id="img10" src="0.png" width=48 onClick="buttonMove('4-1')"></td> <td><img id="img11" src="0.png" width=48 onClick="buttonMove('5-1')"></td> </tr> <tr> <td><img id="img12" src="0.png" width=48 onClick="buttonMove('0-2')"></td> <td><img id="img13" src="0.png" width=48 onClick="buttonMove('1-2')"></td> <td><img id="img14" src="0.png" width=48 onClick="buttonMove('2-2')"></td> <td><img id="img15" src="0.png" width=48 onClick="buttonMove('3-2')"></td> <td><img id="img16" src="0.png" width=48 onClick="buttonMove('4-2')"></td> <td><img id="img17" src="0.png" width=48 onClick="buttonMove('5-2')"></td> </tr> <tr> <td><img id="img18" src="0.png" width=48 onClick="buttonMove('0-3')"></td> <td><img id="img19" src="0.png" width=48 onClick="buttonMove('1-3')"></td> <td><img id="img20" src="0.png" width=48 onClick="buttonMove('2-3')"></td> <td><img id="img21" src="0.png" width=48 onClick="buttonMove('3-3')"></td> <td><img id="img22" src="0.png" width=48 onClick="buttonMove('4-3')"></td> <td><img id="img23" src="0.png" width=48 onClick="buttonMove('5-3')"></td> </tr> <tr> <td><img id="img24" src="0.png" width=48 onClick="buttonMove('0-4')"></td> <td><img id="img25" src="0.png" width=48 onClick="buttonMove('1-4')"></td> <td><img id="img26" src="0.png" width=48 onClick="buttonMove('2-4')"></td> <td><img id="img27" src="0.png" width=48 onClick="buttonMove('3-4')"></td> <td><img id="img28" src="0.png" width=48 onClick="buttonMove('4-4')"></td> <td><img id="img29" src="0.png" width=48 onClick="buttonMove('5-4')"></td> </tr> <tr> <td><img id="img30" src="0.png" width=48 onClick="buttonMove('0-5')"></td> <td><img id="img31" src="0.png" width=48 onClick="buttonMove('1-5')"></td> <td><img id="img32" src="0.png" width=48 onClick="buttonMove('2-5')"></td> <td><img id="img33" src="0.png" width=48 onClick="buttonMove('3-5')"></td> <td><img id="img34" src="0.png" width=48 onClick="buttonMove('4-5')"></td> <td><img id="img35" src="0.png" width=48 onClick="buttonMove('5-5')"></td> </tr> </table> |
Outros Widgets:
</div> <ul class="individual"> <li style="color:#fff" onClick="buttonNew()"> Novo Jogo</li> <li style="color:#fff" onClick="buttonUndo(1);"> Desfazer ultimo</li> </ul> </div> <div id="settings"> <div class="toolbar"> <h1>Configurar</h1> <a class="button flip" href="#help"> ? </a> <a class="back" href="#">Voltar</a> </div> <div> <form name"dummy" action=""> <ul class="edit rounded"> <li> <span>Nível:</span> <select id="Difficulty" onChange="buttonNew()"> <option value=0>Anta</option> <option value=1>Bobinho</option> <option value=2>Bem fácil</option> <option value=3>Fácil</option> <option value=4 selected>Normal </option> <option value=5>Difícil</option> <option value=6>Muito Difícil</option> <option value=7>Master</option> <option value=8>Jedi</option> </select> </li> </ul> </form> <ul class="individual"> <li><a class="flip" href="#help">Ajuda</a></li> <li><a class="flip" href="#sobre">Sobre</a></li> </ul> </div> </div> <div id="help"> <div class="toolbar"> <h1>Help</h1> <a class="back" href="#">Voltar</a> </div> <ul class="plastic"> <li> <span style="color:#fff">Como jogar</span>:<br/> Clicando num botão você subtrai um daquele botão e dos 4 botões adjacentes.<br/> <span style="color:#fff">Objetivo</span>:<br/> Mudar todos os botões para '0'.<br/> </li> <li> <span style="color:#fff">Exemplo</span> (um clique no "2" do meio):<br/> <center><img src="iii.png"><center> </li> </ul> </div> <div id="fim"> <div class="toolbar"> <h1>Ajuda</h1> <a class="button flip" href="#regras"> ? </a> <a class="back" href="#">Voltar</a> </div> <ul class="plastic"> <li> <span style="color:#fff">Parabéns: Terminou em </span><span id="resultmove" style="color:#ff0"> </span><span style="color:#fff"> movimentos</span> </li> </ul> </div> <div id="sobre"> <div class="toolbar"> <h1>Sobre</h1> <a class="back" href="#">Voltar</a> </div> <ul class="plastic"> <li> <span>Powered By:</span> <a href="http://www.netfilter.com.br" target="_blank"> www.netfilter.com.br</a> </li> </ul> </div> </div> </body> </html> |
Um comentário sobre este código:
Dentro do div de cada uma das páginas há um:
<div class="toolbar"> <h1>Play</h1> <a class="button flip" href="#settings"> ... </a> </div> |
A finalidade disto é criar o header da app como uma aplicação nativa do IPhone.
Acho que já ficou mais longo que queria com 12076 toques. Continuamos amanhã. Caso você queira começar a brincar com o jQTouch há vários exemplos junto com o download do mesmo e é possível visualizá-los no Chrome ou no Safari.
Espero que você consiga completar pelo menos o nível anta da App. 😉
10 comentários em “Desenvolvendo para IPhone sem Objective-C (Parte 1/3)”