在這篇文章中，我們要來設定 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 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！

為什麼撰寫這篇文章

在上一篇文章已經介紹了Google App Script如何串接Line Message Api的應用，在這裡我將延續之前的議題，讓Line機器人變成你的小秘書

文章目標

1. 使用Google Sheet裡面Script的功能
2. 使用簡單的SQL語法抓出Google Sheet中你需要的資訊

本文章使用到的技術：

1. Google App Script : 這次著重在執行SQL語法
2. Google Sheet : 會把它當成讀取/寫入的資料庫

STEP 1: 結合Google Sheet的衍生應用

Google App Script功能很多，但能做到什麼地步就看個人的想像能力，接下來我提供的只是一條思路，如果大家想到有趣的應用歡迎下方留言

如果大家平常有使用Google sheet當成工作記錄習慣的話，你可以嘗試看看這個應用

這裡我先創建一個Google Sheet，裡面建立一些清單(你可以直接複製我的)：

接著建立Google Sheet的Script

將以下程式複製貼上，如果您願意可以自由更改，記得將上一篇取得的line token放上去喔

var ss = SpreadsheetApp.getActiveSpreadsheet()//抓取這張excel
function doPost (e) {
    var msg = JSON.parse(e.postData.contents);
    // 取出 replayToken 和發送的訊息文字
    var replyToken = msg.events[0].replyToken;
    var userMessage = msg.events[0].message.text;

    if (userMessage.indexOf("未完成") > -1) {//分析傳遞字串確認是否有“未完成”
        // QUERY(目標文件及範圍,SQL語法)
        // 尋找sheet1範圍A2到C100裡面A跟B欄位的資料且C欄位為FALSE
        var formulaToUse = '=QUERY(Sheet1!A2:C100,"SELECT A,B WHERE C = FALSE")'
        var result = query(formulaToUse)

        var userMessage = '未完成文件如下：\n';//單純的文字組成
        result.forEach(row => {
            userMessage = userMessage + row[0] + ':' + row[1] + '\n'
        })
        return sendLineMsg(userMessage, replyToken);
    }
    if (userMessage.indexOf("已完成") > -1) {//分析傳遞字串確認是否有“已完成”
        var formulaToUse = '=QUERY(Sheet1!A2:C100,"SELECT A,B WHERE C = TRUE")'
        var result = query(formulaToUse)
        var userMessage = '已完成文件如下：\n';
        result.forEach(row => {
            userMessage = userMessage + row[0] + ':' + row[1] + '\n'
        })
        return sendLineMsg(userMessage, replyToken);
    }
    if (userMessage.indexOf("功能") > -1) {//這是列出你有提供功能的列表
        return sendLineMsg('朕不給的你不能搶ㄎㄎ\n• 未完成 ：列出excel未完成清單\n• 已完成 ：列出excel已完成清單', replyToken);
    }
}
function query (request) { //執行SQL語法的地方
    var sheet = ss.insertSheet(); //先插入一張新的sheet(也許有更好的做法，如果有請告訴我ＱＱ)
    sheet.getActiveRange().setFormula(request); //執行SQL
    var result = sheet.getDataRange().getValues(); //把整張表抓下來
    ss.deleteSheet(sheet); //把sheet刪除
    Logger.log(result);//可透過log來看輸出的資訊(上方的View Logs)
    return result; //回傳結果
}
function sendLineMsg (Message, replyToken) {
    var CHANNEL_ACCESS_TOKEN = '你的 Channel access token';

    var url = 'https://api.line.me/v2/bot/message/reply';
    UrlFetchApp.fetch(url, {
        'headers': {
            'Content-Type': 'application/json; charset=UTF-8',
            'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
        },
        'method': 'post',
        'payload': JSON.stringify({
            'replyToken': replyToken,
            'messages': [{
                'type': 'text',
                'text': Message,
            }],
        }),
    });
}

原始碼：line_secretary.gs（GitHub Gist）

接下來要將這個程式發布（如果有授權相關問題必須都接受才會通過）

Project version記得每次都要選擇New(否則不會更新)，並且要允許任何人可以存取這隻app，不然你的程式無法被line機器人執行

接下來複製你這串web app URL給LINE Message Api使用

貼到webhook URL上面後按下Save

STEP 2 : 驗證串接成功

打開你的LINE就可以輸入下面三種文字，機器人就會做相對應的回覆喔！

1. 功能
2. 未完成
3. 已完成

希望大家喜歡這篇文章的應用～

為什麼撰寫這篇文章

Google App Script在以前我就非常的喜愛，也曾用他來當我專案後台登入的api來使用，搭配上Google Sheet，你簡直獲得了免費資料庫(不過他執行的速度就…反正就免費的速度XD)

但為了讓技術經過這段日子獲得更多提升，我想在原先資料庫的應用上加點料，比如說串接機器人，讓機器人對你定期提醒

本文章僅僅是示範最簡單的應用層面，實際上應該有非常多的應用等待大家去發掘

文章目標

1. 了解Google App Script，可撰寫簡單api並附帶參數
2. Google App Script串接Line機器人，讓你可以自由決定使用功能

本文章使用到的技術：

1. Google App Script : 撰寫你想要執行的邏輯
2. LINE developers : 打造自己的lINE機器人

SETP 1: 建立 LINE Messaging API

我們要先在這裡申請到line發送訊息所需要的token

除了Channel type要寫Messaging API外其他就自由發揮，反正你填錯或是漏填LINE會逼著你填完

新增完成後在Messaging Api裡面的basic id就是這個機器人在line的id

你就能在line裡面透過id找到他惹

除了id之外最重要的就是token，這個也是在Messaging Api裡面的Channel access token

另外我們不需要Greeting message、Auto response的功能

STEP 2 : 建立 Google Apps Script 接收 LINE 訊息

你可以在這裡開始你的Google App Script的故事 ，點擊Start Scripting，開啟一個Google App Script的專案吧

將以下程式複製貼上，如果您願意可以自由更改，記得將剛剛取得的line token放上去喔

function doPost (e) { //凡事使用post method皆要通過這個function 

  var CHANNEL_ACCESS_TOKEN = '你的 Channel access token';
  var msg = JSON.parse(e.postData.contents);

  // 取出 replayToken 和發送的訊息文字
  var replyToken = msg.events[0].replyToken;
  var userMessage = msg.events[0].message.text;

  if (typeof replyToken === 'undefined') {
    return;
  }

  var url = 'https://api.line.me/v2/bot/message/reply';
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text', // 格式為文字，line可以傳送多種個格式(carousel、image)，有興趣的可以自己研究
        'text': userMessage, //你目標傳遞的訊息
      }],
    }),
  });
}

原始碼：code.gs（GitHub Gist）

接下來要將這個程式發布（如果有授權相關問題必須都接受才會通過）

Project version記得每次都要選擇New(否則不會更新)，並且要允許任何人可以存取這隻app，不然你的程式無法被line機器人執行

接下來複製你這串web app URL給LINE Message Api使用

貼到webhook URL上面後按下Save

STEP 3: 驗證串接成功

打開你的LINE就可以測試功能是否正常嚕～如果你是按照我的程式碼複製貼上，那他現在應該是回聲狗的功能XD

今天的教學就到這裡了～串接Google Sheet的部分我會放到下一篇文章，歡迎有興趣的人來觀看喔！

參考資源：簡易後端實作 ( Google Apps Script )