Apps Days Firefox OS

Taller Firefox OS
App Days
1
Pablo Sepúlveda
Development Eng. Lead
Firefox OS Launch Team
Mozilla Chile

Mozilla, su misión
2
Taller Firefox OS App Days
●
Una comunidad
global de personas
que creemos en la
libertad, innovación,
y oportunidad son
las claves para
mantener internet
viva y accesible para
todos

3
●
Internet es un recurso publico global que
debemos mantener libre y accesible.
●
Internet debe enriquecer la vida de los seres
humanos.
●
La seguridad y privacidad de los usuarios en
Internet son fundamentales y no deben ser
tratados como algo opcional.
●
Los usuarios deben tener la posibilidad de
moldear Internet y su propia experiencia en
Internet.
¿Open Web?

4
Comunidad y Proyectos
● Comunidad de Mozilla en Chile - http://mozillachile.cl
● Comunidad Mozilla Hispano - http://mozilla-hispano.org
● Comunidad Global - http://mozilla.org
Proyectos
●
Webmaker, SUMO, QA, MDN, Difusión, Localización, Desarrollo
web, Firefox Marketplace, Complementos, Firefox OS, etc.

Introducción a Firefox OS
5

¿Qué es Firefox OS?
6
●
Nombre clave: Boot to
Gecko – B2G.
●
Un nuevo ecosistema de
sistemas operativos
móviles basados en
HTML5.
●
Un “nuevo” concepto:
Aplicaciones web
móviles →
multiplataforma.

Firefox OS: Algo de Historia
7
●
2010:
– Mozilla Labs publica un video de SeaBird,
idea de S.O. basado en Android.
– Ese mismo año, Mozilla lanza Open Web
Apps (marketplace).
– Telefónica da pie a una iniciativa junto a
AT&T para crear un S.O. móvil basado en
webkit (WAC).
●
2011:
– Mozilla inicia el Proyecto B2G. Se lanza un
pre-alpha.
– Telefónica fracasa con el WAC.

8
●
2012:
– En febrero, se lanza la versión 1.0.
– Telefónica anuncia apoyo a la Fundación Mozilla por B2G.
– En julio, cambia el nombre de B2G a Firefox OS.
– En octubre, Mozilla estrena el Firefox Marketplace.

9
●
2013:
– Pactos de cooperación con
LG, Alcatel, ZTE, Huawei.
– En septiembre, se lanza la
versión 1.0.1.
– Lanzamiento de la línea de
Geeksphone.
– En octubre, se lanza la
versión 1.1.
– Lanzamientos en España,
Brasil, México,Venezuela,
entre otros.
– En diciembre, se lanza la
versión 1.2.

10
●
2014:
– En enero, se anuncia a Panasonic
como nuevo partner y la inclusión
de Firefox OS en Smart TV's.
También se anuncia el TCP (Tablet
Contribution Program).
– En febrero, se lanza en Chile con
el dispositivo Alcatel One Touch
Fire.
– Cadena de lanzamientos en
Sudamérica.
– En marzo, se lanza la versión 1.3, actual estable oficial.
– En junio, se lanza la versión 1.4. Además se anuncia el
lanzamiento del Flame (Firefox OS Developer phone).
– En julio, se lanza la versión 2.0. Versión 2.1 pre-release.
– Lanzamientos en Centroamérica.
– En octubre, se proyecta el lanzamiento de la versión 2.1.

Firefox OS en la Actualidad
11
●
Versión estable: 1.3
●
Operadoras: Telefónica
y sus distintas filiales
(principal), América
Móvil (México),
operadoras chinas,
coreanas, alemanas,
entre otras.
●
Firefox OS en el mundo: Brasil, Chile, Colombia, El Salvador,
Francia, Alemania, Grecia, Hungría, Italia, Montenegro, México, Perú,
Polonia, Rusia, Serbia, España, Reino Unido, Estados Unidos,
Uruguay, Venezuela... y la lista sigue.

