【Day 13】會去了解後端的原因，是因為河川永續！？！？

▲ 圖 1：看看河川，也看看資訊科技如何協助河川永續的 Midjourney 概念示意圖

話說讓自己懂得
Firebase、Supabase
這些後端平台的原因，
竟然是因為河川永續的活動！？！？

緣起：一場寒假工作坊，意外開啟的「技術長」之路

▲ 圖 2：聯合報與東海大學合作舉辦的「河好如初」河川永續設計思考工作坊

話說，這個大概要從 2026 年 1 月開始說起，當時因為寒假有點空閒，所以決定參加聯合報跟東海大學合作舉辦的河好如初河川永續設計思考工作坊（還是那句，名字超長的）。

那個時候跟團隊提出的提案「北港溪沼氣發電眾包平台」意外地入圍了，也包括後來第二次的「志同道河」同樣入圍！

兩次的專案自己都擔任技術及主要開發人員，特別是兩次的提案我都跟平台及數位開發有關。

• 🎥 介紹活動與自己所作所為的 Instagram 短片：
  • 🔗 前篇分享：點此觀看 IG Reel 前篇
  • 🔗 後篇分享：點此觀看 IG Reel 後篇
• 📰 聯合報媒體報導：
  • 🔗 大同大學表現亮眼，三組團隊強勢入圍！ | 河好如初

拒絕「假惺惺的前端」！登入系統與資料庫才是平台的靈魂

那麼談及到平台，往往就免不了要設計登入系統。

但是難道登入系統用 vibe coding 弄出一個假惺惺的前端就可以了嗎？當然不行啦！

通常還需要串聯一些後端的平台才能建構起正式的登入系統，或者像是 Facebook 這些平台一樣可以上傳東西的資料庫，讓前端可以隨著資料庫的更新顯示用戶上傳的東西。

從 AI Studio 到 Antigravity：後端串接的兩段式進化

那麼在實作上，究竟該怎麼串接後端呢？

💡 階段一：AI Studio「一句流」自動串接（新手極速入門）

▲ 圖 3：透過簡單提示詞讓 Google AI Studio 自動串接 Firebase 建立帳號登入系統

大概 2026 年 1 月後有一個 vibe coding 串接後端的簡單方法，就是假如你是用 Google AI Studio vibe coding 平台的話，你可以在對話聊天框裡面指示 AI 說：

請幫我串接 Firebase 建立一個 Google 帳號登入系統！

💡 提示：Prompt 就是這麼直覺！在 AI Studio 平台中直接輸入，AI Studio 便會自動幫你串接完成！

當然，第一次在 2026 年初還不熟悉 vibe coding、只懂得用 AI Studio 的時候，可以這樣子做。

🚀 階段二：進階 Vibe Coding 工具（Antigravity 全端架構串接）

▲ 圖 4：後來「志同道河」平台（Next.js 架構，Cloudflare 部署）的正式登入系統（Supabase + Google Cloud）

但是如果後來需要用到像 Antigravity 等等的專業 vibe coding 工具，串接起來就稍微進階複雜一點了。

這時候直接詢問 AI 模型，AI 通常會直接提供你指引連結點開管理後台頁面，指揮你該如何設定 API。拿到 API 資訊後，再回到網頁部署平台（例如 Cloudflare 或 Vercel），引導你該如何添加 API Key 與環境變數並儲存。

一步一步地設定，就能夠完整設定好 Google 帳號的登入系統了！

甚至我們還能夠串接 vibe coding 寫好的 Google Apps Script，讓登入的帳號可以自動收到 Gmail、定期推送日報。有機會的話之後再來專門介紹一下這個的設定～

極限衝刺：實作不超過 24 小時的黑客松破局關鍵

說起來也是瘋狂，其實兩次的活動能夠實在動手開發的時間都不超過 24 小時（雖然活動說明上是不超過 48 小時）。

必須要在這麼短的時間之內製作出完整可動的 Prototype，是一個挺大的挑戰。但是兩次我都用 AI 工具處理好了這個部份，到最後製作出好看又真正能互動的 Prototype 展示給評審及參與者看，獲得了足夠多的支持才能夠順利入圍。

不知道這樣子的開發展示能力是否也部份打動了評審們？兩次也剛好都入圍了，這也讓我在當初就深刻體會到：vibe coding 能力逐步變成了黑客松與議題松中，協助團隊迅速驗證、完善解決方案的重要趨勢。

畢竟因為這樣，我還莫名得到了「技術長」的稱呼呢！（？）🤣

📌 本篇重點整理