快速建置 Line LIFF App

Posted at 2024-04-22 # Front-end

了解 Line LIFF

什麼是 Line LIFF？

Line LIFF 全名是 Line Front-end Framework，是由 Line 平台推出的一種前端框架。你可以想像 LIFF App 是一個完全獨立的網站，只是我們可以透過 Line 推出的 JavaScript SDK 與 Line 的用戶進行互動。

line-liff-demo

透過 Line LIFF Browser 開啟。

為什麼我們要使用 LIFF？

透過 Line LIFF 提供的 SDK，我們可以做到以下幾點：

取得 Line 用戶資訊基本資訊。包含 unique ID、顯示名稱、大頭照等基本資訊。
取得 Line 用戶裝置資訊。可以判斷使用者是不是使用 Line 開啟這個裝置，進而確認他的登入狀態。
當我們可以取得登入狀態、Line 使用者資訊，自然可以讓使用者省略登入步驟。

實作 Line LIFF APP

導入 Line LIFF 到專案中

你可以引入 CDN 、或是透過 NPM 引入 LIFF SDK。

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.22.3/sdk.js"></script>

$ npm install --save @line/liff

如果你是從 0 開始建置 LIFF APP，可以透過以下指令開啟一個新的專案。我個人會偏好這個方法，感覺最快。

建立 LIFF App 專案。

$ npx @line/create-liff-app

選擇你需要的框架技術：

? Which template do you want to use? (Use arrow keys)
❯ vanilla
  react
  vue
  svelte
  nextjs
  nuxtjs

確認你要使用的語言：

? JavaScript or TypeScript? (Use arrow keys)
❯ JavaScript
  TypeScript

輸入 LIFF ID，這邊可以先跳過，之後再更改環境變數：

? Please enter your LIFF ID:
Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ (liffId)

選擇你的套件管理工具：

? Which package manager do you want to use? (Use arrow keys)
❯ yarn
npm

完成！

yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning my-app@0.0.0: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 25.06s.

Done! Now run:

  cd my-app
  yarn dev

部署專案

我們前面有提到，LIFF App 是一個完全獨立的網站，所以我們需要先部署在公開的站點上，我這邊推薦 Zeabur，這個服務團隊是來自台灣的新創公司，DC 24 小時客服，文件都是繁體中文，真的是痛哭流涕。之前使用過 heroku，目前也使用過 netlify、render，他們都很方便，但 Zeabur 是實際意義上的「一鍵部署」。

登入之後點擊「創建專案」以及「部署新服務」。