Príznaky funkcií sú základným nástrojom, ktorý pomáha zefektívniť vytváranie a vydávanie aktualizácií softvéru. Môžete ich použiť na zacielenie na konkrétnu skupinu používateľov alebo celú vašu používateľskú základňu.

V podstate vám umožňujú zaviesť významné zmeny bez narušenia pracovného toku vašej produkčnej aplikácie v reálnom čase a na požiadanie. Môžete to urobiť pomocou prepínačov funkcií ako alternatívy k rozsiahlym úpravám kódu a nasadeniam.

Príznaky funkcií: Vysvetlenie implementácie a výhod

Vývoj softvéru je bezpochyby nepretržitý a opakovaný proces. Ak každý neopustí projekt, niekto ho bude ďalej rozvíjať a zavádzať nové zmeny.

V ideálnom prípade vám potrubia CI/CD umožňujú preniesť konzistentné zmeny kódu do produkcie. Tieto procesy si však vyžadujú značné úsilie pri zavádzaní.

Pomocou príznakov funkcií však môžete vydať aktualizáciu pre časť alebo celú používateľskú základňu jednoduchým prepnutím nastavenia.

Existuje niekoľko situácií, v ktorých sa používajú príznaky funkcie, vrátane:

• Keď chcete otestovať nový nápad predtým, ako ho sprístupníte všetkým používateľom. Takto môžete jednoducho a rýchlo zbierať spätnú väzbu o výkone a jeho vplyve na používateľov.
• Keď chcete zaviesť základné núdzové aktualizácie a rýchle opravy. Ak dôjde ku katastrofe, môžete rýchlo deaktivovať problematické funkcie a zaviesť opravy bez toho, aby ste museli znova nasadiť celú aplikáciu.
• Pri poskytovaní prispôsobených používateľských skúseností povolením alebo zakázaním konkrétnych funkcií na základe atribútov používateľa, preferencií alebo balíkov predplatného.

Začíname s Flagsmith

Flagsmith poskytuje skvelé riešenie pre príznaky funkcií vrátane verzie s otvoreným zdrojom a cloudovej služby. Táto príručka použije svoje cloudové riešenie na integráciu príznakov funkcií do aplikácie React.

Začať:

1. Zamierte k Cloudová služba Flagsmith, zaregistrujte si účet a prihláste sa do svojho účtu Prehľad stránku.
2. Na stránke prehľadu kliknite na Vytvoriť projekt tlačidlo na nastavenie nového projektu Flagsmith. Flagsmith vám automaticky vytvorí vývojové aj produkčné prostredie Nastavenia projektu stránku. V tomto návode použijete vývojové prostredie na implementáciu príznakov funkcie.
3. Uistite sa, že ste v rozvoj prostredia, vyberte Vlastnosti a kliknite na tlačidlo Vytvorte svoju prvú funkciu tlačidlo.
4. Poskytnite ID pre objekt, ktorý chcete označiť, najlepšie reťazec, kliknite na prepínač Predvolene povoliť možnosť funkcie a stlačte Vytvoriť funkciu. V tomto prípade implementujete príznak funkcie na hodnotenie rôznych produktov elektronického obchodu.
5. Novovytvorenú funkciu môžete zobraziť a spravovať tak, že prejdete na stránku s prehľadom nastavení funkcií.

Teraz na dokončenie nastavenia potrebujete kľúč prostredia na strane klienta.

Vygenerujte kľúč prostredia na strane klienta

Ak chcete získať kľúč prostredia na strane klienta:

1. Klikni na nastavenie záložka pod rozvoj životné prostredie.
2. Na stránke nastavení vývojového prostredia kliknite na Keys tab.
3. Skopírujte poskytnutý kľúč prostredia na strane klienta.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Vytvorte projekt React

Teraz pokračujte a skaffold projektu React pomocou príkazu create-react-app. Prípadne môžete použite Vite na nastavenie základného projektu React. Upozorňujeme, že táto príručka použije Vite na vytvorenie aplikácie React.

Ďalej nainštalujte Flagsmith's SDK vo svojom projekte. Táto súprava SDK je kompatibilná s rôznymi JavaScriptové rámce.

