LINE BOT API (OFFICIAL) คุม IoT ผ่าน NETPIE.IO ด้วยต้นทุน 0 บาท

หลังจาก ที่ LINE ออก API ตัวใหม่มาซักระยะ และตัว API มีการเปลี่ยนแปลง ผมจึงทำการปรับเนื้อหาให้สอดคล้อง ไว้เป็นสไลด์ที่นำไปใช้สอน จึงได้นำมาอัพเดธให้ทุกท่านเพิ่มเติมด้วย เผื่อใครผ่านมาเห็นบทความนี้ ให้ทำตามเนื้อหาในสไลด์แทนได้เลยนะครับ

สวัสดีครับวันนี้เราจะมาคุยกันเรื่อง ประยุกต์ใช้ LINE BOT กัน โดยจะเป็นเวอร์ชั่น Official (ของแท้อย่างเป็นทางการ) หลายท่านอาจจะเคยลองเล่นในแบบ hack version กันมาบ้างซึ่งมีหลากหลายเจ้าให้เลือกใช้ และก็ด้วยเหตุนั้นละครับ ที่ทางบ.ไลน์เห็นว่าเป็นช่องทางที่นักพัฒนาหลายคนเริ่มให้ความสนใจอย่างหนักหน่วง บ.ไลน์จึงเปิดตัว เจ้า Official ออกมาให้ได้ใช้กันอย่างเป็นกิจจะลักษณะ

ว่าแล้วก็มาเริ่มกันเลย นะครับ วันนี้ ผมจะเล่าตั้งแต่เริ่มจนถึงขั้นเตรียม server เพื่อใช้งานจนจบที่ได้ตัวอย่างการใช้งานกันเลยทีเดียว
เริ่มต้นเรามาทำความรู้จัก เจ้า LINE BOT API กันก่อนว่ามันมีคุณสมบัติอย่างไรและใช้งานยังไงได้บ้างนะครับ ให้ทุกคนเริ่มต้นโดยเข้าไปที่ https://business.line.me/en/ เพื่อที่จะลงทะเบียน Business Account เพราะต้องใช้ในการขอใช้งาน LINE BOT API ในลำดับต่อไป

ทำการ login ด้วย Line Account ของเรา

 ทำการตั้งชื่อ และใส่รูปจากนั้นกด Submit แล้วลุยกันต่อ

จากนั้นเลือก Start ในส่วนของบริการ BOT API Trial Account เพื่อเริ่มใช้งาน LINE BOT

คราวนี้เราก็จะได้ BOT API มาใช้งานกันแล้วแต่ก่อนจะเริ่มใช้มาทำความเข้าใจบทบาทและผังการทำงานของมันกันคร่าวๆก่อนซึ่งสามารถทำความเข้าใจได้จากผังดังต่อไปนี้

จากผังจะเห็นว่า BOT API จะทำงานเป็นสื่อกลางระหว่างแอพไลน์ กับ server ของเราโดยจะทำงานแบบสองทาง นั่นคือเราสามารถทั้งส่งและรับข้อความจากผู้ใช้งาน LINE

โดยความสามารถและปริมาณการใช้งานของ API จะถูกแบ่งเป็น สองแบบ คือ Business Partner จะ Full option จัดเต็ม และอีกแบบคือ ฟรี หรือ Trial version คือแบบที่เรากำลังจะทดลองใช้กันจะมีข้อจำกัดชัดๆเลยคือ จะรองรับได้เพียง 50 Line contact และส่งได้เพียงข้อความธรรมดากับ แบบ Rich message แต่ก็เพียงพอสำหรับการทดลองทำอะไรสนุกได้มากมายเลยทีเดียว

เอาละมาลุยกันต่อ กด “ใช้” เพื่อเข้าใช้งาน

เราจะพบกับหน้าต่างรายละเอียดต่าง ๆ ของ BOT เรา โดยจะมีรายละเอียดสามส่วนที่เราต้องให้ความสนใจคือ

