This document discusses bringing the educational app Dr. Glearning to Firefox OS. It describes Dr. Glearning's history and functionality, challenges in porting from Android/iOS to Firefox OS, and solutions considered. The authors decided a hosted web app approach using standard web technologies like jQuery Mobile worked best to overcome restrictions of the packaged app model and enable third party API access. They demonstrated a working hosted version of Dr. Glearning for Firefox OS.

1. DR. GLEARNING FOR
FIREFOX OS

2. DR. GLEARNING FOR
FIREFOX OS
Juan Luis Suárez, Javier de la Rosa
@suarez_juanluis, @versae
The CulturePlex Lab
Western University, London, ON
FirefoxOS App Day – Toronto 2012
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 2

3. WHO WE ARE
●
Juan Luis Suárez
●
@suarez_juanluis
●
Director of the CulturePlex Lab
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 3

4. WHO WE ARE
●
Javier de la Rosa
●
versae
●
versae
●
Computer Scientist and
Humanist
●
CulturePlex Lab Member
●
CulturePlex
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 4

5. A BIT OF HISTORY
●
October 2011: ai-class.com
●
March 2012: Coursera
●
April 2012: MOOC's explosion
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 5

6. A BIT OF HISTORY
●
Old and new MOOC's:
– Don't have mobile interfaces
– Don't have different kind of activities
– Don't talk the students' language
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 6

7. A BIT OF HISTORY
●
But also:
– Force students to be on the screen
– Force students to follow a specific rythm
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 7

8. A BIT OF HISTORY
●
September 2011: First commit of Dr. Glearning
●
February 2012: First beta version
●
December 2012: Release for Android and iOS
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 8

9. WHAT IS DR. GLEARNING?
●
An educational app to do your homework and test
yourself by playing for the next level
●
Teachers prepare their question according to six
types of activities (so far)
●
Activities are automatically graded
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 9

10. HOW DOES DR. GLEARNING WORK?
DEMO
http://drglearning.com/client/
WEBSITE
http://www.drglearning.com/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 10

11. UNDER THE HOOD
●
Server-side (web):
– Nginx + uwsgi + Python
– Django: course creation
– TASTYPIE: REST interface
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 11

12. UNDER THE HOOD
●
Client-side (phones):
– HTML5
– Sencha Touch 2 (MVC)
– Apache Cordova / Adobe PhoneGap
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 12

13. AND EVERYTHING WENT GOOD
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 13

14. UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 14

15. UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 15

16. UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 16

17. UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 17

18. UNTIL FIREFOX OS
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 18

19. WHY?
●
Sencha Touch relies heavily on WebKit
●
Sencha Touch is designed for mobile phones
●
Until a week ago, there was only WebKit compliant
native browser components for mobile phones
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 19

20. WHAT COULD WE DO?
●
Hack Sencha Touch
– SenchaFox: https://github.com/Martin1982/SenchaFox
●
Translate specific Webkit CSS rules to Gecko
– Nightmare
●
Port the whole application to a different technology
– Gecko compliant, of course
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 20

21. OUR STACK
●
jQuery Mobile for interface and interaction
– WebKit and Gecko compatible
– http://jquerymobile.com/
●
lawnchair for storage
– Tiny and framework agnostic
– http://brian.io/lawnchair/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 21

22. OUR STACK
●
handlebars for templating
– Powerful and simple semantic templates
– http://handlebarsjs.com/
●
Jed for i18n
– Gettext style
– http://slexaxton.github.com/Jed/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 22

23. FIREFOX OS DR. GLEARNING
●
All Firefox OS apps are HTML5 apps
●
Not all HTML5 apps are Firefox OS apps
●
Two types FirefoxOS apps:
– Hosted
– Packaged
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 23

24. FIREFOX OS DR. GLEARNING
●
Packaged
– Ideal for self-contained apps
– Ideal for off-line apps
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 24

25. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– POST, PUT and DELETE HTTP verbs (REST)
●
Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 25

26. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– POST, PUT and DELETE HTTP verbs (REST)
●
Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin ← Not a good idea!
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 26

27. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– POST, PUT and DELETE REST verbs
●
Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin ← Not a good idea!
●
Workaround 2: Add parameters to XHR objects (MozAnon,
MozSystem, etc)
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 27

28. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– POST, PUT and DELETE REST verbs
●
Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin ← Not a good idea!
●
Workaround 2: Add parameters to XHR objects (MozAnon,
MozSystem, etc) ← Hard to test, bad support in simulator
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 28

29. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– POST, PUT and DELETE REST verbs
●
Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin ← Not a good idea!
●
Workaround 2: Add parameters to XHR objects (MozAnon,
MozSystem, etc) ← Hard to test, bad support in simulator
●
Workaround 3: Use JSONP and emulate everything through a
GET request ← Not very RESTful, but works
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 29

30. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– Third party APIs (e.g., Google APIs)
●
Workaround: Content Security Policy
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 30

31. FIREFOX OS DR. GLEARNING
●
Problems of Packaged Apps
– Third party APIs (e.g., Google APIs)
●
Workaround: Content Security Policy ← Couldn't make it work
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 31

32. FIREFOX OS DR. GLEARNING
●
Hosted
– Ideal for third-party API dependant apps
– Ideal for on-line apps
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 32

33. FIREFOX OS DR. GLEARNING
●
App served at app.drglearning.com by Nginx
●
webapp.manifest file served with
Content-Type: application/x-web-app-manifest+json
{
"name": "Dr Glearning",
"description": "The Mobile Game Learning Platform.",
"launch_path": "/index.html",
"icons": {
"128": "/resources/images/ic_launcher.png"
},
"developer": {
"name": "CulturePlex Lab.",
"url": "http://www.cultureplex.ca"
}
}
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 33

34. FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 34

35. FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 35

36. FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 36

37. FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 37

38. THANKS!
Questions?
Juan Luis Suárez, Javier de la Rosa
@suarez_juanluis, @versae
The CulturePlex Lab
Western University, London, ON
FirefoxOS App Day – Toronto 2012
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 38