Funkciju karodziņi ir būtisks rīks, kas palīdz racionalizēt programmatūras atjauninājumu izveidi un izlaišanu. Varat tos izmantot, lai atlasītu konkrētu lietotāju grupu vai visu savu lietotāju bāzi.

Būtībā tie ļauj ieviest būtiskas izmaiņas, netraucējot jūsu ražošanas lietojumprogrammas darbplūsmu, reāllaikā un pēc pieprasījuma. To var izdarīt, izmantojot funkciju slēdžus kā alternatīvu plašām koda modifikācijām un izvietošanai.

Funkciju karodziņi: izskaidrota ieviešana un priekšrocības

Programmatūras izstrāde, bez šaubām, ir nepārtraukts un iteratīvs process. Ja vien visi neatteiksies no projekta, kāds to turpinās attīstīt, ieviešot jaunas izmaiņas.

Ideālā gadījumā CI/CD konveijeri ļauj nodrošināt konsekventas koda izmaiņas ražošanā. Neskatoties uz to, šie procesi prasa ievērojamas izvietošanas pūles.

Tomēr, izmantojot funkciju karogus, varat izlaist atjauninājumu daļai vai visai lietotāju bāzei, vienkārši pārslēdzot iestatījumu.

Ir vairākas situācijas, kurās ir piemērojami funkciju karodziņi, tostarp:

• Ja vēlaties pārbaudīt jaunu ideju pirms tās izplatīšanas visiem lietotājiem. To darot, varat viegli un ātri apkopot atsauksmes par veiktspēju un tās ietekmi uz lietotāju.
• Ja vēlaties izlaist būtiskus ārkārtas atjauninājumus un labojumfailus. Ja notiek katastrofa, varat ātri atspējot problemātiskās funkcijas un ieviest labojumus, atkārtoti neizvietojot visu lietojumprogrammu.
• Nodrošinot personalizētu lietotāja pieredzi, iespējojot vai atspējojot noteiktas funkcijas, pamatojoties uz lietotāja atribūtiem, preferencēm vai abonementu pakotnēm.

Darba sākšana ar Flagsmith

Flagsmith nodrošina lielisku risinājumu funkciju karodziņiem, tostarp atvērtā koda versiju un mākoņpakalpojumu. Šajā rokasgrāmatā tiks izmantots mākoņa risinājums, lai integrētu funkciju karogus React lietojumprogrammā.

Lai sāktu, veiciet tālāk norādītās darbības.

1. Dodieties uz Flagsmith mākoņpakalpojums, reģistrējieties kontam un piesakieties savā kontā Pārskats lappuse.
2. Pārskata lapā noklikšķiniet uz Izveidot projektu pogu, lai iestatītu jaunu Flagsmith projektu. Flagsmith automātiski izveidos gan izstrādes, gan ražošanas vidi jūsu ierīcē Projekta iestatījumi lappuse. Šajā apmācībā jūs izmantosit izstrādes vidi, lai ieviestu līdzekļu karogus.
3. Pārliecinieties, vai atrodaties Attīstība vidi, atlasiet Iespējas cilni un noklikšķiniet uz Izveidojiet savu pirmo funkciju pogu.
4. Nodrošiniet an ID objektam, kuru vēlaties atzīmēt, vēlams virknei, noklikšķiniet uz pārslēgšanas pogas Iespējot pēc noklusējuma funkcijas opciju un nospiediet Izveidot funkciju. Šādā gadījumā dažādu e-komercijas produktu vērtējumā ieviesīsiet funkcijas karodziņu.
5. Varat skatīt un pārvaldīt jaunizveidoto līdzekli, pārejot uz funkciju iestatījumu pārskata lapu.

Tagad, lai pabeigtu iestatīšanu, ir nepieciešama klienta puses vides atslēga.

Ģenerējiet klienta puses vides atslēgu

Lai iegūtu klienta puses vides atslēgu:

1. Noklikšķiniet uz Iestatījumi cilne zem Attīstība vidi.
2. Izstrādes vides iestatījumu lapā noklikšķiniet uz Atslēgas cilne.
3. Kopējiet nodrošināto klienta puses vides atslēgu.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve.

Izveidojiet reaģēšanas projektu

Tagad uz priekšu un sastatīt React projektu, izmantojot komandu create-react-app. Alternatīvi, jūs varat izmantojiet Vite, lai iestatītu pamata React projektu. Lūdzu, ņemiet vērā, ka šī rokasgrāmata izmantos Vite, lai izveidotu lietojumprogrammu React.

Pēc tam savā projektā instalējiet Flagsmith SDK. Šis SDK ir saderīgs ar dažādiem JavaScript ietvari.

