AI Coding Beginner Course

AI Coding
初學者完整學習簡報

從「用 AI 寫第一個網站」到「用 Google Apps Script 記錄互動資料」的自學型教學投影片。

中文為主零基礎可讀含操作介面圖

1 / 44

使用方式

這份簡報適合邊看邊做

先理解概念

前半段用生活化比喻說明前端、後端、AI 助手、VS Code、GitHub 與 Vercel 的角色。

再跟著步驟操作

每個工具都有明確的「你要做什麼」與「為什麼要這樣做」，避免只照抄而不知道目的。

最後學會除錯

Google Apps Script 串接常見錯誤會被拆成檢查清單，初學者可以逐項排除問題。

建議做法：每看完一章，就停下來在自己的電腦上完成對應操作。

2 / 44

學習成果

完成後你會做出什麼？

第一個成果

一個可互動的網站
可部署到公開網址

第二個成果

能把使用者資料寫入試算表
理解前端到後端的資料流

AI Coding 的核心不是背語法，而是把你的需求、限制、檔案位置與錯誤訊息清楚交給 AI，讓 AI 幫你產生、修改與解釋程式碼。

本課程的終點不是「會寫所有語法」，而是「知道每個檔案放哪裡、每個工具負責什麼、出錯時先查哪一層」。這是初學者能真正獨立前進的關鍵。

自學重點不要急著一次完成所有功能；先讓最小版本跑起來，再逐步要求 AI 加功能。

3 / 44

01

Foundation

先建立 AI Coding 的基本心智模型

你不需要先成為工程師，但你需要知道「怎麼描述需求、怎麼檢查結果、怎麼把成果放到正確位置」。

4 / 44

AI Coding 是什麼

把「自然語言」變成「可執行的程式碼」

你負責說清楚目標。例如網站用途、需要哪些區塊、使用者會如何互動、要部署到哪裡。
AI 負責產生草稿。它可以寫 HTML、CSS、JavaScript，也可以幫你修改錯誤與解釋程式碼。
你仍然要檢查結果。AI 可能理解錯功能、漏掉檔案位置、或產生不適合部署平台的寫法。

AI 是合作的程式碼助手，不是自動保證正確的魔法按鈕。

示意圖：使用 GPT Image 產生，文字標註由投影片呈現。

5 / 44

AI 對話原則

好提示詞不是長，而是資訊完整

任務

我要做什麼網站
我要新增什麼功能

限制

單一 HTML 檔
不使用框架

輸出格式

給完整程式碼
列出修改位置

初學者最常犯的錯，是只說「幫我做一個漂亮網站」。AI 會猜很多細節，因此產生結果可能看起來完整，卻不符合你的實際需求。

更好的提示詞會交代：網站目的、目標使用者、需要哪些區塊、是否只用一個 index.html、是否要手機版、以及要 AI 說明哪些地方需要你手動替換。

範例「請用單一 HTML 檔建立個人作品集，包含導覽列、自我介紹、技能展示與聯絡表單，並加上簡單互動效果。」

6 / 44

示意圖：使用 GPT Image 產生。

網站的兩大部分

前端像店面，後端像管理室

前端（Frontend）是使用者看得到、按得到的畫面，包含顏色、排版、按鈕、動畫與表單。
後端（Backend）是使用者看不到的處理中心，負責儲存資料、驗證、運算與回傳結果。
第一份手冊先做前端網站；第二份手冊再用 Google Apps Script 把資料保存到 Google Sheet。

7 / 44

前端三支柱

HTML、CSS、JavaScript 各自負責一件事

HTML負責內容與結構，例如標題、段落、圖片、按鈕與表單。
CSS負責視覺樣式，例如顏色、間距、字體、排版、圓角與動畫。
JavaScript負責互動邏輯，例如點擊按鈕、驗證表單、改變畫面與送出資料。

來源：本地手冊內嵌示意圖。

8 / 44

HTML

HTML 是網頁的骨架

如果沒有 HTML，瀏覽器不知道頁面上應該有哪些內容，也不知道標題、圖片與按鈕的位置。
HTML 使用標籤（tags）描述內容角色；初學者不必背完所有標籤，只要先認識常用標籤。
請 AI 產生程式碼後，先找出 h1、p、button、form 這類核心結構。