1.ส่วนข้อมูลสำหรับเชื่อมใช้สื่อสารจาก server ของเรามายัง LINE BOT API ประกอบไปด้วย

• Channel ID                 เป็น ID ของ ช่องทางของ bot เรา
• Channel Secret เป็นรหัสลับของ ช่องทางของ Bot
• MID เป็นรหัสประจำตัวของ BOT ซึ่งรหัสนี้จะเป็น key ที่ใช้ในการสื่อสาร

ต่อมาจะเป็นส่วนที่สำคัญอีกสองส่วนซึ่งจะเป็นส่วน ที่ server ของ Line Bot ใช้เป็นช่องทางในการติดต่อกับ ระบบของเรา

2.ส่วนกำหนดการเชื่อมต่อเพื่อให้ทาง API ใช้เป็นช่องทางเชื่อมต่อกับระบบเรา จะกำหนดที่บริเวณ Callback URL มาถึงจุดนี้ขอเน้นย้ำกับคนที่กำลังจะต้องใช้งานก่อนนะครับว่า Line ระบุไว้ว่า ปลายทางที่จะให้ API ติดต่อไปนั้นต้องเป็นเว็บที่เป็น HTTPS โดยต้องมีใบรับรองตามรายการที่กำหนดไว้ ซึ่งจำกัดพอสมควรสำหรับใครจะใช้ เว็บ CA ที่เป็นแบบฟรีหรือออกด้วยตัวเอง หมดสิทธิ์นะครับ แต่ใช่ว่าสายทดลองอย่างเราจะหมดหนทาง ไว้ผมจะเล่าต่อในขั้นตอนถัดไป วันนี้ผมจะให้ทุกคนได้เล่นโดยไม่ต้องลงทุนแม้ซักบาทเดียว

3.ส่วนสุดท้ายหลายคนอาจจะลองแล้วถึงกับงงว่าทำไมกำหนดค่าต่าง ๆตามไกด์ไลน์ครบแล้วแต่ยังไม่สามารถสื่อสารกับทาง API ได้ เนื่องจากว่ามันจะต้องมีการกำหนด IP ในรายการ White list ด้วยเพราะถ้าไม่กำหนด ทางไลน์ก็จะปฏิเสธการสื่อสารที่ส่งเข้ามาจาก server ของเรา

หลังจากทำความเข้าใจองค์ประกอบในการทำงานร่วมกับ LINE BOT API กันเป็นที่เรียบร้อยแล้ว คราวนี้เราก็จะมาเตรียมสภาพแวดล้อมในการทำงานร่วมกับ เจ้า API ตัวนี้กัน นั่นคือ เว็บ เซิฟเวอร์ที่มีการเข้ารหัสHTTPS (SSL/TLS)  โดยใบรับรองจะต้องอยู่ในรายการที่ทาง LINE ระบุไว้ ความหนักใจจะเริ่มเกาะกุมกัน ณ จุดนี้ เพราะว่า เจ้าใบรับรองที่ว่าเนี่ยไม่สามารถใช้อันที่เป็นแบบ open หรือ ออกเองได้ เพราะงั้นก็ต้องเสียตังค์กันล่ะ แต่เดี๋ยวก่อน หลังจากที่ได้ทำการค้นหาทางออกทั้งจาก Google และ พี่ๆในวงการ ทางสว่างก็พุ่งเข้าใส่จากมิตรสหายร่วมวงการหลายท่านที่ต่างก็ประสานเสียงกันมาว่า Heroku.com ช่วยท่านได้ รออะไรล่ะครับไปกันโลด

ขั้นแรกก็สมัครกันเลยเพื่อจะเริ่มต้นใช้งานกันในลำดับต่อไป

เมื่อสมัครสำเร็จเราก็ไปบรรเลงกันต่อ

