SlideShare a Scribd company logo
Kickstarting
FireFox OS
App Development
A.Mohammed Adam
Activist in FSFTN
Contributor in Mozilla
FirefoxOs App Development by Adam
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
Contents
1. Intro
2. Organization
3.Tools you'll need
4. Hello,World
5.Tips & Tricks
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
It's already live!
2. Organization of FirefoxOS Apps
To develop any application, we worry
about two things...
(Next Slides Will Tell)
User Interface
Pages, Forms, Buttons, sliders...
& Controls!
Organization
While building FirefoxOS apps, we

Build user interface with HTML & CSS

& Javascript does the programming!
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.
Let's Start!
3. Tools

Any text editor (to write code)

Firefox browser 37.0+ (to see output!)
Optionally (highly recommended):

FirefoxOs Simulator

Firebug (for debugging)
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.
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.
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.
Simulator
Hello, World!
It's time for a "HelloWorld" app, right now!
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.
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.
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.
Output
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!
Pressing ctrl + shft + M gives a
mobile app look-&-feel!
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.
Create manifest.webapp file in
project directory
We create manifest.webapp file (note the .webapp
extention) in hello directory:
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.
App in Firefox OS Simulator
We've added a Batman Icon
Too!
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.
Change the index.html file
to add the input elements
Create a file named hello.js
inside your project directory
Open Simulator and click
Update
Congratulations!
You have created your first
FirefoxOs app!
Tips &Tricks
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.
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!
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.
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!
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!
Mozilla Developer Network (MDN)
MDN Will be your one-stop center for docs.You may also check
out:

HTML5

JavaScript

CSS Docs
For Demos: Apps Showdown
Need inspiration?
See some cool apps in action in the Demo Studio.
You may also try the Marketplace from Simulator.
FirefoxOs App Development by Adam

More Related Content

PDF
Show & tell - Covert accessibility
PDF
Intro to IBM Bluemix DevOps Services, a Workshop with a Cloudant twist
PDF
Girl Scouts Website Designer Badge Seminar - Workbook
DOCX
Phonegap on iphone
PPT
Girl Scouts Website Designer Badge Seminar - Presentation Slides
PPTX
Firefox OS App Development
ODP
How Does Open Source Software Facilitate Education?
PPTX
03 eclipse basics & hello world
Show & tell - Covert accessibility
Intro to IBM Bluemix DevOps Services, a Workshop with a Cloudant twist
Girl Scouts Website Designer Badge Seminar - Workbook
Phonegap on iphone
Girl Scouts Website Designer Badge Seminar - Presentation Slides
Firefox OS App Development
How Does Open Source Software Facilitate Education?
03 eclipse basics & hello world

What's hot (20)

PPTX
DeveloperWeek2018 - Let's Build a Chatbot
KEY
Staff training
PPTX
Introduction to Adobe Brackets
PPTX
Windows phone apps
PPTX
Chatbots
PPT
Icon in iphone itouch
KEY
Skip the IDE with PhoneGap Build
PPTX
How to place a webapp icon on ios homescreen
PPT
How to add your power point
PPTX
Students
DOC
eTwinning New Twinspace - How To Add Web Content Page
PPT
Embedding a Video to your Netvibes Dashboard
PPTX
Posting Presentations to Ning
PDF
EasiShare AWS Setup Guide
PPTX
Evaluation question 6
PDF
Saving postscript file from Computer to Plate (CTP) in Pre-Press Department
PPTX
Whats New In Visual Studio 2010
PPTX
Google Drive: How to edit or view documents in offline mode
PDF
Filling Your Design Toolkit: Premium Assets on a Shoestring Budget
KEY
Adobe and Modern Web Development
DeveloperWeek2018 - Let's Build a Chatbot
Staff training
Introduction to Adobe Brackets
Windows phone apps
Chatbots
Icon in iphone itouch
Skip the IDE with PhoneGap Build
How to place a webapp icon on ios homescreen
How to add your power point
Students
eTwinning New Twinspace - How To Add Web Content Page
Embedding a Video to your Netvibes Dashboard
Posting Presentations to Ning
EasiShare AWS Setup Guide
Evaluation question 6
Saving postscript file from Computer to Plate (CTP) in Pre-Press Department
Whats New In Visual Studio 2010
Google Drive: How to edit or view documents in offline mode
Filling Your Design Toolkit: Premium Assets on a Shoestring Budget
Adobe and Modern Web Development
Ad

Viewers also liked (9)

PPT
New Framework for Improving Bigdata Analaysis Using Mobile Agent
ODP
Internet Surveillance
ODP
Basic commands of linux By Adam
ODP
Mozilla Tamil Localization
ODP
Blogging ( How to Create a Blog)
PDF
FSA recognition System
PPT
Cloudcomputing By Adam
ODP
Linux distro and its features by adam
ODP
Creation of Own Cloud
New Framework for Improving Bigdata Analaysis Using Mobile Agent
Internet Surveillance
Basic commands of linux By Adam
Mozilla Tamil Localization
Blogging ( How to Create a Blog)
FSA recognition System
Cloudcomputing By Adam
Linux distro and its features by adam
Creation of Own Cloud
Ad

Similar to FirefoxOs App Development by Adam (20)

PPTX
Apps development for Firefox OS & introduction to WebAPIs
PDF
<img src="../i/r_14.png" />
PDF
wexarts.org iPhone Project: Developer Documentation
PDF
A Complete Guide to Building Your First App with Flutter
PPT
iPhone application development training day 1
PDF
Adobe phonegap-workshop-2013
PPTX
Starting mobile development
PDF
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
PPT
Ios - Introduction to swift programming
KEY
Life cycle of iPhone application
KEY
Life Cycle of an iPhone App
PDF
Step-by-Step Guide to Developing a Successful iOS App.pdf
PPTX
Hybrid mobile app
PPTX
Hybrid Mobile App
PDF
Best iOS Application Development Tools.pdf
DOCX
Step-by-Step Guide to Developing a Successful iOS App.docx
ODP
Firefox OS Application Development
PDF
Mobile App Development Tools For Building Apps
PPTX
Web browser extensions development
PDF
Progressive Web Application by Citytech
Apps development for Firefox OS & introduction to WebAPIs
<img src="../i/r_14.png" />
wexarts.org iPhone Project: Developer Documentation
A Complete Guide to Building Your First App with Flutter
iPhone application development training day 1
Adobe phonegap-workshop-2013
Starting mobile development
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Ios - Introduction to swift programming
Life cycle of iPhone application
Life Cycle of an iPhone App
Step-by-Step Guide to Developing a Successful iOS App.pdf
Hybrid mobile app
Hybrid Mobile App
Best iOS Application Development Tools.pdf
Step-by-Step Guide to Developing a Successful iOS App.docx
Firefox OS Application Development
Mobile App Development Tools For Building Apps
Web browser extensions development
Progressive Web Application by Citytech

More from Mohammed Adam (20)

PPTX
Android Penetration Testing - Day 3
PPTX
Android Penetration testing - Day 2
PPTX
Android Penetration Testing - Day 1
PPTX
Wireless Penetration Testing
PPTX
Network Penetration Testing
PPTX
Basic Foundation For Cybersecurity
PPTX
Golden Ticket Attack - AD - Domain Persistence
PPTX
Evading Antivirus software for fun and profit
PDF
Introduction to Network Fundamentals
PPTX
Breaking out of crypto authentication
PPTX
Cybersecurity Awareness Session by Adam
PPTX
Career Guidance on Cybersecurity by Mohammed Adam
PPTX
Introduction to null villupuram community
PPTX
Internet security
PDF
BugBounty Roadmap with Mohammed Adam
PPTX
Webinar On Ethical Hacking & Cybersecurity - Day2
PPTX
OSINT - Open Soure Intelligence - Webinar on CyberSecurity
PPTX
Android Application Penetration Testing - Mohammed Adam
PPTX
Vulnerability assessment & Penetration testing Basics
PPT
What is SSL ? The Secure Sockets Layer (SSL) Protocol
Android Penetration Testing - Day 3
Android Penetration testing - Day 2
Android Penetration Testing - Day 1
Wireless Penetration Testing
Network Penetration Testing
Basic Foundation For Cybersecurity
Golden Ticket Attack - AD - Domain Persistence
Evading Antivirus software for fun and profit
Introduction to Network Fundamentals
Breaking out of crypto authentication
Cybersecurity Awareness Session by Adam
Career Guidance on Cybersecurity by Mohammed Adam
Introduction to null villupuram community
Internet security
BugBounty Roadmap with Mohammed Adam
Webinar On Ethical Hacking & Cybersecurity - Day2
OSINT - Open Soure Intelligence - Webinar on CyberSecurity
Android Application Penetration Testing - Mohammed Adam
Vulnerability assessment & Penetration testing Basics
What is SSL ? The Secure Sockets Layer (SSL) Protocol

Recently uploaded (20)

PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
cuic standard and advanced reporting.pdf
PDF
Encapsulation theory and applications.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Empathic Computing: Creating Shared Understanding
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Electronic commerce courselecture one. Pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPT
Teaching material agriculture food technology
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Review of recent advances in non-invasive hemoglobin estimation
Digital-Transformation-Roadmap-for-Companies.pptx
Mobile App Security Testing_ A Comprehensive Guide.pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
Reach Out and Touch Someone: Haptics and Empathic Computing
Spectral efficient network and resource selection model in 5G networks
cuic standard and advanced reporting.pdf
Encapsulation theory and applications.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Building Integrated photovoltaic BIPV_UPV.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
The AUB Centre for AI in Media Proposal.docx
Advanced methodologies resolving dimensionality complications for autism neur...
Empathic Computing: Creating Shared Understanding
Understanding_Digital_Forensics_Presentation.pptx
Electronic commerce courselecture one. Pdf
Per capita expenditure prediction using model stacking based on satellite ima...
Teaching material agriculture food technology
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows

FirefoxOs App Development by Adam

  • 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
  • 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...
  • 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.
  • 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.
  • 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.
  • 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!
  • 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.