Journey of a FireFox OS App

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

FireFox OS App Development

In this post, we will see how to create a Firefox OS app using a Yeoman generator, build a simple app using Firefox OS’s native Building Blocks. Then we will publish the app to the Firefox Marketplace. To make the app a bit more interesting, we will use GeoNames Weather API and show the details to the user. The end product will look like

Screen Shot 2014-04-11 at 10.26.33 am

Screen Shot 2014-04-11 at 7.04.02 pm

Disclaimer: I was not able to get through the review process for publishing this App on the Firefox MarketPlace, as this app is working fine on the simulator and not on the actual device. And I do not have an actual device to test this. But this post can give you an idea as how to get started with Firefox OS apps development.

Contents

The code for this project can be found at GitHub & a Live demo here.

What is Firefox OS

Wikipedia

Firefox OS (project name: Boot to Gecko, also known as B2G) is a Linux kernel-based open-source operating system for smartphones and tablet computers and is set to be used on smart TVs. It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

Firefox OS is designed to provide a “complete” community-based alternative system for mobile devices, using open standards and approaches such as HTML5 applications, JavaScript, a robust privilege model, open web APIs to communicate directly with cellphone hardware, and application marketplace.

If you want to know more about Firefox OS, take a look at this, thisthis. You can start link diving from here, if you want to know the A-Z of the OS & Apps.

Firefox OS Apps are Open Web Apps. i.e. you can build the app as a web application and host it. And when the user navigates to the URL, you can provide an option to Install the application on the device too.

In this post, we are going to host the app locally during the development phase and then generate a build and submit it to the market place.

Setup Yeoman

Yeoman is a powerful scaffolding tool for the web. You can know more about Yeoman here.

Yeoman generators are like god sent gifts. As you know every single project needs a unique setup & building them from scratch every time is a pain in you know where.

So, we will leverage a Yeoman generator by Belén Albeza named generator-firefoxos to scaffold a new app every time we want one.

First, we will setup Node from here and then Yeoman. Open terminal/Prompt and run

