Building LINE MINI App for sending Service Messages

Service Messages คืออะไร?

Service Messages เป็นฟีเจอร์หนึ่งใน LINE MINI App ที่ให้ผู้ให้บริการส่งข้อความแจ้งเตือนไปยังผู้ใช้งานที่มีปฏิพันสัมพันธ์บน LINE MINI App ได้โดยไม่มีค่าบริการ และไม่จำเป็นต้อง Add ตัว LINE OA ใดๆ เช่น เมื่อลูกค้าเข้ามาจองโต๊ะอาหาร ทางร้านก็สามารถส่งข้อความยืนยันการจอง หรือส่งข้อความแจ้งเตือนล่วงหน้าก่อนถึงวันที่จะเข้ามาใช้บริการ

สิ่งที่คุณจะได้ลงมือทำ

ใน Codelab นี้คุณจะได้เรียนรู้ฟังก์ชันพื้นฐานการส่งข้อความ Service Messages ใน LINE MINI App ทั้งในส่วนของ Server-side และ Client-side

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

การสร้างและตั้งค่า LINE MINI App channel
การเพิ่ม Template ของ Service Messages
การสร้างและตั้งค่าโปรเจคใน Firebase
การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
การสร้าง API สำหรับส่งข้อความ Service Messages
การพัฒา LINE MINI App เพื่อเรียกใช้งาน API

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

แอปพลิเคชัน LINE(สมาร์ทโฟน) ที่ sign in พร้อมใช้งาน
Browser(Desktop หรือ Mobile)
โปรเจคต้นแบบสำหรับ Codelab นี้ ซึ่งจะอธิบายในขั้นตอนถัดไป

StackBlitz

ใน Codelab นี้เราจะพัฒนา LINE MINI App ด้วย StackBlitz ซึ่งเป็น Editor แบบออนไลน์ที่ไม่ต้องติดตั้งโปรแกรมใดๆ และเราสามารถแชร์ URL ของโปรเจคให้กับผู้อื่นได้ โดยโปรเจคที่แชร์ จะอนุญาตให้ผู้อื่นเข้าถึงโค้ดทั้งหมด แต่จะไม่สามารถแก้ไขโปรเจคของเราได้

เริ่มต้นให้ไปที่ โปรเจคต้นแบบ
แล้วให้ไปกด Folk โปรเจคที่บริเวณด้านบนของหน้า

เมื่อคุณ Folk โปรเจคเรียบร้อยแล้ว คุณจะได้ Endpoint URL สำหรับนำไปใช้ผูกกับ LINE MINI App มา

สมัครเป็น LINE Developer

จุดเริ่มขบวนสำหรับการพัฒนาแอปพลิเคชันต่างๆบนแพลทฟอร์มของ LINE คือคุณจะต้องสมัครเป็น LINE Developer ก่อน

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

เข้าสู่ระบบด้วยบัญชี LINE ของคุณให้เรียบร้อย
กรอกชื่อและอีเมล พร้อมกดยอมรับ Agreement จากนั้นกดปุ่ม Create my account เป็นอันเสร็จสิ้นขั้นตอนการสมัครเป็น LINE Developer

สร้าง Provider

Provider คือ superset ของแอปทั้งหลายที่เราจะพัฒนาขึ้นรวมถึง LINE MINI App ด้วย โดยการสร้างเพียงให้ระบุชื่อของ Provider ลงไป ซึ่งอาจจะตั้งเป็นชื่อตัวเอง, ชื่อบริษัท, ชื่อทีม หรือชื่อกลุ่มก็ได้

สร้าง Channel

Channel คือ subset ของ Provider ซึ่งเปรียบเสมือนแอปพลิเคชัน

โดยใน Codelab นี้เราจะต้องเลือก Create a LINE MINI App channel

เมื่อกดเลือก LINE MINI App channel จะเข้าสู่หน้าที่ให้ระบุรายละเอียดต่างๆลงไป แล้วกดสร้าง

หลังจากที่คุณมี Provider และ LINE MINI App channel เรียบร้อยแล้ว ขั้นตอนต่อไปเราจะมาตั้งค่าเพื่อใช้งาน LINE MINI App กัน โดยใน channel ให้เราเลือกแท็บชื่อ Web app settings

ผูก Endpoint URL เข้ากับ LINE MINI App

Endpoint URL: URL ที่รองรับ HTTPS ซึ่งใน Codelab นี้ให้คุณระบุ Endpoint URL ของ StackBlitz ที่ได้จากขั้นตอนที่ 2 ลงไปในช่องของ Developing

