สร้าง Chatbot วุ้นแปลภาษาใน LINE ได้ง่ายๆ ด้วย Firebase Extensions ภายใน 3 ขั้นตอน!

Warit Wanwithu
Nov 9, 2019 · 2 min read

こんにちは。สวัสดีครับ วันนี้เป็นบทความสั้นๆนะครับจะพาไปสร้าง Chatbot วุ้นแปลภาษาบน LINE เพื่อเอาไว้เป็นผู้ช่วยเวลาเราแชทคุยกับชาวญี่ปุ่น (จริงๆแล้วจะแปลคุยกับชาวต่างชาติประเทศอะไรก็ได้นะครับ ได้มากกว่าถึง 100 ภาษาเลย ส่วนจะคุยธุรกิจ หรือจีบสาวก็ไม่ว่ากันนะครับ 55+) ซึ่งต้องยกเครดิตให้กับเจ้าตัว Firebase Extensions ที่จะเข้ามาช่วยจัดการในส่วนของการแปลให้นั่นเองครับ さぁ、はじめましょう(เอาละ เรามาเริ่มกันเลย!)

Requirement

สิ่งที่ผมต้องการคือ Chatbot บนแอป LINE ที่จะคอยเป็นผู้ช่วยของผมในการสื่อสารภายในห้องแชทที่เป็นแบบกลุ่ม โดยเวลาที่ถ้าผู้ใช้พิมพ์ภาษาไทยเข้ามา ตัว Chatbot ต้องแปลเป็นภาษาญี่ปุ่นให้ เช่นเดียวกันถ้าพิมพ์เป็นภาษาญี่ปุ่นเข้าไป ต้องเอาไปแปลเป็นภาษาไทยให้ครับ

ขั้นตอนการพัฒนา

0. สร้าง Project และติดตั้ง Firebase Extensions ‘Translate Text’

Firebase Extensions เป็นอีกหนึ่งบริการใหม่ล่าสุด (ตุลาคม 2019) ที่จะช่วยลดเวลาในการพัฒนาฟังก์ชันต่างๆ ที่เรามักจะต้องพัฒนาขึ้นมาใช้เอง เช่น Resize Image, แปลภาษา, ส่งอีเมล และอีกเพียบ โดยเราเพียงแค่ติดตั้ง Extensions ที่ต้องการ จากนั้นก็จะสามารถใช้งานได้ทันที (เหมือนเราลงโปรแกรมเบย)

ไปสร้าง Firebase Project ได้ที่ https://console.firebase.google.com

ส่วนวิธีการติดตั้ง Firebase Extensions ตัวนี้ผมขออนุญาติให้ลองทำตามลิงค์ด้านล่างนี้ได้เลยนะครับ พี่ตี๋ Jirawatee เขียนไว้อย่างละเอียดแบบ Step-by-step เลย รับรองว่าง่ายมากๆครับ

เมื่อทำการติดตั้งเสร็จแล้วให้ลองทำการทดสอบดูครับ (แล้วจะเห็นถึงความมหัศจรรย์ 55+)

1. สร้าง LINE Official Account (Chatbot)

ข้อนี้ใครยังไม่เคยสร้าง LINE Chatbot มาก่อน ให้ทำตามบทความนี้ได้นะครับ ส่วนใครเคยทำแล้วให้ข้ามไปข้อถัดไปได้เลยครับ

2. จัดการ Webhook โดยใช้ Cloud Functions และเซฟข้อมูลลง Cloud Firestore

เราจะใช้ Cloud Functions มาจัดการ Webhook Event ที่จะส่งเข้ามาเมื่อผู้ใช้ทำการพิมพ์เข้ามาในห้องแชตและทำการเซฟข้อมูลลง Cloud Firestoreโดยใครที่ไม่เคยใช้งานมาก่อนให้อ่านทำความเข้าใจเรื่องนี้จากบทความนี้ได้เลย ส่วนใครมีประสบการณ์ตรงนี้แล้วให้ข้ามไปเช่นเคยครับผม

