نحوه ادغام Feature Flags در برنامه های React با استفاده از Flagsmith

با تنظیماتی که می توانید در لحظه تغییر دهید، انعطاف و استحکام را به برنامه های خود اضافه کنید.

پرچم‌های ویژگی ابزاری ضروری هستند که به ساده‌سازی ساخت و انتشار به‌روزرسانی‌های نرم‌افزار کمک می‌کنند. می توانید از آنها برای هدف قرار دادن گروه خاصی از کاربران یا کل پایگاه کاربری خود استفاده کنید.

اساساً، آنها به شما اجازه می دهند تا تغییرات قابل توجهی را بدون ایجاد اختلال در روند کار برنامه تولید خود، در زمان واقعی و بر اساس تقاضا انجام دهید. شما می توانید این کار را با استفاده از تغییر دهنده های ویژگی به عنوان جایگزینی برای اصلاحات و استقرار گسترده کد انجام دهید.

پرچم های ویژگی: پیاده سازی و مزایا توضیح داده شده است

بدون شک توسعه نرم افزار یک فرآیند مداوم و تکراری است. تا زمانی که همه پروژه ای را رها نکنند، کسی به توسعه آن ادامه می دهد و تغییرات جدیدی را ارائه می دهد.

در حالت ایده‌آل، خطوط لوله CI/CD به شما امکان می‌دهند تا تغییرات کد را به صورت ثابت در تولید انجام دهید. با این وجود، این فرآیندها به قیمت نیاز به تلاش قابل توجه برای استقرار است.

با این حال، با استفاده از پرچم‌های ویژگی، می‌توانید به‌روزرسانی را برای برخی یا همه پایگاه کاربر خود تنها با تغییر دادن یک تنظیم منتشر کنید.

چندین موقعیت وجود دارد که در آن پرچم‌های ویژگی اعمال می‌شوند، از جمله:

• زمانی که می خواهید یک ایده جدید را قبل از ارائه آن برای همه کاربران آزمایش کنید. با انجام این کار، می توانید به راحتی و به سرعت بازخوردهایی را در مورد عملکرد و تاثیر آن بر کاربر جمع آوری کنید.
• زمانی که می‌خواهید به‌روزرسانی‌ها و رفع فوری اضطراری ضروری را ارائه کنید. اگر فاجعه‌ای رخ داد، می‌توانید به سرعت ویژگی‌های مشکل‌ساز را غیرفعال کنید و بدون اینکه کل برنامه را مجدداً مستقر کنید، راه‌حل‌هایی را رفع کنید.
• هنگامی که با فعال یا غیرفعال کردن ویژگی‌های خاص بر اساس ویژگی‌های کاربر، اولویت‌ها یا بسته‌های اشتراک، تجربه‌های شخصی‌سازی شده کاربر را ارائه می‌کنید.

شروع کار با Flagsmith

Flagsmith یک راه حل عالی برای پرچم های ویژگی، از جمله یک نسخه منبع باز و یک سرویس ابری ارائه می دهد. این راهنما از راه حل ابری خود برای ادغام پرچم های ویژگی در برنامه React استفاده می کند.

برای شروع:

1. به سرویس ابری Flagsmith بروید، برای یک حساب کاربری ثبت نام کنید و به صفحه نمای کلی حساب خود وارد شوید.
2. در صفحه نمای کلی، روی دکمه Create Project کلیک کنید تا یک پروژه Flagsmith جدید راه اندازی شود. Flagsmith به طور خودکار هر دو محیط توسعه و تولید را در صفحه تنظیمات پروژه شما ایجاد می کند. برای این آموزش، از محیط توسعه برای پیاده سازی پرچم های ویژگی استفاده خواهید کرد.
3. مطمئن شوید که در محیط توسعه هستید، تب Features را انتخاب کرده و روی دکمه Create your first Feature کلیک کنید.
4. یک شناسه برای ویژگی که می‌خواهید پرچم‌گذاری کنید، ترجیحاً یک رشته، ارائه دهید، روی دکمه جابجایی به گزینه Enable by default feature کلیک کنید و Create Feature را بزنید. در این مورد، شما یک پرچم ویژگی را در رتبه بندی محصولات مختلف تجارت الکترونیک پیاده سازی خواهید کرد.
5. با رفتن به صفحه نمای کلی تنظیمات ویژگی ها می توانید ویژگی جدید ایجاد شده را مشاهده و مدیریت کنید.

اکنون، برای تکمیل تنظیمات، به کلید محیط سمت کلاینت نیاز دارید.

کلید محیطی سمت مشتری را ایجاد کنید

برای به دست آوردن کلید محیط سمت مشتری:

1. بر روی تب تنظیمات در محیط توسعه کلیک کنید.
2. در صفحه تنظیمات محیط توسعه، روی تب Keys کلیک کنید.
3. کلید محیط سمت مشتری ارائه شده را کپی کنید.

می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.

پروژه React را ایجاد کنید

