A Firefox OS app in five minutes
Upcoming SlideShare
Loading in...5
×
 

A Firefox OS app in five minutes

on

  • 1,612 views

A short introduction to developing apps for Firefox OS. ...

A short introduction to developing apps for Firefox OS.
This first roundup covers two parts:

A. Introduction

* Firefox OS Simulator
* Same Origin Policy
* WebApp Manifest
* Installation

B. Sample app

* Overview source files
* Assets and styleguide
* Deployment to simulator
* Deployment to »Firefox Marketplace«
* Getting started: 6 steps

Statistics

Views

Total Views
1,612
Views on SlideShare
1,610
Embed Views
2

Actions

Likes
0
Downloads
26
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A Firefox OS app in five minutes A Firefox OS app in five minutes Presentation Transcript

  • Markus Greve November 2013 Kochan & Partner Brand Design Development A Firefox OS app in five minutes Short introduction
  • A. Introduction Firefox OS Simulator Same Origin Policy WebApp Manifest Installation B. Sample app Overview source files Assets and styleguide Deployment to simulator Deployment to »Firefox Marketplace« Getting started: 6 steps 2 Kochan & Partner Brand Design Development
  • A. Introduction 3 Kochan & Partner Brand Design Development
  • Firefox OS Simulator Simulator 4.0 Geeksphone Keon Firefox OS 1.1 320 x 480 Firefox OS 1.1 or 1.2 320 x 480, 3.5 inch, 165 ppi Single core, 800 MHz RAM 512 MB Internal HD 4 GB Camera 3.1 MP Home button Simulate location Rotate phone portrait / landscape 4 Kochan & Partner Brand Design Development
  • Firefox OS Simulator AddOn for Firefox 24/25 https://addons.mozilla.org/de/firefox/addon/firefox-os-simulator Hint 5 Simulator 4.0 on Firefox 24/25 crashes on OS X 10.9 Mavericks. Use Firefox 26b and »App Manager« to install simulator. Kochan & Partner Brand Design Development
  • Firefox OS Simulator – Firefox 26 beta Firefox OS 1.2 No more direct buttons for orientation and location?! 6 Kochan & Partner Brand Design Development
  • Same Origin Policy App access is sandboxed Installation of apps is limited to same origin as manifest – domain – protocol – port Hint 7 You need one subdomain per app! Kochan & Partner Brand Design Development
  • WebApp Manifest Named usually manifest.webapp JSON file (~ info.plist for iOS apps) https://developer.mozilla.org/en-US/Apps/Developing/Manifest Mime-Type AddType application/x-web-app-manifest+json .webapp Hint Stick to the data types of the documentation, e.g. "fullscreen": "true" // not boolean true "version": "0.1" // not floating point 0.1 Validation https://marketplace.firefox.com/developers/validator 8 Kochan & Partner Brand Design Development
  • WebApp Manifest: Sample (1) { "name": "Test App", "version": "0.1", "description": "Short description of the app.", "developer": { "name": "Markus Greve", "url": "http://www.kochan.de" }, "launch_path": "/index.html", "icons": { "120": "90": //... }, "/assets/icon-120.png", "/assets/icon-90.png", //... 9 Kochan & Partner Brand Design Development
  • WebApp Manifest: Sample (2) //... "orientation": ["portrait"], "fullscreen": "true", "default_locale": "en", "installs_allowed_from": [ "https://marketplace.firefox.com", "https://app-specific-subdomain.kochan.de" ] } 10 Kochan & Partner Brand Design Development
  • WebApp Manifest: Overview activities locales appcache_path manifest values chrome messages csp name* default_locale orientation description* origin developer { name, url } permissions fullscreen redirects icons { 256, 128, 32 } type installs_allowed_from version launch_path * required 11 Kochan & Partner Brand Design Development
  • Installation Mozilla-specific API navigator.mozApp Check if already installed navigator.mozApp.checkInstalled(url) Perform installation navigator.mozApp.install(url, [receipts]) 12 Kochan & Partner Brand Design Development
  • Installation: Sample window.onload = function() { var check = navigator.mozApps.checkInstalled('http://...manifest.webapp'); check.onsuccess = function() { if (check.result) { // installed - nothing to do here, proceed } else { // not installed var install = navigator.mozApps.install('http://...manifest.webapp'); install.onsuccess = function() { alert('Installation successful!'); }; install.onerror = function() { alert('Install failed, error: ' + this.error.name); }; } }; check.onerror = function() { alert('Error checking installation status: ' + this.error.message); }; } 13 Kochan & Partner Brand Design Development
  • B. Sample app 14 Kochan & Partner Brand Design Development
  • Overview source files 2 manifest.webapp 3 1 index.html Download Package http://lab.kochan.de/mg/fox/package.zip 15 some assets icon-32.png icon-128.png icon-256.png Kochan & Partner Brand Design Development
  • Assets and styleguide Styleguide for user interface https://www.mozilla.org/en-US/styleguide/products/firefox-os Hint Powerpoint template – Draw icon shapes – Re-arrange object order to keep overlay on top – Export slide as image (about 3000 x 3000 px) – cutout transparent image areas – Re-size images to your needs 16 Kochan & Partner Brand Design Development
  • Deployment to Simulator Parsed manifest meta data App name, description, icon Developer Live-Debugging – console – inspector – ... URL of the webapps manifest file 17 Kochan & Partner Brand Design Development
  • Deployment to »Firefox Marketplace« https://marketplace.firefox.com/developers/ Device: Phone, Browser, Firefox Mobile/Tablet on Android Pricing: billing just in a couple of countries – not in Germany Human based-approval Position in queue and estimated time of approval is displayed after upload. E.g. #37 of 37. About 6 days remaining. 18 Kochan & Partner Brand Design Development
  • Getting started: 6 steps 1 Install Firefox 26 beta 2 Install App-Manager and simulator: about:app-manager 3 Grab a (sub-)domain 4 Download simple starter package http://lab.kochan.de/mg/fox/package.zip 5 6 19 Adjust path settings in index.html and manifest.webapp Deploy your app to the simulator and see it work together Kochan & Partner Brand Design Development
  • Thanx. Kochan & Partner Brand Design Development © 2013 – All rights reserved Kochan & Partner GmbH Hirschgartenallee 25 D–80639 Munich Phone +49 89 178 49 78 Fax +49 89 178 1235 kontakt@kochan.de www.kochan.de