รู้จักกับ LIFF CLI ตั้งแต่ Zero จนเป็น Hero

ครั้งหนึ่งนานมาแล้ว ผมเคยเห็น LIFF CLI v0.1.0 ที่ทาง LINE ปล่อยให้นักพัฒนาได้ใช้งาน ผมใคร่สัมผัสจับต้องมัน แต่ถูกเพื่อนห้ามเอาไว้ เนื่องด้วยขณะนั้นบร๊ะลานุภาพของมันยังมิต้องตาต้องใจ แต่บัดนี้ บร๊ะลานุภาพของมันได้เพิ่มพูนถึง v0.2.0 ที่จะนำไปใช้ในงานได้แล้ว ผมจึงจะนำเครื่องมือนี้มารีวิวให้ชมกัน

LIFF CLI คืออะไร

LIFF CLI คือ Command Line Interface ที่ช่วยให้นักพัฒนาสามารถบริหารจัดการ LIFF app ทั้งการ create, update, list และ delete รวมถึงการ run & debug ใน local ได้ง่ายและสะดวกผ่าน Terminal หรือ Command-line tool (ต่อไปขอเรียกว่า Terminal)

สำหรับนักพัฒนา แค่อ่านมันไม่พอ! ดังนั้นบทความนี้ผมจะพาทุกคนไป learning by doing ทีละขั้นทีละตอน โดยเนื้อหาจะครอบคลุมตามหัวข้อดังนี้

1. สร้าง LINE Login Channel
2. ติดตั้ง Node.js และ LIFF CLI
3. บริหารจัดการ LIFF app ด้วย CLI
4. Setup และ Run ตัว LIFF app ใน Local

1. สร้าง LINE Login Channel

เนื่องจาก LIFF คือบริการที่อยู่ภายใต้ LINE Login Channel ดังนั้นจุดเริ่มต้นคือเราต้องมี LINE Login Channel กันซะก่อน โดยถ้าใครที่มีอยู่แล้วให้ข้ามขั้นตอนนี้ไป แต่ถ้ายังไม่มีให้ทำตามข้อ 1 และ 2 ของบทความด้านล่างนี้

สร้างและพัฒนา LIFF v2 ให้ดึง Email ของผู้ใช้ออกมาได้

2. ติดตั้ง Node.js และ LIFF CLI

การติดตั้ง LIFF CLI นั้นสามารถทำผ่าน npm หรือ yarn ก็ได้ แต่เนื่องด้วย LIFF CLI จะ run อยู่บน Node.js ดังนั้นในบทความนี้ผมจะเลือกติดตั้งผ่าน npm ที่มาพร้อมกับการติดตั้ง Node.js ไปเลย

2.1 ติดตั้ง Node.js และ npm

ให้เข้าไปดาวน์โหลดและติดตั้ง Node.js ให้เรียบร้อย ซึ่งเมื่อติดตั้งเรียบร้อยแล้วสามารถตรวจสอบว่าทั้ง node และ npm พร้อมใช้งานในเครื่องเราโดยเปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่งตามด้านล่าง

node --version // แนะนำว่าควรเป็น v20 หรือใหม่กว่า
npm --version

หากเห็นตัวเลขเวอร์ชันโผล่มาก็เป็นอันว่าผ่าน

2.2 ติดตั้ง LIFF CLI

ใน Terminal ให้ใช้คำสั่งด้านล่างนี้เพื่อติดตั้ง LIFF CLI

npm install -g @line/liff-cli

3. บริหารจัดการ LIFF app ด้วย CLI

ปัจจุบันนักพัฒนาสามารถใช้ LIFF CLI ในการ Create, Update, List และ Delete ตัว LIFF app ได้ โดยมีขั้นตอนดังนี้

3.1 เพิ่มและตั้งค่า Default กับ Channel

