Příznaky funkcí jsou základním nástrojem, který pomáhá zefektivnit vytváření a vydávání aktualizací softwaru. Můžete je použít k cílení na konkrétní skupinu uživatelů nebo celou vaši uživatelskou základnu.

V podstatě vám umožňují zavádět významné změny, aniž by došlo k narušení pracovního postupu vaší produkční aplikace, v reálném čase a na vyžádání. Můžete to provést pomocí přepínačů funkcí jako alternativy k rozsáhlým úpravám kódu a nasazení.

Příznaky funkcí: Vysvětlení implementace a výhod

Vývoj softwaru je bezpochyby nepřetržitý a opakující se proces. Pokud každý projekt neopustí, někdo ho bude dál rozvíjet a zavádět nové změny.

V ideálním případě vám kanály CI/CD umožňují prosadit konzistentní změny kódu do produkce. Tyto procesy však přicházejí za cenu značného úsilí při nasazení.

Pomocí příznaků funkcí však můžete uvolnit aktualizaci pro některé nebo všechny své uživatelské základny pouhým přepnutím nastavení.

Existuje několik situací, kdy lze použít příznaky funkcí, včetně:

• Když chcete otestovat nový nápad, než jej zpřístupníte všem uživatelům. Díky tomu můžete snadno a rychle sbírat zpětnou vazbu o výkonu a jeho dopadu na uživatele.
• Když chcete zavést základní nouzové aktualizace a opravy hotfix. Pokud dojde ke katastrofě, můžete rychle deaktivovat problematické funkce a zavést opravy, aniž byste museli znovu nasadit celou aplikaci.
• Při poskytování přizpůsobených uživatelských zkušeností povolením nebo zakázáním konkrétních funkcí na základě uživatelských atributů, preferencí nebo balíčků předplatného.

Začínáme s Flagsmith

Flagsmith poskytuje skvělé řešení pro příznaky funkcí, včetně verze s otevřeným zdrojovým kódem a cloudové služby. Tato příručka použije své cloudové řešení k integraci příznaků funkcí do aplikace React.

Začít:

1. Zamiřte k Cloudová služba Flagsmith's, zaregistrujte si účet a přihlaste se ke svému účtu Přehled strana.
2. Na stránce přehledu klikněte na Vytvořit projekt tlačítko pro nastavení nového projektu Flagsmith. Flagsmith ve vašem automaticky vytvoří vývojové i produkční prostředí Nastavení projektu strana. V tomto kurzu použijete vývojové prostředí k implementaci příznaků funkcí.
3. Ujistěte se, že jste v Rozvoj prostředí, vyberte Funkce a klepněte na Vytvořte svou první funkci knoflík.
4. Poskytněte ID pro prvek, který chcete označit, nejlépe řetězec, klikněte na přepínací tlačítko Ve výchozím nastavení povolit možnost funkce a stiskněte Vytvořit funkci. V tomto případě implementujete příznak funkce do hodnocení různých produktů elektronického obchodu.
5. Nově vytvořenou funkci můžete zobrazit a spravovat přechodem na stránku s přehledem nastavení funkcí.

Nyní k dokončení nastavení potřebujete klíč prostředí na straně klienta.

Vygenerujte klíč prostředí na straně klienta

Chcete-li získat klíč prostředí na straně klienta:

1. Klikněte na Nastavení záložka pod Rozvoj životní prostředí.
2. Na stránce nastavení vývojového prostředí klikněte na Klíče tab.
3. Zkopírujte poskytnutý klíč prostředí na straně klienta.

Kód tohoto projektu najdete v něm GitHub úložiště.

Vytvořte projekt React

Nyní pokračujte a scaffold projektu React pomocí příkazu create-react-app. Případně můžete použijte Vite k nastavení základního projektu React. Vezměte prosím na vědomí, že tento průvodce použije Vite k vytvoření aplikace React.