หลังจากที่เราติดตั้งสำเร็จ ให้เราไปเขียนโค้ดที่ไฟล์ index.js ได้เลยครับ โดยเราตอนที่เราได้รับ Webhook Event เราจะสนใจข้อความประเภท text เท่านั้นและจะทำการแกะข้อความออกมา จากนั้นเอาข้อความดังกล่าวไปเซฟลง ​Collection ที่ชื่อ ‘translations’ และตั้งชื่อ Field ว่า ‘input’ (ต้องตั้งชื่อเดียวกันกับชื่อที่เราได้เลือกไว้ตอนที่เราติดตั้ง Extensions นะครับ ไม่งั้นตัว Extensions จะไม่ทำการแปลให้)

3. ดักฟังการเปลี่ยนแปลงของ Cloud Firestore และส่งข้อความที่แปลเสร็จแล้วกลับไปหาผู้ใช้

หลังจากที่เราเซฟข้อมูลลง Cloud Firestore สำเร็จ ตัว Cloud Functions ที่ Firebase Extensions สร้างขึ้นมาให้เราจะถูกเรียกขึ้นมาทำงาน และทำการแปลข้อความให้เราเป็นภาษาที่เราได้ทำการเลือกไว้โดยอัตโนมัติ

เมื่อ Extensions ทำการแปลเสร็จแล้ว เราต้องการที่จะส่งข้อความที่ได้แปลแล้วกลับไปหาไลน์กลุ่มในลักษณะการ Push ดังนั้นเราต้องสร้างฟังก์ชันนี้ใน Cloud Functions เพื่อที่จะดักฟังการเปลี่ยนแปลงของ Cloud Firestore นั่นเอง (ผมใช้ Regex เพื่อตรวจสอบว่าข้อความที่ผู้ใช้ได้พิมพ์เข้ามาเป็นภาษาญี่ปุ่นหรือไม่ ถ้าเป็นภาษาญี่ปุ่นก็จะตอบคำแปลที่เป็นภาษาไทยกลับไป ถ้าไม่ใช่ก็จะตอบเป็นภาษาญี่ปุ่นกลับไปครับ) ดูโค้ดทั้งหมดได้ตรงนี้เลยครับ

จากนั้นก็สามารถทำการ Deploy ได้เบยยย

firebase deploy --only functions
สรุป: หลังจากการ Deploy เราจะได้ Cloud Functions ทั้งหมด 3 ตัว ให้สังเกตตัวที่ขึ้นต้นด้วย ext-firestore.. ตัวนี้คือตัวที่ถูกสร้างอัตโนมัติจาก Extensions นั่นเอง

เมื่อ Deploy เรียบร้อยแล้วจะได้ URL ใหม่ที่ต่อท้ายด้วย /LineWebhook ให้เอา URL ดังกล่าวไปใส่ใน LINE Developer Console ด้วยนะครับ เท่านี้ก็เป็นอันเสร็จ!

ทดสอบ

ลองทำการคุยกับ Chatbot แปลภาษาดูครับ เท่าที่ผมทดสอบถ้าเราคุยกันเป็นภาษาที่สุภาพหรือเป็นทางการหน่อย (ทั้งภาษาไทยและภาษาญี่ปุ่น) ตัวแปลภาษาของ Google Cloud Translation API จะแปลได้ค่อนข้างแม่นเลยทีเดียวครับ

สรุป

เห็นไหมครับว่าใช้เพียง 3 ขั้นตอนเท่านั้นที่เราต้องการเพื่อสร้าง Chatbot วุ้นแปลภาษา ง่ายมากๆเลยใช่ไหมครับ อ้อ อีกเรื่องเกี่ยวกับเรื่อง Google Cloud Translation API จะมีโควต้าฟรีแต่ละเดือนให้ $10 หรือประมาณ 500,000 characters ถ้าเราใช้เกินจากนี้จะมีค่าใช้จ่ายนะครับผม

หวังว่าบทความนี้จะทำให้นักพัฒนาสนุกและได้ไอเดียกลับบ้านไปต่อยอดพัฒนาบริการดีๆและแปลกใหม่โดยใช้ LINE API และ Firebase นะครับ แล้วพบกันใหม่ครับ また会いましょう 😇

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Thanks to Maneewan Boontamthan

Warit Wanwithu

Written by

Gym geek, Japan Otaku and Life long learner.

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade