Membuat Facebook Chat Bot

“J.A.R.V.I.S., are you up?”
“For you sir, always.”

Yah ini adalah cuplikan percakapan antara Tony Stark dan J.A.R.V.I.S di film Iron Man. Ketika saya menonton film Iron Man untuk pertama kali saya berharap memiliki asisten seperti J.A.R.V.I.S hahahaha. AI keren milik Iron Man. Pertama saya mulai mendekor Desktop saya mirip J.A.R.V.I.S, yah tapi itu sebatas angan-angan. Tidak mudah membuat AI semacam J.A.R.V.I.S. Kali ini kita akan membuat chat bot, mungkin masih jauh dengan J.A.R.V.I.S. Perjalanan 1000 mil selalu diawali dengan langkah pertama.

Register

Yang harus dilakukan pertama adalah mendaftar sebagai developer di halaman Facebook developers. Cukup mudah asalkan punya akun Facebook. https://developers.facebook.com/.

Setelah mendaftar sebagai developer, kita perlu membuat Fans Page di Facebook, saya menganggap ini tidak perlu dijelaskan. Menurut saya bikin Fans Page mudah banget, right ?

Kembali ke halaman Facebook developer, mari kita buat satu Apps baru.

Access Token

Jika sukses kita akan diarahkan ke halaman Dashboard App, di sidebar kiri klik button Add Product.
Cari Messenger, kemudian klik setting/siapkan.

Scroll kebawah cari section Access Token. Facebook akan meminta kita memilih Fans Page mana yang akan kita sambungkan dengan Messenger. Kemudian klik “Edit Izin”

Nanti akan muncul pop up, intinya Facebook minta ijin apakah Fans Page ini beneran mau disambungkan dengan Apps yang kita buat.

Kalau sukses kita akan mendapatkan Page Access Token. Ini perlu disimpan, Access Token ini akan kita gunakan untuk membangun chat bot nantinya.

Setelah mendapatkan Access Token, mata rantai yang kita butuhkan berikutnya adalah webhook.

Webhook

Mari kita bicara sedikit tentang webhook. Fungsinya apa sih webhook ini ?
Webhook berfungsi sebagai media perantara antara aplikasi kita dan Facebook. Jadi, ketika fans page kita menerima pesan/chat, Facebook akan mengirim notifikasi ke aplikasi kita secara real-time. Berdasarkan notifikasi yang kita terima, kita bisa membalas pesan/chat menggunakan API yang telah disediakan. Betul, aplikasi yang menerima notifikasi harus selalu online dan harus bisa diakses lewat internet. Intinya Facebook harus bisa mengakses aplikasi kita, ngga bisa pakai localhost. Tapi kan terlalu boros kalau cuma mau coba-coba, ohohoho iya sih terlalu repot kalau mesti upload, ngurus server segala macem, kita bisa pakai ngrok. Fungsi dari ngrok sendiri mengonlinekan localhost. Jadi, ngga perlu repot-repot upload ke server. Belum bisa pakai ngrok ? bisa baca di sini.

Sampai sini saya asumsikan kita sudah bisa mengonlinekan code kita, entah pakai ngrok, upload ke server atau metode lainnya.
Yosh, mari kita siapkan aplikasi kita, pertama kita harus bisa menerima notifikasi dari Facebook, biasanya ada macam verifikasi. Facebook pastikan ini valid ngga sih. Kita mulai dari index.php

<?php 
//index.php
$verifyToken = "sebastiaaannn";

$hubVerifyToken = null;
if(isset($_REQUEST['hub_challenge'])) {
	$challenge = $_REQUEST['hub_challenge'];
 	$hubVerifyToken = $_REQUEST['hub_verify_token'];
}

if ($hubVerifyToken === $verifyToken) {
 	echo $challenge;
 	die();
}

Variable $verifyToken bisa diisi bebas, anggap aja itu semacam password, nanti token ini akan kita masukan ketika mengatur webhook.

Saatnya balik lagi ke halaman Facebook Developer. Buka Apps yang kita buat tadi.

Di kiri ada list Produk pilih Messenger, kemudian klik setting/pengaturan.

Scroll ke bawah cari webhook.

Klik “Berlangganan Ke Acara” nanti bakal muncul pop-up. Akan muncul beberapa kolom yang wajib diisi.

Kolom “URL Callback” isi sesuai alamat aplikasi, saya di sini menggunakan ngrok. Kolom “Verfikasi Token” isi sesuai variable $verifyToken yang ada di index.php, ini password yang saya maksud tadi. “Kolom berlangganan” centang semua gpp kok hahaha, tapi pilih “messages” saja cukup harusnya. Terkakhir klik “Verifikasi dan Simpan”.

Pastikan ngga ada error yah. Eits jangan pindah halaman dulu.

Webhook sudah selesai dipasang sekarang cuma perlu pastikan Fans Page kita menggunakan webhook tadi.

