Moodle Mobile custom apps

  • A+




You will need a custom app if you want:

  • Force the users to log in to your site URL
  • 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


Steps for creating your Custom App

Setting up your computer

Follow these guides:

Fork the app

Use the Fork tool in: (You must be logged with your Github user!)

Moodle Mobile custom apps

Clone the repo in your desktop

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

Moodle Mobile custom apps

Create a new branch

Having the code in a separate branch in the forked repository will make very easy to maintain our customizations using git tools (merge, rebase)

Moodle Mobile custom apps

Edit the app settings file


  • Change the widget id value (instead com.moodle.moodlemobile your own id)
  • Change the app name and description


  • Change versionname
  • Add a pre-fixed URL: Adding a field like “siteurl”: “”
  • Change gcmpn (if you are using your custom Google Push infrastructure)
  • Change the appid (required for making Push notifications work)
  • Remove demo sites (“demo_sites”: “”)

Edit another app files

/www/core/component/settings/lang/x.json (x means all the languages)

  • Change the “appname” string to match your custom app name (Not necessary in latest version Moodle Mobile 3.1.3), you can change it in config.json


  • Change: var reportUrl to point to your custom error reporting system (if you want to use your custom one)
  • Same for appVersion

Replace the app icons, splashscreen

  • Replace the resources/ icon.png and splash images
  • Replace also the www/img/moodle.png with an image matching your logo
  • In a console:
    • cd mycustomappdir/
    • ionic resources

This will create your custom icon and splash images in all the required sizes

More information about Ionic’s image generation:

Add your custom styles

Moodle Mobile custom apps

Building your Custom App

There are two options for building the app:

  • Ionic CLI
  • Phonegap Build
    • Remote building (cloud service)
    • This is the recommended way because it doesn’t require to install all the SDK, emulators (or having to buy a Mac for developing)

Building with Phonegap Build


  • First of all, you need to create a new repository in GitHub. This is because Phonegap Build requires a different directory structure than Ionic CLI and we need a branch per platform.
  • In your forked repository, run gulp so the build files are updated.
  • Copy all the code inside the www/ in your forked repository directory to this new repo/branch.
  • Also copy the /resources directory from the ionic project to a new /resources directory in the phonegap build repository
  • You also have to place the /resources/icon.png and /resources/splash.png you used to create your resource files in the root folder in the phonegap build repository
  • Use this repository as an example:
  • In the Phonegap Build repo root folder you need to add a special config.xml file (different to the Ionic one), use this file as a template. Please, replace there the app name, versions, etc.
  • Then, in the Phonegap build repo you need two create two additional branches based on master: android and ios
  • In the android and ios branch you need to apply these changes:

Disable debugging in the app:

Moodle Mobile custom apps

Add android or ios base class (so the app use native style widgets):

Moodle Mobile custom apps
  • The rest of the commits can be safely omitted:
    • Add reporting library
    • Add official tag


  • Create an account in:
  • For iOS you need to create certificates/provisioning files:
  • For Android, you can download and install the .apk for testing, for production follow the previous guide.
  • In order to build, add your repository https link and also the branch in the Phonegap Build settings (you will have to do two different builds: one for the android branch and another one for the ios branch)
  • In order to update your app for phonegap build you have to (this will apply all the specific android/ios commits to your master branch):
    • Upload new versions of the app to the www/ directory and then execute the commands:
    • git rebase master android
    • git push -f
    • git rebase master ios
    • git push -f

Remove existing features

  • You can only remove add-ons.
  • In order to disable an add-on you need to delete the folder.
  • Add-ons are located in the www/addons folder.
  • In case you want to remove a particular functionality of an add-on you will need to edit the files inside the addon. Please notice that removing a state is not enough for a feature to be disabled, you also need to remove all the links to that state to prevent errors.
  • Then run gulp or ionic serve in the project root folder so the build files are created.

Change the app strings

  • Language strings are located in:
    • www/core/lang folder (a different file for each language)
    • www/core/components/COMPONENT_NAME/lang folder
    • www/addons/ADDON_NAME/lang folder
  • Language files are .json files, you can edit it using a text editor. Please, use to validate that the new language file is correct.
  • Then run gulp or ionic serve in the project root folder so the build files are created

Change the initial screen (add site)

  • To make the app use a fixed site URL you need to add a new setting in the config.json file: “siteurl”: “”
  • Then run gulp or ionic serve in the project root folder so the build files are created.

You can see an example from our Learn Moodle app (that is a custom version of Moodle Mobile) here:

Keep your custom version up2date

  • Sync your fork:
  • Rebase your changes (and resolve conflicts):
    • git rebase master yourcustombranch
  • Upgrade your version number
  • Commit your changes
  • Apply the changes in your Phonegap Build specific repository
  • Rebuild with Phonegap build for both android and ios branches
  • Publish in the store
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: