Conducted My First Firefox OS Apps Development Workshop

I have a confession to make: I had been a Mozilla Rep since 2011 but never had I given (conducted) a Firefox OS Apps Development Workshop yet.

Most of the Firefox OS Workshops (and event he Firefox OS App Days Manila & Cebu) of the Mozilla Philippines Community were organized by me, but my role is more of in the background.

Last Saturday’s Firefox OS Workshop at the Philippine Christian University was my debut in conducting a technical hands-on seminar, particularly in apps development for Mozilla’s mobile operating system. For me, the easiest way for students (or anyone who wants to know) to learn how to create a Firefox OS app is to create a working Hello World sample.

Here’s what we did during the workshop:

I asked the students to create a Hello World HTML webpage and name it as “index.html” (though it is NOT required to be called as index.html):
  After that, I asked them to create a manifest file [save it as manifest.webapp]:

Using the Firefox Developer Edition, launch the WebIDE and fire up Firefox OS 1.3 simulator:

Install the webapp that we had just made to the Firefox OS Simulator as a Packaged App:

The resulting app is something like this (no design, no frills … just a plain webpage):

Now, let’s enhance the HTML page with a web form:
  Let’s create a JavaScript file:

Update the webapp installed in our Firefox OS 1.3 Simulator and we will have something like this:

The webapp rather looks for simple, yes because we haven’t applied design to it yet (CSS3). It was done to demonstrate how easy it is to create apps for Firefox OS … all you need is knowledge in using HTML5, CSS3 and JavaScript and the understanding of how webapp works.