【Google Antigravity 教學】把想法化為現實！用 Vibe Coding 完成輕量級全端專案

嗨 大家 好 我 是 鼎 月 歡迎 來 到 工程 師 下班 有 約 今天 要 跟 大家 分享 Google 最新 推出 的 Anti -

Grav ity 這款 AI 程式 碼 編輯器 不管 你 的 電腦 作業 系統 是 Wind ows 、 Mac 還是 Linux

都 可以 安裝 體驗 這支 影片 我會 透過 Vibe Coding 手把手 帶 你 完成 一個 輕量 級 的 全端 專案

並透過 實戰 的 方式 帶 大家 了解 它 有 哪些 特色 如果 你 是 剛接觸 Vibe Coding 的 新手

我 在 這支 影片 有 分享 結構 完整 的 提示 詞 了解

哪些 是 重要 元素 后 你 也 可以 根据 自己 的 需求 开发 专案 并 在 最后 告诉 你 如何 在 确保 资讯 安全 的

前提 下 把 专案 透过 Gear 配具 时 部署 到线 上 环境 另外 这支 影片 中 提到 的 工具 与 提示 词 我 有 整理

一篇 文章 放到 部落 格 让 大家 参考 连结 在 下方 的 影片 描述 以 全端 專案 來 說 通常 會 包含

前端 、 後 端 、 資料 庫三個 部分 前端 是給 使用者 瀏覽 的 畫面 我 選擇 Rekt 這款 知名 框架 它 有 許多

現成 的 元件 素材 可以 讓 AI 使用 而後端則 是 處理 邏輯 判斷 的 部分

如果 采用 傳統 的 Python 、 Node 、 JS 、 PHP 等 程式 語言 我 覺得 對 新手 來 說 難度 太高 了 就算

真的 把 功能 做出 來 也 沒 有 掌控 力 所以 我 打算 使用 Google Apps Script 這款 打開 瀏覽器 就 能 使用 的

工具 作為 替代 方案 至於 資料 庫 我 也 不 使用 MySQL Post greSQL Mongo 而是 使用 大家 非常

熟悉 的 Google Shit 這樣 隨時 隨地 都 能 檢視 並且 編輯 資料 採用 這套

組合 你 不 需要 伺服器 不用 綁 信用卡 不 需要 複 雜的 前置 作業 就 能 透過 實作 理解 全端

專案 的 架構 而且 最 後 可以 免費 把 專案 放到 GiHub Pages 公開 部署 不管 你 是 要 跟 朋友 炫耀

還是 要 直接 應 用到 職場 上 都 是 可以 的 喔 这边 我们 把 视角 切换 到 Anti grav ity 如果 你

使用 过 VS Code 或是 Cursor 那 它 的 界面 你 应该 可以 无障碍 使用 目前 Anti grav ity 只要

登录 Google 账号 就 可以 免费 使用 至于 免费 多久 就 看 Google 的 心情 了 那 这边 我 新增 了 一个

Pixel Game 的 资料夹 然后 把 它 推到 Anti grav ity 中 这样 AI 才 知道 它

的 工作 区 是 在 哪 一个 资料夹 底下 接下 來 跟 大家 說明 一下

右側 Adrian 可以 做 的 設定 這個 點點點 打 開後有 三個 選項 分別 是 客 製 化 NCP 伺服器 以及

下載 診斷 建議 大家 可以 選擇 Cust omiz ations 來 設定 一下 自己 的 使用 偏好 在 ROS 這個

地方 我 選擇 Global 那 這邊 的 話 我 複 製 貼 上 一 個 Cursor 內部員工 的 ROS 範例

其 實裡面 的 提示 詞 都 是 通用

的 貼 上 後 這個 規則 就 會 在 所有 的 專案 中 生效 那 參考 的 文字 我 把 它 整理 到 資訊欄 的 博物 格中

大家 可以 直接 複 製 體 驗 那 另外 建議 大家 可以 再 增加 一個 弱勢 告訴 AI 你 習慣 使用 的

語言 這裡 我 就 貼 上 Always Resp onse in 繁體 中文 那 在 這個 地方 點擊 刷新 後

你 就 可以 看到 自己 設定 好 的 弱勢 另外 如果 你 想給 目前 的 專案 設定 特定 的 弱勢

比如 程式 碼 、 規則 之類 的 也 可以 點擊 Work space 來 設定 喔 在 設定 好入 耗時 之 後 我們 可以 點擊

Back to Agent 回到 我們 與 AI 的 對 話 窗 在 模型 這一塊 Google 除了 自家 的 Germ ini 外 還有

提供 Cloudy 與 GPT 的 模型 讓 大家 使用 這邊 要 特別 提醒 一下 每個 模型 的 使用 是

有 額度 限制 的 超過 後 需要 換一個 模型 才能 繼續 使用 另外 在 对话 上 有 分成 Plan ning 跟

Fest 两种 如果 你 今天 要 处理 的 是 复杂 任务 比如 专案 初始 的 规划 就 建议 选择 Plan ning 那加 是

