This Above Presentation Tells about How to Create our own FirefoxOS Apps &How to Publish it in Marketplace.&Tips,Tricks &Demos.

1. Kickstarting
FireFox OS
App Development
A.Mohammed Adam
Activist in FSFTN
Contributor in Mozilla

3. Yes you can!
• You can start building Firefox os apps right now
if...
•You know HTML basics
•You know basics of JavaScript
•You have some idea with CSS

4. Contents
1. Intro
2. Organization
3.Tools you'll need
4. Hello,World
5.Tips & Tricks

5. 1. Intro
• A brand new OS for smart phones
• User-interface & Apps are written with HTML,
CSS & JS
• We're interested in building apps which runs in
devices having FirefoxOS

6. It's already live!

7. 2. Organization of FirefoxOS Apps
To develop any application, we worry
about two things...
(Next Slides Will Tell)

8. User Interface
Pages, Forms, Buttons, sliders...

9. & Controls!

10. Organization
While building FirefoxOS apps, we

Build user interface with HTML & CSS

& Javascript does the programming!

11. Philosophy

So, FirefoxOs apps are basically Web Apps!

And since HTML/CSS/JavaScripts are standards, these apps
run not only in FirefoxOs devices, but on any device that have
a browser!!! (Yes, on your Android too*)

Don't misunderstand web apps - they run offline, too!

* Some APIs don't work in all browsers.

12. Let's Start!

13. 3. Tools

Any text editor (to write code)

Firefox browser 37.0+ (to see output!)
Optionally (highly recommended):

FirefoxOs Simulator

Firebug (for debugging)

14. Text Editor

Any text editor will work.We'll be making following types of
files:

HTML (.html)

JavaScript (.js)

CSS (.css)

You can use Sublime, Notepad++, Netbeans, Eclipse or
even the basic editor which comes with your OS.

15. Firefox Browser
To see the complete functionality of your app, we'll use
Firefox Browser - the desktop browser we all love.
We'll open the HTML files with our browser.

16. App Manager

App Manager comes built-in with Firefox37.0+.

App manager can be used to Install Firefox OS simulator or
to send apps to your device.

17. Simulator

18. Hello, World!
It's time for a "HelloWorld" app, right now!

19. Step 1: Create a directory
named hello

Create a directory named hello anywhere in your computer.

This will be the base directory - we put all files of our app here.

20. Step 2: Create file named
index.html
Create a file index.html (it doesn't need to be index.html, it
could be any name with .html extention) in the hello directory.

21. See it in your browser
Open the index.html file with your Firefox Browser.You can
double-click or right-click then open with FirefoxBrowser.

22. Output

23. TIPS
But...doesn't look like a mobile app!
Because, we've not taken care of screen size & others.
To test mobile screens with various sizes, press Control +
Shift + M in your Firefox!

24. Pressing ctrl + shft + M gives a
mobile app look-&-feel!

25. Step 3: Create Manifest file

All Firefox OS apps need a manifest file.

The manifest file tells the app's name, description, permissions it
requires and some other basic settings.

Manifest file can have any name, but it should have .webapp
extension.

26. Create manifest.webapp file in
project directory
We create manifest.webapp file (note the .webapp
extention) in hello directory:

27. Install app in the simulator!
1. Open App Manager by typing about:app-manager in the
address bar of browser
2. click Start Simulator > Firefox OS 1.4 from the bottom
bar
3. Click Add Packaged App & select the folder which contains
manifest.webapp file you just created.
4. Click update
Bingo! Go to the simulator & fine our app installed.

28. App in Firefox OS Simulator

29. We've added a Batman Icon
Too!

30. More Fun: Add some scripts
We will add a text input box and a button in our simple app.
When user clicks button, an alert box with the text in the input
field will be shown.

31. Change the index.html file
to add the input elements

32. Create a file named hello.js
inside your project directory

33. Open Simulator and click
Update

34. Congratulations!
You have created your first
FirefoxOs app!

35. Tips &Tricks

36. Do we need to use the
Simulator?
Not really.You can test your app using the Firefox Browser. I
can test all the functionalities almost, using the browser &
mobile view.
So each time you update your app you can test by just
refreshing the browser.

37. Using Frameworks

To give your app a mobile application like look and feel, you can
use many frameworks.

jQuery Mobile is a cool framework, which turns your HTML
stuffs into cool mobile app!

Also handle mobile input events like tap, tap-&-hold, swipe
etc!

Building an app in 6 minutes using jQuery Mobile - you
won't regret this!

Also shows usage of drag & drop interface to build UI!

38. Responsive Frameworks
Instead of building a framework from scratch, using a framework
that support responsive design would be good idea.
Jquery Mobile is responsive!
Many other responsive frameworks exist, of course.

39. Building Blocks
Check out Building Blocks to easily apply native look & feel and
UI elements, transitions etc.
Many works are done already for your app!

40. Publishing your app
Once you've completed your app, you need to upload it in a
server, and share the link.
Firefox Marketplace
You can submit your app in the Firefox Marketplace for more
publicity!

41. Mozilla Developer Network (MDN)
MDN Will be your one-stop center for docs.You may also check
out:

HTML5

JavaScript

CSS Docs

42. For Demos: Apps Showdown
Need inspiration?
See some cool apps in action in the Demo Studio.
You may also try the Marketplace from Simulator.