Como integrar sinalizadores de recursos em aplicativos React usando o Flagsmith

Os sinalizadores de funcionalidades são uma ferramenta essencial que ajuda a simplificar a criação e o lançamento de actualizações de software. Pode utilizá-las para visar um grupo específico de utilizadores ou toda a sua base de utilizadores.

Essencialmente, estas ferramentas permitem a implementação de alterações substanciais num ambiente de produção ativo sem prejudicar o seu fluxo operacional. Isto é conseguido através da utilização de sinalizadores de funcionalidades, por oposição a revisões de código complexas e processos de implementação.

Sinalizadores de características: Implementação e benefícios explicados

Sem dúvida, o desenvolvimento de software constitui um empreendimento contínuo e cíclico. Enquanto os indivíduos permanecerem empenhados num determinado projeto, as modificações e melhorias serão persistentemente implementadas por pelo menos um indivíduo ou entidade.

Idealmente, as condutas de Integração Contínua e de Implementação Contínua (CI/CD) facilitam a entrega contínua de actualizações de código consistentes a ambientes de produção com um mínimo de intervenção humana. No entanto, este processo está frequentemente associado a um investimento significativo em esforços de implementação que podem ser demorados e exigir muitos recursos.

De facto, com a utilização de sinalizadores de funcionalidades, é possível disseminar uma atualização para uma parte ou para a totalidade da sua população de utilizadores apenas ajustando uma definição de configuração.

Em vários cenários, a utilização de sinalizadores de recursos pode ser considerada apropriada, como por exemplo:

Quando se pretende avaliar um conceito inovador antes de o implementar universalmente, a realização de uma experiência com uma amostra controlada de utilizadores constitui um meio eficaz de recolher dados qualitativos e quantitativos sobre a funcionalidade do produto e a sua influência global nos utilizadores finais.

Quando confrontado com uma situação urgente que requer correcções críticas ou soluções rápidas, é crucial dispor de um mecanismo que permita a implementação imediata das actualizações necessárias e soluções alternativas para quaisquer componentes com mau funcionamento. Isto permite tomar medidas rápidas no caso de circunstâncias imprevistas, minimizando o tempo de inatividade e assegurando a estabilidade e funcionalidade contínuas do sistema como um todo.

A adaptação das experiências dos utilizadores através da ativação ou desativação de determinadas funcionalidades de acordo com características individuais, preferências e planos de subscrição é um aspeto crucial da prestação de serviços personalizados.

Introdução ao Flagsmith

O Flagsmith oferece uma abordagem abrangente para a implementação de sinalizadores de recursos, que inclui uma opção de código aberto e uma plataforma baseada em nuvem. Neste exemplo, utilizaremos seu serviço baseado em nuvem para incorporar perfeitamente sinalizadores de recursos em um aplicativo React.

Para começar:

⭐ Dirija-se ao serviço de nuvem do Flagsmith , inscreva-se numa conta e inicie sessão na página de visão geral da sua conta.

⭐ Na página de visão geral, clique no botão Criar projeto para configurar um novo projeto do Flagsmith. O Flagsmith criará automaticamente os ambientes de desenvolvimento e produção na sua página Configurações do projeto. Para este tutorial, você usará o ambiente de desenvolvimento para implementar os sinalizadores de recursos.

⭐ Certifique-se de que está no ambiente de desenvolvimento, selecione a guia Recursos e clique no botão Criar seu primeiro recurso.

⭐ Forneça um ID para o recurso que deseja sinalizar, de preferência uma cadeia de caracteres, clique no botão de alternância para a opção Ativar recurso por padrão e clique em Criar recurso . Neste caso, irá implementar um sinalizador de caraterística na classificação de diferentes produtos de comércio eletrónico.

⭐ Pode ver e gerir a funcionalidade recém-criada navegando para a página de visão geral das definições das funcionalidades.

Para terminar a configuração do seu ambiente, é necessário obter a chave associada ao contexto do lado do cliente.

Gerar a chave do ambiente do lado do cliente

Para obter a chave do ambiente do lado do cliente:

⭐ Clique no separador Definições no ambiente de desenvolvimento.

⭐ Na página de definições do ambiente de desenvolvimento, clique no separador Chaves.

⭐Copie a chave de ambiente do lado do cliente fornecida.

O código-fonte deste projeto está hospedado na plataforma GitHub em um repositório dedicado.

Criar o projeto React

Em primeiro lugar, decida se deseja empregar o primeiro executando o comando mencionado acima ou, alternativamente, opte pelo segundo implementando-o como seu método de configuração preferido. É importante estar ciente de que as instruções fornecidas neste guia assumirão o uso do Vite para estabelecer o aplicativo React.

Para prosseguir, incorpore o Kit de Desenvolvimento de Software (SDK) do Flagsmith no seu projeto. Este SDK suporta uma gama diversificada de

 npm install flagsmith 

