ทำ Line Message API ด้วย n8n

สวัสดีครับ วันนี้เราจะมาทำ Line Message API ด้วย n8n จะเป็นยังไงนั้น เราไปดูกัน

ก่อนจะเริ่ม เราเคยพูดถึงว่า Line Message API กับ n8n ไปแล้ว ยังไงก็สามารถไปติดตามได้ที่นี่และสามารถไปดูคลิปวิดีโอได้ที่นี่

เอาล่ะมาเริ่มกันเลย คำถามแรกที่ต้องถามก็คือ ทำไมเราถึงต้องทำ Line Message API ด้วย n8n ล่ะ คำตอบก็คือเพราะเขียนโค้ดน้อยลงและไม่ต้องตั้ง Server คือมันจะจำลองเครื่องตัวเองเป็น Server แล้วไปเรียกใช้กับส่วนกลางของทาง n8n แต่จริง ๆ มันทำเป็น Self Hosted ได้นะ คือทำเป็น Server ของเราเอง ใช้ Domain เราเองอะไรแบบนี้ แต่วันนี้เราจะมาลองทำ Line Message API ด้วย n8n ในเวอร์ชั่น Desktop กัน

สำหรับ Node ที่เราจะใช้ในวันนี้มีด้วยกัน 4 Node จะมีอะไรนั้น เราไปดูกัน

• Webhook
• Code
• HTTP Request
• Respond to Webhook

อธิบาย Node แต่ละตัว

• Webhook คือ URL ไว้สำหรับรับ Request โดยเราสามารถตั้ง Path ได้ด้วยว่าจะเอาอะไร และมีให้เทสทั้ง Test URL และ Production URL ซึ่งมันสะดวกมาก วิธีการใช้งานนั้นก็คือ เรากด Listen For Test Event ไว้ มันจะ Trigger URL ที่ยิงมาหา Webhook ที่เราตั้ง ถ้าเมื่อไรมี URL ยิงมา หรือ Trigger ทำงาน มันก็จะหยุดทำงาน คือ การกด Listen For Test Event 1 ครั้งเท่ากับการเปิด Trigger 1 ครั้ง ถ้าเราอยากให้เปิดตลอดเวลา เราต้องกด Active แต่ถ้าเรากด Active เราต้องไปใช้ Production URL ส่วนตัวแนะนำว่าถ้าเทสยิง URL เรื่อย ๆ แนะนำว่าให้กด Active เลย แต่ไปตั้ง Path เป็นแบบอื่น เป็น Unique ID แบบไม่ซ้ำก็ได้แบบไม่มีใครเดาถูก เพราะไม่ว่าจะเป็น Test URL หรือ Production URL คนภายนอกถ้ารู้ก็สามารถเข้าใช้งานได้

• Code ส่วนนี้คือ Editor สำหรับเขียนโค้ดในภาษา Javascript นั่นเอง

• HTTP Request กล่าวไปในบทความที่แล้ว ก็คือ การยิงหรือเรียกใช้ URL ที่ปลายทาง

• Respond to Webhook คือ Response ของ Webhook ที่เราสร้าง

ต้องบอกว่า 4 Node ที่ว่ามานั้น มีการ Trigger โดยการยิง Request หรือ URL แค่ครั้งเดียว คือ เรายิง Webhook 1 ครั้ง มันจะทำงานหมดเลย

เอาล่ะ เราอธิบาย Node ทั้ง 4 ไปแล้ว เรามาเริ่มทำกันเลย แต่เราจะวางแค่ 3 Node และเชื่อมกันก่อน คือ Webhook, Code และ Respond to Webhook เพราะว่าถ้าเราใส่ HTTP Request แล้วเราไม่มี Endpoint ใส่ให้ มันจะกด Active ไม่ได้ และเวลาเทส จะเทสได้แค่ทีละ 1 ครั้งแล้วต้องมากดรันใหม่ และบางทีมันบัคหรือค้างไป ทำให้เราต้องเปลี่ยน Workflow บ่อย ๆ เพื่อให้กลับคืนค่าเดิม ซึ่งมันน่าหงุดหงิดมาก

