Oznake značajki bitan su alat koji pomaže pojednostaviti izradu i izdavanje ažuriranja softvera. Možete ih koristiti za ciljanje određene skupine korisnika ili cijele baze korisnika.

U biti, oni vam omogućuju uvođenje značajnih promjena, bez ometanja tijeka rada vaše proizvodne aplikacije, u stvarnom vremenu i na zahtjev. To možete učiniti korištenjem prekidača značajki kao alternative opsežnim izmjenama koda i implementacijama.

Oznake značajki: objašnjenje implementacije i prednosti

Razvoj softvera je bez sumnje kontinuiran i ponavljajući proces. Ako svi ne odustanu od projekta, netko će ga nastaviti razvijati, unositi nove promjene.

U idealnom slučaju, CI/CD cjevovodi omogućuju vam guranje dosljednih promjena koda u proizvodnju. Unatoč tome, ovi procesi dolaze po cijenu da zahtijevaju znatan napor u implementaciji.

Međutim, korištenjem oznaka značajki, možete izdati ažuriranje za neke ili sve svoje korisničke baze samo prebacivanjem postavke.

Postoji nekoliko situacija u kojima su oznake značajki primjenjive, uključujući:

• Kada želite testirati novu ideju prije nego što je objavite svim korisnicima. Na taj način možete jednostavno i brzo prikupiti povratne informacije o izvedbi i njezinom utjecaju na korisnika.
• Kada želite uvesti bitna hitna ažuriranja i hitne popravke. Ako dođe do katastrofe, možete brzo onemogućiti problematične značajke i uvesti popravke bez ponovnog postavljanja cijele aplikacije.
• Prilikom pružanja personaliziranih korisničkih iskustava omogućavanjem ili onemogućavanjem određenih značajki na temelju korisničkih atributa, postavki ili paketa pretplate.

Početak rada s Flagsmithom

Flagsmith pruža odlično rješenje za oznake značajki, uključujući verziju otvorenog koda i uslugu u oblaku. Ovaj će vodič koristiti svoje rješenje u oblaku za integraciju zastavica značajki u React aplikaciju.

Započeti:

1. Prijeđite na Flagsmithova usluga u oblaku, prijavite se za račun i prijavite se na svoj račun Pregled stranica.
2. Na stranici pregleda kliknite na Stvori projekt gumb za postavljanje novog Flagsmith projekta. Flagsmith će automatski stvoriti i razvojno i proizvodno okruženje na vašem Postavke projekta stranica. U ovom vodiču koristit ćete razvojno okruženje za implementaciju oznaka značajki.
3. Provjerite jeste li u Razvoj okruženje, odaberite Značajke i kliknite na Izradite svoju prvu značajku dugme.
4. Navedite iskaznica za značajku koju želite označiti, po mogućnosti niz, kliknite gumb za prebacivanje Omogući prema zadanim postavkama značajka opciju, i pogodak Stvori značajku. U ovom slučaju, implementirat ćete oznaku značajke na ocjenu različitih proizvoda e-trgovine.
5. Novostvorenu značajku možete pregledati i upravljati njome dolaskom na stranicu pregleda postavki značajki.

Sada, da biste dovršili postavljanje, potreban vam je ključ okruženja na strani klijenta.

Generirajte ključ okruženja na strani klijenta

Za dobivanje ključa okruženja na strani klijenta:

1. Klikni na postavke karticu ispod Razvoj okoliš.
2. Na stranici postavki razvojnog okruženja kliknite Ključevi tab.
3. Kopirajte dostavljeni ključ okruženja na strani klijenta.

Kôd ovog projekta možete pronaći u GitHub spremište.

Napravite projekt React

Sada, samo naprijed, i izradite React projekt pomoću naredbe create-react-app. Alternativno, možete koristite Vite za postavljanje osnovnog React projekta. Imajte na umu da će ovaj vodič koristiti Vite za izradu React aplikacije.

Zatim instalirajte Flagsmithov SDK u svoj projekt. Ovaj SDK je kompatibilan s raznim JavaScript okviri.

npm install flagsmith