<h1>我的第一個網站</h1>
<p>這是一段自我介紹。</p>
<img src="photo.jpg" alt="profile">
<button>點我</button>

9 / 44

body {
  background: linear-gradient(135deg, #edf4f8, #fffdf7);
  color: #1c2533;
}

.button {
  border-radius: 8px;
  transition: transform 0.2s ease;
}

CSS

CSS 是網頁的設計規則

CSS 決定「同樣的內容」看起來是普通文件，還是有層次、有間距、有視覺重點的網站。
當你想改風格時，可以直接要求 AI：「保持 HTML 不變，只調整 CSS 成為沉穩專業的風格」。
初學者最常調整的是顏色、字體、間距、對齊、卡片樣式與手機版響應式設計。

10 / 44

JavaScript

JavaScript 讓網站會回應使用者

使用者按下按鈕、填寫表單、完成遊戲或切換深色模式時，通常都需要 JavaScript 處理。
AI 產生互動功能後，請檢查事件名稱、元素 ID 與資料格式是否對得上。
如果網頁沒有反應，第一步通常是打開瀏覽器開發者工具，看 Console 是否有錯誤訊息。

document
  .getElementById('startButton')
  .addEventListener('click', function () {
    document.body.classList.toggle('dark');
  });

11 / 44

後端的角色

後端負責「保存」與「處理」

前端做不到

永久保存所有人的資料
保護機密 URL 或金鑰

後端能處理

接收請求與寫入資料庫
驗證、轉送、回傳結果

只有前端的網站，資料通常存在使用者的瀏覽器裡。使用者關掉瀏覽器或換裝置，資料就可能消失，而且你也看不到所有人的互動紀錄。

在第二份手冊中，Google Apps Script 扮演免費迷你伺服器，Google Sheet 扮演簡易資料庫，Vercel Serverless Function 則負責把敏感的 GAS URL 藏在伺服器端。

12 / 44

02

Toolkit

認識你的 AI Coding 工具箱

AI 產生程式碼，VS Code 整理檔案，GitHub 保存版本，Vercel 把網站部署成公開網址。

13 / 44

工具分工

記住四個動詞：問、寫、存、上線

AI：問

用自然語言描述需求，請 AI 產生程式碼、解釋程式碼、修正錯誤。

VS Code：寫

在本機建立資料夾、建立檔案、貼上程式碼、管理專案結構。

GitHub：存

把程式碼放到雲端版本庫，之後可以回到先前版本，也讓 Vercel 讀取。

Vercel：上線

從 GitHub 讀取專案，自動部署並產生可以分享的網址。

初學者不要先追求「懂所有工具」，先追求「知道每一步用哪個工具完成」。

14 / 44

VS Code 介面

你主要會用左側檔案區與中央編輯區

左側 Explorer 顯示專案資料夾與檔案，請確認 index.html 是否在專案根目錄。
中央編輯區是你貼上或修改程式碼的地方，AI 給你的程式碼通常就放在這裡。
下方 Terminal 可以執行命令，但第一份手冊的純 HTML 網站可先不使用命令列。

來源：Visual Studio Code 官方文件，User Interface。

15 / 44

建立第一個檔案

你的第一個網站通常叫 index.html

index.html 是多數網站的預設首頁名稱；Vercel 部署靜態網站時也會優先尋找這個檔案。
檔案名稱不要打成 index.html.txt，否則瀏覽器與部署平台可能不會把它當成網頁。
如果 AI 產生多個檔案，先請它改成「單一 HTML 檔」，等你熟悉後再拆成多檔案專案。

my-first-web/
  index.html

重要檢查：
1. 檔名是 index.html
2. 放在專案最外層
3. 內容包含 HTML、CSS、JS

16 / 44

來源：GitHub Docs，Creating a new repository。

GitHub

GitHub 是你的程式碼雲端硬碟

建立 Repository 後，你的專案就有一個雲端版本庫，可以保存檔案與歷史版本。
對初學者來說，先用網頁介面上傳檔案即可；之後再學 Git 指令也不遲。
Vercel 會讀取 GitHub Repository，所以 GitHub 是「本機檔案」與「網站部署」之間的橋梁。

17 / 44

Repository 名稱

名稱要短、清楚、不要有空白

建議使用 my-first-web、portfolio-site 這類小寫加連字號的名稱。
Repository 可以是 Public 或 Private；初學階段若要讓 Vercel 讀取，請確認授權設定正確。
上傳 index.html 後，GitHub 的 Commit 就像「存檔並留下版本紀錄」。

來源：GitHub Docs，Creating a new repository。

18 / 44

Vercel

Vercel 把程式碼變成公開網址

Vercel 連到 GitHub 後，會讀取你的 Repository，並把靜態網站部署到網際網路上。
每次 GitHub 有新版本，Vercel 通常會自動重新部署，所以「更新網站」變成一個固定流程。
成功部署後，你會拿到類似 my-first-web.vercel.app 的網址。

來源：本地手冊內嵌工作流程圖。

19 / 44

完整工作流程

從零到上線：固定走這五步

1 AI

描述網站功能，取得單一 HTML 程式碼。

2 VS Code

建立資料夾，貼上程式碼並儲存為 index.html。

3 GitHub

建立 Repository，將檔案上傳並 Commit。

4 Vercel

Import GitHub 專案，按 Deploy 部署。

5 URL

打開網址測試，截圖回報給 AI 修改。

把這五步熟練後，你就能用同樣流程做作品集、互動遊戲、課堂小工具或實驗頁面。

20 / 44

迭代思維

YOLO 模式的真正意思：敢試，但要可回復

敢試

請 AI 加功能
請 AI 改風格

可回復

每次修改都 Commit
保留可用版本

小步驟

一次只改一件事
看結果再下一步

初學者可以大膽要求 AI 做新功能，但不要一次要求太多。一次改一件事，才知道哪個修改造成好結果或壞結果。

GitHub 的版本控制讓你有退路：每次完成一個可用狀態就 Commit。當網站壞掉時，先比較最近一次改了什麼，再請 AI 針對錯誤修正。

實用句型「這是我目前的程式碼和錯誤訊息，請只修正這個錯誤，不要重寫整份檔案。」

21 / 44

03

From Frontend To Full Stack

把互動資料保存到 Google Sheet

當網站開始有遊戲、問卷、模擬實驗或學習紀錄，就需要後端來接收與保存資料。

22 / 44

為什麼需要後端

只有前端，資料很容易消失

問題

資料只在瀏覽器
關閉後可能消失

目標

集中保存紀錄
方便後續分析

做法

前端 POST 資料
後端寫入 Sheet

互動網站常會產生紀錄，例如使用者姓名、Email、遊戲分數、實驗反應時間或問卷回答。如果資料只存在本機瀏覽器，你無法集中收集所有人的結果。

第二份手冊的解法是：前端把資料送到 /api/log，Vercel 中間層轉送到 Google Apps Script，最後由 GAS 寫進 Google Sheet。

23 / 44

Google Apps Script

GAS 是免費的迷你伺服器

免費。不需要自己租伺服器，適合初學者與課堂小專案。
熟悉。語法接近 JavaScript，AI 很擅長產生範例程式碼。
整合。可以直接操作 Google Sheet，把資料一列一列寫進去。
限制。它適合小型紀錄與教學專案，不適合高流量正式產品。

來源：Wikimedia Commons，Google Apps Script workspace screenshot，CC0。

24 / 44

示意圖：使用 GPT Image 產生。

資料流

四站式資料路線

使用者在互動網站操作，前端收集 name、email、log。
前端用 fetch() 將 JSON POST 到 /api/log。
Vercel Serverless Function 從環境變數讀取 GAS URL 並轉送資料。
Google Apps Script 加上 id 與 timestamp，再寫入 Google Sheet。

25 / 44

資料欄位

先定義 Sheet 欄位，後面程式才知道要寫哪裡

id

timestamp

name

email

log

GAS 自動產生的序號，用來區分每一筆資料。

GAS 端產生的伺服器時間，避免每台電腦時間不同。

使用者輸入的姓名或代號，依你的活動需求調整。

使用者信箱，可用於後續通知或資料比對。

真正的互動紀錄，例如分數、步驟、反應或 JSON 字串。

欄位順序要與程式中的 appendRow([id, timestamp, name, email, log]) 對齊。

26 / 44

來源：本地 Google Apps Script 手冊內嵌截圖。

Step 1

先建立 Google Sheet 當資料庫

在 Google Drive 建立新的試算表，第一列填入 id | timestamp | name | email | log。
保留試算表 URL，稍後要貼到 Code.gs 的 SHEET_URL。
如果工作表名稱不是 Sheet1，也要同步修改 SHEET_NAME。

27 / 44

Step 2-3

Code.gs 接收資料並寫入 Sheet

doGet() 可以用來測試 API 是否還活著，回傳簡單的 JSON 狀態。
doPost(e) 是關鍵函數，會接收前端送來的 JSON 資料。
程式會用 Sheet URL 開啟試算表，產生 id 與 timestamp，最後追加一列資料。

const SHEET_URL = '貼上你的 Sheet URL';
const SHEET_NAME = 'Sheet1';

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const sheet = SpreadsheetApp
    .openByUrl(SHEET_URL)
    .getSheetByName(SHEET_NAME);
  sheet.appendRow([id, timestamp, data.name, data.email, data.log]);
}

