Pública

Centro de Inovação – Telefônica Brasil

16.08.2013

Desenvolvendo para FXOSFirefox OS

Pública

Pública

Índice

Introdução01

02

03

04

O Início da internet

Web móvel

Open Web Devices

05O Firefox OS

06HTML5

07Open Web App

08

09

Tipos de Aplicativos

WebAPIs e WebActivities

10Contato

Pública

Introdução

01

4Centro de InovaçãoTelefônica Brasil

Pública

Introdução01

David Ruiz

@wupsbr

http://wupsbr.com

david@telefonicabeta.com

Desenvolvedor Evangelista @ Telefônica Digital

Pública

O Início da internet

02

6Centro de InovaçãoTelefônica Brasil

Pública

O Início da internet02

Pública

Web móvel

03

8Centro de InovaçãoTelefônica Brasil

Pública

Web móvelDesde então, a Web está migrando para a mobilidade.

03

Global mobile traffic as % of Total Internet Traffic, 12/08 – 5/12

Sources: StatCounter Global StatsMary Meeker - KPBC

1% in 12/09

4% in 12/10

10% in 5/12

9Centro de InovaçãoTelefônica Brasil

Pública

Web móvelCom esta mudança de comportamento, novos sistemas operacionais fechados surgiram.

03

Internet

10Centro de InovaçãoTelefônica Brasil

Pública

Web móvelApenas duas plataformas dominam mais de 74% do mercado móvel ...

03

Source: Gartner, Feb 2012

Android + iOS74.7% of the smarpthone OS Market

11Centro de InovaçãoTelefônica Brasil

Pública

Web móvel... passando a controlar ...

03

O HARDWARE

OS BROWSERS

OS SISTEMAS OPERACIONAIS

E OS ECOSSISTEMAS DE APLICATIVOS

12Centro de InovaçãoTelefônica Brasil

Pública

Web móvel... e impedindo a concorrência.

03

13Centro de InovaçãoTelefônica Brasil

Pública

Web móvelPara a Web móvel ser realidade, uma série de pontos precisam ser solucionados:

03

Mecanismos de Monetização para Web Apps

Mecanismos de Descoberta de Web Apps

Padrões de Web Móvel

Suporte a Múltiplas Plataformas

Performance nos Browsers Móveis

14Centro de InovaçãoTelefônica Brasil

Pública

Web móvelCom o HTML5 temos um grande avanço na busca por um framework comum para o desenvolvimento de páginas web universais entre desktop e mobile.

03

Pública

Open Web Devices

04

16Centro de InovaçãoTelefônica Brasil

Pública

Open Web Devices04

Para promover o avançado de um ecossistema móvel e aberto, a Telefônica inicia uma parceria com a Fundação Mozilla por possuir a experiência necessária para transformar novamente a Web.

Criando assim o que chamamos de

Open Web Devices baseados no Firefox OS

Enable a mobile browser to access all devices capabilities extending HTML5 standard to achieve this

Improve mobile Web performance via a lighter OS and fast browser to provide the best mobile Web apps experience

Offer Web app discoverability and monetization capabilities for developers via operator billing

Create a reference implementation to drive advance mobile Web standards in other implementations

17Centro de InovaçãoTelefônica Brasil

Pública

Open Web Devices04

MOBILE WORLD CONGRESS 2012

18Centro de InovaçãoTelefônica Brasil

Pública

Open Web Devices04

MOBILE WORLD CONGRESS 2013

19Centro de InovaçãoTelefônica Brasil

Pública

Open Web Devices04

MOBILE WORLD CONGRESS 2013

Pública

O Firefox OS

05

21Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS

@codepo8

www.icant.co.uk

05

Por Christian Heilmann

Principal technical evangelist @ Mozilla

22Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS05

O Fusca dos Smartphones!

23Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS

• Acessível para todos;

05

O Fusca dos Smartphones?

• Muitas peças intercambiáveis – Inclusão e atualização fácil;

• Construído sobre um motor confiável que não transborda;

• Transformando mobilidade e independência acessível.

• Baseado em uma tecnologia resistente;

24Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS05

Substituir os Feature Phones!

25Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS05

26Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS

• Sistema operacional de nível inferior, que consiste em um kernel Linux e HAL (Hardware Abstraction Layer).

• Possibilidade de expor alguma coisa do hardware para o Gecko.

05

Gonk

27Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS

• O tempo de execução do aplicativo. O mecanismo de renderização no Firefox para HTML5, CSS e JavaScript. Implementa uma série de APIs.

05

Gecko

28Centro de InovaçãoTelefônica Brasil

Pública

O Firefox OS

• A interface de usuário, totalmente construída por APIs de HTML5 e Open Web.

05

Gaia

Pública

HTML5

06

30Centro de InovaçãoTelefônica Brasil

Pública

HTML506

31Centro de InovaçãoTelefônica Brasil

Pública

HTML506

http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/

32Centro de InovaçãoTelefônica Brasil

Pública

HTML506

Pública

Open Web App

07

34Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Requisitos1

• Conhecimento em HTML5, CSS & JavaScript.

Manifesto2

• Definir o arquivo de configuração (manifesto) do aplicativo.

