如何使用 Flagsmith 在 React 應用程序中集成功能標誌

Alicia Brunner included in Programming React Web Development

2023-08-31 276 words 2 minutes

Contents

功能標誌是一個重要的工具，有助於簡化軟件更新的構建和發布。您可以使用它們來定位特定的用戶組或整個用戶群。

從本質上講，這些工具可以在實時生產環境中實施重大更改，而不會妨礙其操作流程。這是通過利用功能標誌而不是複雜的代碼修訂和部署過程來實現的。

功能標誌:實施和好處解釋

毫無疑問，軟件開發是一項持續的、週期性的事業。只要個人仍然致力於某一特定項目，至少一個個人或實體就會持續實施修改和增強。

理想情況下，持續集成和持續部署 (CI/CD) 管道有助於以最少的人工干預向生產環境無縫交付一致的代碼更新。然而，此過程通常需要對部署工作進行大量投資，這既耗時又耗費資源。

事實上，通過利用特徵標誌，人們可以僅通過調整配置設置來向其用戶群的一部分或全部傳播升級。

在各種場景下，使用功能標誌可以被認為是合適的，例如:

當人們希望在普遍實施創新概念之前對其進行評估時，對受控用戶樣本進行實驗可以提供一種有效的方法來收集有關產品功能及其對最終用戶的總體影響的定性和定量數據。

當面臨需要關鍵補丁或快速補救措施的緊急情況時，至關重要的是建立一種機制，能夠立即為任何故障組件部署必要的更新和解決方法。這樣可以在發生不可預見的情況時迅速採取行動，最大限度地減少停機時間並確保整個系統的持續穩定性和功能。

根據個人特徵、偏好和訂閱計劃激活或停用某些功能來定制用戶體驗是提供定制服務的一個重要方面。

Flagsmith 入門

Flagsmith 提供了一種全面的方法來實現功能標誌，其中包括開源選項和基於雲的平台。在此示例中，我們將利用他們基於雲的服務將功能標誌無縫合併到 React 應用程序中。

開始:

⭐ 前往 Flagsmith 的雲服務，註冊一個帳戶，然後登錄到您帳戶的概述頁面。

⭐ 在概述頁面上，單擊“創建項目”按鈕以設置新的 Flagsmith 項目。 Flagsmith 將在您的項目設置頁面上自動創建開發和生產環境。在本教程中，您將使用開發環境來實現功能標誌。

⭐ 確保您處於開發環境中，選擇“功能”選項卡，然後單擊“創建您的第一個功能”按鈕。

⭐ 為您想要標記的功能提供一個 ID，最好是一個字符串，單擊切換按鈕以默認啟用功能選項，然後點擊創建功能。在這種情況下，您將對不同電子商務產品的評級實施功能標誌。

⭐ 您可以通過導航到功能設置概述頁面來查看和管理新創建的功能。

為了完成環境設置，您需要獲取與客戶端上下文關聯的密鑰。

生成客戶端環境密鑰

獲取客戶端環境密鑰:

⭐ 單擊“開發環境”下的“設置”選項卡。

⭐ 在開發環境設置頁面，點擊Keys選項卡。

⭐複製提供的客戶端環境密鑰。

該項目的源代碼託管在 GitHub 平台上的專用存儲庫中。

創建 React 項目

首先，決定您是否希望通過執行上述命令來使用前者，或者通過將其作為您的首選設置方法來選擇後者。需要注意的是，本指南中提供的說明將假定使用 Vite 來建立 React 應用程序。

要繼續，請將 Flagsmith 的軟件開發套件 (SDK) 合併到您的項目中。該SDK支持多種

 npm install flagsmith

將.env 文件合併到項目存儲區域的主目錄中是確保充分訪問客戶端環境變量的重要步驟。要建立此配置，您應該生成一個新的.env 文檔並將其放置在現有文件層次結構的最前面。具體來說，必須輸入如下所示的客戶端環境變量才能成功與系統集成:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>"

添加產品列表功能組件

為了測試 Flagsmith 的功能標記功能，您將構建一個簡單的組件，該組件將通過 DummyJSON API 呈現電子商務產品列表。

