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
No edit summary
(34 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{Moodle Mobile}}
{{Moodle Mobile}}
{{Work in progress}}
 
{{obsolete}}
IMPORTANT: This documentation will be obsolete in a few weeks, please [https://moodle.org/mod/forum/discuss.php?d=360412 read this announcement].


== Overview ==
== 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.
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 ==
== Requirements ==
Line 9: Line 11:
'''Install a browser for development'''
'''Install a browser for development'''


I recommend Chromium browser (Google Chrome open source version) https://download-chromium.appspot.com/
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
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'''  
'''Install Node.js'''  


http://nodejs.org for Mac users I recommend to install nodejs via macports.
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" [https://github.com/creationix/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:'''  
'''Install ionic:'''  
  npm cache clean
  npm cache clean
  npm install –g cordova ionic
  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.'''
'''Clone the code base into a local directory in your computer.'''
Line 24: Line 52:
  cd moodlemobiledirectory
  cd moodlemobiledirectory


'''Add the iOs and Android platforms'''
== Automatically setup the environment ==
ionic platform add iOS
 
ionic platform add android
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 [https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md GCMPN SENDER_ID].
 
The following command must be run in the project's root folder:


'''Install the required Cordova plugins'''
  npm run setup
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
This command will throw some warnings, since Ionic 1 requires some libraries that are deprecated. Just ignore all the npm WARN messages.


Alternatively to a manual installation of every plugin you can run the following command:
If this instruction is successful you can jump to the section [[#Open_the_app_in_the_browser|Open the app in the browser]]. If it fails, please check the next section.
ionic state restore


It should install all the plugins listed in package.json
== Manually setup the environment ==


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


'''Install the required javascript files'''
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 /config.xml file and specify there your custom URL_SCHEME (replacing the existing value) and your [https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md GCMPN SENDER_ID].
 
Run the following command to install the platforms and all the required Cordova plugins:
cordova prepare
 
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)
  bower install (this will install all the libraries listed in bower.json)


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


'''Open the app in the browser'''
== 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]]
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:
and then, start the Ionic server:


  ionic serve --browser chromium
  ionic serve --browser chromium
If you don't want to open any browser you should run:
ionic serve -b


== Editor ==  
== Editor ==  
Line 67: Line 109:


  sudo npm update -g cordova
  sudo npm update -g cordova
  sudo npm update -g ioni
  sudo npm update -g ionic
 
Update project platforms:


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


== Updating plugins ==
== Updating plugins ==


  cordova plugin rm your_plugin_id
  cordova plugin remove your_plugin_id
  cordova plugin add your_plugin_id
  cordova plugin add your_plugin_id


==See also ==
== Building for Android and iOS ==
http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides How to install different platforms SDK and emulators
 
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
 
== See also ==


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

Revision as of 09:54, 19 February 2018


Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

IMPORTANT: This documentation will be obsolete in a few weeks, please read this announcement.

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

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@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 /config.xml 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:

cordova prepare

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

See also

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