Os sinalizadores de recursos são uma ferramenta essencial, ajudando a agilizar a criação e o lançamento de atualizações de software. Você pode usá-los para atingir um grupo específico de usuários ou toda a sua base de usuários.

Essencialmente, eles permitem introduzir alterações significativas, sem interromper o fluxo de trabalho da sua aplicação de produção, em tempo real e sob demanda. Você pode fazer isso usando alternâncias de recursos como uma alternativa para extensas modificações e implantações de código.

Sinalizadores de recursos: implementação e benefícios explicados

O desenvolvimento de software é, sem dúvida, um processo contínuo e iterativo. A menos que todos abandonem um projeto, alguém continuará a desenvolvê-lo, introduzindo novas mudanças.

Idealmente, os pipelines de CI/CD permitem enviar alterações de código consistentes para a produção. No entanto, estes processos têm o custo de exigir um esforço substancial de implantação.

No entanto, usando sinalizadores de recursos, você pode lançar uma atualização para parte ou toda a sua base de usuários apenas alternando uma configuração.

Existem várias situações em que os sinalizadores de recursos são aplicáveis, incluindo:

• Quando você deseja testar uma nova ideia antes de lançá-la para todos os usuários. Ao fazer isso, você pode coletar feedback de maneira fácil e rápida sobre o desempenho e seu impacto no usuário.
• Quando você deseja lançar atualizações e hotfixes de emergência essenciais. Se ocorrer um desastre, você poderá desativar rapidamente os recursos problemáticos e implementar correções sem reimplantar o aplicativo inteiro.
• Ao fornecer experiências de usuário personalizadas, ativando ou desativando recursos específicos com base em atributos, preferências ou pacotes de assinatura do usuário.

Primeiros passos com Flagsmith

Flagsmith oferece uma ótima solução para sinalizadores de recursos, incluindo uma versão de código aberto e um serviço em nuvem. Este guia usará sua solução em nuvem para integrar sinalizadores de recursos em um aplicativo React.

Para começar:

1. Vá para Serviço de nuvem da Flagsmith, cadastre-se para uma conta e faça login na sua conta Visão geral página.
2. Na página de visão geral, clique no botão Criar projeto botão para configurar um novo projeto Flagsmith. Flagsmith criará automaticamente os ambientes de desenvolvimento e produção em seu Configurações do projeto página. Neste tutorial, você usará o ambiente de desenvolvimento para implementar os sinalizadores de recursos.
3. Certifique-se de que você está no Desenvolvimento ambiente, selecione o Características guia e clique no Crie seu primeiro recurso botão.
4. Forneça um EU IA para o recurso que você deseja sinalizar, de preferência uma string, clique no botão de alternância para Ativar por padrão opção de recurso e clique em Criar recurso. Nesse caso, você implementará um sinalizador de recurso na classificação de diferentes produtos de comércio eletrônico.
5. Você pode visualizar e gerenciar o recurso recém-criado navegando até a página de visão geral das configurações de recursos.

Agora, para concluir a configuração, você precisa da chave de ambiente do lado do cliente.

Gere a chave de ambiente do lado do cliente

Para obter a chave de ambiente do lado do cliente:

1. Clique no Configurações guia sob o Desenvolvimento ambiente.
2. Na página de configurações do ambiente de desenvolvimento, clique no botão Chaves aba.
3. Copie a chave de ambiente do lado do cliente fornecida.

Você pode encontrar o código deste projeto em seu GitHub repositório.

Crie o projeto React

Agora vá em frente e crie um projeto React usando o comando create-react-app. Alternativamente, você pode use o Vite para configurar um projeto React básico. Observe que este guia usará o Vite para criar o aplicativo React.

A seguir, instale o SDK do Flagsmith em seu projeto. Este SDK é compatível com vários Estruturas JavaScript.

npm install flagsmith

Agora, crie um .env arquivo no diretório raiz da pasta do seu projeto e adicione a chave de ambiente do lado do cliente da seguinte forma:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Adicionar um componente funcional da 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 um ManequimJSON API.

Cada produto da lista vem com vários atributos, como título, preço, descrição do produto e uma avaliação geral do produto. A intenção é aplicar o sinalizador de recurso ao valor de classificação do produto. Depois de implementar o sinalizador, você poderá controlar o recurso alternando um botão no serviço de nuvem do Flagsmith.

No fonte diretório, crie uma nova pasta e nomeie-a, componentes. Dentro desta pasta adicione um novo Produtos.jsx e inclua o seguinte código.

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

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

Em seguida, crie o componente funcional, defina as variáveis ​​de estado iniciais e adicione os 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>

 );
}

Agora, defina um useEfeito hook que fará solicitações HTTP para a API JSON fictícia para buscar os dados dos produtos. Você pode use a API Fetch ou Axios para consumir a API.

Dentro do componente funcional, adicione o código abaixo:

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

O buscarProdutos A função será executada assim que o componente for montado. Ele busca os dados dos produtos e posteriormente atualiza o estado do produtos variável.

Finalmente, você pode mapear a variedade de produtos e renderizá-los no navegador.

Logo abaixo do div de classe da lista de produtos, inclua o seguinte 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>
))}

Com isso, você pode buscar e exibir confortavelmente uma lista de itens de produtos da API JSON fictícia.

Integre o SDK do Flagsmith

Para integrar e inicializar o SDK do Flagsmith no aplicativo React, logo abaixo do buscarProdutos chamada de função dentro do useEfeito gancho, adicione o código abaixo.

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

Ao incluir esta função, você habilita o gerenciamento de sinalizadores de recursos com cache e análises no aplicativo React.

A função utiliza um retorno de chamada para gerenciar dinamicamente como exibe as classificações do produto com base no estado do classificação_do_produto sinalizador de recurso. Deve ser verdadeiro (ativado), quando ativado no serviço de nuvem, ou falso (desativado) quando desativado.

Por fim, atualize o classificação do produto h3 elemento no retornar bloco de código com esta instrução.

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

Com esta atualização, assim que você ativar o recurso, ele atualizará o mostrar classificação de produto variável para verdadeiro. Como resultado, a avaliação do produto aparecerá junto com os outros atributos. No entanto, se você desativar o recurso, o mostrar classificação de produto variável será falsoe a classificação do produto não aparecerá.

Por último, atualize o Aplicativo.jsx arquivo para importar o componente do produto.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Por fim, execute seu aplicativo e acesse seu navegador para visualizá-lo.

npm run dev

Para testar esse recurso, volte para o seu Página de configurações do recurso no Flagsmith e desative o recurso de classificação do produto.

Como o aplicativo está sendo executado em localhost, recarregue-o no navegador para visualizar as alterações atualizadas. A classificação do produto inicialmente presente desaparecerá. Se você ativar o recurso novamente e recarregar a página novamente, ela reaparecerá.

Lançamentos de recursos não devem mais ser um incômodo

Os sinalizadores de recursos se tornaram uma ferramenta revolucionária para gerenciar lançamentos de recursos em aplicativos. Eles se integram perfeitamente ao fluxo de trabalho de desenvolvimento, minimizando os riscos associados à implementação de novas atualizações.

Eles também são poderosos, dando a todos, até mesmo aos usuários finais, o poder de ativar ou desativar recursos sem mergulhar em códigos complexos.