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 ก็จะสามารถตอบโต้ตามที่กำหนดได้