Personal Library

Guide - OCST 2.0 Development

1 Introduction

The Omni-Channel Services Toolset (OCST) is a collection of frameworks and libraries, which enables fast, standardized development of business Web applications. It also contains a reference implementation to demonstrate the functionality of this toolset - the Contact Center. The OCST including the reference implementation is delivered as source code package and is intended to be modified and extended directly in the source code. There is no automatic delivery or patch process - patches or hotfixes have to be merged manually.

Build and deployment use standard package managers for JavaScript and Web Components NPM (https://nodejs.org) and Bower (https://bower.io/). For building the Ember application the command line interface EmberCLI (https://ember-cli.com/) is used.

The following chapter describes how the development environment has to be set up step by step.

1.1 References

1.1.1 Intershop Sources

1.1.2 Non-Intershop Sources

Tools

http://alexspeller.com/ember-diagonal/ - visualizing routes

Testing

Components
https://alisdair.mcdiarmid.org/ember-component-integration-tests/
https://www.mutuallyhuman.com/blog/2016/01/22/component-integration-testing-in-ember/

ECMA Script 6

http://es6-features.org/

Models, Adapters & Serializers

2 Setup Development Environment

2.1 Prerequisites

Install Node.js with NPM from https://nodejs.org, at least version 6.9.4 (LTS recommended).
NPM is used to install Bower and EmberCLI.
Open command shell:
a. Install bower.
```
npm install -g bower
```
b. Install EmberCLI.
```
npm install -g ember-cli
```

2.2 Dowload/Install OCST 2.0

Download the latest OCST 2.0 source package from our artifact repository (path com.intershop.public.source/ocst) and unzip it to the desired installation directory

2.3 Download/Install External Libraries

Open a command shell.
Go to the installation directory.
Execute:
```
npm install
bower install
```

2.4 Build Ember Application

Open a command shell.
Go to the installation directory.
Execute:
```
ember build --environment=production
```
The parameter "--environment=production" forces Ember to generate all CSS and JS files with minified content for performance reasons (recommended).
The distribution is generated in folder "/dist".

Note

The ember application is automatically built in development mode - without minification - when the server is started without calling the command ember build before.

2.5 OCST/Contact Center Configuration

2.5.1 Host/Path of REST API

The OCST is completely decoupled from the Intershop Commerce Management (ICM) and uses only the REST API to access data and commerce functionality.
Therefore the host and path of the ICM REST API have to be configured in the environment.js file located in the config sub directory. The default value is https://localhost:443.

config/environment.js

  ENV.ocst = {
	...
	host: 'https://localhost:443',
    namespace: 'INTERSHOP/rest/WFS/ContactCenter/-',
	...
 };

2.5.2 Allowed Payment Methods

It might be useful to limit the allowed payment methods for the Contact Center since the Call Center Agent acts on behalf of a customer and does not know any Credit Card PIN etc.

Therefore the list of allowed payment methods (white-list) can be configured in the configuration file config/environment.js. The property is named paymentMethodsWhiteList. The payment methods are identified by their ID defined in the Intershop Commerce Management System.

config/environment.js

  ENV.ocst = {
	...
	 paymentMethodsWhiteList: [
      'ISH_INVOICE_TOTAL_ZERO',
      'ISH_INVOICE',
      'ISH_CASH_ON_DELIVERY',
      'ISH_DEBIT_TRANSFER',
    ]
	...
 };

2.5.3 Version Number

The OCST/Contact Center version number defined inside the package.json is displayed in the storefront as well as in the Ember inspector add-on for browsers (see screenshot).

2.6 Run Server

Open a command shell.
Go to the installation directory.
Execute:
```
ember server
```
The default port for the Ember Application is 4200.
To run the server on a different port, the port has to be appended as parameter:
```
server --port 8080
```
Visit your app at http://localhost:4200 (if the default port is used).

For automatic rebuilding the /tmp and /dist directories should be deleted before calling ember server.
This might be necessary on Windows environments where sometimes privilege issues occur. Windows users might use the batch file serve.bat which automatically deletes these directories and afterwards executes ember server.

2.7 Add-ons

2.7.1 Add-on Versions

All installed add-ons are listed in the ocst/package.json with their specific version to be used. To update an add-on:

Change the version number in this file.

package.json

  ..
  "devDependencies": {
    ..
    "ember-composable-helpers": "2.0.1",
    "ember-cookies": "0.0.11",
    "ember-data": "^2.10.0",
    "ember-export-application-global": "^1.0.5",
    "ember-i18n": "4.5.0",
    "ember-keyboard-shortcuts": "0.3.0",
    "ember-load-initializers": "^0.5.1",
    "ember-moment": "7.3.0",
    "ember-resolver": "^2.0.3",
    "ember-route-action-helper": "2.0.2",
    "ember-truth-helpers": "1.3.0",
    "emberx-select": "3.0.0",
    ..
  },
  ..
}

Repeat the setup step Download/Install External Libraries to download the libraries via package management.

2.7.2 Install New Add-ons

In case new add-ons are needed they can easily be installed:

Use the Ember CLI command ember install.

ember install <addon-git-name> 
## e.g.: ember install ember-i18n

An useful overview of available Ember add-ons can be found on the following external websites:

3 Test Execution

The OCST 2.0 has been completely reworked under the hood compared to version 1.2. One of the main reasons was to enable a test driven development. This approach implies that tests exist for all development artifacts on all layers and new code is developed together with its appropriate test. This recipe describes how existing tests can be executed. For more information about how to write tests see Cookbook - OCST 2.0.

All test types are located in the folder test. Below tests there are several folders for the different test types.

Run tests in silent mode.
```
ember test // phantom js tests
```
This requires an installed PhantomJS library. If the library is not installed yet, it can be done via npm install (param '-g' for global module):
```
npm install -g phantomjs
```
Alternatively you may run tests in a browser.
A browser window is automatically opened when the test runs with parameter --server:
```
ember test --server  // browser tests
```

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Table of Contents