Dále do svého projektu nainstalujte Flagsmith's SDK. Tato sada SDK je kompatibilní s různými JavaScriptové rámce.

npm install flagsmith

Nyní vytvořte a .env soubor v kořenovém adresáři složky vašeho projektu a přidejte klíč prostředí na straně klienta následovně:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Přidejte funkční komponentu seznamu produktů

Chcete-li vyzkoušet funkce příznaků funkcí Flagsmith, vytvoříte jednoduchou komponentu, která vykreslí seznam produktů elektronického obchodování z DummyJSON API.

Každý produkt v seznamu má různé atributy, jako je název, cena, popis produktu a celkové hodnocení produktu. Záměrem je použít příznak funkce na hodnotu hodnocení produktu. Jakmile příznak implementujete, budete moci funkci ovládat přepnutím tlačítka na cloudové službě Flagsmith.

V src adresář, vytvořte novou složku a pojmenujte ji, komponenty. Do této složky přidejte nový Products.jsx a zahrnout následující kód.

Nejprve proveďte následující importy:

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

Dále vytvořte funkční komponentu, definujte proměnné počátečního stavu a přidejte 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>

 );
}

Nyní definujte a useEffect háček, který bude odesílat požadavky HTTP na fiktivní rozhraní JSON API za účelem načtení dat produktů. Můžeš ke spotřebě API použijte Fetch API nebo Axios.

V rámci funkční komponenty přidejte níže 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 funkce se spustí, jakmile se komponenta připojí. Načte data produktů a následně aktualizuje stav produkty variabilní.

Nakonec můžete mapovat řadu produktů a vykreslit je v prohlížeči.

Přímo pod product-list class div, zahrňte následující 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>
))}

Díky tomu můžete pohodlně načíst a zobrazit seznam položek produktů z fiktivního JSON API.

Integrujte Flagsmith's SDK

Chcete-li integrovat a inicializovat Flagsmith's SDK v aplikaci React, přímo pod fetchProducts volání funkce uvnitř useEffect háček, přidejte kód níže.

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

Zahrnutím této funkce povolíte správu příznaků funkcí s ukládáním do mezipaměti a analýzou v aplikaci React.

Funkce využívá zpětné volání k dynamické správě toho, jak zobrazuje hodnocení produktů na základě stavu hodnocení_produktu příznak funkce. To by mělo být buď true (povoleno), když je zapnuto v cloudové službě, nebo false (zakázáno), když je vypnuto.

Nakonec aktualizujte hodnocení produktu h3 prvek v vrátit se blok kódu s tímto příkazem.

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

S touto aktualizací, jakmile přepnete na funkci, aktualizuje se showProductRating variabilní k skutečný. V důsledku toho se hodnocení produktu zobrazí vedle ostatních atributů. Pokud však tuto funkci vypnete, showProductRating proměnná bude Nepravdivéa hodnocení produktu se nezobrazí.

Nakonec aktualizujte App.jsx soubor pro import komponenty produktu.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Nakonec spusťte aplikaci a přejděte do prohlížeče, kde si aplikaci zobrazte.

npm run dev

Chcete-li tuto funkci otestovat, vraťte se ke svému Stránka Nastavení funkce na Flagsmith a vypněte funkci hodnocení produktu.

Protože aplikace běží na localhost, znovu ji načtěte do prohlížeče, abyste viděli aktualizované změny. Původní hodnocení produktu zmizí. Pokud funkci znovu zapnete a znovu načtete stránku, znovu se zobrazí.

Vydání funkcí by už nemělo být problém

Příznaky funkcí se staly nástrojem pro změnu hry pro správu vydání funkcí v aplikacích. Bez problémů se integrují do pracovního postupu vývoje a minimalizují rizika spojená se zaváděním nových aktualizací.

Jsou také výkonné a poskytují všem – dokonce i koncovým uživatelům – možnost aktivovat nebo deaktivovat funkce, aniž by se museli ponořit do složitého kódu.