28 / 44

Step 4

部署 GAS 成 Web App 時，設定很重要

部署類型

新增部署作業
類型選 Web app

執行身分

選擇「我」
代表用你的權限寫 Sheet

存取權

選擇「所有人」
讓 Vercel 可以呼叫

第一次部署會要求授權，因為 GAS 需要你的允許才能寫入 Google Sheet。這是正常流程，不是錯誤。

每次修改 GAS 程式碼後，只按儲存不會讓 Web App 更新。你必須建立新的部署，取得新的 Web App URL，必要時同步更新 Vercel 的環境變數。

常見坑「我改了 Code.gs 但沒有生效」通常是因為沒有重新部署成新的 Web App 版本。

29 / 44

為什麼多一層 Vercel API

不要把 GAS URL 直接寫在前端

前端是公開的

任何人可看原始碼
開發者工具可檢查請求

中間層保護

前端只知道 /api/log
GAS_URL 放在 Vercel 伺服器端

如果你把 GAS Web App URL 直接放進 index.html，任何人都能複製那個 URL 並亂送資料到你的 Sheet。

Vercel Serverless Function 的作用是代理（proxy）：它接收前端資料，再從安全的環境變數讀出真正的 GAS URL。這樣前端不需要暴露敏感資訊。

30 / 44

