React 애플리케이션에 amazon-Conect-streams 포함

아마존-connect-streams란 무엇입니까?

Amazon Connect Streams API(Streams)를 사용하면 기존 웹 응용 프로그램을 Amazon Connect와 통합할 수 있습니다.Streams를 사용하면 Contact Control Panel(CCP) UI 구성 요소를 페이지에 포함하여 에이전트와 접촉 상태 이벤트를 직접 처리하고 대상을 대상으로 하는 이벤트 드라이브 인터페이스를 통해 에이전트와 접촉 상태를 제어할 수 있습니다.
https://github.com/aws/amazon-connect-streams
온라인에서 간단한 샘플을 찾을 수 있지만, 리액트 앱에서 사용하면 오류를 시도해야 하니 프로그램을 정리해보자.

컨디션

OS: macOS Mojave (10.14.5)
Node: v11.15.0(v12는 아마존-Conect-streams의build에서 오류가 발생)
npm: v6.10.1
create-react-app: v3.0.1

사전 작업

아마존 S3에서 통을 만들고 클라우드 프론트의 공개를 거쳐 URL을 승인된 올리브유에 등록한다.(HTTPS를 통한 액세스 필요)

참조: Amazon Connect를 시스템에 내장 https://qiita.com/miTsuKow/items/2ec4feec6dc6bc7d6c8b

절차.

React 프로젝트를 만들고 amazon-connect-Sstreams 설치

GiitHub clone에서 amazon-connect-streams build을 만듭니다.(2019/7/15 현재 npm에서 공개되지 않음)
로컬build 모듈 npm install 을 사용합니다.

# Reactのプロジェクトを作成
$ create-react-app custom-ccp
$ cd custom-ccp

# Reactのプロジェクト配下にamazon-connect-streamsをclone
$ git clone [email protected]:aws/amazon-connect-streams.git

# .gitignoreに/amazon-connect-streamsを追加しておく
$ echo /amazon-connect-streams >> .gitignore

# amazon-connect-streamsをbuild
$ cd amazon-connect-streams
$ npm install
$ npx gulp

# buildしたファイルをamazon-connect-streams直下に移動
$ cp release/connect-streams.js ./index.js
$ cp src/index.d.ts ./

# buildしたamazon-connect-streamsをインストール
$ cd ..
$ npm install ./amazon-connect-streams

React 애플리케이션 설치

App.js에서buildamazon-connect-streams이 진행되었습니다.
App.js

import React, { Component } from 'react';
import 'amazon-connect-streams';
import pkg from '../package.json';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.containerDiv = React.createRef();
  }

  componentDidMount() {
    // CCPの読み込み処理
    // eslint-disable-next-line no-undef
    connect.core.initCCP(this.containerDiv.current, {
      ccpUrl: 'https://{YOUR_INSTANCE_NAME}.awsapps.com/connect/ccp#/',
    });
  }

  render() {
    return (
      <div className="App">
        <main>
          <div className="ccp">
            {/* ccp */}
            <div
              className="containerDiv"
              ref={this.containerDiv}
            />
          </div>
          <div className="content" />
        </main>
        <footer>
          <p className="version">version: {pkg.version}</p>
        </footer>
      </div>
    );
  }
}

export default App;

참조: App.css
이번 일과는 상관없지만 참고로 앱.css의 내용도 기재되어 있습니다.
App.css

.App {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

main {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  overflow: auto;
}

.ccp {
  width: 330px;
  min-width: 200px;
  height: calc(100vh - 40px);
}

.containerDiv {
  width: 320px;
  min-width: 200px;
  min-height: 400px;
  height: 465px;
}

.content {
  flex: 1;
}

footer {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: #ececec;
}

.version {
  font-size: small;
  color: #666;
  padding-right: 10px;
}

import 생성된 콘텐츠를 아마존 S3의 통에 올리고, HTTPS를 통해 접근할 때 다음 화면이 나온다.

이렇게 하면 React 응용 프로그램에 끼워 넣을 수 있다npm run build.

참고 자료

aws/amazon-connect-streams: Amazon Connect Streams - a browser-based contact center integration API, typically with CRM systems.

amazon-connect-streams/Documentation.md at master · aws/amazon-connect-streams

Amazon Connect Streams의 초기 설정 단계