打造 LINE AI 智能應用：OpenAI × JS 入門

0 seconds of 2 minutes, 16 secondsVolume 0%

00:00

02:16

打造 LINE AI 智能應用：OpenAI × JS 入門

教你如何使用 JavaScript 串接 OpenAI 的 API，使用 Vibe Coding 打造出專屬的 LINE AI 應用，讓你能實踐在日常生活中。我們會實作 LINE 通知秘書、檔案管理、語言學習助理等功能，不只能自動回覆訊息、管理檔案、也能輔助英文、日文等多語言的學習，讓你提升工作效率。課程包含 OpenAI 串接、Prompt、RAG 並使用 Dify、Make 來加速 AI 開發，帶你掌握 AI 開發的關鍵知識，創造自己的智能應用。

Hahow AI 學習升級

62 k 的人也在觀看

5.0

(3)

關於課程

課程包含

包含 11 章 140 單元、1 項作業

課程時長

13 時 48 分鐘

課程總人數

415 位同學

觀看限制

不限觀看次數，還會附贈完課證書

學習升級

Hahow AI 學習助教

無需額外付費

即時問答、重點整理、測驗理解，讓知識派上用場

課程內容

✨ 加碼回饋補充章節《n8n 與 LINE 整合應用：LINE 商品查詢機器人》

章節 11 帶你快速了解 n8n 與 LINE 的串接應用，並 實作一個 LINE 商品查詢機器人，可讓商家透過 LINE 查詢自己 google sheets 上的商品庫存、價錢或資訊。讓你可以把 n8n 專案整合至本課程的 LINE 當中。

關於課程開課時程說明，請見提案頁面最下方文字及課程公告。

Line 自動化流程示意：Webhook from Line Message 觸發 AI Agent，串接 OpenAI Chat Model 與 Google Sheets 查詢商品庫存，再以 Code in JavaScript 整理資料，透過 Line：Reply with token 回覆使用者；試算表列出商品編號、庫存與單價。

課程介紹生成式 AI 在客服、教育與工作領域的應用，示範於 LINE 打造語言助理與檔案助理，支援英文翻譯、即時問答、發音對話、Google 雲端儲存及群組檔案搜尋。

課程核心特色是以 JavaScript 搭配 Vibe Coding 與 AI 開發，從後端程式、Supabase 向量資料庫、伺服器部署與自動化，延伸至 Agent、RAG、Prompt、AI 記憶、MCP Server、Dify，打造 LINE 智能應用。

課程實作介紹三款 LINE AI 秘書：鯨伯1號協助資訊探索與群組檔案互動，凱西3號管理行程、建立 Google Calendar 並自動提醒，馬多夫推播英文單字與文法、協助測驗學習，還可透過 prompt 客製功能。

課程三大架構：核心技術、AI 建設、AI 應用

一、底層核心技術：打造你的 AI 基地

這部份主要幫你打好 AI 開發的基礎知識，我們主要學習 JavaScript 語法、Node.js、架站、佈署和串接 API 等知識原理。

如果完全沒學過 JS 和後端的同學，這個單元能快速幫你建立基礎。

已經學過 JavaScript 的學習路徑分為三階段：AI 開發環境建置、JS快速上手（不懂JS也不用擔心），以及 API串接知識，了解 Http 協議原理。

單元 1：AI 開發環境建置

這個單元我們會學習搭建 AI 開發環境，註冊 Firebase 服務，並建立無伺服器架構與開發環境。

Firebase 專案「wayne1894-school」控制台總覽，採用 Blaze 方案；8月14日至8月20日，Hosting 下載量24MB、Functions 呼叫次數2,016次、Firestore 讀取5,457次與寫入8次，Storage 儲存空間20.1GB。

無伺服器架構，不需在額外在去找一台伺服器來架設服務，使用 Firebase Functions (後端架站)、Hosting (前端架站) 、Storage (檔案空間)，全都可透過 Firebase 後台稿定 (既省錢又快速)。

