Builder.io API：網站動態內容擷取指南

1

Builder.io API：網站動態內容擷取指南

Builder.io 提供多種 API 解決方案，使開發者能夠在網站上動態擷取和顯示內容。這些 API 不僅功能強大，還設計得非常靈活，可滿足各種網站開發需求，從簡單的內容顯示到複雜的動態數據應用。

Content API：基礎動態內容擷取

Builder.io 的 Content API 是動態擷取內容的核心工具。它允許您發出請求以檢索 Builder 中任何模型的數據，支援使用 URL 參數進行高級查詢過濾，幫助您精確獲取所需數據。

Content API 的基本請求結構如下：

https://cdn.builder.io/api/v3/content/my-model-name?apiKey=YOUR_API_KEY

使用此 API 時，您必須始終提供以下參數：

  • 模型名稱（如 page）
  • API 密鑰（您的公共 API 密鑰）

Content API 支援多種查詢參數，如 enrich（包含參考和符號）和 query（MongoDB 風格的數據查詢）。它還支援許多運算符，包括 $eq、$gt、$in 等，使查詢更加精準和靈活。

GraphQL Content API：更強大的查詢能力

對於需要更複雜查詢功能的開發者，Builder.io 提供了 GraphQL Content API：

https://cdn.builder.io/api/v1/graphql/YOUR_API_KEY?query=QUERY

GraphQL API 允許您針對特定屬性和自定義字段查詢數據，並可以使用 GET 或 POST 請求，儘管出於性能和緩存考慮，推薦使用 GET。

GraphQL API 的優勢在於其靈活性和精確性，您可以準確指定需要的數據字段，避免過度提取，提高應用性能。例如，您可以使用目標參數針對特定 URL 路徑查詢頁面內容：

query {
  page(target: { urlPath: "/foobar" }, limit: 1) {
    content
  }
}

SDK 整合：框架特定解決方案

除了直接的 API 調用外，Builder.io 還提供多個 SDK 來簡化內容擷取和渲染過程：

  • React SDK：使用 builder.get() 方法擷取內容
  • Next.js SDK：使用 fetchOneEntry 函數從特定模型中檢索數據

這些 SDK 提供了更高級別的抽象，使開發人員能夠更容易地將 Builder.io 內容集成到他們的網站中。

實際應用示例

在實際應用中，您可以使用 Content API 動態擷取數據並顯示在網站上。例如，以下是使用 fetch API 擷取 Builder.io 內容的簡單示例：

