Funksjonsflagg er et viktig verktøy som hjelper til med å strømlinjeforme bygging og utgivelse av programvareoppdateringer. Du kan bruke dem til å målrette mot en bestemt gruppe brukere eller hele brukerbasen din.

I hovedsak lar de deg introdusere betydelige endringer, uten å forstyrre arbeidsflyten til produksjonsapplikasjonen din, i sanntid og på forespørsel. Du kan gjøre dette ved å bruke funksjonsvekslere som et alternativ til omfattende kodeendringer og distribusjoner.

Funksjonsflagg: Implementering og fordeler forklart

Programvareutvikling er uten tvil en kontinuerlig og iterativ prosess. Med mindre alle forlater et prosjekt, vil noen fortsette å utvikle det og introdusere nye endringer.

Ideelt sett lar CI/CD-pipelines deg presse konsistente kodeendringer til produksjonen. Ikke desto mindre kommer disse prosessene på bekostning av å kreve betydelig implementeringsinnsats.

Ved å bruke funksjonsflagg kan du imidlertid gi ut en oppdatering til noen eller hele brukerbasen din bare ved å veksle mellom en innstilling.

Det er flere situasjoner der funksjonsflagg kan brukes, inkludert:

• Når du vil teste en ny idé før du ruller den ut til alle brukere. Ved å gjøre det kan du enkelt og raskt samle tilbakemeldinger om ytelse og dens brukerpåvirkning.
• Når du vil rulle ut viktige nødoppdateringer og hurtigreparasjoner. Hvis en katastrofe inntreffer, kan du raskt deaktivere problematiske funksjoner og rulle ut rettelser uten å omdistribuere hele applikasjonen.
• Når du gir personlig tilpassede brukeropplevelser ved å aktivere eller deaktivere spesifikke funksjoner basert på brukerattributter, preferanser eller abonnementspakker.

Komme i gang med Flagsmith

Flagsmith tilbyr en flott løsning for funksjonsflagg, inkludert en åpen kildekodeversjon og en skytjeneste. Denne veiledningen vil bruke sin skyløsning for å integrere funksjonsflagg i en React-applikasjon.

For å komme i gang:

1. Gå over til Flagsmiths skytjeneste, registrer deg for en konto og logg på kontoen din Oversikt side.
2. På oversiktssiden klikker du på Opprett prosjekt for å sette opp et nytt Flagsmith-prosjekt. Flagsmith vil automatisk lage både utviklings- og produksjonsmiljøene på din Prosjektinnstillinger side. For denne opplæringen vil du bruke utviklingsmiljøet til å implementere funksjonsflaggene.
3. Sørg for at du er i Utvikling miljø, velg Egenskaper fanen, og klikk på Lag din første funksjon knapp.
4. Gi en ID for funksjonen du ønsker å flagge, fortrinnsvis en streng, klikk på veksleknappen til Aktiver som standard funksjonsalternativ, og trykk Lag funksjon. I dette tilfellet implementerer du et funksjonsflagg på vurderingen av forskjellige e-handelsprodukter.
5. Du kan se og administrere den nyopprettede funksjonen ved å navigere til funksjonsinnstillinger-oversiktssiden.

Nå, for å fullføre oppsettet, trenger du miljønøkkelen på klientsiden.

Generer miljønøkkelen på klientsiden

Slik får du miljønøkkelen på klientsiden:

1. Klikk på Innstillinger fanen under Utvikling miljø.
2. På siden med innstillinger for utviklingsmiljø klikker du på Nøkler fanen.
3. Kopier den angitte miljønøkkelen på klientsiden.

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.

Opprett React-prosjektet

Nå, gå videre, og stillas et React-prosjekt ved å bruke kommandoen create-react-app. Alternativt kan du bruk Vite til å sette opp et grunnleggende React-prosjekt. Vær oppmerksom på at denne veiledningen vil bruke Vite til å lage React-applikasjonen.

