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:
Update the webapp installed in our Firefox OS 1.3 Simulator and we will have something like this:
Made my photo as the icon for this sample webapp.
Users may enter text in the form field.
Once the submit button is hit, the texts entered by the user will be shown on the screen as a pop-up message.