Funktionsflaggor är ett viktigt verktyg, som hjälper till att effektivisera byggandet och lanseringen av programuppdateringar. Du kan använda dem för att rikta in dig på en specifik grupp användare eller hela din användarbas.

I grund och botten låter de dig införa betydande förändringar, utan att störa arbetsflödet i din produktionsapplikation, i realtid och på begäran. Du kan göra detta genom att använda funktionsknappar som ett alternativ till omfattande kodändringar och distributioner.

Funktionsflaggor: Implementering och fördelar förklaras

Mjukvaruutveckling är utan tvekan en kontinuerlig och iterativ process. Om inte alla överger ett projekt, kommer någon att fortsätta utveckla det och introducera nya förändringar.

Helst låter CI/CD-pipelines dig driva konsekventa kodändringar till produktionen. Icke desto mindre kommer dessa processer till priset av att kräva betydande implementeringsinsatser.

Men med hjälp av funktionsflaggor kan du släppa en uppdatering till en del av eller hela din användarbas bara genom att växla en inställning.

Det finns flera situationer där funktionsflaggor är tillämpliga, inklusive:

• När du vill testa en ny idé innan den rullas ut till alla användare. Genom att göra det kan du enkelt och snabbt samla in feedback om prestanda och dess användarpåverkan.
• När du vill rulla ut viktiga nöduppdateringar och snabbkorrigeringar. Om en katastrof inträffar kan du snabbt inaktivera problematiska funktioner och lansera korrigeringar utan att omdistribuera hela programmet.
• När du tillhandahåller personliga användarupplevelser genom att aktivera eller inaktivera specifika funktioner baserat på användarattribut, preferenser eller prenumerationspaket.

Komma igång med Flagsmith

Flagsmith tillhandahåller en fantastisk lösning för funktionsflaggor, inklusive en öppen källkodsversion och en molntjänst. Den här guiden kommer att använda sin molnlösning för att integrera funktionsflaggor i en React-applikation.

För att starta:

1. Gå över till Flagsmiths molntjänst, registrera dig för ett konto och logga in på ditt konto Översikt sida.
2. På översiktssidan klickar du på Skapa projekt knappen för att skapa ett nytt Flagsmith-projekt. Flagsmith skapar automatiskt både utvecklings- och produktionsmiljöer på din Projektinställningar sida. För den här handledningen kommer du att använda utvecklingsmiljön för att implementera funktionsflaggorna.
3. Se till att du är i Utveckling miljö, välj Funktioner fliken och klicka på Skapa din första funktion knapp.
4. Ge en ID för den funktion du vill flagga, helst en sträng, klicka på växlingsknappen till Aktivera som standard funktionsalternativ och tryck Skapa funktion. I det här fallet kommer du att implementera en funktionsflagga på betyget för olika e-handelsprodukter.
5. Du kan se och hantera den nyskapade funktionen genom att navigera till översiktssidan för funktionersinställningar.

Nu, för att slutföra installationen, behöver du miljönyckeln på klientsidan.

Generera miljönyckeln på klientsidan

Så här hämtar du miljönyckeln på klientsidan:

1. Klicka på inställningar fliken under Utveckling miljö.
2. På sidan med inställningar för utvecklingsmiljö, klicka på Nycklar flik.
3. Kopiera den medföljande miljönyckeln på klientsidan.

Du kan hitta detta projekts kod i dess GitHub förvaret.

Skapa React Project

Nu, varsågod och byggnadsställning för ett React-projekt med kommandot create-react-app. Alternativt kan du använd Vite för att skapa ett grundläggande React-projekt. Observera att denna guide kommer att använda Vite för att skapa React-applikationen.

Installera sedan Flagsmith's SDK i ditt projekt. Denna SDK är kompatibel med olika JavaScript-ramverk.

npm install flagsmith

Skapa nu en .env fil i rotkatalogen i din projektmapp och lägg till miljönyckeln på klientsidan enligt följande:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Lägg till en produktlista Funktionell komponent

För att testa Flagsmiths funktionsflaggor, bygger du en enkel komponent som återger en lista över e-handelsprodukter från en DummyJSON API.

Varje produkt i listan kommer med olika attribut, såsom titel, pris, produktbeskrivning och ett övergripande produktbetyg. Avsikten är att tillämpa funktionsflaggan på produktbetygsvärdet. När du har implementerat flaggan kommer du att kunna styra funktionen genom att växla en knapp på Flagsmiths molntjänst.

I den src katalog, skapa en ny mapp och namnge den, komponenter. Lägg till en ny i den här mappen Products.jsx och inkludera följande kod.

Gör först följande importer:

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

Skapa sedan den funktionella komponenten, definiera initialtillståndsvariablerna och lägg till JSX-elementen.

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>

 );
}

Definiera nu a useEffect hook som gör HTTP-förfrågningar till dummy JSON API för att hämta produktens data. Du kan använd Fetch API eller Axios för att konsumera API.

Lägg till koden nedan i den funktionella komponenten:

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

De hämta Produkter funktion kommer att köras när komponenten monteras. Den hämtar produkternas data och uppdaterar sedan statusen för Produkter variabel.

Slutligen kan du kartlägga produktutbudet och återge dem i webbläsaren.

Precis nedanför produktlista klass div, inkludera följande kod:

{ 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 bekvämt hämta och visa en lista över produktartiklar från dummy JSON API.

Integrera Flagsmiths SDK

För att integrera och initiera Flagsmiths SDK i React-applikationen, precis under hämta Produkter funktionsanrop inuti useEffect hook, lägg till koden nedan.

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

Genom att inkludera den här funktionen aktiverar du funktionsflaggahantering med cachning och analyser i React-appen.

Funktionen använder en återuppringning för att dynamiskt hantera hur den visar produktbetyg baserat på tillståndet produktbetyg funktion flagga. Detta bör antingen vara sant (aktiverat), när det är aktiverat i molntjänsten, eller falskt (inaktiverat) när det är avstängt.

Uppdatera slutligen produktbetyg h3 element i lämna tillbaka kodblock med detta uttalande.

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

Med den här uppdateringen, när du slår på funktionen, uppdaterar den showProductRating variabel till Sann. Som ett resultat kommer produktbetyget att visas bredvid de andra attributen. Men om du stänger av funktionen, showProductRating variabel kommer att vara falsk, och produktbetyget visas inte.

Uppdatera slutligen App.jsx fil för att importera produktkomponenten.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Slutligen, kör din applikation och gå över till din webbläsare för att visa applikationen.

npm run dev

För att testa den här funktionen, gå tillbaka till din Funktionens inställningssida på Flagsmith och stäng av produktklassificeringsfunktionen.

Eftersom applikationen körs på localhost, ladda om den i webbläsaren för att se de uppdaterade ändringarna. Produktbetyget som ursprungligen fanns kommer att försvinna. Om du slår på funktionen igen och laddar om sidan igen, kommer den att dyka upp igen.

Funktionssläpp borde inte vara ett krångel längre

Funktionsflaggor har blivit ett spelväxlarverktyg för att hantera funktionssläpp i applikationer. De integreras sömlöst i utvecklingsarbetsflödet, vilket minimerar riskerna förknippade med utrullning av nya uppdateringar.

De är också kraftfulla och ger alla – även slutanvändare – möjligheten att aktivera eller inaktivera funktioner utan att gå in i komplex kod.