应用 LINE Front-end Framework 轻松建立互动 (2)

今天我们要来研究 line-liff-v2-starter 里面写了些什麽，这对之後想开发自己的 LIFF App 是个很好的学习出发点。

文件

line-liff-v2-starter/README.md 里面就有简单的部署, 客制化, 测试等基本教学

Developing a LIFF app 文件里则是一步一步教你如何开发一个 LIFF App

A LIFF app is a web app based on HTML and JavaScript. Here, we'll explain processes specific to building LIFF apps.

line-liff-v2-starter

接着就让我们边搭配文件，边研究 Line 给的 LIFF App 范例程序码

资料夹层级

跟程序码有关的档案层级如下：

• public
  • index.html
  • liff-starter.js
  • style.css
• package.json
• index.js

package.json

package.json 的内容如下：

{
  "name": "line-liff-v2-starter",
  "version": "1.0.0",
  "description": "This is a small web application that demonstrates the basic functionality of the [LINE Front-end Framework (LIFF)](https://developers.line.biz/en/docs/liff/overview/).",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/line/line-liff-v2-starter"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "engines": {
    "node": "10.x"
  }
}

可以看到 Entry Point 为 index.js
所以接着就来看看 index.js 里面做了什麽事

index.js

index.js 的内容如下：

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const myLiffId = process.env.MY_LIFF_ID;

app.use(express.static('public'));

app.get('/send-id', function(req, res) {
    res.json({id: myLiffId});
});

app.listen(port, () => console.log(`app listening on port ${port}!`));

可以看到里面建立了一个 express application object

• 使用 express.static('public') 提供 /public 底下的静态档案服务
• 设置一条 method 为 get 的 route /send-id，并回应环境变数 MY_LIFF_ID
• 监听 process.env.PORT || 5000 的 port，并 log 在 console

最後一点在 Heroku 上也可以验证。在 line-liff-test-20210913 app 介面点击右上角的 More > View Logs

右上角的分类再选择 web，可以看到的确有一行由 app 写下的 console log

express

想了解什麽是 express 可参考以下教学文件：
Express web framework (Node.js/JavaScript)

Express 是一个流行的web框架，使用JavsScript实现，执行在node.js环境上。本系列解释Express的优点、如何设定开发环境、完成常见的web开发和布署。

以上～所以我们可以知道，当使用者 request https://line-liff-test-20210913.herokuapp.com/ 时，其实是经由 express.static 的服务回应了 public/index.html 的内容。明天再来继续搭配 LIFF 的文件研究 public 底下的三只档案分别做了什麽事情～