หลังจากนี้ให้เราสร้าง APP ขึ้นมาโดยตั้งชื่อตามใจชอบได้เลยนะครับ จากนั้นเราจะไป deploy code ของเรากันต่อโดยในครั้งนี้เราจะสร้าง web service ที่ใช้สื่อสารกับ LINE BOT API ด้วยภาษา PHP ซึ่งตัวอย่างนั้นทาง LINE ได้เตรียมตัวอย่างไว้ให้ได้นำมาประยุกต์ใช้ได้อย่างสะดวกซึ่งนอกจาก ภาษา PHP แล้วก็ยังมีอีกหลายภาษาใครถนัดภาษาไหนเลือกกันได้ตามสะดวกเลยจ้า

https://github.com/line

กลับมาต่อที่การ Deploy งานของเราขึ้นไปยัง server ของ heroku.com ซึ่งทางเว็บได้จัดช่องทางไว้ให้หลากหลายเลือกใช้กันได้ตามสะดวกโดยผมเลือกใช้ Git ของ heroku โดยจะใช้งานผ่านทางโปรแกรมชื่อ “Heroku Toolbelt” โดยขอให้ทุกท่านทำตามขั้นตอนที่ ทางเว็บแนะนำไว้ได้เลยครับ

https://toolbelt.heroku.com/

เมื่อติดตั้งเสร็จให้ทำการ login ไปยัง heroku โดยกระบวนการทั้งหมดจะทำผ่าน ทาง หน้าต่าง CMD ของวินโดวส์นะครับ

ต่อมาลงเครื่องมือจำเป็นอื่นๆ ดังนี้ (ถ้าลงไว้อยู่แล้วผ่านไปได้เลยนะครับ)

• PHP อันนี้ใครที่ลงจาก AppServ หรือ Xampp มีอยู่แล้วแน่นอน
• Composer ติดตั้งได้จาก https://getcomposer.org/doc/00-md
• Git ติดตั้งได้จาก https://git-scm.com/downloads

เมื่อเตรียมพร้อมครบแล้วเราก็ไปกันต่อ หนทางเหลืออีกไม่ไกลแล้ว

ต่อมาสำเนา ตัวอย่าง code php จาก git ของทาง heroku เพื่อทำการต่อเติมและเริ่มการทำงาน

เราจะได้ตัวอย่าง code มาดังภาพ

ให้ทำการเพิ่มไฟล์ส่วนการทำงานที่ใช้ติดต่อกับ LINE BOT API ลงไป โดยตัวอย่างจะนำเอา Echo Bot มาประยุกต์เพิ่มเติมส่วนการเชื่อมต่อกับ NETPIE.IO ลงไป

[callback.php]

<?php
  require("pub.php");

 
  $channelId = "--LINE Channel ID--";
  $channelSecret = "--LINE Channel Secret--";
  $mid = "--LINE BOT MID--";

 
  $requestBodyString = file_get_contents('php://input');
  $requestBodyObject = json_decode($requestBodyString);
  $requestContent = $requestBodyObject->result{0}->content;
  $requestText = $requestContent->text;
  $requestFrom = $requestContent->from;
  $contentType = $requestContent->contentType;

  getMqttfromlineMsg($requestText);
 
  $headers = array(
    "Content-Type: application/json; charset=UTF-8",
    "X-Line-ChannelID: {$channelId}", // Channel ID
    "X-Line-ChannelSecret: {$channelSecret}", // Channel Secret
    "X-Line-Trusted-User-With-ACL: {$mid}", // MID
  );

 
  $responseText = <<< EOM
「{$requestText}」 this is msg echo from Line Bot API。http://binahead.com
EOM;

 
  $responseMessage = <<< EOM
    {
      "to":["{$requestFrom}"],
      "toChannel":1383378250,
      "eventType":"138311608800106203",
      "content":{
        "contentType":1,
        "toType":1,
        "text":"{$responseText}"
      }
    }
EOM;
 
 
 
  $curl = curl_init('https://trialbot-api.line.me/v1/events');
  curl_setopt($curl, CURLOPT_POST, true);
  curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
  curl_setopt($curl, CURLOPT_POSTFIELDS, $responseMessage);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_HTTPPROXYTUNNEL, 1);
  curl_setopt($curl, CURLOPT_PROXY, getenv('FIXIE_URL'));
  $output = curl_exec($curl);