ทำการเปิด Webhook โดยจะเห็นว่า URL นั้น ทาง n8n จะเป็นคน Generate มาให้ ส่วนที่เราต้องแก้ไขคือ HTTP Method กับ Path โดยที่ HTTP Method เลือกเป็น POST เพราะว่า Webhook ของทาง Line Message API ต้องเป็น Method POST เท่านั้น ส่วน Path เป็นอะไรก็ได้หรือเอาที่เค้ามีให้ก็ได้ จากนั้น Copy URL จาก Test URL ไปแล้วคลิกปุ่ม Listen For Test Event ทดสอบได้เลย

ในการยิงหรือเรียกใช้งาน API นั้นทำได้หลายวิธีมาก โดยผู้เขียนแนะนำ 2 ตัว คือ Postman กับ Hoppscotch (ใช้นอกเหนือจากนี้ได้นะ แล้วแต่ถนัด) โดยทั้ง 2 ตัวนี้หน้า UI คล้ายกันเลย ต่างกันที่ Hoppscotch ใช้งานบนเว็บได้เลยไม่ต้องสมัครก็ใช้งานได้ ส่วน Postman ถ้าใช้เป็นเว็บต้องสมัครก่อนถึงจะใช้งานได้ ถ้าเป็น Desktop ไม่ต้อง ทั้ง 2 ตัวนั้นมีฟีเจอร์พื้นฐานเหมือนกัน โดย Postman เป็นของบริษัท ถ้าจ่ายเงินจะมีฟีเจอร์มากขึ้น ส่วน Hoppscotch เป็น Open Source 100% เลย ใช้ฟรีทุกอย่าง ในทีนี้จะขอใช้ Hoppscotch ละกัน เพื่อความสะดวกต่อผู้อ่าน (Hoppscotch ชื่อเดิมคือ Postwoman เผื่อใครสงสัยว่าทำไมหน้าตาเหมือนกัน)

ในทีนี้จะขึ้น Message (ก่อนยิง มันต้องเลือก Proxy ข้างล่างด้วยนะ ไม่งั้นยิงไป มันจะไม่เห็น Response กับ History) ตามรูปเลย

ถ้ายิงไปอีกครั้งมันจะ Error เพราะการคลิก Listen For Test Event 1 ครั้ง ถ้ามันเข้า Webhook แล้วมันจะไม่ทำงาน เราต้องมาคลิก Listen For Test Event ใหม่ เพื่อทดสอบใหม่

(ถ้าเราจะเทสได้เรื่อย ๆ เราต้องกด Active แต่การกด Active นั้น Workflow ของเราต้องไม่มีปัญหา)

เมื่อตั้งค่า Webhook เสร็จแล้ว ไปตั้งค่า Code กันเลย โดยที่นำ Source Code ที่อยู่ข้างล่างไปใส่ได้เลย

let requests
let message = {}

for (const item of $input.all()) {
  requests = item.json.body
}

if ('events' in requests) {
  if ('message' in requests['events'][0]) { 
    if (requests['events'][0]['message']['type'] == 'text' &&
        'text' in requests['events'][0]['message']) {
      message = {
        'text': requests['events'][0]['message']['text'],
        'replyToken': requests['events'][0]['replyToken']
      }
    }
  }
}

return message

บรรทัดที่ 1 – 2 เป็นการประกาศตัวแปร โดยให้ message เป็น Object

บรรทัดที่ 4 – 6 เป็นการดึงค่า json มาเก็บไว้ในตัวแปร requests

บรรทัดที่ 8 – 18 เป็นการเช็ค Key เฉย ๆ ว่ามี Key ตามที่ Line Message API ส่งให้ครบรึเปล่า ถ้าใช่และครบก็จะนำ text ที่ได้กับ replyToken มาเก็บไว้ในตัวแปร message

