remobile - nokia web runtime

50
ReMobile Felipe Andrade Diretor de Tecnologia – i2 Forum Nokia Champion Forum Nokia Widgets Ambassador Forum Nokia Developer Advisory Council Member twitter.com/felipeandrade blogs.forum.nokia.com/blog/felipe-andrades-forum- nokia-blog Recife – Brazil – 02.2009

Upload: felipebzr

Post on 04-Dec-2014

3.980 views

Category:

Technology


1 download

DESCRIPTION

Slide sobre o Nokia WebRuntime (WRT), exibido durante o evento ReMobile, promovido por Felipe Andrade, co-fundador da i2tecnologia.

TRANSCRIPT

Page 1: ReMobile - Nokia Web Runtime

ReMobileFelipe AndradeDiretor de Tecnologia – i2

Forum Nokia ChampionForum Nokia Widgets AmbassadorForum Nokia Developer Advisory Council Member twitter.com/felipeandradeblogs.forum.nokia.com/blog/felipe-andrades-forum-nokia-blog

Recife – Brazil – 02.2009

Page 2: ReMobile - Nokia Web Runtime

ReMobile- O foco do ReMobile é trocar informações sobre tecnologias móveis através de palestras, vídeo aulas, artigos no formato Wiki, slides, etc.

- O ReMobile será sempre um evento gratuito

-Contribuições de tempo, dinheiro, programas e equipamentos são bastante necessárias

- Grupohttp://groups.google.com/group/remobile

Page 3: ReMobile - Nokia Web Runtime

Web Runtime (WRT)Desenvolvimento Web para dispositivos Nokia S60

Page 4: ReMobile - Nokia Web Runtime

Agenda• O que são Widgets• Evolução dos Widgets• Widgets para diferentes plataformas• Nokia Web Runtime

• Web Runtime para plataforma S60• O que tem dentro de um web widget S60• Desenvolvimento de Widgets

• Emulador• IDE’s

• Introdução a API’s• Segurança

Page 5: ReMobile - Nokia Web Runtime

O Que São Widgets

Page 6: ReMobile - Nokia Web Runtime

WidgetsWidgets como uma extensão da Web

• Web Distribuída• Web Portátil• Web Remixada• Web Programada• Web Gerada pelo Consumidor

Exemplos de Sucesso

Page 7: ReMobile - Nokia Web Runtime

Evolução da Web

Page 8: ReMobile - Nokia Web Runtime

Evolução da Web• Os Widgets são a evolução natural da Web• Pequenos pedaços interdependentes das páginas web• Do-It-Yourself

Page 9: ReMobile - Nokia Web Runtime

Widgets para diferentes plataformas

Page 10: ReMobile - Nokia Web Runtime

Tipos de Widgets• Desktop• Web

• Widgets Pessoais• Widgets Públicos

• Mobile• Físicos

Page 11: ReMobile - Nokia Web Runtime

Widget Engine

Page 12: ReMobile - Nokia Web Runtime

Nokia Web Runtime

Page 13: ReMobile - Nokia Web Runtime

Web Runtime para plataforma S60

Page 14: ReMobile - Nokia Web Runtime

Web Runtime para Plataforma S60• Web Browser funciona como uma máquina virtual• Permite rodar aplicações web fora do web browser para dispositivos S60• Suporta padrões de tecnologias já utilizadas na web

• HTML 4.01, XHTML 1.0 (básico e perfil mobile)• CSS 2.1• JavaScript 1.5 (padrão ECMA-262)• XMLHttpRequest (Ajax)• DOM Level 2

• Inclui bibliotecas JavaScript especificas para Widgets (widget, menu, SystemInfo)• Micro aplicações altamente interativas

Page 15: ReMobile - Nokia Web Runtime

Web Runtime como uma VM• A engine do Web Browser processa os componentes chave como a engine XML, processador HTML, engine JavaScript, processador CSS, e a engine de renderização.

• Possui páginas web e aplicações widgets como clientes

• JavaScript como uma linguagem de Programação

• Provê acesso a um certo de nível de propriedades do sistema

