Dr. Glearning for FirefoxOS

Talk given in the FirefoxOS Days in Toronto, 2013

Transcript

1. DR. GLEARNING FOR FIREFOX OS
2. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
3. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 3 WHO WE ARE • Juan Luis Suárez • @suarez_juanluis • Director of the CulturePlex Lab
4. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 4 WHO WE ARE • Javier de la Rosa • versae • versae • Computer Scientist and Humanist • CulturePlex Lab Member • CulturePlex
5. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 5 A BIT OF HISTORY • October 2011: ai-class.com • March 2012: Coursera • April 2012: MOOC's explosion
6. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
7. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 7 A BIT OF HISTORY • But also: – Force students to be on the screen – Force students to follow a specific rythm
8. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 8 A BIT OF HISTORY • September 2011: First commit of Dr. Glearning • February 2012: First beta version • December 2012: Release for Android and iOS
9. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
10. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 10 HOW DOES DR. GLEARNING WORK? DEMO http://drglearning.com/client/ WEBSITE http://www.drglearning.com/
11. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 11 UNDER THE HOOD • Server-side (web): – Nginx + uwsgi + Python – Django: course creation – TASTYPIE: REST interface
12. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 12 UNDER THE HOOD • Client-side (phones): – HTML5 – Sencha Touch 2 (MVC) – Apache Cordova / Adobe PhoneGap
13. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 13 AND EVERYTHING WENT GOOD
14. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 14 UNTIL THAT...
15. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 15 UNTIL THAT...
16. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 16 UNTIL THAT...
17. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 17 UNTIL THAT...
18. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 18 UNTIL FIREFOX OS
19. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
20. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
21. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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/
22. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 22 OUR STACK • handlebars for templating – Powerful and simple semantic templates – http://handlebarsjs.com/ • Jed for i18n – Gettext style – http://slexaxton.github.com/Jed/
23. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
24. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 24 FIREFOX OS DR. GLEARNING • Packaged – Ideal for self-contained apps – Ideal for off-line apps
25. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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
26. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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! ←
27. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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)
28. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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 ←
29. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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 ←
30. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 30 FIREFOX OS DR. GLEARNING • Problems of Packaged Apps – Third party APIs (e.g., Google APIs) • Workaround: Content Security Policy
31. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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 ←
32. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 32 FIREFOX OS DR. GLEARNING • Hosted – Ideal for third-party API dependant apps – Ideal for on-line apps
33. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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" } }
34. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 34 FIREFOX OS DR. GLEARNING
35. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 35 FIREFOX OS DR. GLEARNING
36. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 36 FIREFOX OS DR. GLEARNING
37. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 37 FIREFOX OS DR. GLEARNING
38. Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 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