Suteikite savo programoms lankstumo ir tvirtumo naudodami nustatymus, kuriuos galite perjungti iškart.

Funkcijų vėliavėlės yra esminis įrankis, padedantis supaprastinti programinės įrangos naujinimų kūrimą ir išleidimą. Galite juos naudoti norėdami taikyti konkrečią vartotojų grupę arba visą savo vartotojų bazę.

Iš esmės jie leidžia atlikti reikšmingus pakeitimus, netrikdant gamybos programos darbo eigos, realiuoju laiku ir pagal poreikį. Tai galite padaryti naudodami funkcijų perjungiklius kaip alternatyvą dideliems kodo pakeitimams ir diegimams.

Funkcijų vėliavėlės: įgyvendinimas ir paaiškinta nauda

Programinės įrangos kūrimas, be jokios abejonės, yra nuolatinis ir pasikartojantis procesas. Jei visi neatsisakys projekto, kažkas jį toliau plėtos, įves naujus pokyčius.

Idealiu atveju CI / CD konvejeriai leidžia nuosekliai keisti kodą į gamybą. Nepaisant to, šie procesai kainuoja ir reikalauja didelių diegimo pastangų.

Tačiau naudodami funkcijų vėliavėles galite išleisti kai kurių arba visos savo vartotojų bazės naujinimą tiesiog perjungdami nustatymą.

instagram viewer

Yra keletas situacijų, kai taikomos funkcijų vėliavėlės, įskaitant:

  • Kai norite išbandyti naują idėją prieš pateikiant ją visiems vartotojams. Tai darydami galite lengvai ir greitai surinkti atsiliepimus apie našumą ir jo poveikį vartotojui.
  • Kai norite išleisti esminius avarinius naujinimus ir karštąsias pataisas. Ištikus nelaimei, galite greitai išjungti problemines funkcijas ir įdiegti pataisymus neperdėdami visos programos.
  • Teikiant suasmenintą naudotojo patirtį įjungiant arba išjungiant konkrečias funkcijas, pagrįstas vartotojo atributais, nuostatomis ar prenumeratos paketais.

Darbo su Flagsmith pradžia

„Flagsmith“ siūlo puikų funkcijų vėliavėlių sprendimą, įskaitant atvirojo kodo versiją ir debesies paslaugą. Šiame vadove bus naudojamas debesies sprendimas, kad integruotų funkcijų vėliavėles į „React“ programą.

Pradėti:

  1. Eikite į „Flagsmith“ debesies paslauga, prisiregistruokite prie paskyros ir prisijunkite prie savo paskyros Apžvalga puslapį.
  2. Apžvalgos puslapyje spustelėkite Sukurti projektą mygtuką, kad nustatytumėte naują Flagsmith projektą. Flagsmith automatiškai sukurs jūsų kūrimo ir gamybos aplinką Projekto nustatymai puslapį. Šioje mokymo programoje naudosite kūrimo aplinką, kad įdiegtumėte funkcijų vėliavėles.
  3. Įsitikinkite, kad esate Plėtra aplinką, pasirinkite funkcijos skirtuką ir spustelėkite Sukurkite savo pirmąją funkciją mygtuką.
  4. Pateikite an ID Norėdami pažymėti funkciją, pageidautina eilutę, spustelėkite perjungimo mygtuką Įgalinti pagal numatytuosius nustatymus funkcijos parinktis ir paspauskite Sukurti funkciją. Tokiu atveju skirtingų el. prekybos produktų įvertinime įdiegsite funkcijos žymą.
  5. Naujai sukurtą funkciją galite peržiūrėti ir valdyti eidami į funkcijų nustatymų apžvalgos puslapį.

Dabar, kad užbaigtumėte sąranką, jums reikia kliento aplinkos rakto.

Sugeneruokite kliento aplinkos raktą

Norėdami gauti kliento aplinkos raktą:

  1. Spustelėkite ant Nustatymai skirtuką po Plėtra aplinką.
  2. Kūrimo aplinkos nustatymų puslapyje spustelėkite Raktai skirtuką.
  3. Nukopijuokite pateiktą kliento pusės aplinkos raktą.

Šio projekto kodą galite rasti jame GitHub saugykla.

Sukurkite React projektą

Dabar pirmyn ir sukurti „React“ projektą naudodami komandą „create-react-app“.. Arba galite naudokite Vite, kad nustatytumėte pagrindinį React projektą. Atminkite, kad šiame vadove „React“ programai sukurti bus naudojama „Vite“.

Tada įdiekite Flagsmith SDK savo projekte. Šis SDK suderinamas su įvairiais JavaScript karkasai.

