Funkcijske zastavice so bistveno orodje, ki pomaga poenostaviti izdelavo in izdajo posodobitev programske opreme. Uporabite jih lahko za ciljanje na določeno skupino uporabnikov ali celotno bazo uporabnikov.

V bistvu vam omogočajo, da v realnem času in na zahtevo uvedete bistvene spremembe, ne da bi motili potek dela vaše proizvodne aplikacije. To lahko storite tako, da uporabite preklope funkcij kot alternativo obsežnim spremembam kode in uvajanju.

Oznake funkcij: Razlaga implementacije in prednosti

Razvoj programske opreme je nedvomno stalen in ponavljajoč se proces. Če vsi ne opustijo projekta, ga bo nekdo še naprej razvijal, uvajal nove spremembe.

V idealnem primeru vam cevovodi CI/CD omogočajo, da dosledne spremembe kode potisnete v proizvodnjo. Kljub temu ti procesi zahtevajo veliko truda pri uvajanju.

Vendar pa lahko z zastavicami funkcij izdate posodobitev za nekatere ali vse svoje uporabniške baze samo tako, da preklopite nastavitev.

Zastavice funkcij so uporabne v več situacijah, vključno z:

• Ko želite preizkusiti novo idejo, preden jo predstavite vsem uporabnikom. S tem lahko preprosto in hitro zberete povratne informacije o uspešnosti in njenem vplivu na uporabnika.
• Ko želite uvesti bistvene nujne posodobitve in sprotne popravke. Če pride do katastrofe, lahko hitro onemogočite problematične funkcije in uvedete popravke, ne da bi ponovno razmestili celotno aplikacijo.
• Pri zagotavljanju prilagojenih uporabniških izkušenj z omogočanjem ali onemogočanjem določenih funkcij na podlagi uporabniških atributov, preferenc ali naročniških paketov.

Uvod v Flagsmith

Flagsmith ponuja odlično rešitev za zastavice funkcij, vključno z odprtokodno različico in storitvijo v oblaku. Ta priročnik bo uporabil svojo rešitev v oblaku za integracijo zastavic funkcij v aplikaciji React.

Za začetek:

1. Pojdite na Flagsmithova storitev v oblaku, se prijavite za račun in se prijavite v svoj račun Pregled strani.
2. Na strani s pregledom kliknite na Ustvari projekt gumb za nastavitev novega projekta Flagsmith. Flagsmith bo samodejno ustvaril razvojno in produkcijsko okolje na vašem Nastavitve projekta strani. Za to vadnico boste uporabili razvojno okolje za implementacijo funkcijskih zastavic.
3. Prepričajte se, da ste v Razvoj okolje, izberite Lastnosti zavihek in kliknite Ustvarite svojo prvo funkcijo gumb.
4. Zagotovite ID za funkcijo, ki jo želite označiti, po možnosti niz, kliknite preklopni gumb Privzeto omogočeno možnost funkcije in zadeti Ustvari funkcijo. V tem primeru boste na oceno različnih izdelkov e-trgovine implementirali zastavico funkcije.
5. Novo ustvarjeno funkcijo si lahko ogledate in jo upravljate tako, da se pomaknete na stran s pregledom nastavitev funkcij.

Za dokončanje namestitve potrebujete ključ okolja na strani odjemalca.

Ustvarite ključ okolja na strani odjemalca

Če želite pridobiti ključ okolja na strani odjemalca:

1. Kliknite na nastavitve zavihek pod Razvoj okolju.
2. Na strani z nastavitvami razvojnega okolja kliknite Ključi zavihek.
3. Kopirajte podani ključ okolja na strani odjemalca.

Kodo tega projekta najdete v GitHub repozitorij.

Ustvarite projekt React

Zdaj pa kar naprej in ustvarite projekt React z ukazom create-react-app. Lahko pa tudi uporabite Vite za nastavitev osnovnega projekta React. Upoštevajte, da bo ta vodnik uporabil Vite za ustvarjanje aplikacije React.

Nato v svoj projekt namestite Flagsmithov SDK. Ta SDK je združljiv z različnimi ogrodje JavaScript.

