Firefox OS App building workshop

Hello world

 

Making a basic hello world app is as easy as making a simple web page. You can even do it straight from your browser!

I recommend taking advantage of Firefox’s WebIDE to make firefox OS application building a breeze, at least at first.

Simply press shift+F8, or from the hamburger menu click ‘Developer’ then find ‘WebIDE’. You should see something like this:

Firefox OS IDE
Firefox OS IDE

 

You can use this environment to test already-made apps and even take a look at FirefoxOS’s native apps if you have a debug environment! However, we’re currently going to use it to make a brand-new app.

Simply go to Project->New, and select ‘Hello World’ App, then follow the instructions.

making a new Firefox OS app
making a new Firefox OS app

 

Once done, You should be able to see a list of files in the left-hand side, being “icons/”, “app.js”, “index.html”, and “manifest.webapp”. (If not, make sure View->Toggle Editor is enabled.)

index.html and app.js work exactly like they would for any other website. If you open them, you’ll see regular HTML and JavaScript code. The only “special” file currently here is “manifest.webapp”. This is required for Firefox OS Web apps, and it tells the OS some information about the app:

{
"name": "HelloApp",
"description": "A Hello World app",
"launch_path": "/index.html",
"icons": {
"16": "/icons/icon16x16.png",
"48": "/icons/icon48x48.png",
"60": "/icons/icon60x60.png",
"128": "/icons/icon128x128.png"
},
"developer": {
"name": "Your name",
"url": "http://example.com"
}
}

You can change the name, description, and developer name and URL to match you and your app. launch_path may also be interesting for more advanced apps, as it’s your app’s default/first page.

If you want to take this hello world app for a go, you need to either plug in a phone or install a simulator, which you can do from the ‘select runtime’ menu, and install the newest stable (2.2)

Selecting a runtime for the IDE
Selecting a runtime for the IDE

Once you’ve installed the simulator, you can launch it in the same way.

You can then launch your app by clicking the ‘play’ button. You can also click the ‘wrench’ button, to get your regular web developer tools!

App debugging
App debugging

As you can see, we easily got a ‘hello world’ app, and it can be inspected easily just like any normal website.

Adding firefox and online APIs

Now we can make this into a basic weather app. Let’s start by adding a few things to our HTML file:

<html>
  <head>
    <title>
      My app
    </title>
    <script src="jquery.js"></script>
  </head>
  <body>
  <div id="offline" style="display:none">
    <img src="offline_cloud.png">
  </div>
  <div id="data">
  </div>

    <script src="app.js"></script>
  </body>
</html>

I added JQuery for AJAX requests. The #offline Div will be displayed when we detect we’re offline (more on that in a bit), #data will hold the data we’ll get from the weather API, and I included a script file, app.js which we’ll be writing.

var appid = 'your-app-id';

function handleChange() {
    //firefox API
    updateHTML(!navigator.onLine);
}

//we get passed on a boolean that's true if we're offline.
function updateHTML(isOffline) {
  console.log(isOffline);
    //remember #offline div?
    var offline = document.getElementById('offline');

    if (isOffline) {
        offline.style.display = '';
        updateData(getOfflineData());
    } else {
        offline.style.display = 'none';

        //getAPIData accepts a function as an argument, which it calls once it's done.
        setInterval(function() {
            getAPIData(
                function(data) {

                    //firefox OS api!
                    window.navigator.vibrate(200);
                    updateData(data);
                });
        }, 60000);

        getAPIData(
            function(data) {
                window.navigator.vibrate(200);
                updateData(data);
            });
    }
}


handleChange();


//check if we're still online
setInterval(
    handleChange,
    60000
);


function getAPIData(callback) {
    var dataDiv = document.getElementById('data');

    if (!dataDiv.innerHTML) {
        dataDiv.innerHTML = "loading...";
    }

    $.ajax({
            url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&appid=" + appid,
        })
        .done(function(data) {
            
            if (callback && typeof callback === 'function') {
                callback(data);
            }

            console.log("Sample of data:", data);
        });
}

function updateData(data) {
  if (!data || !data.main) {
        return;
    }
  
    window.localStorage.setItem('data', data);
    var dataDiv = document.getElementById('data');
    console.log(data);
   
    dataDiv.innerHTML = data.main.temp;
}

function getOfflineData() {
    return localStorage.getItem('data');
}

You should now have a basic weather app!

Resources

Now what? How do I expand on this?

https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS

https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial

 

– Mozilla’s guides on app building

https://developer.mozilla.org/en-US/Marketplace/Publishing/Introduction

how to publish an app

 

Leave a Comment

Your email address will not be published. Required fields are marked *