Desenvolvendo para iOS utilizando Phonegap

Hoje existem diversas plataformas no mundo mobile e cada uma com uma linguagem específica, dessa forma, existe um custo elevado para portar uma mesma aplicação para todas as plataformas, esse custo elevado no desenvolvimento de projetos acaba criando uma barreira muito grande para que pequenas empresas possam usufruir desse ambiente que cresce exponencialmente a cada dia.

Entretanto, hoje é plenamente possível você criar um aplicativo utilizando HTML como linguagem de programação e executá-lo de forma nativa dentro do ambiente iOS. Essa condição é valida tanto para iPhone quanto para iPad. Para que isso seja possível, utilizaremos um framework chamado Phonegap.

Phonegap é um framework open source (Apache Callback), criado pela Nitobi que foi adquirida em outubro de 2011 pela Adobe. O objetivo do Phonegap é ajudar empresas de desenvolvimento de software na área mobile oferencendo a possibilidade de desenvolver aplicações utilizando uma única linguagem de desenvolvimento para diversas plataformas, como: iOS, Android, Windows Mobile, etc.

O Phonegap provê uma grande quantidade de recursos em sua API, com ele você terá acesso aos serviços de: Acelerometro, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage. Tudo isso utilizando apenas HTML + Javascript para o desenvolvimento.

Se você já está familiarizado com o ambiente web, terá muita facilidade de iniciar o desenvolvimento mobile utilizando Phonegap.

Desenvolvimento

Para esse tutorial, você irá precisar efetuar dois downloads. O primeiro é o XCODE , disponível para download na Apple Store e do Phonegap, disponível no site da própria Phonegap.

Esse tutorial parte do principio que você já possua o XCODE instalado em seu Mac, e que possua o SDK do iOS.

Após efetuar o download do Phonegap através de seu site, você deve descompactar o arquivo e copiar o diretório iOS para seu Mac. Esse diretório contêm um arquivo chamado Phonegap-1.2.0.pkg. Esse arquivo é uma extensão para o XCODE, que irá facilitar a criação de projetos que serão distribuídos com o Phonegap.

Após executar a instalação do Phonegap-1.2.0.pkg, você poderá inicializar seu XCODE e iniciar a criação de um projeto para iOS no formato Phonegap-based Application, conforme imagem abaixo:

Após essa etapa, você deverá definir algumas opções para seu projeto, como nome da sua aplicação e um identificador. Para o identificador, é sugerido que você informe o domínio de sua empresa, no meu caso, utilizarei o domínio (de forma inversa) do meu blog: br.com.horochovec, e mais um identificador, no caso, .phonegap, conforme imagem abaixo:

Após essa etapa, o XCODE irá abrir seu projeto, possibilitando sua codificação. Perceba que não será necessário nenhuma codificação em Objective-C, e também não será necessário alterar absolutamente nada nas configurações geradas pelo XCODE para nosso projeto.

Agora, é necessário executar pela primeira vez nosso projeto. Para isso, você deve selecionar a plataforma que irá compilar o projeto, no meu caso, estou optando por iPhone 5.0 Simulator, e executar o projeto (clique em “Run”). Essa operação irá ser concluída com sucesso, o build do projeto não irá apresentar erros, o emulador será iniciado e a aplicação será instalada, porém, quando ela for aberta no simulador, um erro irá ser apresentado, dizendo que não foi encontrado o arquivo index.html na pasta www.

Esse erro que ocorre é proposital. O que acontece é que quando você cria um projeto do tipo Phonegap, ele não adiciona automaticamente essa pasta com esse conteúdo em seu projeto. Você deve fazer isso manualmente, o que ocorre, é que esse conteúdo é gerado apenas quando você tenta executar pela primeira vez o seu projeto dentro do emulador. Ou seja, você acaba sendo “forçado” a gerar esse erro para que o conteúdo seja gerado pelo plugin da Phonegap.