你 只 想要 简单 快速 的 得到 解答 那 选择 Fest 会 更加 省时 哦 接下来 废话 不多 说 我们 直接 在 右侧 A

卷 的 对话框 当中 贴 上 我们 的 需求

然后 点击 send 送出 在 指令 送出 后 先 说明 一下 我 是 如何 发想 出 这个 专案 的 最近 在 帮 学校 老师 与 企业 的

人资 上课时 他们 提到 自己 时常 有 出题 给 学生 以及 对 员工 有 培训 考核 的 需求 但 市场 上 找 不到 可以

免费 乱数 出题 自动 批改 简单 操作 的 工具 那 我 在 了解 他们 的 需求 后 我 就 想 不如 我 尝试 用

vipc oding 设计 一个 简易 的

闯关 游戏 于是 今天 影片 就 出来 了 我 希望 大家 在 Vive Coding 时

尽可能 从 实际 的 需求 出发 那 同时 建议 大家 在 看 完 我 今天 影片 的 示范 之后 可以 尝试 把 里面 提示 词

修改 成 符合 自己 需求 的 因为 如果 你 只 复制 贴 上 别人 的 提示 词 其实 我们 是 学 不到 什么 东西 的 那 在

刚刚 聊天 的 过程 中 你 可以 看到 AI 不断

在 思考 并且 在 左侧 这个 地方 有

帮 我们 规划 这个 专案 要 执行 的 任务 那 在 AI 执行 的 过程 我 也 跟 大家 说明 一下 我 提示 词 的 架构 这个

提示 词一 开始 看上去 你 可能 会 觉得 我 的 这个 结构 有点 复杂 让 我们 能够 在 一 开始 提供 越 精准

完善 的 提示 词 我们 有 办法 在 更 短 的 时间 得到 自己 期待 的 回复 这会 比用 模糊不清 的 提示 词 来回 对话 更

有效 首先 我 有 先 做 了 一个 角色 的 设定 让 它 扮演 资深 的 REAT 前端 工程师 与 游戏 设计师 另外 如果 你

是 第一次 接触 REAT 的话 需要 先 安装 NodeJS 详细 的 安装 与 设定 步骤 可以 参考 上方 的 资讯 卡

我 有 特别 录 一支 影片 分享 安装 哪些 工具 可以 让 Mapc oding

效率 加倍 好 ,

除了 角色 与 框架 的 选择 之外 我 还有 跟 大家 说 我 期待 的 设计 风格 是 Piso 像素 风 并且 关注 的 图片 要 先 下载

好 而且 每一关 都 要 配置 一个 那 接下来 我 只是 非常 明确 规范 专案 的 功能 需求 这块 就是 在 讲解

前后 端的 运作 逻辑 我 告诉 他 使用者 输入 ID 才 有

办法 开始 游戏 那 這個 ID 是 為 了 讓 Google

Shoot 記錄 分數 時 知道 對方 是 誰 另外 流系 一開 始會 透過 Google Apps Script 從 Google Shoot

撈 取題 目 這邊 我 特別 交代 不要 包含 我們 的 解答 欄位 那 之所以 不要 直接 從 Google Shoot 抓取 題目

這裡 是 為 了 要 保護 我們 的 資料 來源 另外 在 我們 的 作答 完 畢後會 把 我們 答題 結果 送到 Google Apps

Script 計算 成績 並記錄 到 我們 的 Google Shoot

當中

然後為 了 要 讓 AI 明白 資料 如何 讀取 與 寫入 所以 我 提供 了 非常 明確 的 Google 去 的 配置 那 這裡 是

為 了 要 減少 我們 的 溝通 上 的 模糊地 帶 那 不管 是 題目 還是 回答 的 工作 表 我 都 有 明確 的 列出 欄位

並且 針對 特殊 的 欄位 我 有 做 額外 的 說明 像是 回答 工作 表 的 第一次 通關 分數 這個 欄位 我

就 備 註 若 同 ID 已通關 過後續

分數 不覆蓋 在 同列 增加 闯关 次数 这里 最后 面

还有 补充 一点 Google Apps Script 这里 是 直接 从 我们 这 一份 Google Sheet 的 扩充 功能 来 进行 配置 的

那 这里 我 是 要 表达 工具 与 工具 间 的 相依 性 最后 还有 考量 到 专案 完成 后 的 易用性 所以 我 把 Google

Apps Script 的 连结 这个 通过 的 门槛 以及 我们 题目 的 数量 这些 资讯

设定 为 环境 变数 这样 我们 的 老师 以及 人 之 日后 想要 更换 考题 或是 改变 平和 标准 就

不用 打开 程式 在 网页 上 动动手 指 修改 就 好 了 那 我们 在 提示 词 介绍 完后 我们 再 回到 我们 的 操作

页面 那 这里 的话 AI 就 有 跟 我们 说 它 是 如何 去 做 一个 执行 的 以及 它 任务 执行 的 一个

状况 那 这里 我们 先滑 到 最 下方 那 首先 在 它 初步 帮忙 完成 了 这些 程式 的 初始化 之后 我会

