Desenvolvendo para IPhone sem Objective-C (Parte 1/3)

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. 😉

Comments on this entry are closed.

  • CAV

    Parabéns pelo tutorial. Não uso mac nem iphone, mas compartilhar conhecimento é sempre louvável.
    Abraços.
    Carlos

  • Parabéns pela iniciativa.
    Como escreveu o colega, compartilhar conhecimento é sempre louvável.
    Antes de por a mão na massa vou:
    1) adquirir o app Zeroes via Ipod Touch;
    2) utilizo ubuntu 9.10, portanto para visualizar o fruto de meu aprendizado visualizo apenas três opções:
    – instalar o safari via wine;
    – instalar o chrome
    – instalar o webkit no linux.
    Correto?

    Abraço
    Marco Aurélio

  • Pedro Paulo

    No Ubuntu você vai ficar só com a parte 1 do Tutorial.

    Neste caso recomendo o WebKit

  • Olá Pedro,

    Ao invés do WebKit, posso utilizar o Midori?

    Abraço
    Marco Aurélio

  • Pedro Paulo

    Não sei se o Midori vai mostrar igual ao browser do IPod Touch. Nunca tentei

  • Olá Paulo,
    Preciso de uma consultoria sobre uma aplicação, pode me passar seu e-mail?
    O Meu é guga@bark.com.br.

    Obrigado,
    Gustavo