世界130億超のAmazonConnectユーザのみなさん、こんにちは。
UIをカスタマイズしてAmazonConnectを使いたい！！
そんな皆さんの強い味方であるamazon-connect-stream、便利ですよね。
ですが、TypeScriptから利用するにはヒトクセあります。
What is ヒトクセ?
- npmに公開されてない
- 公式Docを参考にgulpでbuildしてもimportできない
- npm i aws/amazon-connect-streams –saveしてもimportできない（実体がない）
- でもindex.d.tsはある
こんな具合でできそうでできない…ｸﾞﾇﾇって感じな癖があります。
解決策
- 公式Docを参考にgulpでbuild
- index.d.tsと同じDirectoryにいれる
これだけです。
構成やファイルは以下を参考にしてください。
サンプルはAngularです。
ディレクトリ構成
/app/Modules/Connect /index.d.ts /index.js
app.component.ts
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import './module/index';
import Endpoint = connect.Endpoint;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
title = 'applicatioin';
state: string;
@ViewChild('ccp') ccpContainer: ElementRef;
ngAfterViewInit() {
connect.core.initCCP(this.ccpContainer.nativeElement, {
ccpUrl: 'https://YOUR-ENDPOINT.awsapps.com/connect/ccp#',
softphone: {
allowFramedSoftphone: true,
},
});
connect.agent(agent => {
// ここで自分のステータスを出してみた
this.state = JSON.stringify(agent.getState());
const phoneNumber = '+819012341234';
const endpoint = Endpoint.byPhoneNumber(phoneNumber);
// 電話かけてみた
agent.connect(endpoint, {});
});
}
}
コレ、いい感じに補完が効いてますし、カスタマイズしたUIから電話の発信までできました！
おまけ
connection.core.initCCP()の ccpUrlの最後に/が入ってると駄目だったのも注意点です。
