Dr. Glearning for FirefoxOS

DR. GLEARNING FORFIREFOX OS

http://www.cultureplex.ca/

Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 2

DR. GLEARNING FORFIREFOX OS

Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae

The CulturePlex LabWestern University, London, ON

FirefoxOS App Day – Toronto 2012

https://twitter.com/suarez_juanluis

http://twitter.com/versae



WHO WE ARE● Juan Luis Suárez

● @suarez_juanluis● Director of the CulturePlex Lab


http://cultureplex.ca/



WHO WE ARE● Javier de la Rosa

● versae● versae● Computer Scientist and

Humanist

● CulturePlex Lab Member

● CulturePlex


http://github.com/versae

http://cultureplex.ca/

https://github.com/CulturePlex



A BIT OF HISTORY● October 2011: ai-class.com

● March 2012: Coursera

● April 2012: MOOC's explosion



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



A BIT OF HISTORY● But also:

– Force students to be on the screen

– Force students to follow a specific rythm



A BIT OF HISTORY● September 2011: First commit of Dr. Glearning

● February 2012: First beta version

● December 2012: Release for Android and iOS



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



HOW DOES DR. GLEARNING WORK?

DEMO

http://drglearning.com/client/

WEBSITE

http://www.drglearning.com/

http://drglearning.com/client/

http://www.drglearning.com/



UNDER THE HOOD● Server-side (web):

– Nginx + uwsgi + Python

– Django: course creation

– TASTYPIE: REST interface



UNDER THE HOOD● Client-side (phones):

– HTML5

– Sencha Touch 2 (MVC)

– Apache Cordova / Adobe PhoneGap



AND EVERYTHING WENT GOOD



UNTIL THAT...



UNTIL THAT...



UNTIL THAT...



UNTIL THAT...



UNTIL FIREFOX OS



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



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

https://github.com/Martin1982/SenchaFox



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/

http://jquerymobile.com/

http://brian.io/lawnchair/



OUR STACK● handlebars for templating

– Powerful and simple semantic templates

– http://handlebarsjs.com/

● Jed for i18n

– Gettext style

– http://slexaxton.github.com/Jed/

http://handlebarsjs.com/

http://slexaxton.github.com/Jed/



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



FIREFOX OS DR. GLEARNING● Packaged

– Ideal for self-contained apps

– Ideal for off-line apps



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




– POST, PUT and DELETE HTTP verbs (REST)● Workaround 1: Enable Cross Origin Resource Sharing (CORS)

server-side for any origin Not a good idea!←




– POST, PUT and DELETE REST verbs● Workaround 1: Enable Cross Origin Resource Sharing (CORS)


● Workaround 2: Add parameters to XHR objects (MozAnon, MozSystem, etc)






● Workaround 2: Add parameters to XHR objects (MozAnon, MozSystem, etc) Hard to test, bad support in simulator←






● 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←




– Third party APIs (e.g., Google APIs)● Workaround: Content Security Policy




– Third party APIs (e.g., Google APIs)● Workaround: Content Security Policy Couldn't make it work←



FIREFOX OS DR. GLEARNING● Hosted

– Ideal for third-party API dependant apps

– Ideal for on-line apps



FIREFOX OS DR. GLEARNING● App served at app.drglearning.com by Nginx

● webapp.manifest file served withContent-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" }}

http://app.drglearning.com/



FIREFOX OS DR. GLEARNING












THANKS!Questions?

Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae

The CulturePlex LabWestern University, London, ON

FirefoxOS App Day – Toronto 2012




Dr. Glearning for FirefoxOS

Technology