Arquitectura de Firefox OS
12
●
Basado en HTML5
y con kernel
Linux.
●
Consta de las
siguientes capas
principales de
abstracción
representadas en
la imagen.

Arquitectura de Firefox OS
13
En palabras simples:
●
Gonk: es el sistema operativo de bajo nivel de Firefox OS, consiste en
un kernel Linux y una capa de abstracción de hardware de espacio
de usuario (HAL).
●
Gecko: es el motor de renderizado que provee todo el soporte para
HTML, CSS y JavaScript. Esto hace que dichas APIs funcionen bien en
cualquier sistema operativo que soporte Gecko.
●
Gaia: es la interfaz de usuario de la plataforma Firefox OS. Está
implementado completamente usando HTML, CSS y JavaScript.
●
Haida: interfaz sucesora de Gaia. Implementación parcial desde la
v1.4 y completa desde la v2.0.

Entorno de Desarrollo
14
●
Desde las últimas
versiones de Firefox
y derivados.
●
Se accede mediante
about:app-manager
●
Administrador de apps, debug, simulador... todo en un
par de complementos.
●
Sin SDKs = KISS.

Hola Mundo en Firefox OS
15
●
Dos archivos a tener en cuenta: index.html y
manifest.webapp.
●
Creamos una carpeta “hola-mundo” y dentro
de ella los dos archivos mencionados
anteriormente.

16
●
En index.html:
<!DOCTYPE html>
<html>
<header>
<title>Prueba en Firefox OS</title>
<style>
body{
text-align: center;
}
</style>
</header>
<body>
<h1>Prueba</h1>
<p>
Hola mundo desde Firefox OS :-)
</p>
</body>
</html>

17
●
En manifest.webapp:
{
"version": "1.0",
"name": "Hola Mundo",
"launch_path": "/index.html",
"description": "Prueba en Firefox OS",
"icons": {
"128": "/images/logo128.png"
},
"developer": {
"name": "Pablo Sepúlveda",
"url": "http://www.psep.cl"
},
"installs_allowed_from": ["*"],
"default_locale": "es",
"permissions": {
}
}

18
●
Habrán notado que el archivo
manifest.webapp no es más que un JSON.
●
El manifest es el más importante y primordial
componente de nuestra aplicación. Realiza
todas las indicaciones de instalación y
ejecución en Firefox OS.

Lo que se viene: WebIDE
19
●
Si bien, para desarrollar apps no es necesario
más que un editor de texto, Mozilla a
incorporado un IDE totalmente web.
●
Se encuentra disponible en las versiones de
Firefox Nightly. Este es la evolución del app-
manager.
●
Se activa en el browser, cambiando a true el
parámetro “devtools.webide.enabled” en el
about:conf.

Lo que se viene: WebIDE
20

Aplicaciones
21
●
Con un manifest.webapp es posible convertir
cualquier página web en una “webapp”.
●
Esto indicando en el atributo “launch_path” la
url del index de la web.
●
¿Es real la dependencia de internet en las apps
de Firefox OS?
– Depende del tipo de aplicación.

Tipos de Aplicaciones
22
●
App Hosteada: es una página alojada en un
servidor web. Requiere conexión a internet.
●
App Empaquetada: posee todo sus recursos
(html, css, js, manifest, etc.) comprimidos en un
archivo zip. No requiere conexión a internet.
●
Más info en MDN: http://mzl.la/1pDgQm0

Herramientas de Desarrollo y
WebAPIs
23

Herramientas de Desarrollo
Desarrollo web:
●
Inspector de elementos
●
Colorzilla
●
Debug
●
IndexedDB Browser
24

Frameworks HTML5
●
Bootstrap http://getbootstrap.com/
●
jQuery Mobile http://jquerymobile.com/
●
Especializados en Firefox OS:
– Firefox OS boilerplate App (demo APIs)
https://github.com/robnyman/Firefox-OS-Boilerplate-A
pp
– Building-Blocks
https://github.com/buildingfirefoxos/Building-Blocks
– FxOsStub
http://jaxo.github.io/fxosstub/docs/index.html
25

