在這篇文章中，我們要來設定 Line 的 webhook，並測試 ChatGPT 寫的程式是否可以正確執行；並告訴讀者遇到問題時，我們可以從哪些面向來思考、解決；最後於文末給想用 ChatGPT 寫程式、學程式的朋友一些建議。

大綱

▋ 在 local 建立一個可以讓 Line 訪問的 HTTP server（ngrok）
▋ 設定 Line 的 webhook
▋ 測試功能＆痛苦的 Debug 之路
▋ 結論：給想用 ChatGPT 寫程式、學程式的朋友一些建議

在 local 建立一個可以讓 Line 訪問的 HTTP server（ngrok）

上一篇文章中，專案是在本地啟動的，因此他的網址是 http://localhost:3000 ，而 Line 的 webhook 是無法接受本地網址的。

為了方便 Debug，我這邊選擇在 local 建立一個可以讓 Line 訪問的 HTTP server，具體的方案我們來詢問一下 ChatGPT。

這邊我選用「ngrok」的方案，並在指定「作業系統」的狀態下，請 ChatGPT 告訴我接下來該怎麼做。

接下來我們就按造建議的步驟來實作看看。

SETP 1：先到 ngrok 的官網下載 ngrok 的 Mac 版本： https://ngrok.com/download 。

提醒讀者，要先確認自己 mac 的處理器是 Intel 還是 Apple Silicon 喔！

SETP 2：解壓縮下載的檔案，並將 ngrok 放入您的 PATH 中 (例如: /usr/local/bin)

解壓縮檔案後，你會得到一個 ngrok 的值行檔，其實你就算放在 download 的資料夾也能執行，不過放到 bin 的資料夾下可以在任何位置執行。

下面說明一下 mac 進入 bin 資料夾的步驟：「到 mac 桌面」or「點擊 Finder」➝ 「前往」➝ 「前往資料夾」➝ 輸入「/usr/local/bin」➝ 把「ngrok 值行檔」丟進去。

SETP 3：打開終端機，輸入 ngrok http 3000 (3000 是您的本地環境的 HTTP Server 的通訊埠)，啟動 ngrok。

SETP 4：ngrok 將會顯示一個可供外部訪問的 URL（上圖紅框處 https://xxxx.ngrok.io），您可以在 LINE 的 Developer Console 中設定 webhook 的 URL。

小提醒：Session 2 小時後會過期，到時再重新執行一次 ngrok http 3000 就好了，然後別忘記把新的 URL 設定到 Line 的 webhook。

設定 Line 的 webhook

因為設定步驟很簡單，我就不特別問 ChatGPT 了。

SETP 1：在 Messaging API 的 WebhookURL 貼上剛剛的的網址，並於後面加上 /webhook（那是我們程式設定的 API 路徑）。

SETP 2：按下「Verify」後得到 Success 就代表有成功聯通嚕！

SETP 3：在 Messaging API 取得 Linebot 的 LineID，並把他加入好友。

加入好友後，他會跟你打招呼。

但當你很興奮的傳訊息給他時，他的回覆語氣一點都不像是 ChatGPT。

雖然到這裡我們已經知道出事了，但還是先把下面的步驟做完吧。

SETP 4：在 Messaging API 關閉自動回覆（Auto-reply messages）與打招呼（Greeting messages）。

因為自動回覆（Auto-reply messages）會干擾 Debug 所以建議關閉，至於打招呼（Greeting messages）要不要關閉就看你自己。

測試功能＆痛苦的 Debug 之路

上面 Webhook URL 的 Verify 得到 200 只是證明這條路有打通，如果把畫面切到 ngrok，會發現許多 500 的錯誤訊息。

上一篇 ChatGPT 給的程式有哪些錯誤？

回到程式，你會發現有「TypeError: Cannot read properties of undefined (reading ‘events’)」的錯誤。

如果你把這個問題拿去詢問 ChatGPT，會收到一大堆鬼打牆的回覆。

這邊筆者就直接告訴大家為什麼會有各式各樣的錯誤：

• 「@line/bot-sdk」套件使用方式錯誤
• 「openai」套件使用方式錯誤

你沒看錯，要實作的兩個套件，ChatGPT 的使用方式都是有問題的。

讓 ChatGPT 擔任程式專家，改用英文詢問

為了避免冤枉好人，我這次改成用英文詢問，並讓 ChatGPT 擔任程式專家來撰寫，這是他給出的新回覆：

const line = require('@line/bot-sdk');
const express = require('express');
const openai = require('openai');

openai.apiKey = "YOUR_API_KEY";

const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

const client = new line.Client(config);

const app = express();