Após isso, você pode parar o emulador do projeto através do botão “Stop”. Após parar o projeto, você deve ir até a pasta aonde seu projeto foi criado, no meu caso, ele foi criado em meu Desktop. Você irá perceber que uma nova pasta foi criada, chamada “www”.

Essa pasta “www” deverá ser adicionada em seu projeto. Para isso, arraste-a para dentro do seu projeto no XCODE. Ao soltar a pasta “www” na pasta raiz de seu projeto, uma tela de confirmação irá aparecer. Selecione a opção: “Create folder references for any added folders” e clique em Finish.

Dentro da pasta “www”, iremos encontrar dois arquivos. O primeiro, o arquivo index.html, possui um pequeno exemplo de um Alert. Basicamente o arquivo faz a importação do arquivo phonegap-1.2.0.js e imprime um Alert em um Listener adicionado no evento “deviceready”. O EventListener foi adicionado no método onload() da tag body, conforme abaixo:

?Download index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
  <title></title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	<meta charset="utf-8">
 
 
	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />		
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />		
	-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript">
 
 
	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
 
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
 
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
 
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notification.alert("PhoneGap is working")
	}
 
    </script>
  </head>
  <body onload="onBodyLoad()">
	<h1>Hey, it's PhoneGap!</h1>
	<p>Don't know how to get started? Check out <em><a target="_blank" href="http://www.phonegap.com/start#ios-x4">PhoneGap Start</a></em>
	<br />
	<ol>
		<li>Check your console log for any white-list rejection errors.</li>
		<li>Add your allowed <strong>hosts</strong> in PhoneGap.plist/ExternalHosts (wildcards OK, don't enter the URL scheme)</li>
	</ol>
  </body>
</html>

Após essas etapas, basta executar novamente seu projeto e terá a seguinte resposta do emulador:

Para fazer o download do projeto, clique aqui.

Em uma próxima oportunidade, quero abordar um pouco mais do Phonegap demonstrando algumas de suas APIs específicas.

Até a próxima!


7 Comments

  • Junior |

    Stefan, e quanto aos aplicativos desenvolvidos pelo PhoneGap serem rejeitados na AppStore? Por um lado (HTML) eu já seria um “desenvolvedor” iOS, mas por outro (ambiente iOS) eu teria um longo caminho pela frente, no caso de algo feito no PhoneGap não ser comercialmente útil.

  • Stefan Horochovec |

    Ola Junior,

    Os aplicativos desenvolvidos em HTML e distribuídos utilizando Phonegap são aceitos na Appstore, aqui você pode encontrar uma lista de aplicativos para iPhone e para iPad.

    Quanto você ser considerado um desenvolvedor para iPhone ou iPad utilizando Phonegap, bom isso tem várias formas de analisar. Com esse artigo eu não quero dizer que o Phonegap é melhor ou pior que o nativo, apenas mostro uma opção.

    Phonegap é sim uma solução comercial Junior, muitas empresas podem utilizá-lo para reduzir seus custos e ter uma app publicada em diversas plataformas móveis.

  • possidonio |

    Muito interessante. Estou estudando radphp xe2 que também exporta o código para phonegap.

  • Marcelo Augusto |

    Boa tarde,
    gostaria de saber se tem como eu desenvolver para IOS usando Windows ou Linux ?
    Eu tenho o Iphone e gostaria de desenvolver uns app pra ele, só que eu não tenho um MAC.

    Grande abraço e parabéns pelo post.

  • Leonardo Marinho |

    Olá, gostei muito do seu post! Sou graduando em análise de sistemas e ando brincando um pouco com o phonegap, achei fantástico o modo como ele funciona. Só não consegui uma coisa, na hora de gerar o arquivo para a instalação no IOS usando o site do phonegap build, a opção para IOS fica marcada com erro e a das demais plataformas (android e Windows phone) funcionam normalmente. Necessito ter uma licença de desenvolvimento da apple para conseguir tal feito? Grato.

So, what do you think ?

  • Current ye@r *