Step 5

在 Vercel 設定 GAS_URL 環境變數

進入 Vercel 專案的 Settings，再找到 Environment Variables。
新增 Key：GAS_URL，Value 貼上 GAS Web App URL。
環境變數修改後，舊部署不會自動套用；請重新部署專案。

來源：Vercel Docs，Managing Environment Variables。

31 / 44

module.exports = async function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  if (req.method !== 'POST') return res.status(405).json({});
  const gasUrl = process.env.GAS_URL;
  const response = await fetch(gasUrl, {
    method: 'POST',
    body: JSON.stringify(req.body),
    redirect: 'follow'
  });
  return res.status(200).json(await response.json());
};

Step 6

api/log.js 是前後端的中間代理

檔案位置必須是專案根目錄的 api/log.js，Vercel 才會把它變成 /api/log。
手冊使用 CommonJS 寫法：module.exports，不要改成 export default。
GAS Web App 可能有 redirect，所以範例特別加上 redirect: 'follow'。

32 / 44

專案結構

檔案放錯位置，功能就不會出現

index.html 是前端頁面，放在專案最外層。
api/log.js 是 Vercel API Route，必須放在 api 資料夾內。
如果你把 log.js 放到錯的資料夾，前端呼叫 /api/log 時會找不到端點。

my-interactive-site/
  index.html
  api/
    log.js

前端呼叫：
fetch('/api/log', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }
})

33 / 44

Step 7A

前端先收集使用者基本資料

表單欄位

姓名 name
Email email

表單送出

阻止預設刷新
保存 playerName / playerEmail

開始互動

隱藏表單
記錄 game_start