• Agora você já conheçe o Web Runtime

Page 16: ReMobile - Nokia Web Runtime

Web Browser para S60

Page 17: ReMobile - Nokia Web Runtime

Expande as API’s do Web Browser S60

Page 18: ReMobile - Nokia Web Runtime

Web Runtime - Objetivos• Widgets

• Utilizam serviços da internet e APIs web para acessar informações• Utilizam XmlHttpRequest e outras técnicas AJAX• Grande facilidade em portar Widgets de outras plataformas

• Widgets Integrados a experiência do usuário• Ícones da aplicação no menu principal• Podem ser utilizados em telas de espera e atalhos• Aparecem na lista de aplicativos ativos• Funcionam da mesma forma que aplicações S60 já existentes• Habilita o acesso a APIs especificas dos Widgets (widget, system, info, menu)

Page 19: ReMobile - Nokia Web Runtime

Web Runtime - Futuro• Widgets

• Combinam informações da internet com a plataforma de serviços• Aumentam a experiência do usuário• Informações sobre a localização, PIM, e media• Integrados em telas de espera• Melhorias na UI e novas funcionalidades

• Widgets como uma plataforma de desenvolvimento• Integração segura com a plataforma de serviços S60• Acesso a plataforma de serviços via APIs web• Segurança e modelo de assinatura para widgets

Page 20: ReMobile - Nokia Web Runtime

Mobile Widgets• A plataforma S60 foi a primeira a anunciar suporte a Widgets

• Totalmente baseada em padrões de tecnologias Web

• A única plataforma mobile a suportar conteúdo Flash em Widgets

Page 21: ReMobile - Nokia Web Runtime

O que tem dentro de um web widget S60

Page 22: ReMobile - Nokia Web Runtime

Estrutura de um Web Widget S60• Um widget é construído por um conjunto de arquivos

•info.plist(required)•[name].html (required)•icon.png(optional)•[name].css(optional)•[name].js(optional)•resources(optional)

• O projeto de um Widget não é nada mais do que um diretório no sistema onde os arquivos estão armazenados

• Os arquivos necessários e o ícone devem estar localizados no diretório root do projeto

Page 23: ReMobile - Nokia Web Runtime

Info.plist – Propriedades de um Widget• É um arquivo XML contendo as propriedades e informações de configuração de um Widget

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plistPUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"><plistversion="1.0">

<dict><key>DisplayName</key><string>WidgetName</string><key>Identifier</key><string>com.company.widget.project</string<key>MainHTML</key><string>Main.html</string>

</dict></plist>

Page 24: ReMobile - Nokia Web Runtime

WRT - Propriedades suportadasNome Tipo Status Descrição

DisplayName String Required Especifica o atual nome do widget listado na barra de aplicações

Identifier String Required Especifica um nome único para o widget no formato de domínio reverso

MainHTML String Required Especifica o nome do HTML principal

AllowNetworkAcess Boolean Opcional Especifica acesso a dados da rede através dos recursos do Widget

ShortVersionString String Opcional Especifica a versão do release da aplicação

Version Number Opcional Especifica a versão do pacote

Page 25: ReMobile - Nokia Web Runtime

Icon.png• O ícone de widget é um arquivo salvo no formato PNG

• O tamanho recomendado de um ícone é de 88x88 pixels

• Se o ícone for omitido do pacote de instalação, o widget irá parecer no menu do dispositivo como uma aplicação padrão S60

Page 26: ReMobile - Nokia Web Runtime

Dentro de um WRT Widget S60

• O arquivo de instalação de um Widget é um arquivo ZIP• A extensão do arquivo de instalação é [widgetname].WGZ• O tipo MIME de um widget é application/x-nokia-widget

Page 27: ReMobile - Nokia Web Runtime

Processo de Instalação de um Widget

Page 28: ReMobile - Nokia Web Runtime

Desenvolvimento de Widgets

Page 29: ReMobile - Nokia Web Runtime

4 Passos para Desenvolver Widgets1. Crie uma pasta no seu desktop. Ex:

C:\ReMobile

