昨天我們已經建立好 Provider、官方帳號，並啟用了 Messaging API。今天就是最令人興奮的一步：把伺服器和 LINE 串起來，實作第一個 Echo Bot！只要使用者在 LINE 傳訊息給我們，伺服器就會把相同訊息回覆回去，這是所有 LINE Bot 開發的基礎。

回顧 Day 6 的成果!

• 已經有了 Channel ID、Secret。

• Webhook 概念：LINE 會把事件丟到我們的伺服器。

用 ngrok 連接本地伺服器

為什麼要用 ngrok？因為我們的 Express 伺服器跑在 localhost:3000，外部（LINE）無法直接存取。ngrok 能把本地伺服器暫時公開成一個 HTTPS 網址。

1. 首先要進行到 ngrok官網 註冊，以便後續安裝時要做登入驗證。
   

2. 登入後，照著指示安裝 ngrok：官方下載。
   

3. 開啟 ngrok 後，增加驗證 Token 至 config

   ngrok config add-authtoken <你的Token>
   

   

4. 啟動：

   ngrok http http://localhost:3000 (也就是我們伺服器的位址)
   

5. 會得到一個 https://xxxxx.ngrok-free.app 網址。

   

6. 把這個網址填到 LINE Official Account Manager → Messaging API → Webhook URL。
   

伺服器串接 LINE Webhook

在 index.js 裡，我們先加上 /webhook endpoint：

app.use(express.json());

app.post("/webhook", (req, res) => {
  console.log(req.body.events);
  res.send("OK");
});

現在如果有人傳訊息給 Bot，LINE 就會呼叫這個 Webhook，並把事件內容（JSON）丟進來。

安裝 LINE 官方 SDK

為了更方便處理訊息，安裝 LINE SDK：

npm install @line/bot-sdk

在專案根目錄建立 .env 檔案，放上：

CHANNEL_SECRET=你的ChannelSecret
CHANNEL_ACCESS_TOKEN=你的ChannelAccessToken

小提醒：
AccessToken 的設定的位置比較特別，在 LINE Official Account Manager → Messaging API → Channel access token → Channel access token (long-lived) → issue。
點擊 issue 後即會生成一個很長的 Token，要記住這個 Token 和 secret 一樣都要好好保護！

實作 Echo Bot

修改 index.js：

require('dotenv').config();
const express = require('express');
const line = require('@line/bot-sdk');

const app = express();
const port = 3000;

const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET,
};

const client = new line.Client(config);

app.use(express.json());

app.post('/webhook', (req, res) => {
  Promise.all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text,
  });
}

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

這樣，Bot 會把使用者輸入的文字，原封不動回覆回去。

測試 Echo Bot

1. 啟動伺服器：

   npm run dev
   

2. 啟動 ngrok，更新 Webhook URL。

3. 在 LINE 傳訊息給 Bot，例如輸入 Hello。

4. Bot 回覆 Hello。

成功 🎉！這就是最簡單的 Echo Bot。

開發小提醒

• Access Token 與 Secret 請放在 .env，不要硬寫在程式裡。

• ngrok 免費版網址會變動，重啟後記得更新 Webhook URL。

• Webhook 驗證：在 Official Account Manager 裡可以測試是否成功接收。

總結與重點回顧

今天我們完成了：

• 用 ngrok 把本地伺服器公開到網路。

• 實作第一個 Echo Bot。

• 學會使用 LINE SDK 處理訊息並回覆。

重點回顧：

• Webhook 是 LINE 傳遞事件的管道。

• Echo Bot 是最小可行的 LINE Bot，後續功能都會以此為基礎。

明天（Day 8），我們要開始設計「資料結構」：訂單 Schema 與使用者模型，為正式的訂單流程鋪路！