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

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 ในลำดับต่อไป

2016-06-12_17-14-53
2016-06-12_22-48-09

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

2016-06-12_23-34-04

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

2016-06-12_23-36-43

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

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

2016-06-12_23-41-22

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

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

2016-06-16_21-58-44
dd

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

2016-06-16_22-19-08

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

dfdf

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

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

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

ddwww

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

yyy

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

2016-06-23_16-54-47

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

2016-07-09_21-42-02

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

2016-07-09_21-45-29

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

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

https://github.com/line
2016-07-09_22-08-39

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

2016-07-09_22-46-04
https://toolbelt.heroku.com/

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

2016-07-09_22-49-22

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

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

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

2016-07-09_23-09-52

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

2016-07-10_0-02-38

ให้ทำการเพิ่มไฟล์ส่วนการทำงานที่ใช้ติดต่อกับ 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 กันแล้วละครับทีนี้

2016-07-10_0-54-55

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

2016-07-09_23-08-46

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

2016-07-09_23-17-36
2016-07-09_23-18-15
2016-07-09_23-19-23

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

2016-07-09_23-21-59

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

2016-07-09_23-24-21

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

2016-07-09_23-25-43

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

2016-07-09_23-28-17

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

2016-07-09_23-38-19
2016-07-09_23-39-27

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

2016-07-09_23-40-08
2016-07-09_23-46-40

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

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

13616165_1212450215474487_333953163_o

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

13633373_1212450222141153_701777482_o

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

  • 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