Indicatoarele de caracteristici sunt un instrument esențial, ajutând la simplificarea construirii și lansării actualizărilor software. Le puteți folosi pentru a viza un anumit grup de utilizatori sau întreaga dvs. bază de utilizatori.

În esență, vă permit să introduceți schimbări semnificative, fără a perturba fluxul de lucru al aplicației dvs. de producție, în timp real și la cerere. Puteți face acest lucru folosind comutatoarele de funcții ca alternativă la modificările și implementările extinse ale codului.

Semnale de caracteristici: implementare și beneficii explicate

Dezvoltarea software este, fără îndoială, un proces continuu și iterativ. Dacă nu abandonează toată lumea un proiect, cineva va continua să-l dezvolte, introducând noi schimbări.

În mod ideal, conductele CI/CD vă permit să introduceți modificări coerente ale codului în producție. Cu toate acestea, aceste procese vin cu prețul necesității unui efort substanțial de implementare.

Cu toate acestea, folosind semnalizatoarele de caracteristică, puteți lansa o actualizare pentru o parte sau pentru întreaga bază de utilizatori doar prin comutarea unei setari.

Există mai multe situații în care sunt aplicabile steaguri de caracteristică, inclusiv:

• Când doriți să testați o idee nouă înainte de a o difuza tuturor utilizatorilor. Procedând astfel, puteți colecta ușor și rapid feedback cu privire la performanță și impactul asupra utilizatorului.
• Când doriți să lansați actualizări și remedieri rapide de urgență esențiale. Dacă se produce un dezastru, puteți dezactiva rapid funcțiile problematice și puteți lansa remedieri fără a redistribui întreaga aplicație.
• Când oferiți experiențe personalizate de utilizator prin activarea sau dezactivarea unor funcții specifice bazate pe atributele utilizatorului, preferințe sau pachete de abonament.

Noțiuni introductive cu Flagsmith

Flagsmith oferă o soluție excelentă pentru steaguri de caracteristici, inclusiv o versiune open-source și un serviciu cloud. Acest ghid va folosi soluția sa cloud pentru a integra semnalizatoare de caracteristici într-o aplicație React.

Pentru a incepe:

1. Du-te la Serviciul cloud al Flagsmith, creați un cont și conectați-vă la contul dvs Prezentare generală pagină.
2. Pe pagina de prezentare generală, faceți clic pe Creați proiect butonul pentru a configura un nou proiect Flagsmith. Flagsmith va crea automat atât mediile de dezvoltare, cât și mediile de producție pe dvs Setările proiectului pagină. Pentru acest tutorial, veți folosi mediul de dezvoltare pentru a implementa semnalizatoarele de caracteristică.
3. Asigurați-vă că sunteți în Dezvoltare mediu, selectați Caracteristici fila și faceți clic pe Creați-vă prima caracteristică buton.
4. Furnizați un ID pentru caracteristica pe care doriți să o semnalați, de preferință un șir, faceți clic pe butonul de comutare Activați implicit opțiunea caracteristică și apăsați Creați caracteristică. În acest caz, veți implementa un semnalizator de caracteristică pentru evaluarea diferitelor produse de comerț electronic.
5. Puteți vizualiza și gestiona caracteristica nou creată navigând la pagina de prezentare generală a setărilor caracteristicilor.

Acum, pentru a finaliza configurarea, aveți nevoie de cheia de mediu pe partea clientului.

Generați cheia de mediu pe partea clientului

Pentru a obține cheia de mediu pe partea client:

1. Faceți clic pe Setări fila de sub Dezvoltare mediu inconjurator.
2. Pe pagina de setări a mediului de dezvoltare, faceți clic pe Chei fila.
3. Copiați cheia de mediu furnizată pe partea clientului.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu.

Creați proiectul React

Acum, mergeți înainte și schelă un proiect React folosind comanda create-react-app. Alternativ, puteți utilizați Vite pentru a configura un proiect React de bază. Vă rugăm să rețineți că acest ghid va folosi Vite pentru a crea aplicația React.