บรรทัดที่ 20 คืนค่า Message กลับไป

การจะกด Execute Node ได้นั้น ตอนยิง API มาที่ Webhook นี้จะต้องส่งค่า Body ให้เหมือนกับที่ Line ส่งมาที่ Webhook เรา ลักษณะข้อมูลประมาณนี้ ในรูปแบบ json

{
  "destination": "xxx",
  "events": [
    {
      "type": "message",
      "message": {
        "type": "text",
        "id": "1234",
        "text": "Test"
      },
      "webhookEventId": "xxx",
      "deliveryContext": {
        "isRedelivery": false
      },
      "timestamp": 1670536792373,
      "source": {
        "type": "user",
        "userId": "xxx"
      },
      "replyToken": "xxx",
      "mode": "active"
    }
  ]
}

นำ json ข้างบนไปใส่ hoppscotch ในส่วนของ Body แล้วลอง Send ดูผลลัพธ์

จากนั้นลองเข้าไปดูที่ Code ก็จะเห็นผลลัพธ์ออกมาแล้ว

ทำการเพิ่ม Node HTTP Request ตามภาพเลย เพราะเราจะใส่ HTTP Request ละ

ในส่วน HTTP Request จะเป็นการยิง Reply ไปตอบเองแบบไม่ใช้ SDK ช่วย (เราสามารถทำ SDK หรือทำ Node เองได้ด้วยนะ) โดยข้อมูลที่ใส่มีดังนี้

• Method เลือกเป็น POST
• URL ใส่เป็น https://api.line.me/v2/bot/message/reply
• Authentication มีให้เลือกหลายตัว
  • None – ไม่ใส่
  • Predefined Credential Type – ใส่อันที่เค้าทำให้แล้ว
  • Generic Credential Type – จัดการเอง

ให้เลือกเป็น Generic Auth Type มันจะมีแถบเพิ่มขึ้นมาต่อ

• Generic Auth Type มีให้เลือกหลายอันเช่นกัน มันจะเป็นส่วนของการ Authentication ในแบบต่าง ๆ ซึ่งถ้าเอาทีละตัวจะเยอะมาก ๆ สามารถเข้าไปดูได้ที่นี่ เลือกเป็น Header Auth
• Credential for Header Auth เลือกเป็น Create New จะเด้งไปหน้าใส่ข้อมูล ในส่วนนี้ก็ใส่ Name เป็น Authorization ส่วน Value ใส่เป็น Bearer {channel access token} สามารถเข้าดูได้ที่นี่

• Credential for Header Auth เป็นอันที่เราสร้าง
• คลิก Send Header เป็นเปิด และใส่ Header Parameters โดยที่ Name เป็น Content-Type ส่วน Value เป็น application/json

จริง ๆ สามารถใส่ Authentication เป็น Bearer {channel access token} ตรงส่วนของ Header Parameters ได้นะ แต่ถ้าเราต้องการเอาไปใช้ Node อื่นมันจะต้องสร้างและทำแบบเดิมทุกรอบ เวลาเปลี่ยน channel access token จะวุ่นวายมาก ๆ ถ้า Node เยอะ เลยแนะนำว่าให้ใส่เป็นแบบ Credential for Header Auth ข้างบนดีกว่า

• เลื่อนมาข้างล่าง คลิก Send Body เปิดไว้
• Body Content Type เลือกเป็น JSON
• Specify Body เลือกเป็น Using JSON
• JSON คลิกที่ Expression จากนั้นให้ใส่รูปแบบตามข้างล่างได้เลย

{
  "replyToken": "{{$node["Code"].json["replyToken"]}}",
  "messages": [
    {
      "type": "text",
      "text": "{{$node["Code"].json["text"]}}"
    }
  ]
}

ข้อมูลจะได้ตามภาพ จากนั้นลองกด Execute Node ได้เลย ก็จะเป็นการเปิด Trigger ของจริง

