Creating a custom Moodle Mobile app

Juan LeyvaMoodle Mobile Lead Developer

Daniel PalouMoodle Mobile Developer (CV&A)

@jleyvadelgado #mootes14

● Code editor (Sublime, WebStorm, Eclipse, Netbeans...)

● Github account (http://github.com/)

● Github desktop app (http://windows.github.com/)

● PhonegapBuild account (https://build.phonegap.com/)

● Chromium browser as described here:

https://docs.moodle.org/dev/Moodle_Mobile_development_using

_Chrome_or_Chromium

● Will be a plus: Moodle Mobile Simulator:

https://docs.moodle.org/dev/Moodle_Mobile_simulator

● Will be a plus: QR reader app for Android

Requirements

Moodle Mobile is the official mobile

app for Moodle

https://download.moodle.org/mobile/

Moodle Mobile

● Custom corporate image (name, app icon,

theme, store entry)

● Add additional features or static pages

● Remove or change existing features

● Custom translation of the app

● Use your own notifications infrastructure

Why a custom app?

https://github.com/moodlehq/moodlemobile

Fork the app

You can use your favourite GIT client (or GitHub

Desktop clients)

git clone git@github.com:jleyva/moodlemobile.git

Clone the repo in your desktop

Create a new branch

about.json: Your app information

config.json: App settings

config.xml: Cordova/Phonegap settings

README.md: App info (github)

package.json: Node-webkit info

Edit the configuration files

We need to change:

● id: com.moodle.moodlemobile ->

net.moodlemoot.mootes14

● versionCode, version, and

CFBundleShortVersionString

● Name, description, author, etc…

● URL_SCHEME: mootes14

https://github.com/jleyva/moodlemobile/blob/mootes14/config.xml

config.xml

We need to change:

● app_id: Use the same that in config.xml

● versioncode, versionname: Same that config.xml

● default_lang: es

● Delete demo_sites

● Replace reportbugmail

● Add the Site URL in presets.url

https://github.com/jleyva/moodlemobile/blob/mootes14/config.json

config.json

● Overwrite the images in img/icon/ with other ones

with the same properties (alpha, width and height)

● Same for the img/splash/ directory

● Use online tools like: http://makeappicon.com/

Replace the app icons, splashscreen

That’s all folks!

● Commit your changes!

● Create an account in:

https://build.phonegap.com/

https://build.phonegap.com/apps/1211443/builds

Build the app using Phonegap Build

● For iOs you need to create certificates/provisioning

files: http://docs.build.phonegap.com/en_US/

● Android, you can download and install the .apk

Build the app using Phonegap Build

● https://docs.moodle.org/dev/Moodle_Mobile_Themes

Create a custom theme

● The theme:

https://github.com/jleyva/moodlemobile/blob/mootes1

4/plugins/mootes14/theme.css

Create a custom theme

Two options for adding the theme in the app:

1. Via Moodle settings:

2. Creating a plugin for the app. Recommended for

custom apps. (Described below).

Create a custom theme

● Remove plugins

You can easily disable some of the existing plugins,

edit the config.json and remove plugins from the

“plugins” array

● Reorder plugins

In 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 plugin

● Inject the theme once the plugin is loaded

● This plugin can be used for replacing core

functionality, adding new static pages, etc…

● You can create multiple plugins

Plugin code:https://github.com/jleyva/moodlemobile/tree/mootes14/plugins/mootes14

Replace the base theme

● In the plugin created for the theme, you can add

custom html templates to replace existing core

templates.

Plugin code:https://github.com/jleyva/moodlemobile/tree/mootes14/plugins/mootes14

Change the sign-in form

● Static pages:

Add new options in the app

● Sync your fork:

https://help.github.com/articles/syncing-a-fork/

● Rebase your changes (and resolve conflicts):

git rebase master mootes14

● Upgrade your version number

● Commit your changes

● Rebuild with Phonegap build

● Publish in the store

Keep your custom version up2date

You have more information here:

https://github.com/jleyva/moodlemobile/tree/mootes14

https://build.phonegap.com/apps/1211443/builds

http://docs.moodle.org/en/Mobile_app

https://docs.moodle.org/en/Moodle_Mobile_additional_features

http://docs.moodle.org/dev/Moodle_Mobile

https://tracker.moodle.org/browse/MOBILE

Thanks for coming