Easily create a Translation Chatbot with Firebase Extensions

ใน Codelab นี้คุณจะได้เรียนรู้การสร้าง LINE Chatbot ที่ช่วยแปลภาษาบน LINE เพื่อเอาไว้เป็นผู้ช่วยเวลาเราแชทคุยกับชาวญี่ปุ่น (หรือชาวต่างชาติมากกว่าถึง 100 ภาษา) ด้วย Firebase Extensions

สิ่งที่คุณจะได้เรียนรู้

การสร้าง LINE Chatbot
การสร้างโปรเจคใน Firebase
การติดตั้ง Firebase Extensions ‘Translate Text'
การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
จัดการ Webhook โดยใช้ Cloud Functions และเซฟข้อมูลลง Cloud Firestore
ดักฟังการเปลี่ยนแปลงของ Cloud Firestore และส่งข้อความที่แปลกลับไปหาผู้ใช้

สิ่งที่คุณต้องเตรียมพร้อมก่อนเริ่ม Codelab

แอปพลิเคชัน LINE(สมาร์ทโฟน) ที่ sign in พร้อมใช้งาน
บัญชี Google เช่น Gmail
Browser(Desktop หรือ Mobile)
IDE หรือ Text Editor เช่น VS Code, Sublime หรือ Atom
Terminal สำหรับการ Run คำสั่งต่างๆ

สร้าง LINE Official Account

จุดเริ่มต้นของการพัฒนา LINE Chatbot คือคุณจะต้องสร้าง LINE OA(LINE Official Account) และเปิดใช้งาน Messaging API

เข้าไปที่ https://manager.line.biz แล้วเลือก Log in with LINE account(สีเขียว) เพื่อเข้าสู่ระบบ

เข้าสู่ระบบด้วยบัญชี LINE ของคุณให้เรียบร้อย
กดสร้าง LINE OA จากปุ่ม Create LINE official account สำหรับผู้ทีสร้าง LINE OA ครั้งแรก หรือกด Create new ทางด้านซ้ายสำหรับผู้ที่เคยสร้าง LINE OA แล้ว

ให้ระบุข้อมูลต่างๆลงไปในฟอร์ม แล้วกด ตกลง

จากนั้นให้ยืนยันรายละเอียดในการสร้าง LINE OA เป็นอันเสร็จสิ้น

เปิดใช้งาน Messaging API

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

เข้าไปที่ https://manager.line.biz ในกรณีที่เรามีบัญชี LINE OA ที่สร้างไว้แล้ว หน้านี้จะแสดงบัญชี LINE OA ต่างๆที่เรามี ก็ให้เรากดเลือกบัญชี LINE OA ที่เราต้องการ

ให้เราไปทีเมนู Settings > Messaging API แล้วให้กดปุ่ม Enable Messaging API

หากเป็นการ Enable Messaging API ครั้งแรกของบัญชี LINE Business ID จะเจอหน้าให้ลงทะเบียน Developer info ก็ให้กรอก ชื่อ และ อีเมล

จากนั้นให้สร้าง Provider ใหม่ หรือเลือก Provider เดิมกรณีที่เคยสร้างไปแล้ว

ระบุ URL ของ Privacy Policy และ Terms of Use (ถ้ามี) หากยังไม่มีก็สามารถกดปุ่ม ok ข้ามไปได้

ยืนยันการเปิดใช้งาน Messaging API ด้วยการกด Ok

เมื่อเจอหน้านี้ ก็แปลว่าคุณได้เปิดใช้งาน Messaging API ให้กับบัญชี LINE OA เรียบร้อยแล้ว

เพิ่ม Chatbot เป็นเพื่อนและตั้งค่า Channel

ขั้นตอนนี้เราจะเข้าไปใช้งาน LINE Developers Console ซึ่งเป็นเว็บไซต์สำหรับการบริหารจัดการ LINE Chatbot(LINE OA ที่เปิดใช้งาน Messaging API แล้ว) ในส่วนของนักพัฒนา

เข้าไปที่ https://developers.line.biz/console/
ให้กดเลือก Provider ที่ต้องการ

เราจะพบกับบัญชี LINE OA ที่เราได้เปิดใช้งาน Messaging API ไว้ ซึ่งในที่นี้เราจะเรียกมันว่า Channel(Channel จะเปรียบเสมือน Chatbot หรือ App) ก็ให้กดเลือก Channel ที่ต้องการ

ให้ไปที่ Tab ชื่อ Messaging API และทำการแสกน QR code ด้วยแอป LINE เพื่อเพิ่ม Chatbot เป็นเพื่อน

ให้ปิด Auto-reply messages เนื่องจากฟีเจอร์นี้จะเป็น default การตอบกลับของ Chatbot ซึ่งไม่จำเป็นต้องใช้ฟีเจอร์นี้

กลับมาที่ Channel ที่เราสร้างใน Tab ชื่อ Messaging API ตรงส่วนของ Channel access token ให้กดปุ่ม Issue

