Ominaisuusliput ovat olennainen työkalu, joka auttaa virtaviivaistamaan ohjelmistopäivitysten rakentamista ja julkaisemista. Voit käyttää niitä kohdistaaksesi tiettyyn käyttäjäryhmään tai koko käyttäjäkuntaasi.

Pohjimmiltaan niiden avulla voit tehdä merkittäviä muutoksia häiritsemättä tuotantosovelluksesi työnkulkua reaaliajassa ja tarpeen mukaan. Voit tehdä tämän käyttämällä toimintojen vaihtoja vaihtoehtona laajoille koodin muokkauksille ja käyttöönotuksille.

Ominaisuuden liput: Käyttöönotto ja edut selitetty

Ohjelmistokehitys on epäilemättä jatkuva ja iteratiivinen prosessi. Elleivät kaikki hylkää projektia, joku jatkaa sen kehittämistä ja tekee uusia muutoksia.

Ihannetapauksessa CI/CD-liukuhihnat antavat sinun viedä johdonmukaisia ​​koodimuutoksia tuotantoon. Tästä huolimatta nämä prosessit vaativat huomattavia käyttöönottoponnisteluja.

Ominaisuuslippujen avulla voit kuitenkin julkaista päivityksen joillekin tai koko käyttäjäkunnallesi vaihtamalla asetusta.

Ominaisuuslippuja voidaan käyttää useissa tilanteissa, mukaan lukien:

• Kun haluat testata uutta ideaa ennen kuin julkaiset sen kaikille käyttäjille. Näin voit helposti ja nopeasti kerätä palautetta suorituskyvystä ja sen käyttäjävaikutuksista.
• Kun haluat julkaista tärkeitä hätäpäivityksiä ja hotfix-korjauksia. Jos katastrofi iskee, voit nopeasti poistaa ongelmalliset ominaisuudet käytöstä ja ottaa käyttöön korjauksia asentamatta koko sovellusta uudelleen.
• Kun tarjotaan henkilökohtaisia ​​käyttökokemuksia ottamalla käyttöön tai poistamalla käytöstä tiettyjä ominaisuuksia, jotka perustuvat käyttäjän määritteisiin, asetuksiin tai tilauspaketteihin.

Flagsmithin käytön aloittaminen

Flagsmith tarjoaa erinomaisen ratkaisun ominaisuuslipuille, mukaan lukien avoimen lähdekoodin versio ja pilvipalvelu. Tämä opas käyttää pilviratkaisuaan ominaisuuslippujen integroimiseen React-sovellukseen.

Näin pääset alkuun:

1. Suuntaa kohti Flagsmithin pilvipalvelu, rekisteröidy tilille ja kirjaudu sisään tilillesi Yleiskatsaus sivu.
2. Napsauta yleiskatsaussivulla Luo projekti -painiketta asettaaksesi uuden Flagsmith-projektin. Flagsmith luo automaattisesti sekä kehitys- että tuotantoympäristöt tietokoneellesi Projektiasetukset sivu. Tässä opetusohjelmassa käytät kehitysympäristöä ominaisuuslippujen toteuttamiseen.
3. Varmista, että olet mukana Kehitys ympäristö, valitse ominaisuudet -välilehteä ja napsauta Luo ensimmäinen ominaisuus -painiketta.
4. Tarjoa an ID Napsauta vaihtopainiketta sen ominaisuuden kohdalla, jonka haluat merkitä, mieluiten merkkijonoa Ota oletuksena käyttöön ominaisuusvaihtoehto ja paina Luo ominaisuus. Tässä tapauksessa otat ominaisuuslipun käyttöön eri verkkokaupan tuotteiden luokituksessa.
5. Voit tarkastella ja hallita juuri luotua ominaisuutta siirtymällä ominaisuuksien asetusten yleiskatsaussivulle.

Nyt tarvitset asiakaspuolen ympäristöavaimen asennuksen viimeistelemiseksi.

Luo asiakaspuolen ympäristöavain

Asiakaspuolen ympäristöavaimen hankkiminen:

1. Klikkaa asetukset -välilehti Kehitys ympäristöön.
2. Napsauta kehitysympäristön asetussivulla Avaimet -välilehti.
3. Kopioi toimitettu asiakaspuolen ympäristöavain.

Löydät tämän projektin koodin siitä GitHub arkisto.

Luo React-projekti

Mene nyt eteenpäin ja rakentaa React-projekti komennolla create-react-app. Vaihtoehtoisesti voit käytä Vitea perustaaksesi React-perusprojektin. Huomaa, että tämä opas käyttää Viteä React-sovelluksen luomiseen.

