Les indicateurs de fonctionnalités sont un outil essentiel, permettant de rationaliser la création et la publication de mises à jour logicielles. Vous pouvez les utiliser pour cibler un groupe spécifique d'utilisateurs ou l'ensemble de votre base d'utilisateurs.

Essentiellement, ils vous permettent d'introduire des changements importants, sans perturber le flux de travail de votre application de production, en temps réel et à la demande. Vous pouvez le faire en utilisant les bascules de fonctionnalités comme alternative aux modifications et déploiements approfondis du code.

Indicateurs de fonctionnalités: mise en œuvre et avantages expliqués

Le développement de logiciels est sans aucun doute un processus continu et itératif. À moins que tout le monde n’abandonne un projet, quelqu’un continuera à le développer, en introduisant de nouveaux changements.

Idéalement, les pipelines CI/CD vous permettent de transmettre des modifications de code cohérentes à la production. Néanmoins, ces processus nécessitent des efforts de déploiement substantiels.

Cependant, à l'aide d'indicateurs de fonctionnalités, vous pouvez publier une mise à jour pour tout ou partie de votre base d'utilisateurs simplement en basculant un paramètre.

Il existe plusieurs situations dans lesquelles les indicateurs de fonctionnalité sont applicables, notamment :

• Lorsque vous souhaitez tester une nouvelle idée avant de la déployer auprès de tous les utilisateurs. Ce faisant, vous pouvez facilement et rapidement recueillir des commentaires sur les performances et leur impact sur les utilisateurs.
• Lorsque vous souhaitez déployer des mises à jour et des correctifs d'urgence essentiels. En cas de sinistre, vous pouvez rapidement désactiver les fonctionnalités problématiques et déployer des correctifs sans redéployer l’intégralité de l’application.
• Lorsque vous fournissez des expériences utilisateur personnalisées en activant ou en désactivant des fonctionnalités spécifiques en fonction des attributs, des préférences ou des forfaits d'abonnement de l'utilisateur.

Premiers pas avec Flagsmith

Flagsmith fournit une excellente solution pour les indicateurs de fonctionnalités, notamment une version open source et un service cloud. Ce guide utilisera sa solution cloud pour intégrer des indicateurs de fonctionnalités dans une application React.

Pour commencer:

1. Rendez-vous sur Service cloud de Flagsmith, créez un compte et connectez-vous à votre compte Aperçu page.
2. Sur la page d'aperçu, cliquez sur le Créer un projet pour configurer un nouveau projet Flagsmith. Flagsmith créera automatiquement les environnements de développement et de production sur votre Paramètres du projet page. Pour ce didacticiel, vous utiliserez l'environnement de développement pour implémenter les indicateurs de fonctionnalité.
3. Assurez-vous que vous êtes dans le Développement environnement, sélectionnez le Caractéristiques et cliquez sur l'onglet Créez votre première fonctionnalité bouton.
4. Fournir un IDENTIFIANT pour la fonctionnalité que vous souhaitez signaler, de préférence une chaîne, cliquez sur le bouton bascule pour Activer par défaut option de fonctionnalité, et appuyez sur Créer une fonctionnalité. Dans ce cas, vous implémenterez un indicateur de fonctionnalité sur l'évaluation des différents produits de commerce électronique.
5. Vous pouvez afficher et gérer la fonctionnalité nouvellement créée en accédant à la page de présentation des paramètres des fonctionnalités.

Maintenant, pour terminer la configuration, vous avez besoin de la clé d'environnement côté client.

Générer la clé d'environnement côté client

Pour obtenir la clé d'environnement côté client :

1. Clique sur le Paramètres onglet sous le Développement environnement.
2. Sur la page des paramètres de l'environnement de développement, cliquez sur le bouton Clés languette.
3. Copiez la clé d'environnement côté client fournie.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt.

Créer le projet React

Maintenant, vas-y, et échafauder un projet React à l'aide de la commande create-react-app. Alternativement, vous pouvez utiliser Vite pour mettre en place un projet React de base. Veuillez noter que ce guide utilisera Vite pour créer l'application React.

Ensuite, installez le SDK de Flagsmith dans votre projet. Ce SDK est compatible avec divers Cadres JavaScript.