Sada stvorite a .env datoteku u korijenskom direktoriju mape vašeg projekta i dodajte ključ okruženja na strani klijenta na sljedeći način:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Dodajte funkcionalnu komponentu popisa proizvoda

Da biste testirali mogućnosti označavanja značajki Flagsmitha, izgradit ćete jednostavnu komponentu koja će prikazati popis proizvoda e-trgovine iz DummyJSON API.

Svaki proizvod na popisu dolazi s različitim atributima, kao što su naslov, cijena, opis proizvoda i ukupna ocjena proizvoda. Namjera je primijeniti oznaku značajke na vrijednost ocjene proizvoda. Nakon što implementirate zastavu, moći ćete kontrolirati značajku prebacivanjem gumba na Flagsmithovoj usluzi oblaka.

u src imenik, stvorite novu mapu i dajte joj naziv, komponente. Unutar ove mape dodajte novu Proizvodi.jsx i uključite sljedeći kod.

Prvo izvršite sljedeće uvoze:

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

Zatim izradite funkcionalnu komponentu, definirajte varijable početnog stanja i dodajte JSX elemente.

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>

 );
}

Sada definirajte a useEffect kuka koja će upućivati ​​HTTP zahtjeve lažnom JSON API-ju za dohvaćanje podataka proizvoda. Možeš koristite Fetch API ili Axios za korištenje API-ja.

Unutar funkcionalne komponente dodajte kod u nastavku:

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

The dohvatiProizvode funkcija će se pokrenuti kada se komponenta montira. Dohvaća podatke o proizvodima i naknadno ažurira stanje proizvoda varijabla.

Konačno, možete mapirati niz proizvoda i prikazati ih u pregledniku.

Točno ispod klasa popisa proizvoda div, uključuju sljedeći kôd:

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

Uz to, možete udobno dohvatiti i prikazati popis stavki proizvoda iz lažnog JSON API-ja.

Integrirajte Flagsmithov SDK

Da biste integrirali i inicijalizirali Flagsmithov SDK u aplikaciji React, odmah ispod dohvatiProizvode poziv funkcije unutar useEffect kuka, dodajte kod u nastavku.

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

Uključivanjem ove funkcije omogućujete upravljanje zastavicama značajki s predmemoriranjem i analitikom u aplikaciji React.

Funkcija koristi povratni poziv za dinamičko upravljanje načinom na koji prikazuje ocjene proizvoda na temelju stanja ocjena_proizvoda značajka zastavica. Ovo bi trebalo biti istinito (omogućeno) kada je uključeno u usluzi oblaka ili lažno (onemogućeno) kada je isključeno.

Konačno, ažurirajte ocjena proizvoda h3 element u povratak blok koda s ovom izjavom.

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

S ovim ažuriranjem, nakon što uključite značajku, ono ažurira showProductRating varijabla za pravi. Kao rezultat toga, ocjena proizvoda pojavit će se uz ostale atribute. Međutim, ako isključite značajku, showProductRating varijabla će biti lažno, a ocjena proizvoda se neće pojaviti.

Na kraju, ažurirajte App.jsx datoteku za uvoz komponente proizvoda.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Na kraju, pokrenite svoju aplikaciju i prijeđite na svoj preglednik da vidite aplikaciju.

npm run dev

Da biste testirali ovu značajku, vratite se na svoju Stranica postavki značajke na Flagsmithu i isključite značajku ocjenjivanja proizvoda.

Budući da se aplikacija izvodi na lokalnom hostu, ponovno je učitajte u preglednik da biste vidjeli ažurirane promjene. Prvobitna ocjena proizvoda će nestati. Ako ponovno uključite značajku i ponovno učitate stranicu, ponovno će se pojaviti.

Izdanja značajki više ne bi trebala biti gnjavaža

Oznake značajki postale su alat za promjenu igre za upravljanje izdanjima značajki u aplikacijama. Oni se neprimjetno integriraju u radni tijek razvoja, smanjujući rizike povezane s uvođenjem novih ažuriranja.

Također su moćni, dajući svima - čak i krajnjim korisnicima - moć da omoguće ili onemoguće značajke bez poniranja u složeni kod.