npm install flagsmith

Zdaj ustvarite a .env datoteko v korenskem imeniku mape vašega projekta in dodajte ključ okolja na strani odjemalca, kot sledi:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Dodajte funkcionalno komponento seznama izdelkov

Če želite preizkusiti zmožnosti zastavic funkcij Flagsmith, boste zgradili preprosto komponento, ki bo upodobila seznam izdelkov e-trgovine iz DummyJSON API.

Vsak izdelek na seznamu ima različne atribute, kot so naslov, cena, opis izdelka in splošna ocena izdelka. Namen je, da se oznaka funkcije uporabi za vrednost ocene izdelka. Ko implementirate zastavico, boste lahko nadzirali funkcijo s preklopom gumba v storitvi v oblaku Flagsmith.

V src imenik, ustvarite novo mapo in jo poimenujte, komponente. Znotraj te mape dodajte novo Izdelki.jsx in vključite naslednjo kodo.

Najprej izvedite naslednje uvoze:

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

Nato ustvarite funkcionalno komponento, definirajte spremenljivke začetnega stanja in dodajte elemente 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>

 );
}

Zdaj pa definirajte a useEffect kavelj, ki bo posredoval zahteve HTTP navideznemu API-ju JSON za pridobivanje podatkov o izdelkih. Ti lahko za uporabo API-ja uporabite Fetch API ali Axios.

Znotraj funkcionalne komponente dodajte spodnjo kodo:

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

The fetchProducts funkcija se bo zagnala, ko bo komponenta nameščena. Pridobi podatke o izdelkih in nato posodobi stanje izdelkov spremenljivka.

Končno lahko preslikate nabor izdelkov in jih upodabljate v brskalniku.

Desno pod razred seznama izdelkov div, vključite naslednjo kodo:

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

S tem lahko udobno pridobite in prikažete seznam elementov izdelkov iz navideznega API-ja JSON.

Integrirajte Flagsmithov SDK

Če želite integrirati in inicializirati Flagsmithov SDK v aplikaciji React, desno pod fetchProducts klic funkcije znotraj useEffect hook, dodajte spodnjo kodo.

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

Z vključitvijo te funkcije omogočite upravljanje zastavic funkcij s predpomnjenjem in analitiko v aplikaciji React.

Funkcija uporablja povratni klic za dinamično upravljanje načina prikaza ocen izdelkov glede na stanje ocena_izdelka značilna zastavica. To mora biti bodisi true (omogočeno), ko je vklopljeno v storitvi v oblaku, ali false (onemogočeno), ko je izklopljeno.

Končno posodobite ocena izdelka h3 element v vrnitev blok kode s tem stavkom.

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

S to posodobitvijo, ko vklopite funkcijo, posodobi showProductRating spremenljivka do prav. Posledično bo ocena izdelka prikazana poleg ostalih atributov. Če pa to funkcijo izklopite, bo showProductRating spremenljivka bo lažno, ocena izdelka pa ne bo prikazana.

Na koncu posodobite App.jsx datoteko za uvoz komponente izdelka.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Na koncu zaženite aplikacijo in pojdite v brskalnik, da si ogledate aplikacijo.

npm run dev

Če želite preizkusiti to funkcijo, se vrnite na svoj Stran z nastavitvami funkcije na Flagsmith in izklopite funkcijo ocenjevanja izdelkov.

Ker se aplikacija izvaja na lokalnem gostitelju, jo znova naložite v brskalnik, da si ogledate posodobljene spremembe. Prvotno prisotna ocena izdelka bo izginila. Če ponovno vklopite funkcijo in ponovno naložite stran, se bo znova pojavila.

Izdaje funkcij ne bi smele biti več težave

Zastavice funkcij so postale orodje za spremembo iger za upravljanje izdaj funkcij v aplikacijah. Brezhibno se integrirajo v razvojni delovni tok in zmanjšajo tveganja, povezana z uvajanjem novih posodobitev.

Prav tako so zmogljivi in ​​vsem – tudi končnim uporabnikom – omogočajo omogočanje ali onemogočanje funkcij brez poglabljanja v zapleteno kodo.