A funkciójelzők alapvető eszközt jelentenek a szoftverfrissítések összeállításának és kiadásának egyszerűsítéséhez. Segítségükkel megcélozhat egy adott felhasználói csoportot vagy a teljes felhasználói bázist.

Lényegében lehetővé teszik jelentős változtatások bevezetését az éles alkalmazás munkafolyamatának megszakítása nélkül, valós időben és igény szerint. Ezt úgy teheti meg, hogy a kiterjedt kódmódosítások és -telepítések alternatívájaként funkciókapcsolókat használ.

Funkciójelzők: A megvalósítás és az előnyök magyarázata

A szoftverfejlesztés kétségtelenül folyamatos és ismétlődő folyamat. Hacsak nem hagy fel mindenki egy projektet, valaki tovább fejleszti, új változtatásokat vezet be.

Ideális esetben a CI/CD folyamatok lehetővé teszik, hogy konzisztens kódmódosításokat hajtson végre a termelésben. Mindazonáltal ezeknek a folyamatoknak az az ára, hogy jelentős telepítési erőfeszítést igényelnek.

A funkciójelzők használatával azonban frissítést adhat ki a felhasználói bázis egy részének vagy egészének, pusztán egy beállítás váltásával.

Számos olyan helyzet létezik, amikor a funkciójelzők alkalmazhatók, többek között:

• Ha egy új ötletet szeretne tesztelni, mielőtt az összes felhasználó számára közzéteszi. Ezzel egyszerűen és gyorsan visszajelzést gyűjthet a teljesítményről és annak felhasználói hatásáról.
• Ha fontos vészhelyzeti frissítéseket és gyorsjavításokat szeretne kiadni. Ha katasztrófa történik, gyorsan letilthatja a problémás funkciókat, és kiadhatja a javításokat anélkül, hogy a teljes alkalmazást újratelepítené.
• Amikor személyre szabott felhasználói élményt biztosít bizonyos funkciók engedélyezésével vagy letiltásával a felhasználói attribútumokon, beállításokon vagy előfizetési csomagokon alapulóan.

A Flagsmith első lépései

A Flagsmith nagyszerű megoldást kínál a funkciójelzőkhöz, beleértve a nyílt forráskódú verziót és a felhőszolgáltatást. Ez az útmutató a felhőalapú megoldást használja a funkciójelzők integrálására a React alkalmazásban.

A kezdéshez:

1. Irány oda Flagsmith felhőszolgáltatása, regisztráljon egy fiókot, és jelentkezzen be a fiókjába Áttekintés oldalon.
2. Az áttekintő oldalon kattintson a Projekt létrehozása gombot egy új Flagsmith projekt beállításához. A Flagsmith automatikusan létrehozza a fejlesztői és a termelési környezetet is az Ön számítógépén Projektbeállítások oldalon. Ebben az oktatóanyagban a fejlesztői környezetet fogja használni a funkciójelzők megvalósításához.
3. Győződjön meg róla, hogy a Fejlesztés környezetben válassza ki a Jellemzők fület, és kattintson a Hozza létre első funkcióját gomb.
4. Adjon meg egy ID a megjelölni kívánt jellemzőnél, lehetőleg egy karakterláncnál, kattintson a váltógombra Alapértelmezés szerint engedélyezve funkció opciót, és nyomja meg Funkció létrehozása. Ebben az esetben a különböző e-kereskedelmi termékek besorolásánál funkciójelzőt kell alkalmazni.
5. Az újonnan létrehozott funkciót megtekintheti és kezelheti a funkciók beállításainak áttekintő oldalára lépve.

Most a telepítés befejezéséhez szüksége lesz az ügyféloldali környezeti kulcsra.

Hozza létre az ügyféloldali környezeti kulcsot

Az ügyféloldali környezeti kulcs beszerzése:

1. Kattintson a Beállítások fül alatt a Fejlesztés környezet.
2. A fejlesztői környezet beállítási oldalán kattintson a gombra Kulcsok lapon.
3. Másolja ki a megadott ügyféloldali környezeti kulcsot.

A projekt kódja megtalálható benne GitHub adattár.

Hozd létre a React projektet

Most pedig menj előre, és állványozzon egy React projektet a create-react-app paranccsal. Alternatív megoldásként megteheti használja a Vite-ot egy alap React projekt beállításához. Felhívjuk figyelmét, hogy ez az útmutató a Vite segítségével hozza létre a React alkalmazást.

