Tutorial Membangun Aplikasi Virtual Customer Service dengan Watson Conversation

Setelah sebelumnya kita telah belajar cara membangun aplikasi dengan menggunakan layanan Watson Visual Recognition, kali ini kita akan belajar cara membangun sebuah aplikasi Customer Service dengan menggunakan Watson Conversation. Watson Conversation merupakan salah satu layanan yang disediakan oleh IBM Watson, yang dapat digunakan untuk membangun produk terintegrasi dengan kemampuan percakapan otomatis.

Dengan Watson Conversation, kita dapat secara mudah membangun aplikasi bot atau virtual agent, yang terintegrasi dan terhubung dengan berbagai saluran serta perangkat. Watson Conversation menyediakan visual dialog builder yang dapat digunakan untuk mengembangkan percakapan natural antara perangkat dengan pengguna, tanpa perlu menggunakan kemampuan coding.

IBM Watson ™ Conversation dapat digunakan untuk membuat aplikasi yang dapat memahami inputan berupa natural-language. IBM Watson ™ Conversation juga dapat digunakan untuk membangun aplikasi dengan menggunakan machine learning untuk merespon pelanggan dengan cara yang mensimulasikan percakapan antar manusia. Berikut ini diagram arsitektur dari Watson Conversation:

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Untuk mempelajari lebih lanjut Watson Conversation, pembaca dapat mengikuti kelas Belajar Membuat Aplikasi Kognitif dengan IBM Watson karena dalam kesempatan ini kita hanya akan belajar membangun salah satu aplikasi memanfaatkan Watson Conversation. Aplikasi yang akan kita bangun adalah Aplikasi Virtual Costumer Service.

Sebelum membangun aplikasi dengan Watson Conversation, pembaca harus memiliki akun aktif Bluemix. Jika Anda belum memilikinya, Anda dapat mendaftar melalui laman berikut ini. Secara sederhana, langkah pengembangan aplikasi Virtual Costumer Service dengan menggunakan Watson Conversation dapat digambarkan seperti diagram berikut ini:

Langkah Pengembangan

Log in, Membuat Service, dan Menjalankan Tool

Pada halaman IBM Bluemix Catalog, pilih menu Services > Watson, lalu pilih Conversation
Isi kolom services name, lalu klik create
Klik Launch tools. Lalu Anda akan masuk ke halaman workspace dari Watson Conversation

Membuat Workspace

Setelah membuat layanan Watson Conversation, kita harus membuat workspace terlebih dulu. Berikut langkah-langkah membuat Workspace:

Klik Log in with IBM ID
Klik tombol create untuk membuat workspace baru
Isi kolom name dan description, kemudian klik tombol create

Membuat Intents

Dalam tahap ini, kita akan belajar membuat Intent yang merupakan representasi tindakan yang mungkin dilakukan oleh user. Berikut langkah-langkah membuat Intents:

Setelah membuat workspace baru, Anda akan masuk ke halaman create intent.
Klik tombol create new untuk membuat intent baru.
Isi intent name dengan nama dari intent tersebut, dan user example dengan contoh kalimat yang mungkin diinput oleh user
Tambahkan beberapa intent dan example seperti berikut

Membuat Entities

Setelah selesai membuat Intent, langkah selanjutnya adalah membangun Entities. Langkah-langkah membangun Entities adalah sebagai berikut ini:

Klik tab entities untuk masuk ke halaman entities.
Klik tombol create new
Isi kolom entity, value, dan synonyms yang Anda inginkan
Tambahkan beberapa data seperti berikut

Membuat Dialog

Dalam tahap ini, kita akan belajar membangun sebuah Dialog. Dialog dibuat dengan tujuan untuk mendefinisikan aliran percakapan Anda dalam bentuk pohon logika. Untuk menyusun Dialog, pembaca dapat mengikuti langkah-langkah berikut ini:

Pada conversation tool, klik tab dialog, kemudian klik create
Isi kolom name this node, trigger, dan responses sesuai kebutuhan Anda.
- Name this node : untuk memberikan judul pada node yang ingin dibuat
- Trigger : kondisi / kalimat yang mungkin di input oleh user. Pada kolom ini Anda bisa menggunakan intent yang telah Anda buat sebelumnya. Penggunaannya harus menggunakan tanda #, contoh : #salam
- Responses : jawaban / kalimat yang ingin Anda sampaikan untuk membalas pesan user yang telah Anda input di kolom trigger.
Tambahkan beberapa dialog seperti berikut :
Kembali ke workspaces dengan cara klik menu side bar, lalu pilih Back to workspace
Klik view details
Copy workspace ID untuk di gunakan pada langkah berikutnya

Node-RED

Langkah selanjutnya adalah membangun aplikasi menggunakan Node-RED. Node-RED adalah tools open-source baru yang diciptakan oleh tim IBM Emerging Technology, yang memungkinkan Anda membangun aplikasi hanya dengan menyambungkan potongan berupa perangkat perangkat keras, web API, atau layanan online secara bersama-sama. Langkah membangun Aplikasi dengan Node-RED adalah sebagai berikut ini:

Membuat Aplikasi menggunakan Node-RED

Pada halaman IBM Bluemix Catalog, pilih Apps > Boilerplates > Node-RED Starter
Isi kolom App name dan host name, lalu klik create
Tampilannya menjadi seperti ini
Masuk ke menu connections, klik connect existing, lalu pilih service conversation yang telah Anda buat sebelumnya. Selanjutnya klik connect
Klik tombol view app untuk menuju ke halaman Node-RED

Membangun Chat App

