For user documentation see (http://docs.moodle.org/en/Mobile_app)
MM (Moodle Mobile) is the official mobile app for Moodle. MM is an HTML5 app that uses common web technologies.
Basically, is a Web Services client that uses REST as protocol to obtain and send information to your Moodle installation/s.
The layout is created using HTML5 and CSS3, interaction with the phone and packaging is done using Phonegap.
The features are going to be the same that the old Mobile app plus:
- PUSH Notifications (only iOs in first version)
- Mobile and tablet version (Responsive design)
- Support for contrib plugins
- Support for external settings: Extra CSS
- Support for external translation
- New development and debugging features
Features for future versions:
- Calendar sync
- Offline browsing and posting in forums
- Offline grading
- Moodle 2.4
Future versions will require the last minor versions if Web Services are not backported.
- Media queries for screen width and height http://www.w3.org/TR/css3-mediaqueries/
- jQuery http://jquery.com/
- jQuery UI http://jqueryui.com/
- jQuery touchSwipe http://labs.skinkers.com/touchSwipe/
- matchMedia https://github.com/paulirish/matchMedia.js/
- Backbone and Underscore http://backbonejs.org/
- RequireJS requirejs.org
- Google Closure Lint http://code.google.com/p/closure-linter/
MM uses Phonegap for using Moodle hardware/software features like Camera, Audio/video recorder, access to the file system, etc. Phonegap is loaded in the index page of the app (jQuery, the main lib of the app are also loaded in the index page).
For DOM manipulation and some helper functions, is a requirement of others libraries listed below.
Dialogs and also for enhancing forms elements (buttons, checkboxes, etc...)
For detecting mouse gestures
Backbone and Underscore
For storage (Models and Collections), Underscore templates, and URL Routing
For handling modules dependencies and loading plugins
Structure of the app (only main directories)
css/ - App main layout and styles img/ - App images lang/ - Default lang lib/ - Main libraries plugins/ - Plugins test/ - Test data when developing in Test mode config.json - Main app configuration file (presets) index.html - Index page of the app
Getting and sending information to Moodle
MM uses standard Moodle Web Services for getting and sending information to Moodle. AJAX (jQuery) and REST + JSON are the technologies used.
Notice that mobile HTML5 apps doesn’t have cross domain restrictions so you can make AJAX calls to any domain.
In your Moodle installation you can specify an extra CSS file for customizing the app remotely.
This CSS is downloaded and stored in the device database for further use.
You can also translate the app strings using your Moodle translation tool because strings are synced using a specific Web Service.
We use HTML5 localStorage that is cross browser implemented and there are libraries that can work of top of it.
We use Backbone Models and Collections as a wrapper for localStorage.
Note that localStorage has some limitations like a 5MB max size in some devices and also is considers "Temporal data" for some devices like the new iPhones.
The app includes a language file in JSON (English is the default language).
Once the user is logged-in, the app automatically synchronizes the string translations using a specific Web Service, translations are stored in the device local database in JSON format.
Plugins allow developers to extend the app functionalities. A plugin it’s a subdirectory that implements a set of required functionalities.
Types of plugins
- General: Interactions over the global app, such as the Notifications, Upload, Help and Web
- Course: Interactions over a course, such as course contents or participants
- User: Interactions over an user, such as send a message, add as a contact, write a private note
- Settings: Additional settings for the app
There are a couple of tutorials with two sample plugins (grades and forums plugins)
Creating your custom app
Limitations and disadvantages of HTML5 apps
- Less speed and smoothness
- Limited to the Mobile functionalities provided from Phonegap