Creating a custom version of the Moodle Mobile app

1. Creating a custom
Moodle Mobile app
Juan Leyva
Moodle Mobile Lead Developer
Daniel Palou
Moodle Mobile Developer (CV&A)
@jleyvadelgado #mootes14

2. ● 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

3. Moodle Mobile is the official mobile
app for Moodle
https://download.moodle.org/mobile/
Moodle Mobile

4. ● 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?

5. https://github.com/moodlehq/moodlemobile
Fork the app

6. 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

7. Create a new branch

8. 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

9. 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

10. 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

11. ● 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

12. That’s all folks!

13. ● Commit your changes!
● Create an account in:
https://build.phonegap.com/
https://build.phonegap.com/apps/1211443/builds
Build the app using Phonegap Build

14. ● 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

15. ● https://docs.moodle.org/dev/Moodle_Mobile_Themes
Create a custom theme

16. ● The theme:
https://github.com/jleyva/moodlemobile/blob/mootes1
4/plugins/mootes14/theme.css
Create a custom theme

17. 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

18. ● 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

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

20. ● 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

21. ● 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

22. ● Static pages:
Add new options in the app

23. ● 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

24. 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