筆者撰文時，這些功能尚未完全開放；目前預計開放時會先讓付費用戶體驗（ChatGPT PLUS），在文末有附上加入等候清單的官網連結。

從展示的下拉選單中，我們可以看到多出了「Browsing、Code Interpreter、Plugins」他們各自能完成什麼任務呢？讓我們看下去！

大綱

▋ 在ChatGPT產圖、線上購物、發送twitter貼文
▋ 連到網路驗證自己的內容是否正確
▋ 分析Excel內容，產出驚人圖表
▋ 結語：如果想用 AI 做產品請三思

在 ChatGPT 產圖、線上購物、發送 twitter 貼文

這邊用到的是「Plugins」中「DALL.E APP」的功能。

上圖講者輸入「Suggest a nice post-TED meal, and draw a picture（推薦一頓TED演講後的餐點，並將他畫出來）」後，ChatGPT 先用文字建議。

最後直接產生一幅美味晚餐的圖片

如果你想知道這個美麗晚餐的背後是什麼 Prompt，ChatGPT 也可以直接秀出 DALL.E 的 Prompt。

上面的功能已經很驚人了對吧？接下來的這個更猛！

講者選用了「Instacart（美國電商）、Zapier（連結各式應用的自動化工具）」這兩個 Plugins，然後要求 ChatGPT 將他之前建議好吃的東西列一個購物清單，然後在推特上發布給所有 TED 觀眾。

STEP 1：ChatGPT 先做檢索

STEP 2：然後產生對應的購物連結

STEP 3：進入網站後是已經選好物品的購物車

STEP 4：隨後透過 Zapier 這個外掛導向到tweet發文前的畫面

STEP 5：然後就真的發文成功了！

在上面這段演示中，我們看到了「產生圖片、購買商品、發布貼文」等操作都幾乎靠自動化實現了！

連到網路驗證自己的內容是否正確

過去 ChatGPT 最為人詬病的問題之一就是會胡說八道，針對這個問題，講者也用「詢問兩篇部落格時間的間隔」直接示範給大家看。

針對這個問題，ChatGPT 回答前者於 2017 / 04 / 24 發佈，而後者在 2017 / 06 / 27 發佈，因此兩者大約相隔兩個月。

不過這真的是事實嗎？講者將 Model切換到「Browsing」，然後把一樣的問題丟給ChatGPT。

這個模式下的 ChatGPT 沒有直接回應，而是一步步說明自己在做的事情（跟 New Bing有點像）。

STEP 1：上網搜尋

STEP 2：依序告訴你他執行的順序

STEP 3：最終將搜尋到的內容整合出答案

在遇到事實性的問題時，原本的ChatGPT 容易給出錯誤的答案；但加上「Browsing」後，他就能給出前者於 2017 / 04 / 6 發佈，而後者在 2017 / 06 / 13 發佈，因此兩者相隔兩個月又ㄧ週的正確結論。

儘管驗證事實這塊人類也能做，但真的沒有任何生產力且繁複，ChatGPT能幫我們完成這個任務真的幫到很大的忙。

分析 Excel 內容，產出驚人圖表

講者秀出了一個彙過去 30 年人工智慧論文的 Excel 表（約 16.7萬篇），然後告訴我們 ChatGPT 如何分析這些數據。

這次他選用「Code Interpreter（程式直譯）」的 Model，並上傳剛剛的 Excel 表。

然後 ChatGPT 就能夠很神的分析出這個 Excel 每個欄位所代表的意義，然後詢問使用者要對數據做分析或是視覺化。

這時講者要求ChatGPT給一些「探索性的圖（exploratory graph）」，面對這種模糊的需求，聰明的ChatGPT 給他3種呈現方式：

1. 直方圖：顯示每篇論文的作者數量，讓我們了解AI研究的典型團隊規模。

2. 折線圖：顯示每年論文發表的總數，以此展示AI研究的趨勢。

3. 論文標題的單字雲：顯示AI研究標題中最常出現的單字。

此時講者發現折線圖中 2023 年的數據有問題，AI 應該指數成長卻被腰斬；所以向 ChatGPT 說明2023年尚未過完，可以重新做一個公平的預測嗎？

最後 ChatGPT 也不負眾望的向大家展示了新的繪製成果，並且在圖片上標明2023 年的論文發表總數是預測的。

如果你有興趣，也可以看 ChatGPT 是如何用 Python 將這些數據分析、繪製出來的。

想搶先體驗新功能的朋友可以加入等候清單喔：https://openai.com/waitlist/plugins

結語：如果想用 AI 做產品請三思

從 Demo 中可以看到這次 ChatGPT 的改版是非常有感的，跟過去只能文字輸入/輸出的型態相比，他多了非常多應用的可能性。

現在市面上有許多新興的產品是依附在 OpenAI 的 API 上面的，但如果哪天OpenAI 突然跑出來自己做，那對產品無疑是一個毀滅性打擊。

如果是針對 OpenAI 缺點做的產品就更危險了，你都能補足這個缺點了，OpenAI 官方會沒想到嗎？只是看他想不想去優化而已。

門檻越低的產品越容易被淘汰，在 AI 工具急速發展的年代更是如此！

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

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