npm install flagsmith

Teraz vytvorte a .env súbor v koreňovom adresári priečinka projektu a pridajte kľúč prostredia na strane klienta takto:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Pridajte funkčný komponent zoznamu produktov

Ak chcete otestovať funkcie príznakov Flagsmith, vytvoríte jednoduchý komponent, ktorý vykreslí zoznam produktov elektronického obchodu DummyJSON API.

Každý produkt v zozname má rôzne atribúty, ako je názov, cena, popis produktu a celkové hodnotenie produktu. Zámerom je použiť príznak funkcie na hodnotu hodnotenia produktu. Po implementácii príznaku budete môcť túto funkciu ovládať prepnutím tlačidla na cloudovej službe Flagsmith.

V src adresár, vytvorte nový priečinok a pomenujte ho, komponentov. Do tohto priečinka pridajte nový Products.jsx a zahrňte nasledujúci kód.

Najprv vykonajte nasledujúce importy:

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

Ďalej vytvorte funkčný komponent, definujte premenné počiatočného stavu a pridajte prvky 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>

 );
}

Teraz definujte a useEffect háčik, ktorý bude odosielať požiadavky HTTP na fiktívne rozhranie JSON API na načítanie údajov produktov. Môžeš na používanie rozhrania API použite rozhranie Fetch API alebo Axios.

V rámci funkčného komponentu pridajte nižšie uvedený kód:

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

The fetchProducts funkcia sa spustí po pripojení komponentu. Načítava údaje o produktoch a následne aktualizuje stav Produkty premenlivý.

Nakoniec môžete zmapovať celý rad produktov a vykresliť ich v prehliadači.

Hneď pod trieda zoznamu produktov div, zahrňte nasledujúci kód:

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

Vďaka tomu môžete pohodlne načítať a zobraziť zoznam položiek produktov z fiktívneho JSON API.

Integrujte Flagsmith's SDK

Ak chcete integrovať a inicializovať Flagsmith's SDK v aplikácii React, hneď pod fetchProducts volanie funkcie vo vnútri useEffect háčik, pridajte kód nižšie.

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

Zahrnutím tejto funkcie povolíte správu príznakov funkcie pomocou vyrovnávacej pamäte a analýzy v aplikácii React.

Táto funkcia využíva spätné volanie na dynamickú správu spôsobu zobrazovania hodnotení produktov na základe stavu hodnotenie_produktu vlajka funkcie. Toto by malo byť buď true (povolené), keď je zapnuté v cloudovej službe, alebo false (deaktivované), keď je vypnuté.

Nakoniec aktualizujte hodnotenie produktu h3 prvok v vrátiť blok kódu s týmto príkazom.

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

S touto aktualizáciou sa po zapnutí funkcie aktualizuje showProductRating premenlivý na pravda. V dôsledku toho sa hodnotenie produktu zobrazí spolu s ostatnými atribútmi. Ak však túto funkciu vypnete, showProductRating premenná bude falošnýa hodnotenie produktu sa nezobrazí.

Nakoniec aktualizujte App.jsx súbor na import komponentu produktu.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Nakoniec spustite aplikáciu a prejdite do prehliadača, kde si aplikáciu zobrazte.

npm run dev

Ak chcete túto funkciu otestovať, vráťte sa späť na svoje Stránka Nastavenia funkcie na Flagsmith a vypnite funkciu hodnotenia produktu.

Keďže aplikácia beží na localhoste, znova ju načítajte do prehliadača, aby ste videli aktualizované zmeny. Pôvodné hodnotenie produktu zmizne. Ak funkciu znova zapnete a znova načítate stránku, znova sa zobrazí.

Vydania funkcií by už nemali byť problémom

Príznaky funkcií sa stali nástrojom na zmenu hry na správu vydaní funkcií v aplikáciách. Bezproblémovo sa integrujú do pracovného toku vývoja, čím sa minimalizujú riziká spojené so zavádzaním nových aktualizácií.

Sú tiež výkonné a poskytujú každému – dokonca aj koncovým používateľom – možnosť povoliť alebo zakázať funkcie bez toho, aby sa museli ponoriť do zložitého kódu.