LINE Chatbot + Thai Post API : อยากมีเเชทบอทเอาไว้ติดตามพัสดุตัวเองใครว่ายาก (LINE Sunday CodeLabs #3)

สวัสดีครับทุกคน สำหรับบทความนี้จะเป็นสรุป วิธีการพัฒนาตัวเเชทบอท เเละเก็บตกเล็กๆ น้อยจาก LINE Sunday CodeLabs #3 ที่ทาง LINE Developers Thailand พึ่งจัดไปเมื่อวันอาทิตย์ที่ผ่านมาครับ

เเละสำหรับใครที่ต้องการเข้าไปดูรายละเอียดของตัว CodeLabs เเบบเต็มๆ ก็สามารถเข้าไปดูได้ที่ลิงค์นี้เลยครับ : https://codelab.line.me/codelabs/package-tracking-chatbot/

เเต่ก่อนจะเริ่มบทความนี้กันต้องบอกว่าตัวบริการหรือ Service ในฝั่ง Backend ที่ทางผู้เขียนใช้ในบทความนี้จะไม่ได้ใช้เป็น Firebase Cloud Functions เหมือนกับใน CodeLabs นะครับ เนื่องจากตัว Firebase เองมีข้อจำกัดตัว Spark Plan ทำให้ไม่สามารถยิง API ไปนอก GCP ได้ ดังนั้นในบทความนี้จึงเลือกใช้เป็น Heroku เเทน

เเละวิธีการ หรือเนื้อหาบางส่วนภายในบทความนี้อาจเเตกต่างจากในตัว CodeLabs ของทาง LINE สักนิดนึงนะครับ เเต่รับรองว่าใช้งานได้ไม่ต่างกันเเน่นอนครับ !

Prerequisite ก่อนจะเริ่มทำเราต้องเตรียมอะไรกันไว้ก่อนบ้าง ?

• LINE Developers : Provider เเละ Messaging API channel.
• Thailand Post Account เเละ API Token
• GitHub Account / GitHub Desktop เเละ Repository สำหรับเก็บโปรเจ็คไฟล์
• Windows Power Shell / Command Prompt หรือ macOS Terminal
• Node.JS เเละ NPM (Node Package Manager)
• เเละ NPM Package : @line/bot-sdk / express เเละ axios ครับ

สำหรับขั้นตอนเเรกก่อนที่เราจะเริ่มตัวโปรเจ็คเราต้องทำการสมัคร LINE Developers Account กันก่อน

(เพราะเรากำลังจะพัฒนาบริการที่ต้องใช้ API จากทางไลน์ ดังนั้นเราจะไม่มี Developers Account ได้ยังไงกันนน !)

1. ถ้าใครที่ยังไม่เคยสมัคร LINE Developers Account มาก่อน ให้เข้าไปสมัครได้ที่ https://developers.line.biz/console/

2. ให้เราล็อกอินด้วย LINE Account ของเราได้เลยครับ ในขั้นตอนนี้เอง หากเรายังไม่เคยสมัคร Developers Account มาก่อน จะมีเป็นหน้าเว็บให้เรากรอกข้อมูลเเละสมัครครับ

3. ทำการสร้าง เเละตั้งชื่อให้ Provider ของเรา(ซึ่งเดียวเราก็จะต้องมาสร้าง Channel ใน Provider นี้ด้วย)

4. หลังจากสร้าง Provider เเล้วเราก็ต้องมาสร้าง Channel สำหรับ Messaging API กันครับ ให้เรากดเข้ามาใน Provider ที่เราพึ่งทำการสร้างกันไปเมื่อสักครู่นี้ เเล้วเลือกสร้างในส่วนของ Messaging API channel ครับ จากนั้นก็ให้เรากรอกข้อมูลลงไปสักเล็กน้อย เเล้วก็กดสร้าง Channel ได้เลยครับ

5. ทำการปิดในส่วนของ Auto-Reply ใน Channel ที่เราพึ่งสร้าง

6. ทำการกดสร้าง Channel access token เเละก็อปปี้มาเก็บเเอาไว้ก่อนครับ อ่อเเล้วก็ตัว Channel Secret ด้วยนะครับ ก็อปปี้ 2 ตัวนี้มาเก็บไว้ก่อน เดียวเราจะได้ใช้มันกันครับ

รูปจาก : LINE Developers CodeLabs

สร้าง Thai Post Account เเละสร้าง API Token ของไปรษณีย์ไทย

1. ถ้าใครที่ยังไม่เคยสมัครมาก่อนให้เราเข้าไปทำการสมัครก่อนที่ https://track.thailandpost.co.th/register ได้เลยครับ

2. เเละเมื่อทำการกรอกข้อมูล เเละสมัครเป็นที่เรียนร้อยเเล้ว หรือเคยสมัครไว้ก่อนหน้านี้เเล้ว ก็สามารถเข้าสู่ระบบได้ที่ https://track.thailandpost.co.th/login นี่เลยครับ

3. หลังจากทำการสมัครสมาชิก หรือว่าเข้าสู่ระบบเรียบร้อยเเล้ว ให้เรากดเข้าไปตรง เมนู “สำหรับนักพัฒนา” ด้านขวาบนของทางเว็บได้เลยครับ

เเละในส่วนของ API ให้เรากด Create Token เเล้วทำการก็อปปี้ในส่วนของตัว Token มาเก็บไว้ก่อนได้เลยครับ

สร้าง Heroku Account / Heroku App เเละ GitHub Repository

1. ถ้าใครยังไม่เคยสมัครใช้งานมาก่อนให้เราไปทำการสมัครก่อนได้ที่นี่เลยครับ https://id.heroku.com/login

2. ถ้าทำการสมัครเรียนร้อยเเล้ว หรือเคยสมัครไว้ก่อนหน้านี้เเล้ว ก็สามารถเข้าสู่ระบบได้ที่นี่เลย https://id.heroku.com/login

3. ทำการสร้างเเอพใหม่ โดยหลังจากเข้าสู่ระบบเเล้ว ให้เราเลือกที่เมนู “New” ด้านขวาบน เเละเลือก “Create New App” ได้เลยครับ

4. ทำการตั้งชื่อเเอพของเรา เเละกดสร้างได้เลยครับ

5. ทำการสร้าง Repository บน GitHub สำหรับในขั้นตอนนี้ถ้าใครที่ยังไม่มี GitHub Account ให้ทำการสมัครให้เรียนร้อยก่อนนะครับ เเล้วให้เราเข้าไปสร้าง Repo ใหม่ได้ที่ https://github.com/new ในส่วนของ Repository Name เราสามารถตั้งชื่อตามที่เราต้องการได้เลยครับ

6. ทำการดาวน์โหลดตัว GitHub Desktop (https://desktop.github.com/) เเละติดตั้งไว้ในเครื่องเรา ซึ่งเราจะใช้ตัวนี้ในการ Commit เเละ Push ไฟล์ในเครื่องเราไปเก็บไว้ใน Repository ที่เราพึ่งสร้างครับ

7. กลับมาตั้งค่าในส่วนของการ Deploy ใน Heroku App ที่เราพึ่งสร้างครับ โดยให้เรากดเข้าไปในเเอพของเรา เเละเลือกไปที่เมนู “Deploy” ตรงเเถบด้านบนได้เลยครับ

ในส่วนของการตั้งค่าหากเรายังไม่เคยตั้งค่าในส่วนนี้มาก่อน ให้เราทำการเลือก Deployment Method ให้เป็น GitHub ครับ เเล้วทำการค้นหา เเละเชื่อมต่อเข้ากับ Repository ที่เราพึ่งสร้างกันไปเมื่อกี้ได้เลย

เเต่ยังไม่ต้องกด Deploy น้า เพราะเรายังไม่มีไฟล์อะไรใน Repository ของเราเลย

สร้างโปรเจ็ค เเละใหม่บนเครื่องของเรา

1. ให้เราทำการเปิดในส่วนของ GitHub Desktop ที่เราพึ่งทำการดาวน์โหลดเเละติดตั้งไป เมื่อสักครู่นี้มา (ถ้าเป็นการเข้าใช้งานครั้งเเรกจะต้องทำการเข้าสู่ระบบด้วย GitHub Account ของเรากันก่อนนะครับ)
2. หลังจากเข้าสู่ระบบเรียนร้อยเเล้วให้เราทำการเลือกไปที่เมนู “File” ตรงเเถบด้านบน เเล้วทำการเลือก “Clone Repository” ที่เราพึ่งสร้างไปเมื่อสักครู่นี้ให้มาอยู่ในเครื่องเราครับ

3. ให้เราเลือก Repository ของเราที่จะทำการโคลน เเละตำเเหน่งบนเครื่องที่จะให้มันเก็บตัวโฟลเดอร์นี้ครับ

4.หลังจาก Clone ตัว Repository ให้มาอยู่ในเครื่องเราได้เเล้วตรงเเถบด้านบนก็จะทำการเเสดงในส่วนของชื่อ Repository ของเรา ตัว Branch ปัจจุบัน หน้าตาประมาณนี้ให้เราเห็นครับ

ติดตั้ง NPM Package

1. ให้เราทำการเปิด Terminal หรือใครที่ใช้เป็น Windows อาจจะใช้เป็น Power Shell หรือ Command Prompt ก็ได้เช่นกันครับ

1. ทำการ cd เข้าไปที่โฟลเดอร์ที่เราทำการ Clone มาเมื่อสักครู่นี้ครับ

3. ทำการ init ตัว npm กันสักหน่อยโดยใช้คำสั่ง

npm init -y

เเละทำการติดตั้งในส่วนของ NPM Package สามารถติดตั้งได้โดยพิมพ์คำสั่งตามนี้ได้เลยครับ

npm install @line/bot-sdk express axios

หลังจากทำการ init เเละติดตั้งในส่วนของ npm package เรียนร้อยเเล้ว ถ้าไม่มีข้อผิดพลาด หรือ Error อะไร บนหน้า Terminal ของเราก็จะมีหน้าตาประมาณนี้ครับ

4. ทำการเปิดโปรเจ็คด้วย VS Code หรือจะเปิดอย่างไวๆ โดยใช้คำสั่ง

code .

Let’s Code มาเริ่มเขียนโค๊ดกันเลยยยย

1. ให้เราสร้างไฟล์ JavaScript กันมาไว้ก่อน 4 ไฟล์ ซึ่งเดียวเราจะได้ใช้กันเเน่นอน !

server.js / thaipost.js / msgHelper.js / lineHelper.js

2. มาเริ่มที่ไฟล์เเรกของเรากันนั้นก็คือ server.js (ถ้าใครอยากไปเเบบติดจรวจ สามารถทำการก็อปในส่วนของ Source Code ไปใส่ได้เลยนะครับ)

3. สำหรับไฟล์ thaipost.js

4. มาต่อกันที่ไฟล์ lineHelper.js

5. เเละก็มาถึงไฟล์สุดท้าย สำหรับ msgHelper.js

เป็นยังไงกันบ้างครับ เขียนโค๊ดกันเบื่อเเล้วหรือยัง ? 55555 เเต่เสร็จเเล้วครับสำหรับขั้นตอนในส่วนของการเขียนโค๊ด เดียวต่อไปเรามา Deploy ขึ้น Heroku กันเลย

6. เปิด GitHub Desktop ขึ้นมาจากนั้นให้เรียนใส่ Summary สักเล็กน้อย จากนั้นก็สามารถกด Commit ได้เลยครับ

Deploy โปรเจ็คของเราขึ้น Heroku

1. ให้เรากลับไปที่ Heroku App ของเราที่พึ่งสร้างขึ้น จากนั้นก็ให้กดเข้าไปที่เเถบ “Deploy” ด้านบนได้เลยครับ

2. ถ้าเราทำการเชื่อมต่อ Heroku App เข้ากับตัว Repository เรียบร้อยเเล้ว ในขั้นตอนนี้ ให้เรามาที่เเถบ Manual Deploy เเล้วให้เรากดปุ่มสีดำ “Deploy Branch” ได้เลยครับ เเล้วก็รอ Heroku ทำการ Build เเละ Deploy สักนิดนึง

3. หลังจากนั้นเมื่อ Heroku Build เเละ Deploy เสร็จเรียบร้อยเเล้วก็จะปรากฎข้อความเเบบนี้มาให้เราเห็นครับ

4. ให้เรากดปุ่ม “View” เเละทำการก็อปปี้ในส่วนของ url ด้านบนที่ได้จาก Heroku มาไว้ได้เลย

ซึ่งเเน่นอนว่ามันจะ error เพราะเราไม่ได้กำหนด route ให้มัน เเต่ให้เราทำการก๊อปปี้ url ตรงนี้มาก่อนครับ

5. เเล้วกลับไปที่ Channel ของเราใน LINE Developers Console

เเละให้เราเอา url ที่เราก๊อปปี้มาเมื่อสักครู่นี้มาวางได้เลยครับ จากนั้นให้เราเติม /webhook ต่อท้ายไปสักนิดนึง เพราะถ้าใครยังจำกัดได้ เราได้กำหนด route สำหรับ POST Method ไปที่ /webhook นั้นเองครับ

เเละก็อย่าลืมติ๊กในส่วนของ Update เเละ Use Webhook กันด้วยนะครับ

มาดูผลงานของเรากันนนน ว่าพัฒนาเสร็จเเล้วจะเป็นยังไงบ้าง

Recap สรุป

เป็นยังไงกันบ้างครับ การพัฒนาเเชทบอทขึ้นมา สำหรับติดตามพัสดุของเรา ไม่ยากเลยใช่มั้ยครับ จริงๆ เเล้วหากใครมีไอเดียเพิ่มเติมก็สามารถนำเอา Chatbot ในบทความ หรือว่าใน CodeLabs นี้ไปปรับเเต่งเพิ่มลูกเล่นได้อีกมากมายได้ตามต้องการเลยครับ

เเละสุดท้ายในฐานะผู้เขียนหวังว่าทุกคนจะได้เเชทบอทไปใช้ เเละได้รับความรู้จากบทความ เเละ CodeLabs นี้ไปนะครับ

หากชื่อชอบ ถูกใจ รู้สึกว่าบทความนี้เป็นประโยชน์ทางผู้เขียนฝากกด Clap ตบมือ เเละติดตามเพื่อเป็นกำลังใจให้กับทางผู้เขียน ไม่ว่าจะเป็น บนช่องทาง Medium หรือจะบนช่องยูทูป MISTERFOCUSTH ก็ได้เช่นกันนะครับ เเล้วพบกันใหม่ในบทความหน้าครับผม.