Kickstarting Firefox OS app Development

APP DEVELOPMENT

KICKSTARTING

We just need to know basics of Web technologies

● HTML for defining the elements and page.

● CSS for Designing the elements.

● JS for doing manipulation and adding to DB

CAN YOU DEVELOP EASILY

PHILOSOPHY

So Firefox OS apps are HTML based apps..Will it run only in internet ??

NO!!! It will run offline too. It will run in Android too..

Tool for Development

Firefox Browser or Firefox Nightly BrowserText Editor and / or WebIDEFirefox OS simulator

Text Editor or WebIDE

We want to type the various content for our app in .html file

We want to tell about our design in .css file

We want to tell about our manipulation in .js file

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.

Web IDE

Web IDE

Installing Simulator

Click on Select Run TimeClick on Install SimulatorFrom that window Appearing choose stable version ( Firefox OS 2.0)

Opening Simulator● Click on Select Runtime● In that installed version

of Simulators will be listed.

● Choose anyone among them

Hello World app

Open WebIDE

Click Open Menu > Developer > WebIDEClick Project > New app >Privileged Empty AppGive Project Name Hello WorldGive the destination where you want to save.

manifest file{ "name": "Name of the APP", ---> Less than 12 characters "description": "description about app", -----> more than 25 character "launch_path": "/index.html", ---> first page which should run when app starts "icons": { "60": "/icons/icon60x60.png", "128": "/icons/icon128x128.png" ---> Mandaotry icon }, "type": "privileged", ---> No need unless we use API’s "permissions": {} ---> remove if empty“developer” : {name: developer name }}

Edit HTML & CSS

Check index.html open itCheck app.css open itClick Select Runtime> Choose the simulator you want to runClick on Install and Run

Firefox Marketplace Signin

Visit the websitegoto https://marketplace.firefox.com/

Click on Register button● Give your Email for which you

need to create account● Give your new password● Give Year of birth● Click on Signup● Check your inbox for

Verification mail.● Click on it to activate your

account.

Firefox Marketplace Developer HUB

Submit an App

First Visit developer hub website https://marketplace.firefox.com/developers

Click on Submit apphttps://marketplace.firefox.com/developers/submit

You read terms and conditions and accept it.

Select the App type and Ecosystem

Select the App type and Ecosystem(contd..)

If you want in Firefox OS devices, Android devices, tablets and Desktop select all. Or depending on your app optimized for select them.

Choose whether packaged app or hosted app. If packaged app upload zip file.

If web app give proper manifest URL

App Details● Tell about your app in detail. Give atleast 50 words

description. It helps in searching app.● Give categories names.● Privacy Policy of your apps.● If you use different homepage you give its address● Support website address or personal blog address● Support email

App Details (Contd..)

App Details (Contd..)

App Details (Contd..)

Tell whether Flash is required.Give screenshots which are taken when the apps were running.If you want to say about the version tell to reviews. Especially changes in future version.

App Details (Contd..)

App Details (Contd..)Give your Content rating by clicking Content Rating. It will goto https://www.globalratings.com/IARCProdRating/Submission.aspxFill them correctly.Wait for Reviewer to Review. ;)Done

Contact me

[email protected]@iamVP7

THANK YOU