LINE Mini App 泰國：開發指南與商業機會

微信小程式（中國）                    LINE Mini App（泰國/台灣）
- 400萬+小程式                       - 已在泰國和台灣上線
- 月活9億+用戶                       - 僅泰國就有5,600萬用戶
- 成熟的支付生態                     - LINE Pay + 銀行整合
- 涵蓋所有產業                       - 初期聚焦：餐飲產業
- 深度社群電商                       - 不斷成長的電商能力

用戶掃描QR碼 / 點擊連結
       |
       v
LINE開啟Mini App容器
       |
       v
Mini App載入（基於Web）
       |
       +---> LINE Login（自動驗證）
       |       |---> 用戶資料
       |       |---> 權限
       |
       +---> 應用邏輯（後端）
       |       |---> 菜單 / 商品
       |       |---> 訂單 / 預約
       |       |---> 自訂功能
       |
       +---> LINE API
       |       |---> Messaging API
       |       |---> LINE Pay
       |       |---> Share Target Picker
       |
       +---> 推送到LINE聊天
               |---> 收據
               |---> 訂單更新
               |---> 後續訊息

// app/mini-app/restaurant/page.tsx
"use client";

import { useEffect, useState } from "react";
import liff from "@line/liff";

interface MenuItem {
  id: string;
  name: string;
  price: number;
  image: string;
  category: string;
}

export default function RestaurantMiniApp() {
  const [profile, setProfile] = useState<liff.Profile | null>(null);
  const [menu, setMenu] = useState<MenuItem[]>([]);
  const [cart, setCart] = useState<Map<string, number>>(new Map());

  useEffect(() => {
    liff.init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! }).then(async () => {
      if (liff.isLoggedIn()) {
        const userProfile = await liff.getProfile();
        setProfile(userProfile);
      } else {
        liff.login();
      }

      const res = await fetch("/api/mini-app/menu?restaurant=xxx");
      const data = await res.json();
      setMenu(data.items);
    });
  }, []);

  async function submitOrder() {
    const items = Array.from(cart.entries()).map(([id, qty]) => ({
      menuItemId: id,
      quantity: qty,
    }));

    const response = await fetch("/api/mini-app/order", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId: profile?.userId, items }),
    });

    const order = await response.json();

    if (liff.isApiAvailable("sendMessages")) {
      await liff.sendMessages([{
        type: "text",
        text: `訂單 #${order.id} 已完成！總計: ${order.total} THB`,
      }]);
    }

    liff.closeWindow();
  }

  return (
    <div className="min-h-screen bg-white">
      <header className="sticky top-0 bg-[#06C755] text-white p-4">
        <h1 className="text-lg font-bold">餐廳菜單</h1>
        <p className="text-sm opacity-90">
          歡迎，{profile?.displayName || "顧客"}
        </p>
      </header>
      {/* 菜單項目和購物車UI */}
    </div>
  );
}

const miniAppStack = {
  framework: "Next.js 16 (App Router)",
  ui: "TailwindCSS + shadcn/ui",
  liff: "@line/liff v2.24+",
  payments: "LINE Pay API v3",
  backend: "Next.js API Routes",
  database: "PostgreSQL + Prisma ORM",
  hosting: "Vercel (Edge最佳化)",
  analytics: "LINE Analytics + 自訂事件",
};

// services/mini-app-ai-assistant.ts
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

async function aiOrderAssistant(
  message: string,
  context: MiniAppContext
): Promise<{ reply: string; action?: OrderAction }> {
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro" });

  const prompt = `你是餐廳LINE Mini App內的AI助理。
用戶: ${message}
可用菜單: ${JSON.stringify(context.menuItems?.slice(0, 20))}
歷史訂單: ${JSON.stringify(context.orderHistory?.slice(0, 5))}

友善地回覆。如果用戶想點餐，回傳JSON action。
用與用戶相同的語言回覆。`;

  const result = await model.generateContent(prompt);
  const text = result.response.text();

  const actionMatch = text.match(/\{.*"action".*\}/s);
  const action = actionMatch ? JSON.parse(actionMatch[0]) : undefined;

  return { reply: text.replace(/\{.*\}/s, "").trim(), action };
}