Funktionsflag er et vigtigt værktøj, der hjælper med at strømline opbygningen og udgivelsen af ​​softwareopdateringer. Du kan bruge dem til at målrette mod en bestemt gruppe af brugere eller hele din brugerbase.

I bund og grund lader de dig indføre væsentlige ændringer uden at forstyrre arbejdsgangen i din produktionsapplikation, i realtid og efter behov. Du kan gøre dette ved at bruge funktionsskift som et alternativ til omfattende kodeændringer og implementeringer.

Featureflag: Implementering og fordele forklaret

Softwareudvikling er uden tvivl en kontinuerlig og iterativ proces. Medmindre alle opgiver et projekt, vil nogen blive ved med at udvikle det og indføre nye ændringer.

Ideelt set lader CI/CD-pipelines dig skubbe konsistente kodeændringer til produktionen. Ikke desto mindre kommer disse processer på bekostning af at kræve en betydelig implementeringsindsats.

Men ved at bruge funktionsflag kan du frigive en opdatering til nogle af eller hele din brugerbase blot ved at skifte en indstilling.

Der er flere situationer, hvor featureflag er anvendelige, herunder:

• Når du vil teste en ny idé, inden du ruller den ud til alle brugere. Ved at gøre det kan du nemt og hurtigt indsamle feedback om ydeevne og dens brugerpåvirkning.
• Når du vil udrulle væsentlige nødopdateringer og hotfixes. Hvis en katastrofe rammer, kan du hurtigt deaktivere problematiske funktioner og udrulle rettelser uden at geninstallere hele applikationen.
• Når du leverer personlige brugeroplevelser ved at aktivere eller deaktivere specifikke funktioner baseret på brugerattributter, præferencer eller abonnementspakker.

Kom godt i gang med Flagsmith

Flagsmith leverer en fantastisk løsning til featureflag, herunder en open source-version og en cloud-tjeneste. Denne vejledning vil bruge sin cloud-løsning til at integrere funktionsflag i en React-applikation.

Sådan kommer du i gang:

1. Gå over til Flagsmiths skytjeneste, tilmeld dig en konto, og log ind på din kontos Oversigt side.
2. På oversigtssiden skal du klikke på Opret projekt knappen for at oprette et nyt Flagsmith-projekt. Flagsmith vil automatisk skabe både udviklings- og produktionsmiljøer på din Projektindstillinger side. Til denne vejledning skal du bruge udviklingsmiljøet til at implementere funktionsflag.
3. Sørg for, at du er i Udvikling miljø, vælg Funktioner fanen, og klik på Opret din første funktion knap.
4. Giv en ID for den funktion, du ønsker at markere, helst en streng, skal du klikke på skifteknappen til Aktiver som standard feature option, og tryk Opret funktion. I dette tilfælde implementerer du et funktionsflag på bedømmelsen af ​​forskellige e-handelsprodukter.
5. Du kan se og administrere den nyoprettede funktion ved at navigere til oversigtssiden for funktioner-indstillinger.

Nu, for at fuldføre opsætningen, skal du bruge miljønøglen på klientsiden.

Generer miljønøglen på klientsiden

Sådan hentes miljønøglen på klientsiden:

1. Klik på Indstillinger fanen under Udvikling miljø.
2. På siden med indstillinger for udviklingsmiljø skal du klikke på Nøgler fanen.
3. Kopiér den medfølgende miljønøgle på klientsiden.

Du kan finde dette projekts kode i dens GitHub depot.

Opret React-projektet

Nu, gå videre, og stillads et React-projekt ved hjælp af kommandoen create-react-app. Alternativt kan du brug Vite til at oprette et grundlæggende React-projekt. Bemærk venligst, at denne vejledning vil bruge Vite til at oprette React-applikationen.

Installer derefter Flagsmith's SDK i dit projekt. Denne SDK er kompatibel med forskellige JavaScript rammer.

npm install flagsmith

Opret nu en .env fil i rodmappen i din projektmappe, og tilføj miljønøglen på klientsiden som følger:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Tilføj en produktliste Funktionel komponent

For at teste Flagsmiths funktionsflag-funktioner skal du bygge en simpel komponent, der vil gengive en liste over e-handelsprodukter fra en DummyJSON API.

Hvert produkt på listen kommer med forskellige attributter, såsom titel, pris, produktbeskrivelse og en samlet produktbedømmelse. Hensigten er at anvende featureflaget på produktvurderingsværdien. Når du har implementeret flaget, vil du være i stand til at styre funktionen ved at skifte til en knap på Flagsmiths skytjeneste.

I den src mappe, opret en ny mappe og navngiv den, komponenter. Tilføj en ny i denne mappe Products.jsx og inkludere følgende kode.

Foretag først følgende importer:

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

Derefter skal du oprette den funktionelle komponent, definere initialtilstandsvariablerne og tilføje JSX-elementerne.

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>

 );
}

Definer nu en useEffect hook, der vil foretage HTTP-anmodninger til dummy JSON API for at hente produkternes data. Du kan brug Fetch API eller Axios til at forbruge API.

Inden for den funktionelle komponent skal du tilføje koden nedenfor:

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

Det hente Produkter funktionen kører, når komponenten er monteret. Den henter produkternes data og opdaterer efterfølgende status for Produkter variabel.

Endelig kan du kortlægge rækken af ​​produkter og gengive dem i browseren.

Lige under produktliste klasse div, inkludere følgende kode:

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

Med det kan du nemt hente og vise en liste over produktartikler fra dummy JSON API.

Integrer Flagsmith's SDK

For at integrere og initialisere Flagsmith's SDK i React-applikationen, lige under hente Produkter funktionskald inde i useEffect hook, tilføj koden nedenfor.

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

Ved at inkludere denne funktion aktiverer du funktionsflagstyring med caching og analyser i React-appen.

Funktionen bruger et tilbagekald til dynamisk at styre, hvordan den viser produktbedømmelser baseret på tilstanden af produktvurdering feature flag. Dette skal enten være sandt (aktiveret), når det er slået til i skytjenesten, eller falsk (deaktiveret), når det er slået fra.

Opdater endelig produktvurdering h3 element i Vend tilbage kodeblok med denne erklæring.

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

Med denne opdatering, når du slår funktionen til, opdaterer den showProductRating variabel til rigtigt. Som et resultat vil produktbedømmelsen blive vist sammen med de andre attributter. Men hvis du slår funktionen fra, vil den showProductRating variabel vil være falsk, og produktbedømmelsen vises ikke.

Til sidst skal du opdatere App.jsx fil for at importere produktkomponenten.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Til sidst skal du køre din applikation og gå over til din browser for at se applikationen.

npm run dev

For at teste denne funktion skal du gå tilbage til din Funktionens Indstillinger-side på Flagsmith, og slå produktbedømmelsesfunktionen fra.

Da applikationen kører på localhost, genindlæs den i browseren for at se de opdaterede ændringer. Den produktbedømmelse, som oprindeligt var til stede, forsvinder. Hvis du slår funktionen til igen og genindlæser siden igen, vil den dukke op igen.

Funktionsudgivelser burde ikke være besværet længere

Funktionsflag er blevet et spilskifterværktøj til styring af funktionsudgivelser i applikationer. De integreres problemfrit i udviklingsworkflowet og minimerer risici forbundet med udrulning af nye opdateringer.

De er også kraftfulde og giver alle – selv slutbrugere – magten til at aktivere eller deaktivere funktioner uden at dykke ned i kompleks kode.