[email protected] http://www.urubatan.com.br Desenvolvendo aplicações Mobile com HTML, CSS e JavaScript Aproveitando o conhecimento Web no desenvolvimento Mobile
May 25, 2015
[email protected] http://www.urubatan.com.br
Desenvolvendo aplicações Mobile com HTML, CSS e
JavaScript
Aproveitando o conhecimento Web no desenvolvimento Mobile
[email protected] http://www.urubatan.com.br
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.
[email protected] http://www.urubatan.com.br
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!
[email protected] http://www.urubatan.com.br
Esqueleto de aplicação Android
Portando WRT para Android
[email protected] http://www.urubatan.com.br
Layout (main.xml)
<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent"><WebView android:id="@+id/webView"android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout>
[email protected] http://www.urubatan.com.br
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 loadedweb.loadUrl("file:///android_asset/index.html");
}
[email protected] http://www.urubatan.com.br
Port da API WRT
• É necessário expor os objetos da API WRT para a aplicação Androido deviceo widgeto menu
• WebView.addJavascriptInterface(objetoJava, “nomeNoJavascript”)
[email protected] http://www.urubatan.com.br
Isto daria muito trabalho
Uma das maiores virtudes dos programadores é a preguiça.
[email protected] http://www.urubatan.com.br
Open Source for the Rescue
Alguem já deve ter feito isto por mim
[email protected] http://www.urubatan.com.br
Opções
• PhoneGapo APIs Javascript para acesso a recursos de dispositivos
moveiso Suporte para iOS, Android, Symbian, Windoes Mobile,
WebOS, Bada (em desenvolvimento), WindowsPhone 7 (em desenvolvimento)
o UI desenvolvida com Frameworks JS+CSSo Licensa BSD ou MIT o que for mais conveniente
• Titanium Mobileo APIs Javascript para acesso a recursos de dispositivos
moveiso Suporte para iOS e Androido API para UI disponivel com L&F nativoso Apache + Comercial para modulos adicionais e suporte
[email protected] http://www.urubatan.com.br
Opção e Motivos da Escolha - 1
• Titanium Mobileo Falta suporte para Symbiano API única para todas as plataformaso API própria para UIo Possibilidade de utilizar quase o mesmo código para
gerar aplicações Mobile e DesktopNos exemplos apresentados o código é diferente*Mesmo assim, a possibilidade de compartilhar código
é muito interessanteo Ambiente de desenvolvimento próprioo Build service - gera aplicação nativa para android e iOS a
partir dos fontes enviados (Serviço pago)
[email protected] http://www.urubatan.com.br
Opção e Motivos da Escolha - 2
• PhoneGapo Eu uso e gosto do Symbiano Possui uma API única para todos os dispositivosCom algumas excessões de coisas que funcionam e
uma e não na outra mas isto esta documentadoo Eu já conheço gosto de diversos frameworks Javascripto Existem frameworks Javascript que me permitem ter uma
UI "nativa" em todas as plataformaso Possibilidade de utilizar a IDE ou editor de textos que me
conviero Phonegap Build - serviço que gera apps nativas para
todas as plataformas suportadas a partir de um código único (Serviço pago)
[email protected] http://www.urubatan.com.br
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
[email protected] http://www.urubatan.com.br
APIs nativas disponíveis
Acelerometer Camera Capture Compass
Connection Contacts Device Events
File Geolocation Media Network
Notification Storage
[email protected] http://www.urubatan.com.br
Frameworks disponíveis para UI
• jQuery Mobile• jQTouch• Sencha Touch• Guarana-UI• Nokia Web Templates for High-End Devices• Muitos mais pela web ...
[email protected] http://www.urubatan.com.br
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
[email protected] http://www.urubatan.com.br
Mobile Pomodoro
[email protected] http://www.urubatan.com.br
index.html
<html><head>
<title>Mobile Pomodoro</title><link rel="stylesheet" type="text/css" href="css/basic.css"/><script type="text/javascript" src="lib/jquery.min.js"></script><script type="text/javascript" src="lib/jquery.json-2.2.min.js"></script><script type="text/javascript" src="lib/jquery.countdown/jquery.countdown.js"></script><script type="text/javascript" src="lib/pomodoro.js"></script><style type="text/css">
@import "lib/jquery.countdown/jquery.countdown.css";</style><script type="text/javascript">
$(document).ready(function(){var app = new App("mobile_pomodoro");app.initialize("timer");$("#exit_btn").click(function(evt){
window.close();});
});</script>
</head>
[email protected] http://www.urubatan.com.br
index.html (2)
<body><h1 id="header" style="background: url(icon.png) no-repeat;">
Mobile Pomodoro</h1><div id="screen_one" class="screen">
<div id="timer"></div><div id="controls">
<div id="timer_pomodoro" class="button pomodoro">Start Pomodoro</div><div id="timer_break" class="button break">Take a Break</div><div id="exit_btn" class="button exit">Exit</div>
</div></div>
</body></html>
[email protected] http://www.urubatan.com.br
basic.css
body {
font-family:Verdana;
background-color:#1c1c1c;
color: #fff;
margin: 0;
padding: 0;
}
#header {
text-indent: 50px;
height: 48px;
[email protected] http://www.urubatan.com.br
basic.css (2)
.button {
height: 30px;
line-height: 30px;
text-align: center;
text-indent: 30px;
vertical-align: middle;
background-repeat: no-repeat;
right: 20px;
left: 20px;
border: 1px solid #cccccc;
[email protected] http://www.urubatan.com.br
basic.css (3)
.break {
background-image:
url('../images/coffee_mug.png');
}
.exit {
background-image: url('../images/exit.png');
}
#timer {
background-color: #1C1C1C;
width: 235px;
[email protected] http://www.urubatan.com.br
pomodoro.js
function App(name){this.settings = {
pomodoro_time: 25,interval_time: 5
};this.history = [];
this.name = name;this.saveSettings = function(){
if (window.widget) {widget.setPreferenceForKey($.toJSON(this.settings), 'settings');
}}this.saveHistory = function(){
if (window.widget) {widget.setPreferenceForKey($.toJSON(this.history), 'history');
}}
[email protected] http://www.urubatan.com.br
pomodoro.js (2)
this.loadSettings = function(){if (window.widget) {
var rawJSON = window.widget.preferenceForKey('settings');if (rawJSON != "" && rawJSON != null && rawJSON != undefined) {
this.settings = $.evalJSON(rawJSON);}
}$(this).trigger("settings_loaded");
}this.loadHistory = function(){
if (window.widget) {var rawJSON = window.widget.preferenceForKey('history');if (rawJSON != "" && rawJSON != null && rawJSON != undefined) {
this.history = $.evalJSON(rawJSON);}
}$(this).trigger("settings_loaded");
}this.loadSettings();this.loadHistory();window.app = this;
}
[email protected] http://www.urubatan.com.br
pomodoro.js (3)
App.prototype.initialize = function(timer_id){window.app.timer_id = timer_id;$("#" + timer_id).countdown({
until: 0,format: 'HMS'
});$("#" + timer_id + "_pomodoro").click(window.app.startPomodoro);$("#" + timer_id + "_break").click(window.app.startBreak);$('body').append('<div id="' + window.app.name + 'player" style="display:none"></div>');if (window.menu) {
window.menu.showSoftkeys();var pomodoroMenu = new MenuItem("Start Pomodoro", 101);pomodoroMenu.onSelect = function(idx){
window.app.startPomodoro();}var breakMenu = new MenuItem("Take a Break", 111);breakMenu.onSelect = function(idx){
window.app.startBreak();}window.menu.clear();window.menu.append(pomodoroMenu);window.menu.append(breakMenu);
[email protected] http://www.urubatan.com.br
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
});return false;
}
[email protected] http://www.urubatan.com.br
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
[email protected] http://www.urubatan.com.br
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
+ '\n' +
[email protected] http://www.urubatan.com.br
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;
}
[email protected] http://www.urubatan.com.br
?!?!?!
[email protected] http://www.urubatan.com.br
Referências
http://www.urubatan.com.br
http://phonegap.com
jQuery Mobile
JQTouch
Sencha Touch
Guarana-UI
Nokia Web Templates for High-End Devices
Http://livro.urubatan.com.br