फ़ीचर फ़्लैग एक आवश्यक उपकरण है, जो सॉफ़्टवेयर अपडेट के निर्माण और रिलीज़ को सुव्यवस्थित करने में मदद करता है। आप उनका उपयोग उपयोगकर्ताओं के किसी विशिष्ट समूह या अपने संपूर्ण उपयोगकर्ता आधार को लक्षित करने के लिए कर सकते हैं।

अनिवार्य रूप से, वे आपको आपके उत्पादन एप्लिकेशन के वर्कफ़्लो को बाधित किए बिना, वास्तविक समय में और मांग पर महत्वपूर्ण बदलाव लाने देते हैं। आप व्यापक कोड संशोधनों और परिनियोजन के विकल्प के रूप में फीचर टॉगल का उपयोग करके ऐसा कर सकते हैं।

फ़ीचर फ़्लैग: कार्यान्वयन और लाभों की व्याख्या

निस्संदेह, सॉफ्टवेयर विकास एक सतत और पुनरावृत्तीय प्रक्रिया है। जब तक हर कोई किसी प्रोजेक्ट को नहीं छोड़ता, कोई न कोई उसे विकसित करता रहेगा, नए बदलाव लाता रहेगा।

आदर्श रूप से, सीआई/सीडी पाइपलाइन आपको उत्पादन में लगातार कोड परिवर्तन करने देती है। बहरहाल, ये प्रक्रियाएँ पर्याप्त तैनाती प्रयास की आवश्यकता की कीमत पर आती हैं।

हालाँकि, फीचर फ़्लैग का उपयोग करके, आप केवल एक सेटिंग को टॉगल करके अपने कुछ या सभी उपयोगकर्ता आधार के लिए अपडेट जारी कर सकते हैं।

ऐसी कई स्थितियाँ हैं जहाँ फ़ीचर फ़्लैग लागू होते हैं, जिनमें शामिल हैं:

• जब आप किसी नए विचार को सभी उपयोगकर्ताओं तक पहुंचाने से पहले उसका परीक्षण करना चाहते हैं। ऐसा करके, आप प्रदर्शन और उसके उपयोगकर्ता प्रभाव पर आसानी से और शीघ्रता से प्रतिक्रिया एकत्र कर सकते हैं।
• जब आप आवश्यक आपातकालीन अपडेट और हॉटफिक्स रोल आउट करना चाहते हैं। यदि आपदा आती है, तो आप समस्याग्रस्त सुविधाओं को शीघ्रता से अक्षम कर सकते हैं और संपूर्ण एप्लिकेशन को पुन: नियोजित किए बिना सुधारों को रोल आउट कर सकते हैं।
• उपयोगकर्ता विशेषताओं, प्राथमिकताओं या सदस्यता पैकेजों के आधार पर विशिष्ट सुविधाओं को सक्षम या अक्षम करके वैयक्तिकृत उपयोगकर्ता अनुभव प्रदान करते समय।

फ़्लैगस्मिथ के साथ शुरुआत करना

फ़्लैगस्मिथ फ़ीचर फ़्लैग के लिए एक बेहतरीन समाधान प्रदान करता है, जिसमें ओपन-सोर्स संस्करण और क्लाउड सेवा शामिल है। यह गाइड रिएक्ट एप्लिकेशन में फीचर फ़्लैग को एकीकृत करने के लिए अपने क्लाउड समाधान का उपयोग करेगा।

प्रारंभ करना:

1. वहां जाओ फ़्लैगस्मिथ की क्लाउड सेवा, एक खाते के लिए साइन अप करें, और अपने खाते में लॉग इन करें अवलोकन पृष्ठ।
2. अवलोकन पृष्ठ पर, पर क्लिक करें प्रोजेक्ट बनाएं नया फ़्लैगस्मिथ प्रोजेक्ट स्थापित करने के लिए बटन। फ़्लैगस्मिथ स्वचालित रूप से आपके लिए विकास और उत्पादन दोनों वातावरण तैयार करेगा प्रोजेक्ट सेटिंग्स पृष्ठ। इस ट्यूटोरियल के लिए, आप फीचर फ़्लैग को लागू करने के लिए विकास परिवेश का उपयोग करेंगे।
3. सुनिश्चित करें कि आप अंदर हैं विकास पर्यावरण, का चयन करें विशेषताएँ टैब, और क्लिक करें अपना पहला फ़ीचर बनाएं बटन।
4. एक प्रदान करें पहचान जिस सुविधा को आप फ़्लैग करना चाहते हैं, अधिमानतः एक स्ट्रिंग के लिए, टॉगल बटन पर क्लिक करें डिफ़ॉल्ट रूप से सक्षम करें फीचर विकल्प, और हिट फ़ीचर बनाएं. इस मामले में, आप विभिन्न ई-कॉमर्स उत्पादों की रेटिंग पर एक फीचर फ़्लैग लागू करेंगे।
5. आप फीचर सेटिंग्स अवलोकन पृष्ठ पर जाकर नव निर्मित फीचर को देख और प्रबंधित कर सकते हैं।

