How2Labs

In this Tutorial We are going to see the How we can start the Development with FireFox OS and then we Build a Sample Application.

Firfox O.S. completely focus on the Web Applications,so you need not to learn anything new if you are a Web geek .

PreRequsite :

Firfox O.S. completely focus on the Web Applications,so you need not to learn anything new if you are a Web geek .
if you are familar with the following term you can jump start .otherwise you can just follow the steps and when you feel free try to learn something about these terms.

HTML 5
Java script
CSS
Git and Github
simulator : for Testing Apps

Lets Start by setting upp the environment for our Tutorial.

if you are familer with Git and git hub you can skip these step , otherwise go to the Git and Github download Git and create a free account at Github . After this just follow the instruction for Setup - Git
There are few Templates already available for developemnt so we are going to start with a basic template. you can get it from Mozila-app-stub or you can clone it directly to your system using the following command (in command myweatherapp is the app name you can give it any name).
$ git clone git@github.com:mozilla/mortar-app-stub.git myweatherapp
Download and Install Node.js. After the installation just open command prompt(windows)or shell(gitor any other terminal) and type following command
npm install -g volo
.This will install volo utility, which is required to complete this Tutorial.
Download Bootstrap . we can do this by using volo add command . the command is shown below .
volo add bootstrap
it download the bootstrap from git and add it to your project make sure you run this command from project directory as shown in image . for dependency and global name just hit enter.
Download and add Underscore.js its the Javascript libarary. you can do it using volo command just like we did in above step
volo add underscore
download modernizr.js and copy it into js/lib folder
Download Bootstrap zip extract it and copy css/bootstrap.css into to our www/css directory
Download and Install the Firefox simulator

Lets Begin to Code

you can find the source files under myweatherapp/www directory.

Edit Index.html

open the Index.html in any text Editor and copy paste the following script



<html>
  <head>
    <meta charset="utf-8">

    <title>My Weather App</title>
    <meta name="description" content="">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->



    <!-- Do not add any other CSS here, instead @import it in app.css.
It will be inlined when building. That way it will
automatically be minified. -->
    <link rel="stylesheet" href="css/app.css">

    <!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
    <script src="js/lib/modernizr-2.5.3.min.js"></script>
  </head>
  <body>

        <div class="content">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#forecast">Forecast</a></li>
        <li><a href="#settings">Settings</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="forecast">
          <h1>What's the Forecast?</h1>
          <h2 class="name"></h2>

          <section class="day1">
            <h3>Today:</h3>
            <p class="low">Low: <span></span></p>
            <p class="high">High: <span></span></p>
          </section>

          <section class="day2">
            <h3>Tomorrow:</h3>
            <p class="low">Low: <span></span></p>
            <p class="high">High: <span></span></p>
          </section>
        </div>
        <div class="tab-pane" id="settings">
          City, zip code, or place: <input type="text" name="place" />
          <div>
            <button class="btn save">Save</button>
          </div>
        </div>
      </div>
    </div>






    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

    <!-- Using require.js, a module system for javascript, include the
js files. This loads "main.js", which in turn can load other
files, all handled by require.js:
http://requirejs.org/docs/api.html#jsfiles -->
    <script type="text/javascript"
            data-main="js/app.js"
            src="js/lib/require.js"></script>

  </body>
</html>

Edit js/app.js

To add any javascript libarary to our code we Define the require.js using the folloing statement

define(function(require) { }

and put our code insde it. to use any javascript libaray we use the require function function. if you remeber we downloded the underscore.js in setup steps now we add the library by following command


var _ = require('underscore');

//simillary we add the bootsrap-tab libaray
require('bootstrap/js/bootstrap-tab');

Now we open the app.js and replace the code with the following code.

require.config({
    baseUrl: 'js/lib',
    paths: {'jquery':
            ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
             'jquery']},

});


