Workshop realizado na Telefônica VIVO para parceiros.

1. Centro de Inovação – Telefônica Brasil
16.08.2013
Desenvolvendo para FXOS
Firefox OS

2. Índice
Introdução
01
02
03
04
O Início da internet
Web móvel
Open Web Devices
05
O Firefox OS
06
HTML5
07
Open Web App
08
09
Tipos de Aplicativos
WebAPIs e WebActivities
10
Contato

3. Introdução
01

4. 4
Centro de Inovação
Telefônica Brasil
Introdução01
David Ruiz
@wupsbr
http://wupsbr.com
david@telefonicabeta.com
Desenvolvedor Evangelista @ Telefônica Digital

5. O Início da internet
02

6. 6
Centro de Inovação
Telefônica Brasil
O Início da internet02

7. Web móvel
03

8. 8
Centro de Inovação
Telefônica Brasil
Web móvel
Desde 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 Stats
Mary Meeker - KPBC
1% in 12/09
4% in 12/10
10% in 5/12

9. 9
Centro de Inovação
Telefônica Brasil
Web móvel
Com esta mudança de comportamento, novos sistemas operacionais
fechados surgiram.
03
Internet

10. 10
Centro de Inovação
Telefônica Brasil
Web móvel
Apenas duas plataformas dominam mais de 74% do mercado móvel ...
03
Source: Gartner, Feb 2012
Android + iOS
74.7% of the smarpthone OS Market
50,9%
23,8% 11,7% 8,8% 4,8%Android
iOS Symbian RIM Others

11. 11
Centro de Inovação
Telefônica Brasil
Web móvel
... passando a controlar ...
03
O HARDWARE
OS BROWSERS
OS SISTEMAS
OPERACIONAIS
E OS ECOSSISTEMAS
DE APLICATIVOS

12. 12
Centro de Inovação
Telefônica Brasil
Web móvel
... e impedindo a concorrência.
03

13. 13
Centro de Inovação
Telefônica Brasil
Web móvel
Para 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

14. 14
Centro de Inovação
Telefônica Brasil
Web móvel
Com 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

15. Open Web Devices
04

16. 16
Centro de Inovação
Telefônica Brasil
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

17. 17
Centro de Inovação
Telefônica Brasil
Open Web Devices04
MOBILE WORLD CONGRESS 2012

18. 18
Centro de Inovação
Telefônica Brasil
Open Web Devices04
MOBILE WORLD CONGRESS 2013

19. 19
Centro de Inovação
Telefônica Brasil
Open Web Devices04
MOBILE WORLD CONGRESS 2013

20. O Firefox OS
05

21. 21
Centro de Inovação
Telefônica Brasil
O Firefox OS
@codepo8
www.icant.co.uk
05
Por Christian Heilmann
Principal technical evangelist @ Mozilla

22. 22
Centro de Inovação
Telefônica Brasil
O Firefox OS05
O Fusca dos Smartphones!

23. 23
Centro de Inovação
Telefônica Brasil
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;

24. 24
Centro de Inovação
Telefônica Brasil
O Firefox OS05
Substituir os Feature Phones!

25. 25
Centro de Inovação
Telefônica Brasil
O Firefox OS05

26. 26
Centro de Inovação
Telefônica Brasil
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

27. 27
Centro de Inovação
Telefônica Brasil
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

28. 28
Centro de Inovação
Telefônica Brasil
O Firefox OS
• A interface de usuário, totalmente construída por APIs
de HTML5 e Open Web.
05
Gaia

29. HTML5
06

30. 30
Centro de Inovação
Telefônica Brasil
HTML506

31. 31
Centro de Inovação
Telefônica Brasil
HTML506
http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/

32. 32
Centro de Inovação
Telefônica Brasil
HTML506

33. Open Web App
07

34. 34
Centro de Inovação
Telefônica Brasil
Open Web App07
Requisitos
1
• Conhecimento em HTML5, CSS & JavaScript.
Manifesto
2
• Definir o arquivo de configuração (manifesto) do aplicativo.
Publicação
3
• Executa-lo no simulador ou gerar o pacote e enviar para o Marketplace.

35. 35
Centro de Inovação
Telefônica Brasil
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.

36. 36
Centro de Inovação
Telefônica Brasil
Open Web App07
Requisitos

37. 37
Centro de Inovação
Telefônica Brasil
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/

38. 38
Centro de Inovação
Telefônica Brasil
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"
}

39. 39
Centro de Inovação
Telefônica Brasil
Open Web App07
Publicação
https://marketplace.firefox.com/developers/

40. 40
Centro de Inovação
Telefônica Brasil
Open Web App07
Publicação
https://marketplace.firefox.com/developers/

41. Tipos de
Aplicativos
08

42. 42
Centro de Inovação
Telefônica Brasil
Tipos de Aplicativos08
Hosted App
1
• Armazenado em seu servidor, fácil de atualizar, acesso limitado.
Installed Web App
2
• Aplicativo empacotado revisado pela Marketplace.
CertifiedWeb App
3
• Parte do OS, apenas para Mozilla e parceiros.
Aplicativos Hospedados vs Armazenados

43. WebAPIs e
WebActivities
09

44. 44
Centro de Inovação
Telefônica Brasil
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)

45. 45
Centro de Inovação
Telefônica Brasil
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)

46. 46
Centro de Inovação
Telefônica Brasil
WebAPIs e WebActivities09
https://developer.mozilla.org/en-US/docs/WebAPI

47. 47
Centro de Inovação
Telefônica Brasil
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

48. 48
Centro de Inovação
Telefônica Brasil
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

49. 49
Centro de Inovação
Telefônica Brasil
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

50. 50
Centro de Inovação
Telefônica Brasil
WebAPIs e WebActivities
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• new, f.e type: “websms/sms” or “webcontacts/contact”
08
WebActivities

51. 51
Centro de Inovação
Telefônica Brasil
WebAPIs e WebActivities09
var call = new MozActivity({
name: "dial",
data: {
number: "+1804100100"
}
});
Exemplos de Discagem e Câmera

52. 52
Centro de Inovação
Telefônica Brasil
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

53. Contato
10

54. 54
Centro de Inovação
Telefônica Brasil
Contato
Links importantes
10
Negocios
Documentação
e
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
Ferramentas
e
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

55. 55
Centro de Inovação
Telefônica Brasil
Contato10
@wupsbr
http://wupsbr.com
david@telefonicabeta.com
David Ruiz
Desenvolvedor Evangelista @ Telefônica Digital

56. 56
Centro de Inovação
Telefônica Brasil