Los indicadores de funciones son una herramienta esencial que ayuda a agilizar la creación y el lanzamiento de actualizaciones de software. Puede utilizarlos para dirigirse a un grupo específico de usuarios o a toda su base de usuarios.

Básicamente, le permiten introducir cambios significativos, sin interrumpir el flujo de trabajo de su aplicación de producción, en tiempo real y bajo demanda. Puede hacerlo mediante el uso de alternancia de funciones como alternativa a modificaciones e implementaciones extensas de código.

Indicadores de funciones: implementación y beneficios explicados

El desarrollo de software es, sin duda, un proceso continuo e iterativo. A menos que todos abandonen un proyecto, alguien seguirá desarrollándolo, introduciendo nuevos cambios.

Idealmente, las canalizaciones de CI/CD le permiten impulsar cambios de código consistentes en producción. No obstante, estos procesos tienen el costo de requerir un esfuerzo de implementación sustancial.

Sin embargo, al utilizar indicadores de funciones, puede publicar una actualización para parte o toda su base de usuarios simplemente alternando una configuración.

Hay varias situaciones en las que se aplican indicadores de funciones, entre ellas:

• Cuando desea probar una nueva idea antes de implementarla para todos los usuarios. Al hacerlo, podrá recopilar comentarios fácil y rápidamente sobre el rendimiento y su impacto en el usuario.
• Cuando desee implementar actualizaciones y revisiones de emergencia esenciales. Si ocurre un desastre, puede desactivar rápidamente las funciones problemáticas e implementar correcciones sin tener que volver a implementar toda la aplicación.
• Al proporcionar experiencias de usuario personalizadas al habilitar o deshabilitar funciones específicas según los atributos, preferencias o paquetes de suscripción del usuario.

Comenzando con Flagsmith

Flagsmith proporciona una excelente solución para indicadores de funciones, incluida una versión de código abierto y un servicio en la nube. Esta guía utilizará su solución en la nube para integrar indicadores de funciones en una aplicación React.

Para empezar:

1. Dirigirse a Servicio en la nube de Flagsmith, regístrese para obtener una cuenta e inicie sesión en su cuenta Descripción general página.
2. En la página de descripción general, haga clic en el Crear proyecto para configurar un nuevo proyecto de Flagsmith. Flagsmith creará automáticamente los entornos de desarrollo y producción en su Configuración del proyecto página. En este tutorial, utilizará el entorno de desarrollo para implementar las marcas de funciones.
3. Asegúrate de estar en el Desarrollo entorno, seleccione el Características pestaña y haga clic en Crea tu primera característica botón.
4. Proporcionar un IDENTIFICACIÓN para la característica que desea marcar, preferiblemente una cadena, haga clic en el botón de alternancia para Habilitar por defecto opción de función y presione Crear característica. En este caso, implementará una marca de función en la calificación de diferentes productos de comercio electrónico.
5. Puede ver y administrar la función recién creada navegando a la página de descripción general de la configuración de funciones.

Ahora, para completar la configuración, necesita la clave de entorno del lado del cliente.

Generar la clave de entorno del lado del cliente

Para obtener la clave del entorno del lado del cliente:

1. Clickea en el Ajustes pestaña debajo de Desarrollo ambiente.
2. En la página de configuración del entorno de desarrollo, haga clic en el Llaves pestaña.
3. Copie la clave de entorno del lado del cliente proporcionada.

Puedes encontrar el código de este proyecto en su GitHub repositorio.

Crear el proyecto reaccionar

Ahora, adelante, y estructurar un proyecto de React usando el comando create-react-app. Alternativamente, puedes use Vite para configurar un proyecto básico de React. Tenga en cuenta que esta guía utilizará Vite para crear la aplicación React.

A continuación, instale el SDK de Flagsmith en su proyecto. Este SDK es compatible con varios Marcos de JavaScript.

npm install flagsmith

Ahora, crea un .env archivo en el directorio raíz de la carpeta de su proyecto y agregue la clave de entorno del lado del cliente de la siguiente manera:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Agregar un componente funcional a la lista de productos

Para probar las capacidades de indicadores de funciones de Flagsmith, creará un componente simple que generará una lista de productos de comercio electrónico desde un DummyJSON API.

Cada producto de la lista viene con varios atributos, como título, precio, descripción del producto y calificación general del producto. La intención es aplicar la marca de característica al valor de calificación del producto. Una vez que haya implementado la bandera, podrá controlar la función activando un botón en el servicio en la nube de Flagsmith.

En el src directorio, cree una nueva carpeta y asígnele un nombre, componentes. Dentro de esta carpeta agregue un nuevo Productos.jsx e incluya el siguiente código.

Primero, realice las siguientes importaciones:

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

A continuación, cree el componente funcional, defina las variables de estado iniciales y agregue los elementos 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>

 );
}

Ahora, define un usoEfecto gancho que realizará solicitudes HTTP a la API JSON ficticia para recuperar los datos de los productos. Puede use Fetch API o Axios para consumir la API.

Dentro del componente funcional, agregue el siguiente código:

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

El buscarProductos La función se ejecutará una vez que se monte el componente. Obtiene los datos de los productos y posteriormente actualiza el estado del mismo. productos variable.

Finalmente, puede mapear la variedad de productos y representarlos en el navegador.

Justo debajo del lista de productos clase div, incluya el siguiente código:

{ 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 eso, puede buscar y mostrar cómodamente una lista de artículos de productos desde la API JSON ficticia.

Integrar el SDK de Flagsmith

Para integrar e inicializar el SDK de Flagsmith en la aplicación React, justo debajo del buscarProductos llamada a función dentro del usoEfecto gancho, agregue el código a continuación.

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

Al incluir esta función, habilita la administración de indicadores de funciones con almacenamiento en caché y análisis en la aplicación React.

La función utiliza una devolución de llamada para administrar dinámicamente cómo muestra las calificaciones de los productos según el estado del calificación_producto bandera de característica. Esto debe ser verdadero (habilitado), cuando está activado en el servicio en la nube, o falso (deshabilitado) cuando está desactivado.

Finalmente, actualice el calificación del producto h3 elemento en el devolver bloque de código con esta declaración.

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

Con esta actualización, una vez que activa la función, se actualiza el mostrarProductRating variable a verdadero. Como resultado, la calificación del producto aparecerá junto a los demás atributos. Sin embargo, si desactiva la función, el mostrarProductRating la variable será FALSO, y la calificación del producto no aparecerá.

Por último, actualice el aplicación.jsx archivo para importar el componente del producto.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Finalmente, ejecute su aplicación y diríjase a su navegador para verla.

npm run dev

Para probar esta característica, regrese a su Página de configuración de funciones en Flagsmith y desactive la función de calificación del producto.

Dado que la aplicación se ejecuta en localhost, recárguela en el navegador para ver los cambios actualizados. La calificación del producto que estaba inicialmente presente desaparecerá. Si vuelve a activar la función y recarga la página nuevamente, volverá a aparecer.

Los lanzamientos de funciones ya no deberían ser una molestia

Los indicadores de funciones se han convertido en una herramienta revolucionaria para gestionar los lanzamientos de funciones en las aplicaciones. Se integran perfectamente en el flujo de trabajo de desarrollo, minimizando los riesgos asociados con la implementación de nuevas actualizaciones.

También son potentes y brindan a todos, incluso a los usuarios finales, el poder de habilitar o deshabilitar funciones sin tener que profundizar en códigos complejos.