Moodle Mobile Customization
- Moodle Mobile Customization
- Moodle Mobile development using Chrome or Chromium
- Moodle Mobile simulator
- Moodle Mobile Themes
- Moodle Mobile Plugins Development
- Moodle Mobile Developing a plugin tutorial
- Moodle Mobile Developing a plugin tutorial part 2
- Moodle Mobile Testing with Phonegap Developer app
- 1 Overview
- 2 Creating your custom application
- 3 Testing and developing
- 4 See also
In this document are described the general steps for building your custom Mobile app.
You can find a step by step guide of how to create a custom version of the app here: http://es.slideshare.net/juanleyva/creating-a-custom-moodle-mobile-app-moodle-moot-spain-2014
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
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
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..
There are three options for building the app, aka compile it to different devices:
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.
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.
You can build also using the Phonegap CLI interface, it requires to install the different Platform SDK / tools but the build process is simpler. See http://docs.phonegap.com/ for more information
Once installed the environment, you need to deploy in your project/www folder the app code
Automatic build system
See Moodle Mobile Automatic Building System for some instructions for building an automatic building system initially for Android.
Testing and developing
Chromium or Google Chrome browser
Requirements: Google Chrome browser + Ripple mobile environment emulator plugin (http://ripple.tinyhippos.com/)
You must run Google Chrome in Unsafe mode adding this param:
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.
Install the Android or iPhone SDK and follow instructions in http://phonegap.com/start/.
Debugging styles or running a remote Console
You can use Safari or Google Chrome developer tools for debugging (console) and changing the CSS styles in live:
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/
Your Moodle at http://localhost/moodle24
Your app at http://localhost/moodlemobile/
Note that the mobile - related modules will not work.