จุดเริ่มขบวนของการจัดการ LIFF app ทั้งหลายใน LINE Login Channel นั้น เราจะต้องผูก Channel ที่ต้องการเข้ากับ LIFF CLI โดยให้เปิด Terminal แล้วพิมพ์คำสั่ง
liff-cli channel add ตามด้วย Channel ID ที่ได้จากข้อที่ 1 ลงไป (ตัวอย่าง Channel ID คือ 1234567890)

liff-cli channel add 1234567890

จากนั้นตัว LIFF CLI จะถามหา Channel Secret ก็ให้ copy มาวาง ซึ่งถ้าถูกต้อง ก็จะมีข้อความยืนยันการเพิ่ม Channel ตามตัวอย่างด้านล่างนี้

Channel Secret?: ********************************
# Channel 1234567890 is now added.

3.2 ตั้งค่า Default ให้กับ Channel

ขั้นตอนนี้เป็น optional เพื่อให้ LIFF CLI จดจำ Channel ID ซึ่งจะช่วยให้นักพัฒนาสามารถเรียกคำสั่งถัดๆไปในการจัดการ LIFF app สำหรับ Channel นั้นได้สั้นลง

ใน Terminal ให้พิมพ์คำสั่ง liff-cli channel use ตามด้วย Channel ID ที่เราได้เพิ่มไว้ในข้อก่อนหน้า ซึ่งถ้าเรียบร้อย ก็จะมีข้อความยืนยันตามตัวอย่างด้านล่างนี้

liff-cli channel use 1234567890
# Channel 1234567890 is now selected.

3.3 Create a LIFF app

ขั้นตอนนี้เราจะมาลองสร้าง LIFF app ผ่านคำสั่ง liff-cli app create กับ LIFF CLI กัน โดยคำสั่งในการสร้างจะมีส่วนประกอบดังนี้

• --channel-id Channel ID ของ LINE Login Channel [optional]
• --name ชื่อของ LIFF app (ห้ามมีคำว่า LINE) [Required]
• --endpoint-url URL ขึ้นต้นด้วย HTTPS [Required]
• --view-type ขนาดในการแสดงผล LIFF app ซึ่งมี 3 ขนาดได้แก่ full, tall และ compact [Required]

โดยเมื่อ run คำสั่งสร้าง LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app create \
   --name "LIFF CLI Demo" \
   --endpoint-url https://mokmoon.com/ \
   --view-type full
# Successfully created LIFF app: 1234567890-AbcdEfgh

หมายเหตุ: ตัวอย่างคำสั่งด้านบนจะไม่ได้ระบุ --channel-id เนื่องจากได้มีการตั้งค่า default ให้กับ channel มาแล้ว

Get Jirawatee’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่ามี LIFF app ถูกสร้างขึ้นแล้ว

3.4 Update a LIFF app

ขั้นตอนนี้เราจะมาลองอัพเดท LIFF app ผ่านคำสั่ง liff-cli app update กับ LIFF CLI กัน โดยคำสั่งในการอัพเดทจะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ต้องการอัพเดท [Required]
• --channel-id Channel ID ของ LINE Login Channel [optional]
• --name ชื่อของ LIFF app (ห้ามมีคำว่า LINE) [optional]
• --endpoint-url URL ขึ้นต้นด้วย HTTPS [optional]
• --view-type ขนาดในการแสดงผล LIFF app ซึ่งมี 3 ขนาดได้แก่ full, tall และ compact [optional]

โดยเมื่อ run คำสั่งอัพเดท LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app update \
   --liff-id 1234567890-Jv5mrQdE \
   --view-type tall
# Successfully updated LIFF app: 1234567890-Jv5mrQdE

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่า LIFF app ได้ถูกอัพเดทขนาดแล้ว

3.5 List LIFF apps

ขั้นตอนนี้เราจะมาลอง list ตัว LIFF app ที่มีอยู่ใน Channel ออกมาให้หมด ผ่านคำสั่ง liff-cli list กับ LIFF CLI กัน โดยคำสั่งในการ list จะมีส่วนประกอบดังนี้