Control de Versiones
●
GIT, el control de versiones de moda.
●
Plataforma popular y utilizada por Mozilla/Mozillians:
http://github.com
●
Cuenta de Mozilla https://github.com/mozilla
●
Mozilla Chile https://github.com/mozillachile
●
@psep en GitHub https://github.com/Psep
26

Introducción a las WebAPIs
●
Diferentes APIs con
distintos niveles de
seguridad.
●
Para acceder a APIs
que requieren
mayores privilegios se
requiere una
certificación para la
app (esto en
Marketplace). Esto es
parte de los Niveles
de Seguridad de
Firefox OS.
27
+Info: https://developer.mozilla.org/en-US/Apps/Build/App_permissions
Arquitectura de Seguridad de Firefox OS

●
APIs de Comunicación:
– Información de la red
– Bluetooth (requiere certificación)
– API de Conexión (requiere certificación)
– Estado de la red (requiere certificación)
– Socket TCP (requiere privilegios)
– Web Telephony API (requiere certificación)
– WebSMS (requiere certificación)
28

●
APIs de Acceso al Hardware:
– Sensor de luz
– Estado de batería
– Geolocalización
– PointerLock
– Proximidad
– Orientación de Pantalla y Dispositivo
– Vibración
– WebFM (si está disponible)
– Cámara (requiere certificación)
– Gestión de Energía (requiere certificación)
29

●
APIs de Gestión de Datos:
– FileHandle API
– IndexedDB
– Contactos (requiere privilegios)
– Device Storage API (requiere privilegios)
– Settings API (requiere certificado)
30

●
Otras APIs:
– Alarma
– Simple Push
– Web Notifications
– Apps API
– Web Activities
– WebPayment API
– Browser (requiere privilegios)
– Idle API (requiere certificación)
– API de Permisos (requiere certificación)
– Reloj API (requiere certificación)
31

●
Utilizaremos Firefox OS boilerplate App (demo APIs)
https://github.com/robnyman/Firefox-OS-Boilerplate-App
para revisar las WebAPIs.
●
Más información de WebAPIs en
https://developer.mozilla.org/en-US/docs/WebAPI
32

Firefox OS Styleguide
●
Diseño coherente e integrado con la interfaz gráfica.
●
Guía para el diseño de botones, componentes, colores,
etc.
●
Guía para el diseño de íconos.
●
Más info:
https://www.mozilla.org/en-US/styleguide/products/firefo
x-os/
●
Casi todo evitable utilizando templates.
33

Firefox Marketplace
●
Cuentas en Mozilla Persona.
– https://login.persona.org/
●
Firefox Marketplace para
developers.
– http://mzl.la/1vZ9Kgv
– http://mzl.la/1eGXCWx
34

Hackathon
●
El objetivo, realizar aplicaciones para Firefox OS.
●
Parámetros de evaluación.
●
Premiación, consiste en dos dispositivos Firefox OS. Se entregarán a las
dos mejores aplicaciones.
35

Referencias y Documentación
●
Roadmap Firefox OS: https://wiki.mozilla.org/B2G/Roadmap
●
Especificación Firefox OS: https://wiki.mozilla.org/FirefoxOS
●
Guía de referencia de apps en MDN:
https://developer.mozilla.org/en-US/Apps/Reference
●
Guía de Firefox OS en MDN:
https://developer.mozilla.org/es/Firefox_OS
●
Seguridad: https://developer.mozilla.org/en-US/Firefox_OS/Security
●
WebAPIs: https://developer.mozilla.org/en-US/docs/WebAPI
36

¡Muchas Gracias!
37
Contacto:
pablo.sepulveda@mozillachile.cl
http://www.psep.cl
@psep_cl
Contenido bajo licencia
Creative Commons By-Sa 3.0

Apps Days Firefox OS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Apps Days Firefox OS

Semelhante a Apps Days Firefox OS (20)

Último

Último (12)

Apps Days Firefox OS