Moodle Mobile 1 Customization

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.

Overview

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

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 1 Plugins Development and Moodle Mobile 1 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 three 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.

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.

Phonegap CLI

You can build also using the Phonegap CLI interface, it requires to install the different Platform SDK / tools but the build process is simpler.

Once installed the environment, you need to deploy in your project/www folder the app code

Platform SDK

See Moodle Mobile Building the app for Android or Moodle Mobile Building the app for iOS (These articles may be obsolete)

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

See Moodle Mobile development using Chrome or Chromium

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.

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:

https://developer.chrome.com/devtools/docs/remote-debugging

http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html

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.

See also

Creating a custom Moodle Mobile app - MoodleMoot Spain 2014