โดย URL ของ LINE MINI App ที่เราจะนำไปใช้จะอยู่ที่ LIFF URL แบบ Developing

ขั้นตอนต่อไปเราจะมาสร้าง Template ของข้อความกัน โดยใน channel ให้เราเลือกแท็บชื่อ Service message template แล้วกดปุ่ม Add สีเขียวทางด้านขวาล่าง

เพิ่ม Template ที่ต้องการ

ให้เลือก Template ที่ต้องการโดยจะต้องเลือก Category, Language, และ Template name โดยเมื่อเลือกแล้วเราจะได้ Template name สำหรับนำไปใช้กับ API ในขั้นตอนต่อไป

ถัดลงมาในหน้าเดียวกัน เราจะพบกับส่วนของตัวแปรที่จะเอาไว้ใช้กับ API โดยที่เราสามารถทดสอบส่งข้อความได้

และส่วนสุดท้ายคือให้ระบุ Use case การใช้งานลงไป จากนั้นกด Add ได้เลย

ใน Codelab นี้เราจะใช้บริการ Cloud Functions for Firebase มาสร้างเป็น API สำหรับส่งข้อความ Service Messages ดังนั้นเราจะเริ่มจากการไปสร้างโปรเจคใน Firebase ก่อน

สร้างโปรเจคใน Firebase

ให้ Sign in ใน Firebase console ด้วย Google account
ในหน้า Firebase console ให้คลิก Add project จากนั้นตั้งชื่อโปรเจคตามต้องการ

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

เปลี่ยนแพลนจาก Spark ไปเป็น Blaze (Pay as you go)

เนื่องจาก Cloud Functions for Firebase มีเงื่อนไขว่า หากต้องการไป request ตัว APIs ที่อยู่ภายนอก Google คุณจำเป็นจะต้องใช้ Blaze plan(เราจะต้องไปเรียก API ของ LINE MINI App)

การติดตั้ง 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 bot
cd bot

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

firebase init functions

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

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

ขั้นตอนนี้เราจะสร้าง API ขึ้นมาเพื่อรับข้อมูลจาก LINE MINI App และส่งข้อความผ่าน Service Message API

ใน Codelab นี้เราจะใช้ axios มาเป็นตัวช่วยในการสร้าง request ซึ่งเราจะต้องทำการติดตั้ง dependency ตัวนี้ก่อน โดยให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่ง

npm install axios --save

ถัดไปให้เรากลับไป LINE MINI App Channel ที่เราสร้างไว้ในขั้นตอนที่ 2 แล้วไปที่แท็บ Basic settings จากนั้นให้คัดลอกค่า Channel ID และ Channel secret จาก Developing มา

จากนั้นเราจะสร้าง Environment Variable โดยให้ไปสร้างไฟล์ .env ใน /functions แล้วให้เอาค่า Channel ID และ Channel secret มาระบุลงไป

CHANNEL_ID=YOUR-CHANNEL-ID
CHANNEL_SECRET=YOUR-CHANNEL-SECRET

เพื่อโค้ดที่สั้น เป็นระเบียบ เราจะแยกฟังก์ชันสำหรับการเรียกใช้ LINE API ออกมาเป็น module โดยภายในจะมีฟังก์ชัน

issueChannelAccessToken() สำหรับการ issue ตัว Stateless Channel Access Token
issueServiceNotificationToken() สำหรับการ issue ตัว Service Notification Token
sendServiceMessage() สำหรับส่งข้อความผ่าน Service Message API

ขั้นตอนนี้ให้สร้างไฟล์ /functions/utils/request.js แล้วให้ copy โค้ดด้านล่างนี้ไปวาง

const axios = require("axios");
const MESSAGING_API = "https://api.line.me/oauth2/v3";
const MINI_APP_API = "https://api.line.me/message/v3/notifier";

class Request {
  async issueChannelAccessToken(channelId, channelSecret) {
    const params = new URLSearchParams();
    params.append('grant_type', "client_credentials");
    params.append('client_id', channelId);
    params.append('client_secret', channelSecret);
    const response = await axios({
      method: "post",
      url: `${MESSAGING_API}/token`,
      headers: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },
      params
    });
    return response.data.access_token;
  }

  async issueServiceNotificationToken(headers, liffAccessToken) {
    const response = await axios.post({
      method: "post",
      url: `${MINI_APP_API}/token`,
      headers,
      data: { liffAccessToken }
    });
    return response.data.notificationToken;
  }

  async sendServiceMessage(headers, notificationToken) {
    return axios({
      method: "post",
      url: `${MINI_APP_API}/send?target=service`,
      headers,
      data: {
        templateName: "couponnoti_s_c_th",
        params: { btn1_url: "https://linedevth.line.me" },
        notificationToken
      }
    });
  }
}