Apoi, instalați SDK-ul Flagsmith în proiectul dvs. Acest SDK este compatibil cu diverse cadre JavaScript.

npm install flagsmith

Acum, creează un .env fișier în directorul rădăcină al folderului proiectului și adăugați cheia de mediu pe partea client, după cum urmează:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Adăugați o componentă funcțională a listei de produse

Pentru a testa funcțiile Flagsmith, veți construi o componentă simplă care va reda o listă de produse de comerț electronic dintr-un DummyJSON API.

Fiecare produs din listă vine cu diverse atribute, cum ar fi titlul, prețul, descrierea produsului și o evaluare generală a produsului. Intenția este de a aplica indicatorul de caracteristică la valoarea de evaluare a produsului. Odată ce ați implementat steag-ul, veți putea controla caracteristica prin comutarea unui buton din serviciul cloud Flagsmith.

În src director, creați un folder nou și denumiți-l, componente. În interiorul acestui folder adăugați un nou Products.jsx și includeți următorul cod.

Mai întâi, efectuați următoarele importuri:

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

Apoi, creați componenta funcțională, definiți variabilele de stare inițială și adăugați elementele JSX.

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>

 );
}

Acum, definiți a useEffect cârlig care va face solicitări HTTP către API-ul JSON inactiv pentru a prelua datele produselor. Puteți utilizați API-ul Fetch sau Axios pentru a consuma API-ul.

În cadrul componentei funcționale, adăugați codul de mai jos:

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

The fetchProducts funcția va rula odată ce componenta se montează. Preia datele produselor și, ulterior, actualizează starea produse variabil.

În cele din urmă, puteți să mapați prin gama de produse și să le redați în browser.

Chiar sub product-list class div, includeți următorul cod:

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

Cu aceasta, puteți prelua și afișa confortabil o listă de articole de produs din API-ul JSON inactiv.

Integrați SDK-ul Flagsmith

Pentru a integra și inițializa SDK-ul Flagsmith în aplicația React, chiar sub fetchProducts apel de funcție în interiorul useEffect cârlig, adaugă codul de mai jos.

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

Prin includerea acestei funcții, activați gestionarea semnalizărilor caracteristicilor cu memorarea în cache și analize în aplicația React.

Funcția utilizează un apel invers pentru a gestiona dinamic modul în care afișează evaluările produselor pe baza stării rating_product steag de caracteristică. Acest lucru ar trebui să fie adevărat (activat), când este activat în serviciul cloud, sau fals (dezactivat) când este dezactivat.

În cele din urmă, actualizați rating produs h3 element în întoarcere bloc de cod cu această declarație.

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

Cu această actualizare, odată ce activați funcția, actualizează showProductRating variabilă la Adevărat. Ca rezultat, evaluarea produsului va apărea alături de celelalte atribute. Cu toate acestea, dacă dezactivați funcția, funcția showProductRating variabila va fi fals, iar evaluarea produsului nu va apărea.

În cele din urmă, actualizați App.jsx fișier pentru a importa componenta produsului.

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

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

 </div>
 </div>
 );
}

exportdefault App;

În cele din urmă, rulați aplicația și mergeți la browser pentru a vedea aplicația.

npm run dev

Pentru a testa această caracteristică, reveniți la dvs Pagina Setări a funcției pe Flagsmith și dezactivați funcția de evaluare a produsului.

Deoarece aplicația rulează pe localhost, reîncărcați-o în browser pentru a vedea modificările actualizate. Evaluarea produsului care a fost prezentă inițial va dispărea. Dacă activați din nou funcția și reîncărcați pagina din nou, aceasta va reapărea.

Lansările de funcții nu ar trebui să mai fie o bătaie de cap

Indicatorii de caracteristici au devenit un instrument de schimbare a jocului pentru gestionarea lansărilor de caracteristici în aplicații. Se integrează perfect în fluxul de lucru de dezvoltare, minimizând riscurile asociate cu lansarea de noi actualizări.

De asemenea, sunt puternice, oferind tuturor – chiar și utilizatorilor finali – puterea de a activa sau dezactiva funcții fără a se scufunda în coduri complexe.