npm install flagsmith

Maintenant, créez un .env dans le répertoire racine de votre dossier de projet et ajoutez la clé d'environnement côté client comme suit :

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Ajouter un composant fonctionnel de liste de produits

Pour tester les capacités des indicateurs de fonctionnalités de Flagsmith, vous allez créer un composant simple qui affichera une liste de produits de commerce électronique à partir d'un FacticeJSON API.

Chaque produit de la liste est doté de divers attributs, tels que le titre, le prix, la description du produit et une note globale du produit. L'intention est d'appliquer l'indicateur de fonctionnalité à la valeur d'évaluation du produit. Une fois que vous aurez implémenté le drapeau, vous pourrez contrôler la fonctionnalité en activant un bouton sur le service cloud de Flagsmith.

Dans le src répertoire, créez un nouveau dossier et nommez-le, Composants. Dans ce dossier, ajoutez un nouveau Produits.jsx et incluez le code suivant.

Tout d’abord, effectuez les importations suivantes :

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

Ensuite, créez le composant fonctionnel, définissez les variables d'état initiales et ajoutez les éléments 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>

 );
}

Maintenant, définissons un utiliserEffet hook qui enverra des requêtes HTTP à l'API JSON factice pour récupérer les données des produits. Tu peux utilisez l'API Fetch ou Axios pour consommer l'API.

Dans le composant fonctionnel, ajoutez le code ci-dessous :

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

Le récupérer les produits La fonction s'exécutera une fois le composant monté. Il récupère les données des produits et met ensuite à jour l'état du des produits variable.

Enfin, vous pouvez cartographier la gamme de produits et les afficher sur le navigateur.

Juste en dessous du div de classe de liste de produits, incluez le code suivant :

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

Avec cela, vous pouvez facilement récupérer et afficher une liste d'articles de produits à partir de l'API JSON factice.

Intégrer le SDK de Flagsmith

Pour intégrer et initialiser le SDK de Flagsmith dans l'application React, juste en dessous du récupérer les produits appel de fonction à l'intérieur du utiliserEffet crochet, ajoutez le code ci-dessous.

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

En incluant cette fonction, vous activez la gestion des indicateurs de fonctionnalités avec mise en cache et analyses dans l'application React.

La fonction utilise un rappel pour gérer dynamiquement la façon dont elle affiche les évaluations des produits en fonction de l'état du note_produit indicateur de fonctionnalité. Cela doit être soit vrai (activé), lorsqu'il est activé dans le service cloud, soit faux (désactivé) lorsqu'il est désactivé.

Enfin, mettez à jour le évaluation du produit h3 élément dans le retour bloc de code avec cette instruction.

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

Avec cette mise à jour, une fois que vous activez la fonctionnalité, elle met à jour le showProductRating variable à vrai. En conséquence, la note du produit apparaîtra aux côtés des autres attributs. Cependant, si vous désactivez la fonctionnalité, le showProductRating la variable sera FAUX, et la note du produit n'apparaîtra pas.

Enfin, mettez à jour le App.jsx fichier pour importer le composant du produit.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Enfin, exécutez votre application et accédez à votre navigateur pour afficher l'application.

npm run dev

Pour tester cette fonctionnalité, retournez sur votre Page Paramètres de la fonctionnalité sur Flagsmith et désactivez la fonction d'évaluation des produits.

Puisque l'application s'exécute sur localhost, rechargez-la dans le navigateur pour afficher les modifications mises à jour. La note du produit qui était initialement présente disparaîtra. Si vous réactivez la fonctionnalité et rechargez à nouveau la page, elle réapparaîtra.

Les versions de fonctionnalités ne devraient plus être un problème

Les indicateurs de fonctionnalités sont devenus un outil révolutionnaire pour gérer les versions de fonctionnalités dans les applications. Ils s'intègrent parfaitement au flux de développement, minimisant ainsi les risques associés au déploiement de nouvelles mises à jour.

Ils sont également puissants, donnant à chacun, même aux utilisateurs finaux, le pouvoir d'activer ou de désactiver des fonctionnalités sans se plonger dans un code complexe.