TypeScriptでamazon-connect-streamsを利用して電話かけてみる #AWS

世界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の最後に / が入ってると駄目だったのも注意点です。