Postback button
จากหัวข้อที่แล้ว เป็นการใช้ปุ่มสำหรับเปิด Web browser
แต่ถ้าต้องการให้ user ตอบกลับมาเป็นข้อความที่กำหนดไว้ ต้องใช้เป็น Postback button
ทำการเพิ่ม code ใน bot.php เพื่อเพิ่มปุ่ม
<?php
ini_set("log_errors", 1);
ini_set("error_log", "/tmp/php.log");
$challange = $_REQUEST['hub_challenge'];
$input = json_decode(file_get_contents('php://input'), true);
$sender = $input['entry'][0]['messaging'][0]['sender']['id'];
$message = $input['entry'][0]['messaging'][0]['message']['text'];
error_log($challange);
error_log($sender);
error_log($message);
$access_token = "EAAEF6Rg2mWEBAAnqU0FhYYlb3s0a7kiVuKMUja9umtC50i25bTZAOBBVvDf9BX0hixiqYryCMVLVnhZBZCkJZBl5AZAQTMvAoIZCj5W268DOurt2FLIGb2GL2fGWMwY6RtN7nuFe3K13B9tXxNPfonHvDZCGyTldpbFvdipzJD3QQZDZD";
if(!empty($input['entry'][0]['messaging'][0]['message']))
{
if( $message == "หวัดดีหมอ" )
{
reply($access_token, $sender, "สวัสดี อยากให้ข้าช่วยอะไรล่ะ");
}
elseif( $message == "ป่วย" )
{
reply_button($access_token, $sender);
}
elseif( $message == "เกรี้ยวกราด")
{
reply_image($access_token, $sender, "https://vignette.wikia.nocookie.net/psi/images/a/ac/Angry-hugh-jackman.jpg/revision/latest?cb=20151113213317");
}
else
{
reply($access_token, $sender, "เจ้าพูดอะไร ไม่รู้ความ");
}
}
if(!empty($input['entry'][0]['messaging'][0]['postback'])){
reply_echo($access_token, $sender, "Let's start");
}
echo $challange;
function reply($access_token, $sender, $message)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'text' => $message,
),
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
function reply_image($access_token, $sender, $image_url)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'attachment' =>
array (
'type' => 'image',
'payload' =>
array (
'url' => 'https://vignette.wikia.nocookie.net/psi/images/a/ac/Angry-hugh-jackman.jpg/revision/latest?cb=20151113213317',
'is_reusable' => true,
),
),
)
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
function reply_button($access_token, $sender)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'attachment' =>
array (
'type' => 'template',
'payload' =>
array (
'template_type' => 'button',
'text' => 'เป็นอะไร?',
'buttons' =>
array (
array (
'type' => 'web_url',
'url' => 'https://www.google.com',
'title' => 'ถาม Google เอานะ',
),
array(
'type' => 'postback',
'title' => 'ปวดใจ',
'payload' => 'ปวดใจ'
)
),
),
),
)
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
?>
เมื่อลองเล่นดูจะพบว่า bot ยังไม่ได้ตอบอะไรกลับมา สาเหตุเพราะ event ที่ Facebook ส่งเข้ามาหา server นั้นไม่ใช่ message แต่เป็น postback
ลองเข้าไปดูใน ngrok http inspect (http://localhost:4040)
เพื่อดู input
ถ้าย้อนกลับไปดู message ก่อนหน้า จะไม่เหมือนกัน
ดังนั้น จึงต้องมีการ handle event ประเภทนี้เพิ่ม
<?php
ini_set("log_errors", 1);
ini_set("error_log", "/tmp/php.log");
$challange = $_REQUEST['hub_challenge'];
$input = json_decode(file_get_contents('php://input'), true);
$sender = $input['entry'][0]['messaging'][0]['sender']['id'];
$message = $input['entry'][0]['messaging'][0]['message']['text'];
error_log($challange);
error_log($sender);
error_log($message);
$access_token = "EAAEF6Rg2mWEBAAnqU0FhYYlb3s0a7kiVuKMUja9umtC50i25bTZAOBBVvDf9BX0hixiqYryCMVLVnhZBZCkJZBl5AZAQTMvAoIZCj5W268DOurt2FLIGb2GL2fGWMwY6RtN7nuFe3K13B9tXxNPfonHvDZCGyTldpbFvdipzJD3QQZDZD";
if(!empty($input['entry'][0]['messaging'][0]['message']))
{
if( $message == "หวัดดีหมอ" )
{
reply($access_token, $sender, "สวัสดี อยากให้ข้าช่วยอะไรล่ะ");
}
elseif( $message == "ป่วย" )
{
reply_button($access_token, $sender);
}
elseif( $message == "เกรี้ยวกราด")
{
reply_image($access_token, $sender, "https://vignette.wikia.nocookie.net/psi/images/a/ac/Angry-hugh-jackman.jpg/revision/latest?cb=20151113213317");
}
else
{
reply($access_token, $sender, "เจ้าพูดอะไร ไม่รู้ความ");
}
}
if(!empty($input['entry'][0]['messaging'][0]['postback'])){
if($input['entry'][0]['messaging'][0]['postback']['payload'] == "ปวดใจ")
{
reply($access_token, $sender, "ความรักไม่คืนกลับมา");
}
}
echo $challange;
function reply($access_token, $sender, $message)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'text' => $message,
),
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
function reply_image($access_token, $sender, $image_url)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'attachment' =>
array (
'type' => 'image',
'payload' =>
array (
'url' => 'https://vignette.wikia.nocookie.net/psi/images/a/ac/Angry-hugh-jackman.jpg/revision/latest?cb=20151113213317',
'is_reusable' => true,
),
),
)
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
function reply_button($access_token, $sender)
{
//API Url
$url = 'https://graph.facebook.com/v2.6/me/messages?'.http_build_query(array(
'access_token' => $access_token));
//Initiate cURL.
$ch = curl_init($url);
//The JSON data.
$jsonData = array (
'recipient' =>
array (
'id' => $sender,
),
'message' =>
array (
'attachment' =>
array (
'type' => 'template',
'payload' =>
array (
'template_type' => 'button',
'text' => 'เป็นอะไร?',
'buttons' =>
array (
array (
'type' => 'web_url',
'url' => 'https://www.google.com',
'title' => 'ถาม Google เอานะ',
),
array(
'type' => 'postback',
'title' => 'ปวดใจ',
'payload' => 'ปวดใจ'
)
),
),
),
)
);
error_log($jsonData);
//Encode the array into JSON.
$jsonDataEncoded = json_encode($jsonData);
//Tell cURL that we want to send a POST request.
curl_setopt($ch, CURLOPT_POST, 1);
//Attach our encoded JSON string to the POST fields.
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
//Set the content type to application/json
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
//Execute the request
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
error_log($jsonDataEncoded);
error_log($url);
error_log($result);
error_log($httpcode);
error_log($error);
}
?>
bot ก็จะสามารถตอบโต้ตามที่กำหนดได้