Setelah Anda klik tombol view app pada tahapan sebelumnya, Anda akan masuk ke halaman Node-RED in Bluemix
Klik tombol Go to your Node-RED Flow Editor
Tambahkan nodes dengan cara drag and drop
Untuk mengedit node, klik 2 kali pada masing-masing node tersebut :

Node http in

Node http response

Node template

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

<html>

<head>

<title>Bootstrap Chat Box - Bootsnipp.com</title>

body {

overflow: hidden;

background-image: url(http://www.mirrordaily.com/wp-content/uploads/2015/07/watson-ibm.jpg);

background-size: 33%;

}

.chat-area {

float: left;

height: 80%;

overflow-x: hidden;

overflow-y: auto;

width: 100%;

background-color: #fff;

}

.chat-area li {

padding: 14px 14px 0;

}

.chat-area li::after {

margin-top: 20px;

margin-bottom: 20px;

border: 0;

border-top: 1px solid #eee;

}

.chat-area li .chat-img img {

height: 40px;

width: 40px;

}

.chat-area .chat-body.left {

margin-left: 50px;

}

.chat-area .chat-body.right {

margin-right: 50px;

}

.chat-body p {

background: #fbf9fa none repeat scroll 0 0;

padding: 10px;

}

.chat-img {

/*padding-top: 10px;*/

}

.chat-img img {

height: 34px;

width: 34px;

}

.chat-time {

font-size: 8pt;

}

.chat-area .chat_reply .chat-body {

margin-left: 0;

margin-right: 50px;

}

.chat-area li:last-child {

padding-bottom: 10px;

}

.message_write {

background: #f5f3f3 none repeat scroll 0 0;

float: left;

padding: 15px;

width: 100%;

height: 100%;

}

.message_write textarea.form-control {

height: 70px;

padding: 10px;

}

.chat_bottom {

float: left;

margin-top: 13px;

width: 100%;

}

.upload_btn {

color: #777777;

}

</style>

var wsUri, ws;

function connect() {

wsUri = "wss://{{req.headers.host}}/ws/chat";

ws = new WebSocket(wsUri);

function createUserMessage(user, message, right) {

var user = document.createTextNode(user + " | " + moment().format('HH:mm:ss a'));

var message = document.createTextNode(message);

var userImg = document.createElement('img');

userImg.setAttribute('class','img-circle');

userImg.setAttribute('alt','User Avatar')

if(!right) userImg.setAttribute('src','http://placehold.it/100/f00/fff.jpg?text=C');

else userImg.setAttribute('src','http://placehold.it/100/00f/fff.jpg?text=S');

var chatImg = document.createElement('span');

if(!right) chatImg.setAttribute('class','chat-img pull-left');

else chatImg.setAttribute('class','chat-img pull-right');

chatImg.appendChild(userImg);

var msgTxt = document.createElement('p');

msgTxt.appendChild(message);

var msgTime = document.createElement('div');

if(!right) msgTime.setAttribute('class','chat-time pull-right');

else msgTime.setAttribute('class','chat-time pull-left');

msgTime.appendChild(user);

var msgBox = document.createElement('div');

if(!right) msgBox.setAttribute('class','chat-body left clearfix');

else msgBox.setAttribute('class','chat-body right clearfix');

msgBox.appendChild(msgTxt);

msgBox.appendChild(msgTime);

var chatBox = document.createElement('li');

chatBox.setAttribute('class','left clearfix');

chatBox.appendChild(chatImg);

chatBox.appendChild(msgBox);

var chatArea = document.querySelector('.chat-area');

var chatList = document.querySelector('ul');

chatList.appendChild(chatBox);

chatArea.scrollTop = chatArea.scrollHeight;

}

ws.onopen = function(ev) {

// createSystemMessage('[Connected]');

console.log('[Connected]');

};

ws.onclose = function(ev) {

// createSystemMessage('[Disconnected]');

console.log('[Disconnected]');

setTimeout(function() {

// createSystemMessage('[Reconnecting]');

console.log('[Reconnecting]');

connect();

}, 1000)

}

ws.onmessage = function(ev) {

var payload = JSON.parse(ev.data);

createUserMessage(payload.user, payload.message, !(payload.user=="Client"));

console.log(payload);

}

} // end of connect()

connect();

function sendMessage() {

var userName = "Client"; //document.getElementById('user');

var message = document.getElementById('message');

// createUserMessage(user, message.value)

var payload = {

message: message.value.trim(),

user: userName,

ts: (new Date()).getTime()

};

ws.send(JSON.stringify(payload));

message.value = "";

};

function enterMsg(event) {

if(document.getElementById("quickMsg").checked){

event.preventDefault();

if (event.keyCode == 13) sendMessage();

}

};

</script>

</head>

<body>

</div>

<input type="checkbox" id="quickMsg" checked="checked"> Enter to Send Message

</div>

</body>

</html>

Note : pilih HTML pada kolom Syntax Highlight, lalu salin kode di atas ke dalam kolom template.

Node websocket in

Node websocket out

Node function

5. Sambungkan antar nodes menjadi seperti berikut, lalu klik tombol deploy

Virtual CS

Tambahkan node json, function, conversation, debug, dan delay. Lalu sambungkan menjadi seperti ini
Klik 2 kali pada masing-masing node kemudian edit node dengan format seperti di bawah ini
- Node debug
- Pada kolom output, pilih complete msg object
- Node delay
- Pada kolom for, edit menjadi 500 milliseconds
- Node conversation. Salin Workspace ID yang didapatkan dari langkah membuat dialog yang telah dilakukan sebelumnya
- Node function (1)
- Node function (2)
Klik tombol deploy

Hasil

Selamat! Anda telah berhasil membuat virtual customer service menggunakan IBM Watson Conversation. Sekarang buka tab baru pada browser Anda, lalu silahkan menuju link berikut :