63
Dados e servidores
Um elemento importante para
qualquer aplicativo é a capacidade
de lidar com dados persistentes. Ou
seja, informação que é armazenada
e recuperada pelo usuário. O
PhoneGap pode usar um sistema de
banco de dados e tabelas interno,
nativo à aplicação, que permite
lidar com registros persistentes.
Para o aplicativo da pizzaria
Queijo Quente, seria interessante
ter os dados dos sabores
guardados em uma tabela. Para
isso, é necessário chamar a API do
PhoneGap, abrir, ou criar, a tabela
de dados e criar scripts de consulta,
inserção e exclusão de registros.
Estes são os códigos básicos
para controlar a tabela:
document.addEventListener
("deviceready",
onDeviceReady, false);
var db;
function
onDeviceReady() {
db = window.
openDatabase("Pizzaria",
"1.0", "Phonegap DB",
20000);
}
Esse script referencia a API
e abre o database. Em seguida,
precisa-se de um código que
permita inserir dados nesse
database, como este script:
function inseriSabor() {
db
.transaction(geraSaborDB,
errorCB, successCB);
}
function geraSaborDB(tx) {
var
saborInserido = new
String(document.
getElementById
('idInsiraSabor').value);
tx.executeSql('CREATE
TABLE IF NOT EXISTS PIZZAS
(data)');
x.executeSql('INSERT
INTO PIZZAS (data) VALUES
("'+saborInserido+'")');
}
O próximo código exclui um
registro do database:
function deleteSabor() {
db.transaction(deletaSabor,
errorCB, successCB);
}
function
deletaSabor(tx) {
var s
aborDeletado = new
String(document.
getElementById
('idSaborNome').value);
tx.executeSql
('DELETE FROM PIZZAS WHERE
a="'+saboreDeletado+'"
}
Não difere muito dos códigos
usados em qualquer linguagem
para lidar com bancos de dados
relacionais. Mas registros
persistentes criados dentro do
aplicativo, e salvos localmente,
têm utilidade limitada. Para um
menu de pizzaria não haveria
necessidade do usuário inserir
sabores ou novos produtos no
banco de dados (nem haveria
como o proprietário da pizzaria
atualizar os seus sabores) sem
algum trabalho extra.
Assim, uma forma importante
de manter o aplicativo atualizado é
a capacidade de acessar bancos de
dados externos, servidores MySQL,
ou outro, a partir de seu aplicativo.
E isso o PhoneGap também faz – ou
melhor, ajuda a fazer.
Não é possível,
evidentemente, rodar linguagens
de script diretamente no aplicativo
PhoneGap. Não se pode usar ASP ou
PHP para qualquer ação no servidor
diretamente pelo PhoneGap.
É possível recorrer a Ajax
ou Json para acessar dados, a
partir de páginas em ASP ou
PHP remotas. Isso aumenta a
îH[LELOLGDGH GR DSOLFDWLYR 3HUPLWH
ainda que o app se mantenha
atualizado, lendo os sabores
diretamente de um banco de
dados externo.
Veja este exemplo básico
em Ajax:
$.ajax({
url: '
seu_dominio.com.br/seus_
dados.php?var=xxx',
dataType: 'jsonp',
jsonp:
'jsoncallback',
timeout: 5000,
success:
function(data, status){
//dados
recebidos
},
error: function(){
//erro
recebendo os dados
}
});
A função acima acessa o
arquivo PHP
seus_dados.php
no
servidor
.
Ela retorna os valores na variável
“data”. Esses dados podem ser
manipulados pelo Javascript para
exibição ou consulta.
O arquivo seus_dados.php
poderia, por exemplo, receber
YDUL£YHLV GH ORJLQ H VHQKD YHULíFDU
no banco de dados a permissão e
UHWRUQDU XP îDJ TXH SHUPLWH RX Q¥R
a entrada do usuário no aplicativo;
ou receber uma palavra-chave
para pesquisar um sabor de pizza e
retornar os dados encontrados.
JQuery
Outro elemento muito
interessante para ser utilizado no
desenvolvimento de aplicativos
com o PhoneGap é a biblioteca
Java jQuery. A maior parte
dos desenvolvedores web
tem utilizado essa ferramenta,
o jQuery, para agilizar e dar
DSDU¬QFLD PDLV SURíVVLRQDO D VHXV
layouts, bem como complementar
os recursos das páginas web. Essa
biblioteca pode ser utilizada com o
PhoneGap, ampliando os recursos
do aplicativo.
O jQuery para dispositivos
móveis pode ser baixado
rapidamente em dois links
diferentes. Siga as URLs:
Sobre o autor
Homero Ottoni é programador e
sócio-proprietário da empresa Make
Media de desenvolvimento web.
JQuery:
/
JQuery Mobile (JS/CSS):
Para usar o jQuery, basta
referenciar como qualquer
arquivo js:
<script type="text/
javascript" charset="utf-8"
src="jquery/jquery-
1.10.1.min.js"></script>
<script type="text/
javascript" charset="utf-8"
src="jquery/jquery.mobile-
1.3.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="jquery/jquery.mobile-
1.3.1.min.css"/>
O código abaixo mostra um
uso básico do jQuery, para inserir
um texto em uma DIV (conteúdo)
no HTML:
<script type="text/
javascript" charset="utf-8">
document.
addEventListener("devicere
ady",
onDeviceReady, false);
function onDeviceReady() {
$("#conteudo").html("Olá
pessoal! Confira nossos
novos sabores de pizzas!");
}
</script>
<div id="conteudo" data-
role="conteudo"></div>
Um uso que pode ajudar
no visual de seu aplicativo é a
transição de telas – o jQuery
permite programar sem muito
esforço. Recorra a isso para dar
mais dinâmica às transições de
telas de seu aplicativo e tornar
mais agradável o uso.
2XWUR DVSHFWR HíFD] « R XVR
do jQuery com Ajax para acessar
bancos de dados MySQL.
PHONEGAP
LW
REVISTA LOCAWEB
