Setting up your development environment for Moodle Mobile 2 (Ionic 1): Difference between revisions
No edit summary |
No edit summary |
||
Line 30: | Line 30: | ||
'''Install ionic:''' | '''Install ionic:''' | ||
npm cache clean | npm cache clean | ||
npm install -g cordova@6.5.0 ionic@2.2.3 # (If it throws an EACCESS error, run it again with sudo) | npm install -g cordova@6.5.0 ionic@2.2.3 # (If it throws an EACCESS error, run it again with sudo) | ||
Please notice that Ionic 2.2.3 is being used. The CLI for Ionic 3 breaks our building system, there is an open issue to fix this: [https://tracker.moodle.org/browse/MOBILE-2112 MOBILE-2112]. | Please notice that Ionic 2.2.3 is being used. The CLI for Ionic 3 breaks our building system, there is an open issue to fix this: [https://tracker.moodle.org/browse/MOBILE-2112 MOBILE-2112]. | ||
'''Install the npm required packages''' | '''Install the npm required packages''' | ||
sudo npm install -g bower # (This will install bower in a folder that should be in the PATH) | 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) | sudo npm install -g gulp # (This will install gulp in a folder that should be in the PATH) | ||
'''Push notifications for Mac''' | '''Push notifications for Mac''' |
Revision as of 15:33, 13 November 2017
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
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
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@6.5.0 ionic@2.2.3 # (If it throws an EACCESS error, run it again with sudo)
Please notice that Ionic 2.2.3 is being used. The CLI for Ionic 3 breaks our building system, there is an open issue to fix this: [https://tracker.moodle.org/browse/MOBILE-2112 MOBILE-2112].
Install the npm required packages
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)
Push notifications for Mac
Phonegap plugin push 1.9.0 requires CocoaPods to work. The installation steps can be found in https://cocoapods.org/
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
Automatically setup the environment
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.
The following command must be run in the project's root folder:
npm run setup
This command will throw some warnings, since Ionic 1 requires some libraries that are deprecated. Just ignore all the npm WARN messages.
If this instruction is successful you can jump to the section Open the app in the browser. If it fails, please check the next section.
Manually setup the environment
Install the npm plugins dependencies
npm install (This will install all the dependencies listed in package.json)
This command will throw some warnings, since Ionic 1 requires some libraries that are deprecated. Just ignore all the npm WARN messages.
Add the iOS and Android platforms and install the required Cordova plugins
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.
Run the following command to install the platforms and all the required Cordova plugins:
ionic state restore
Cordova Android 6.1.2 and Cordova iOS 4.3.1 have 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 these versions.
Install javascript libraries
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
If you don't want to open any browser you should run:
ionic serve -b
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
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
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
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