LineBot + Anto.io </Tutorial>

สำหรับ Tutorial นี้เราก็จะมาพัฒนา Line Bot (Messaging API) เพื่อใช้ควบคุมอุปกรณ์ IoT (Internet of Things) โดยใช้บริการของ Anto กันนะครับ

ใน Tutorial นี้ผมไม่ได้อธิบายในส่วนของอุปกรณ์(กรอบสีฟ้า)สักเท่าไหร่นะครับจะเน้นไปทาง Line Bot ซะมากกว่า(กรอบสีส้ม) แต่สำหรับส่วนของอุปกรณ์นั้นสามารถศึกษาเพิ่มเติมได้จากบทความ “มาลองควบคุม Raspberry Pi ด้วย Anto กัน” นะครับ :D

Anto.io

https://www.anto.io/

สำหรับวิธีการสมัคร และการสร้าง Things & Channels สามารถศึกษาได้จาก “มาลองควบคุม Raspberry Pi ด้วย Anto กัน” นะครับ ใน Tutorial นี้จะสร้าง Things และ Channels ดังนี้ครับ

  • Things: ชื่อว่า “ myDevice”
  • Channels: เป็นประเภท Switch ชื่อว่า “ myChannel1” และ “ myChannel2”

สมัคร Line Messaging API

  1. สมัคร LINE Business Center (https://business.line.me/) โดยก่อนอื่นต้อง Login ด้วย Line Account ก่อน แล้วไปที่เมนู Services -> “Start using Developer Trial”
Line Business Center

2. ตั้งชื่อ Bot ที่เราต้องการและเลือก Business Type

3. คลิก “OK” ในหน้านี้ และคลิก “Apply” ในหน้าถัดไปครับ พอถึงหน้าในรูปด้านล่างแล้วให้คลิก “LINE@ Manager” ครับ

4. จะได้หน้าดังรูปด้านล่างครับโดยที่บริเวณที่ผมเอาสีแดงระบายทับไว้จะเป็น ID Line ของ Bot เราครับ

Line id สำหรับไปแอด friend bot นะครับ

5. Enable API

6. Allow Webhooks และ Don’t Allow “Auto Reply Message”, “Greeting Message”

7. ไปที่ https://business.line.me -> menu “account” -> “LINE Developers”

8. เมื่อเจอหน้าดังรูปด้านล่างให้ show “Channel Secret” แล้ว copy เก็บไว้ แล้วให้เลื่อนลงมาจนเจอ Channel Access Token ให้คลิกที่ “ISSUE” แล้วเราจะได้ Access Token ให้ Copy เก็บไว้ก่อนเช่นกันเพื่อนำไปใช้ในขั้นตอนถัดไป

สมัครบัญชีผู้ใช้และ deploy Heroku

  1. ก่อนอื่นเลยให้เราสมัครบัญชีผู้ใช้ Heroku (https://signup.heroku.com/dc)
Heroku

2. ให้ดาวน์โหลด Heroku CLI มาติดตั้งไว้ที่เครื่องก่อนครับ สามารถดาวน์โหลดได้ที่ https://devcenter.heroku.com/articles/heroku-cli#download-and-install

3. Login Heroku บน Command Prompt โดยใช้คำสั่ง heroku login

$ heroku login

แล้วให้เราใส่ Email & Password ที่เราสมัครไว้จากขั้นตอนแรกลงไปครับ

4. Clone Application ตัวอย่างที่ผมได้สร้างไว้ให้แล้วลงมาก่อนครับ โดยที่ Application นี้เป็น Web Application ที่ใช้ภาษา Python และ Flask (Framework)

$ git clone https://github.com/DreamN/Linebot-Anto-Tutorial.git

5. นำ Channel Secret และ Channel Access Token ที่ได้จาก ขั้นตอน สมัคร Line Messaging API ไปแทนที่ในวงเล็บในบรรทัดที่ 13–14

6. นำ Username, Key, Thing ที่ได้จาก Anto ไปแทนที่ใน บรรทัดที่ 19, 21, 23

7. ให้ไปเพิ่ม code ที่ต้องการต่อจากบรรทัดที่ 48 (โดยใน Tutorial นี้จะสั่ง On/Off Channels ใน Anto)
* โดยที่ตัวแปร message มีชนิดเป็น String มีค่าเท่ากับข้อความที่เราส่งมาทางไลน์

8. อันนี้ผมจะลองทำ if-else ธรรมดาๆ ตัวโค๊ดอาจจะดูไม่ค่อยสวยสักเท่าไหร่นะครับ(เอาไว้เพื่อให้ดูแล้วเข้าใจง่ายก่อนนะครับ :D)

  • anto.pub(x, y) จะเป็นการ publish ค่านะครับโดยที่ x คือชื่อ channel ของเรา (String) และ y ในที่นี้ผมใช้เป็นประเภท Switch เลยมีค่า 0 หรือ 1
  • ตัวอย่างการให้ line ตอบกลับ
    line_bot_api.reply_message(event.reply_token, TextSendMessage(text=”Hello, World!"))
    คือจะให้ Bot Line ตอบกลับมาเป็นเป็น string “Hello, World!”

9. Commit

$ git add .
$ git commit -m "My Commit Message"

10. จากนั้นให้สร้าง Heroku apps โดยการไปที่ command line (ให้ Change Dir เข้าไปที่ Dir ที่เรา Clone มาก่อนนะครับ)

$ heroku create
heroku create

11. เราจะได้ url webapp, url git ของ apps เรา จากนั้นให้ add git remote ก่อนครับ
* ให้แทนที่ {GIT_URL} ด้วย git url ที่เราได้จาก “heroku create” เมื่อกี้นะครับ

git remote add heroku {GIT_URL}

เช่นในตัวอย่างจะเป็น git remote add heroku https://git.heroku.com/still-everglades-25983.git

12. push!!!

git push heroku master

13. Edit Webhook URL (Line)

ให้เข้าไปในหน้าเดียวกับข้างตอนที่ “8” ของหัวข้อ “สมัคร Line Messaging API” (ด้านบน) นะครับ

เอา url ที่ได้จากขั้นตอน “heroku create” ไปใส่ที่ “Webhook URL” (ต่อด้วย “/callback” ด้วยนะครับ(ดังรูป))

*ไม่ใช่ URL ของ GIT นะครับ

Let’s play

ลองส่ง message ที่เราตั้งไว้ใน if-else แล้วเข้าไปดูใน anto.io จะสังเกตได้ว่า Switch มีการเปลี่ยนแปลงไปตาม message ที่เราส่งไป

Make our code more concise!! (แถม)

สำหรับรูปแบบ message “myChannelx on” หรือ “myChannelx off” นั้นเราสามารถทำให้ Code สวยขึ้นได้โดยสามารถแก้เป็น

Thank you for reading :)

ขอบคุณที่เข้ามาอ่าน Tutorial นี้กันนะครับ :)
https://github.com/DreamN/Linebot-Anto-Tutorial