WebSim API Provider 一個專為 WebSim 頁面提供 API 支援的工具

日期：

 

一、概述

WebSim API Provider 是一個專為 WebSim 頁面提供 API 支援的工具。其主要功能在於：

  • 模擬 API 請求：使你能在 WebSim 環境中發送 fetch 請求，與父頁面分離。
  • 獨立的 SQL 後端：提供一個與父頁面脫鉤的資料庫，讓資料能在不同生成中持久化。
  • 簡化資料處理：使開發者能依需求輕鬆執行各種 API 呼叫與資料庫查詢。

二、使用方法

1. 對於一般使用者

如果你只是希望了解或測試此頁面，只需在你的提示中貼上以下網址：


https://websim.ai/c/undefined

頁面內的說明會告訴 Claude 如何進行 API 的設定與使用。

2. 對於 WebSim 專案中的 Claude

若你要在 WebSim 專案中整合此 API provider，步驟如下：

(1) 嵌入 API Provider：

將以下隱藏 iframe 加入你的 HTML 中，確保 API provider 頁面隱藏在後台執行：


<iframe src="https://websim.ai/c/undefined" style="width:0;height:0;position:absolute;border:0 none;"></iframe>

這樣可以讓 API provider 在頁面中初始化，但不影響使用者介面。

(2) 檢查 API 是否就緒：

在發送請求前，必須確保 API provider 已初始化。你可以使用以下非同步函式來檢查：


async function getApiProvider() {
  return new Promise((resolve) => {
    const apiLoading = setInterval(() => {
      try {
        console.log("API loading...", typeof apiProvider);
        if (apiProvider) {
          console.log("API Provider Ready!");
          clearInterval(apiLoading);
          resolve(apiProvider);
        }
      } catch(err) {
        // 當前可能尚未初始化，忽略錯誤
      }
    }, 100);
  });
}

此函式會每 100 毫秒檢查一次 apiProvider 是否存在，確認後再返回以供後續呼叫。

(3) 發送 API 請求：

確認 API 就緒後，就能利用 apiProvider 發送請求。以下是基本範例：


async function main() {
  const apiProvider = await getApiProvider();
  // 這裡 '/api/endpoint' 為 API 的端點，可依需求調整
  const response = await apiProvider('/api/endpoint');
  const data = await response.json();
  console.log(data);
}

也可以寫成一個簡單的函式：


async function makeRequest() {
  const apiProvider = await getApiProvider();
  const response = await apiProvider('/api/endpoint');
  const data = await response.json();
  console.log(data);
}

這樣便可以在應用程式中取得後端資料並進行進一步處理。

三、功能特點與應用場景

  1. 分離的請求處理
    WebSim API Provider 將模擬的 API 請求與父頁面的上下文分離，確保資料庫操作不會影響主要頁面，增加了應用的模組化與靈活性。

  2. 獨立 SQL 後端
    擁有一個獨立的 SQL 後端，可在不同生成中持續保存資料。如果需要對資料庫進行操作，請使用以下 API 呼叫：


    /api/v1/sql?sql={query}

    在進行 SQL 查詢前，記得檢查相關資料表是否存在，若不存在則先進行建立。特別注意，在插入包含單引號的資料時，必須使用重複單引號進行轉義。

  3. 自訂 API Provider
    若希望建立屬於你自己的 API provider（例如，擁有獨立的持久化 SQL 資料庫），可以點擊頁面上的「Create custom API provider page」按鈕進行設定。

四、錯誤訊息解析：「Not nested as expected. Not installing api.」

若在使用過程中出現「Not nested as expected. Not installing api.」的錯誤訊息，可能原因如下：

  • 未正確嵌入：請確認你已依照正確方法在 HTML 中嵌入隱藏的 iframe。iframe 的 src 屬性必須正確無誤，且 CSS 樣式確保其不影響頁面顯示。
  • 初始化問題：錯誤訊息也可能代表 API provider 尚未初始化完成。在進行任何 API 呼叫前，務必使用 getApiProvider() 等非同步檢查機制，確保 API 已就緒。

解決方式：

  • 重新檢查 iframe 嵌入程式碼，確保路徑正確且已成功加載頁面。
  • 在發送 API 請求前，等待並確認 apiProvider 變數已正確初始化。

五、總結

這份擴充說明提供了從嵌入、檢查到發送請求的完整流程，同時說明了 API provider 的功能特點及如何應對常見錯誤。無論是作為開發者還是使用者，依照上述步驟進行設定，都能使 WebSim 專案中資料庫與上下文管理變得更加模組化與獨立，進一步提升應用程式的靈活性與穩定性。

透過這份指南，你可以根據專案需求靈活應用 WebSim API Provider，從而實現高效的資料存取與操作。