Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle Mobile 2 (Ionic 1): Difference between revisions

From MoodleDocs
No edit summary
No edit summary
Line 1: Line 1:
{{Moodle Mobile}}
For user documentation see (https://docs.moodle.org/25/en/Mobile_app)


{{Moodle Mobile}}
== General Overview ==
== General Overview ==



Revision as of 08:43, 10 June 2013


For user documentation see (https://docs.moodle.org/25/en/Mobile_app)

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

  • RequireJS requirejs.org

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:

Creating your custom app

See Moodle Mobile Customization.

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