3 小時快速上手：用 Next.js + Firestore 搭建簡易管理後台

背景

最近工作上負責一個比較探索型的任務，主要目標是將音樂 (Track) 和影像 (Video) 做配對，最後產生一個吸引人的廣告。

由於缺乏機器學習的背景，我只能透過市面上大模型的多模態 (Multi-modal) 能力，想辦法摸索出方法。而方法的其中一個環節是透過理解音樂/影像後，進行特徵抽取 (Feature Extraction)。

由於項目很早期，一開始我都直接自己寫個 script/python 腳本，調用 Google Vertex API 後存成 json 檔案。但後來發現這個方式，讓主管很難掌握我目前專案的進度 ; 需要別人協作幫忙時，也只能在各自電腦先修改再傳給彼此看，非常麻煩。

後來想了想，如果有個簡單的影片音樂/影像的特徵管理平台 (Feature Portal) 會方便很多，於是就決定手動搭建！

功能需求

• 輸入 GCS 影片名稱（及路徑），創建 LLM 任務
• 點擊按鈕，觸發調用 LLM 分析影片特徵，儲存在資料庫
• 能編輯 Prompt，測試不同分析效果
• （進階）批量上傳視頻id，進行 LLM 分析
• （進階）進行音樂-視頻匹配

資料庫選擇

由於公司整體技術都搭建在 Google cloud 上，我就沒有考慮之前試過 MongoDB Atlas 的方案。查了一下發現 Google 有個非關聯式資料庫 (NoSQL Database) — Firestore。剛好我的需求很單純不需要關係型資料庫 (SQL Database) 的能力，於是就先決定選擇 Firestroe 作為儲存資料庫。

什麼是 Firestore?

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.

簡單理解之後，我發現 Firestore 非常適合這樣簡易功能的平台。許多選擇自建雲端資料庫時會遇到的問題，例如機器擴展、網路出錯排查、....等，Firestore 都能夠自動解決（參見 官方文檔）。

因此比起選擇 self-host mongoDB 這種方案，初期簡易的專案、或者上述的簡易管理後台，都非常適合選擇 Firestore，能省去維護成本，將更多心力放在功能開發。

實際搭建

接著就開始寫代碼。我先參考了Google Colab 搭建 Next.js + Firestore App 裡的範例代碼，在本地端啟動一個 todo app，接著慢慢開始增加需要的功能。

例如我先開發 “新增 Video Feature” 功能，本質上跟新增 todo差不多，只不過輸入的是影片uid，以及支持 “調用 LLM 大模型”分析影片的按鈕。這裡 LLM 大模型則延用 Google 提供的 Vertex AI 能力，初版大約花一小時就開發完成。

其他技術

眼尖的讀者可能會發現，上面的 UI 介面並沒有上傳音樂/影片的按鈕：那這些用到的音樂跟影片都從哪裡來？也是存在 Firestore嗎？

不是的。原因是我們許多現有素材都存在 GCS (Google Cloud Storage) 上，所以只需要提供 trackId/videoId，就可以拼湊出雲端的檔案連結。如果你是自己使用，也可以參考做法將 media 儲存在像 Google Cloud GCS、Amazon S3 這樣的 blog storage上面。

小結

上面這些功能，從發想到實作出來大概花了兩天時間，不過真正開發時間可能只有3-4小時。其中所有程式碼都是我用 cursor vibecode 出來的，只能說真的太快速方便了！

但這個專案目前也還有許多待完成的功能，例如 Prompt 版本管理就是非常重要、可以幫助不同版本 Prompt 比較效果及切換版本、但較為複雜的功能，需要再花時間實作。

現在由於大模型的出現，實作門檻真的越來越低，如何具備好想法、培養優秀的 UX 直覺就變得很關鍵。必須透過看更多案例、業界 best practice、或開源專案等等前沿實踐，才是業界更需要的能力。