اکنون، پیش بروید و با استفاده از دستور create-react-app، یک پروژه React را داربست کنید. از طرف دیگر، می توانید از Vite برای راه اندازی یک پروژه اصلی React استفاده کنید. لطفاً توجه داشته باشید که این راهنما از Vite برای ایجاد برنامه React استفاده می کند.

بعد، Flagsmith’s SDK را در پروژه خود نصب کنید. این SDK با چارچوب های مختلف جاوا اسکریپت سازگار است.

npm install flagsmith

اکنون یک فایل .env در پوشه اصلی پوشه پروژه خود ایجاد کنید و کلید محیط سمت سرویس گیرنده را به صورت زیر اضافه کنید:

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

یک جزء عملکردی لیست محصولات اضافه کنید

برای آزمایش قابلیت‌های پرچم‌گذاری ویژگی Flagsmith، یک مؤلفه ساده می‌سازید که فهرستی از محصولات تجارت الکترونیک را از DummyJSON API ارائه می‌کند.

هر محصول در لیست دارای ویژگی های مختلفی مانند عنوان، قیمت، توضیحات محصول و رتبه بندی کلی محصول است. هدف این است که پرچم ویژگی را به ارزش رتبه‌بندی محصول اعمال کنیم. هنگامی که پرچم را پیاده‌سازی کردید، می‌توانید با جابجایی دکمه‌ای در سرویس ابری Flagsmith، این ویژگی را کنترل کنید.

در دایرکتوری src، یک پوشه جدید ایجاد کنید و نام آن را Components بگذارید. داخل این پوشه یک Products.jsx جدید اضافه کنید و کد زیر را وارد کنید.

ابتدا واردات زیر را انجام دهید:

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

سپس، مؤلفه تابعی را ایجاد کنید، متغیرهای حالت اولیه را تعریف کنید و عناصر JSX را اضافه کنید.

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>
    </>
  );
}

اکنون یک قلاب useEffect تعریف کنید که درخواست‌های HTTP را به API ساختگی JSON برای واکشی داده‌های محصولات ارسال می‌کند. می توانید از Fetch API یا Axios برای مصرف API استفاده کنید.

در کامپوننت عملکردی، کد زیر را اضافه کنید:

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

تابع fetchProducts پس از نصب کامپوننت اجرا خواهد شد. داده های محصولات را واکشی می کند و متعاقباً وضعیت متغیر محصولات را به روز می کند.

در نهایت، می توانید از طریق آرایه محصولات نقشه برداری کنید و آنها را در مرورگر رندر کنید.

درست در زیر product-list class 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>
))}

با این کار، می‌توانید به راحتی فهرستی از اقلام محصول را از API ساختگی JSON دریافت و نمایش دهید.

Flagsmith’s SDK را ادغام کنید

برای ادغام و مقداردهی اولیه SDK Flagsmith در برنامه React، درست در زیر فراخوانی تابع fetchProducts در داخل قلاب useEffect، کد زیر را اضافه کنید.

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

با گنجاندن این عملکرد، مدیریت پرچم ویژگی با حافظه پنهان و تجزیه و تحلیل را در برنامه React فعال می کنید.

این تابع از یک فراخوان برای مدیریت پویا نحوه نمایش رتبه بندی محصول بر اساس وضعیت پرچم ویژگی product_rating استفاده می کند. این باید یا درست (فعال) باشد، زمانی که در سرویس ابری روشن می شود، یا نادرست (غیرفعال) زمانی که خاموش می شود.

در نهایت، عنصر رتبه بندی محصول h3 را در بلوک کد بازگشتی با این عبارت به روز کنید.

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

با این به روز رسانی، هنگامی که ویژگی را تغییر دهید، متغیر showProductRating به true به روز می شود. در نتیجه، رتبه بندی محصول در کنار سایر ویژگی ها ظاهر می شود. با این حال، اگر ویژگی را خاموش کنید، متغیر showProductRating نادرست خواهد بود و رتبه بندی محصول ظاهر نخواهد شد.

در نهایت، فایل 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 برگردید و ویژگی رتبه‌بندی محصول را خاموش کنید.

از آنجایی که برنامه روی لوکال هاست اجرا می شود، برای مشاهده تغییرات به روز شده، آن را در مرورگر بارگذاری مجدد کنید. رتبه بندی محصول که در ابتدا وجود داشت ناپدید می شود. اگر ویژگی را دوباره روشن کنید و صفحه را دوباره بارگیری کنید، دوباره ظاهر می شود.

انتشار ویژگی دیگر نباید دردسرساز باشد

پرچم‌های ویژگی به یک ابزار تغییر دهنده بازی برای مدیریت انتشار ویژگی‌ها در برنامه‌ها تبدیل شده‌اند. آنها به طور یکپارچه در جریان کار توسعه ادغام می شوند و خطرات مربوط به انتشار به روز رسانی های جدید را به حداقل می رسانند.

آنها همچنین قدرتمند هستند و به همه – حتی کاربران نهایی – این قدرت را می‌دهند که بدون وارد کردن کدهای پیچیده، ویژگی‌ها را فعال یا غیرفعال کنند.

منبع مقاله