Asenna seuraavaksi Flagsmithin SDK projektiisi. Tämä SDK on yhteensopiva useiden JavaScript-kehykset.

npm install flagsmith

Luo nyt a .env tiedosto projektikansiosi juurihakemistoon ja lisää asiakaspuolen ympäristöavain seuraavasti:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Lisää tuoteluetteloon toiminnallinen komponentti

Voit testata Flagsmithin ominaisuuslippuominaisuuksia rakentamalla yksinkertaisen komponentin, joka näyttää luettelon verkkokaupan tuotteista DummyJSON API.

Jokaisella luettelon tuotteella on erilaisia ​​määritteitä, kuten nimi, hinta, tuotteen kuvaus ja tuotteen kokonaisarvio. Tarkoituksena on käyttää ominaisuuden lippua tuotteen luokitusarvoon. Kun olet ottanut lipun käyttöön, voit hallita ominaisuutta vaihtamalla painiketta Flagsmithin pilvipalvelussa.

Vuonna src hakemistoon, luo uusi kansio ja anna sille nimi, komponentit. Lisää tähän kansioon uusi Tuotteet.jsx ja sisällytä seuraava koodi.

Tee ensin seuraavat tuonnit:

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

Luo seuraavaksi toiminnallinen komponentti, määritä alkutilamuuttujat ja lisää JSX-elementit.

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>

 );
}

Määritä nyt a useEffect koukku, joka tekee HTTP-pyyntöjä vale JSON API: lle tuotteiden tietojen hakemiseksi. Sinä pystyt käytä Fetch API: ta tai Axiosta sovellusliittymän kuluttamiseen.

Lisää toiminnalliseen komponenttiin alla oleva koodi:

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

The fetchProducts toiminto toimii, kun komponentti on asennettu. Se hakee tuotteiden tiedot ja päivittää sen jälkeen tuotteen tilan Tuotteet muuttuja.

Lopuksi voit kartoittaa tuotevalikoiman ja hahmontaa ne selaimessa.

Aivan alapuolella tuoteluettelo luokka div, sisällytä seuraava koodi:

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

Sen avulla voit mukavasti noutaa ja näyttää tuoteluettelon vale-JSON-sovellusliittymästä.

Integroi Flagsmithin SDK

Voit integroida ja alustaa Flagsmithin SDK: n React-sovelluksessa suoraan fetchProducts toimintokutsu sisällä useEffect koukku, lisää alla oleva koodi.

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

Kun sisällytät tämän toiminnon, otat ominaisuuslippujen hallinnan käyttöön välimuistin ja analytiikan avulla React-sovelluksessa.

Toiminto käyttää takaisinsoittoa hallitakseen dynaamisesti, kuinka se näyttää tuotearviot tuotteen tilan perusteella product_rating ominaisuuden lippu. Tämän tulee olla joko tosi (käytössä), kun se on päällä pilvipalvelussa, tai epätosi (pois käytöstä), kun se on pois päältä.

Päivitä lopuksi tuoteluokitus h3 elementti palata koodilohko tällä lauseella.

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

Tämän päivityksen myötä, kun otat ominaisuuden käyttöön, se päivittää näytäProductRating muuttuja totta. Tämän seurauksena tuotteen luokitus näkyy muiden määritteiden rinnalla. Jos kuitenkin kytket ominaisuuden pois päältä, näytäProductRating muuttuja tulee olemaan väärä, eikä tuotteen luokitusta tule näkyviin.

Päivitä lopuksi App.jsx tiedosto tuodaksesi tuotteen komponentin.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Suorita lopuksi sovellus ja siirry selaimeesi tarkastellaksesi sovellusta.

npm run dev

Voit testata tätä ominaisuutta palaamalla omaan Ominaisuuden Asetukset-sivu Flagsmithissä ja poista tuotteen luokitusominaisuus käytöstä.

Koska sovellus on käynnissä localhostissa, lataa se uudelleen selaimeen nähdäksesi päivitetyt muutokset. Alkuperäinen tuoteluokitus katoaa. Jos otat ominaisuuden takaisin käyttöön ja lataat sivun uudelleen, se tulee uudelleen näkyviin.

Ominaisuusjulkaisujen ei pitäisi olla enää vaivaa

Ominaisuuslipuista on tullut pelinvaihtotyökalu sovellusten ominaisuuksien julkaisujen hallintaan. Ne integroituvat saumattomasti kehitystyönkulkuun minimoiden uusien päivitysten käyttöönottoon liittyvät riskit.

Ne ovat myös tehokkaita, ja ne antavat kaikille – jopa loppukäyttäjille – vallan ottaa käyttöön tai poistaa käytöstä ominaisuuksia ilman monimutkaiseen koodiin sukeltamista.