O documento discute o desenvolvimento de aplicações móveis usando HTML, CSS e JavaScript, abordando:
1) PhoneGap e frameworks JavaScript permitem criar aplicações nativas para múltiplas plataformas usando uma única base de código;
2) Um exemplo mostra como portar uma aplicação do Symbian para Android usando PhoneGap;
3) APIs nativas como geolocalização e câmera podem ser acessadas, apesar de adaptações para cada plataforma.
1. Desenvolvendo aplicações
Mobile com HTML, CSS e
JavaScript
Aproveitando o conhecimento Web
no desenvolvimento Mobile
fisl@urubatancom.br http://www.urubatan.com.br
2. Palestrante
Rodrigo Urubatan (@urubatan no Twitter) trabalha
com desenvolvimento de software desde 1997. Já
desenvolveu sistemas em uma gama de linguagens
e ambientes, incluindo Delphi, C, C++, PHP, ASP,
ColdFusion, Assembly, Leather, Ruby e Java.
Atualmente trabalha com pesquisa e
desenvolvimento na HP, utilizando principalmente
Java, Flex e Ruby, e já ministrou cursos e palestras
em diversos eventos pelo Brasil. Autor do livro Ruby
On Rails: Desenvolvimento Fácil e Rápido de
Aplicações Web.
fisl@urubatancom.br http://www.urubatan.com.br
3. Primeira idéia
• Symbian e WebOS suportam aplicações escritas em
HTML+CSS+Javascript nativamente
• Seria legal fazer o mesmo para Android e iOS
• Vou criar um esqueleto de aplicação com WebKit e rodar
minha app Symbian WRT no Android!
fisl@urubatancom.br http://www.urubatan.com.br
4. Esqueleto de aplicação
Android
Portando WRT para Android
fisl@urubatancom.br http://www.urubatan.com.br
6. Activity
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
web = (WebView) findViewById(R.id.webView);
WebSettings settings = web.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setSupportMultipleWindows(true);
settings.setSupportZoom(false);
settings.setPluginsEnabled(true);
web.setVerticalScrollBarEnabled(true);
web.setHorizontalScrollBarEnabled(false);
// Our application's main page will be loaded
web.loadUrl("file:///android_asset/index.html");
}
fisl@urubatancom.br http://www.urubatan.com.br
7. Port da API WRT
• É necessário expor os objetos da API WRT para a aplicação
Android
o device
o widget
o menu
• WebView.addJavascriptInterface(objetoJava,
“nomeNoJavascript”)
fisl@urubatancom.br http://www.urubatan.com.br
8. Isto daria muito trabalho
Uma das maiores virtudes dos
programadores é a preguiça.
fisl@urubatancom.br http://www.urubatan.com.br
9. Open Source for the Rescue
Alguem já deve ter feito isto por mim
fisl@urubatancom.br http://www.urubatan.com.br
10. Opções
• PhoneGap
o APIs Javascript para acesso a recursos de dispositivos
moveis
o Suporte para iOS, Android, Symbian, Windoes Mobile,
WebOS, Bada (em desenvolvimento), WindowsPhone 7
(em desenvolvimento)
o UI desenvolvida com Frameworks JS+CSS
o Licensa BSD ou MIT o que for mais conveniente
• Titanium Mobile
o APIs Javascript para acesso a recursos de dispositivos
moveis
o Suporte para iOS e Android
o API para UI disponivel com L&F nativos
o Apache + Comercial para modulos adicionais e suporte
fisl@urubatancom.br http://www.urubatan.com.br
11. Opção e Motivos da Escolha - 1
• Titanium Mobile
o Falta suporte para Symbian
o API única para todas as plataformas
o API própria para UI
o Possibilidade de utilizar quase o mesmo código para
gerar aplicações Mobile e Desktop
Nos exemplos apresentados o código é diferente*
Mesmo assim, a possibilidade de compartilhar código
é muito interessante
o Ambiente de desenvolvimento próprio
o Build service - gera aplicação nativa para android e iOS a
partir dos fontes enviados (Serviço pago)
fisl@urubatancom.br http://www.urubatan.com.br
12. Opção e Motivos da Escolha - 2
• PhoneGap
o Eu uso e gosto do Symbian
o Possui uma API única para todos os dispositivos
Com algumas excessões de coisas que funcionam e
uma e não na outra mas isto esta documentado
o Eu já conheço gosto de diversos frameworks Javascript
o Existem frameworks Javascript que me permitem ter uma
UI "nativa" em todas as plataformas
o Possibilidade de utilizar a IDE ou editor de textos que me
convier
o Phonegap Build - serviço que gera apps nativas para
todas as plataformas suportadas a partir de um código
único (Serviço pago)
fisl@urubatancom.br http://www.urubatan.com.br
13. Desvantagens
• Em ambos os casos é necessário ter os SDKs para cada
uma das plataformas instalado na maquina (Exceto se for
utilizar o serviço de build)
• Em ambos os casos se for necessária para a aplicação uma
API não disponível no framework, sera necessário
implementar nativamente para cada uma das plataformas
desejadas
fisl@urubatancom.br http://www.urubatan.com.br
14. PhoneGap
Meu framework favorito para esta
tarefa
fisl@urubatancom.br http://www.urubatan.com.br
15. APIs nativas disponíveis
Acelerometer Camera Capture Compass
Connection Contacts Device Events
File Geolocation Media Network
Notification Storage
fisl@urubatancom.br http://www.urubatan.com.br
16. Frameworks disponíveis para UI
• jQuery Mobile
• jQTouch
• Sencha Touch
• Guarana-UI
• Nokia Web Templates for High-End Devices
• Muitos mais pela web ...
fisl@urubatancom.br http://www.urubatan.com.br
17. Pequeno exemplo
• Este é o código de uma API escrita diretamente para Nokia
WRT portada depois para Android utilizando PhoneGap
• É uma APP gratuita disponível na OviStore
fisl@urubatancom.br http://www.urubatan.com.br
27. pomodoro.js(4)
App.prototype.timeUp = function(){
window.app.playSound();
window.app.vibrate();
}
App.prototype.startPomodoro = function(evt){
var time = window.app.settings.pomodoro_time * 60;
$('#' + window.app.timer_id).countdown("change", {
until: time,
format: 'HMS',
onExpiry: window.app.timeUp
});
return false;
}
App.prototype.startBreak = function(evt){
var time = window.app.settings.interval_time * 60;
$('#' + window.app.timer_id).countdown("change", {
until: time,
format: 'HMS',
onExpiry: window.app.timeUp
});
fisl@urubatancom.br http://www.urubatan.com.br
return false;
28. Problemas
API para menus ainda não disponível multi
plataforma
Mas isto raramente é utilizado para dispositivos
touch screen
Algumas vezes é necessário adicionar alguns Ifs
para adicionar código especifico para alguma
plataforma
fisl@urubatancom.br http://www.urubatan.com.br
29. Geolocalization
// onSuccess Callback
// This method accepts a `Position` object, which
contains
// the current GPS coordinates
//
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude
+ 'n' +
'Longitude: ' + position.coords.longitude
fisl@urubatancom.br http://www.urubatan.com.br
30. Captura de Imagens
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType:
Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image =
document.getElementById('myImage');
image.src = imageURI;
fisl@urubatancom.br http://www.urubatan.com.br