單元 2：JavaScript 快速上手 - 打好 Vibe Coding 的基礎

沒有比用畫圖的方式來學習程式，更來的有趣了，這個單元我們會用繪圖的方式來學習 JavaScript，創造一些美麗的幾何圖形，透過繪圖的過程中讓你了解 JavaScript ，並打好 Vibe Coding 的基礎。

白色背景中央有一枚小型黑色向上三角形，作為頁面裝飾，未包含文字資訊。

▲ 上圖為生命之花圖形繪製，學員可透過 JS 程式碼來繪製圖形動畫。

成果參考：

單元 3：了解 API 串接知識 - HTTP 協議原理

現在很多成熟的服務都已經 API 化了，我們只要呼叫就能整合他們的應用 ( 例如：OpenAI API )，但呼叫 API 必需要懂一些 HTTP 協議原理，這個單元會帶你了解 HTTP 方法、Content-Type 等，我們就有能力去串接任何第三方服務 API ，並且打好 Vibe Coding 背後的基礎。

「了解HTTP協議原理」流程圖呈現瀏覽器發送 request，經路由交給後端任務並連接 DB；涵蓋 HTTP 方法、content-type、請求標頭與內容，以及 response 的 status Code、回應標頭和回應內容。

▲ 課程也會採用大量的圖解式教學方法，讓複雜的知識無所遁形。

二、AI 建設：給秘書裝上聰明大腦

這部份我們會開始學習 OpenAI，會先從 LINE 聊天機器人開始，並將機器人裝上聰明的大腦 (OpenAI) 與記憶功能，並且建立一個能整理檔案的 AI 助理。

第04至06階段依序涵蓋：LINE 機器人串接與 Messaging API、OpenAI入門及打造 LINE AI 秘書，以及 LINE 檔案助理與 Supabase向量資料庫，呈現連續的學習路徑。

單元 4：LINE 機器人串接 - Messaging API

這個章節我們會使用 LINE Developers 建立 LINE 機器人，並透過 Messaging API 與 Webhook 處理訊息接收與回應，並透過 LocalTunnel (ngrok 的替代品) 做本機開發。

Messaging API 的 Webhook 設定畫面，左側已填入 ngrok 公開網址作為 Webhook URL，右側終端機顯示 ngrok online，並將外部請求轉送至本機服務；Use webhook 已開啟。

單元 5：OpenAI 串接入門 - 打造 LINE AI 助理

這個章節我們會學習 OpenAI 的基本開發知識，從官方文件開始，申請金鑰，引入 OpenAI 的 JavaScript SDK，也會了解 AI model 類型、Role、Prompt、 Function Calling、Json 結構化輸出、控制 AI 回覆字數等知識。

「OpenAI 學習」心智圖涵蓋 AI role、AI model、OpenAI 架構說明與 Prompt，並延伸至 Function Calling、JavaScript 自主呼叫程式與查詢網頁，以及 AI 回覆調整、回覆字數和 Json 結構化輸出。

▲ 上圖為本課程 OpenAI 學習架構。

單元 6：LINE 檔案助理 - Supabase 向量資料庫

這個單元我們會學習 Supabase 資料庫，並且透過 MCP server 來控制資料表的新增與刪除，並且實作 Embedding 向量資料，最後實作出一個能自動備份檔案的 AI 助理。

Cursor 的 Tools & Integrations 顯示已啟用 Supabase MCP，左側有 .cursor/mcp.json；右側透過 list_tables 列出 public schema 的 vectors 與 demo1 資料表，並呈現欄位設定與 RLS。

▲ 引入 Supabase 的 MCP Server，可快速透過自然語言建立資料表。

示範將檔案上傳至 Firebase Storage：聊天介面回傳圖片與 PDF 的永久連結，右側 Firebase 控制台列出「開新教育科技股份有限公司.pdf」，大小 681.92 KB。

