Sandesh Gade
Abhiram Ravikumar

OUTLINE


  • Architecture
  • Web apps Development
  • App Validation
  • Simulator Testing
  • Publishing Apps
  • Game Dev Intro
  • Find your field

THE ARCHITECTURE

Mozilla Developer Network




  • Web apps are apps built using standard Web technologies.

They work in any modern Web browser, and can be developed
using your favorite tools.


  • The Open Web apps project proposes some small additions to existing sites to turn them into apps that run in a rich, fun, and
                                   powerful computing environment.


  • These apps run on desktop browsers and mobile devices, and are easier for a user to discover and launch than Web sites.

for Web developers


  1. Create the app manifest.
  2. Serve the manifest with .webapp
  3. Appify the code.
  4. Validate the markup.
  5. Simulate the tarball.
  6. You're DONE!

YES! YOU CAN !

  • Reuse any existing web site/app or develop from scratch with
    open web standards.


  • Utilize HTML5 features such as localStorage, offline manifest,
    IndexedDB and access Web APIs for more options.


  • Responsive web design for adapting to varying resolutions and screen orientation.


START WITH THE MANIFEST

<ONCE THE CODE IS READY>


{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  },
  "default_locale": "en"
}

MANIFEST REFERENCE



https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest

deep dive

into

"" API ""


// Telephony object
var tel = navigator.mozTelephony;


// Check if the phone is muted (read/write property)
console.log(tel.muted);


// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);




// Place a call

var cal = tel.dial(“123456789”);

// SMS object

var sms = navigator.mozSMS;

// Send a message
sms.send("123456789", "Hello");



// Recieve a message
sms.onreceived = function (event) {

// Read message
console.log(event.message);
};


// Vibrate for one second
navigator.vibrate(1000);


// Vibration pattern [vibrationTime, pause,…]
navigator.vibrate([200, 100, 200, 100]);


// Vibrate for 5 seconds
navigator.vibrate(5000);


// Turn off vibration
navigator.vibrate(0);

var contact = new contact();
contact.init({name: "Tom"});
var request = navigator.contacts.save(contact);



request.onsuccess = function() {
   console.log("Success");



request.onerror = function() {
 console.log("Error")

// Portrait mode:
screen.mozLockOrientation("portrait");


/*
    Possible values:
        "landscape"
        "portrait"
        "landscape-primary"
       "landscape-secondary"
           "portrait-primary"
        "portrait-secondary"
*/



var connection = window.navigator.mozConnection,



    online = connection.bandwidth > 0,



    metered = connectrion.metered;


Ctrl + Shift + M


Responsive Design


LET'S

SIMULATE IT


Tools -> Web Developer -> App Manager
App Manager - games

NOTE
Simulator does not simulate the hardware limitations

functionality

  1. Push to Device.
  2. Rotation simulation.
  3. Basic geolocation API simulation.
  4. Manifest validation.
  5. Stability fixes for installation and updates to apps.
  6. Newer versions of the Firefox rendering engine 
  7. Updated Gaia (the UI for Firefox OS).


REFERENCES

Essential Components

http://buildingfirefoxos.com


Marketplace Intro

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


Game Dev

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



Design your icon!


https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/


UPLOAD YOUR APP :D




queries?


Twitter handle

@MozillaIN

#FirefoxOSAppDays


MozNet IRC (irc.mozilla.org)

#openwebapps

#b2g

THANK YOU!


PES Institute of Technology, Bangalore South Campus

Facebook :fb.com/FirefoxClubPESITSOUTH


CREDITS

BootCampMozilla

By Abhiram Ravikumar

BootCampMozilla

These are the slides made for the event Mozilla Boot Camp at PESIT, Bangalore South.

  • 978
Loading comments...

More from Abhiram Ravikumar