2. Crie e adicione as informações necessárias no arquivo info.plist, salve este arquivo no diretório criado na etapa 1C:\ReMobile

info.plist

3. Crie e adicione algumas informações no arquivo HTML, não esqueça de utilizar o mesmo nome definido na tag MainHTML do arquivo info.plistC:\ReMobile

info.plistremobile.html

4. Crie e/ou adicione arquivos opcionais ao diretórioC:\Remobile

info.plistremobile.htmlremobile.jsremobile.css

Page 30: ReMobile - Nokia Web Runtime

3 Passos para Publicar Widgets1. Utilize uma ferramenta para comprimir o arquivo no formato ZIP

C:\ReMobile C:\ReMobile.zipinfo.plistremobile.html

2. Mude o nome da extensão do arquivo para WGZC:\ReMobile.zip C:\ReMobile.WGZ

3.Envie o arquivo via Bluetooth ou abra o arquivo ReMobile.WGZ no emulador

Page 31: ReMobile - Nokia Web Runtime

O que você precisa para começar?• Para implementar o código de um Widget:

• Uma ferramenta de edição de texto ou edição web

• Para debugar um widget• Firefox

• firebug• Greasemonkey• Um script para liberar o acesso a rede através de chamadas locais (XmlHttpRequest Bypass Security)

• Para testar um Widget• Emulador S60 3rd Edition FP2 SDK • Emulador S60 5th SDK• Um dispositivo que suporte a tecnologia

Page 32: ReMobile - Nokia Web Runtime

Aptana Studio

Page 33: ReMobile - Nokia Web Runtime

Desenvolvendo Web Widgets no Emulador

Page 34: ReMobile - Nokia Web Runtime

Desenvolvendo Web Widgets no Emulador

Page 35: ReMobile - Nokia Web Runtime

Adicionando Conteúdo Interativo• SVG

<object data="resources/gnu.svg" width="120" height="120" type="image/svg+xml"></object>

<embed src="resources/gnu.svg" width="120" height="120" type="image/svg+xml" />

• Flash Lite

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="238" height="318" id="MyFlash" align="middle">

<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="MyFlash.swf" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="opaque" /><param name="bgcolor" value="#ffffff" /><embed src="MyFlash.swf" loop="false" menu="false"

quality="high" wmode="opaque" bgcolor="#ffffff" width="238" height="318" name="Finish" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Page 36: ReMobile - Nokia Web Runtime

Introdução a API’s WRT

Page 37: ReMobile - Nokia Web Runtime

Objeto Widget• Módulo embutido do Widget, acessado através das variáveis widget ou window.widget

•Widget methodsopenURL(String:url)setPreferenceForKey(String:preference, String:key)preferenceForKey(String:key)prepareForTransition(String:transitionState)performTransition(void)setNavigationEnabled(Boolean:flag)openApplication(Hex:Uid, String:param)setDisplayLandscape(void)setDisplayPortrait(void)

•Widget propertiesidentifier [readonly, String]onshow[assigned callback function]onhide[assigned callback function]isrotationsupported[readonly, Booloean]

Page 38: ReMobile - Nokia Web Runtime

Objeto Widget

function manipularTela() {var h = window.screen.height;var w = window.screen.width;if (h < w)

widget.setDisplayLanscape();else

widget.setDisplayPortrait();}

Page 39: ReMobile - Nokia Web Runtime

Objeto Menu• É uma extensão do objeto widget• Provê uma interface para manipular o menu de opções e softkeys de um widget

• Menu methodsappend(MenuItemmenuItem)remove(MenuItemmenuItem)getMenuItemById(Integer:id)getMenuItemByName(String:label)setRightSoftkeyLabel(String:label, function:callbackfunction)showSoftkeys(void)hideSoftkeys(void)clear(void)

• Menu propertiesonShow[assigned callback function]

Page 40: ReMobile - Nokia Web Runtime

Objeto MenuItem• Provê uma interface para criar itens de menu

• Metódos do Menu Item

new MenuItem(String:label, Integer:id)append(MenuItem:childMenuItem)remove(MenuItem:childMenuItem)replace(MenuItem:oldMenuItem, MenuItem:newMenuItem)setDimmed(Boolean:flag)