अब, सेटअप पूरा करने के लिए, आपको क्लाइंट-साइड पर्यावरण कुंजी की आवश्यकता है।

क्लाइंट-साइड पर्यावरण कुंजी उत्पन्न करें

क्लाइंट-साइड परिवेश कुंजी प्राप्त करने के लिए:

1. पर क्लिक करें समायोजन टैब के अंतर्गत विकास पर्यावरण।
2. विकास परिवेश सेटिंग पृष्ठ पर, क्लिक करें चांबियाँ टैब.
3. प्रदान की गई क्लाइंट-साइड पर्यावरण कुंजी की प्रतिलिपि बनाएँ।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

रिएक्ट प्रोजेक्ट बनाएं

अब, आगे बढ़ें, और create-react-app कमांड का उपयोग करके एक रिएक्ट प्रोजेक्ट तैयार करें. वैकल्पिक रूप से, आप कर सकते हैं बुनियादी रिएक्ट प्रोजेक्ट स्थापित करने के लिए Vite का उपयोग करें. कृपया ध्यान दें कि यह गाइड रिएक्ट एप्लिकेशन बनाने के लिए Vite का उपयोग करेगा।

इसके बाद, अपने प्रोजेक्ट में फ़्लैगस्मिथ का SDK इंस्टॉल करें। यह SDK विभिन्न के साथ संगत है जावास्क्रिप्ट ढाँचे.

npm install flagsmith

अब, एक बनाएं .env अपने प्रोजेक्ट फ़ोल्डर की रूट निर्देशिका में फ़ाइल करें और क्लाइंट-साइड पर्यावरण कुंजी निम्नानुसार जोड़ें:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

एक उत्पाद सूची कार्यात्मक घटक जोड़ें

फ़्लैगस्मिथ की फ़ीचर फ़्लैग क्षमताओं का परीक्षण करने के लिए, आप एक सरल घटक बनाएंगे जो ई-कॉमर्स उत्पादों की एक सूची प्रस्तुत करेगा DummyJSON एपीआई.

सूची में प्रत्येक उत्पाद विभिन्न विशेषताओं के साथ आता है, जैसे शीर्षक, मूल्य, उत्पाद विवरण और समग्र उत्पाद रेटिंग। इरादा फीचर फ़्लैग को उत्पाद रेटिंग मान पर लागू करना है। एक बार जब आप ध्वज लागू कर लेते हैं, तो आप फ्लैगस्मिथ की क्लाउड सेवा पर एक बटन को टॉगल करके सुविधा को नियंत्रित करने में सक्षम होंगे।

में स्रोत निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें, अवयव. इस फ़ोल्डर के अंदर एक नया जोड़ें उत्पाद.जेएसएक्स और निम्नलिखित कोड शामिल करें।

सबसे पहले, निम्नलिखित आयात करें:

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

इसके बाद, कार्यात्मक घटक बनाएं, प्रारंभिक स्थिति चर को परिभाषित करें, और JSX तत्व जोड़ें।

exportdefaultfunctionProducts() {
const [products, setProducts] = useState([]);
const [showProductRating, setShowProductRating] = useState(false);
const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
return (
<>
<divclassName="product-catalogue">
<divclassName="product-list">
div>
div>

 );
}

अब, परिभाषित करें a उपयोगप्रभाव हुक जो उत्पादों का डेटा लाने के लिए डमी JSON एपीआई के लिए HTTP अनुरोध करेगा। तुम कर सकते हो एपीआई का उपभोग करने के लिए फ़ेच एपीआई या एक्सियोस का उपयोग करें.

कार्यात्मक घटक के भीतर, नीचे दिया गया कोड जोड़ें:

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