目錄中的每個項目都具有多個特徵，包括標題、成本、產品描述和總體產品評估。我們的目標是利用功能切換來控制產品評級方面。合併此功能後，用戶將能夠通過位於 Flagsmith 遠程服務界面上的按鈕來操縱該功能。

在源目錄中，請創建一個名為“components”的新子目錄並將其嵌套在現有層次結構中。然後，請在所述組件文件夾中放置一個名為“Products.jsx”的新文件，並複制隨後的代碼塊以填充其內容。

首先，進行以下導入:

 import "./style.component.css";
import React, { useState, useEffect } from "react";
 import flagsmith from 'flagsmith';

通過建立初始狀態參數、實現必要的 JavaScript 組件以及在適當的上下文中合併相關的 HTML 元素來合併功能組件。

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <>
       <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
}

javascriptimport { useState } from’react’;import axios from’axios’;function DummyAPI() {const [products, setProducts]=useState([]);useEffect(()=> {async function fetchData() {try {const響應=等待axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} catch (error) {console.log(error);}}fetchData();}, []);return ( 虛擬產品{products.map （（產品）

將以下代碼合併到功能組件中:

 useEffect(() => {
    const fetchProducts = async () => {
        await fetch("https://dummyjson.com/products")
          .then((res) => res.json())
          .then((json) => setProducts(json.products));
         }
    fetchProducts();
  }, []);

初始渲染時，執行 fetchProducts 函數，該函數檢索產品信息並相應更新 products 變量的當前狀態。

最終，人們可以遍歷一組項目並將它們顯示在網絡瀏覽器中。

在“product-list”類劃分下方，將後續代碼合併到新的 div 元素中:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2>
         <p>Price: ${product.price}</p>
        <p>{product.description}</p>

        <h3>Rating: {product.rating}</h3>
    </div>
))}

鑑於此，人們能夠輕鬆檢索並展示從模擬 JSON API 檢索到的逐項產品目錄。

集成Flagsmith的SDK

為了使用useEffect鉤子在React應用程序中合併和設置Flagsmith的軟件開發工具包，應該在調用所述鉤子中的fetchProducts函數後立即放置給定的代碼片段。

 flagsmith.init({
    environmentID:environmentID,
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
        setShowProductRating(flagsmith.hasFeature('product_rating'));
    }
});

集成此功能允許在 React 應用程序的緩存和分析環境中實現功能標誌。

該功能採用回調機制，根據產品評級功能標誌的當前狀態自適應地調節產品評級信息的呈現。在雲服務中激活後，可以將其視為活動（啟用），在同一上下文中停用後，可以將其視為非活動（禁用）。

最後，通過在“return”代碼塊中包含一條語句來修改產品評級的“h3”標籤，如下所示:

   {showProductRating && <h3> Rating: {product.rating}</h3>}

當前更新的功能使得能夠在激活時顯示產品評級，如其與 showProductRating 變量的關聯所證明的那樣，該變量被更新以指示產品評級應與其他相關屬性一起顯示。相反，當停用時，showProductRating 變量將恢復到其原始狀態，從而阻止在界面中顯示產品評級。

最後，通過合併 Product 組件的導入語句來修改 App.jsx 文件。

 import "./App.css";
import Products from "./components/Products";

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products/>
      </div>
    </div>
  );
}

export default App;

最終，執行您的程序並導航到網絡瀏覽器以觀察軟件的功能。

 npm run dev

要驗證此屬性的功能，請導航至 Flagsmith 中的“功能設置”頁面並停用產品評級選項。

為了觀察最近對應用程序所做的修改，請通過重新加載本地運行的程序來刷新網絡瀏覽器顯示。同時，系統中任何先前存在的評級都將消失。但是，如果您隨後重新激活上述功能，然後再次按刷新按鈕，則丟失的評級應該會重新出現。

功能發布不再是一個麻煩

功能標誌已成為調節軟件應用程序中功能部署不可或缺的工具。這些工具的集成既精簡又不引人注目，從而有效地減輕了實施更新部署可能產生的潛在危險。

該功能提供了一個用戶友好的界面，使技術人員和非技術人員都可以輕鬆修改設置和功能，無需大量的編碼知識。