นำ Webhook ไปใส่และลองพิมพ์ใน Chat ดูจะได้ข้อความตอบกลับก็เป็นอันเสร็จสิ้น (ได้เฉพาะ Text เท่านั้นนะ) สามารถเข้าไปใส่ Webhook ได้จากที่นี่ Login แล้วเลือก Channel ของเรา แล้วเลือกแถบ Message API อย่าลืมเปิด Webhook กันด้วยนะ (สำหรับตอนเอา URL ไปใส่ใน Webhook ถ้าเราไม่ได้เปิด Active ไว้ จะเป็นการใช้ Test URL ทั้งหมด ถ้าเรามั่นใจว่าส่งข้อความได้แล้ว ก็เปิด Active แล้วไม่ต้องไปกด Execute ใหม่นะ มันจะ Trigger ตลอดเวลาให้เลย และเอา Production URL ไปใส่ได้เลย

สำหรับ Webhook Response เราจะทำเป็นอะไรก็ได้ ในที่นี้เลือก Respond With เป็น JSON แล้วใส่ Response Body เป็น {} คิดว่าเพราะทาง Line Message API น่าจะยิงไปแล้วพอ Response 200 ก็จบ ไม่ก็ยิงไปเลยไม่สนใจ Response กลับมา อันนี้เลยกำหนดได้ แล้วแต่เราเลย (ดูข้อมูลเพิ่มเติมมา ถ้าเรายิง Reply แล้วมีปัญหา ทาง Line จะตอบเป็น HTTP status code พร้อม Message กลับมา แต่ถ้าไม่มีปัญหาจะตอบกลับเป็น HTTP status code 200 พร้อมกับ json ที่เป็น {} สามารถไปอ่าน Document ได้ที่นี่)

ปัญหาที่พบตอนทำก็คือเวลาเราเอา URL ไปใส่ Webhook แล้วไปพิมพ์ข้อความ ปรากฎว่าไม่มีการ Trigger อะไรเลย อันนี้แนะนำว่าให้ Save Workflow ที่เราทำงาน แล้วปิด/เปิด n8n ใหม่อีกครั้ง ไม่แน่ใจว่ามันตัด Connection เองเวลาไม่ได้ใช้นานหรือว่าอย่างไร แต่พอทำแบบนี้มันจะเปลี่ยน URL ของ Webhook ใหม่ด้วยนะ เราต้องไปใส่ใหม่ แล้วลองเทสดูก็กลับใช้งานได้ ก็แอบงง ๆ

เสร็จไปแล้วกับการทำ Line Message API ด้วย n8n เป็นไงกันบ้างครับ น่าจะมึนพอสมควรเลย เพราะมันมีการตั้งค่า Webhook แล้วก็มีการรับ Message เข้ามาตาม Format นี้ แล้ว Reply กลับไปเป็น Message มี Format เป็นอีกแบบหนึ่ง แล้วยังมี Test URL กับ Production URL อีก แต่อยากให้ทำความเข้าใจครับ แต่ก่อนมันต้องไปเขียน Route เอง เขียนโค้ดเองหมดเลย ทำ SSL ให้ URL ทำเซิฟเวอร์อีก ไม่ได้มีตัวจัดการ UI แบบนี้ คิดว่าน่าจะลดเวลาการใช้งานได้เยอะเลย และคิดว่าค่อย ๆ ทำความเข้าใจไปเรื่อย ๆ ลองทำบ่อย ๆ น่าจะทำให้เข้าใจและชินมากขึ้น

สำหรับบทความนี้ก็พอแค่นี้ก่อนละกันครับ หากมีคำถามหรือข้อสงสัยสามารถสอบถามได้ทาง Email หรือทาง Social ที่ทางเว็บมีให้ครับ สำหรับวันนี้ สวัสดีครับ

ช่องทางการติดต่อ

Email: [email protected]

Website: https://blog.tichaky.com/

Facebook: https://www.facebook.com/tichaky

Youtube: https://www.youtube.com/@tichaky_diary