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:

Screenshot 2015-02-04 10.50.41

Screenshot 2015-02-04 10.54.21Install the webapp that we had just made to the Firefox OS Simulator as a Packaged App:

Screenshot 2015-02-04 10.54.21(2)

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

Screenshot 2015-02-04 10.57.06

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:

Made my photo as the icon for this sample webapp.
Made my photo as the icon for this sample webapp.
Users may enter text in the form field.
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.
Once the submit button is hit, the texts entered by the user will be shown on the screen as a pop-up message.

 

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.


ABOUT THE AUTHOR

Robert “Bob” Reyes is a technologist, an IT Consultant and Tech Speaker, a certified Google IT Support Specialist, and an Open Source advocate representing the global non-profit Mozilla (makers of Firefox) in the Philippines. Bob is a Technology Columnist for the Manila Bulletin Publishing Corporation and an aviation subject matter expert contributor for Spot.PH.

Follow The Filipino Tech Explainer on Facebook and X/Twitter.

If you liked my articles or any of the contents or if The Filipino Tech Explainer has helped you in any way, you can buy me a coffee and share your thoughts. Help me continue producing awesome articles by supporting my website. Maraming salamat po! Thank you very much!

What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
One thought on “Conducted My First Firefox OS Apps Development Workshop”

Leave a Reply