建议 大家 先 点击 Step all 的 部分 那 这 样子 的话 后续 的 对话 当中 才 知道 AI 具体 帮 我们 做

了 哪 一些 的 调整 因为 我们 这里 所 做 的 是 一个 网页 的 专案 所以 我 也 要 使用 到 Anti Grav ity

它 有 的 一个 功能 就是 自动 开启 模拟 的

浏览器 這邊 我 就 輸入 我們 的 關鍵 字 叫做 請 開啟 融覽器 模擬 執行 並檢查 是否 有 錯誤 因為 通常 在

一開始 完成 的 專案 裡面 可能 是 有 伴 隨到 一些 錯誤 或者 是 不正 確的 資訊 的 那 這裡 我們 就 可以 先

讓 AI 來 去 做 一個 環境 檢查 來 看 一下 這些 細節 是不是 都 有 考量 到 的 那 這裡 的 話 我們

就 看到 它 自動 幫 我們 在 這個 地方 打开 了 我们 的 浏览器 并且 自动 的 帮 我们 输入 了 对应 的 内容 就 像是

一个 真实 的 人类 般 开始 帮 我们 做 这个 网页 的 操作 了 那 这里 的话 我们 可以 看到 AI 有 初步 的 帮 我们

完成 对应 的 设计 细节 但 其实 我 通常 觉得 第一次 AI 产生 的 结果 都

不会 是 满意 的 我们 会 需要 透过 后续 来回 的 对话 来 调整

里面 的 一些 细节 像 这边 我们 就 可以 看到 右侧 它 似乎 是 有 一些 内容 被 卡 掉 的 那 这里 可以 看 得到 它

可能 是 一些 RWD 的 设计 是 没有 那么 完善 所以 我 就 在 与 它 的 对话 当中 跟 它 说 我 觉得 画面 没有

考量 到 RWD 白色 白底 的 这个 部分 有破版 它 就 开始 来 帮 我们

去 做 一个 检查 在 更改 完之後他 就 有 幫 我們 再 重新 開啟 一次 這個 瀏覽器 然後去 檢查 那

這個 時候 我們 就 可以 看到 這裡 白底 的 部分 已經 有 幫 我們 考量 到 RWD 的 設計 是 不會 讓 我們 的 畫面

出現 破版 的 狀況 了 那 這裡 的 話 我們 也 可以 直接 手動來 操作 看看 這邊 我 就 輸入 我 的 名字 Ding

然后 开始 开始 出现 了 这个 load ing 那 这里 的话 我 就 先 随便 去 做 一个 回答 然后 它 这里 就 出现

一个 miss ion comp lete 的 结果 那 这里 的话 我们 就 初步 我们 整个 UI 的 操作 流程 是 符合

我们 的 预期 的 那 大家 不要 忘记 我们 这个 是 要 串接 Google Sheet 的 专案 到 目前为止 其实 我们 都 还 没有

给 它 我们 Google Apps Script 的 连接 啊 也 没有 给 它 Google Sheet

的 内容

啊 那 这里 的话 我们 其实 也 是 可以 直接 请 我们 的 AI 来 帮 我们 设计

这些 细节 的 我 这里 就 直接 跟 大家 说 请 为 这个 专案 撰写 操作 的 ReadMe 的 文件 让 使用者 知道 如何

完成 安装 Google Sheet Google Apps Script 的 详细 操作 并 给 我 10 个 可以

复制 提 上 测试 的 选择题 题目 的 主题 为 我们 这个 生成式 AI 的 基础知识 用 我们 的 这个 表格 来

做 呈现 不然的话 如果 我们 这些 readme 的 文件 都 要 自己 去 做 撰写 啊 考题 都 要 自己 生成 我 觉得 实在 是

太累 了 好 那 在 稍 等 一段时间 后 他 就 跟 我们 说 他 这个 readme 已经 撰写 完毕 了 我们 先 点击 Accept

All 然 後 稍微 縮小 一下 視窗 那 這裡 的 話 可以 在 ReadMe 右上角 的 這個 地方 看到 一個 放大 鏡

的 功能 點擊 之後它 就 會 出現 一個 預覽 的 畫面 這裡 它 就 會 跟 我們 說明 這專案 要 如何 來 去 做 一個

操作 好 那 接下 來 的 話 我們 就 跟 著 我們 ReadMe 的 步驟 來 進行 操作 首先 我 先 複 製 裡 面 的 題 目 那 這

裡 的 話 我 是 開 了 一 個 全新 的 Google Shirt 然后 建立 题目 的 这个 工作 表 接着 我们 再 建立

回答 的 工作 表 建立 好 我们 这 两个 工作 表 之后 接下来 我们 要 跟着 它 的 需求 来 建立 对应 的 栏位 先 把 栏位 复制

起来 贴 在 题目 这里 的话 我们 也 可以 去 调整 一下 它 的 颜色 题目 完成 之后 我们 再 复制 回答 的 工作 表

复制 起来 切 到 我们 的 工作 表 贴上去 再 转换成 我们 对应 的 文字 颜色 然后 他 就 跟 我们 说 Google

Apps Script 我们 这边 的 细节 要 如何 去 设定 那 这里 他 就 跟 我们 说 点击 上方 的 扩充 功能 Apps Script

那 这里 我们 再 切换 到 我们 的 画面 点击 上方 的 扩充 功能 点击 Apps Script 那 这里 就 跳转 到 我们 Google

Apps Script 的 程式码 设定 画面 那 我们 再 回到 Anti Grav ity 他 这里 跟 我们 说 要 把 专程 式 中

的 code . js

. js 这个 程式 给 内容 完整 复制 这里 我 就 先 搜寻 一下 Google . js

. js 的 这个 程式 然后 我 就 直接 复制 起来 他 这里 的 程式 切换 到 我们 Google Apps Script 的

贴上去 贴上去 之后 我们 再 来看 一下 他 要 我们 怎么 说

他 說 要 點擊 右上角 的 部署 新增 部署 然後要 選擇 這個 網頁 應用 程式 輸入 任意 名稱 那 我 先

把 這個 名稱 複 製 起 來 好 了 資 金 身份 是 我然 後 誰 可以 存取 是 所有人 好 那 我們 就 跟 著 他 說 明來 做

操作 右上角 的 這個 部署 新增 部署 作業 在 類型 的 部分 我們 選擇 網頁 應用 程式 說明 我們 就

直接 先 打上 我們 這個 PsoG ain API 那資金 身份 就是 我 誰 可以 存取 這個 地方 選擇 所有人

點擊 部署 那 這裡 的 話 他 有 要求 我們 要 授 與 存取 先點擊 下去 他會 出現 一個 彈窗 登錄 自己 的

Gmail 那 這裡會 有 一個 警告 的 訊息 不要 害怕 點擊 Adva nce 選擇 勾圖 未命名 的 這個 專案

那大 膽的 點擊 Cont inue 因為 其實 這個 就是 我們 自己 在 用 自己 的 帳號 在 執行 自己 的 Google

Apps Script 稍 等 一段 時間 之 後 他 就 會 給予 我們 Google Apps Script 的 網址 我們 就 把 這段 的 網址

複 製 起 來 然 後 切 換 到 Anti grav ity 當中然 後 我們 這裡 要 再 到 專案 emv 的 這個 檔案

當中 把 我們 的 這個 Google Apps Script 的 UIL

給貼

上去 下来 的话 他 有 给 我们 对 应该 我们 时候 说

我们 要 生成 出 实体 的 测试 题目 吗 那 这里 我们 就 把 这 实体 的 测试 题目 复制 起来 切换 到 我们 的 Google

Sheet 的 页面 那 这 也 是 题目 嘛 我们 就 把 它 给 贴上去 然后 把 它 的 颜色 的 字 弄 深 一点 好 那 这里 就

完成 了 我们 的 前置 作业 那 接下来 我们 再 回到 我们 的 Anti grar ity 最 下方 的 這個 地方 有 我們 的 開發

指令 可以 把 它 複 製 起 來 點 擊 Togg lePa nel 這個 下方 其實 就是 我們 所謂 的 終端機

我們 可以 在 這個 地方 執行 指令 這裡 他 就 幫 我們 開啟 了 一個 對 應 網址 我們 可以 把 它 複 製 起

來 然 後 切 換 到 我 們 Chrome 的 一個 視窗 輸入 上去 這裡 就 可以 看到 我們 所 生成 出來 的 這個

闖關 遊戲 UserID 我 就 先輸入 我 的 英文名字 Dim 点击 STAR GAT 这里 它 就 有 一个 Load ing

的 画面 好 那 这里 它 也 可以 看到 它 是 有 帮 我们 Load ing 出 对应 的 一个 画面 但 刚刚 我们 似乎 它 有 快速

闪过 一个 错误 的 讯息 没关系 有 错误 的 讯息 是 很 正常 的 另外 我们 也 可以 看到 在 全 萤幕 的 这个 画面

当中 我们 这个 题目 似乎 是 没有 至终 对齐 的 有 错误 我们 就 一个个 跟 AI 去 做

修正 就 好 那 接下来 的话 我来 做 一下 快速 的

答题 那 這邊 的 話 在 答題 結束 後 他 有 開始 幫 我們 計算 對 應 成績 然後給 我們 說 我們 成績 是

全對 的 那 確認 我們 成績 全對 之 後 我們 可以 再 回到 我們 的 Google sheet 到 回答 的 這個 頁 面 可以 看到 他

是 有 記錄 出 我們 這個 成績 的 但 有 幾個 奇怪 點 第一 個 是 我們 的 闖 關次 數為 什麼 是 2 接下 來 再

幫 我們 把 我們 的 視角切 換到 我們 的 Anti grav ity 提出 剛剛 發現 的 幾個 問題 我們 先點擊

右側 的 Taggo Agent 這邊 我 提出 了 兩個 問題 第一 個 是 我們 在 全 螢幕 的 時候 題目 白底 沒有 自中 那

我 只有 遊玩 一次 但 最 後 他 卻 記錄 了 兩次 那 這裡 的 話 就是 把 我們 看到 問題 提供 給 AI 請

他 來 幫 我們 去 做 一個 協助 的 調

整好 那 在 最 後 的 話 我們 先 接受 一下 它 全部 的 一個 內容然 後 再 回到 我們 的 網頁 我們 可以 先

刷新 一下 這個 網頁 那 我 可以 發現 其 實裡面 多多少少 還是 有 一些 奇奇怪怪 的 問題 比如 我們 在 結果 頁 刷新 的

時候 它 機軟 還會 再 計算 成績 如果 計算 成績 的 話 其實 我 在 想 說 嗯 這個 地方 果然 闖關 次數 被

累加 了 沒關 係 我們 先點擊 try again 那 這邊 的 話 我們 先用 亂 打 的 方式 來 看 一下 會不會 其實 剛剛

前面 我們 全隊 只 不過 是 一個 幻覺 OK 看起 來 我們 全隊並 不是 幻覺 我們 這個 分數 就 只有

10 分 那 我們 再換 一個 新 的 身份 比如 說 叫做 Peter Stuc kin 然後再 快速 的 來 做 一些 回答 好 他 這裡

有 話 說 我們 一體 都 沒 有 答 對 來 看 一下 這個 Peter 闖關

次數 1 那 總分 是 0 ,

最高分 是 0 那 這裡花 了 幾次 通關 , 欸 ?

居然 是 1 那 這裡 其實 就是 想 跟 大家 說 我們 在 與 AI 對話 過程 當中會 遇到 許許 多多 的 錯誤

不要 妄想 在 很 短 的 時間 之 內 通過 一個 簡單 指令 就 得到 一個 好 的 結果 了 你 可以 看到 我 一開始

提供 這麼 嚴謹 的 指令 都 可以 在後續 出現 這麼 多 邏輯 上 的 一個 錯誤 了 這邊 跟 大家 補充 一下 我後續

有 做 的 錯誤 修 復 與 畫面 優化 事宜 首先 過去 展示 時 可能 有人 發現 進入 遊戲 時 我們 的 題 目會

閃 一下 那 不是 錯覺 而是 真的 呼叫 兩次 Google Apps Script 這塊 可以 點擊 F12 在 網路

的 分頁 確定 我們 呼叫 的 一個 次數 另外 過去 有 中文 以及 英文字 體 大小 不 一致

的 問題 那 这个 地方 我 也 做 了 一个 对应 的 优化 还有 为了 方便 复习 我 在 成绩 结算 后 多 了 一个

review 的 功能 可以 知道 答错 的 内容 正确 答应 该是 什么 另外 在 我们 的 成绩 结算 后 Google

序迟 的 第一次 通关 分数 跟花 了 几次 通关 的 逻辑 问题 也 解决 了 另外 过去 我们

成绩 结算 页面 刷新 时 会 再次 计算 分数 与 累计 分数 但 这个 行为 我 现在 把 它 优化 成 了 导向 到

我们 的 首页 这 样子 我们 的 数据 就 不会 再 去 做 一个 累计 了 同时 也 优化 了 许多 的 UI 细节 老实 讲 这个

专案 的 结构 并 不 复杂 但 依然 有 这么 多 的 问题 需要 解决 这 就是 想要 透过 实际 的 demo 来 告诉 大家

AI 可以 帮 我们

加速 但品 質絕 對 需要 有 經驗 的 人 反覆 測試 去 做 一個 把 關否則 怎麼 踩 坑 的

都 不 知道 在 我們 確認 功能 都 符合 需求 後 接下 來 我們 就要 準備將 專案 部署 到 GitHub Pages 但 部署

前 我 先帶 大家 看 一下 AI 生成 的 專案 結構並 提醒 我們 要 注意 的 事項 首先 我們 把 視角 放到

Pack age .

json 的 這個

檔案 那 在 Secret 这里 有 专案 的 启动 啊 建立 静态 资源 以及 检查

格式 的 一个 指令 而 下面 的 Depe nden cies 以及 DEV Depe nden cies 则 是 专案 使用 套件 的

版本 资讯 那 这个 地方 所 列出来 的 套件 都 会 安装 到 我们 左侧 None Modu les 的

这个 套件 资料夹 当中 以 NodeJS 的 主要 来说 通常

起机 最大 的 就是 Node Budges 的 这个 资料夹 那 但是 因为 我们 的 套件 版本 已经 有 pack age .

json 在 做 控管 所以 我们 是 不 需要 把 这个 Node Budges 的 资料夹 上 传到 我们 的 GitHub 的 那 至于

如何 把 它 从 我们 Git 的 版 控中 移除 就要 谈到 我们 这个 GitE kno

的 档案 了 这边 我 就 把

视角 切换 到 geti gnal 这里 就是 我们 要 忽略 的 档案 比如说 像是 记录 log 的 档案 储存 刚刚 我

这边 有 说 专案 套件 档案 又 或者 是 dist 这个 是 指 我们 自动 生成 出来 的

一个 档案 另外 最 重要 的 就是 一些 emv 这类 会 储存 个人 设定 以及 密钥 的 设定 档 如果 你

发现 这里 没有 的话 请 你 自己 主动 的 把 它 给 加上 去 这个 emv 档 是 不 适合 透过 我们 的 Github 来 做

一个 版本控制 的 但 一般来讲 我们 会 设计 一个 emv 的 泛密 档 你 可以 直接 这 样子 跟 AI

来 做 一个

说明 这里 我 就 直接 选择 Fast 跟 大家 说 请 帮 我 建立 一个 env .

exam ple 的 范例 档 那 稍 等 几秒钟 之后 他 就 帮 我们 产生 出 了 这个 env .

exam ple 的 档案 那 这个 档案 就是 可以 让 我们 上 传到 Gate 上面 的 如果 我们 这个

专案 是 公开 或者 是 有 跟 其他人 共比 协作 的 状况 之下 他們 就 可以 知道 這個

裡面 的 內容 可以 如何 的 去 做 一個 填寫 另外 因為 我們 想要 在 GeeHub 部署 所以 這邊 我們 也

打開 AI 對話 的 視窗 跟 他 說 請 幫 我們 設計 對 應 的 工作 流 我 這裡 就 說 請 設計能 自動 部署 到

GeeHub Pages 的 Action 會 使用 到 的 環境 變數 請 參考 我們 這個 env .

exam ple 檔 並將 操作 流期間 更新 到 ReadMe 的

文件 當中 稍 等 一段 時間 後 他 就

幫 我們 完成 了 GeeHub Action 的 一個 設定 我們 可以 看到 他 主要 是 在 兩個 地方 做 的 更新 一個 是 新增 了 GeeHub

Work flow 這個 depot .

yaml 的 這個 檔案 那 同時 他 有 更新 我們 的 readme . md

. md 這裡 的 話 因為並 不是 所有人 都 是 熟悉 我們 這個 GeeHub Action 要 如何

去 做 一個 操作 的 所以 他 就 幫 我們 把 詳細 的 操作 路徑 跟

我們 做 了 一個 說明 接下 來 的 話 我們 只要 跟 他 的 說 明來 去 做 一個 部署 就 可以 了 這邊 我們 選擇

Accept All 如果 你 是 第一次 接觸 GeeHub 的 朋友 可以 參考 這邊 影片 資訊欄 的 連結 我 有錄 一支

影片 分享 詳細 的 操作 步驟 那 如果 你 已經 完成 了 對 應 的 註 冊 流程 可以 點擊 左側 的 Source Cont

rol 這個

分頁 点击 The Init ialize Repo sitory 就 可以

初始化 我们 这个 专案 接着 点击 Gene rateAI 就 会 辨识 我们 更新 的 这些 内容 来 去 生成 我们

对应 Commit 的 一个 讯息 那 你 确认 我们 的 文字描述 符合 自己 的 预期 后 点击 Commit 那 就 会 在

自己 的 电脑 记录 这个 变更 那 如果 想要 更新 到 云端 要 点击 publ ish branch

才 會 正式 上傳 喔 另外 如果 你 的 專案 尚未 儲 存在 Github 這邊 會 有 一個 彈窗 邀請 你 輸入 專案 名稱 那

它 預設 就是 我們 的 資料 夾名 稱 因為 我們 的 專案 預計要 發布 到 Github pages 那 這個 是 只有 public 的

Repo sitory 才能 夠發布 所以 我 這邊 選擇 的 是 public repo sitory

的 選項 完成 之

後 你 可以 點擊 這邊 的 Open on GitHub 這裡 就 會 引導 你 到 Gihub 的 網站 你 可以 在 這邊 看 一下 它 的

部署 是不是 順利 的 如果 你 能夠 看到 專案 的 內容 以及 我們 剛剛 所 上 傳 的 這些 ReadMe 的 資訊 那

基本上 就是 恭喜 你 成功 完成 了 我們 專案 的 上 傳 接下 來 我們 要 設定 一下 我們 的 Gihub pages

那 我們 就 跟 著 它

的 導引來 做 設定 選擇 我們 的 Sett ings 選擇 Pages 在 這個 地方 的 話 我們 就 維持 Depl

oyed from our page 但是 在 Branch 的 地方 我們 就 跟 他 的 引導 說 選擇 GHPa ges 點擊 Save 在 點擊

Save 之 後 我們 就要 先去 到 我們 的 Acti ons 的

分頁 那 這個 地方 的 話 就 可以 去 查看 一下 我們 具體 的 部署 狀況 那

這邊 的 話 看到 我們 在 重新 做 這個 sett ing 的 操作 之後他 有 幫 我們 在 觸發 了 這個 GHPa ges

的 部署 任務 那 我們 可以 點擊 進去 看 一下 那 這個 就是 他會 說明 目前 的 一個

