外部 API 與資料處理 — Technovation 挑戰賽

學習目標

說明網頁應用程式如何將資料上傳至雲端儲存空間
區分雲端檔案儲存與雲端資料庫儲存
了解什麼是 Supabase 以及如何建立您自己的雲端儲存空間

您將打造的內容

一個包含資料庫 的Supabase專案 ，用於儲存利益相關者的意見回饋
更新版創辦人工具包 利害關係人回饋意見儲存於 Supabase 資料庫中，具備新增/編輯/刪除記錄的功能

假設

學生已完成先前技術單元，並運用創始人工具包進行實作。

活動

活動 1：建立您的 Supabase 帳戶與專案
活動 2：將本地儲存移轉至雲端儲存
活動 3：將「創辦人工具包」更新為雲端儲存

從本地儲存到雲端儲存

你的創業者工具包隨著每個單元的推進不斷擴充。你已建構出用於收集回饋、追蹤利害關係人及人工智慧驅動分析的模組。這些工具不僅協助你發展商業構想，同時也幫助你理解如何順應構想的演進。

您所有的資料目前都儲存在 localStorage 中。

但當你嘗試與他人協作，或在當前 GitHub 程式碼空間之外使用應用程式時，這項限制便會立即成為問題。

成功服務真實用戶的應用程式需要具備以下特質的數據：

資料持續存在

用戶可以放心將資訊託付給您

跨裝置運作

人們會在瀏覽器、電腦、手機等裝置之間切換。

啟用協作

像你們這樣的業務與開發團隊需要共享資訊

能夠成長與擴展

對1位使用者有效的方法，也必須對1,000位使用者有效

本單元是您邁向雲端儲存的第一步。您將更新創始人工具包，使原本儲存在 localStorage 的資料能安全地存放於雲端，並實現隨時隨地存取。更重要的是，您將學習適用於其他情境的雲端資料儲存模式。

雲存儲

雲端儲存主要可從兩種角度考量，理解兩者差異有助於您為不同類型的資料做出正確選擇。

檔案儲存對於使用者上傳或下載的檔案非常實用。所有專案工作表都是絕佳範例，因為這些文件需要長期儲存與檢索，以便隨時隨地與他人協作。目前您很可能正使用 Google 雲端硬碟作為檔案儲存方案。
資料庫儲存適用於您擁有結構化資訊的情況，例如包含名稱、類型及意見回饋欄位的利害關係人記錄。

目前，我們將專注於資料庫儲存。

選擇雲端儲存服務

市面上有多種雲端儲存方案可供選擇。以下是針對剛開始建立最小可行產品（MVP）的使用者，最受歡迎的幾種方案比較方式。

服務

設定複雜度

免費方案

免費方案後的定價

最適合

Supabase

簡單

500MB 資料庫儲存空間
1GB 檔案儲存空間
寬鬆的 API 限制
無限次 API 請求*

每月25美元

新創公司打造最小可行產品
學習 SQL
需要驗證 + 資料庫的應用程式

Firebase

簡單

1GB 檔案儲存空間
1GB 資料庫儲存空間
寬鬆的 API 限制
包含即時同步功能

隨用隨付 (儲存空間：每GB 0.18美元 $0.06/GB下載)

Google 生態系統
即時應用程式
行動應用程式
初學者（比SQL更簡單）

MongoDB Atlas

中型

512MB 資料庫儲存空間
共享叢集
有限的連接

每月9美元 (專用叢集)

NoSQL 資料庫
彈性資料架構
基於文件的儲存
大規模資料集的擴展

亞馬遜網路服務／Google雲端平台

複雜

有限（依服務而異）
提供12個月試用期
通常需要信用卡

變數（高度取決於使用方式）

企業應用程式
需要完整基礎設施控制
進階縮放需求
具備DevOps專業知識的團隊

本課程將使用 Supabase 儲存服務 。

為何選擇 Supabase？

無需繁複設定或信用卡
一個真正適用於最小可行產品（MVP）的慷慨免費方案。 某些所謂的「免費方案」限制嚴苛，實質上僅是試用版本。自2026年1月22日起，Supabase每月免費提供1GB儲存空間與無限API請求次數。這足以讓您無須擔憂意外帳單，從建置、測試到最小可行產品（MVP）的軟性上線皆能順利進行。隨著新創企業成長，Supabase提供可隨需求擴展的彈性方案。
單一平台，滿足您整個後端儲存需求
Supabase 不僅適用於最小可行產品（MVP）。如今，擁有數百萬用戶的企業皆在 Supabase 上運行，因此您在此累積的技能將能直接轉移應用至其他領域。

