I flag di funzionalità sono uno strumento essenziale che aiuta a semplificare la creazione e il rilascio degli aggiornamenti software. Puoi usarli per indirizzare un gruppo specifico di utenti o l'intera base utenti.

In sostanza, ti consentono di introdurre modifiche significative, senza interrompere il flusso di lavoro della tua applicazione di produzione, in tempo reale e su richiesta. Puoi farlo utilizzando l'attivazione/disattivazione delle funzionalità come alternativa a modifiche e distribuzioni estese del codice.

Indicatori di funzionalità: spiegazione dell'implementazione e dei vantaggi

Lo sviluppo del software è, senza dubbio, un processo continuo e iterativo. A meno che tutti non abbandonino un progetto, qualcuno continuerà a svilupparlo, introducendo nuovi cambiamenti.

Idealmente, le pipeline CI/CD consentono di inviare modifiche coerenti al codice in produzione. Tuttavia, questi processi comportano un notevole sforzo di implementazione.

Tuttavia, utilizzando i flag di funzionalità, puoi rilasciare un aggiornamento per alcuni o tutti i tuoi utenti semplicemente attivando un'impostazione.

Esistono diverse situazioni in cui sono applicabili i flag di funzionalità, tra cui:

• Quando vuoi testare una nuova idea prima di distribuirla a tutti gli utenti. In questo modo, puoi raccogliere facilmente e rapidamente feedback sulle prestazioni e sul relativo impatto sull'utente.
• Quando desideri implementare aggiornamenti di emergenza e hotfix essenziali. In caso di catastrofe, puoi disattivare rapidamente le funzionalità problematiche e implementare le soluzioni senza ridistribuire l'intera applicazione.
• Quando si forniscono esperienze utente personalizzate abilitando o disabilitando funzionalità specifiche in base agli attributi, alle preferenze o ai pacchetti di abbonamento dell'utente.

Iniziare con Flagsmith

Flagsmith fornisce un'ottima soluzione per i flag di funzionalità, inclusa una versione open source e un servizio cloud. Questa guida utilizzerà la sua soluzione cloud per integrare i flag di funzionalità in un'applicazione React.

Per iniziare:

1. Vai a Il servizio cloud di Flagsmith, registrati per un account e accedi a quello del tuo account Panoramica pagina.
2. Nella pagina di panoramica, fare clic su Crea progetto pulsante per impostare un nuovo progetto Flagsmith. Flagsmith creerà automaticamente sia l'ambiente di sviluppo che quello di produzione sul tuo Impostazioni del progetto pagina. Per questo tutorial utilizzerai l'ambiente di sviluppo per implementare i flag di funzionalità.
3. Assicurati di essere nel Sviluppo ambiente, selezionare il Caratteristiche scheda e fare clic su Crea la tua prima funzionalità pulsante.
4. Fornire un ID per la funzione che desideri contrassegnare, preferibilmente una stringa, fai clic sul pulsante di attivazione/disattivazione Abilita per impostazione predefinita opzione funzione e premi Crea funzione. In questo caso, implementerai un flag di funzionalità sulla valutazione di diversi prodotti di e-commerce.
5. È possibile visualizzare e gestire la funzionalità appena creata accedendo alla pagina di panoramica delle impostazioni delle funzionalità.

Ora, per completare la configurazione, è necessaria la chiave dell'ambiente lato client.

Generare la chiave dell'ambiente lato client

Per ottenere la chiave dell'ambiente lato client:

1. Clicca sul Impostazioni scheda sotto il Sviluppo ambiente.
2. Nella pagina delle impostazioni dell'ambiente di sviluppo, fare clic su Chiavi scheda.
3. Copia la chiave dell'ambiente lato client fornita.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Crea il progetto React

Ora vai avanti e impalcatura di un progetto React utilizzando il comando create-react-app. In alternativa, puoi usa Vite per impostare un progetto React di base. Tieni presente che questa guida utilizzerà Vite per creare l'applicazione React.

Successivamente, installa l'SDK di Flagsmith nel tuo progetto. Questo SDK è compatibile con vari Framework JavaScript.