module.exports = new Request()

ถัดไปให้เปิดไฟล์ /functions/index.js แล้วให้ copy โค้ดด้านล่างนี้ไปแทนที่โค้ดเดิม เพื่อรับค่า liffAccessToken และส่งข้อความ

const { onRequest } = require("firebase-functions/v2/https");
const request = require("./utils/request");

exports.serviceMessages = onRequest({ cors: "*" }, async (req, res) => {
  const channelAccessToken = await request.issueChannelAccessToken(process.env.CHANNEL_ID, process.env.CHANNEL_SECRET);

  const headers = { "Content-Type": "application/json", Authorization: `Bearer ${channelAccessToken}`}

  const notificationToken = await request.issueServiceNotificationToken(headers, req.body.liffAccessToken);

  const response = await request.sendServiceMessage(headers, notificationToken);
  
  res.json({ result: response.data });
});

เสร็จแล้วให้เปิด command line ขึ้นมาอีกครั้ง และให้แน่ใจว่าเราอยู่ที่ /functions จากนั้นใช้คำสั่งด้านล่างนี้เพื่อ deploy ตัว webhook ของเราขึ้น production

firebase deploy --only functions

เมื่อ deploy เสร็จเรียบร้อยเราจะเห็น API โผล่อยู่ใน command line เลย ก็ให้เรา copy มา หรือกรณีที่ไม่พบก็ให้เข้าไปที่ Firebase console เลือกโปรเจคที่เราสร้างไว้ แล้วเลือกเมนู Build > Functions จะเจอชื่อฟังก์ชัน serviceMessages และ API ที่นั่น

{
    notificationToken: 'd938cb43-7868-054e-6d84-758acc2dc847',
    remainingCount: 4,
    expiresIn: 31535999,
    sessionId: 'wZgQzped'
}

หลังจากที่คุณได้พัฒนา API สำหรับส่งข้อความ Service Messages เรียบร้อยแล้ว คราวนี้เราจะมาลงมือโค้ดเพื่อเรียกใช้งาน API ดังกล่าวกัน

Initial LIFF SDK

ไปที่ไฟล์ index.html ใน StackBlitz แล้ว Uncomment ตัว LIFF SDK ใน

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

ไปที่ไฟล์ index.js แล้วเพิ่มคำสั่ง initialize ตัว LIFF app ด้วย LIFF ID ที่คุณได้จากขั้นตอนที่ 4 ในฟังก์ชัน main()

// Initialize LIFF SDK
await liff.init({ liffId: "YOUR-LIFF-ID" })

ระบุ API เพื่อให้ LINE MINI App ทำการ Request

ขั้นตอนนี้ให้เราเอา URL ของ API ไปแทนที่ YOUR-API ในไฟล์ index.js เพื่อให้ LINE MINI App ทำการ request ไป โดยใน request เราจะแนบ liffAccessToken ไปด้วย

async function requestAPI() {
  await fetch("YOUR-API", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ liffAccessToken: liff.getAccessToken() })
  });
  alert("Message sent successfully!");
  liff.closeWindow();
}

ทดลองใช้งาน

ให้เราเอา URL ของ LINE MINI App ในขั้นตอนที่ 4 ซึ่งมีลักษณะ https://miniapp.line.me/YOUR-LIFF-ID

โพส URL ดังกล่าวลงในห้องแชทบน LINE(สมาร์ทโฟน) จากนั้นก็คลิกลิงค์ได้เลย
เมื่อเปิดหน้า LINE MINI App สักครู่จะมีข้อความแจ้งเตือนว่า "Message sent successfully!" ซึ่งเมื่อกด OK แล้ว ตัว LINE MINI App จะปิดตัวลงไป
จากนั้นเมื่อกลับไปหน้า Chat list จะพบว่ามีข้อความ Service Message ส่งมาที่บัญชี LINE MINI App Notice

ยินดีด้วยครับ ถึงตรงนี้คุณก็มี LINE MINI App ตัวแรกเป็นของคุณเองแล้ว!!!

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

✅การสร้างและตั้งค่า LINE MINI App channel
✅การเพิ่ม Template ของ Service Messages
✅การสร้างและตั้งค่าโปรเจคใน Firebase
✅การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
✅การสร้าง API สำหรับส่งข้อความ Service Messages
✅การพัฒา LINE MINI App เพื่อเรียกใช้งาน API

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

บทความเกี่ยวกับ LINE MINI App ใน LINE Developers Thailand

Reference docs

Sending service messages

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

Feedback form