Ayan Choudhury
Founder & CEO - TheoreX | Startup Enthusiast | Open Source Enthusiast | Wikimedian | Mozillian
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.