• Propriedades do Menu Item

onSelect [assigned callback function]

Page 41: ReMobile - Nokia Web Runtime

Objeto MenuItem

function createMenu{

var settings = new MenuItem(‘Settings’, 10);settings.onSelect = showSettings;window.menu.append(settings);

}

function showSettings(id){

document.getElementById(‘setting’).style.display = ‘block’;}

Page 42: ReMobile - Nokia Web Runtime

SystemInfo Service API• SystemInfo service API é um plugin Netscape

•Subconjunto de propriedades do sistema•Memória, rede, status da bateria, etc.

•O plugin SystemInfo Service é carregado via o elemento <embed> do HTML <embed type="application/x-systeminfo-widget" hidden="yes"> </embed>

•SystemInfo service não é carregado no contexto do Browser

Page 43: ReMobile - Nokia Web Runtime

SystemInfo Service APIPower properties

chargelevel [readonly, int]chargerconnected [readonly, int]onchargelevel [writeonly, function]onchargerconnected [writeonly, function]

Network properties

signalbars [readonly, int]signalstrength [readonly, int]networkname [readonly, string]registrationstatus [readonly, int]onsignalstrength [assigned callback function]onregistrationstatus [assigned callback function]

Page 44: ReMobile - Nokia Web Runtime

SystemInfo Service APILight methods

lighton(Int:lighttarget, Int:duration, Int:intensity, Int:fadein)lightblink(Int:lighttarget, Int:duration, Int:onduration, Int:offduration, Int:intensity)lightoff(Int:lighttarget, Int:duration, Int:fadeout)

Light properties

lightminintensity [readonly, Int]lightmaxintensity [readonly, Int]lightdefaultintensity [readonly, Int]lightinfiniteduration [readonly, Int]lightmaxduration [readonly, Int]lightdefaultcycletime [readonly, Int]lighttargetprimarydisplayandkeyboard [readonly, Int]lighttargetsystem [readonly, Int]

Page 45: ReMobile - Nokia Web Runtime

SystemInfo Service APIVibra methods

startvibra(Integer:duration, Integer:intensity)stopvibra(void)Vibra propertiesvibraminintensity [readonly, Integer]vibramaxintensity [readonly, Integer]vibramaxintensity [readonly, Integer]vibrasettings [readonly, Integer]

Beep methods

beep(Integer:frequency, Integer:duration)

Memory properties

totalram [readonly, Integer]freeram [readonly, Integer]

Page 46: ReMobile - Nokia Web Runtime

SystemInfo Service APIFile system methods

drivesize(String:drive)drivefree(String:drive)

File system properties

drivelist [readonly, String]

Language properties

language [readonly, String]

Page 47: ReMobile - Nokia Web Runtime

Segurança nos Widgets

Page 48: ReMobile - Nokia Web Runtime

Visão Geral• Ao contrário dos arquivos SIS, Widgets não precisam ser assinados.

• Widgets são considerados inseguros. Para acessar serviços nativos do aparelho existe o controle do usuário, que neste caso precisa autorizar o aplicativo para acessar estes recursos

• Widgets acessam a rede através do Web Browser S60.

•Widgets acessam a plataforma de serviços S60 através de APIs de serviços JavaScript. Para o WRT 1.0, o Web Runtime controla o acesso a plataforma de serviços através do Web Browser S60. Para o WRT 1.1, o Web Runtime utiliza o Runtime Security Manager para controlar o acesso a plataforma de serviços.

Page 49: ReMobile - Nokia Web Runtime

Política de Segurança WRT 1.1

JavaScript Service API Capability

SystemInfo ReadUserData, Location

Messaging ReadUserData, WriteUserData, NetworkServices

Logging ReadUserData, WriteUserData

Location Location

Landmarks ReadUserData, WriteUserData

Contacts ReadUserData, WriteUserData

Calender ReadUserData, WriteUserData

Application Manager ReadUserData

Page 50: ReMobile - Nokia Web Runtime

Obrigado!