Devtantra Blog

Tutorials about Android, Angular, ReactJS, PHP, MySQL and Web Development

Intro Firefox OS & APP Part 2

Hi,Today I am explaining the next part of Intro Firefox OS & APP. Here i’ll explain you some simple procedure by which you’ll create awesome & cool applications for Firefox OS. Firefox OS application are created by the help of HTML5, CSS3, Javascript as like Phonegap. Here i’ll use one another tool of firefox by which you will create your app,monitor your app and also you’ll see its working process etc.. Its tool name is Web IDE, APP-manager Tools…

firefox-os

But before i start this i accept that you have good knowledge about HTML5, CSS/CSS3, Java-script because these are languages by which you will create app for firefox os. So if you are not good in this languages then i recommend you to complete some HTML5, CSS, Javscript courses from codecademy….

Basic of Firefox OS APP

The Firefox os app is same like as Web App but the main change is that this web page is completely base on HTML5, CSS ,Javascript and if you want to use some api then you will take help from Mozilla API’s References… In firefox two type of application process are available.

  • Hosted APP :- Remote serve Applications
  • Package APP :-Its app content loaded from zip file instead of remote server

for design any application for firefox you need to create some file and these are

  • Application mainfest
  • index.html
  • app.js

These are basics file which is required for firefox os application. Here mainfest file explain us about the application, this file is as like JSON file which will explain to firefox market place about app etc. it will carry app name, description and etc.. Index.html provide the architecture of our app, CSS provide the look and javascript provide the functionality to our app as like human brain …. Here i’ll hello app for firefox. Let start

Getting started

  • Open the APP-Manager in firefox by this address (about:app-manager).
  • Choose your app package
  • After that start the simulator
  •  Click on update button and install the app .
  • After that click on debug button and paste these code in the files.

Manifest file

{
 "name": "clock",
 "description": "clock app",
 "launch_path": "/index.html",
 "icons": {
 "16": "/icons/icon16x16.png",
 "48": "/icons/icon48x48.png",
 "60": "/icons/icon60x60.png",
 "128": "/icons/icon128x128.png"
 },
 "type": "privileged",
 "permissions": {}
}

index.html

<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
   
  <style>
  body {
  padding: 50px 50px;
  background: #eee;
  color:#fff;
  font-family:arial;
  text-align:center;
  }
  </style>
  <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions), 
  so we use a script file. -->
  <script src="app.js" defer></script>
  </head>
  <body>
  <!-- This code is in the public domain. Enjoy! -->
  <h1>Hello World</h1>
  </body>
  </html>

ConclusionHello World

This is a way by which you’ll create app for firefox os. Here i have not used javascript code so much but you’re free to use javascript because this is a very important for your app. You’ll download the quick friefox os app book from this link

0
0

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: