Moodle Mobile 2 (Ionic 1) Customization

Overview

In this document are described the general steps for building your custom Mobile app.

Creating your custom application

Remember that if you only want to change the global styles of the app, you can use an extra CSS file in your Moodle installation without needing to recompile the app.

Basic custom settings

In your Moodle installation you can specify a extra CSS file in the Mobile settings section

You can edit the config.json file for: - Adding a default language - Add some presets in the login screen (url and username) pointing to your installation

Development environment

See #Testing_and_developing

It is recommended that you have a local web server (app and moodle installation under localhost or the same local domain).

You will need:

• A Moodle installation with Web Services (REST) enabled - see Web services documentation

• Administration -> Plugins -> Web Services -> External Services -> Enable mobile web service

• Administration -> Plugins -> Web Services -> Protocols -> Enable REST

• Administration -> Users -> Permission -> Define roles -> Edit the Authenticated user role -> Allow webservice/rest:use

• A local copy of the Mobile HTML5 App with the Debugging options Enabled (https://github.com/moodlehq/moodlemobile)

Web Services Development

In most cases your plugin/s will need Web Services to get data from your Moodle installation. It is recommended that you first develop the Web Services that you will need (see Web Services).

• Create a local plugin in Moodle for adding the extra Web Services you need and also your plugin's lang files (Local WS plugin template: https://moodle.org/plugins/view.php?plugin=local_wstemplate)

• Create a new External Service in your Moodle installation, adding a services.php file in your new local plugin or creating manually the service in your Moodle installation.(Plugins -> Web Services) See External services description for more info. Remember the key name of the service, because you will need it later.

Moodle Mobile Plugin Development

See Moodle Mobile Plugins Development and Moodle Mobile Developing a plugin tutorial

For developing the plugin you need:

• Edit the /config.json file to:

• Add the extra plugins you implement
• Indicate the WS service name you are going to use in your Moodle installation (Remember, that you need to create a WS Service indicating the functions available for your custom app)
• Add your custom default lang file (es, ca, fr ...) (the language file must exists in the app's lang/ folder)
• Change the app login form presets

• Add your own css files, custom images, etc..

Building

There are two options for building the app, aka compile it to different devices:

Phonegap Build

Phonegap Build is an online service that let you to build the app automatically for different platforms. The main advantage is that simplify a lot the process of building. Notice that not all the Phonegap plugins used by the app are supported in the app, in this cases, a fallback is used (for Android instead using intents, documents are opened using the browser). Usually, fallbacks works worse.

You just put your customizations in a github account and Phonegaps automatically build the app for different platforms pulling your github code.

Notice that the free version is for open repositories, but you can use the non-free version for private repositories.

Platform SDK

Using the target platform SDK you can build also your app, there is a good tutorial in Phonegap page for starting: http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

More information:

Moodle Mobile Building the app for Android

Moodle Mobile Building the app for iOS

Moodle Mobile Automatic Building System

Differences between building in Phonegap and platform SDK

The main differences are:

• In Phonegap Build you define a generic config.xml file with the icons, name of the app, and related info. For other platforms SDK you need to add this information in the files required by the SDK.
• Phonegap Build supports two plugins used by the application: Generic Push Notifications and Childbrowser. If you want to compile the app in your SDK you need to install this plugins. See: https://build.phonegap.com/docs/plugins
• The Android app uses an Android specific plugin called WebIntent(not supported by Phonegap Build) for opening files using the standard app selector, if you build the app using Phonegap Build a basic solution for opening files will be used. You need to install this plugin also if you want to compile the app using the Android SDK

Android

See Moodle Mobile Building the app for Android

Automatic build system

See https://docs.moodle.org/dev/Moodle_Mobile_Automatic_Building_System

Custom Phonegap plugins

Phonegap hast a set of limited features, sometimes it’s necessary implement features that are missing in Phonegap.

Push notifications is one of the most important features missing that can be solved by developing a plugin for Phonegap for every specific platform you want to handle this kind of notifications.

Developing a plugin for Phonegap means developing using the specific platform framework and language (Objective c for iOs).

One of the disadvantages of custom plugins is that you can still use the Phonegap online Build service for cross compiling but the feature will not be present because the online services does not allow you to add custom plugins.

The app can detect if the app has been compiled using the online service for disabling the plugins that uses custom Phonegap plugins automatically

Testing and developing

Google Chrome browser

In order to be able to access any domain via AJAX from the local file:/// protocol, you must run Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files

If it not work, try to add also:

 --disable-web-security

IMPORTANT: I strongly recommend you create a new link or application launch called "Google Unsafe" and use it only for testing the app.

"Path to chrome\chrome.exe" --allow-file-access-from-files

With Google Chrome and the F12 or "Developer tools" you can emulate mobile devices changing user-agent, orientation, resolution, geo-location, touch events, etc..

Just open the Developers tools, click on the wheel bottom-right corner to see the Override options.

It's interesting also disabling the Cache (in general options)

Ripple

Requirements: Google Chrome browser + Ripple mobile environment emulator plugin (http://ripple.tinyhippos.com/)

You must run Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files

IMPORTANT: I strongly recommend you create a new link or application launch called "Google Unsafe" and use it only for testing the app.

"Path to chrome\chrome.exe" --allow-file-access-from-files

Open the index.html file in the Google Chrome unsafe and click on the Ripple icon to activate the emulator.

Once opened in the Ripple settings block, change Cross Domain Proxy to Disabled.

Please note that some functionalities (camera, audio recording, contact) will not work in the emulator.

Platform SDK

Install the Android or iPhone SDK and follow instructions in http://phonegap.com/start/.

Local web server

If you deploy the html files in a server under the same domain that the Moodle you are going to connect to you can test the application without emulator or changing the Security settings of your browser.

In other words

Your Moodle at http://myhost.com/moodle24

Your app at http://myhost.com/moodlemobile/

or

Your Moodle at http://localhost/moodle24

Your app at http://localhost/moodlemobile/

Note that the mobile - related modules will not work.