Desenvolvendo aplicacoes mobile_com_html_css_

fisl@urubatancom.br http://www.urubatan.com.br

Desenvolvendo aplicações Mobile com HTML, CSS e

JavaScript

Aproveitando o conhecimento Web no desenvolvimento Mobile

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.

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!

Esqueleto de aplicação Android

Portando WRT para Android

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>

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

Port da API WRT

• É necessário expor os objetos da API WRT para a aplicação Androido deviceo widgeto menu

• WebView.addJavascriptInterface(objetoJava, “nomeNoJavascript”)

Isto daria muito trabalho

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

Open Source for the Rescue

Alguem já deve ter feito isto por mim

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

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)

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)

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

PhoneGap

Meu framework favorito para esta tarefa

APIs nativas disponíveis

Acelerometer Camera Capture Compass

Connection Contacts Device Events

File Geolocation Media Network

Notification Storage

Frameworks disponíveis para UI

• jQuery Mobile• jQTouch• Sencha Touch• Guarana-UI• Nokia Web Templates for High-End Devices• Muitos mais pela web ...

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

Mobile Pomodoro

index.html

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

index.html (2)

Mobile Pomodoro</h1><div id="screen_one" class="screen">

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

basic.css

body {

font-family:Verdana;

background-color:#1c1c1c;

color: #fff;

margin: 0;

padding: 0;

#header {

text-indent: 50px;

height: 48px;

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;

basic.css (3)

.break {

background-image:

url('../images/coffee_mug.png');

.exit {

background-image: url('../images/exit.png');

#timer {

background-color: #1C1C1C;

width: 235px;

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

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;

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

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;

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

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

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;

?!?!?!

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

Desenvolvendo aplicacoes mobile_com_html_css_

Technology

Transcript of Desenvolvendo aplicacoes mobile_com_html_css_

Arduino e Aplicacoes

aplicacoes energia nuclear

Desenvolvendo aplicações Apex mais seguras Anderson ... aplicacoes... · +110 desenvolvedores +150 sistemas Apex +400k pageviews/dia Resumo dos números no TCU

Z80 Aplicacoes

Aplicacoes Com Netbeans

Aplicacoes educativas ipad

aplicacoes cartaz 77

aplicacoes cartaz 61

Desenvolvendo aplicacoes para TV Digital Interativa

PAM Aplicacoes FodaseCSerrano

Desenvolvendo aplicacoes moveis com a Nuvem

Aplicacoes Newton

Aplicacoes produtos Tec Tor

2902868 desenvolvendo-aplicacoes-web-com-net beans-ide-6

Desenvolvendo aplicacoes moveis Android na Nuvem da Amazon Web Services

Aplicacoes Multicamadas

Manual Aplicacoes Compressores Embraco

laser de Alexandrite-Aplicacoes

aplicacoes cartaz 66

Catalogo Aplicacoes Racor 2012