Ezután telepítse a Flagsmith SDK-t a projektbe. Ez az SDK különféle verziókkal kompatibilis JavaScript keretrendszerek.

npm install flagsmith

Most hozzon létre a .env fájlt a projektmappa gyökérkönyvtárába, és adja hozzá az ügyféloldali környezeti kulcsot az alábbiak szerint:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Funkcionális komponens hozzáadása a terméklistához

A Flagsmith funkciójelző képességeinek kipróbálásához létre kell hoznia egy egyszerű összetevőt, amely egy listát jelenít meg az e-kereskedelmi termékekről DummyJSON API.

A listában szereplő minden termékhez különböző attribútumok tartoznak, például cím, ár, termékleírás és általános termékértékelés. A cél az, hogy a termékértékelési értékre alkalmazzák a funkciójelzőt. A zászló megvalósítása után a funkciót a Flagsmith felhőszolgáltatásában található gomb megnyomásával vezérelheti.

Ban,-ben src könyvtárat, hozzon létre egy új mappát, és nevezze el, alkatrészek. Ebben a mappában adjon hozzá egy újat Products.jsx és tartalmazza a következő kódot.

Először hajtsa végre a következő importálást:

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

Ezután hozza létre a funkcionális komponenst, határozza meg a kezdeti állapotváltozókat, és adja hozzá a JSX elemeket.

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>

 );
}

Most határozza meg a useEffect hook, amely HTTP-kérelmeket küld a hamis JSON API-nak a termékek adatainak lekérése érdekében. tudsz használja a Fetch API-t vagy az Axiost az API felhasználásához.

A funkcionális komponensen belül adja hozzá az alábbi kódot:

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

A fetchProducts A funkció akkor fog futni, ha az összetevő fel van szerelve. Lekéri a termékek adatait, majd frissíti a termék állapotát Termékek változó.

Végül feltérképezheti a termékek tömbjét, és megjelenítheti őket a böngészőben.

Közvetlenül a terméklista osztály oszt, tartalmazza a következő kódot:

{ 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>
))}

Ezzel kényelmesen lekérheti és megjelenítheti a termékelemek listáját a hamis JSON API-ból.

Integrálja a Flagsmith SDK-t

A Flagsmith SDK integrálásához és inicializálásához a React alkalmazásban, közvetlenül a fetchProducts függvényhívás belül useEffect horog, adja hozzá a kódot alább.

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

Ennek a funkciónak a bevonásával lehetővé teszi a funkciójelzők kezelését gyorsítótárazással és elemzéssel a React alkalmazásban.

A funkció visszahívást használ annak dinamikus kezelésére, hogy a termék állapota alapján hogyan jelenítse meg a termékértékeléseket product_rating jellemző zászló. Ennek vagy igaznak (engedélyezve) kell lennie, ha be van kapcsolva a felhőszolgáltatásban, vagy hamisnak (letiltva), ha ki van kapcsolva.

Végül frissítse a termék értékelése h3 elem a Visszatérés kódblokkot ezzel az utasítással.

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

Ezzel a frissítéssel a funkció bekapcsolása után frissíti a showProductRating változó -ra igaz. Ennek eredményeként a termék értékelése megjelenik a többi attribútum mellett. Ha azonban kikapcsolja a funkciót, a showProductRating változó lesz hamis, és a termék értékelése nem jelenik meg.

Végül frissítse a App.jsx fájlt a termékösszetevő importálásához.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Végül futtassa az alkalmazást, majd lépjen a böngészőbe az alkalmazás megtekintéséhez.

npm run dev

A funkció teszteléséhez térjen vissza a saját oldalára A funkció Beállítások oldala a Flagsmith-en, és kapcsolja ki a termékértékelés funkciót.

Mivel az alkalmazás localhoston fut, töltse be újra a böngészőben a frissített változások megtekintéséhez. Az eredetileg meglévő termékértékelés eltűnik. Ha visszakapcsolja a funkciót, és újra betölti az oldalt, az újra megjelenik.

A szolgáltatáskiadások már nem okozhatnak gondot

A funkciójelzők játékmódosító eszközzé váltak az alkalmazások szolgáltatáskiadásainak kezeléséhez. Zökkenőmentesen integrálódnak a fejlesztési munkafolyamatba, minimalizálva az új frissítések bevezetésével kapcsolatos kockázatokat.

Hatékonyak, így mindenki – még a végfelhasználók is – lehetőséget adnak a funkciók engedélyezésére vagy letiltására anélkül, hogy bonyolult kódba merülnének.