141 lines
5.8 KiB
Markdown
141 lines
5.8 KiB
Markdown
# Example Vue Applications
|
|
|
|
This project provides some example Vue applications that are designed to run within the [Channel Automation: Adaptive Framework](https://em-docs.verint.com/15_3/em-integration/Content/AdaptiveFramework/Adaptive_Framework_Components.htm?Highlight=Adaptive%20Framework).
|
|
|
|
## Example Routes
|
|
|
|
### /debug
|
|
|
|
Provides debug infomation on cookies, [authentication](https://em-docs.verint.com/15_3/em-security-and-authentication/Content/AuthenticatingRESTServices/Authenticating_Secured_Web_Services_using_Cookies.htm) and contents of the [Tenant Properties Service](https://em-docs.verint.com/15_3/em-tech-config-and-sysadmin/Content/SystemProperties/Tenant_Properties_Service.htm).
|
|
|
|
### /telephonyContext
|
|
|
|
Displays Telephony Context Information. This route has been designed to be used withing a Call Interaction.
|
|
|
|
#### Parameters
|
|
|
|
Parameters prefixed with 'tps:' will fetch values from the Tenant Properties Service.
|
|
|
|
Paremeters prefixed with 'km:' will use Knowledge Management using the {contentID}(migratableReference)/{lang}. For example, integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US.
|
|
|
|
| name | description |
|
|
| -------------------- | ---------------------------------------------------------- |
|
|
| ani | Automatic Number Identification |
|
|
| dnis | Dialed Number Identification Service |
|
|
| queue | Queue the Call was in before it was delivered to the agent |
|
|
| direction | INBOUND, OUTBOUND etc. |
|
|
| channel | AmazonConnect etc. |
|
|
| type | Voice, Voicemail etc. |
|
|
| transferSummary | Mock of Transfer Summary |
|
|
| integrationCardTitle | Title over Integration card |
|
|
| integrationCardDoc | HTML document for contents of integration card |
|
|
| crsScore | Call Risk Score (0-100) |
|
|
| authenticated | Authenticated in IVA/IVR (true/false) |
|
|
|
|
## Installing into an Innovation Lab
|
|
|
|
### Prerequisites
|
|
|
|
Make sure npm is installed and node us up to date
|
|
|
|
```sh
|
|
sudo apt update
|
|
sudo apt install -y npm
|
|
sudo npm install -g n
|
|
sudo n stable
|
|
hash -r
|
|
```
|
|
|
|
### Build the project
|
|
|
|
Clone this project, install and build.
|
|
|
|
```sh
|
|
cd /opt/em/projects/current/demo/static
|
|
git clone https://git.mortons.site/verint.com/ca_vue_apps.git
|
|
cd ca_vue_apps
|
|
npm install
|
|
touch .env
|
|
```
|
|
|
|
Edit the .env file to hold the Channel Automation api username & password we cannot use the '\_\_Host-VRNTOTCT' cookie because it is HttpOnly and not passed to browser side javascript. So we use the oidc-token-service to grant us a token using username/password.
|
|
|
|
```env
|
|
// file .env
|
|
VITE_API_USERNAME=apiclient
|
|
VITE_API_PASSWORD=apiclient
|
|
ASSET_URL=/ca_vue_apps
|
|
```
|
|
|
|
Build the distribution
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
The 'static' directory is already served by Apache so this Application is now available. Configure the Web Integration URL to use it. See Screenshot below:
|
|
|
|
|
|
|
|
## Development
|
|
|
|
### Install
|
|
|
|
```sh
|
|
npm install
|
|
```
|
|
|
|
### Running
|
|
|
|
List options using:
|
|
|
|
```sh
|
|
npm run
|
|
```
|
|
|
|
Overrided API Values using a .env file. For example:
|
|
|
|
```env
|
|
VITE_API_ORIGIN=https://em20.verint.live
|
|
VITE_API_USERNAME=apiclient
|
|
VITE_API_PASSWORD=apiclient
|
|
```
|
|
|
|
### CORS Work Around
|
|
|
|
When developing this on localhost against Channel Automation APIs hosted elsewhere, you will need to apply a work around for CORS because the preflight check will fail with a 401 Not Authorized error.
|
|
|
|
The fix is to use Apache Rewrite on the API host server to respond OK to the preflight check. For example, with 'tenant-properties-service' API:
|
|
|
|
```apache
|
|
<Location /tenant-properties-service>
|
|
ProxyPass https://${HOSTNAME}:8312/tenant-properties-service
|
|
ProxyPassReverse https://${HOSTNAME}:8312/tenant-properties-service
|
|
|
|
// The following lines allow for un-'Authorization' header
|
|
// preflight checks to pass
|
|
RewriteEngine On
|
|
RewriteCond %{REQUEST_METHOD} OPTIONS
|
|
RewriteRule ^(.*)$ /blank.html [QSA,L]
|
|
</Location>
|
|
```
|
|
|
|
## Vue 3 + TypeScript + Vite
|
|
|
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
|
|
|
### Recommended IDE Setup
|
|
|
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
|
|
|
### Type Support For `.vue` Imports in TS
|
|
|
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
|
|
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
|
|
|
1. Disable the built-in TypeScript Extension
|
|
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
|
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|