Installer deretter Flagsmith's SDK i prosjektet ditt. Denne SDK-en er kompatibel med ulike JavaScript-rammeverk.

npm install flagsmith

Lag nå en .env fil i rotkatalogen til prosjektmappen og legg til miljønøkkelen på klientsiden som følger:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Legg til en produktlistefunksjonell komponent

For å teste ut Flagsmiths funksjonsflagg-funksjoner, bygger du en enkel komponent som vil gjengi en liste over e-handelsprodukter fra en DummyJSON API.

Hvert produkt i listen kommer med ulike attributter, som tittel, pris, produktbeskrivelse og en generell produktvurdering. Hensikten er å bruke funksjonsflagget på produktvurderingsverdien. Når du har implementert flagget, vil du kunne kontrollere funksjonen ved å veksle på en knapp på Flagsmiths skytjeneste.

I src katalog, opprett en ny mappe og navngi den, komponenter. Legg til en ny i denne mappen Products.jsx og inkludere følgende kode.

Foreta først følgende import:

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

Deretter oppretter du den funksjonelle komponenten, definerer initialtilstandsvariablene og legger til JSX-elementene.

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 nå en useEffect krok som vil sende HTTP-forespørsler til dummy JSON API for å hente produktenes data. Du kan bruk Fetch API eller Axios for å konsumere API.

Innenfor den funksjonelle komponenten legger du til koden nedenfor:

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

De henteprodukter funksjonen vil kjøre når komponenten monteres. Den henter produktenes data og oppdaterer deretter statusen til Produkter variabel.

Til slutt kan du kartlegge gjennom utvalget av produkter og gjengi dem i nettleseren.

Rett under produktliste klasse div, ta med 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 enkelt hente og vise en liste over produktelementer fra dummy JSON API.

Integrer Flagsmiths SDK

For å integrere og initialisere Flagsmiths SDK i React-applikasjonen, rett under henteprodukter funksjonsanrop inne i useEffect hekte, legg til koden nedenfor.

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

Ved å inkludere denne funksjonen aktiverer du funksjonsflaggadministrasjon med caching og analyser i React-appen.

Funksjonen bruker en tilbakeringing for å dynamisk administrere hvordan den viser produktvurderinger basert på tilstanden til produktvurdering funksjonsflagg. Dette skal enten være sant (aktivert), når det er slått på i skytjenesten, eller usant (deaktivert) når det er slått av.

Til slutt, oppdater produktvurdering h3 element i komme tilbake kodeblokk med denne setningen.

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

Med denne oppdateringen, når du slår på funksjonen, oppdaterer den visProductRating variabel til ekte. Som et resultat vil produktvurderingen vises sammen med de andre attributtene. Men hvis du slår funksjonen av, vil den visProductRating variabel vil være falsk, og produktvurderingen vises ikke.

Til slutt, oppdater App.jsx fil for å importere produktkomponenten.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Til slutt, kjør applikasjonen din, og gå over til nettleseren din for å se applikasjonen.

npm run dev

For å teste denne funksjonen, gå tilbake til din Funksjonens Innstillinger-side på Flagsmith, og slå av funksjonen for produktvurdering.

Siden applikasjonen kjører på localhost, last den inn på nytt i nettleseren for å se de oppdaterte endringene. Produktvurderingen som opprinnelig var til stede vil forsvinne. Hvis du slår funksjonen på igjen og laster inn siden på nytt, vil den dukke opp igjen.

Funksjonsutgivelser burde ikke være noe problem lenger

Funksjonsflagg har blitt et spillvekslerverktøy for å administrere funksjonsutgivelser i applikasjoner. De integreres sømløst i utviklingsarbeidsflyten, og minimerer risiko forbundet med utrulling av nye oppdateringer.

De er også kraftige, og gir alle – selv sluttbrukere – muligheten til å aktivere eller deaktivere funksjoner uten å dykke ned i kompleks kode.