Introdução ao Desenvolvimento Mobile para Desenvolvedores WebFelipe Andrade | CTO e Co-Fundador da i2tecnologia

i2tecnologia

• Forum Nokia LaunchPad • Fornecedor Oficial Nokia no Brasil• Membros participantes do programa Forum

Nokia Champion• Tecnologias atualmente utilizadas:– Symbian C++– Flash Lite– WRT (Web Runtime – HTML, CSS, AJAX)– Objective-C (iPhone)

Forum Nokia• Participante da maratona do Forum Nokia Developer Summit

Hackathon, Monaco, 2009• Vencedor do concurso Nokia Sem Limites, 2009• Forum Nokia Champion, 2008-2009• Forum Nokia Champion, 2007-2008• Forum Nokia Champion, 2008-2009• Forum Nokia Champion of the Month, June, 2008• Forum Nokia Champion of the Month, July, 2009• Vencedor do Forum Nokia 2008 Code Example Challenge, 2008• Finalista do Nokia Mobile Rules'08 (Plano de Negócios)

Forum Nokia Rewards

Escolhendo a sua PlataformaDesenvolvimento Web para Smartphones

Qual Plataforma Escolher?

• Rode em milhares de aparelhos • Suporte os padrões de tecnologia existentes

no mercado• Seja fácil e rápido de desenvolver• Possua uma loja para vender seus produtos• Ofereça o melhor suporte ao desenvolvedor

Conheçendo o Symbian OS

• Sistema operacional presente em cerca de 50% dos Smartphones

• Totalmente Independente, totalmente aberto• Verdadeiramente multi tarefa• Cerca de 11 runtimes disponíveis• Ovi Store (Loja de Aplicativos)• Forum Nokia (http://forum.nokia.com)• Symbian Developer (http://developer.symbian.org)

Runtimes

• Qt• Python for S60• Flash Lite• .NET• Java ME

…• Qual devo escolher!

Ferramentas de Desenvolvimento

• Carbide C++ 2.x (EPL)• Qt Creator (LGPL)• Eclipse (Plugins para Python e Java ME

disponíveis)• Adobe Flash CS 4 (Adobe Device Central)

Novas Idéias

Smart Toaster X• BreadSense - Usa sensores internos para medir a configuração e

tempo ideal para a torrada.• Tela touchscreen UI - para configurar de forma mais fácil.• Configurações personalizadas podem ser armazenadas por digital.

Basta se identificar e a torradeira já saberá como você prefere suas torradas.

• Configurações adicionais e sugestões de preparo poderão ser baixadas pela internet via conexão WI-FI.

• Configurações pessoais compartilhadas também online.• Conecta com o celular via Bluetooth para enviar lembretes de, por

exemplo, comprar pão quando sair de casa.• Notícias, previsão do tempo e vídeos no café-da-manhã.• Atualizações de firmware baixadas automaticamente via WI-FI

Desenvolvimento Flash para Smartphones

Desenvolvimento Flash Mobile

• Desenvolvimento Flash para iPhone• Dispositivo Nokia S40, S60 e Maemo• Desenvolvimento Flash para Android– Atualmente Flash Lite (actionscript 2.0)– Em breve Adobe AIR (actionscript 3.0)

• Sony Ericsson Capuchin (38 aparelhos)– O Projeto Capuchin é uma tecnologia proprietária dos

dispositivos Sony Ericsson• Flyer e Jarpa Framework (Brasileiros)

S60 Platform Services

• Sensores (Acelerometro)• GPS• Calendário• Contatos• Logs• SMS e MMS

Web Runtime – Extensão da Web

WidgetsWidgets como uma extensão da Web

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

Exemplos de Sucesso

Tipos de Widgets• Desktop• Web• Widgets Pessoais• Widgets Públicos

• Mobile• Físicos

Widget Engine

Web Runtime para plataforma S60

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

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

Web Browser para S60

Expande as API’s do Web Browser S60

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)

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

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

O que tem Dentro de um Web Widget S60

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

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>

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

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

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

Processo de Instalação de um Widget

Desenvolvendo WidgetsPasso a passo no desenvolvimento de Widgets

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

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

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

Aptana Studio, Dreamweaver, Visual Studio

Desenvolvendo Web Widgets no Emulador

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>

Introdução a API’s WRTComo tratar eventos do aparelho

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]

Objeto Widget

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

widget.setDisplayLanscape();else

widget.setDisplayPortrait();}

Segurança nos WidgetsComo manter seus widgets seguros

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.

Dúvidas?

felipe.andrade@i2tecnologia.com.brhttp://twitter.com/felipeandradehttp://twitter.com/symbiandevco gtalk: felipebzr@gmail.com

http://blog.felipeandrade.org