• --channel-id Channel ID ของ LINE Login Channel [optional]

โดยเมื่อ run คำสั่ง list ตัว LIFF app เสร็จจะมี LIFF ID และ ชื่อ แสดงตามตัวอย่างด้านล่าง

liff-cli app list
# LIFF apps:
# 1234567890-Jv5mrQdE: LIFF CLI Demo

3.6 Delete a LIFF app

ขั้นตอนนี้เราจะมาลองลบ LIFF app ผ่านคำสั่ง liff-cli app delete กับ LIFF CLI กัน โดยคำสั่งในการลบจะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ต้องการอัพเดท [Required]
• --channel-id Channel ID ของ LINE Login Channel [optional]

โดยเมื่อ run คำสั่งลบ LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app delete \
   --liff-id 1234567890-Jv5mrQdE \
   --channel-id 1234567890
# Deleting LIFF app...
# Successfully deleted LIFF app: 1234567890-Jv5mrQdE

4. Setup และ Run ตัว LIFF app ใน Local

ฟีเจอร์ใหม่ใน LIFF CLI ที่มาตั้งแต่ v0.2.0 เป็นต้นไป คือมันสามารถสร้าง local development server ขึ้นมาเพื่อช่วยให้เรา run ตัว LIFF app ใน local ได้

4.1 สร้าง Cerificate และ Private Key

จุดเริ่มขบวนของการ run ตัว LIFF app ใน local คือเราจะต้องสร้าง valid certificate ขึ้นมาก่อน โดยให้เปิด Terminal ขึ้นมาแล้วติดตั้ง mkcert ผ่านคำสั่ง

# For macOS (using Homebrew)
brew install mkcert

# For Windows (using Chocolatey)
choco install mkcert

จากนั้นติดตั้ง Certificate Authority(CA) ใน local ด้วยคำสั่ง

mkcert -install
# The local CA is now installed in the system trust store! ⚡️

แล้วสร้างไฟล์ certificate(localhost.pem) และไฟล์ private key (localhost-key.pem) ด้วยคำสั่ง

mkcert localhost

# Created a new certificate valid for the following names 📜
# - "localhost"

# The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
# It will expire on 24 December 2026 🗓

เสร็จแล้วเราจะได้ไฟล์ทั้งสองมาละครับ

4.2 Run ตัว LIFF app ใน Local

ขั้นตอนนี้เราจะสร้าง local proxy server เพื่อมา run ตัว LIFF app ผ่านคำสั่ง serve กับ LIFF CLI กัน โดยคำสั่งในการ run จะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ได้ตั้งค่า default channel [Required]
• --url URL ของ local development server [Required]

การ run คำสั่ง serve จะต้อง run ใน directory เดียวกับไฟล์ localhost.pem และ localhost-key.pem โดยเมื่อ run คำสั่ง serve แล้วก็จะพบข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli serve \
   --liff-id 1234567890-Jv5mrQdE \
   --url http://localhost:5000/

# Successfully updated endpoint url for LIFF ID: 1234567890-Jv5mrQdE.

→  LIFF URL:     https://liff.line.me/1234567890-Jv5mrQdE
→  Proxy server: https://localhost:9000/

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่า LIFF app ได้ถูกอัพเดท Endpoint URL ไปเป็น https://localhost:9000/ แล้ว

คำเตือน: ห้ามใช้คำสั่ง serve กับ LIFF ID ที่อยู่ใน prod เป็นอันขาด เพราะตัว LIFF CLI จะเอา URL ของ local proxy server ไปแทนที่ใน Endpoint URL ของ LIFF app ทำให้ผู้ใช้งานทั่วไปจะไม่สามารถใช้งาน LIFF app ตัวนั้นได้

คราวนี้มาลองเปิด LIFF app ด้วย LIFF URL กัน ซึ่งผลปรากฏว่า…มันจะ redirect ไปเปิด https://localhost:9000/ ได้แล้วทุกคน!