Masih di tempat yang sama, klik “Pilih halaman”, nanti muncul Fans Page yang kita miliki. Pilih salah satu. Selesai pilih, klik “Berlangganan”. Beres deh :)

Kita sudah bisa test sekarang. Buka Fans Page yang tadi dibuat. Untuk mencobanya kita harus pada mode pengunjung.

Bisa coba “Kirim Pesan”. Kita sudah pasang Webhook, jadi Facebook akan mengirim notifikasi ke aplikasi kita.

Saya menggunakan ngrok, saya bisa lihat notifikasi yang dikirim Facebook.

Bisa ngga sih bot kita diakses orang lain, jawabnya Bisa. Tapi perlu verifikasi yang panjang banget. Kita di sini menggunakan developer mode/sandbox. Dalam mode ini hanya admin dari fans page yang bisa akses chat botnya. Kalau mau diakses orang lain silahkan Verifikasi Apps yang dibuat dan ubah modenya jadi production.

Notifikasi sudah diterima sekarang waktunya untuk menyiapkan balasan hohohoho.

Avengers

Errr yah, kebetulan lagi hype avengers endgame hahahaha.

Untuk membuat balasan dari chat yang kita terima cukup mudah lho. Facebook sudah menyiapkan APInya. Kita tinggal panggil APInya isi parameternya, beres. Bisa buka halaman resminya https://developers.facebook.com/docs/messenger-platform/.

Mari kita tambahkan code untuk membalas chat dari user. Kita modifikasi file index.php dikit

<?php 
//index.php
$verifyToken = "sebastiaaannn";

$hubVerifyToken = null;
if(isset($_REQUEST['hub_challenge'])) {
	$challenge = $_REQUEST['hub_challenge'];
 	$hubVerifyToken = $_REQUEST['hub_verify_token'];
}

if ($hubVerifyToken === $verifyToken) {
 	echo $challenge;
 	die();
}

$input = json_decode(file_get_contents("php://input"), true);

$senderId = @$input["entry"][0]["messaging"][0]["sender"]["id"];
$message = @$input["entry"][0]["messaging"][0]["message"]["text"];

if(empty($senderId) || empty($message)) die("");

$accessToken = 'EAAG2OxV0afsBAAtVYRBVtETPJtNTXWkVXqN2bmVX1jBKuKbHwLukHoLO13iqQGsbWyg7EvpZBIRcJDEnBlCXAmeEmJSm20GqJ9YoEnpHuKdVheIbmz8MVtSyT0SSULTIQWeHQP4yv16uIVWPhq2uOblWBaqnpCBqvcFZCRkPf7Tmn93i4IkLpIQbNSdj8ZD';

$reply = 'Emmm ngga paham gw!';

if($message == 'Hello')
{
	$reply = 'Hello Master';
}

if($message == 'Sebastian')
{
	$reply = 'Yes My Lord';
}


$url = "https://graph.Facebook.com/v2.6/me/messages?access_token=".$accessToken;

$ch = curl_init($url);

$jsonData = json_encode([
	'recipient' => [
		'id' => $senderId,
	],
	'message' => [
		'text' => $reply
	]
]);

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);

curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));

$result = curl_exec($ch);

print_r($result);

Mulai dari variable $input, ngga ada yang special di sini, kita hanya mengambil input/data yang dikirim Facebook ke aplikasi kita, formatnya json, jadi harus didecode dulu biar bisa dibaca.
Kemudian variable $senderId & $message, variable ini menampung id pengirim dan pesan yang dikirimkan. Lalu dicek apakah variable tersebut kosong atau ngga. Sebenarnya ini validasi kotor. Untuk saat ini saya hanya akan memproses notifikasi chat masuk. Sebenarnya tipe notifikasi ada banyak banget lho, ngga cuma notifikasi chat masuk aja. Untuk sekarang kita hanya proses notifikasi tipe chat masuk saja.

Ada variable $accessToken, ini merupakan access token yang kita dapat tadi, bisa scroll atas baca lagi bagian Access Token kalau lupa.

Untuk membalas pesan tinggal kirim request ke endpoint yang telah disediakan, dan isi parameternya.
Kita menggunakan curl untuk mengirim request. Methodnya POST. Data yang dikirim dalam format json, yang berisi pesan balasan dan id penerima. Kemudian kirim….!

Endgame

Ini merupakan contoh sederhana untuk membuat Facebook chat bot, masih jauh banget dari skala produksi. Tentu saja masih jauh banget dari JARVIS hahaha.

Untuk tulisan berikutnya saya akan menulis “Membuat Online Store Menggunakan Facebook Chat Bot”. Menarik bukan ? Facebook punya banyak sekali fitur yang menarik lho, bukan cuma bales chat aja.

Kalau ada pertanyaan silahkan tinggalkan komentar. Kalau ada kritik silahkan buka halaman about yah.