?>

ในการทำงานร่วมกับ server ของ netpie.io ผมได้แยกไว้อีกไฟล์หนึ่งเพื่อสะดวกต่อการแก้ไขโดยหลัการทำงานคือ เมื่อได้รับข้อความที่ส่งมาจาก Line เราจะนำมาแยกส่วนของ ข้อความออก ด้วยการเรียกฟังก์ชั่น getMqttfromlineMsg($requestText) โดยจะทำการแยกข้อความโดยมีเงื่อนไขคือจะตรวจสอบว่าข้อความที่เข้ามานั้นมีอักขระ “:” เข้ามาด้วยหรือไม่ หากมีให้ทำการแยก และเก็บส่วน แรกไว้เป็น topic และส่วน หลังไว้เป็น message แต่หากไม่พบจะส่งผ่าน message นั้นภายใต้ topic ที่ชื่อว่า “RAW” จากนั้นจะส่งต่อไปยัง ฟังก์ชั่น pubMqtt($topic,$msg) และ put($url,$tmsg) ตามลำดับ โดยในขั้นตอนของ ฟังก์ชั่น put($url,$tmsg) เราจะต้องส่งค่าเข้าไปด้วยกันสองค่าคือ

• $url    คือ ที่อยู่สำหรับเรียกใช้ REST API ของ NETPIE.IO โดยจะมีส่วนของ topic และ APP ID บรรจุไว้ด้วย
• $tmsg คือ ข้อความที่ต้องการส่ง

ภายในฟังก์ชั่น put($url,$tmsg) จะทำงานด้วย ฟังก์ชั่น Curl เพื่อสร้าง Header สำหรับสื่อสารไปยัง server ของ netpie.io  จุดที่ต้องแก้ไข คือ ส่วนของ

curl_setopt($ch, CURLOPT_USERPWD, “{YOUR NETPIE.IO APP KEY}:{YOUR NETPIE.IO APP SECRET}”)

ให้เรากำหนดค่า ที่ได้รับจาก netpie ของแต่ละท่าน

ตัวอย่างสำหรับการใช้งาน REST API ของ netpie.io สามารถเข้าศึกษาเพิ่มเติมได้ที่ https://github.com/netpieio/microgear-restapi

[pub.php]

 <?php

   function pubMqtt($topic,$msg){
      
      put("https://api.netpie.io/topic/binahead/$topic?retain",$msg);

  }
  function getMqttfromlineMsg($lineMsg){

    $pos = strpos($lineMsg, ":");
    if($pos){
      $splitMsg = explode(":", $lineMsg);
      $topic = $splitMsg[0];
      $msg = $splitMsg[1];
      pubMqtt($topic,$msg);
    }else{
      $topic = "raw";
      $msg = $lineMsg;
      pubMqtt($topic,$msg);
    }
  }

  function put($url,$tmsg)
{
     
    $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
    
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
    
    curl_setopt($ch, CURLOPT_POSTFIELDS, $tmsg);

    curl_setopt($ch, CURLOPT_USERPWD, "{YOUR NETPIE.IO APP KEY}:{YOUR NETPIE.IO APP SECRET}");
    
    $response = curl_exec($ch);
    
    curl_close ($ch);
    
    return $response;
}

?>

เมื่อทุกท่านปรับแต่งไฟล์เรียบร้อยแล้วเราก็จะได้ไฟล์ใหม่ดังภาพด้านล่างและพร้อมที่จะอัพไฟล์ขึ้น server ของ heroku กันแล้วละครับทีนี้

มาต่อด้วยการ Deploy App ที่เราพึ่งจะปรับแก้ขึ้นไปยัง heroku ก่อนอื่นเราต้องสร้าง App กันก่อนในที่นี้เราสามารถตั้งชื่อโดยการระบุ ไปในพารามิเตอร์ของคำสั่ง create ได้เลย

จากนั้นทำการสร้าง Git Repository บน heroku และทำการ push ข้อมูลขึ้นไปยัง git

