Top Banner

Click here to load reader

Creating a custom Moodle Mobile app - MoodleMoot Spain 2014

Jul 12, 2015




Creating a custom Moodle Mobile app

Juan LeyvaMoodle Mobile Lead Developer

Daniel PalouMoodle Mobile Developer (CV&A)@jleyvadelgado#mootes14Code editor (Sublime, WebStorm, Eclipse, Netbeans...)Github account ( desktop app ( PhonegapBuild account ( browser as described here: be a plus: Moodle Mobile Simulator: be a plus: QR reader app for Android

RequirementsMoodle Mobile is the official mobile app for Moodle

Moodle Mobile

Custom corporate image (name, app icon, theme, store entry)Add additional features or static pagesRemove or change existing featuresCustom translation of the appUse your own notifications infrastructure

Why a custom app?

Fork the app

You can use your favourite GIT client (or GitHub Desktop clients)

git clone [email protected]:jleyva/moodlemobile.git

Clone the repo in your desktop

Create a new branch

about.json: Your app informationconfig.json: App settingsconfig.xml: Cordova/Phonegap App info (github)package.json: Node-webkit info

Edit the configuration files

We need to change:id: com.moodle.moodlemobile -> net.moodlemoot.mootes14versionCode, version, and CFBundleShortVersionStringName, description, author, etcURL_SCHEME: mootes14


In config.xml I had to add android-versionCode="1" to the widget tag, otherwise the Android Manifest didnt have the right version number when using PhoneGap CLI. We need to change:app_id: Use the same that in config.xmlversioncode, versionname: Same that config.xmldefault_lang: esDelete demo_sitesReplace reportbugmailAdd the Site URL in presets.url


Overwrite the images in img/icon/ with other ones with the same properties (alpha, width and height)Same for the img/splash/ directoryUse online tools like:

Replace the app icons, splashscreen

Thats all folks!

Commit your changes!Create an account in:

Build the app using Phonegap Build

For iOs you need to create certificates/provisioning files:, you can download and install the .apk

Build the app using Phonegap Build

Create a custom theme

The theme:

Create a custom theme

Two options for adding the theme in the app:

Via Moodle settings:

Creating a plugin for the app. Recommended for custom apps. (Described below).

Create a custom theme

Remove pluginsYou can easily disable some of the existing plugins, edit the config.json and remove plugins from the plugins arrayReorder pluginsIn the same plugins array you can reorder the plugins list.

Remove existing features

Edit the lang/xx.json file for replacing the language strings used in the app.

Change the app strings

Create a new pluginInject the theme once the plugin is loadedThis plugin can be used for replacing core functionality, adding new static pages, etcYou can create multiple plugins

Plugin code:

Replace the base theme

In the plugin created for the theme, you can add custom html templates to replace existing core templates.

Plugin code:

Change the sign-in form

Static pages:

Add new options in the app

Sync your fork: your changes (and resolve conflicts):git rebase master mootes14Upgrade your version numberCommit your changesRebuild with Phonegap buildPublish in the store

Keep your custom version up2date

You have more information here:

Thanks for coming