Funktsioonilipud on oluline tööriist, mis aitab tarkvaravärskenduste koostamist ja väljaandmist sujuvamaks muuta. Saate neid kasutada konkreetse kasutajarühma või kogu kasutajabaasi sihtimiseks.

Põhimõtteliselt võimaldavad need reaalajas ja nõudmisel teha olulisi muudatusi ilma tootmisrakenduse töövoogu häirimata. Seda saate teha funktsioonide lülitid alternatiivina ulatuslikele koodimuudatustele ja juurutustele.

Funktsioonide lipud: juurutamine ja eeliste selgitus

Tarkvaraarendus on kahtlemata pidev ja korduv protsess. Kui kõik projektist ei loobu, jätkab keegi selle arendamist ja uute muudatuste sisseviimist.

Ideaalis võimaldavad CI/CD torujuhtmed järjepidevaid koodimuudatusi tootmisse suunata. Sellegipoolest nõuavad need protsessid märkimisväärseid kasutuselevõtu jõupingutusi.

Funktsioonilippude abil saate aga mõnele või kogu kasutajaskonnale värskenduse välja anda, lihtsalt seadet vahetades.

On mitmeid olukordi, kus funktsioonide lipud on rakendatavad, sealhulgas:

• Kui soovite testida uut ideed enne selle kõigile kasutajatele avaldamist. Seda tehes saate lihtsalt ja kiiresti koguda tagasisidet toimivuse ja selle kasutajamõju kohta.
• Kui soovite avaldada olulisi hädaolukorra värskendusi ja kiirparandusi. Katastroofi korral saate probleemsed funktsioonid kiiresti keelata ja parandused välja pakkuda ilma kogu rakendust ümber paigutamata.
• Isikupärastatud kasutuskogemuse pakkumisel, lubades või keelates kasutaja atribuutidel, eelistustel või tellimuspakettidel põhinevaid konkreetseid funktsioone.

Flagsmithiga alustamine

Flagsmith pakub suurepärast lahendust funktsioonilippude jaoks, sealhulgas avatud lähtekoodiga versiooni ja pilveteenust. See juhend kasutab oma pilvelahendust funktsioonilippude integreerimiseks Reacti rakendusse.

Alustamiseks toimige järgmiselt.

1. Suunduge poole Flagsmithi pilveteenus, registreerige konto ja logige oma kontole sisse Ülevaade lehel.
2. Ülevaate lehel klõpsake nuppu Loo projekt nuppu uue Flagsmithi projekti seadistamiseks. Flagsmith loob teie jaoks automaatselt nii arendus- kui tootmiskeskkonnad Projekti sätted lehel. Selle õpetuse jaoks kasutate funktsioonide lippude rakendamiseks arenduskeskkonda.
3. Veenduge, et olete Areng keskkond, valige Funktsioonid vahekaarti ja klõpsake nuppu Looge oma esimene funktsioon nuppu.
4. Esitage an ID selle funktsiooni, eelistatavalt stringi, jaoks, mida soovite märgistada, klõpsake lülitusnuppu Luba vaikimisi funktsiooni valik ja vajuta Loo funktsioon. Sel juhul rakendate erinevate e-kaubanduse toodete reitingutele funktsioonilipu.
5. Saate vaadata ja hallata vastloodud funktsiooni, liikudes funktsioonide seadete ülevaatelehele.

Nüüd vajate seadistamise lõpuleviimiseks kliendipoolset keskkonnavõtit.

Looge kliendipoolse keskkonna võti

Kliendipoolse keskkonnavõtme hankimiseks tehke järgmist.

1. Klõpsake nuppu Seaded all oleva vahekaardi Areng keskkond.
2. Klõpsake arenduskeskkonna seadete lehel nuppu Võtmed sakk.
3. Kopeerige pakutav kliendipoolne keskkonnavõti.

Selle projekti koodi leiate sellest GitHub hoidla.

Looge reageerimisprojekt

Nüüd mine edasi ja Reacti projekti tellimine, kasutades käsku create-react-app. Teise võimalusena saate kasutage Vitet Reacti põhiprojekti seadistamiseks. Pange tähele, et see juhend kasutab Reacti rakenduse loomiseks Vite'i.

