很多人對 LINE 的印象可能就是「傳訊息、貼圖、群組聊天」，但其實它還能做到更多。

其中一個關鍵就是 LIFF（LINE Front-end Framework） ： 一個能讓你在 LINE 聊天視窗裡打開網頁的工具。

對於我們要做的訂單系統來說，它就是讓顧客不只用文字聊天，還能在 LINE 裡直接看到訂單表單、確認畫面，甚至完成整個流程的秘密武器。

LIFF 的基本概念

• LIFF = LINE Front-end Framework

• 功能：在 LINE 聊天介面中嵌入網頁（Web App）

• 適合情境：需要輸入表單或做比較複雜操作（例如填訂單、更新會員資料）

簡單說，就是把你原本可能要做一個獨立網站的功能，直接「搬進」LINE 裡，顧客不用跳出去，也不用再額外登入。

LIFF 的角色與優勢

• 比起文字互動更直覺：不必一直輸入指令，表單或按鈕操作更方便

• 比 Web App 更貼近使用者：免輸入網址、免額外登入，因為 LIFF 會直接帶 LINE 帳號的使用者資訊

• 比 Mobile App 成本低很多：不用上架 App Store/Google Play，也不用花大錢開發獨立 App

對中小企業來說，這意味著：更低的開發成本、更低的顧客流失率。

LIFF vs 一般 Web/Mobile App

• Web App：需要顧客開瀏覽器、輸入網址，還可能要重新登入

• Mobile App：功能強大，但開發與維護成本高，還要讓顧客下載

• LIFF：在 LINE 裡直接打開，使用者體驗幾乎零阻力

💡 提醒：別忘了，LIFF 本質上就是一個 Web 前端（React、Vue、Next.js 之類都能用），只是透過 LINE 開啟。也就是說，你還是要自己把前端部署到公開的 HTTPS 網址（像 Vercel、Netlify、Heroku 都很適合），然後在 LINE Developers 平台綁定這個網址。

👉 這裡幫大家做個對照表：

LIFF 的實際應用場景

• 顧客在 LINE 裡直接填寫訂單表單（數量、地址、聯絡方式）

• 顯示購物車或付款確認畫面

• 提供會員資料更新的入口

• 配合 Rich Menu，讓顧客只要一點選單就能打開 LIFF 頁面

簡單流程圖

流程大概長這樣 👇

開發者小幫手：官方工具

如果你想快速玩玩 LIFF，不一定要馬上寫程式。LINE 官方其實提供了幾個不錯的資源：

• LIFF Playground
  一個可以線上測試的工具，讓你直接試用基本的 LIFF 功能（像是取得使用者資訊、傳送訊息），不用自己部署。

• LINE API Use Case
  收錄了各種 LIFF 應用程式的展示案例，還附上原始碼，適合參考範例或直接改造來用。

這兩個資源對新手來說超友好，可以邊玩邊理解 LIFF 的運作方式。

專案中我們會怎麼用 LIFF

等到 Day 15，我們就會實作一個「LIFF 訂單表單」，讓顧客能用圖形化介面輸入訂單資訊。
這會讓整個系統更完整，不再只有聊天互動，而是能把複雜流程放到表單裡處理。

程式碼示例

最基本的 LIFF 初始化程式碼大概長這樣：

liff.init({ liffId: "YOUR_LIFF_ID" })
  .then(() => {
    if (liff.isLoggedIn()) {
      liff.getProfile().then(profile => {
        console.log(profile.displayName);
      });
    } else {
      liff.login();
    }
  });

總結與重點回顧

今天我們聊了 LIFF，了解它是如何讓 LINE 變成一個「迷你 App 容器」。
透過 LIFF，我們能把複雜的表單或互動流程帶進 LINE，降低顧客操作門檻，對中小企業來說尤其有價值。

重點回顧

• LIFF = 在 LINE 裡打開 Web App 的框架

• 優勢：免安裝、免登入、直接沿用 LINE 帳號

• 實用資源：LIFF Playground、LINE API Use Case

• 在專案裡：我們會用 LIFF 建立訂單表單，讓下單更流暢

參考

LINE Developers
LIFF Playground
LINE API Use Case