workshop de firefox os
DESCRIPTION
Workshop realizado na Telefônica VIVO para parceiros.TRANSCRIPT
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
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 RuizDesenvolvedor Evangelista @ Telefônica Digital
56Centro de InovaçãoTelefônica Brasil
Pública