Kick Start to Firefox OS App Development

What??!!!

Firefox OS

Yes It is...

It is an OS for Mobile Device

Small Description

It is b2g(Boot 2 Gecko) interfacing as an rendering engine in Smartphones

 

Everything you see or feel in it is nothing but pure Web Technology

Web Developers here...Anybody?

Raise Your Hands Please...

So Developers...

What Technology is required to build Firefox OS App?

Its Nothing, but...

HTML/HTML5

CSS/CSS3

And...

Java Script

Thats it...

The Concept of Web App

  • Web -> Open Standards

  • App -> Applications

  • WebApp -> Webpage or Collection of Webpages made using open web technology

Is The Webpage an Application?

Absolutely It is... :)

No SDK?

Sorry Guys...

No SDK :(

But What U have?

Firefox Web APIs (https://wiki.mozilla.org/WebAPI)

1. Phone Calls, SMS, Bluetooth, Camera, Location, Vibration, Contacts etc.

2. But they are Java Script APIs

Gaia Building Blocks + Js

(https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks)

Gaia Building Block

Pre Made UI Components, with HTML+CSS, Ready to Copy & Paste!!!

 

JS libraries to detect gestures, access to local storage

What do we need to Get Started?

Mozilla Firefox

https://www.mozilla.org/firefox/

B2G Simulator

https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

And...

Your Favourite Text-Editor

"Hello World" Application

File Structure

- hello/

      - index.html

      - manifest.webapp

      - images/

             - icon.png

index.html

<DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

manifest.webapp

{

  "version": "1.0.0",
  "name": "Hello World",
  "description": "Loreum Ipsum Blah Blah Blah",
  "launch_path": "/index.html",
  "icons": { "128": "/images/icon128.png" },
  "developer": { "name": "Ayan Choudhury"   },
  "installs_allowed_from": ["*"],
 "default_locale": "en"

}

icon.png

Lets Try It!!!

Tools / Web Developer / Firefox OS Simulator

Click on Add Directory

Select the Manifest File

And We Are Done

Distribute your Apps on the web

Don't Have a Device to Run/Test App?

No Worry...

Follow This...

Firefox Browser

(Ctrl + Shift + M)

 

OR

 

Firefox OS Simulator

Now its your time

Get Your Hands Dirty & Start Developing

marketplace.firefox.com

Visit Today

@technoayan

Kick Start to Firefox OS App Dev

By Ayan Choudhury

Kick Start to Firefox OS App Dev

This slides will help you out regarding Firefox OS App Development. Go through it and start making App.

  • 977