Järgmisena installige oma projekti Flagsmithi SDK. See SDK ühildub erinevate JavaScripti raamistikud.

npm install flagsmith

Nüüd looge a .env faili oma projekti kausta juurkataloogi ja lisage kliendipoolne keskkonnavõti järgmiselt:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Lisage tooteloendi funktsionaalne komponent

Flagsmithi funktsioonilippude võimaluste testimiseks looge lihtne komponent, mis renderdab loendi e-kaubanduse toodetest DummyJSON API.

Igal loendis oleval tootel on erinevad atribuudid, nagu pealkiri, hind, tootekirjeldus ja toote üldine hinnang. Eesmärk on lisada toote reitingu väärtusele funktsiooni lipp. Kui olete lipu kasutusele võtnud, saate seda funktsiooni juhtida, vajutades Flagsmithi pilveteenuse nuppu.

Aastal src kataloogi, looge uus kaust ja andke sellele nimi, komponendid. Lisage sellesse kausta uus Tooted.jsx ja lisage järgmine kood.

Esmalt tehke järgmised impordid:

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

Järgmisena looge funktsionaalne komponent, määrake algolekumuutujad ja lisage JSX-i elemendid.

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>

 );
}

Nüüd määratlege a useEffect konks, mis teeb toodete andmete toomiseks HTTP-päringuid näilisele JSON API-le. Sa saad kasutage API tarbimiseks Fetch API-t või Axiost.

Lisage funktsionaalsesse komponendisse allolev kood:

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

The tooTooted funktsioon hakkab tööle, kui komponent on kinnitatud. See hangib toodete andmed ja värskendab seejärel nende olekut tooted muutuv.

Lõpuks saate toodete massiivi kaardistada ja need brauseris renderdada.

Otse all tooteloendi klass div, lisage järgmine kood:

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

Sellega saate mugavalt tuua ja kuvada tooteartiklite loendi näiv JSON API-st.

Integreerige Flagsmithi SDK

Flagsmithi SDK integreerimiseks ja lähtestamiseks Reacti rakenduses, otse all tooTooted funktsiooni kõne sees useEffect konks, lisage kood allpool.

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

Selle funktsiooni kaasamisega lubate rakenduses React vahemällu salvestamise ja analüütikaga funktsioonilipuhalduse.

Funktsioon kasutab tagasihelistamist, et hallata dünaamiliselt seda, kuidas see kuvab toote hinnanguid seadme oleku alusel toote_reiting funktsiooni lipp. See peaks olema kas tõene (lubatud), kui see on pilveteenuses sisse lülitatud, või väär (keelatud), kui see on välja lülitatud.

Lõpuks värskendage toote hinnang h3 elementi tagasi koodiplokk selle lausega.

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

Selle värskendusega värskendab see funktsiooni sisselülitamisel funktsiooni showProductRating muutuv kuni tõsi. Selle tulemusena kuvatakse toote hinnang teiste atribuutide kõrval. Kui aga lülitate funktsiooni välja, kuvatakse showProductRating muutuja saab olema valeja toote reitingut ei kuvata.

Lõpuks värskendage App.jsx faili tootekomponendi importimiseks.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Lõpuks käivitage oma rakendus ja minge oma brauserisse, et rakendust vaadata.

npm run dev

Selle funktsiooni testimiseks minge tagasi oma Funktsiooni seadete leht Flagsmithis ja lülitage toote hindamisfunktsioon välja.

Kuna rakendus töötab kohalikus hostis, laadige see värskendatud muudatuste vaatamiseks brauseris uuesti. Algselt olemas olnud tootereiting kaob. Kui lülitate funktsiooni uuesti sisse ja laadite lehe uuesti, kuvatakse see uuesti.

Funktsioonide väljalasked ei tohiks enam probleeme tekitada

Funktsioonilippudest on saanud mängu muutmise tööriist rakenduste funktsiooniväljaannete haldamiseks. Need integreeruvad sujuvalt arendustöövoogu, minimeerides uute värskenduste kasutuselevõtuga seotud riske.

Need on ka võimsad, andes kõigile – isegi lõppkasutajatele – võimaluse lubada või keelata funktsioone ilma keerukasse koodi sukeldumata.