Moodle Mobile 2 (Ionic 1)

For user documentation see Moodle Mobile.

General Overview

Moodle Mobile 2 (MM2) is the official mobile app for Moodle. MM2 is an HTML5 app that uses the Ionic hybrid apps framework. Former Moodle Mobile versions (1.x) used jQuery and Backbone (se Moodle Mobile 1 for documentation about the former app).

Basically, the app is a Web Services client that uses REST as protocol to obtain and send information to your Moodle installation/s.

Interaction with the phone and compiling/packaging is done using the Cordova framework (also commonly known as Phonegap).

MM1 plugins are not going to work in MM2.

Requirements

• Moodle 2.4

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

Architecture

MM2 is built with ionic framework, ionic is a full stack mobile hybrid apps that uses AngularJS framework.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

AngularJS is quite popular, you may find lot of sites with updated documentation and free courses, the same applies for Ionic.

Ionic / AngularJS

The app architecture is the typical for an AngularJS app. We use controllers, factories, directives, providers, etc..

The app is designed in a modular way, most of the functionalities are AngularJs modules that implements plugins (in a similar way to Moodle plugins).

There are a set of core services for handling authentication, configuration, plugin management, cache, etc… and specific modules for tasks like internationalization.

Most of the services are implemented as factories.

The app uses AngularJs logging to create an application log (only in developer mode).

App structure and naming conventions

The app is structured in two parts: core and addons.

In core we have the code that the app needs to be able to work (basic version). There are services, components, directives, filters, etc.

The components inside core are similar to addons, but the app needs them to work: login, sidemenu, courses, etc. Each component needs to define a main.js file to initialize it and to define the module.

Naming conventions for core:

• The module name for components needs to be mm.core.componentname and it should be defined in the component’s main.js. The services, filters and directives that don’t belong to a component need to use the module mm.core (defined in www/core/main.js).
• All the services names need to start with $mm, followed by the service name in camel-case. For example, $mmSitesManager.
• The filters and directives use camel-case starting with mm. For example, mmFormatText.
• The controllers names need to start with mm (without dollar), followed by the controller name in camel-case. The controller name needs to contain Ctrl to easily identify it as a controller. For example, mmCourseListCtrl.

In addons we have the official MM2 addons. Each addon can have services, controllers, templates and lang files. The addon needs to specify a main.js file to initialize the addon and to register itself into one or more delegates (this determines where will the plugin be shown).

Naming conventions for addons:

• The module name for addons needs to be mm.addons.addonname and it should be defined in the addon main.js.
• All the services names inside an addon need to start with $mma, followed by the service name in camel-case. For example, $mmaForumData.
• The controllers names need to start with mma (without dollar), followed by the controller name in camel-case. The controller name needs to contain Ctrl to easily identify it as a controller. For * example, mmaForumListCtrl.

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/moodlehq/moodlemobile2

Creating your custom app

See Moodle Mobile Customization.

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