▲ 檔案助理會自動將檔案備份於雲端，提供永不過期的檔案連結。

三、AI 應用：讓秘書變成超能助手

這部份我們會研究 AI 的主要技術：如 Prompt 工程、RAG 等，並且學習 Make 和 Dify 來加速 AI 應用的開發，我們會實作 LINE 通知秘書與 AI 英文學習助手。

課程內容第07至10階段依序涵蓋：行程AI與LINE智能通知秘書、Prompt 工程、AI Agent整合 Make、RAG實戰學習 Dify，以及英文AI打造 LINE 英文學習助手AI。

單元 7：LINE 智能通知秘書：Prompt 工程

這個單元我們會來實作一個行程通知管理秘書，也是本課程登場的秘書：凱西 3 號，我們先來看看以下的展示情境。

聊天介面示範以 @ai 管理會議提醒：可建立 2025/03/14 12:00 的通知，提醒明天下午5點與老闆開會；也能建立與 @孫於晚上七點開會的通知，並刪除或編輯通知內容。

▲ 可以請 AI 幫你記錄需要通知的事項，時間到了就會主動通知你。當然也可以管理通知清單行程。

而要實作通知管理，就要學習下精準的 Prompt 提示詞，如下圖是針對通知行程的 Prompt，如此 AI 就能將資訊透過 Function Calling 去呼叫通知相關程式。

JavaScript 通知功能提示詞範例：訊息含「通知我」或「提醒我」時觸發，解析 something、time、result 欄位，並依現在時間計算明天與「30分鐘後」的通知時間。

▲ 這堂課會教你產出 Prompt 的方式，我們也會透過 AI 來幫你寫 Prompt。

單元 8：使用 Make 實作 AI Agent 代理 - LINE 合約文件自動化處理

這個單元主要會使用 Make (一種類似 n8n 的自動化工具) ，來處理 AI 的代理任務，我們會實作將通知加入 Google Calendar 、自動發送 Email 等功能，最後會開發一個 LINE 自動化合約處理，可於 LINE 上快速建立合約初版，增加合約處理效率。

聊天對話示範以自然語言建立提醒：「下星期三下午3點要開會」，系統設定通知與 Email，並提供加入 Google Meet、加入行事曆按鈕；右側流程串接 Webhooks、Router、Google Calendar、Google Drive。

▲ AI 會自動將通知內容加入行事歷與建立 Google Meet，透過右圖的 Make 的 Webhooks 節點製作。

手機聊天畫面與 Gmail 郵件展示「英文商業單字」內容，整理 10 個商務詞彙：Revenue、Profit、Investment、Market、Strategy、Stakeholder、Asset、Liability、Equity、Forecast，並附上中文對照。

▲ 可透過 LINE 向群組成員發送 Email ，Email 內容也可直接由 AI 生成。

自動化流程以 Webhooks 接收資料，經 Router 分流後，由 Google Sheets 的 Search Rows (Advanced) 搜尋資料，再用 Google Docs 範本建立文件；文件路徑為「開新雲端／教學組合約／保固合約 - 公版」，n1、n2 分別填入「改」與「名」。

示範以 Google 文件範本自動套用客戶資料，產生保固合約，並透過 LINE「合約文件自動化處理」建立合約編號 CT-2025-001234，寄送給客戶王小明。

可自動透過 make 建立合約，合約範本存於 Google Docs，並透過 google sheet 抓取客戶資料。

合約建立完成後會自動發送於 LINE 群組內，可查看和寄給客戶。

單元 9：使用 Dify 快速開發 AI 應用

這個單元我們使用 Dify 實作基本的 RAG ( 檢索增強生成 )，透過 Dify 快速建立知識庫，可快速實作一個簡易的 AI 文件檢索應用。

Dify 知識庫「test」中的 demo.txt 文件管理畫面，顯示文件已啟用並分為 10 段，原始檔案大小 2.60KB，採自訂分段規則與 500 字段落長度。