A incorporação do ficheiro .env no diretório principal da área de armazenamento do projeto é um passo essencial para garantir que as variáveis de ambiente do lado do cliente são adequadamente acedidas. Para estabelecer essa configuração, você deve gerar um novo documento .env e posicioná-lo na vanguarda da hierarquia de arquivos existente.Especificamente, a variável de ambiente do lado do cliente deve ser inserida conforme mostrado abaixo para uma integração bem-sucedida com o sistema:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>" 

Adicionar um componente funcional de lista de produtos

Para testar os recursos de sinalizadores de recursos do Flagsmith, você criará um componente simples que renderizará uma lista de produtos de comércio eletrônico de uma API DummyJSON .

Cada item do catálogo possui várias características, incluindo título, custo, descrição do produto e uma avaliação agregada do produto. O nosso objetivo é utilizar a funcionalidade de alternância para controlar o aspeto da avaliação do produto. Depois de incorporar esta funcionalidade, os utilizadores terão a capacidade de manipular a caraterística através de um botão localizado na interface de serviço remoto do Flagsmith.

No diretório de origem, crie uma nova subdiretoria chamada “components” e aninhe-a na hierarquia existente. Depois, coloque um novo ficheiro com o nome “Products.jsx” dentro dessa pasta de componentes e copie o bloco de código que se segue para preencher o seu conteúdo.

Primeiro, faça as seguintes importações:

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

Incorporar um constituinte funcional estabelecendo os parâmetros de estado inicial, implementando os componentes JavaScript necessários e incorporando os elementos HTML pertinentes dentro do contexto apropriado.

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <>
       <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
} 

javascriptimport { useState } from ‘react’;import axios from ‘axios’;function DummyAPI() {const [products, setProducts] = useState([]);useEffect(() => {async function fetchData() {try {const response = await axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} catch (error) {console.log(error);}}fetchData();}, []);return ( Produtos fictícios {products.map((product)

Incorpore o seguinte código no componente funcional:

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

Na renderização inicial, a função fetchProducts é executada, o que recupera informações sobre o produto e actualiza o estado atual da variável products em conformidade.

Em última análise, é possível percorrer um conjunto de itens e apresentá-los num navegador Web.

Abaixo da divisão de classe “product-list”, incorpore o código subsequente num novo elemento div:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2>
         <p>Price: ${product.price}</p>
        <p>{product.description}</p>

        <h3>Rating: {product.rating}</h3>
    </div>
))} 

Assim, é possível recuperar e apresentar sem esforço um catálogo de produtos discriminados obtidos a partir da API JSON simulada.

Integrar o SDK do Flagsmith

Para incorporar e configurar o Kit de Desenvolvimento de Software do Flagsmith em um aplicativo React usando o gancho useEffect , deve-se colocar o trecho de código fornecido imediatamente após chamar a função fetchProducts dentro do referido gancho.

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

A integração dessa funcionalidade permite a implementação de sinalizadores de recurso em um ambiente em cache e analisado dentro do seu aplicativo React.

A funcionalidade emprega um mecanismo de retorno de chamada para regular adaptativamente a apresentação de informações de classificação do produto de acordo com o status atual do sinalizador de recurso product\_rating. Este pode ser considerado como ativo (ativado), ao ser ativado nos serviços de computação em nuvem, ou inativo (desativado), ao ser desativado no mesmo contexto.

Por fim, modifique a etiqueta h3 da classificação do produto, incluindo uma declaração no bloco de código return da seguinte forma

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

A funcionalidade da presente atualização permite a exibição da classificação do produto quando activada, como evidenciado pela sua associação com a variável showProductRating, que é actualizada para indicar que a classificação do produto deve ser exibida em conjunto com os outros atributos relevantes. Por outro lado, quando desactivada, a variável showProductRating volta ao seu estado original, impedindo assim a manifestação da classificação do produto na interface.

Por fim, modifique o ficheiro App.jsx, incorporando uma instrução de importação para o componente Product.

 import "./App.css";
import Products from "./components/Products";

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products />
      </div>
    </div>
  );
}

export default App; 

Por fim, execute o seu programa e navegue para um navegador Web para observar a funcionalidade do software.

 npm run dev 

Para verificar a funcionalidade deste atributo, por favor, navegue até à página de Definições de Características no Flagsmith e desactive a opção de classificações de produtos.

Para observar as modificações recentes feitas na aplicação, actualize o ecrã do navegador Web recarregando o programa executado localmente. Ao mesmo tempo, todas as classificações existentes no sistema desaparecerão. No entanto, se posteriormente reativar a funcionalidade acima mencionada e voltar a premir o botão de atualização, as classificações em falta deverão reaparecer.

Os lançamentos de funcionalidades já não devem ser um incómodo

Os sinalizadores de funcionalidades surgiram como um instrumento indispensável para regular a implementação de funcionalidades em aplicações de software.A integração destas ferramentas é simplificada e discreta, atenuando assim eficazmente os potenciais riscos que podem surgir da implementação de actualizações.

A funcionalidade fornece uma interface de fácil utilização que permite a indivíduos técnicos e não técnicos modificar facilmente as definições e funções, eliminando a necessidade de conhecimentos extensivos de codificação.