app.post('/webhook', line.middleware(config), (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 openai
    .engines
    .completions
    .create({
      prompt: event.message.text,
      engine: "text-davinci-002",
      maxTokens: 100
    })
    .then((completions) => {
      const message = completions.choices[0].text;
      return client.replyMessage(event.replyToken, {
        type: 'text',
        text: message
      });
    });
}

app.listen(3000);
console.log('Linebot is running on 3000 port');

果然專家就是比較厲害，錯誤訊息變得不一樣了！

但這個錯誤並沒有辦法靠詢問 ChatGPT 解決（他會再次鬼打牆）。

好吧…最後還是得靠自己處理

因為我看錯誤的源頭出在 openai 套件，所以我就去官網研究了一下：https://www.npmjs.com/package/openai

先給大家看一下官網給的範例程式：

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const completion = await openai.createCompletion({
  model: "text-davinci-002",
  prompt: "Hello world",
});
console.log(completion.data.choices[0].text);

如果把他跟 ChatGPT 給的程式做比對，會發現 ChatGPT 的使用方式根本是錯的，下面筆者就直接把修改好的程式放上來，調整過的部分有在旁邊用註解說明：

require('dotenv').config(); // 皆採用 .env 讀取
const line = require('@line/bot-sdk');
const express = require('express');
const { Configuration, OpenAIApi } = require("openai"); // 他套件使用方式錯誤，我直接改掉
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

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

const client = new line.Client(config);

const app = express();

app.post('/webhook', line.middleware(config), (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 openai.createCompletion({ // 方法用錯修正
    prompt: event.message.text,
    model: "text-davinci-003", // 使用 model 而非 engine
    max_tokens: 1000 // 應用 max_tokens 而非 maxTokens
  }).then((completions) => {
    // 少了 data 這層結構，並要加上 trim() 去除空白
    const message = completions.data.choices[0].text.trim();
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: message
    });
  });
}

app.listen(3000);
console.log('Linebot is running on 3000 port');

最後再給大家看看順利溝通時的畫面：

看到成功溝通的畫面時，筆者真的感動到快哭了，這是個能與你溝通的 AI 機器人喔！

不過操作下來我覺得回答穩定度沒有比 ChatGPT 高，有時會出現一些奇怪的程式碼，讀者有興趣可以再做優化，本篇文章僅為參考範例。

結論：給想用 ChatGPT 寫程式、學程式的朋友一些建議

可能是我運氣比較好，剛好測試到 ChatGPT 的許多 Bug，下面筆者彙整了一些遇到的「坑」給讀者參考：

1. ChatGPT 沒有最新資料：筆者在使用 ChatGPT 時，他的資料是在 2021 年截止的，也就是說他不認識新推出的套件，當套件有更新時他也無法第一時間知道。
2. 有些問題 ChatGPT 真的回答不出來：如果是程式邏輯問題，ChatGPT 有機會給出解答，但如果是套件相關問題，可能真的給不出解答；你一直問他也只是鬼打牆。
3. 似是而非的答案最可怕：ChatGPT 在上一篇（中文）跟這一篇（英文）給的答案，如果只看「邏輯」，那是正確的；但實際跑起來卻有一堆問題，不去看官方網站查證真的無法解決。

會有上述問題，我覺得是因為 ChatGPT 還在學習、以及資料不夠即時；相信在未來推出新版時，能給出更正確的解答。

至於如何透過 ChatGPT 學程式，我的建議如下：

1. 要學習的程式語言、工具要有一定的年紀。
2. 使用套件遇到錯誤時，先去官網看說明文件。
3. 如果完全沒基礎，強烈建議先從書籍、課程開始學習。

目前筆者把 ChatGPT 的定位放在「輔助」，適合給你方向、關鍵字、優化的建議；像是這次使用下來，雖然程式有些許錯誤，但是在「步驟、關鍵字、指令」方面的建議都是很不錯的。

未來筆者會出一系列使用 ChatGPT、openAI 的文章，如果你對這個議題感興趣，可以持續關注我的文章！

想將 AI 導入自己的職場與生活嗎？歡迎購買筆者出版的新書，幫助您在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！

參考資料：

1. 用英文溝通 ChatGPT 得到的回覆：Github
2. 筆者自己優化得到的解答：Github

大綱

▋ 詢問 ChatGPT 實作的步驟
▋ 前置作業 1：申請 OpenAI API key
▋ 前置作業 2：取得 Line 的 Channel access token 和 Channel secret
▋ 建立 OpenAI-Linebot 的 Node.js 專案
▋ 小結：他還還努力學習中

詢問 ChatGPT 實作的步驟

目前看起來，ChatGPT 回應給我的實作步驟可行性很高，而且每個重點都提示到了。

前置作業 1：申請 OpenAI API key

SETP 1：進入 OpenAI 官網：https://beta.openai.com/

SETP 2：註冊 & 登入 OpenAI 帳號，進入首頁。

SETP 3：點擊右上角圖像，選擇「View API keys」。

SETP 4：點擊「Create new secret key」。

SETP 5：產生出來的 API Key 請保存好，之後你都不會再看到他了。

前置作業 2：取得 Line 的 Channel access token 和 Channel secret