▲ 上圖為 Dify 知識庫介面，學習將資料分成不同的塊。

Dify 工作區「元資料與小幫手(可用)」的編排介面，中央可編輯 LINE 知識小幫手提示詞，設定 level 必填變數與 test 上下文，右側同步顯示除錯預覽與對話測試區。

▲ 透過 Dify 介面引用知識庫上下文開發一個 AI 應用。

單元 10：打造 LINE 智能應用 - 你的語言學習助手

這個單元我們會實作一個實用的 LINE 英文學習助手，我們會先學習建立 LINE 圖文選單，並設定相關的文字，就能於 LINE 機器人帳號下自由切換你想要的學習狀態。

LINE 官方帳號「英文AI助理」的功能選單與手機介面，整合翻譯、單字卡、句型卡、測驗、口說練習及每日推播，並示範「每日單字卡」的單字、詞性、例句與中譯。

我們會使用 LINE Flex Message 呈現資訊，就可以很美觀的顯示學習資訊，學習內容的難易度和介面設計全都可自行設計。

英文 AI 助理以聊天介面呈現兩種中級學習卡：左側「每日單字卡」介紹 friend 及例句，右側「每日句型卡」說明第二類條件句 If + 主詞 + 動詞過去式，並提供 would 句型與例句，支援聽發音與再看一張。

▲ 這堂課也會教你如何在固定時間動態推播英文資訊，例如：推播單字卡和句型卡

「英文 AI 助理」示範兩種互動學習情境：以 sunny、warm、enjoy 練習天氣造句與文法，並透過餐廳點餐對話 Would you like your water sparkling or still? 進行聽說訓練。

▲ 課程也會教你測驗和口說模式，口說模式可以模擬某個情境與 AI 直接對話，例如上圖為餐廳點餐。

句型生成函數 generateSentencePatternCard 以 level 與 category 分類提示內容，對應 CEFR A1–A2、B1、B2、C1 程度，並透過日常、商業、旅遊等主題隨機生成句型。

▲ 可於程式碼裡調整學習的難易度，彈性客製化學習的細節。

課程適合四類學習者：程式設計新手可用 JavaScript 與 vibe coding 打造 AI 應用；想探索 AI LLM 應用者可學後端、向量資料庫、Prompt、RAG；也適合想提升 LINE 使用效率者，以及 LINE 接案者。

課程教學方式：使用 Vibe Coding AI 輔助編程 ( 目前使用 Cursor )

Vibe Coding 是一種由 AI 驅動的新型軟體開發模式，創始人為 Andrej Karpathy。它允許開發者透過自然語言（即日常用語）與 AI 工具互動，提出功能需求，並由 AI 自動生成可運行的程式碼。這種模式的目標是讓開發者專注於創意和想法，而非糾結於程式碼的語法細節，從而大幅降低開發門檻並加速軟體開發流程。

上圖為檔案上傳助理使用 Vibe Coding 的實作方式，使用 Vibe Coding 可以大幅減少撰寫程式的細節，更彈性的調整 LINE AI 應用的走向，專注於實現創意想法。

打造淺顯易懂的教學、引領學生實踐創造力

講師經歷與作品

工作經歷：

開新教育科技負責人與執行長
藍猴數位探索 / 共同創辦人暨網站工程師
思華科技有限公司 / 資深前端工程師
eztravel 易遊網 / 前端工程師
yes123 人力銀行 / 後端工程師

教學經歷：

講師作品：

接案媒合平台：https://www.jannn.tw
網路記事服務：https://infometro-cc.web.app
前端動畫作品：https://bbqnotes.tw
wayne1894 教學網：https://wayne1894.com/
AI 作品：我的第一隻 line AI 貓咪

我的第一隻Line AI 貓咪 (藍猴團隊共同創作)

