Moodle Mobile 2 (Ionic 1) Plugins Development: Difference between revisions
- Moodle Mobile 2 (Ionic 1) Customization
- Setting up your development environment for Moodle Mobile 2 (Ionic 1)
- Moodle Mobile development using Chrome or Chromium
- Moodle Mobile 2 (Ionic 1) Plugins Development
- Moodle Mobile 2 (Ionic 1) Themes
- Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial
- Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial part 2
- Moodle Mobile debugging WS requests
- Moodle Mobile 2 (Ionic 1) Remote add-ons
- Moodle Desktop
- Moodle Mobile FAQ
- Moodle Mobile End To End Testing
- See all Moodle App pages
- See pages for Moodle App Ionic 5 (current)
- See pages for Moodle App Ionic 3 (legacy)
- See pages Moodle App Ionic 1 (legacy)
- See pages for Moodle App Phonegap (legacy)
For user documentation see Moodle Mobile
Juan Leyva (talk | contribs) |
No edit summary |
||
(30 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{Moodle 2 | {{Template:WillNotMigrate}} | ||
{{Moodle Mobile 2 (Ionic 1)}} | |||
= | IMPORTANT: This documentation will be obsolete in May 2018, please [https://moodle.org/mod/forum/discuss.php?d=360412 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 [https://docs.moodle.org/dev/Moodle_Mobile#Addons in this section]. | |||
=== Structure of an addon === | |||
If you are not familiar with AngularJS, please, read the [https://docs.angularjs.org/guide 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 | 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]] | |||
* | |||
Latest revision as of 07:14, 29 April 2022
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).