Publicação3

• Executa-lo no simulador ou gerar o pacote e enviar para o Marketplace.

35Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Requisitos

• Aproveite o website/aplicativo existente ou desenvolva inteiramente do zero;

• Utilize recursos do HTML5 como LocalStorage, Manifesto Offline, IndexDB e WebAPIs conforme a necessidade.

• Utilize layout responsivo para adaptar-se para os vários tamanhos e rotações de telas.

36Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Requisitos

37Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Manifesto

• Crie um arquivo com extensão .webapp

• Defina o MIME Type para: application/x-web-app-manifest+json

• Evite dor de cabeça! Sempre ao modificar o arquivo verifique se o mesmo está correto: http://appmanifest.org/

38Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

{ "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" }}}, "default_locale": "en"}

39Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Publicação

https://marketplace.firefox.com/developers/

40Centro de InovaçãoTelefônica Brasil

Pública

Open Web App07

Publicação

https://marketplace.firefox.com/developers/

Pública

Tipos deAplicativos

08

42Centro de InovaçãoTelefônica Brasil

Pública

Tipos de Aplicativos08

Hosted App1

• Armazenado em seu servidor, fácil de atualizar, acesso limitado.

Installed Web App2

• Aplicativo empacotado revisado pela Marketplace.

CertifiedWeb App3

• Parte do OS, apenas para Mozilla e parceiros.

Aplicativos Hospedados vs Armazenados

Pública

WebAPIs e WebActivities

09

44Centro de InovaçãoTelefônica Brasil

Pública

Tipos de Aplicativo

• Vibration API

• Screen Orientation

• Geolocation API

• Mouse Lock API

• Open WebApps

• Network Information API

• Battery Status API

• Alarm API

• Push Notifications API

• WebFM API / FMRadio

• WebPayment

• IndexedDB

• Ambient light sensor

• Proximity sensor

• Notification

08

WebAPIs (Hosted Apps)

45Centro de InovaçãoTelefônica Brasil

Pública

Tipos de Aplicativo

• WebTelephony

• WebSMS

• Idle API

• Settings API

• Power Management API

• Mobile Connection API

• WiFi Information API

• WebBluetooth

• Permissions API

• Network Stats API

• Camera API

• Time/Clock API

• Attention screen

• Voicemail

08

WebAPIs (Certified Apps)

46Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

https://developer.mozilla.org/en-US/docs/WebAPI

47Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

var installapp = navigator.mozApps.install(manifestURL);installapp.onsuccess = function(data) { // App is installed};installapp.onerror = function() { // App wasn't installed, info is in // installapp.error.name};

Solicitando instalação de aplicativo

48Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

"permissions": { "contacts": { "description": "Required for autocomple in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications"} }

Solicitando permissões no manifesto

49Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

var b = navigator.battery;if (b) { var level = Math.round(b.level * 100) + "%", charging = (b.charging) ? "" : "not ", chargeTime = parseInt(b.chargingTime / 60, 10), dischargeTime = parseInt(b.dischargingTime/60,10); b.addEventListener("levelchange", show); b.addEventListener("chargingchange", show); b.addEventListener("chargingtimechange", show); b.addEventListener("dischargingtimechange", show);}

Verificando o status da bateria

50Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities

• configure

• costcontrol

• dial

• open

• pick

• record

• save-bookmark

• share

• view

• new, f.e type: “websms/sms” or “webcontacts/contact”

08

WebActivities

51Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

var call = new MozActivity({ name: "dial", data: { number: "+1804100100" }});

Exemplos de Discagem e Câmera

52Centro de InovaçãoTelefônica Brasil

Pública

WebAPIs e WebActivities09

var getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] }});getphoto.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); }};getphoto.onerror = function () { // error};

Exemplos de Discagem e Câmera

Pública

Contato

10

54Centro de InovaçãoTelefônica Brasil

Pública

ContatoLinks importantes

10

Negocios

Documentaçãoe

Apresentações

1 • https://marketplace.firefox.com/developers/

• https://developer.mozilla.org/pt-BR/docs/Mozilla/Firefox_OS

• http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers

• http://www.youtube.com/user/mozhacks

Ferramentase

Grupos

2

Repositórios

3

• https://hacks.mozilla.org/2013/03/firefox-os-simulator-previewing-version-3-0/

• https://addons.mozilla.org/pt-BR/firefox/addon/firefox-os-simulator/

• https://www.facebook.com/groups/ffosbr/

• irc.mozilla.org / #b2g #gaia #introduction #developers

• https://github.com/robnyman/Firefox-OS-Boilerplate-App

• https://github.com/Jaxo/fxosstub

• https://github.com/mozilla-b2g/B2G

• https://github.com/mozilla-b2g/gaia

Negocios

WebAPIs

4• https://wiki.mozilla.org/WebAPI

• https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status

• http://www.slideshare.net/robnyman/web-apis-apps-mozilla

55Centro de InovaçãoTelefônica Brasil

Pública

Contato10

@wupsbr

http://wupsbr.com

david@telefonicabeta.com

David RuizDesenvolvedor Evangelista @ Telefônica Digital

56Centro de InovaçãoTelefônica Brasil

Pública