SAPUI5アプリケーションにchatbot(SAP Conversational AI)を実装する

#ゴール
SAPUI5アプリケーションに、SAP Conversational AIで作成したchatbotを実装する。
![goal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22526/874a496d-bed8-b6db-9c1c-6ede297ef571.png)


#ステップ
1. SAPUI5でアプリ作成
2. SAP Conversational AIでchatbot作成
3. SAPUI5アプリにchatbot実装(こちらが本題) 


##1. SAPUI5でアプリ作成
###「SAPUI5」とは
「SAP UI Development Toolkit for HTML5」の略称で、業務系アプリケーションに特化した機能豊富なUIコンポーネントを含んだUIフレームワーク
###アプリ作成
割愛します。
SAPUI5が初めての方は、[tamiさん](https://qiita.com/tami)の【SAPUI5】シリーズがおススメです。
※以下の記事の内容でアプリ作成すると、今回のchatbot実装が可能となります
[【SAPUI5】入門編の記事まとめ](https://qiita.com/tami/items/53990a14e5ca919ec35a)


##2. SAP Conversational AIでchatbot作成
###「SAP Conversational AI」とは
SAP社の対話型AIプラットフォーム。略称は「SAP CAI」
公式サイトは[こちら](https://cai.tools.sap/)

###2-1. chatbotの作成
割愛します。
以下、参考リンク。
(SAP Tutorial)[Build Your First Bot with SAP Conversational AI](https://developers.sap.com/tutorials/cai-bot-getting-started.html)
(日本語Blog)[SAP Conversational AIで簡単なchatbotを作ってみた](https://tiga1002.hatenablog.com/entry/build-your-first-bot-with-sap-conversational-ai)

###2-2. Webchatとしての登録
ステップ2-1で作成したchatbotを、Webページ用にカスタマイズします。

Connectタブ
Webchatで「+NEW WEBCHAT」を選択
![cai1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22526/b746df6f-d2a1-b230-7612-a8179d563a6c.png)

1～5を設定し、「CREATE」押下
※1～5でchatbotのデザインや文言の編集が可能。何も変更しなくてもok
![cai2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22526/1b25b3f6-5d55-0146-1dd7-d8f8dd06fa6f.png)

登録後、5.Global settingsでsrc/id/token/channelIdを確認
※青がchannelId、緑がtoken
![cai3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22526/d3c01637-5924-d76d-8923-e8afc7786e82.png)



##3. SAPUI5アプリにchatbot実装
ステップ1で作成したSAPUI5アプリに、chatbotを出力する処理を追加します。
ステップ2-2で取得したsrc/id/token/channelIdを使用します。

###パターンa: 画面の初期表示時からchatbotを表示する場合
Component.jsを以下のように編集

```javascript:Component.js
sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("test.helloworld.Component", {
        metadata : {
            manifest: "json"
        },
        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
            // ここに追加
			this.renderRecastChatbot();
         },
        // chatbot表示
 		renderRecastChatbot: function() {
			if (!document.getElementById("cai-webchat")) {
				var s = document.createElement("script");
	 				s.setAttribute("id", "cai-webchat");
					s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");
				s.setAttribute("token", "<ステップ2で取得したtokenを設定>");
				s.setAttribute("channelId", "<ステップ2で取得したchannelIdを設定>");
				document.body.appendChild(s);
			}
		},
    });
});
```

###パターンb: 画面のイベント/アクションに応じてchatbotを表示する場合
Controller.jsを以下のように編集
例)ボタン押下でchatbotを表示→onPressに追加

```javascript:Controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("test.cai_integration.controller.cai", {
		onPress: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("TargetNext", {} );
			// ここに追加
			this.renderRecastChatBot();　
		},
		onAfterRendering: function () {
			// ここに追加すると画面の初期表示時にchatbotを表示できる
		},
		// chatbot表示
		renderRecastChatBot: function () {
			if (!document.getElementById("recast-webchat")) {
				var s = document.createElement("script");
				s.setAttribute("src", "https://cdn.recast.ai/webchat/webchat.js");
				s.setAttribute("id", "recast-webchat");
				s.setAttribute("token", "<ステップ2で取得したtokenを設定>");
				s.setAttribute("channelId", "<ステップ2で取得したchannelIdを設定>");
				document.body.appendChild(s);
			}
		}
	});
});
```

※ [onAfterRendering](https://sapui5.hana.ondemand.com/#/api/sap.ui.core.UIComponent/methods/onAfterRendering)に追加すると初期表示が可能

- [getElementById](https://itsakura.com/js-getelementbyid
)：ID属性で取得/設定する
- [createElement](https://itsakura.com/js-createelement)：要素を追加する
- [setAttribute](https://itsakura.com/js-getattribute
)：属性値を設定する
- [appendChild](https://www.sejuku.net/blog/49970)：特定の親要素の中に要素を追加する。追加される場所は、親要素の末尾

###パターンbの実装結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22526/1b81e24f-dbc2-9549-4048-44eb538c022e.gif" width=50%>


#参考リンク
##SAPUI5
[API Reference](https://sapui5.hana.ondemand.com/#/api/sap)
(SAP Blog)[SAPUI5 Controller Lifecycle Methods Explained!](https://blogs.sap.com/2018/11/12/sapui5-controller-lifecycle-methods-explained/)
(SAP Tutorial)[Create an Empty SAPUI5 Project in SAP Web IDE](https://developers.sap.com/tutorials/sapui5-webide-create-project.html)
(SAP Tutorial)[Develop an SAP Fiori App Using SAP Business Application Studio](https://developers.sap.com/tutorials/appstudio-fioriapps-create.html)
(Qiita)[tamiさん](https://qiita.com/tami)の【SAPUI5】シリーズ
##SAP Conversational AI
(SAP Tutorial)[Build Your First Bot with SAP Conversational AI](https://developers.sap.com/tutorials/cai-bot-getting-started.html)
(日本語Blog)[SAP Conversational AIで簡単なchatbotを作ってみた](https://tiga1002.hatenablog.com/entry/build-your-first-bot-with-sap-conversational-ai)

##SAPUI5 + SAP CAI
(SAP Blog)[SAP Conversational AI – How to integrate SAP Chatbot To UI5 Application](https://blogs.sap.com/2019/05/08/sap-conversational-ai-integrate-your-chat-bot-with-your-sap-fiori-ui5-application/)
(SAP Blog)[SAP Conversational AI(CAI) on SAPUI5](https://blogs.sap.com/2018/12/17/sap-conversational-aicai-on-sapui5/)
(SAP YARD)[Advance SAPUI5 – 12 – Chatbot Integration using SAP’s CAI API with SAPUI5](https://sapyard.com/advance-sapui5-12-chatbot-integration-using-saps-cai-api-with-sapui5/)
(SAP CAI Tutorial)[How to Integrate a SAP Conversational AI Chatbot with SAP UI5](https://cai.tools.sap/blog/how-to-integrate-sap-conversational-ai-chatbot-to-sap-ui5/)
　　→chatbot実装について詳細設定が必要な場合はこちら