表單的作用不是裝飾，而是把每一筆互動紀錄和使用者連起來。否則 Sheet 中只會看到一堆 log，很難知道是哪個人產生的。

請 AI 整合前端功能時，要明確告訴它：網站是單一 index.html，不是 React 或 Vue，且前端只能 POST 到相對路徑 /api/log。

34 / 44

async function sendLog(logData) {
  const payload = {
    name: playerName,
    email: playerEmail,
    log: JSON.stringify(logData)
  };
  const response = await fetch('/api/log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  return await response.json();
}

Step 7B

sendLog() 是前端送資料的核心

它把姓名、Email 與互動紀錄包成 JSON，再送到 /api/log。
logData 可以是遊戲分數、實驗結果、點擊事件或任何你想記錄的物件。
成功或失敗都應該顯示狀態訊息，讓使用者知道資料是否已經保存。

35 / 44

測試流程

測試時從使用者角度走完整條路

打開 Vercel 部署後的正式網址，不要只在本機預覽。
填寫姓名與 Email，按開始，確認表單消失且互動介面可用。
完成一個會觸發 sendLog() 的動作，例如遊戲結束或問卷送出。
打開 Google Sheet，確認新增一列資料，且 id、timestamp、name、email、log 都有值。

如果 Sheet 沒新增資料，先不要亂改程式；先照除錯清單定位是哪一層沒通。

36 / 44

一次搞定提示詞

可以請 AI 一次產生三個部分，但檢查更重要

Code.gs

貼到 Apps Script
改 SHEET_URL

api/log.js

用 module.exports
加 redirect follow

index.html

加表單
加 sendLog()

一次產生所有檔案很方便，但 AI 容易在細節上偏離手冊，例如使用 Next.js 寫法、產生 TypeScript、或把 GAS URL 直接放到前端。

因此，一次搞定提示詞後仍要逐項檢查：檔案路徑、語法格式、環境變數名稱、前端相對路徑、GAS 部署設定與 Sheet 欄位順序。

操作策略讓 AI 先產生完整版本，再要求它根據檢查清單逐項自我審查。

37 / 44

04

Troubleshooting

初學者最需要的是可執行的除錯順序

遇到錯誤時，不要先重寫全部程式。先定位：前端、Vercel、GAS、還是 Google Sheet 哪一層出問題。

38 / 44

示意圖：使用 GPT Image 產生。

先查資料有沒有進 Sheet

沒有資料時，照順序查四層

Google Sheet 欄位是否正確，URL 是否貼到 SHEET_URL。
GAS 是否部署成 Web App，且存取權是否允許 Vercel 呼叫。
Vercel 是否設定 GAS_URL，設定後是否重新部署。
前端是否真的 POST 到 /api/log，不是直接呼叫 GAS URL。

39 / 44

常見錯誤

錯誤訊息通常已經告訴你該查哪裡

現象

可能原因

優先檢查

Vercel 500 error

api/log.js 語法或環境變數錯誤。

Functions log、module.exports、GAS_URL 是否存在。

CORS error

瀏覽器預檢請求沒有被 API 正確回應。

CORS headers、OPTIONS 方法、是否在部署後網址測試。

GAS 修改沒生效

只儲存 Code.gs，沒有建立新的部署。

重新新增部署、更新 GAS URL、再重新部署 Vercel。

把錯誤訊息完整貼給 AI，比只說「壞掉了」有效得多。

40 / 44

提示 AI 除錯

請 AI 修錯時，要給完整上下文

要提供

錯誤訊息全文
相關程式碼片段
檔案路徑

要限制

不要重寫全部
只修正指定錯誤
說明原因

AI 不知道你的實際專案狀態，除非你把錯誤訊息、檔案路徑、部署平台與你剛做的步驟交代清楚。資訊越完整，AI 越可能修對。

最好的除錯提示詞會要求 AI 先判斷錯誤發生在哪一層，再提供最小修改。這樣可以避免 AI 重寫整份程式碼，導致原本正常的部分也被改壞。

可直接使用「請先判斷這是前端、Vercel API、GAS 或 Sheet 的哪一層問題，再只修改必要程式碼。」

41 / 44

名詞速查

你不需要背定義，但要知道它們在流程中的位置

API Route

程式可以呼叫的路徑。本課程中就是 /api/log。

Serverless Function

不用自己管理伺服器的雲端函數，Vercel 會幫你執行。

Environment Variable

存在伺服器端的設定值，用來保存 GAS URL 這類不想暴露的資訊。

POST

把資料送給伺服器的 HTTP 方法，常用於表單、紀錄與新增資料。

JSON

前後端交換資料的格式，適合表示 name、email、score 這類欄位。

CORS

瀏覽器的跨網域安全規則；設定不對時，請求可能被瀏覽器擋下。

42 / 44

練習任務

用同一套流程做一個迷你作品

請 AI 產生一個單一 HTML 的互動小遊戲或問卷，先只要求前端能正常運作。
把 index.html 放進 VS Code 專案資料夾，上傳到 GitHub，部署到 Vercel。
建立 Google Sheet 與 GAS Web App，讓遊戲結束或問卷送出時呼叫 sendLog()。
請另一位同學或朋友測試，確認 Sheet 能收到新資料，再截圖回報給 AI 改善介面。

完成標準不是「程式碼很漂亮」，而是「公開網址可用，資料真的進入 Sheet」。

43 / 44

Sources & Image Credits

圖片與資料來源

投影片內容依兩份本地 Markdown 手冊重組為初學者教學版本；示意圖由 GPT Image 產生，介面圖來自官方文件與公開授權來源。

本地手冊：AI Coding 初學者完整學習手冊；Google Apps Script 學習手冊。

VS Code 介面圖：Visual Studio Code Docs - User Interface

GitHub 介面圖：GitHub Docs - Creating a new repository

Vercel 環境變數介面圖：Vercel Docs - Managing Environment Variables

Google Apps Script 編輯器截圖：Wikimedia Commons, CC0

GPT Image 示意圖：前後端概念、資料流、AI Coding 循環、除錯清單。

44 / 44

AI Coding初學者完整學習簡報

這份簡報適合邊看邊做

先理解概念

再跟著步驟操作

最後學會除錯

完成後你會做出什麼？

先建立 AI Coding 的基本心智模型

把「自然語言」變成「可執行的程式碼」

好提示詞不是長，而是資訊完整

前端像店面，後端像管理室

HTML、CSS、JavaScript 各自負責一件事

HTML 是網頁的骨架

CSS 是網頁的設計規則

JavaScript 讓網站會回應使用者

後端負責「保存」與「處理」

認識你的 AI Coding 工具箱

記住四個動詞：問、寫、存、上線

AI：問

VS Code：寫

GitHub：存

Vercel：上線

你主要會用左側檔案區與中央編輯區

你的第一個網站通常叫 index.html

GitHub 是你的程式碼雲端硬碟

名稱要短、清楚、不要有空白

Vercel 把程式碼變成公開網址

從零到上線：固定走這五步

1 AI

2 VS Code

3 GitHub

4 Vercel

5 URL

YOLO 模式的真正意思：敢試，但要可回復

把互動資料保存到 Google Sheet

只有前端，資料很容易消失

GAS 是免費的迷你伺服器

四站式資料路線

先定義 Sheet 欄位，後面程式才知道要寫哪裡

先建立 Google Sheet 當資料庫

Code.gs 接收資料並寫入 Sheet

部署 GAS 成 Web App 時，設定很重要

不要把 GAS URL 直接寫在前端

在 Vercel 設定 GAS_URL 環境變數

api/log.js 是前後端的中間代理

檔案放錯位置，功能就不會出現

前端先收集使用者基本資料

sendLog() 是前端送資料的核心

測試時從使用者角度走完整條路

可以請 AI 一次產生三個部分，但檢查更重要

初學者最需要的是可執行的除錯順序

沒有資料時，照順序查四層

錯誤訊息通常已經告訴你該查哪裡

請 AI 修錯時，要給完整上下文

你不需要背定義，但要知道它們在流程中的位置

API Route

Serverless Function

Environment Variable

POST

JSON

CORS

用同一套流程做一個迷你作品

圖片與資料來源

AI Coding
初學者完整學習簡報