Quando uma equipe de desenvolvimento tem como missão implementar uma aplicação, que deseja que seja funcional em todos os dispositivos móveis, de diferentes plataformas que a empresa tem como interesse alcançar no mercado mobile, uma decisão é de extrema importância: desenvolver uma app exclusiva para cada plataforma utilizando ferramentas que os fornecedores disponibilizam ou criar uma app com um framework multiplataforma? Para ajudar na resposta a esta questão, algumas empresas estão saltando na frente e ofertando frameworks multiplataforma, entre elas: Rhodes, Appcelerator, Jquery Mobile, XUI e PhoneGap que iremos abordar neste artigo.

O Phonegap é uma tecnologia open source que tem como principal característica desenvolver aplicativos webapp, que podem ser funcionais nos ambientes online ou offline. Para suprir as necessidades das linguagens nativas de cada plataforma, ele utiliza dos melhores padrões de web com o HTML5, CSS3 e o Javascript, tratando de uma forma bastante simples o seu desenvolvimento. Com uma interface baseada em telas de HTML, a sua lógica de programação e os seus recursos de dispositivos são tratados pelo Javascript tendo a possiblidade de realizar combinações com diversos scripts. Estes são: Jquery, MooTools e XUI. Dentro da lógica no javascript é realizado a comunicação com a API do PhoneGap.  Devido a grande quantidade de aparelhos, os quais possuem diversas resoluções e tamanhos de tela, os arquivos CSS são encarregados de exibir a aplicação corretamente. É importante lembrar que junto a estes novos padrões, está presente o Canvas, que em testes realizados foi notado um ótimo desempenho com o framework.

Além da criação de páginas web que rodarão nos dispositivos móveis através de controles chamados WEBVIEW, que permitem a exibição de HTML, o Phonegap possui suporte a alguns recursos de extrema utilidade como: accelerometer, camera, compass, contacts, file, geolocation, media, network, notification (alert), notification (sound), notification (vibration) e storage imbutidos no html.

Veja a compatibilidade destes recurso com as plataformas suportadas pela API:

Mesmo que o sistema que você está desenvolvendo seja multiplataforma, será necessário instalar todas as IDE’s que você deseja compilar o seu sistema, lembrando que cada plataforma tem as suas peculiaridades. Se você desenvolveu sua aplicação no Eclipse com a API para o Android você precisará instalar em um Mac a IDE XCode, instalar o plugin do framework e inserir os arquivos já desenvolvidos. Feito isso você poderá compilar a estrutura e realizar os testes de compatibilidade do seu sistema. Caso tenha o interesse em verificar como devem ser feitas as instalações das IDE’s, acesse este link, que possui um  passo-a-passo de todas as instalações de plataformas e plugins.

É possível notar que o Framework está sofrendo muitas atualizações, a fim de realizar melhorias em suas funções e compatibilidades. Entretanto, o framework ainda é muito limitado. Em alguns testes realizados com simuladores e dispositivos, foi possível verificar uma melhor aceitação por parte da plataforma Android em relação a da Apple. Por ter um estilo multiplataforma de desenvolver, é necessário que as suas funcionalidades estejam implementadas em todas as plataformas ou grande parte delas.

De toda a forma, a tecnologia é indicada para projetos de menor porte ou para projetos que tenham como padrões as funcionalidades já existentes no framework e que sejam compativeis com as plataformas desejadas. Em nossa pesquisa, um dos fatores de maior curiosidade era como o framework se comporta em relação a banco de dados. A tecnologia utiliza como padrão o SQLite. Em alguns casos no qual a plataforma não possui este Database, o framework sugere que seja utilizado o LocalStorage que não vem a ser um Database, mas sim uma API junto ao HTML5, que permite criar dados do lado do cliente, como se fossem cookies. Em relação aos cookies o LocalStorage tem uma vantagem, pelo fato de não possuir data para a expiração. Sabemos que SQLite e LocalStorage são tecnologia diferentes, porém é uma opção que o Phonegap nos oferece.

Abaixo inserimos um script de conexão a um DataBase SQLite:

<script charset="utf-8" type="text/javascript" src="phonegap-1.0.0.js"></script><script charset="utf-8" type="text/javascript">// <![CDATA[
  		function onLoad() { 			//Faz rodar a funcao JS 	    	navigator.device.deviceReady(); 		}  		// Cria a instancia do DB 		function createDB() {   			// Cria u apenas abre a DB 			var db = window.openDatabase("Teste", "1.0", "Phonegap DB", 20000); 			// Popula o DB 			db.transaction(populateDB, errorCB, successCB);			 		} 		// Funcao pra popular o banco 		function populateDB(tx) { 			tx.executeSql('DROP TABLE IF EXISTS DEMO');   			tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, nome VARCHAR(100))'); 			tx.executeSql('INSERT INTO DEMO (id, nome) VALUES (1, "Marcel")'); 			tx.executeSql('INSERT INTO DEMO (id, nome) VALUES (2, "Mobiltec")'); 		}  	// Verifica erro na funcao 		function errorCB(tx, err) { 			navigator.notification.alert("error: " + err); 		} 		// Verifica se foi realizada com sucesso 		function successCB() { 			navigator.notification.alert('DB criada e populada com sucesso');  		} 		// faz rodar a funcao do select 		function selectDB() {   			var db = window.openDatabase("Teste", "1.0", "Phonegap DB", 20000); 			db.transaction(queryDB);			 		} 		// select da funcao 		function queryDB(tx) { 			tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); 		} 		// display com resultado da funcao queryDB 		function querySuccess(tx, results) {      			var len = results.rows.length; 			navigator.notification.alert('Quantidade de Rows inseridas: ' + len); 			if (len > 0) {
				for (var i=0;i<len;i++) { 					navigator.notification.alert('ID: ' + results.rows.item(i).id + ' Nome: ' + results.rows.item(i).nome); 				} 			} 		} 		//funcao para printar resultado na forma de display 		function displaySelect(){ 			var db = window.openDatabase("Teste", "1.0", "Phonegap DB", 20000); 			db.transaction(selectDisplay); 		} 		function selectDisplay(tx) { 			tx.executeSql('SELECT * FROM DEMO', [], querySuccessDisplay, errorCB); 		} 		function querySuccessDisplay(tx, results) {      			var len = results.rows.length; 			document.getElementById("RowsInseridas").innerHTML=('Quantidade de Rows inseridas: ' + len); 			if (len > 0) {
				for (var i=0;i<len;i++) { 					document.getElementById("RowsInfo").innerHTML+='ID: ' + results.rows.item(i).id + ' Nome: ' + results.rows.item(i).nome+''; 				} 			} 		}>
// ]]></script>
<input onclick="createDB();" type="button" value="Criar uma Database em SQLite" />
<input onclick="selectDB();" type="button" value="Informacoes da DB" /> <button onclick="displaySelect()" type="button">Display Select</button>

Caso queria conferir o framework e tirar as suas próprias conclusões acesse: http://www.phonegap.com .

Caso tenha o interesse de realizar o download da API clique no link: Download PhoneGap

Escrito por Marcel Guinther