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): Difference between revisions

From MoodleDocs
No edit summary
Line 1: Line 1:
{{Moodle Mobile}}
{{Moodle Mobile}}
{{Work in progress}}


== Overview ==
== Overview ==

Revision as of 13:31, 29 June 2015

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

Add the iOs and Android platforms

ionic platform add iOS 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

Install the npm plugins dependencies

npm install (This will install all the dependencies listed in package.json)

Install 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*)

See also

http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides How to install different platforms SDK and emulators

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