昨天我們完成了顧客查詢訂單狀態，現在要進一步改善「下單體驗」。

聊天式流程適合 Demo，但在真實商業場景中，表單往往更直觀。

今天我們將利用 LIFF (LINE Front-end Framework) 打造一個訂單表單頁面，讓顧客可以直接在 LINE 中填寫商品、數量、取貨方式等資訊。

並加入 前端驗證，確保輸入正確再送出，為後台串接與正式營運打好基礎。

重要提醒：LIFF 建立方式已改

• 早期可以直接在 Messaging API Channel 底下新增 LIFF App，現在已經 不支援。

• 請改在 LINE Login Channel 新增 LIFF App，取得 LIFF ID。

• 建議做法：同一個 Provider 底下，同時建立：

  • Messaging API Channel（Bot 處理訂單通知與互動）。

  • LINE Login Channel（掛 LIFF，提供表單）。

• 在 LIFF 表單中取得 lineUserId → 傳到後端 → 後端再透過 Messaging API 操作 Bot。

建立 LIFF App 流程

小提醒：
我們先前就有在 LINE Developers Console 建立過 Provider 了，因此直接在其之下建立 Login Channel 即可，並且填入符合自己需求的設置選項。

1. 登入 LINE Developers Console，選擇你的 Provider。

   

2. 建立 LINE Login Channel（如果還沒有）。

   

   

   

3. 進入 LINE Login Channel → 左側選單 LIFF → 點 Add LIFF app。

   

   

   • LIFF app name：自訂。

   • Size：Full(100%) / Tall(70%) / Compact(50%)。

   • Endpoint URL：你的前端頁面（必須 HTTPS，例如 ngrok/Vercel 網址）。

     目前先隨便填

   • Scope：至少勾選 profile, openid。

4. 儲存後會得到 LIFF ID，這就是 liff.init({ liffId }) 需要填的值。

為什麼要用 LIFF 表單？

• 聊天式流程步驟多，容易出錯。

• 表單可一次填寫完整資料，體驗更接近電商網站。

• 使用者依舊留在 LINE 裡，不需跳到外部網站。

LIFF 初始化流程

1. 使用者在 Rich Menu 點選「我要下單」。

2. 打開 LIFF App，載入訂單表單頁面。

3. LIFF 透過 liff.getProfile() 取得使用者資訊（lineUserId）。

4. 使用者填寫表單，按下「送出」。

5. 前端呼叫後端 API (POST /orders) → DB 寫入。

表單設計要素（UX 規劃）

• 商品選擇：下拉式選單 / radio button。

• 數量輸入：限制必須 > 0。

• 取貨方式：自取 / 外送 / 宅配。

• 聯絡電話：格式驗證（例：/^09\\d{8}$/）。

• 送出按鈕：預設 disabled，驗證通過才啟用。

表單驗證規則

• 商品必選。

• 數量必填且需為正整數。

• 聯絡電話需符合格式（09 開頭、共 10 碼）。

• 取貨方式必填。

資料流示意

程式碼範例

LIFF 初始化

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script>
  async function main() {
    await liff.init({ liffId: "YOUR_LIFF_ID" }); // 從 LINE Login Channel 取得的 LIFF ID
    if (!liff.isLoggedIn()) {
      liff.login();
    }
    const profile = await liff.getProfile();
    document.getElementById("userId").value = profile.userId;
  }
  main();
</script>

簡單表單 (HTML + JS)

<form id="orderForm">
  <input type="hidden" id="userId" name="userId" />

  <label>商品</label>
  <select id="product">
    <option value="">請選擇</option>
    <option value="紅茶拿鐵">紅茶拿鐵</option>
    <option value="起司蛋餅">起司蛋餅</option>
  </select>

  <label>數量</label>
  <input type="number" id="quantity" min="1" />

  <label>電話</label>
  <input type="text" id="phone" placeholder="09xxxxxxxx" />

  <label>取貨方式</label>
  <select id="pickup">
    <option value="">請選擇</option>
    <option value="自取">自取</option>
    <option value="外送">外送</option>
  </select>

  <button type="submit">送出</button>
</form>

<script>
document.getElementById("orderForm").addEventListener("submit", async (e) => {
  e.preventDefault();
  const payload = {
    lineUserId: document.getElementById("userId").value,
    items: [{
      productName: document.getElementById("product").value,
      quantity: Number(document.getElementById("quantity").value),
      price: 60 // ⚠️ 實務上後端查商品表
    }],
    phone: document.getElementById("phone").value,
    pickup: document.getElementById("pickup").value
  };

  // 簡單驗證
  if (!payload.items[0].productName || payload.items[0].quantity <= 0 || !/^09\\d{8}$/.test(payload.phone) || !payload.pickup) {
    alert("請確認輸入資料是否正確");
    return;
  }

  await axios.post("/orders", payload);
  alert("訂單已送出！");
});
</script>

目前初步網頁效果

重點回顧

• 聊天式互動簡單，但 LIFF 表單更直觀、完整。

• 透過 前端驗證 確保資料正確性。

• ⚠️ 建立 LIFF 時要記得 掛在 LINE Login Channel，不要再 Messaging API Channel 找不到。

• 奠定未來擴充（商品管理、金流串接）的基礎。

今天基於內容有點雜，所以前端表單的部分，會於明天(Day 16)告訴大家該如何打起來並放到 LIFF 及 Rich Menu！

參考

Line 官方 LIFF 介紹