เบื้องหลังของ Chatbot ตัวนี้ เราจะใช้บริการ Cloud Functions for Firebase, Cloud Firestore และ Firebase Extensions ซึ่งเป็นอีกหนึ่งบริการของ Firebase ที่จะช่วยลดเวลาในการพัฒนาฟังก์ชันต่างๆ ที่เรามักจะต้องพัฒนาขึ้นมาใช้เองเช่น resize image, แปลภาษา, ส่งอีเมล ซึ่งเราเพียงแค่ติดตั้ง extension ที่ต้องการ จากนั้นก็จะสามารถใช้งานได้ทันที ขั้นตอนนี้เราจะมาสร้างโปรเจค Firebase เพื่อใช้งานกัน

สร้างโปรเจคและติดตั้ง Firebase Extensions

ให้ Sign in ในหน้า Firebase Extensions ด้วย Google account
เลื่อนลงไปด้านล่างจนเจอ Extensions ที่ชื่อว่า Translate Text และทำการคลิก Install

จากนั้นคลิก Add project ตั้งชื่อโปรเจคตามที่ต้องการ

เมื่อกด Continue แล้วให้ข้ามการตั้งค่า Google Analytics ไป เพราะเราไม่ได้ใช้ในโปรเจคนี้
จากนั้นทำการให้รีวิวและตั้งค่าตัว extension คลิก Next

เนื่องจาก Translate Text extension ตัวนี้จำเป็นต้องไปต่อกับ Google Translate API ในฝั่งของ Google Cloud Platform (GCP) ซึ่งอาจมีค่าใช้จ่ายเกิดขึ้น เราจึงจำเป็นต้องใช้ Blaze plan (Pay as you go) ให้ทำการคลิก Purchase

ถัดไปรีวิวว่าจะใช้สิทธิ์อะไรเพื่อการเข้าถึงบริการใน Firebase คลิก Next
ตั้งค่า extension ตามรูปด้านล่าง และคลิก Install extension จากนั้นรอการติดตั้งประมาณ 3-5 นาที

เปิดใช้งาน Cloud Firestore

เนื่องจากตัว extensions จะทำงานกับ Cloud Firestore โดยเมื่อมีข้อความเข้ามาใน database มันจะทำการแปลภาษาตามที่เราตั้งค่าไว้ ดังนั้นให้เราจะมาเปิดใช้งาน database ตัวนี้

ในหน้าโปรเจคให้เลือกเมนูชื่อ Firestore Database ที่อยู่ทางซ้ายมือ
ในหน้า Cloud Firestore ให้คลิก Create database

ให้เลือก Start in production mode เพื่อที่จะป้องกันไม่ให้ client สามารถเขียนและอ่านข้อมูลได้

เลือก location ของ database แล้วคลิก Enable

สร้าง collection ชื่อ translations และมี document ที่บรรจุ field อย่างน้อย 1 field ชื่อ input พร้อมข้อความ คลิก Save