// When you write javascript in separate files, list them as
// dependencies along with jquery
define("app", function(require) {

    var $ = require('jquery');
	


var _ = require('underscore');
require('bootstrap/js/bootstrap-tab');

    function fetchForecast(woeid) {
        var query = escape('select item from weather.forecast where woeid="' + woeid + '"');
        var url = ("http://query.yahooapis.com/v1/public/yql?q=" +
                   query +
                   "&format=json&callback=?");

        $.getJSON(url, function(data) {
            var item = data.query.results.channel.item;
            var forecast = item.forecast;

            $('h2.name').text(item.title);

            for(var i=0; i<forecast.length; i++) {
                var el = $('.day' + (i+1));

                el.find('.high span').text(forecast[i].high);
                el.find('.low span').text(forecast[i].low);
            }

            $('.nav-tabs a:first').tab('show');
        });
    }

    fetchForecast(localStorage.placeWoeid || '2480894');

    $('.nav-tabs a').click(function(e) {
		
        $(this).tab('show');
    });

    $('#settings button.save').click(function(e) {
       
        var place = $('#settings input[name=place]').val();
        var query = "places.q('" + escape(place) + "')";
        var url = ('http://where.yahooapis.com/v1/' + query +
                   "?appid=Zz.TvXLV34Go6RzyHMnH6scOSn_DdLYdyuJVbd6l2MLvuTAAEFIylCIj7Koo_pth7BHeGmNV5m0zdAkAY_CspQ9eKlJRlmM-&format=json&callback=?");
        
        $.getJSON(url, function(data) {
            if(data.count !== 0) {
                var p = data.places.place[0];
               localStorage.placeWoeid = p.woeid;
                fetchForecast(p.woeid);
            }
        });
    });



});

Now we add some CSS to our code .so open css/app.css folder and replace the code with following



/* Tip: Use "@import" to add styles instead of adding 's in your
   HTML, and volo will inline it when building for production */

/* Styles for the installation button */
@import "install-button.css";

/* Your styles here */

@import "bootstrap.css";
/* @import "bootstrap-responsive.css"; */

body {
    background-color: #d3dde5;
}

.day1 {
    margin-top: 1em;
}

#forecast p {
    margin: 1em;
}

.nav-tabs {
    margin: 0;
}

.content {
    padding-top: 1em;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #d3dde5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d3dde5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#d3dde5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3dde5',GradientType=0 ); /* IE6-9 */
}

.content h1 {
    margin: .25em 0;
}

section p, #settings {
    font-size: 1.25em;
}

.tab-content {
    padding: 1em;
}

Debug, Build and Deploy

Debug:

to dubeg our app we launch server through volo command . as shown below

volo serve

once you see in terminal starting web server at http://localhost:8008. you can open browser like chrome or mozlia (updated version) or you can launch the simulator by going through Menu in Mozila as shown below

it will launch the firefox simulator with dashboard. in the Dashboard ,at field next to Add directory type

http://localhost:8008/

and click Add URL . it will launch simulator and add your application to it as show in picture . just swipe screen untill you see your app.

Now you can open and Test your App. if it works well you can move to next step oterwise just check your code and steps again, to stop server press Ctrl+C

Time to Build The App

To build the Application use the volo command as show below

volo build

it will build the app abd place it intowww-built directory

Once the build get successfull now we can Run the our built app using the following command

$ volo serve base=www-built

now see the simultor app again . hope you successfully built the App . final output of App will be shown here.

Lets Deploy :)

Now we are done with built and we tested it so now we can deploy our app to Github its free so if you don't have account get one for you and follow the command given below

volo ghdeploy

it will ask you to give name for repo you can hit enter if you want repo with same name as project or you can give name. if repo doesn't exist already it ask is this repo private just type n and hit enter . Now it will upload files on git so just wait untill it asks your password for authentication .

Pages

Wednesday, January 30, 2013

0 Getting Started With Firefox OS

PreRequsite :

Lets Start by setting upp the environment for our Tutorial.

Lets Begin to Code

Edit Index.html

Edit js/app.js

Debug, Build and Deploy

Debug:

Time to Build The App

Lets Deploy :)

Download Source Code

For Beginners

About

Get Free Email Upadtes

Popular posts

Archive

Categories

Labels