作品集_二代學團服訂購網站
AI 自動化工作流程 學習心得

【實作案例】二代學團服訂購網站-Google AI Studio 與 Google Cloud 部署訂購網站 | Vibe Coding 專案紀錄

Inherit 二代學團服訂購網站

在學習 Vibe Coding 的過程當中,在好友圈發起了一個 Side Project 計劃,好朋友們提供題目,我試著用 Vibe Coding 來實作,二代學團服訂購網站就是第一個和好友協作的作品。

使用的工具

  1. Google AI Studio 的 Build apps with Gemini(免費)
  2. Google Gemini API(免費)
  3. Google Cloud Platform 的空間(付費)

這次比較多的學習主要在新手小白第一次使用 Google Cloud Platform 去佈署網頁。剛好當時發生了知名講師  API 事件,讓人緊張又害怕。

製作內容、過程與費用

團服訂購的前台:React,不過原則上我都是讓 AI 跑的,沒有特別指示要用什麼程式語言
團服訂購的後台及資料庫:包含訂單名單、庫存統計、銷售報表,都是串 Google Sheet
󠀠
網站的前台由 React 架構生成、後台串接 Google Sheet,負責接收訂單、統計庫存與製作銷售報表。整體架構都由 AI 撰寫程式,我僅提供流程與設計方向。若要形容這個網站,我會說它比較像一個漂亮的 Google Form,但具備簡單的交易邏輯。
󠀠
整個開發過程大約是兩小時。其實最主要的時間是花費在和好友討論 user flow 還有他期待的銷售流程。

原則上都以 AI 對話指令完成設計、部署及串接,從 9/23 開發上線到 10/4 關站收單,AI 對話、佈署、雲端伺服器總成本約新台幣 1 元。收費還在新手村武器店的朋友友情價 —— 兩杯星巴克,但這次玩玩具的價值是這個 Side Project 讓我重新理解了「開發」與「規劃」之間看待事情的視角不同。

部署不是結束:從雲端成本到資安意識

剛好這次的時間遇上了知名的 API 事件,所以特別請教了 AI 還有真人工程師關於 Google Cloud Platform 種種問題,很可惜的是,AI 問答的錯誤率很高,大致上略略懂了一些概念,但學習地圖建的不是很紥實;其次是這很吃工程師的經驗,身邊剛好沒有重度使用者,所以也只是很淺碟的問了問。有件事我後來覺得那位 AI 講師說得一件事有點道理:「Google AI Studio 的 UI 設計來說並沒有做得很好」,他在「下架」這件事上,是很 1 或 0 的,deploy 之後如果不是像我一樣,大致上知道怎麼關站,通常都只有刪除專案一途,對於完全不懂程式的人就有點不太友善。

無獨有偶,Google AI Studio 也在不久之後更新了 API 的頁面,可以觀看專案的用量,友善很多。

這次也有被提醒,因為網站只在私域內部流傳,所以資安方面沒有做得太好,如果有惡意攻擊什麼的,應該是會撐不住,下次也許在一開始和 AI 溝通需求的時候,會再把資安的需求加入,這裡就是屬於「我不知道我不知道」的地方,還需要多加學習。

這次學會的事

如何節省 Google Cloud Platform

參考了 Peggy 的麻瓜筆記,算是蠻早就讓我回頭看一下 Cloud Storage 的費用占比。

依據我模模糊糊的理解,應該是每一次 deploy 之後就會上傳一個備份,剛好這個銷售頁大大小小改十幾個版,這在我自己其他的作品中很正常,但是在用 Google AI Studio 時,每一次改版重新 deploy 就會上傳一個備份,每天會固定花 50% 左右的費用在存這些備份檔,所以後來網站穩定後,就把前面初期的備份刪掉了,Cloud Storage 就沒花太多錢。

從使用者思維到開發者思維的轉換

這大概是我後知後覺,覺得這次最有價值的學習。

以前都是當前台的企劃或者 Planner 比較多,所以不會考量到 if else 甚至是更裡層的問題。

像這次一開始的需求,就是單純做一個一頁式的銷售頁,提供給群組團員們訂購團服,所以當下 AI Coding 完網站,搭配一頁 Google Sheet 的銷售表單後,就上線了。

不過實際上要完整運作一個銷售流程,各種功能真的都是必要的耶,像是訂購確認信、庫存管理、銷售統計…等,這些後來都還是要補做上去,甚至是也要考量到折扣碼或者公關品的需求,這些如果在開發期就可以把 spec 想清楚,應該會順利很多。

另外是關站。其實我是無情的關掉了整個專案,但後來思索了幾天,還是覺得不能這樣做。首先是如果這是對外的網頁,有「停止訂購」的公告,會比整個網站 403 來得好,至少不會讓人誤以為是詐騙,另外一方面就是如果臨時要加開「訂購查詢」或者是「寄件進度查詢」這種事,也會比較容易。

結論

這次專案不只是打造一個網站,更像是一場學習路線圖的啟動。

它讓我從 Planner 的角色,第一次站到 Developer 的視角,也發現了更多「我不知道我不知道」的領域 —— 例如資安、備份策略、費用結構。

要學的還很多,工程師們的大腿也很重要,這次依然玩得很開心 ♥

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Google reCAPTCHA 保護機制,這項服務遵循 Google 隱私權政策服務條款