npm install flagsmith

Tagad izveidojiet a .env failu projekta mapes saknes direktorijā un pievienojiet klienta puses vides atslēgu šādi:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Pievienojiet produktu saraksta funkcionālo komponentu

Lai pārbaudītu Flagsmith funkciju karogu iespējas, jums ir jāizveido vienkāršs komponents, kas atveidos e-komercijas produktu sarakstu no DummyJSON API.

Katram produktam sarakstā ir dažādi atribūti, piemēram, nosaukums, cena, produkta apraksts un vispārējais produkta vērtējums. Produkta vērtējuma vērtībai ir paredzēts lietot funkcijas karogu. Kad būsiet ieviesis karogu, varēsiet kontrolēt šo funkciju, pārslēdzot pogu Flagsmith mākoņpakalpojumā.

Iekš src direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu, sastāvdaļas. Šajā mapē pievienojiet jaunu Produkti.jsx un iekļaujiet šādu kodu.

Vispirms veiciet šādu importēšanu:

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

Pēc tam izveidojiet funkcionālo komponentu, definējiet sākotnējā stāvokļa mainīgos un pievienojiet 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>

 );
}

Tagad definējiet a useEffect āķis, kas veiks HTTP pieprasījumus fiktīvajai JSON API, lai iegūtu produktu datus. Jūs varat izmantojiet Fetch API vai Axios, lai izmantotu API.

Funkcionālajā komponentā pievienojiet tālāk norādīto kodu:

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

The fetchProducts funkcija darbosies, tiklīdz komponents tiks uzstādīts. Tas ienes produktu datus un pēc tam atjaunina produkta stāvokli produktiem mainīgs.

Visbeidzot, varat kartēt produktu klāstu un renderēt tos pārlūkprogrammā.

Tieši zem produktu saraksts klases div, iekļaujiet šādu kodu:

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

Izmantojot to, varat ērti ienest un parādīt produktu vienumu sarakstu no fiktīvas JSON API.

Integrējiet Flagsmith SDK

Lai integrētu un inicializētu Flagsmith SDK lietojumprogrammā React, tieši zem fetchProducts funkcijas izsaukums iekšpusē useEffect āķis, pievienojiet kodu zemāk.

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

Iekļaujot šo funkciju, jūs iespējojat funkciju karoga pārvaldību ar kešatmiņu un analīzi React lietotnē.

Funkcija izmanto atzvanīšanu, lai dinamiski pārvaldītu, kā tā parāda produktu vērtējumus, pamatojoties uz statusu produktu_vērtējums funkcijas karogs. Tam ir jābūt vai nu patiesam (iespējotam), kad tas ir ieslēgts mākoņpakalpojumā, vai nepatiesam (atspējotam), kad tas ir izslēgts.

Visbeidzot, atjauniniet produkta vērtējums h3 elements atgriezties koda bloks ar šo paziņojumu.

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

Ar šo atjauninājumu, kad ieslēdzat funkciju, tas atjaunina parādītProductRating mainīgs uz taisnība. Rezultātā produkta vērtējums tiks parādīts līdzās citiem atribūtiem. Tomēr, ja izslēdzat funkciju, parādītProductRating mainīgais būs viltus, un produkta vērtējums netiks parādīts.

Visbeidzot, atjauniniet App.jsx failu, lai importētu produkta komponentu.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Visbeidzot palaidiet lietojumprogrammu un dodieties uz pārlūkprogrammu, lai skatītu lietojumprogrammu.

npm run dev

Lai pārbaudītu šo funkciju, atgriezieties savā Funkcijas iestatījumu lapa uz Flagsmith un izslēdziet produkta vērtēšanas funkciju.

Tā kā lietojumprogramma darbojas uz localhost, atkārtoti ielādējiet to pārlūkprogrammā, lai skatītu atjauninātās izmaiņas. Sākotnēji esošais produkta vērtējums pazudīs. Ja atkal ieslēdzat funkciju un atkārtoti ielādējat lapu, tā atkal tiks parādīta.

Funkciju izlaidumiem vairs nevajadzētu būt apgrūtinājumiem

Funkciju karodziņi ir kļuvuši par spēļu mainītāju rīku funkciju izlaidumu pārvaldībai lietojumprogrammās. Tie nemanāmi integrējas izstrādes darbplūsmā, samazinot riskus, kas saistīti ar jaunu atjauninājumu ieviešanu.

Tie ir arī jaudīgi, sniedzot ikvienam — pat galalietotājam — iespēju iespējot vai atspējot funkcijas, neiedziļinoties sarežģītā kodā.