उत्पाद प्राप्त करें घटक माउंट होते ही फ़ंक्शन चलेगा। यह उत्पादों का डेटा प्राप्त करता है और बाद में उसकी स्थिति को अपडेट करता है उत्पादों चर।

अंत में, आप उत्पादों की श्रृंखला को मैप कर सकते हैं और उन्हें ब्राउज़र पर प्रस्तुत कर सकते हैं।

के ठीक नीचे उत्पाद-सूची वर्ग div, निम्नलिखित कोड शामिल करें:

{ products.slice(0,6).map((product) => (
"product" key={product.id}>
{product.title}</h2> 


Price: ${product.price}</p>

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

इसके साथ, आप डमी JSON एपीआई से उत्पाद आइटमों की एक सूची आराम से ला और प्रदर्शित कर सकते हैं।

फ़्लैगस्मिथ के एसडीके को एकीकृत करें

रिएक्ट एप्लिकेशन में फ्लैगस्मिथ के एसडीके को एकीकृत और आरंभ करने के लिए, ठीक नीचे उत्पाद प्राप्त करें फ़ंक्शन कॉल के अंदर उपयोगप्रभाव हुक, नीचे कोड जोड़ें।

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

इस फ़ंक्शन को शामिल करके, आप रिएक्ट ऐप में कैशिंग और एनालिटिक्स के साथ फ़ीचर फ़्लैग प्रबंधन को सक्षम करते हैं।

फ़ंक्शन स्थिति के आधार पर उत्पाद रेटिंग को प्रदर्शित करने के तरीके को गतिशील रूप से प्रबंधित करने के लिए कॉलबैक का उपयोग करता है उत्पाद_रेटिंग फ़ीचर ध्वज. क्लाउड सेवा में टॉगल चालू करने पर यह या तो सत्य (सक्षम) होना चाहिए, या टॉगल बंद होने पर गलत (अक्षम) होना चाहिए।

अंत में, अद्यतन करें उत्पाद रेटिंग h3 में तत्व वापस करना इस कथन के साथ कोड ब्लॉक करें।

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

इस अपडेट के साथ, एक बार जब आप फीचर पर टॉगल करते हैं, तो यह अपडेट हो जाता है उत्पाद रेटिंग दिखाएं परिवर्तनशील से सत्य. परिणामस्वरूप, उत्पाद रेटिंग अन्य विशेषताओं के साथ दिखाई देगी। हालाँकि, यदि आप सुविधा को बंद कर देते हैं, तो उत्पाद रेटिंग दिखाएं परिवर्तनशील होगा असत्य, और उत्पाद रेटिंग दिखाई नहीं देगी।

अंत में, अद्यतन करें App.jsx उत्पाद घटक आयात करने के लिए फ़ाइल।

import"./App.css";
import Products from"./components/Products";
functionApp() {
return (

"App">
"App-header">
Product Catalogue</h1>

 </div>
 </div>
 );
}

exportdefault App;

अंत में, अपना एप्लिकेशन चलाएं, और एप्लिकेशन देखने के लिए अपने ब्राउज़र पर जाएं।

npm run dev

इस सुविधा का परीक्षण करने के लिए, अपने पर वापस जाएँ फ़ीचर का सेटिंग पृष्ठ फ़्लैगस्मिथ पर, और उत्पाद रेटिंग सुविधा को बंद करें।

चूंकि एप्लिकेशन लोकलहोस्ट पर चल रहा है, इसलिए अद्यतन परिवर्तनों को देखने के लिए इसे ब्राउज़र में पुनः लोड करें। उत्पाद रेटिंग जो प्रारंभ में मौजूद थी गायब हो जाएगी. यदि आप सुविधा को वापस चालू करते हैं और पृष्ठ को दोबारा लोड करते हैं, तो यह फिर से दिखाई देगा।

फ़ीचर रिलीज़ में अब कोई परेशानी नहीं होनी चाहिए

फ़ीचर फ़्लैग अनुप्रयोगों में फ़ीचर रिलीज़ को प्रबंधित करने के लिए एक गेम-चेंजर टूल बन गए हैं। वे नए अपडेट जारी करने से जुड़े जोखिमों को कम करते हुए, विकास वर्कफ़्लो में सहजता से एकीकृत होते हैं।

वे शक्तिशाली भी हैं, जो हर किसी को—यहाँ तक कि अंतिम उपयोगकर्ताओं को भी—जटिल कोड में पड़े बिना सुविधाओं को सक्षम या अक्षम करने की शक्ति देते हैं।