Setting up your development environment for the Moodle App

Overview

The majority of your development work will be done using the browser. You will likely begin to use an emulator once you need to simulate a real mobile device.

Remember that the majority of your development can be done using the online version https://mobileapp.moodledemo.net/ (requires Chrome or Chromium browser) as indicated in Mobile support for plugins

Requirements

Install a browser for development

We recommend Chromium browser (Google Chrome open source version) https://download-chromium.appspot.com/ Please, read Moodle_Mobile_development_using_Chrome_or_Chromium for more information

Install git

https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Install Node.js

http://nodejs.org

For Mac users we recommend to install NodeJS via Macports.

Node 6.9.1 has been verified to work fine with the app. If you're having problems with later versions you might want to check if it works with 6.9.1.

"note": if you also need later versions of node for other projects, use Node Version Manager aka "nvm" here. Linux and OSX is supported, and the site has pointers to windows alternatives. Simply type:

  nvm install 6.9.1
  nvm use 6.9.1

Install ionic:

npm cache clean
npm install -g cordova ionic    # (If it throws an EACCESS error, run it again with sudo)

Install the npm required packages

sudo npm install -g gulp                      # (This will install gulp in a folder that should be in the PATH)

Native build dependencies for Windows

node-gyp requires native build tools for your platform. If you're developing on Mac or Linux, you'll probably have these already (refer to the docs if not), on Windows, run the following command as administrator (in cmd or Powershell):

npm install --global --production windows-build-tools

Push notifications for Mac

Phonegap plugin push 1.9.0 requires CocoaPods to work. The installation steps can be found in https://cocoapods.org/

E.g. in Mac OS X you have to run:

sudo gem install cocoapods
pod setup

Please note that for compiling the app in Mac you need to open the .xcworkspace file, more information here: MOBILE-1970

Clone the app base code

Clone the code base into a local directory in your computer.

git clone https://github.com/moodlehq/moodlemobile2.git moodlemobiledirectory
cd moodlemobiledirectory
git checkout v3.5.0

Setup the environment

Please, note that if you are creating a custom app with a custom URL scheme, you should edit the /package.json and /config.xml files and specify there your custom URL_SCHEME (replacing the existing value) and your GCMPN SENDER_ID.

The following command must be run in the project's root folder:

npm run setup

Open the app in the browser

First start Chromium via the command line using the custom parameters as is mentioned here: Moodle Mobile development using Chrome or Chromium

and then, start the Ionic server:

ionic serve --browser chromium

If you don't want to open any browser you should run:

ionic serve -b

Updating ionic and cordova

sudo npm update -g cordova
sudo npm update -g ionic

Update project platforms:

ionic platform remove android
ionic platform remove ios
ionic platform add android
ionic platform add ios

Updating plugins

cordova plugin remove your_plugin_id
cordova plugin add your_plugin_id

Building for Android and iOS

Please see this guide to be able to build for Android and iOS using the command line:

http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides

If you get errors while building, please see the Troubleshooting section below.

Troubleshooting

Error: libsass bindings not found. Try reinstalling node-sass?

Please read: http://fettblog.eu/gulp-and-node4-first-aid/, alternatively you must be sure that you installed Node v0.12

node-gyp\src\win_delay_load_hook.c(34): error C2373: '__pfnDliNotifyHook2': redefinition; different type modifiers

Try updating npm to the latest version using:

 npm install -g npm@latest

com.android.dex.DexException: Multiple dex files define XXX

Open the file platforms/android/build.gradle and add this code at the end:

 configurations {
     all*.exclude group: 'com.android.support', module: 'support-v4'
 }

Could not resolve all dependencies for configuration ':_debugCompile'.

Open the Android SDK Manager and make sure you have installed: Android Support Repository, Android Support Library, Google Play Services and Google Repository.

Could not find com.android.support:support-v4:XXX

Open the file platforms/android/build.gradle and add this code at the end:

 configurations.all {
     resolutionStrategy.force 'com.android.support:support-v4:24.0.0'
 }

ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:font

Open the file platforms/android/build.gradle and add this code at the end:

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
}

See also

http://ionicframework.com/docs/cli/