const handleBanner = async () => {
  let page = await fetch(
    `https://cdn.builder.io/api/v2/content/recently-viewed?apiKey="key");
  let res = await page.json();
  // 處理響應數據
}

數據連接與視覺化編輯

Builder.io 還允許您連接到外部 API 數據源，並在視覺編輯器中綁定這些數據。這意味著您可以：

  1. 在 Builder.io 的視覺編輯器中連接到外部 API
  2. 對單個元素綁定數據或迭代數據
  3. 創建基於 API 數據的動態內容

例如，您可以連接到 API 端點如 https://randomuser.me/api?results=10，然後在視覺編輯器中綁定和迭代這些數據。

性能與緩存考量

使用 Builder.io API 動態擷取內容時，需要考慮一些性能和緩存問題：

  1. 緩存策略：Content API 支援 cacheSeconds 參數，用於控制內容的緩存時間
  2. 響應時間：API 響應時間可能會有所不同，特別是 Write API 通常需要更長時間
  3. 緩存刷新：在更新內容後可能需要多次調用才能獲取最新數據，因為緩存可能仍在生效

為了確保獲取最新內容，可以使用如下參數：

const builderResponse = await builder.get("model-name", {
  limit: 1,
  sort: { createdDate: -1 },
  cachebust: true,
  cacheSeconds: 0,
});

結論

Builder.io 確實提供了多種 API 和 SDK 選項，使開發者能夠在網站上動態擷取和顯示內容。從簡單的 Content API 到更強大的 GraphQL API，再到特定框架的 SDK，Builder.io 提供了全面的工具集，可滿足各種動態內容需求。

無論您是構建簡單的靜態網站還是複雜的動態應用，Builder.io 的 API 都能提供必要的彈性和功能，幫助您實現內容的動態擷取和顯示。考慮到緩存和性能問題，確保在實現時採用適當的策略，以獲得最佳用戶體驗。

Are there any specific tools or plugins recommended for integrating Builder.io’s API with a website

Builder.io 整合工具與插件推薦指南

Builder.io 提供多種工具和插件，幫助開發者將其 API 與網站整合。根據不同的整合需求和技術堆疊，Builder.io 提供了一系列官方支援的解決方案，使整合過程更加順暢高效。

官方 API 工具

Builder.io 提供多種 API 選項，每種都專為特定整合需求設計：

HTML API

HTML API 是為不使用現代 JavaScript 框架的網站提供的理想解決方案。它允許通過簡單的 API 請求獲取預先渲染的 HTML 內容，實現與任何技術堆疊的無縫整合。這對於傳統網站或不依賴 React、Vue 等框架的項目特別有用。

Content API

Content API 是獲取 Builder 模型數據的標準方式，適用於需要動態內容的網站。它支援豐富的查詢參數，可以精確控制返回的數據。

GraphQL API

對於需要更精確查詢和複雜數據操作的整合，GraphQL API 提供了更靈活的方式來檢索特定數據字段，避免過度提取數據。

內置插件推薦

Builder.io 提供多種內置插件，可簡化與第三方服務的整合：

電子商務插件

  • Shopify 插件：與 Shopify 商店整合，快速使用商品數據
  • Commercetools 插件：連接 Commercetools 商品和類別，用於自定義組件、內容定位和預覽
  • BigCommerce 和 Swell：支援無頭電子商務平台整合

這些電子商務插件可用於創建產品卡片、產品畫廊、加入購物車按鈕和產品推薦列表。

數據和搜索插件

  • Algolia 插件：增強網站的搜索和推薦功能，提升用戶體驗

設計和部署插件

  • Figma 插件：直接將 Figma 設計匯出到 Builder.io，簡化設計到代碼的轉換過程
  • Netlify 插件：簡化部署流程

設置和使用內置插件

設置這些內置插件的步驟通常包括：

  1. 進入 Builder.io 的「Integrations」部分
  2. 點擊想要使用的整合的「Enable」按鈕
  3. 完成啟用過程後，點擊通知中的「Configure」按鈕或集成磁貼上的「Settings」按鈕
  4. 提供所需的 API 密鑰和令牌，然後點擊「Connect」按鈕

API 數據連接工具

Builder.io 提供了連接外部 API 數據的工具，這對於創建動態內容特別有用：

  1. 在 Builder 視覺編輯器中的「Data」標籤下
  2. 「API Data」部分，點擊「+ API Data Source」按鈕
  3. 命名數據源並提供 JSON API 端點 URL
  4. 完成後可綁定單個元素或迭代數據

這使開發者能夠將外部數據源（如產品目錄、用戶數據或內容 API）與 Builder.io 內容整合。

自定義插件開發

對於特定的整合需求，Builder.io 支援創建自定義插件：

  • 可以擴展視覺編輯器界面
  • 創建自定義字段類型
  • 添加自定義定位功能
  • 與社區共享插件

這對於有特殊整合需求的企業特別有價值，允許根據特定工作流程和業務邏輯自定義 Builder.io 體驗。

頁面整合建議

對於頁面級整合，Builder.io 建議將 Builder 頁面放置在網站的頁眉和頁腳之間。這是開發者保留頁眉和頁腳在代碼庫中，同時整合頁面構建能力的常見用例。這樣，非開發人員可以獨立迭代頁面內容，無需依賴開發團隊。

結論

Builder.io 提供了全面的工具和插件生態系統，可滿足各種整合需求。選擇哪種工具或插件取決於您的特定用例、技術堆疊和整合目標：

  • 對於純 HTML/CSS 網站，HTML API 是最直接的選擇
  • 對於電子商務網站，相應的電子商務插件（如 Shopify、Commercetools）提供最佳整合
  • 對於需要高級數據整合的網站，Content API 或 GraphQL API 更適合
  • 對於特定需求，可以考慮開發自定義插件

通過利用這些官方推薦的工具和插件，開發者可以顯著簡化 Builder.io 與其網站的整合過程，實現更高效的內容管理和發布流程。

What are the pricing differences between the Basic, Growth, and Enterprise plans

Builder.io 價格方案比較：Basic、Growth 和 Enterprise 計劃差異

價格結構基礎

Builder.io 提供三個主要價格方案：Basic、Growth 和 Enterprise，每個方案針對不同規模的業務和需求設計。這些方案的價格差異不僅體現在月費上，還反映在功能和使用限制方面。

Basic 方案詳情

Basic 方案是 Builder.io 的入門級選擇，適合小型團隊或剛開始使用該平台的用戶。根據最新資料：

  • 價格：每用戶每月 $19（年付）或每用戶每月 $24（月付）
  • 用戶限制：最多支援 20 位用戶
  • 功能限制：包含 200 次月度代碼生成
  • 視覺視圖：無明確說明，但比 Growth 方案少

Basic 方案為用戶提供基本功能，讓團隊能夠使用 Builder.io 的核心服務，但可能在某些高級功能上有所限制。這個方案非常適合預算有限但希望利用視覺化開發平台的小型團隊。

Growth 方案詳情

Growth 方案針對成長中的團隊設計，提供更多功能和更高的使用限制：

  • 價格：每用戶每月 $39（年付）或每用戶每月 $49（月付）
  • 用戶限制：與 Basic 方案一樣支援最多 20 位用戶
  • 功能強化：包含更多進階功能
  • 視覺視圖：提供 100,000 次月度視覺視圖

Growth 方案的一個實際案例：如果一個網站有 1 名管理員和 3 名編輯者使用 Growth 方案（月付），月費約為 $196。這表明 Growth 方案的定價是按用戶數量計算的。

Enterprise 方案詳情

Enterprise 方案專為大型組織和企業客戶設計，提供最全面的功能套件和自定義選項：

  • 價格：自定義定價，需聯繫銷售團隊
  • 用戶限制：自定義用戶席位，無固定限制
  • 代碼生成和視覺視圖：自定義配額，根據企業需求靈活調整
  • 高級功能：包括多種僅限 Enterprise 客戶使用的附加功能

Enterprise 方案獨有的高級功能包括：

  1. Premium Support SLA：保證 99.9% 的運行時間和快速支援響應
  2. 自定義角色和權限：精細控制用戶訪問和權限
  3. 環境管理：創建如 QA 和生產等不同環境
  4. 工作流程和規則：改善協作和質量控制
  5. 單點登錄 (SSO)：支援 Okta、Google Workspace 和 Azure 等
  6. 跨空間模板：在所有空間共享模板
  7. 發布請求功能：用戶可以請求內容上線
  8. 智能定位：自定義定位屬性
  9. 貢獻者角色：為用戶提供有限的內容更新權限
  10. 私有插件：通過私有插件滿足特定用例
  11. 複製整個空間：在組織內複製整個空間
  12. 組織洞察：查看按空間分列的最活躍用戶

計劃比較與選擇考量

選擇適合的 Builder.io 方案需要考慮多個因素：

  1. 用戶數量：計劃成本直接與管理員和編輯者數量相關。例如，20 個 Basic 網站和 20 個 Growth 網站，每個網站有 2 名管理員和 5 名編輯者，月費約為 $10,220。

  2. 網站數量：Builder.io 的定價與網站數量有關。管理多個網站可能需要考慮 Enterprise 方案以獲得更好的成本效益。

  3. 代碼生成需求：Basic 方案提供 200 次月度代碼生成，而 Enterprise 方案則提供自定義配額。

  4. 視覺視圖需求：Growth 方案提供 100,000 次月度視覺視圖，而 Enterprise 方案則根據需求自定義。

  5. 企業功能需求：如需 SSO、自定義角色和高級協作功能，Enterprise 方案是唯一選擇。

結論

Builder.io 的三個價格方案提供了靈活的選擇，從小型團隊到大型企業都能找到適合的解決方案。Basic 方案適合初創企業和小型團隊，Growth 方案適合成長中的中型團隊，而 Enterprise 方案則為大型組織提供自定義和高級功能。

選擇適合的方案時，應考慮團隊規模、網站數量、預期使用量以及對高級功能的需求。隨著業務擴展，Builder.io 允許用戶輕鬆升級計劃以滿足不斷增長的需求。

對於尋求更精確定價資訊的用戶，建議直接聯繫 Builder.io 銷售團隊，以獲取最新的定價詳情和適合特定需求的自定義報價。