部署 狀況 如果 成功 的 話 會 是 綠色 的 勾勾 那 失敗 的 話 會 是 紅色 XX 那 這邊 的 話 我們 看到 其實

我們 還蠻 幸運 的 第一次 部署 就 出現 了 綠色 勾勾 的 狀況 如果 不幸 有出 現紅色 XX 的 狀況 你 可以

直接 點進 去 看 一下 它 具體 的 錯 誤訊息 有 錯訊息 也 不要 擔心 複 製 起 來 跟 我 們 的 Gemini 跟 我們

的 AI 去 做 一個 溝通 聯 繫 就 OK 了 那 這邊 的 話 我們

先點擊 我們 的 網址 看 一下 他 是否 能够 顺利 的 渲染 出来 哦 这里 我们

发现 了 一件 事 虽然 说 他 号称 已经 是 不 属 成功 了 但 他 看起来 是 一片空白 的 画面 这时候 不要 担心 我们

按下 F12 然后 选择 我们 的 主控 胎看 一下 他 具体 有 哪 一些 的 错误 讯息 看起来

似乎 是 有 一些 支援 没有 办法 顺利 的 捞取 到 的 我们 就 把 整个 错误 讯息 复制 下来

切换 到 我们 的 anti - grav ity 然后 先 直接 贴上去 跟 他 说 这里 的话 他 应该 是 说明 我们 无法

捞取 到 一些 对应 的 资源 那 这里 也 是 刚好 让 大家 了解 到 部署 成功 有 的 时候 不 代表 你 的 网站 是 可以 正确

运行 的 这边 的话 是 检查 到 我们 可能 是 vice config 这边 的 路径 没有 设定 正确 那 现在 是 帮 我们 来 去

做 一个 设定 然后 我们 再 把 这个 更新 给 push 到 我们 的 Github 上面 push 完成 之后 我们 再 回到

我们 的 Chrome 然后 再切 到 我们 的 Gith ubPa ges 这个 画面 我们 再 点击 一下 Acti ons 那 你

可以 看到 我们 每 push 一次 新 的 更新 之后 它 就 会 触发 一个 新 的 Action 好 這邊 我們 看到 他 完成

更新 我們 再 重新 點擊 進去 一下 你 不是 說 已 經解決 問題 了 嗎 怎麼 我們 看 起來 似乎 整個 畫面

還是 黑 的 好 那 這裡 的 話 我們 一樣 把 我們 的 錯 誤訊息 直接 完整 的 複 製 下 來 複 製 起 來 之 後

再 繼 續 回到 我們 的 Anti Grav ity 跟 他 說

還是 遇到 錯誤 那 這邊 的 說 法 也 是 他 因為 我們 的

路徑 設計導致 我們 的 內容 沒有 辦法 正確 的 被 解析 那一樣 我們 把 這個 ConMix 給 推送 上去 來 看 一下 是不是

這次 的 更新 就 真的 可以 幫 我們 順利 解決 這個 問題 了 這次 我們 再 點擊 看 一下 他 的 Depl oyee

內容 是不是 正常 了 刷新 一下 這個 頁 面 OK 這邊 也 是 特別 提醒

一下 有 時候 我們 一開始 看到 它 沒 有 出現 東西有 可能 是 因為 快取 那

如果 你 是 用 硬 刷新 的 這種 方式 輕功 快取 再 去 做 刷新 往往 可以 看到 它 正確 的 一個 結果 那 看到

這個 畫面 真的 是 太 感動 了 我們 先來 簡單 的 操作 一下 我們 先輸入 名字 點擊 STAR GAME

那 這邊 的 話 你 會 發現 我們 是不是 漏 了 什麼 東西 那 其實 這個 地方 就是 因為 我們 在

只有 設定 了 我們 的 專案 上 傳 設定 了 我們 專案 部署 的 部分 還沒有 幫 我們 把 對 應 的 Google Apps

Script 去 做 一個 設定 我們 先點 選 Sett ings 在 下面 的 話 它 跟 我 選說 要 選 的 Secr ets

and Vari ables 的 Acti ons 那 這裡 的 話 我們 都 選擇 Secr ets 的 這個 分頁 另外 選擇

New Repo sitory Secr ets 點擊 進去 後 我們 就要 依序 的 把 我們 專案 中 的 EVMV

的 值 填寫 進去 那 这里

的话 其实 也 是 跟 大家 说明 日后 如果 你 有 需要 去 更新 我们 的 试卷 更新 我们 的 平和 标准 或者 是

调整 我们 每次 要 出席 的 提数 可以 在 这个 地方 动动手 指 完成 填写 就 没有 问题 了 只是 一 开始 的 建置

比较复杂 后面 操作 都 是 简单 的 那 大家 在 完成 我们 环境 变数 这边 的 设定 之后 會 提醒 一下 大家

我們 要 先點擊 Acti ons 的 這個 地方 選擇 最 後 一次 部署 的 這個 Fit 然後告訴 他 要 Rerun all job

那 之所以 我們 需要 這樣 做 是 因為 如果 我們 沒 有 讓 他 的 這個 Job 重新 啟動 的 話 他 是 沒