Windows Mac/*nix
npm install -g yo  sudo npm install -g yo

next, we will install the generator, run

Windows Mac/*nix
npm install -g generator-firefoxos     sudo npm install -g generator-firefoxos

Now we are all ready to generate our first app.

Scaffolding a Firefox app project

Create a new folder named myFirefoxApp. We will be scaffolding the project into this folder. Back to terminal/prompt, CD into the myFirefoxApp folder & run

yo firefoxos

You will see a screen like this, enter the App name (can contain spaces)

Screen Shot 2014-04-08 at 10.27.38 pmNext, the app version

Screen Shot 2014-04-08 at 10.27.52 pmProvide a Github username, if you have one

Screen Shot 2014-04-08 at 10.28.03 pmNext, Yeoman will ask if you want to add the Building blocks library & We would say yes.

Screen Shot 2014-04-08 at 10.28.13 pmAnd finally we will say no to Backbone & Require, to keep the scope of the app simple. If you say yes, you will get a client side MVC framework built with Backbone + Zepto + Underscore, RequireJS and Handlebars.

Screen Shot 2014-04-08 at 10.28.24 pmOnce these steps are done, Yeoman will go ahead and scaffold the project for you. This might take a few minutes. Once the setup is done, your folder structure should be something like this

Screen Shot 2014-04-08 at 10.52.36 pmIf you don’t see the node_modules folder, you may need to run npm install manually.

The project uses SASS preprocessor for CSS generation. So, we need to have ruby and SASS installed.

Mac/*nix systems

By default Mac/*nix systems come with Ruby preinstalled. You can check this by navigating to your terminal and running ruby -v . This should prompt back with the version of Ruby installed. You can upgrade your Ruby to the latest version using the RVM (Ruby Version Manager). Steps here or here.

Windows

Navigate here. Download the latest stable version. Run the exe. When you are running the set up, make sure you  check “Add Ruby Executables to your PATH“. This will make Ruby available globally from any command window.

All users can run   ruby -v  to validate the install. Lets set up SASS. SASS is a ruby gem. Run

gem install sass

to install SASS.

Setting up the Simulator

Finally to complete the setup, we will install a simulator to run and test our apps in. We will also download the latest build of Firefox Nightly from here to test a few things in App.

Once you are done installing Nightly, we will install the simulator. Navigate here and click on Install Firefox OS 1.3 Simulator (as of today 1.3 is latest stable 1.4 is in beta and 1.5 is still under developement & unstable).

The Simulator is a Firefox add on, so the process to install is same as any other extension. Once the installation is done, you will see a message like

Screen Shot 2014-04-09 at 8.34.28 pmThen open a new tab and enter about:app-manager in the address bar and you will see something like

Screen Shot 2014-04-09 at 8.41.37 pmAt the bottom, you can see 2 options

Connect to localhost:6000 – To Connect to your Firefox OS device

Start Simulator – To start the simulator

To keep things simple, we will click on Start Simulator and then you should see something like this

Screen Shot 2014-04-09 at 9.13.20 pmThen click on FIrefox OS 1.3 & the simulator will start & should look like

Screen Shot 2014-04-09 at 9.14.27 pmYou can swipe across screens, install a few apps & get a feel of the simulator & the OS.

Running the App

The Scaffolded Firefox app is a Node based Grunt project. If you want to know more about Node you can checkout here. And to know more about Grunt, you can checkout here. And a project based on the above here.

To launch the app, back to terminal/prompt run

grunt server

and you should see something like

Screen Shot 2014-04-09 at 9.31.29 pmCopy the highlighted URL from the above screenshot back to Nighty and paste it at the bottom section of the about:app-manager page

Screen Shot 2014-04-09 at 9.34.17 pmDo notice the /manifest.webapp at the end. manifest.webapp is the starting point to our application and we will discuss about that soon.

Next, click on the + icon next to the URL textbox and you should see something like

Screen Shot 2014-04-09 at 9.39.20 pmTo run, click on Start Simulator like we did above and then Firefox OS 1.3 from the bottom panel. This will launch the simulator.

Now Once the simulator is completely launched, you will see a Debug button next to the Update button on the app-manager page.

Screen Shot 2014-04-09 at 10.03.39 pm

Click on DEBUG to install the app for the first time & launch the app. You should see something like

myApp

in the simulator.

If you have notice the app-manager page in Nightly, you should see something like

Screen Shot 2014-04-09 at 10.06.58 pm

The current Debugging app will be listed on the Left hand side. And the center stage is occupied by complete Awesomeness!!

Now its like practically debugging a web application. And

Console tab : Will log your messages & errors

Inspector tab: You can inspect the DOM of current view of the App

Debugger tab: You can put breakpoints and debug javascript code here

Style Editor tab: You can update styles live from here

Profiler tab: Run profiles, check performance and see what scripts are causing issues

Scratchpad tab: A Javascript playground, write live javascript code and run it

Now, to take a test drive, lets click on Style Editor tab and then main.css & then add the below css rule

And the flip back to the Simulator and you should see the changes reflecting. Isn’t this cool??

Play around each tab for a while to get a feel of it. Once you start writing huge applications, you will be spending most of your time here.

Another alternative for testing the apps is using Nightly directly. We will go to the responsive mode & then launch the application. Let’s try that

Open a new tab in Nightly (the one on your desktop) and then navigate to  http://0.0.0.0:9000. Press cmd+alt+m or ctrl+shift+m to open the responsive view (alternatively tools > Web Developer > Responsive Design View). The default device width would be 320px & height 480px and you should see something like

Screen Shot 2014-04-09 at 10.35.42 pm

Now, you can open firebug or dev tools and debug live. This approach can be a bit more developer friendly with our old habit of refresh refresh refresh…

Updating the UI with Building Blocks

Now, we will use a few of the Building Blocks components and come up with a simple UI. Navigate to Building Blocks (preferably in Firefox Nightly) and check out a few components they have provided out of box.

You can download the design stencil & fonts from here.

PS : Firefox native components are built using Gaia’s Building Blocks. If you want your app to have the same native feel, you can use these. Otherwise you can pick other frameworks like Ionic or Framework7.

We are going to build a simple Weather app. Once we select a country from the list, the app would contact the GeoNames weather service and fetch the weather details .

We will be using jQuery for REST AJAX calls & DOM manipulation. So, lets add the same to our project. Back to terminal/prompt and run

npm install jquery --save-dev

We will now copy jquery.min.js from

 /myFirefoxApp/node_modules/jquery/dist/jquery.min.js

to

 /myFirefoxApp/app/scripts/vendor/jquery.min.js. 

Then we will add the jQuery reference at the bottom of the index.html above main.js. 

Our app logic

  • 1. When the app loads, we will contact the GeoNames country info API & populate the list of countries
  • 2. User selects a country
  • 3. We will fetch the Weather info for that country.

You can read the documentation for other available methods. To follow along, you can create a new account with GeoNames (its free) and activate your account.

Lets get started. First things first, lets take a look at the app/manifest.webapp. This is the starting point of our app and is a simple JSON file consisting of information like App name, description, developer details, permissions etc that are required to the run the app. You can open app/manifest.webapp

Do notice the type as web. If you are using device features like camera or contacts, you would need to enter the list of permissions here. Permission are applicable, if you are developing a Privileged App or a Certified App.

You can find more information about manifest.webapp here.

Next, open app/scripts/main.js in favorite editor and we will add the required logic.

On DOM ready, we contact the countryInfo service and get the list of countries. Then  we use our tmpl string to build a markup (not a best practice, but will get the work done).

Do notice the mozSystem property as one of the XHR fields. This is required to make cross domain requests from Firefox OS.

Then when a user clicks on a country, we contact the weatherJSON service, pick the first result and show it in the UI.

We have 2 views here, #main & #details. Main is the view that shows the list of countries and Details the Weather details. We will be using jQuery to toggle between them.

Next, Open up index.html. We are going to use the header component, list components and a spinner component from the Building blocks library. The updated index.html would be

And the update main.scss would be (if you are not comfortable with SASS, you can comment all the sass tasks in Gruntfile.js, create a main.css manually and then update it, but not a prefered approach)

Save all the files and back to prompt and run

grunt server 

This will build the app and host it at port 9000. Now, back to Nightly and update the app. Then launch the emulator and you should see

Screen Shot 2014-04-11 at 10.26.13 am

And once the response comes from GeoNames service, we will populate the list

Screen Shot 2014-04-11 at 10.26.33 amand when the user clicks on a country, we will show the details

Screen Shot 2014-04-11 at 10.26.48 am

If no data is present, we show an alert as a fallback.

Building a Packaged App

Till now, we have been hosting the app and running it. Now, lets build the app and give a physical location to run the app from (this may not seem a big thing when running from local).  Back to terminal/prompt run

grunt build

This will generate the build folder in our project directory. This is all you need to run a package app in a simulator.

If you are planning to push the same to a device, you need to run

grunt push 

grunt reset

PS: Grunt reset is only for the first time. 

Back to Nightly’s app manager page. This time from bottom left, select Add Packaged App. And select the build folder. And you should see something like

Screen Shot 2014-04-11 at 10.42.47 amYou can see Packaged next to the app name. To install and run this app, simply hit Update. Now you can launch the app from your simulator.

Deploying the App to Firefox Marketplace

We are going to submit a Package App to the Marketplace, before that we need to complete a Pre-Submission checklist, which you will find it here. Pretty standard stuff, icons and screenshots.

Do not forget to change the name of the app in your manifest.webapp.

We need to create a zip of the build folder which we have generate in the previous step. Back to terminal/prompt run

grunt release

This will create a new zip file named Application.zip at the root of myFirefoxApp folder. You can validate if your packaged app is valid or not here.

Then, we will being the submission process

Step 1 : Navigate to Market Place and login with your Persona. If you don’t have one, create it.

Step 2 : Navigate to  Submit an App. If you are doing this for the first time, you need to accept the developer license and click next

Step 3 : You will see a screen like

Screen Shot 2014-04-11 at 5.23.58 pm

Here select Firefox OS and in the below section, Packaged tab and upload the zip file, which we have validated earlier. Once the upload is successful, you will see a screen like

Screen Shot 2014-04-11 at 5.29.09 pm

Depending on what your target is, you can select the options. I will leave it as above and click continue.

Step 4 : In this step, fill in the details accordingly. I have gone ahead and renamed the slug to geoNameWeatherApp (make sure this is unique). And Marked it under Utilities category. Then added a privacy policy like “NA” and filled the support email. Said No to flash and finally uploaded couple of screenshots of the App, taken via the Simulator.

Finally don’t forget to check the box that says ‘Publish my app in the Firefox Marketplace as soon as it’s reviewed.‘ and then click Continue

Step 5 :  Next, we will set up the content ratings. Click continue in the below screen

Screen Shot 2014-04-11 at 5.41.59 pm

And on the next page click on the button Create an IARC Ratings Certificate. You will be shown a Yes-No questionnaire in a new window. On the shown screen mark yes-no accordingly. Click next and fill up the remaining form (for this app its all no).

Finally click on confirm and you will see a security code & submission id. You will also receive an email with these details on the support email listed earlier. Close this tab and if you go back to the app submission tab, you will see the rating details.

Now, we wait till the app is reviewed and listed publicly. You can click on Status & Versions to see the review status. It takes up to 2 days for this to be done. 

After a couple of days, this is what I received Screen Shot 2014-04-25 at 10.43.05 amThe same process can be followed for Hosted apps too. If you want you can add a install script, so that the users can install your app & launch it with an Icon. You can see the same @ GitHub. Demo Code.

This ends our journey.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page