Workshop de Firefox OS

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

[email protected]

Desenvolvedor Evangelista @ Telefônica Digital

Pública

O Início da internet

02


Pública

O Início da internet02

Pública

Web móvel

03


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


Pública

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

03

Internet


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


Pública

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

03

O HARDWARE

OS BROWSERS

OS SISTEMAS OPERACIONAIS

E OS ECOSSISTEMAS DE APLICATIVOS


Pública

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

03


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


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


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


Pública

Open Web Devices04

MOBILE WORLD CONGRESS 2012


Pública

Open Web Devices04


Pública

O Firefox OS

05


Pública

O Firefox OS

@codepo8

www.icant.co.uk

05

Por Christian Heilmann

Principal technical evangelist @ Mozilla


Pública

O Firefox OS05

O Fusca dos Smartphones!


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;


Pública

O Firefox OS05

Substituir os Feature Phones!


Pública

O Firefox OS05


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


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


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


Pública

HTML506


Pública

HTML506

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


Pública

HTML506

Pública

Open Web App

07


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.


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.


Pública

Open Web App07

Requisitos


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/


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


Pública

Open Web App07

Publicação

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

Pública

Tipos deAplicativos

08


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


09


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)


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)


Pública

WebAPIs e WebActivities09

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


Pública


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


Pública


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

Solicitando permissões no manifesto


Pública


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


Pública


• configure

• costcontrol

• dial

• open

• pick

• record

• save-bookmark

• share

• view

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

08

WebActivities


Pública


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

Exemplos de Discagem e Câmera


Pública


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


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


Pública

Contato10

@wupsbr

http://wupsbr.com

[email protected]

David RuizDesenvolvedor Evangelista @ Telefônica Digital


Pública

Workshop de Firefox OS

Technology

Transcript of Workshop de Firefox OS