npm install flagsmith

Dabar sukurkite a .env failą projekto aplanko šakniniame kataloge ir pridėkite kliento aplinkos raktą taip:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Pridėkite gaminių sąrašo funkcinį komponentą

Norėdami išbandyti „Flagsmith“ funkcijų vėliavėlių galimybes, sukursite paprastą komponentą, kuris pateiks el. prekybos produktų sąrašą iš DummyJSON API.

Kiekvienas sąrašo produktas turi įvairių atributų, tokių kaip pavadinimas, kaina, produkto aprašymas ir bendras produkto įvertinimas. Produkto įvertinimo vertei ketinama taikyti funkcijos vėliavėlę. Įdiegę vėliavėlę galėsite valdyti šią funkciją paspausdami mygtuką Flagsmith debesies paslaugoje.

Viduje src kataloge, sukurkite naują aplanką ir pavadinkite jį, komponentai. Šiame aplanke pridėkite naują Produktai.jsx ir įtraukite šį kodą.

Pirmiausia atlikite šiuos importavimo veiksmus:

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

Tada sukurkite funkcinį komponentą, apibrėžkite pradinius būsenos kintamuosius ir pridėkite JSX elementus.

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>

 );
}

Dabar apibrėžkite a naudojimoEfektas kabliukas, kuris pateiks HTTP užklausas netikrajai JSON API, kad gautų produktų duomenis. Tu gali naudokite Fetch API arba Axios, kad sunaudotumėte API.

Funkciniame komponente pridėkite toliau esantį kodą:

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

The fetchProducts funkcija veiks, kai komponentas bus prijungtas. Jis gauna produktų duomenis ir vėliau atnaujina būseną Produktai kintamasis.

Galiausiai galite susieti produktų masyvą ir pateikti juos naršyklėje.

Tiesiai žemiau produktų sąrašo klasė skyr, įtraukite šį 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>
))}

Naudodami tai galite patogiai gauti ir rodyti produktų elementų sąrašą iš netikros JSON API.

Integruokite Flagsmith SDK

Norėdami integruoti ir inicijuoti Flagsmith SDK programoje React, tiesiai po fetchProducts funkcijos iškvietimas viduje naudojimoEfektas kabliukas, pridėkite kodą žemiau.

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

Įtraukę šią funkciją įgalinate funkcijų vėliavėlių valdymą su talpyklomis ir analize „React“ programoje.

Funkcija naudoja atgalinį skambutį, kad dinamiškai valdytų, kaip rodomi produktų įvertinimai pagal būseną produkto_įvertinimas funkcijos vėliava. Tai turėtų būti tiesa (įjungta), kai įjungta debesies paslaugoje, arba klaidinga (išjungta), kai išjungta.

Galiausiai atnaujinkite produkto įvertinimas h3 elementas grąžinti kodo blokas su šiuo teiginiu.

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

Su šiuo atnaujinimu, kai įjungsite funkciją, jis atnaujins parodytiProdukto įvertinimas kintamasis į tiesa. Dėl to produkto įvertinimas bus rodomas kartu su kitais atributais. Tačiau, jei išjungsite funkciją, parodytiProdukto įvertinimas kintamasis bus klaidinga, ir produkto įvertinimas nebus rodomas.

Galiausiai atnaujinkite App.jsx failą produkto komponentui importuoti.

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


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

 </div>
 </div>
 );
}




exportdefault App;

Galiausiai paleiskite programą ir eikite į naršyklę, kad peržiūrėtumėte programą.

npm run dev

Norėdami išbandyti šią funkciją, grįžkite į savo Funkcijos nustatymų puslapis Flagsmith ir išjunkite produkto įvertinimo funkciją.

Kadangi programa veikia „localhost“, iš naujo įkelkite ją į naršyklę, kad peržiūrėtumėte atnaujintus pakeitimus. Iš pradžių buvęs produkto įvertinimas išnyks. Jei vėl įjungsite funkciją ir vėl įkelsite puslapį, ji vėl pasirodys.

Funkcijų leidimai nebeturėtų kelti rūpesčių

Funkcijų vėliavėlės tapo žaidimų keitimo įrankiu, leidžiančiu valdyti programų funkcijų leidimus. Jie sklandžiai integruojami į kūrimo darbo eigą, sumažindami riziką, susijusią su naujų atnaujinimų diegimu.

Jie taip pat yra galingi, suteikiantys kiekvienam – net galutiniam naudotojui – galią įjungti arba išjungti funkcijas, nesigilindami į sudėtingą kodą.