Moodle Mobile 2 (Ionic 1) Plugins Development

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

IMPORTANT: This documentation will be obsolete in May 2018, please read this announcement.

Overview

Plugins (known as Moodle Mobile 2 addons) allow developers to extend the app functionalities.

An addon is a subdirectory that implements a set of required functionalities. For those familiars with AngularJS, addones are AngularJS modules.

IMPORTANT: Read carefully this document (Moodle Mobile Customization) before you start developing!

Please, note also that this documentation is oriented to Moodle Mobile specific APIs, before starting developing you should get familiar with AngularJS and Ionic, here you have some resources:

Ionic

• http://ionicframework.com - Official Ionic website
• https://www.airpair.com/ionic-framework/posts/the-definitive-ionic-starter-guide - Definitive ionic starter guide
• http://mcgivery.com/100-ionic-framework-resources/ - +100 Ionic resources
• https://github.com/juarezpaf/ionic-adventures?utm_source=mobilewebweekly&utm_medium=email - More ionic resources
• http://codepen.io/ionic/public-list/ - Ionic sample code lists
• https://www.youtube.com/channel/UChYheBnVeCfhCmqZfCUdJQw - YouTube channel from Ionic
• http://www.manning.com/wilken/ - Ionic in action book

Angular

• https://angularjs.org - The official documentation for AngularJS
• http://manning.com/bford - AngularJS in Action book
• http://manning.com/aden - AngularJS in Depth book

Cordova

• http://cordova.apache.org - Official Cordova site
• http://plugins.cordova.io - Cordova official plugin registry.
• http://ngcordova.com - ngCordova AngularJS wrappers for cordova

Moodle Mobile 2 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.

The app comes with a predefined set of addons: messages, forum, notifications, etc. All these addons are inside the www/addons folder.

An addon can be shown in several places. The app has one delegate per each place an addon can be shown, so each addon can register itself to any set of delegates.

You can see the list of available delegates in this section.

Structure of an addon

If you are not familiar with AngularJS, please, read the AngularJS guide to a complete understanding of the different terms used in this document.

Forum addon directory:

controllers/
 discussion.js
 discussions.js
lang/
  en.json
services/
 forum.js    
templates/
 discussion.html
 discussions.html
main.js

controllers and templates

The controllers directory contains the module controllers, usually you are going to have there a controller per view and per template.

In the forum example, you can see that there are two controllers and two templates:

• discussions.js|html for displaying the complete list of discussions of a forum in a course
• discussion.js|html for displaying a single discussion.

Each controller is responsible of rendering the view, for example, the discussions.js will fetch and display the list of discussions of the forum using the helper service defined in forum.js

The controller will also implement additional functionalities like support to "Pull down to refresh"

lang

The lang directory contain the language file with the translated strings.

services

This directory contains the app services, usually for non-complex addons you will find a single file inside containing all the code logic used for providing the main functionality of the addon like the code for retrieving the discussions via Moodle Web Services.

main.js

This is a mandatory file, it:

• Creates the AngularJS module
• Declares all the state routes the plugin is going to user. Attaching a controller and template for each different state.
• Initializes the addon and register it into one or more delegates (this determines where the plugin will be displayed in the app).

See also

• Moodle Mobile Developing a plugin tutorial
• Moodle Mobile Developing a plugin tutorial part 2