Desenvolvendo aplicacoes mobile_com_html_css_

32
[email protected] http://www.urubatan.com.br Desenvolvendo aplicações Mobile com HTML, CSS e JavaScript Aproveitando o conhecimento Web no desenvolvimento Mobile

description

Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br. Todos os comentários são bem vindos. Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.

Transcript of Desenvolvendo aplicacoes mobile_com_html_css_

Page 1: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

Desenvolvendo aplicações Mobile com HTML, CSS e

JavaScript

Aproveitando o conhecimento Web no desenvolvimento Mobile

Page 2: Desenvolvendo aplicacoes mobile_com_html_css_

[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.

Page 3: Desenvolvendo aplicacoes mobile_com_html_css_

[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!

Page 4: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

Esqueleto de aplicação Android

Portando WRT para Android

Page 5: Desenvolvendo aplicacoes mobile_com_html_css_

[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>

Page 6: Desenvolvendo aplicacoes mobile_com_html_css_

[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");

}

Page 7: Desenvolvendo aplicacoes mobile_com_html_css_

[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”)

Page 8: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

Isto daria muito trabalho

Uma das maiores virtudes dos programadores é a preguiça.

Page 9: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

Open Source for the Rescue

Alguem já deve ter feito isto por mim

Page 10: Desenvolvendo aplicacoes mobile_com_html_css_

[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

Page 11: Desenvolvendo aplicacoes mobile_com_html_css_

[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)

Page 12: Desenvolvendo aplicacoes mobile_com_html_css_

[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)

Page 13: Desenvolvendo aplicacoes mobile_com_html_css_

[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

Page 14: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

PhoneGap

Meu framework favorito para esta tarefa

Page 15: Desenvolvendo aplicacoes mobile_com_html_css_

[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

Page 16: Desenvolvendo aplicacoes mobile_com_html_css_

[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 ...

Page 17: Desenvolvendo aplicacoes mobile_com_html_css_

[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

Page 18: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

Mobile Pomodoro

Page 19: Desenvolvendo aplicacoes mobile_com_html_css_

[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>

Page 20: Desenvolvendo aplicacoes mobile_com_html_css_

[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>

Page 21: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

Page 22: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

Page 23: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

Page 24: Desenvolvendo aplicacoes mobile_com_html_css_

[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');

}}

Page 25: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

}

Page 26: Desenvolvendo aplicacoes mobile_com_html_css_

[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);

Page 27: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

}

Page 28: Desenvolvendo aplicacoes mobile_com_html_css_

[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

Page 29: Desenvolvendo aplicacoes mobile_com_html_css_

[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' +

Page 30: Desenvolvendo aplicacoes mobile_com_html_css_

[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;

}

Page 31: Desenvolvendo aplicacoes mobile_com_html_css_

[email protected] http://www.urubatan.com.br

?!?!?!

Page 32: Desenvolvendo aplicacoes mobile_com_html_css_

[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