Thursday, December 26, 2013

Quick and Dirty Guide to Making Apps for Firefox OS

This blog is focused on game programming (and game playing) but I don't cover non-gaming very often and I'm following my own slow winding path to creating games on Firefox OS.





The best place to start is (always) the Mozilla Developer Network (MDN) and the MDN page for Firefox OS is

     https://developer.mozilla.org/en-US/Firefox_OS

Every scrap of Firefox OS info is all there somewhere, and you'll learn about the three G's: Gaia (the User Interface), Gonk (the Linux kernel and friends), and Gecko (the layout engine that powers the Firefox browser). There's lots of information about building Firefox OS itself, but I'm assuming you want to make apps, not operating systems.

Creating Apps

MDN provides a rich and juicy App Center.

     https://developer.mozilla.org/en-US/Apps
 
You should go there once you have the big picture of how Firefox OS is constructed.

One of your first stops should be "Your First App" at

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

and if you're a web developer (as many are), check out "App Development for Web Developers" at

     https://developer.mozilla.org/en-US/Apps/Quickstart/Build/For_Web_developers
 
There's also a nice set of reference apps you can study at

     https://developer.mozilla.org/en-US/Apps/Reference_apps

For the most part, Firefox OS app development is just HTML5. Mozilla will provide you with lots of guidelines and frameworks you can use. The App Center has it all and has recently been redesigned and is easy to navigate. Just remember you're creating apps for a phone, so there's no keyboard and the size of the screen is small.

Development Environment

The actual development environment is the easiest I've ever seen. All you need is Firefox (the browser) and one plugin (the Firefox OS Simulator).

Firefox is at

     http://www.mozilla.org/en-US/firefox/new/

but you might want to get the Beta at

     http://www.mozilla.org/en-US/firefox/channel/
 
or maybe even the Nightly at

     http://nightly.mozilla.org/
 
The Nightly build is quite stable and you'll want to be testing the latest foxy goodness!

And once you have installed Firefox, go to Add-ons and search in Get Add-ons for "Firefox OS Simulator".

Read all about the Simulator at

     https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator
 
and once installed, run it from Web Developer in the Tools menu.

One of the cool things about the simulator is that you can run your programs and see them run in a little window, or, you have a Firefox OS phone, you can load your program by using the Simulator and a USB cable. If you have Firefox OS 1.3 or higher, you can use an advanced program called the App Manager which will let you do cool debugging and installation. But the Simulator works and I use it almost every day.

Selling Your App

Once you create, build, and test your app, you can put it in Firefox OS Marketplace. There's lots of stuff about preparing your app, monitizing, and the rules for submission. Note that there are two kinds of apps: ones that you download from the Marketplace and run on your phone, or ones that run from a server and the Marketplace just supplies the means to get there.

Check out the Marketplace at

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

Tutorials

There are several good tutorials and more coming all the time. Try some of these (and let me know if you find good ones).

Simple slide show - http://shafiul.github.io/slides/kickstart_fxos.html#/

Simple Hello World - http://freezinfo.com/firefox-os-basic-tutorial-hello-world-application/

Several tutorials - http://rominirani.com/category/mobile-2/firefox-os/

Excellent eBook - https://leanpub.com/quickguidefirefoxosdevelopment

Other Resources

Mozilla Hacks - https://hacks.mozilla.org/category/firefox-os/

Google Group - https://groups.google.com/forum/#!forum/mozilla.dev.b2g

Some Posts I Wrote that Might be Useful

Using the Simulator - http://firefoxosgaming.blogspot.com/2013/10/firefox-os-easier-than-before.html

Putting Apps on the Phone - http://firefoxosgaming.blogspot.com/2013/10/pushing-your-game-to-your-phone.html

The rest of my posts are split evenly between reviews of games from the Firefox OS Marketplace and game programming articles on writing code in HTML5 for the Firefox OS phone using HTML, JavaScript, CSS, Canvas, and SVG. I also have covered unique-to-the-phone APIs such as Vibration, Device Orientation, Audio, Screen Orientation, Touch, and Screen Sizes. Check out the Firefox OS games and code at http://firefoxosgaming.blogspot.com/.

If I've missed anything, let me know. Twitter is fastest, Gmail is pretty good, and Google+ is not too bad, and I'm on Facebook but don't do much with it except to launch my blog Twitter announcements.

PS: Thanks to Joe Sanders on Google+ who asked me "Do you have any links to good Firefox tutorials for developing apps for it?" I realized that I should devote a post to Firefox OS resources and this is it. I'll archive this post at

     http://firefoxosgaming.blogspot.com/p/firefox-os.html

and make it a Blogger Page on the side. Thanks, Joe.