หลังจากนั้นตัว extensions จะทำการแปลให้เรา โดยจะเอาผลลัพธ์ทั้งหมดมาเก็บไว้ใน field ชื่อ translated ไว้ (ทดสอบด้วนการพิมพ์ข้อความ ‘สวัสดี' ลงใน input)

การติดตั้ง Firebase CLI

Firebase CLI เป็นเครื่องมือที่จำเป็นสำหรับการ deploy ตัวฟังก์ชันที่เราพัฒนาขึ้น อีกทั้งยังสามารถจำลองการทำงานฟังก์ชัน(Emulate) ภายในเครื่องที่เราพัฒนาอยู่(Locally) ได้

เปิด Terminal ขึ้นมาแล้ว run คำสั่ง

npm install -g firebase-tools

ตรวจสอบว่า Firebase CLI ได้ติดตั้งเรียบร้อยแล้วโดย run คำสั่ง (หากสำเร็จจะเห็นเลขเวอร์ชัน)

firebase --version

Initialize โปรเจค

รันคำสั่งนี้ จากนั้นตัว browser จะเปิดขึ้นมาให้เราเข้าสู้ระบบด้วย Google account เดียวกันกับที่สร้างโปรดจคใน Firebase

firebase login

สร้างโฟลเดอร์เปล่า(ตัวอย่างโฟลเดอร์ชื่อ bot) แล้วให้ shell เข้าไปในนั้น

mkdir translatebot
cd translatebot

เมื่อเข้ามาในโฟลเดอร์แล้ว ให้ Initial โปรเจคด้วยคำสั่ง

firebase init functions

เลือก Use an existing project จากนั้นจะเห็นเชื่อโปรเจคที่เราสร้างไว้ ให้เลือก Translation-Chatbot และทำการกด enter

ถัดไปจะมีตัวเลือกภาษา 2 ตัวคือ JavaScript และ TypeScript โดยตัวอย่างนี้ให้เลือก JavaScript
จากนั้นมันจะถามว่าจะให้ติดตั้ง ESLint ไหม ตรงนี้แนะนำให้ตอบ N ไปก่อน(สำหรับมือใหม่)
สุดท้ายมันจะถามว่าจะให้ติดตั้ง dependencies เลยไหมก็ให้ตอบว่า Y ไป

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

เพิ่ม Dependencies ที่จำเป็นสำหรับโปรเจคนี้

เปิดไฟล์ package.json ขี้นมา
เพิ่ม axios ลงไปใน dependencies

"dependencies": {
  "firebase-admin": "^9.5.0",
  "firebase-functions": "^3.13.2",
  "axios": "^0.21.1"
}

ในโฟลเดอร์ที่เราสร้างมา ให้เรา shell เข้าไปต่อในโฟลเดอร์ชื่อ functions จากนั้นสั่ง Install ตัว dependencies ที่เพิ่มเข้ามาใหม่ใน terminal ด้วยคำสั่ง

npm install

เปิดไฟล์ index.js จากนั้นให้ import ตัว dependency ชื่อ firebase-admin เข้ามาที่จุดบนสุดของไฟล์ initial มันให้เรียบร้อย รวมไปถึง import ตัว axios เข้ามา

const admin = require("firebase-admin");
admin.initializeApp();
const functions = require("firebase-functions");
const axios = require("axios");

สร้างฟังก์ชันสำหรับรับ Webhook

ขั้นตอนนี้จะสร้างฟังก์ชันชื่อ LineWebhook ในไฟล์ index.js โดยฟังก์ชันดังกล่าวจะทำงานเมื่อได้รับ Webhook Event ที่เป็นข้อความประเภท text เท่านั้น จากนั้นทำการแกะข้อความออกมา จากนั้นเอาข้อความดังกล่าวไปเซฟลง Collection

exports.LineWebhook = functions.https.onRequest(async (req, res) => { 
   let event = req.body.events[0];
   if (event.message.type === 'text') { 
      let inputText = event.message.text; 
      await admin.firestore().collection('translations').doc('input').set({ 
           input: inputText 
      }).then(function () { 
           console.log("Document successfully written!");
      }).catch(function (error) { 
           console.error("Error writing document: ", error); 
      }); 
    } 
    return res.status(200).send(req.method);
});

ขั้นตอนนี้เราดักฟังการเปลี่ยนแปลงของ Cloud Firestore หลังจากที่ Extensions ทำการแปลเสร็จแล้ว และส่งข้อความที่ได้แปลแล้วกลับไปหาไลน์กลุ่ม

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

const GROUP_ID = "Caf6...";

exports.LineBotPush = functions.firestore.document('translations/input').onWrite(async (change, context) => { 
    let latest = change.after.data(); 
    let input = latest.input; 
    let containsJapanese = input.match(/[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/); 
    if (containsJapanese) { 
        push(GROUP_ID, latest.translated.th); 
    } else { 
        push(GROUP_ID, latest.translated.ja); 
    } 
});

สร้างฟังก์ชันชื่อ push ในไฟล์ index.js พร้อมรับตัวแปร groupId และ message จากนั้นก็เขียนโค้ดสำหรับ Push ข้อความที่แปลแล้วไปในกลุ่มไลน์

const push = (groupId, msg) => { 
    return axios({
    method: "post",
    url: "https://api.line.me/v2/bot/message/push",
    headers: {
       "Content-Type": "application/json",
       Authorization: "Bearer xxxxx"
    },
    data: JSON.stringify({
       to: groupId,
       messages: [{ type: "text", text: msg }] 
    }) 
   })
}

เมื่อทุกอย่างพร้อมแล้ว ก็ deploy ฟังก์ชันผ่าน terminal ด้วยคำสั่ง

firebase deploy --only functions

หาก deploy สำเร็จเราจะได้ Cloud Functions ทั้งหมด 3 ตัวแสดงอยู่ในเมนู Functions ใน Firebase console ให้สังเกตตัวที่ขึ้นต้นด้วย ext-firestore.. ตัวนี้คือตัวที่ถูกสร้างอัตโนมัติจาก Extensions นั่นเอง

ให้เอา URL /LineWebhook ไปใส่ใน LINE Developer Console

ผลลัพธ์

ยินดีด้วย! ถึงตรงนี้คุณก็มี LINE Chatbot ที่เป็นวุ้นแปลภาษาของคุณเองแล้ว!!!

สิ่งที่คุณได้เรียนรู้ใน Codelab นี้

✅ การสร้าง LINE Chatbot
✅ การสร้างโปรเจคใน Firebase
✅ การติดตั้ง Firebase Extensions ‘Translate Text'
✅ การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
✅ จัดการ Webhook โดยใช้ Cloud Functions และเซฟข้อมูลลง Cloud Firestore
✅ ดักฟังการเปลี่ยนแปลงของ Cloud Firestore และส่งข้อความที่แปลกลับไปหาผู้ใช้

เรียนรู้เพิ่มเติม

Reference docs

บอกเราหน่อยว่า Codelab ชุดนี้เป็นอย่างไรบ้าง

Feedback form