您需要建立一個 Supabase 帳戶與專案，並取得 API 金鑰，這與 Google AI Studio 和 Hugging Face 的操作方式類似。其核心概念相同：您正在設定應用程式與外部服務進行通訊的存取權限。

兩者的差異在於，Supabase 將成為您基礎架構中更核心的環節。Gemini 專注處理單一任務——即 aII 分析，而 Supabase 則能承擔儲存、資料庫管理，甚至用戶認證等功能。它本質上是為您的應用程式奠定整個基礎架構。

安全

在建立和使用雲端儲存時，考量安全性至關重要。Supabase 允許您為應用程式中的不同角色設定多層級的安全防護。在基礎層級上，啟用 行級別安全（RLS） 如同鎖上大門。未啟用時，資料庫猶如敞開的書本；上鎖後，則需為不同群組創建專屬「數位鑰匙」。以創辦人工具包為例，我們希望讓利益相關者直接提交意見回饋，但不允許他們（或任何開啟應用程式者）檢視、編輯或刪除資料庫記錄，同時仍需確保團隊成員擁有完整存取權限。因此我們將為資料庫設定兩級權限：

我們正在實施兩個不同的角色：

持份者（匿名）： 公眾可查閱插入記錄。他們可以貢獻內容，但無法修改歷史。
團隊（已驗證）： 透過電子郵件與密碼安全登入。此「管理員」權限可執行完整 建立、讀取、更新及刪除（CRUD） 以維持工具包的有序管理。

活動 1

建立您的 Supabase 帳戶與專案

預估時間：15分鐘

您將建立一個 Supabase 帳戶與專案，設定您的「持股人」資料表，並取得 API 金鑰以便從應用程式存取該資料表。

1. 建立您的 Supabase 帳戶

前往 supabase.com 以建立帳戶
點擊註冊。我們建議您使用 GitHub 帳戶註冊，以便保持帳戶管理井然有序。

2. 建立新專案

註冊完成後，點擊建立新專案。
請輸入您的專案名稱。
建立一個強密碼，或點擊「產生密碼」以自動建立。
請將此密碼存放於安全之處，您將需要它來直接存取資料庫。
請選擇您的組織（免費版本可能僅允許一個組織，並會顯示預設組織）。
請選擇離您和您的使用者最近的區域。此選擇將影響效能表現，因為儲存於使用者附近區域的資料載入速度會更快。
在「安全性選項」下：
- 請保留預設的「資料 API + 連線字串」，因為這能讓您在使用其 API 或直接連線至資料庫時享有更大的靈活性與簡便性。
- 請保留預設的「使用公共架構進行資料 API」。此為適用於多數應用程式的標準設定。「專用 API 架構」選項適用於進階安全需求，目前您尚無此需求。
點擊建立新專案，並等待其完成（約需1-2分鐘）

3. 建立資料庫表格

我們將在資料庫中建立一個表格，用於存放利益相關者的反饋意見。

在「建立您的資料庫」下方，點擊「表格編輯器」按鈕。
點擊建立表格。
將表格命名為「利害關係人」，並為其提供描述。
Supabase 會以id和時間戳記（稱為created_at）建立資料表。請保留這些欄位，因為為資料表中的每行資料擁有 id 很有用，且能協助您掌握資料何時被新增至資料表。
我們還需要添加什麼？請回頭檢視創辦人工具包中的「利害關係人追蹤」標籤頁。該表格包含姓名、類型及 關鍵回饋三欄。請新增這三欄，並將類型設定為文字欄位。
點擊以儲存表格。

4. 設定資料庫存取的安全政策

在表格編輯器中，點擊您利益相關者表格旁的三個點，然後點擊檢視政策。

應啟用RLS （列級安全性）。若尚未啟用，請執行「啟用 RLS」操作。此功能可讓您精確設定哪些使用者具備存取資料庫及應用程式中表格的權限。
點擊「建立政策」為您的團隊設定 RLS 政策。
在下一視窗中，
1. 政策名稱的類型團隊存取權限。
2. 在政策指令中選擇「全部」。
3. 針對目標角色，在下拉式選單中選擇「已驗證」。
4. 使用後，請輸入true。
5. 檢查後，請輸入true。
6. 點擊儲存政策。

此設定允許已驗證的使用者（團隊成員）對該資料表擁有完整的讀取、寫入及刪除權限。

新增另一項政策（再次「建立政策」），這次是針對利害關係人。
這將允許利害關係人透過應用程式直接提交回饋。這次：
1. 為「政策名稱」設定「利害關係人存取權限」。
2. 請選擇「插入」作為政策指令。
3. 針對目標角色，在下拉選單中選擇匿名。
4. 使用後，請輸入 true
5. 檢查後，請輸入true。
6. 點擊「儲存政策」。

5. 新增使用者

您現在需要將經過驗證的使用者新增至資料庫。這可能包含整個團隊成員，但目前只需將自己新增為使用者，以便執行並測試應用程式。

在螢幕左側的「驗證」區塊下，點擊「使用者」。
點擊「新增使用者」。
輸入您的電子郵件地址、一個您能記住（或另行保存）的密碼，保持「自動確認」選項勾選狀態，然後點擊「建立使用者」。

目前，我們的創始人工具包將所有資料儲存在本地儲存空間中。我們可以直接在Supabase資料庫中重新建立，但鑑於先前工具包執行階段已累積大量利害關係人反饋，建議將現有資料遷移至Supabase的「利害關係人」資料表。此操作可透過手動複製貼上完成，甚至能委託大型語言模型代勞。

但由於我們的資料採用 JSON 格式，我們可以透過 Supabase 的 SQL 編輯器，使用 SQL 語法將記錄插入資料表。 SQL，或稱結構化查詢語言是一種用於管理資料的領域特定語言，尤其適用於關聯式資料庫管理系統。

活動 2

將本地儲存移轉至雲端儲存

預估時間：15分鐘

您將從瀏覽器的本地儲存中提取利害關係人資訊，然後將其匯入您的 Supabase 資料表。

1. 從 LocalStorage 擷取 JSON

返回您的 Codespace，啟動創辦人工具包。
在瀏覽器中開啟開發人員工具，並在開發人員工具視窗中點擊「應用程式」以檢視 localStorage。
在 localStorage 中找到您的利益相關者反饋資訊，並在首行 JSON 內容上點擊右鍵。您將看到彈出式選單，可選擇「複製值」。
開啟文字編輯器（例如TextEdit或Notepad），將JSON內容貼入空白文件中。
檢視檔案並注意每個鍵的名稱在 JSON 中的位置，因為它們可能與 Supabase 表格中的欄位名稱略有不同。

以下是我們的範例 JSON

				
					[
  {
    "name": "Jill Stein",
    "type": "interview",
    "feedback": "She is a teacher and knows many students this is a problem for. She thinks bringing in the parents and family to give them some education on the issue is helpful. Also bringing in the school admin to see how they can support. Also, many students do not have good internet access, especially in rural areas.",
    "timestamp": "2026-01-14T03:47:10.531Z"
  },
  {
    "name": "Phil Green",
    "type": "email",
    "feedback": "He is a student and has this issue. He does not have good internet access and he does not have transportation to get to a library either. He would need a way to get access during the school day or a means to access it otherwise. ",
    "timestamp": "2026-01-14T03:48:13.193Z"
  },
  {
    "name": "Billy Bob",
    "type": "interview",
    "feedback": "I absolutely love this idea. We need it!",
    "timestamp": "2026-01-16T01:43:12.027Z"
  },
  {
    "name": "Anna Banana",
    "type": "email",
    "feedback": "This is really a bad idea. I don't like it.",
    "timestamp": "2026-01-16T01:46:33.361Z"
  },
  {
    "name": "Millicent Penny",
    "type": "interview",
    "feedback": "I Love it! Best idea ever.",
    "timestamp": "2026-01-16T01:50:46.785Z"
  },
  {
    "name": "Fred Flintston",
    "type": "interview",
    "feedback": "This is probably the worst idea I have ever heard. Do not like it.",
    "timestamp": "2026-01-16T01:52:06.319Z"
  },
  {
    "name": "Betty White",
    "type": "email",
    "feedback": "Do not do it. It is a bad idea.",
    "timestamp": "2026-01-16T01:53:19.377Z"
  },
  {
    "name": "Mary Contrary",
    "type": "email",
    "feedback": "This is absolutely the most amazing idea I have ever heard. I absolutely love it.",
    "sentiment": "positive",
    "timestamp": "2026-01-16T02:05:42.541Z"
  }
]

2. 將資料轉移至 Supabase

開啟您的 Supabase 專案，在左側圖示選單中點擊SQL 編輯器。
將以下程式碼貼入 SQL 編輯器。

				
					INSERT INTO "Stakeholders" (name, type, feedback, created_at)
SELECT 
  value->>'name',
  value->>'type',
  value->>'feedback',
  (value->>'timestamp')::timestamp
FROM json_array_elements('YOUR JSON HERE'::json) AS value;

查看程式碼以理解其運作方式。
首行INSERT INTO語句指定要將資料插入 Stakeholders 表，具體插入以下 4 個欄位：
請編輯此行以匹配您的 Supabase 資料表名稱與欄位名稱完全。
SELECT語句用於指定要從 JSON 中提取的欄位/鍵值。
編輯此處以修改列出的欄位，使其與完全您 JSON 中的鍵值。
- value->>'name' 表示「從 JSON 中取得 'name' 欄位」
- ::timestamp 表示「將字串轉換為時間戳記格式」
FROM欄位指定該 JSON 陣列為一組欲循環處理的資料列。每筆記錄或資料列稱為值。請將您的 JSON 內容置於 FROM 行中的引號 ‘ ’ 之間。
點擊「執行」按鈕以執行 SQL 指令。
若遇到任何錯誤，請嘗試自行除錯，或尋求大型語言模型（LLM）的協助。否則，您應會看到成功訊息。
返回表格編輯器。您應能看到記錄已新增至表格中。

活動 3

將創辦人工具包更新至雲端儲存

預估時間：15分鐘

您現在將為利害關係人新增插入功能，使其能自行添加回饋意見，並為團隊成員啟用利害關係人資料庫的讀取/寫入/刪除權限。

1. 開啟您的 GitHub 儲存庫與代碼空間

由於我們將在程式碼中進行大量變更，建議遵循先前單元中介紹的完整 Git 工作流程。

前往 GitHub 並開啟您的創辦人工具包儲存庫
從主分支建立新分支並命名為 supabase-cloud-storage
開啟您之前的 Codespace，並在該處檢查新的分支。
請等待環境載入。

2. 將憑證新增至您的「.env」檔案

您需要準備您的 Supabase 專案網址及可發佈金鑰，這基本上就是您資料庫的 API 存取權限。

在 Supabase 中，點擊左側的齒輪圖示即可進入專案設定頁面。
點擊資料 API以查找專案網址。
點擊左側的「API 金鑰」，您即可在此處找到您的公開金鑰。
在 Codespaces 中，開啟您的「.env」檔案並新增以下兩行：

SUPABASE_URL=您的_SUPABASE_專案_網址
SUPABASE_ANON_KEY=您的_SUPABASE_公開_金鑰

複製/貼上上述文字，並替換為您的專案網址及來自 Supabase 的可發佈金鑰。

3. 指示 Copilot 添加 Supabase 儲存功能

我們將分幾個步驟進行，因為涉及的內容相當多，因此分階段添加有助於處理除錯和後續可能出現的問題。

從以下提示開始：

更新「持份者追蹤器」標籤頁以執行以下操作：

移除利害關係人表格的顯示，僅保留表單。

不再將資訊儲存至本地儲存空間，而是改為儲存於 Supabase。資料表名稱為 Stakeholders。使用匿名角色。

.env 檔案已包含 SUPABASE_URL 和 SUPABASE_ANON_KEY。

請務必更新內容安全政策，以允許 Supabase 端點存取。

匿名用戶的插入內容應不嘗試在插入後讀取資料，因為這會失敗——他們僅擁有插入權限。
當記錄已新增至 Supabase 時，請顯示成功訊息。

4. 執行並測試應用程式

請遵循 Copilot 提供的任何安裝指示來安裝套件。
執行應用程式，嘗試新增一位附帶意見的新利害關係人。您應會收到操作成功的確認訊息。
前往您的 Supabase 表格編輯器，查看該表格是否已更新為包含新記錄的狀態。您可能需要重新整理瀏覽器才能看到新記錄。
借助大型語言模型（LLMs）進行故障排除，以確保應用程式運作正常。

5. 添加管理員登入

請要求 Copilot 新增以管理員身分登入的功能，以便能夠檢視所有利害關係人紀錄。
這是範例提示：

在「持份者追蹤器」畫面中新增「管理員登入」按鈕。
顯示電子郵件/密碼表單。
使用 Supabase 的 auth.signIn() 方法驗證使用者。
若已登入，請在表單下方於螢幕上顯示持份者表格。
同時為已登入的用戶顯示登出按鈕。
若未登入，僅顯示表單，不顯示表格。

再次執行您的應用程式，並使用您在 Supabase 中設定的電子郵件/密碼以管理員身分登入。登入後，您應能在「持股人追蹤器」標籤頁中看到「持股人」資料表。
登出。表格不應顯示。
借助大型語言模型（LLMs）進行故障排除，以確保應用程式運作正常。

6. 添加編輯與刪除功能

請 Copilot 為已登入的管理員使用者新增編輯與刪除功能。

這是範例提示：

僅限管理員使用者，為利益相關者表格的每行新增編輯與刪除按鈕。
這些按鈕應能對應至 Supabase 資料表中，用於編輯與刪除對應資料列的功能。

再次執行應用程式。嘗試新增、編輯及刪除記錄，並確認 Supabase 中的資料表能正確更新。
登出後確認您仍可新增記錄，但無法執行其他操作。
借助大型語言模型（LLMs）進行故障排除，以確保應用程式運作正常。

7. 多裝置測試

除了確保利益相關者資料的安全性與保密性外，將資料儲存於雲端還意味著您的應用程式使用者無論身處何地都能存取資料。這將開啟諸多可能性，例如讓利益相關者直接添加自己的反饋，以及多名團隊成員透過手機存取資料。

這正是雲端儲存的真正威力。若要在應用程式仍在Codespaces開發階段時進行測試，可採取以下步驟：

在 Codespaces 中輸入 npm start 來啟動您的應用程式。
在底部面板中，於「終端機」旁邊找到「連接埠」標籤頁。
您應能看見您的運行埠號（例如 3000）。
在端口上點擊右鍵，前往「端口可見性」選項，並選擇「公開」。視窗中的可見性狀態將變更為「公開」。

再次在該連接埠上按右鍵，點擊「複製本機位址」。此即應用程式網址。
將網址貼到手機可存取的位置。您應能在此處看到應用程式正在運行。測試新增利益相關者、以管理員身分登入等功能。
完成測試後，請務必將端口可見性重新設為「私有」，或直接停止應用程式。否則您的應用程式將處於完全開放且不安全的狀態。

8. 確認環境變數檔案是否被忽略

當您確認您的「利害關係人追蹤器」已能成功在 Supabase 上儲存、更新及刪除記錄，且能在多台裝置上正常運作後，即可進行提交與推送。

但首先，請開啟您的.gitignore檔案，並確認其中包含.env檔案。正如您先前所學，此舉能防止 Supabase 憑證被提交至 GitHub，確保這些敏感資訊始終保持安全無虞。

9. 提交並將變更推送至 GitHub

當您確認所有功能運作正常後，即可將變更提交並推送至 GitHub。操作方式有兩種：透過 Codespaces 中的「源代碼控制」功能，或在終端機視窗中輸入 git 指令。
前往 GitHub 合併拉取請求，並刪除該分支。

反思

您已將本地儲存的利害關係人反饋移至雲端，現可供應用程式使用者存取。雲端儲存是多數應用程式的常見功能，掌握其實現方法至關重要。

01

遷移

在遷移資料時，哪些部分比預期更困難？哪些部分更容易？

02

Possibilities

雲端儲存如何改變您最小可行產品（MVP）與使用者所能實現的可能性？

03

規劃

展望未來，哪些人需要使用貴產品的哪些權限層級？誰能新增資料？誰能查看所有內容？

關鍵術語

雲端檔案儲存：將檔案（PDF、圖片、文件）儲存於遠端伺服器，可透過網際網路從任何裝置存取。
雲端資料庫：將結構化資料（行與列）儲存於遠端伺服器
Supabase： 一個提供儲存、資料庫及驗證服務的平台，具備寬裕的免費方案，專為新創公司與最小可行產品（MVP）設計。
持久性：即使關閉瀏覽器、重新啟動裝置或切換裝置後，仍會持續保存的資料
CRUD 操作：資料儲存的四項基本功能：
- 建立– 新增記錄 (INSERT)
- 讀取– 檢索並顯示資料（SELECT）
- 更新– 修改現有記錄（UPDATE）
- 刪除– 移除記錄 (DELETE)
SQL（結構化查詢語言）：用於管理和查詢關聯式資料庫的程式語言
行層級安全性 (RLS)– 控制哪些使用者可存取資料庫表中哪些資料列的安全功能

其他資源

Supabase JavaScript 文件 – 官方指南：使用 JavaScript 整合 Supabase
W3Schools SQL 教學

課程內容

上一個小測驗

回到課程

下一個小測驗