Creating a custom Moodle Mobile app - MoodleMoot Spain 2014

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 (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_ChromiumWill be a plus: Moodle Mobile Simulator:https://docs.moodle.org/dev/Moodle_Mobile_simulatorWill be a plus: QR reader app for Android

RequirementsMoodle 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 pagesRemove or change existing featuresCustom translation of the appUse 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 [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 settingsREADME.md: 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: mootes14https://github.com/jleyva/moodlemobile/blob/mootes14/config.xml

config.xml

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.urlhttps://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/ directoryUse online tools like: http://makeappicon.com/

Replace the app icons, splashscreen

Thats 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/mootes14/plugins/mootes14/theme.css

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: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 mootes14Upgrade your version numberCommit your changesRebuild with Phonegap buildPublish in the store

Keep your custom version up2date

You have more information here:

https://github.com/jleyva/moodlemobile/tree/mootes14https://build.phonegap.com/apps/1211443/buildshttp://docs.moodle.org/en/Mobile_apphttps://docs.moodle.org/en/Moodle_Mobile_additional_featureshttp://docs.moodle.org/dev/Moodle_Mobilehttps://tracker.moodle.org/browse/MOBILE

Thanks for coming