Desenvolvimento, empacotamento e deploy de Web Apps Javier Ferreira - INdT Series 40 Nokia Developer Evangelist @jzferreira

Desenvolvimento de Web Apps

1

Conteúdo

2

• Plataforma Série 40

• Web Apps

• Nokia Browser

• Mobile Web Library (MWL)

• Nokia Web Tools

• Demo

O INdT é um Instituto de Pesquisa e Desenvolvimento independente e sem fins lucrativos, fundado pela Nokia e focado na geração de novos conceitos, produtos e soluções para as áreas relacionadas com tecnologias móveis e Internet. É o primeiro content provider do Brasil e da América do Sul a superar a marca de 2 milhões de aplicativos baixados na Nokia Store. Nossos aplicativos foram utilizados por usuários de celulares Nokia espalhados em +200 países ao redor do mundo. http://www.indt.org

A Loja Nokia

4

• Nokia Store é a loja de aplicativos da Nokia. A loja pode ser acessada tanto nos celulares Série 40 quanto em computadores

http://store.nokia.com

5 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

Plataforma Série 40

6

Plataforma Série 40 (2)

7

•1.5 bilhões vendidos •Plataforma mais usada no mundo

•Estima-se que 675 milhões desses telefones são usados todos os dias •A plataforma é uma porta de entrada para usuários que procuram utilizar o aparelho com Internet e outros recursos de alta performance com um preço acessível.

Plataforma Série 40 (3)

8

• Que tecnologia usar para desenvolver uma App para o Série 40?

• J2ME •Web Apps: HTML + CSS + JavaScript

Nokia Asha 303

Web Apps

9

• Aplicações Web com aparência e comportamento de aplicações nativas. Uso de padrões Web e tecnologias como HTML, CSS e JavaScript;

• Aplicações Web com aparência e comportamento de aplicações nativas. Uso de padrões Web e tecnologias como HTML, CSS e JavaScript;

Exemplo de Web Apps

HTML

Web Apps – Mobile Phones

10

• Tradicionalmente navegadores Web em aparelhos convencionais usam um proxy apenas para renderizar o conteúdo da página

• Limita a experiência do usuário

Exemplo de funcionamento nos browsers convencionais

Nokia Browser Série 40

11

• Duas partes: app client e proxy server • Proxy server: faz todo o processamento e envia os

dados otimizados ao cliente • App client: biblioteca MWL (Mobile Web Library)

• Suporte para códigos de interação

Nokia Briwser Série 40 (2)

12

Tarefas executadas automaticamente pelo Nokia Browser • Compressão de imagens, otimização do HTML e

executa mudanças na página quando há atualizações na página Web;

• Comunicação entre cliente e servidor proxy incluem sessões e persistência;

• Redução de cores para gráficos com um grande número de 256 cores (8 bits)

• Mais informações: http://www.developer.nokia.com/Resources/Library/Web/#!web-apps/series-40-web-apps/overview.html

Nokia Browser Série 40 (3)

13

• Padrões suportados:

• HTML 4.01 http://www.w3.org/TR/1999/REC-html401-19991224/

• JavaScript 1.6 https://developer.mozilla.org/en/JavaScript/Reference e https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6

• CSS Mobile Profile 2 http://www.w3.org/TR/2008/CR-css-mobile-20081210/

• W3C widget packaging http://www.w3.org/TR/2010/WD-widgets-20101005/

• SMS URI scheme http://tools.ietf.org/html/rfc5724 (suportado na versão 1.5 e acima)

• Um subconjunto do CSS3 para transições animadas http://www.w3.org/TR/2009/WD-css3-animations-20090320/

Nokia Browser Série 40 (4)

14

http://www.developer.nokia.com/Devices/Device_specifications/?filter1=serieSérie 40webapps

Mobile Web Library (MWL)

15

• A biblioteca JavaScript MWL (Mobile Web Library) é responsável em adicionar interatividade no cliente:

• Modificação de propriedades CSS: adicionar, remover, trocar classes nos elementos e criar novas classes

• Uso de operações temporizadas • O processemanto das operações do MWL devem ser

as únicas de JavaScript no cliente; • Os demais processamentos de código JavaScript são

feitas no proxy de forma otimizada e que gere o menor tráfico de rede uma vez que o proxy retorna os dados ao cliente.

MWL (2)

16

• Métodos da biblioteca MWL http://www.developer.nokia.com/Resources/Library/Series_40_web_apps_library/#!technical-library/descriptions-of-mwl-methods.html

Nokia Web Tools 1.5

17

• Baseia-se na Plataforma Eclipse; • Ambiente de desenvolvimento Web; • Permite: criar, editar, debugar, empacotar e deploy nos

aparelhos da Série 40; • Suporte a última API MWL; • Simulador de aparelho com suporte para teste de

Geolocalização.

Apresentação Nokia Web Tools 1.5 18

Deploy no Aparelho

19

• Bluetooh Launcher v1.5 • Pode ser instalado ao acessar:

http://nokia.ly/btlauncher

• Bluetooth Launcher v1.5 • Pode ser instalado ao acessar:

http://nokia.ly/btlauncher

Menu telefone Execute Conectado

Nokia Web Tools 2.0

20

• Onde fazer o download da versão 1.5? • Não está mais disponível essa versão • Dia 25 de junho de 2012 foi disponibilizada versão 2.0 http://www.developer.nokia.com/Develop/Series_40/Series_40_web_apps/Tools/

• Há grande diferença quanto ao desenvolvimento de Web Apps? • Adicionado 3 grandes novidades: upload e download de

arquivo, gerenciador de password e gerenciador de download. • As mudanças são novos templates e exemplos de código,

validação CSS e HTML, melhora na acuracia para testar sua app no computador, mais informações:

• http://www.developer.nokia.com/Resources/Library/Series_40_web_apps_library/#!index.html;#toc_Whatsnewinthislibrary

Como instalar Nokia Browser?

21

• O processo é transparente tanto para o usuário quanto para o desenvolvedor;

• Três possibilidades: 1. Por meio de download da Loja Nokia 2. Atualização 3. Caso faça o download de uma Web App da loja e o

usuário não tem o Nokia Browser, então automaticamente é feito o download do Nokia Browser e em seguida da app.

Interação

22

Nokia Developer http://www.developer.nokia.com

Twitter: @nokiadev_brasil

Grupo Devs Série 40 no Nokia Developer http://www.developer.nokia.com/Co

mmunity/Discussion/group.php?groupid=114

23 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

Javier Ferreira javier.ferreira@indt.org.br

@jzferreira

Obrigado!