พัฒนา LIFF App: สอน LINE Front-end Framework ด้วย React & Next.js

npx create-next-app@latest my-liff-app --typescript
cd my-liff-app
npm install @line/liff

// lib/liff.ts
import liff from '@line/liff';

const LIFF_ID = process.env.NEXT_PUBLIC_LIFF_ID!;

export async function initLiff() {
  try {
    await liff.init({ liffId: LIFF_ID });
    console.log('LIFF initialized successfully');
    return true;
  } catch (error) {
    console.error('LIFF initialization failed:', error);
    return false;
  }
}

export function isLoggedIn() {
  return liff.isLoggedIn();
}

export function login() {
  liff.login();
}

export function logout() {
  liff.logout();
}

export async function getProfile() {
  if (!liff.isLoggedIn()) return null;
  return liff.getProfile();
}

export { liff };

// components/UserProfile.tsx
'use client';

import { useLiff } from './LiffProvider';
import Image from 'next/image';

export function UserProfile() {
  const { isReady, isLoggedIn, profile, login, logout } = useLiff();

  if (!isReady) {
    return <div>กำลังโหลด...</div>;
  }

  if (!isLoggedIn) {
    return (
      <button onClick={login} className="btn-primary">
        เข้าสู่ระบบด้วย LINE
      </button>
    );
  }

  return (
    <div className="flex items-center gap-4">
      {profile?.pictureUrl && (
        <Image
          src={profile.pictureUrl}
          alt={profile.displayName}
          width={48}
          height={48}
          className="rounded-full"
        />
      )}
      <div>
        <p className="font-semibold">{profile?.displayName}</p>
        <button onClick={logout} className="text-sm text-gray-500">
          ออกจากระบบ
        </button>
      </div>
    </div>
  );
}

// ส่งข้อความไปยังแชทปัจจุบัน
async function sendMessage(text: string) {
  if (!liff.isInClient()) {
    alert('ฟีเจอร์นี้ใช้งานได้เฉพาะภายใน LINE');
    return;
  }

  await liff.sendMessages([
    {
      type: 'text',
      text: text
    }
  ]);
}

async function shareToFriends() {
  if (!liff.isApiAvailable('shareTargetPicker')) {
    alert('ฟีเจอร์แชร์ไม่พร้อมใช้งาน');
    return;
  }

  const result = await liff.shareTargetPicker([
    {
      type: 'flex',
      altText: 'ดูสินค้านี้สิ!',
      contents: {
        type: 'bubble',
        hero: {
          type: 'image',
          url: 'https://example.com/product.jpg',
          size: 'full',
          aspectRatio: '20:13'
        },
        body: {
          type: 'box',
          layout: 'vertical',
          contents: [
            { type: 'text', text: 'สินค้าสุดเจ๋ง', weight: 'bold' },
            { type: 'text', text: '฿999', color: '#06C755' }
          ]
        }
      }
    }
  ]);

  if (result) {
    console.log('แชร์สำเร็จ');
  }
}

function App() {
  const { isReady, isInClient, isLoggedIn, login } = useLiff();

  if (!isReady) return <LoadingScreen />;

  // ถ้าไม่ได้อยู่ใน LINE และไม่ได้ล็อกอิน แสดงปุ่มล็อกอิน
  if (!isInClient && !isLoggedIn) {
    return (
      <div className="text-center p-8">
        <h1>ยินดีต้อนรับ!</h1>
        <p>เข้าสู่ระบบด้วย LINE เพื่อดำเนินการต่อ</p>
        <button onClick={login} className="btn-primary">
          เข้าสู่ระบบด้วย LINE
        </button>
      </div>
    );
  }

  return <MainApp />;
}

/* Compact: ~50% ของความสูงหน้าจอ */
/* Tall: ~75% ของความสูงหน้าจอ */
/* Full: 100% ของหน้าจอ */

.liff-container {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height */
}

/* Safe area สำหรับอุปกรณ์ที่มี notch */
.liff-content {
  padding-bottom: env(safe-area-inset-bottom);
}

// รูปแบบ LIFF URL: https://liff.line.me/{liffId}/{path}
const productUrl = `https://liff.line.me/${LIFF_ID}/product/${productId}`;

# ติดตั้ง Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

NEXT_PUBLIC_LIFF_ID=your-liff-id