主標「我的第一隻AI貓咪！」搭配「在LINE上」的綠色對話框，訴求給你故事、給你愛，成為24小時陪伴你的AI貓咪；下方排列多款像素風貓咪圖案。

「我的第一隻AI貓...」聊天機器人頁面，顯示 9,823 位追蹤者與「每天陪你跟我聊天呦」的介紹；對話畫面呈現 AI 貓咪互動，以及「我的貓咪」、「遊玩方法」選單。

AI文字生成特色「驚喜不斷的故事」：每4個小時，貓咪分享冒險故事，幸運時還會帶回紀念品；AI延展連貫、高張力的貓咪劇情，紀念品包含獨角獸、鑽戒與水晶球。

「AI：GPT+RAG 對話系統」打造專屬貓咪對話：選擇命定貓咪後，聊天與貓咪教育會存入專屬小貓咪資料庫；AI 串接GPT-4，以RAG索引《貓咪行為學》，並加入GPT-4-vision與Gemini進行圖像辨識。

回覆與作業設計

課程最後會請學員創造屬於自己的 LINE AI 智能應用，並且分享成果，讓全世界看到你的創意作品，我們會在第 10 章教你作業的發想方式。

回答問題頻率：

募資期間基本上每天都會查看，歡迎同學踴躍發問
募資期過後一週一次，若有時間都會盡快回覆

作業批改相關：

批改頻率一週一次，常態為兩週一次
作業批改的方式會提供程式與流程的建議、AI 功能建議等。

【已結束】募資期早鳥限定 - Zeabur 一個月付費會員資格

將於課程開課時寄出至您結帳時填寫的 Email，若需更改請盡速聯繫 Hahow 客服協助。

若你是對這堂課程有興趣的同學，卻又有許多疑問，歡迎在下方的課前問答區留言，讓我知道你的想法！

老師將會盡力解答，期待同學加入這堂課程，一起學習！

哪些人適合這堂課？

1、想從頭學習 AI，打造 LINE 創意應用的人 - 程式新手也 OK，從零開始打造自己的 LINE AI 應用！ 2、想透過 AI，規劃多項應用以提升 LINE 使用效率的人 - 打造通知秘書、檔案管理應用、語言學習助理，實踐智慧生活 3、工程師或職場工作者想斜槓接案，進一步開發 LINE 應用程式的人 - 學習 OpenAI 串接、Prompt、RAG 並使用 Dify、Make 來加速 AI 開發，開發多元應用

你可以學到

1、了解 AI 開發的關鍵知識：AI Agent、Prompt 工程、RAG、記憶 2、了解 Node.js 與 OpenAI 串接應用 3、了解開發 LINE 應用 4、了解 Firebase Functions (Cloud Run) 無伺服器架構與排程推播程式 5、了解 Supabase 向量資料庫 6、使用 Dify、Make 快速打造 AI 應用

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

1、串接 OpenAI 需購買 OpenAI token (初始金額 5 美元，後續依使用量付費) - 課程執行期間約花費不到 5 美元 2、註冊 Firebase Functions 需升級付費方案 (依使用量付費) - 課程執行期間約花費不到 5 美元 3、使用 cursor 編輯程式 - 免費配額使用完需升級付費方案 (每月 20 美金) - cursor 非必要付費，講師會提供程式碼讓學員執行。 3、使用 Supabase 儲存資料 (使用免費方案) 4、使用 Dify 開發 AI 應用 - 使用 Zeabur 架設 Dify (每月提供 5 美金的免費額度) 5、使用 Make 串接自動化工具 (使用免費方案)

需要具備的背景知識

1、課程會從 JavaScript 基礎語法教起，但『建議』學生有基本程式語言觀念。 2、學生『不需』具備後端、資料庫、伺服器等知識，課程會從頭教起。

單元一覽

11 章 140 單元｜總時長 828 分鐘

全部展開

打造 AI 開發環境 - 課程準備工作

單元 1 - 課程架構與學習旅程

點我試看