Setting up your development environment for Moodle Mobile 2 (Ionic 1)

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

Overview

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

Requirements

Install a browser for development

I 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 Node.js

http://nodejs.org for Mac users I recommend to install nodejs via macports.

Install ionic:

npm cache clean
npm install –g cordova ionic

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

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

Install the npm plugins dependencies

npm install (This will install all the dependencies listed in package.json)
npm install -g bower (This will install bower in a folder that should be in the PATH)
npm install -g gulp (This will install gulp in a folder that should be in the PATH)

Add the iOs and Android platforms

ionic platform add iOS
ionic platform add android

Install the required Cordova plugins Via ionic plugin add xyz (Replace xyz with the list of plugin listed in /package.json):

ionic plugin add org.apache.cordova.globalization org.apache.cordova.file ...

It's very important to install the plugins in order. Note also that when installing the nl.x-services.plugins.launchmyapp plugin you will be asked to enter a value for the URL_SCHEME it should be moodlemobile

Alternatively to a manual installation of every plugin you can run the following commands:

ionic state restore
ionic plugin add https://github.com/Tunts/WebIntent https://github.com/ti8m/DocumentHandler cordova-plugin-customurlscheme --variable URL_SCHEME=moodlemobile

The first command should install all the plugins listed in package.json except the ones that need extra params or can't be found. These will be installed with the second command.

Install bower globally and the required javascript files

bower install (this will install all the libraries listed in bower.json)

Run gulp’s default tasks (in order to create the build files)

gulp

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

Editor

There are several plugins for AngularJS and Ionic development available for common editors.

Sublime 3 has plugins for jscs (coding style) and jshint (linter)

Configuration files for jscs and jshint can be downloaded from https://github.com/angular/angular.js (.jscs.json and .jshint*)

Updating ionic and cordova

sudo npm update -g cordova
sudo npm update -g ioni

ionic platform update android
ionic platform update ios

Updating plugins

cordova plugin rm your_plugin_id
cordova plugin add your_plugin_id

Documentation