有 辦法 吃 到 我們 最 後 更新 到 的 環境 變速 的 那 我們 這邊 點擊 看到 他 的 畫面 是 可以 順利產生 的 那 我們 就

輸入 這次 夾使 他 的 我們 的 使用者 名稱 叫 Ruby 然後點擊 Start Game 太感動 了 這裡 他 總 算是 有 辦法

成功 Load ing 到 我們 的 題目 了 我們 這邊 就 依序 的 作答 這邊 的 送 出 答案 看到 我們 的 成績 是 50 分

Review 的 這個 功能 也 都 是 正常 的 然後切 換到 我們 的 表單 中 最後面 Ruby 的 這個 身份

也 都 是 有 出現 在 我們 的 Google Sheets 当中

如果 你 是 跟着 影片 操作 这边 要 先 特别 恭喜 一下 大家 走到 这 一步 真的 不是 很 容易 先给 自己 来

点 掌声 吧 也 帮 这支 影片 按个 赞 给 我 一点 鼓励 那 同时 也 是 要 提醒 一下 大家 这支 影片 是 帮 大家

初步 掌握 一下 我们 这个 圈端 专案 的 核心 概念 让 你 了解 全端 是 怎么样 去 做 显示 的 那 我们 是 后

端 是 如何 去 抓 资料 如何 去 处理 资料 然后 在 最后 面 我们 的 资料库 是 如何 的 去 做 一个 存取 以及 整理 的

那 目前 的 专案 架构 其实 并 不 适合 处理 邏輯 複 雜度 高 而且 高 流量 的 一個 使用 場景 但是 在 了解 這些

概念 後 如果 你 未 來後端 想要 換成 NoteJS 資料 庫 想要 換成 MySQL 你 的 概念 會 更加 清晰 而且

更加 的 輕 鬆 最近 我 拍 了 許多 AI 主題 的 影片 但 主要 目的 不是 要 介紹 工具 如何

使用 而是 透過 自己 的 經驗 從 實戰 的 角度 去 深入 分享 這幾年 來 我 在 學 校企 業講過

許多 AI 輔助 專寫 程式 的 課程 也 就是 現在 大家 所 說 的 Bibc oding 很多 學員 都 在 問我 使用

哪個 工具 才 是 最好 的 我 跟 他們 說 選擇 你 最 順手 的 主流 工具 就 好 儘 管 工具 間 有 差異 但 完成 專案 的

關鍵 在 於 人 而 不是 工具 以 程式 編輯器 來 說 從 VS Code Cursor 到 今天 介紹 的 Anti grar ity

工具 永遠 在 更新

競爭 所以 我當 工程 師十幾年 後 提悟 到 很 重要 的 一件 事 不管 程式 語言 還是

工具 他們 的 本質 都 是 為 了解 決問題 一直 學新 的 程式 語言換 新 的 工具 其實 對 個 人 的 成長 極其

有限 因為 你 的 經歷 被 分散 了 對 新手 來 說還 不如 去 選擇 一門 程式 語言 好好 去 深入研究 雖然 程式 間

的 語法 不同 但 底層 邏輯 都 是 差不多 的 我 不會 特別 崇拜 某個 程式 宜言 也 不會 非 某個 工具

不用 因為 在 現實 的 世界 只有 當下 最合適 的 選擇 技術會 一直 迭代 更新 但 程式 的 敵運 可以 持續

累積 在 影片 的 最後請 大家 在 AI 時代 一定 要 保有 自己 的 判斷力 與 行動力 就算 你 覺得 這支

影片 內容 很棒 終究 是 我 的 始終 情境 動手將 知識轉 化成 自己 實際能 用到 的 那 才 會 變成

你 的 如果 未來 你 打算 用 vibc oding 開發 更 完整 的 全端 專案 可以 先點擊 上方 的 資訊卡 我 有錄

一支 影片 分享 vibc oding 時 前端 後 端 資料 庫 最常 遇到 的 陷阱 它 可以 幫助 你 有系

統體 建立 安全 意 識 儘 管 現 在 AI 工具 越來 越強 大 但 它 同時 也 會給 沒有 相關 知識 背景

人帶 來 更 大 的 幻覺 過去 你 AI 寫成 是 跑 不動 你 會 知道 它 錯 了 大家 現在 有 能力 寫出 看 起來 冷凍 的

工具 畫面 正常 功能 正常 但 可能 背 後 的 邏輯 有 問題 或者 你 看到 只是 假資料 如果 沒有 前端 後

端的 概念 又 不 了解 資料 庫 如何 運作 那 你 是 沒 有 能力 判斷 AI 給的 資訊 是否 正確 記住

AI 是 一個 好 幫手 但 它 並非 萬能 如果 這支 影片 有給 你 啟發 與 幫助別 忘記 按 讚 訂 閱 並 把 影片 分享 給

需要 的 朋友 未來 我會 分享 更 多 AI 工具 的 應用 技巧 與 注意 事項 我

是 鼎淵 我們 下班 有 約 大家 掰掰