ปล. โค้ดในหน้าเว็บตัวอย่างจะมีการรองรับการ Login สำหรับ External Brower เพื่อดึงข้อมูลผู้ใช้มาแสดง ซึ่งมันเวิร์คกับ https://localhost:9000/ ด้วย (Copy ไปลองกันได้ แต่เปลี่ยน LIFF ID กันด้วยนะ)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  <title>LIFF CLI Demo</title>
  <style>
    button { display: block; width: 100%; padding: 8px 0; margin: 8px auto }
    #pictureUrl { display: block; margin: 0 auto; width: 25%; display: -moz-box; display: -webkit-box; display: box; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; -moz-border-radius: 256px; -webkit-border-radius: 256px; border-radius: 256px;
    }
  </style>
</head>
<body>
  <img id="pictureUrl" width="25%" />
  <p id="displayName"></p>
  <p id="statusMessage"></p>
  <p id="language"></p>
  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <script>
    function runApp() {
      liff.getProfile().then(profile => {
        document.getElementById("displayName").innerHTML = '<b>DisplayName:</b> ' + profile.displayName;
        document.getElementById("statusMessage").innerHTML = '<b>StatusMessage:</b> ' + profile.statusMessage;
        document.getElementById("pictureUrl").src = profile.pictureUrl;
        document.getElementById("language").innerHTML = '<b>Language:</b> ' + liff.getAppLanguage();
      }).catch(err => console.error(err));
    }
    liff.init({ liffId: "1234567890-Jv5mrQdE" }, () => {
      if (liff.isLoggedIn()) {
        runApp()
      } else {
        liff.login();
      }
    }, err => console.error(err.code, error.message));
  </script>
</body>
</html>

4.3 Debug ตัว LIFF app ด้วย LIFF Inspector

ต่อยอดจากคำสั่ง serve ในข้อก่อนหน้า สำหรับใครที่ใช้ LIFF Inspector เพื่อ debug ตัว LIFF app ผ่าน ChromeDevTools เราสามารถเพิ่ม option --inspect เข้าไปกับคำสั่ง serve ตามตัวอย่างด้านล่างนี้

liff-cli serve \
   --liff-id 1234567890-AbcdEfgh \
   --url http://localhost:3000/ \
   --inspect

# Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://localhost:9000/?li.origin=wss%3A%2F%2Flocalhost%3A9222
Debugger listening on wss://192.168.1.6:9222

โดยเมื่อเราเปิด LIFF URL ตัว Terminal ก็จะพ่น DevTools URL ที่ขึ้นต้นด้วย devtools://devtools/ ออกมาตามตัวอย่างด้านล่างนี้

connection from client, id: 1234567890-AbcdEfgh
DevTools URL: devtools://devtools/bundled/inspector.html?wss=localhost:9222/?hi_id=1234567890-AbcdEfgh

ซึ่งเราสามารถนำ DevTools URL ที่ได้ไปเปิดผ่าน Google Chrome เพื่อ debug ตัว LIFF app ได้

สรุป

นอกจากที่ LIFF CLI จะช่วยให้นักพัฒนาสามารถ Create, Update, List และ Delete ตัว LIFF app ได้แล้ว การมาของคำสั่ง serve ใน LIFF CLI v0.2.0 ที่สามารถ run ตัว LIFF app ใน local ได้ ก็ถือเป็น killer feature ที่เหล่าพัฒนารอคอย เพราะการพัฒนา LIFF app จากนี้ไป จะสะดวกและรวดเร็วขึ้นอย่างมากแน่นอน

หวังว่าบทความนี้จะทำให้เพื่อนๆนักพัฒนาสามารถนำ LIFF CLI ไปใช้ต่อ ให้ก่อประโยชน์กับงานสืบต่อไป แล้วพบกันใหม่บทความหน้า สวัสดีค้าาาบ