Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

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

From MoodleDocs
Revision as of 13:25, 19 December 2016 by Juan Leyva (talk | contribs)

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

IMPORTANT: Don't use node 4.0 or higher, there are incompatibilities with some of the packages we use. Please use v0.12.7 instead. The download directory for v0.12.7 is here

"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 0.12.15
  nvm use 0.12.15

Install ionic:

npm cache clean
npm install -g cordova ionic

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

Install the npm plugins dependencies

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

Add the iOS and Android platforms and install the required Cordova plugins

Install the platforms. It's important to use these versions because newer versions are going to cause some problems with the plugins installed.

ionic platform add android@5.1.1
ionic platform add ios@4.1.0

Run the following command to install the platforms and all the required Cordova plugins

ionic state restore

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

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 ionic
ionic platform update android
ionic platform update ios

Updating plugins

cordova plugin rm 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

Common errors when building

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

Open the file platforms/android/build.gradle and add these 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.

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

See also

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