Hur man integrerar funktionsflaggor i React-applikationer med hjälp av Flagsmith

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

Dessa verktyg gör det möjligt att genomföra stora förändringar i en produktionsmiljö utan att det påverkar det operativa flödet. Detta uppnås genom användning av funktionsflaggor i stället för komplicerade kodrevisioner och distributionsprocesser.

Funktionsflaggor: Förklaring av implementering och fördelar

Programvaruutveckling är utan tvekan ett pågående och cykliskt arbete. Så länge som individer är engagerade i ett visst projekt kommer ändringar och förbättringar att implementeras av åtminstone en individ eller enhet.

I idealfallet underlättar Continuous Integration and Continuous Deployment (CI/CD) pipelines sömlös leverans av konsekventa koduppdateringar till produktionsmiljöer med minimal mänsklig inblandning. Denna process är dock ofta förknippad med en betydande investering i distributionsinsatser som kan vara både tidskrävande och resurskrävande.

Med hjälp av funktionsflaggor kan man sprida en uppgradering till en del av eller hela sin användargrupp genom att bara justera en konfigurationsinställning.

I olika scenarier kan det vara lämpligt att använda funktionsflaggor, t.ex:

När man vill utvärdera ett innovativt koncept innan det implementeras universellt, är ett experiment med ett kontrollerat urval av användare ett effektivt sätt att samla in både kvalitativa och kvantitativa data om produktens funktionalitet och dess övergripande inflytande på slutanvändarna.

När man står inför en brådskande situation som kräver kritiska patchar eller snabba lösningar är det viktigt att ha en mekanism på plats som möjliggör omedelbar distribution av nödvändiga uppdateringar och lösningar för eventuella felaktiga komponenter. På så sätt kan man vidta snabba åtgärder i händelse av oförutsedda omständigheter, minimera driftstopp och säkerställa fortsatt stabilitet och funktionalitet för systemet som helhet.

Att skräddarsy användarupplevelsen genom att aktivera eller inaktivera vissa funktioner beroende på individuella egenskaper, preferenser och prenumerationsplaner är en viktig aspekt av att leverera anpassade tjänster.

Komma igång med Flagsmith

Flagsmith erbjuder en heltäckande metod för att implementera funktionsflaggor, som inkluderar både ett alternativ med öppen källkod och en molnbaserad plattform. I det här exemplet ska vi använda deras molnbaserade tjänst för att sömlöst integrera funktionsflaggor i en React-applikation.

För att komma igång:

⭐ Gå över till Flagsmiths molntjänst , registrera ett konto och logga in på ditt kontos översiktssida.

⭐ På översiktssidan klickar du på knappen Skapa projekt för att konfigurera ett nytt Flagsmith-projekt. Flagsmith skapar automatiskt både utvecklings- och produktionsmiljöerna på sidan Projektinställningar. I den här handledningen kommer du att använda utvecklingsmiljön för att implementera funktionsflaggorna.

⭐ Se till att du befinner dig i utvecklingsmiljön, välj fliken Funktioner och klicka på knappen Skapa din första funktion.

⭐ Ange ett ID för den funktion du vill flagga, helst en sträng, klicka på växlingsknappen för alternativet Aktivera som standardfunktion och tryck på Skapa funktion . I det här fallet kommer du att implementera en funktionsflagga på betygsättningen av olika e-handelsprodukter.

⭐ Du kan visa och hantera den nyskapade funktionen genom att navigera till översiktssidan för funktionsinställningar.

För att kunna slutföra konfigurationen av din miljö är det nödvändigt att du får den nyckel som är kopplad till kontexten på klientsidan.

Generera miljönyckeln för klientsidan

Så här får du miljönyckeln för klientsidan:

⭐ Klicka på fliken Inställningar under utvecklingsmiljön.

⭐ Klicka på fliken Nycklar på sidan med inställningar för utvecklingsmiljön.

⭐Kopiera den medföljande miljönyckeln för klientsidan.

Källkoden för detta projekt finns på GitHub-plattformen i ett särskilt arkiv.

Skapa React-projektet

Först och främst ska du bestämma om du vill använda det förstnämnda genom att köra kommandot ovan, eller alternativt välja det sistnämnda genom att implementera det som din föredragna installationsmetod. Det är viktigt att vara medveten om att instruktionerna i den här guiden förutsätter att Vite används för att skapa React-applikationen.

För att gå vidare ska du integrera Flagsmiths Software Development Kit (SDK) i ditt projekt. Detta SDK stöder en mängd olika

 npm install flagsmith 

Att införliva .env-filen i den primära katalogen i projektets lagringsområde är ett viktigt steg för att säkerställa att miljövariablerna på klientsidan är åtkomliga på ett adekvat sätt. För att upprätta denna konfiguration bör du generera ett nytt .env-dokument och placera det längst fram i den befintliga filhierarkin.Specifikt måste miljövariabeln på klientsidan anges enligt nedan för att integrationen med systemet ska lyckas:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>" 