因為步驟比較複雜，所以我有詢問一下 ChatGPT ：

SETP 1：登入開發者平台，網址：https://developers.line.biz/zh-hant/ 。

SETP 2：建立一個 provider，名字自取。

SETP 3：選擇「Create a Message API channel」，我們要做一個聊天機器人。

接下來填寫一些必填資訊：

• Company or owner’s country or region：Taiwan
• Channel name：ChatGPT bot（自由填寫）
• Channel description：ChatGPT bot（自由填寫）
• Category：公眾人物、專業人士（自由填寫）
• Subcategory：IT、電腦（自由填寫）

SETP 4：最下面兩個同意事項要打勾才能按下「Create」按鈕。

最後會讓你確認一下填寫的細節，還有一些規則提醒。

SETP 5：在 Basic settings 取得 Channel secret（這邊 ChatGPT 說錯成 General settings，不過大體意思能理解）。

SETP 6：在 Messaging API 取得 Channel access token。

注意：
Channel access token 是用來驗證和保護機器人與 LINE Platform 之間的通訊，因此請勿將它公開給任何人。
Channel secret 則是用來驗證 Webhook 事件的簽章。

建立 OpenAI-Linebot 的 Node.js 專案

下面的步驟，我是透過詢問 ChatGPT 所得到的：「接下來要如何建立一個 Node.js 專案，並安裝"openai" 和 “@line/bot-sdk” 等套件呢？有相關指令與程式範例嗎？」

SETP 1：建立一個新的專案目錄，並在終端機中進入該目錄。

mkdir myproject
cd myproject

SETP 2：建立一個 package.json 檔案，並設定專案的相關資訊。

npm init

SETP 3：安裝 “openai”、"@line/bot-sdk"、“express"套件（這邊原本是建議裝 line-bot-sdk 這個套件，但因為無法使用，所以請 ChatGPT 重選了一次）。

npm install openai @line/bot-sdk express

注意！在使用上面的指令前，需要先安裝 Node.js 和 npm。

SETP 4：建立一個新的檔案放程式碼。

touch index.js

SETP 5：在 index.js 中引用所需的套件，並設定 OpenAI 的 API key、Linebot 的 channelAccessToken、channelSecret。

const openai = require('openai');
const line = require('@line/bot-sdk');

openai.apiKey = "YOUR_OPENAI_API_KEY";

const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

const client = new line.Client(config);

SETP 6：在 index.js 中建立一個 HTTP server 並設定 line 的 webhook。

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

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

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

SETP 7：在 index.js 中建立一個事件處理函式，當使用者發送訊息時，使用 OpenAI API 將訊息傳到指定的語言模型處理，並將回應的結果傳回給使用者。

function handleEvent (event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  return openai.Completion.create({
    engine: "text-davinci-002",
    prompt: event.message.text,
  }).then(response => {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: response.choices[0].text
    });
  });
}

SETP 8：最後啟動伺服器 node index.js

喔喔喔！居然沒有報錯！！！
之後可以請 ChatGPT 幫我完成 Side Project 了嗎？

小提醒：程式能啟動跟能順利執行是兩件事。

小結：他還在努力學習中

其實過程並沒有想像中順利，上面放的步驟已經是多次優化後得到的答案，下面筆者放幾個請 ChatGPT 優化的片段。

錯誤 1： 我按造步驟執行後，會噴錯誤：「TypeError: line.Client is not a constructor」

錯誤 2：我調整後，會噴錯誤：「TypeError: Cannot read properties of undefined (reading ‘validateSignature’)」

其實還有其他錯誤，只是這兩個最嚴重，所以筆者單獨拿出來說一下。

對初學者而言而言，他們可能會覺得是程式哪裡寫錯了，只要修改一下就好；但實際上，真正的問題是 ChatGPT 一開始推薦安裝的套件「line-bot-sdk」就是有問題的。

這邊放個截圖給大家看一下，這款套件已經有 7 年多沒有更新，而且幾乎沒有下載量！如果是缺乏經驗的開發者，應該會在這裡卡很久。

後來我請他重新推薦，ChatGPT 才給了比較合理的套件，最後我請他改用「@line/bot-sdk」重寫一遍才得到上面的結果。

不知道這篇文章會不會勸退一些使用者？

其實 ChatGPT 的問題並不只這些，下一篇文章我會帶大家把後面「啟動 server 並在 Line 開發者平台設定 webhook 的網址、測試機器人是否能正確回應使用者的訊息」等步驟走完，希望筆者踩過的坑能讓讀者日後使用時少走點彎路。

本次 ChatGPT 回應的完整程式請參考筆者的 Github

未來筆者會出一系列使用 ChatGPT、openAI 的文章，如果你對這個議題感興趣，可以持續關注我的文章！

想將 AI 導入自己的職場與生活嗎？歡迎購買筆者出版的新書，幫助您在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！