This document provides an introduction to developing apps for Firefox OS. It explains that Firefox OS apps are really just webpages that have access to device hardware and APIs. To get started developing, a developer needs a text editor, Firefox browser, Firefox OS simulator add-on, and WebIDE. Apps are built with HTML and CSS for the user interface and JavaScript for logic and programming. The document walks through creating a simple "Hello World" app and provides examples of common JavaScript APIs for building Firefox OS apps, including APIs for making phone calls, sending SMS, accessing sensors, manipulating files, and more.

1. Apps Development
for Firefox OS &
Introduction to Web
APIs
Rashik Ishrak Nahian
rashik@nahian.me

2. WHAT IS
FIREFOX
OS ?

3. Firefox OS is actually
Firefox Browser .
That works as the
system for
smartphones. What
you feel & what you
is pure web

4. Architecture

6. How to develop apps for Firefox OS ?
if( HTML && CSS && JS)
{
start building Firefox OS Apps
}
else
{
you need to start learning those three items
above
}

7. So, your application is actually
a webpage?
Yes it is!
Webpage with access to your phone's
Hardware on demand.

8. Will it run only in internet ??
NO!!! It will run offline too. It will run
in Android too..

9. What do we need to start?
1. Any text editor
2. Firefox browser
3. Firefox OS Simulator Add On
4. WebIDE

10. To develop any application,
we worry about two things...

11. User Interface

12. & Controls!
Logic
programming,
loops, working
with data etc...

13. While building FirefoxOS apps, We
Build user interface with HTML &
CSS
& Javascript does the
programming!

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

16. 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
extension) in the hello
directory.

18. One more
step to turn
this into an
app!

19. 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.
Should be kept in the application root directory.
A simple JSON File . JSON== JavaScript Object Notation

21. Step 3: icon.png

23. How to run/test? I don't have
device!

24. Run your app in Firefox OS
Simulator
Open the WebIDE from:
Click Open Menu > Developer
>WebIDE

25. •Click on Open App > Open Packaged App > Select the app
directory
•Click Select Run time> Choose the simulator you want to
run
•The simulator will start
•Press PLAY Button to start
your app

26. Add some Style

27. More Fun: Add some scripts

28. You have created your first FirefoxOs app!

29. What We need in Apps

30. But, what JavaScript usually...

32. There are JavaScript APIs!
•For making phone calls
•For sending SMS
•For reading sensors
•For manipulating files
•For ....

33. API
Application Programming Interface

34. Screen Orientation

35. Device Orientation

36. Device Storage API

37. Geolocation
Enables your app to request the user's
current location and listen for location
changes.

38. Ambient Light Sensor API
Provides access to the ambient light
sensor, which lets your app detect the
ambient light level in the vicinity of the
device.

39. Battery Status API
Provides information about the battery's charge
level and whether or not the device is currently
plugged in and charging.

40. Pointer Lock API
Lets apps lock access to the mouse and gain
access to movement deltas rather than absolute
coordinates; this is great for gaming.