Lägg till en produktlista Funktionell komponent

För att testa Flagsmiths funktionella flaggfunktioner ska du bygga en enkel komponent som visar en lista över e-handelsprodukter från en DummyJSON API.

Varje artikel i katalogen har flera egenskaper, inklusive titel, kostnad, produktbeskrivning och en samlad produktutvärdering. Vårt mål är att använda funktionsväljaren för att styra produktvärderingsaspekten. Efter att ha införlivat denna funktionalitet kommer användarna att kunna manipulera funktionen via en knapp på Flagsmiths fjärrservicegränssnitt.

Skapa en ny underkatalog med namnet “components” i källkatalogen och placera den i den befintliga hierarkin. Placera sedan en ny fil med namnet “Products.jsx” i komponentmappen och kopiera det efterföljande kodblocket för att fylla dess innehåll.

Gör först följande importer:

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

Införliva en funktionell komponent genom att fastställa de initiala tillståndsparametrarna, implementera de nödvändiga JavaScript-komponenterna och införliva de relevanta HTML-elementen i lämpligt sammanhang.

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <>
       <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
} 

javascriptimport { useState } from ‘react’;import axios from ‘axios’;function DummyAPI() {const [products, setProducts] = useState([]);useEffect(() => {async function fetchData() {try {const response = await axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} catch (error) {console.log(error);}}fetchData();}, []);return ( Dummy Products {products.map((product)

Införliva följande kod i funktionskomponenten:

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

Vid första renderingen körs funktionen fetchProducts , som hämtar produktinformation och uppdaterar det aktuella läget för variabeln products i enlighet med detta.

I slutändan kan man traversera en matris med objekt och visa dem i en webbläsare.

Under klassindelningen “product-list”, införliva följande kod i ett nytt div-element:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2>
         <p>Price: ${product.price}</p>
        <p>{product.description}</p>

        <h3>Rating: {product.rating}</h3>
    </div>
))} 

Mot bakgrund av detta kan man enkelt hämta och visa en katalog med specificerade produkter som hämtats från det falska JSON API.

Integrera Flagsmiths SDK

För att integrera och konfigurera Flagsmiths Software Development Kit i en React-applikation med hjälp av useEffect hook, bör man placera det angivna kodavsnittet omedelbart efter anrop av fetchProducts funktionen inom nämnda hook.

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

Genom att integrera denna funktionalitet kan man implementera funktionsflaggor i en cachad och analyserad miljö i din React-applikation.

Funktionen använder en callback-mekanism för att adaptivt reglera presentationen av information om produktbetyg enligt den aktuella statusen för produkt\_rating-funktionsflaggan. Detta kan betraktas som antingen aktivt (aktiverat), när det aktiveras inom molntjänsterna, eller inaktivt (inaktiverat), när det avaktiveras inom samma sammanhang.

Slutligen, modifiera h3 taggen för produktbetyget genom att inkludera ett uttalande i return kodblocket enligt följande:

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

Funktionen i den aktuella uppdateringen möjliggör visning av produktbetyget när den är aktiverad, vilket framgår av dess koppling till variabeln showProductRating, som uppdateras för att indikera att produktbetyget ska visas tillsammans med de andra relevanta attributen. Om variabeln showProductRating däremot avaktiveras återgår den till sitt ursprungliga tillstånd, vilket förhindrar att produktbetyget visas i gränssnittet.

Slutligen, modifiera App.jsx-filen genom att införliva ett importuttalande för Product-komponenten.

 import "./App.css";
import Products from "./components/Products";

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products />
      </div>
    </div>
  );
}

export default App; 

Slutligen, kör ditt program och navigera till en webbläsare för att observera programvarans funktionalitet.

 npm run dev 

För att verifiera funktionen hos detta attribut, vänligen navigera till sidan Funktionsinställningar i Flagsmith och inaktivera alternativet för produktbetyg.

För att se de senaste ändringarna som gjorts i programmet, uppdatera webbläsarens display genom att ladda om det lokalt körda programmet. Samtidigt kommer alla befintliga betyg som finns i systemet att försvinna. Men om du därefter återaktiverar den ovan nämnda funktionen och sedan trycker på uppdateringsknappen en gång till, bör de saknade betygen dyka upp igen.

Funktionsreleaser ska inte vara ett problem längre

Funktionsflaggor har visat sig vara ett oumbärligt instrument för att reglera funktionsdistributioner inom programvaruapplikationer.Integrationen av dessa verktyg är både strömlinjeformad och diskret, vilket effektivt minskar potentiella risker som kan uppstå vid implementering av uppdateringar.

Funktionen ger ett användarvänligt gränssnitt som gör det möjligt för både tekniska och icke-tekniska personer att enkelt ändra inställningar och funktioner, vilket eliminerar behovet av omfattande kodningskunskaper.