หากเราอัพโหลดสำเร็จจะพบข้อความดังนี้

จากนั้นเราจะสั่งให้ instance ทำงานโดย เรียกคำสั่ง heroku ps:scale web=1

เราสามารถตรวจสอบการทำงานได้โดยคำสั่ง heroku open

โปรแกรมจะทำการเปิดหน้าเว็บบราวเซอร์ขึ้นมาและแสดงผล

เป็นอันเสร็จพิธีคราวนี้เราก็ไปดำเนินการต่อในอีกขั้นตอนสำคัญซึ่งหากไม่ทำ service ของเราจะคุยกับ LINE BOT API ไม่ได้เพราะว่า IP ที่ได้รับแจกจากระบบของ heroku จะเป็นแบบ dynamic มันจึงเปลี่ยนแปลงอยู่เรื่อยๆซึ่งนั่นจะทำให้การกำหนด Whitelist ทำได้ยากเพราะฉะนั้นสิ่งที่เราต้องทำอีกอย่างคือการกำหนดให้ IP ของ APP เราเป็นแบบ FIX IP โดยจะทำจากการติดตั้ง Add-Ons เพิ่มเข้าไป พระเอกของเราวันนี้ชื่อว่า Fixie

ในขณะที่เราทำการเพิ่ม Add-Ons นั้นจะมีหน้าต่างขึ้นมาแจ้งเตือนว่าไม่สามารถเพิ่ม Add-Ons ได้แถมยังให้เราไปเพิ่มเติมส่วนของข้อมูลบัตรเครดิตเสียอีก (อ่าวไหนว่าฟรี) ไม่ต้องตกใจนะครับ เป็นกระบวนการตามมาตรฐานเพราะว่าหลักการให้บริการของ heroku นั้นเขาจะมีโควตาในการใช้งานระบบอยู่ในระดับหนึ่งและหากเราใช้ทรัพยากรมากเกินโควต้าเมื่อไหร่เขาจึงจะเริ่มคิดเงิน ซึ่งจากการทดลองใช้งานแล้วนั้นพบว่าโควตาฟรีที่ให้มาเพียงพอต่อการใช้งานส่วนตัวหรืองานทดลองของ Maker อย่างเราๆได้อย่างสบายๆไม่ต้องกังวลใจไปครับ เพราะฉะนั้นก็เพียงแค่ให้ทุกท่านไปกรอกข้อมูลไว้เป็นพิธีแล้วกลับมาสั่งการทำงาน Add-Ons แล้วเราจะได้ IP มาชุดนึงจากนั้นจึงนำไปกำหนดในส่วนของ Whitelist ที่เคยกล่าวถึงในช่วงแรกก็เป็นอันเสร็จพิธีครับผม

หลังจากที่เราเตรียมทุกอย่างเรียบร้อยคราวนี้ก็ถึงเวลาทดสอบกัน การใช้งานก็ไม่ยุ่งยากซับซ้อนอะไรเพียงเรา เพิ่มเพื่อนด้วยการสแกน QR CODE ที่ทางระบบ LINE สร้างให้ จากนั้นจึงทดลองส่งคำสั่งไปเปิดปิดไฟกัน

– ตัวอย่างการสั่งปิดไฟ –

– ตัวอย่างการสั่งเปิดไฟ –

ที่มาและแหล่งข้อมูล :

• https://developers.line.me/bot-api/overview
• https://devcenter.heroku.com/articles/getting-started-with-php#set-up
• https://github.com/netpieio/microgear-restapi
• http://iti.hatenablog.jp/entry/2016/04/27/113053
• http://ola.kironono.com/entry/2016/04/09/205251
• http://huli.logdown.com/posts/726082-line-bot-api-tutorial
• http://qiita.com/teyosh/items/567ee416c94c2af2fe91
• https://github.com/bluerhinos/phpMQTT
• https://github.com/aszx87410/line-bot/blob/master/src/line-bot.js
• https://github.com/chavee/PieSonoff