npm install flagsmith

Ora crea un file .env file nella directory root della cartella del progetto e aggiungi la chiave dell'ambiente lato client come segue:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Aggiungi un componente funzionale dell'elenco prodotti

Per testare le funzionalità dei flag di funzionalità di Flagsmith, creerai un semplice componente che visualizzerà un elenco di prodotti di e-commerce da un DummyJSON API.

Ogni prodotto nell'elenco viene fornito con vari attributi, come titolo, prezzo, descrizione del prodotto e una valutazione complessiva del prodotto. L'intenzione è quella di applicare il flag di funzionalità al valore di valutazione del prodotto. Una volta implementato il flag, sarai in grado di controllare la funzione attivando un pulsante sul servizio cloud di Flagsmith.

Nel src directory, crea una nuova cartella e assegnagli un nome, componenti. All'interno di questa cartella aggiungine uno nuovo Prodotti.jsx e includere il seguente codice.

Innanzitutto, effettua le seguenti importazioni:

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

Successivamente, crea il componente funzionale, definisci le variabili di stato iniziali e aggiungi gli elementi 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>

 );
}

Ora definiamo a useEffect hook che effettuerà richieste HTTP all'API JSON fittizia per recuperare i dati dei prodotti. Puoi utilizzare l'API Fetch o Axios per utilizzare l'API.

All'interno del componente funzionale, aggiungi il codice seguente:

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

IL fetchProducts la funzione verrà eseguita una volta montato il componente. Recupera i dati dei prodotti e successivamente aggiorna lo stato dei prodotti prodotti variabile.

Infine, puoi mappare la gamma di prodotti e visualizzarli nel browser.

Proprio sotto il lista prodotti classe div, includere il seguente codice:

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

Con ciò, puoi recuperare e visualizzare comodamente un elenco di articoli di prodotto dall'API JSON fittizia.

Integra l'SDK di Flagsmith

Per integrare e inizializzare l'SDK di Flagsmith nell'applicazione React, proprio sotto il file fetchProducts chiamata di funzione all'interno del file useEffect hook, aggiungi il codice qui sotto.

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

Includendo questa funzione, abiliti la gestione dei flag di funzionalità con memorizzazione nella cache e analisi nell'app React.

La funzione utilizza un callback per gestire dinamicamente il modo in cui visualizza le valutazioni dei prodotti in base allo stato del valutazione_prodotto flag di funzionalità. Dovrebbe essere vero (abilitato), quando attivato nel servizio cloud, o falso (disabilitato) quando disattivato.

Infine aggiorna il valutazione del prodotto h3 elemento in ritorno blocco di codice con questa istruzione.

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

Con questo aggiornamento, una volta attivata la funzione, viene aggiornato il file mostravalutazioneprodotto variabile a VERO. Di conseguenza, la valutazione del prodotto apparirà insieme agli altri attributi. Tuttavia, se disattivi la funzione, il file mostravalutazioneprodotto la variabile sarà falsoe la valutazione del prodotto non verrà visualizzata.

Infine, aggiorna il App.jsx file per importare il componente del prodotto.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Infine, esegui la tua applicazione e vai al browser per visualizzare l'applicazione.

npm run dev

Per testare questa funzione, torna al tuo Pagina Impostazioni della funzionalità su Flagsmith e disattiva la funzione di valutazione del prodotto.

Poiché l'applicazione è in esecuzione su localhost, ricaricarla nel browser per visualizzare le modifiche aggiornate. La valutazione del prodotto inizialmente presente scomparirà. Se riattivi la funzione e ricarichi nuovamente la pagina, questa riapparirà.

I rilasci di funzionalità non dovrebbero più essere un problema

I flag di funzionalità sono diventati uno strumento rivoluzionario per la gestione dei rilasci di funzionalità nelle applicazioni. Si integrano perfettamente nel flusso di lavoro di sviluppo, riducendo al minimo i rischi associati all'implementazione di nuovi aggiornamenti.

Sono anche potenti e danno a chiunque, anche agli utenti finali, il potere di abilitare o disabilitare funzionalità senza doversi immergere in codici complessi.