Moodle Mobile 2 (Ionic 1)

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

Moodle Mobile
Project state	Implementation
Tracker issue	MOBILE-153
Discussion	https://moodle.org/mod/forum/discuss.php?d=206736
Assignee	Juan Leyva

General Overview

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.

For calling the Web Services, manipulating the DOM and interacting with Phonegap, we use jQuery as our Javascript framework.

This app is a replacement of the old Mobile app, see the discussion Change in our Moodle mobile app strategy for details.

Features

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

Requirements

• Moodle 2.4

Future versions will require the last minor versions if Web Services are not backported.

Technologies used

• HTML5 http://www.w3.org/TR/2011/WD-html5-20110525/

• CSS3 http://www.w3.org/Style/CSS/

• Media queries for screen width and height http://www.w3.org/TR/css3-mediaqueries/

• Phonegap http://wiki.phonegap.com/w/page/16494772/FrontPage

• 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

• jsdoc http://code.google.com/p/jsdoc-toolkit/

• Google Javascript Style Guide http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

• Google Closure Lint http://code.google.com/p/closure-linter/

Phonegap

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).

jQuery

For DOM manipulation and some helper functions, is a requirement of others libraries listed below.

jQuery UI

Dialogs and also for enhancing forms elements (buttons, checkboxes, etc...)

jQuery touchSwipe

For detecting mouse gestures

matchMedia

Javascript detection of media queries

Backbone and Underscore

For storage (Models and Collections), Underscore templates, and URL Routing

RequireJS

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.

External settings

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.

Storage

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.

Internationalization

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

Overview

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

Development

See Moodle Mobile Plugins Development.

There are a couple of tutorials with two sample plugins (grades and forums plugins)

See Moodle Mobile Developing a plugin tutorial and Moodle Mobile Developing a plugin tutorial part 2

Source code:

• https://github.com/cvaconsulting/moodlemobile-grades
• https://github.com/cvaconsulting/moodlemobile-forums
• https://github.com/cvaconsulting/moodle-local_custommm

Creating your custom app

See Moodle Mobile Customization.

Testing and developing

Google Chrome browser

In order to be able to access any domain via AJAX from the local file:/// protocol, you must run Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files --disable-web-security

IMPORTANT: I strongly recommend you create a new link or application launch called "Google Unsafe" and use it only for testing the app.

"Path to chrome\chrome.exe" --allow-file-access-from-files --disable-web-security

Ripple

Requirements: Google Chrome browser + Ripple mobile environment emulator plugin (http://ripple.tinyhippos.com/)

You must run Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files --disable-web-security

IMPORTANT: I strongly recommend you create a new link or application launch called "Google Unsafe" and use it only for testing the app.

"Path to chrome\chrome.exe" --allow-file-access-from-files --disable-web-security

Open the index.html file in the Google Chrome unsafe and click on the Ripple icon to activate the emulator.

Once opened in the Ripple settings block, change Cross Domain Proxy to Disabled.

Please note that some functionalities (camera, audio recording, contact) will not work in the emulator.

Platform SDK

Install the Android or iPhone SDK and follow instructions in http://phonegap.com/start/.

Local web server

If you deploy the html files in a server under the same domain that the Moodle you are going to connect to you can test the application without emulator or changing the Security settings of your browser.

In other words

Your Moodle at http://myhost.com/moodle

Your app at http://myhost.com/umm/

Note that the mobile - related modules will not work.

Custom Phonegap plugins

Phonegap hast a set of limited features, sometimes it’s necessary implement features that are missing in Phonegap.

Push notifications is one of the most important features missing that can be solved by developing a plugin for Phonegap for every specific platform you want to handle this kind of notifications.

Developing a plugin for Phonegap means developing using the specific platform framework and language (Objective c for iOs).

One of the disadvantages of custom plugins is that you can still use the Phonegap online Build service for cross compiling but the feature will not be present because the online services does not allow you to add custom plugins.

The app can detect if the app has been compiled using the online service for disabling the plugins that uses custom Phonegap plugins automatically

Build process

Limitations and disadvantages of HTML5 apps

• Less speed and smoothness

• Limited to the Mobile functionalities provided from Phonegap

FAQ

Is the app a replacement of the MyMobile theme?

No, see http://moodle.org/mod/forum/discuss.php?d=206736#p901751

What is the difference between a native app and a Mobile specific theme or responsive theme?

See http://moodle.org/mod/forum/discuss.php?d=206736#p901475

Also http://moodle.org/mod/forum/discuss.php?d=206736#p901751

See also

• Moodle Mobile Customization
• Moodle Mobile Plugins Development