Add mobile support to your Moodle plugin - part two

Part Two - Exploring the Moodle Mobile Add-on

In the first part of this series, I set up a development environment on my local machine. I am going to use this same environment to begin coding the mobile add-on portion of my Moodle questionnaire plug-in.

The documentation says I need to develop the mobile side as a standard Moodle Mobile add-on and then package it as a remote add-on, with four steps:

1. Develop the required Moodle Web Services
2. Develop a standard Moodle Mobile add-on
3. Package the Moodle Mobile add-on as a remote add-on
4. Include the remote add-on in your Moodle plugin

The first two steps are where my work will start. The second two steps are what I will need when I am ready to distribute what I have developed for anyone to use in their mobile apps with their Moodle sites. I am also going to start with step two, as this will help me understand what is needed in the mobile portion and what is needed from the Moodle plugin portion.

Recall, that when I try to access my plugin in the mobile app now, I get the screen:

My goal, for the start, is to provide enough code so that screen changes.

To start, I look at the current structure of the mobile app on my local server. Within it is a www/addons directory that contains all of the core mobile addons. I can see, that like a Moodle site, there is a mod subdirectory, and within that, a number of subdirectories corresponding to each of the supported core activity plugins.

For ease of development, I am going to add my plugin to the same location. That way, I can update my code within the mobile app, and access it with the browser, to see my work. Essentially, my local files will stand-in as the mobile app, and the questionnaire mobile addon will act as a core activity plugin.

For purposes of code storage, I am going to add an addons subdirectory to my questionnaire repository and add the code that will go into the mobile addon there. This code will not be required, nor run, on a Moodle site, but I want to keep it together with my Moodle plugin for development ease.

Through a productive discussion with the mobile development team, I have determined that getting my add-on registered with the mobile app requires code that registers a content handler. In the add-on structure, this happens in the main.js file in a config statement (full code here):

.config(function($mmCourseDelegateProvider) {
    $mmCourseDelegateProvider.registerContentHandler('mmaModQuestionnaire', 'questionnaire', '$mmaModQuestionnaireHandlers.courseContent');
});

Essentially, the mobile framework translates this code such that it knows there must be a services subdirectory and within that a file named handlers.js that contains a courseContent function. I create that structure with a very simple courseContent function as follows (full code here):

self.courseContent = function() {
    var self = {};
    /**
     * Whether or not the module is enabled for the site.
     *
     * @return {Boolean}
     */
    self.isEnabled = function() {
        return true;
    };
    return self;
};

In conversations with the developers, I have determined that I need an isEnabled function, that returns true if the plugin is enabled, for my addon to be acknowledged and not display the "plugin that is not yet supported" message. For now, I just send true with no logic confirming that. Eventually, this will call a web service from the actual questionnaire plugin on the Moodle site to determine this. I also know that when I run my local version of the mobile app using the ionic server, it will build my addons code into the app's main code file, www/build/mm.bundle.js.

After dropping these two files into my mobile app's www/addons/mod/questionnaire directory, I run the ionic server (removed some messages for brevity):

ionic serve --browser chromium
Running 'serve:before' gulp task before serve
[13:43:32] Starting 'build'...
[13:43:32] Starting 'sass-build'...
[13:43:32] Starting 'lang'...
[13:43:32] Starting 'watch'...
[13:43:41] Finished 'watch' after 9.04 s
[13:43:47] Finished 'sass-build' after 15 s
[13:43:47] Starting 'sass'...
[13:43:48] Finished 'lang' after 15 s
[13:43:49] Finished 'sass' after 1.92 s
[13:43:50] Finished 'build' after 18 s
[13:43:50] Starting 'config'...
[13:43:50] Finished 'config' after 17 ms
[13:43:50] Starting 'default'...
[13:43:50] Finished 'default' after 6.02 μs
[13:43:50] Starting 'serve:before'...
[13:43:50] Finished 'serve:before' after 3.15 μs
Running live reload server: http://localhost:35729
Watching: www/**/*.html, www/build/**/*, www/index.html, !www/lib/**/*
√ Running dev server:  http://localhost:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit
ionic $

I can see a lot of build activity happening. I then point my browser to the server instance and see a lot more activity kick in. When I access my course, and then click on my questionnaire activity, I no longer get the "plugin that is not yet supported" message:

I don't get the questionnaire displayed, but I didn't expect to. I have at least learned how to impact the mobile app with my addon.

I also take a look at the www/build/mm.bundle.js to see if it now contains the code I created for the questionnaire addon. A quick search of the code reveals that it does. So I have confirmed that the mobile app has successfully picked up the questionnaire addon code and added it to the app.

In the next post, I will flesh out more of the mobile add-on code, and begin to look what the web services needed on the questionnaire plugin side.