Jak zintegrować flagi funkcji w aplikacjach reactowych za pomocą Flagsmith?
Flagi funkcji są niezbędnym narzędziem, pomagającym usprawnić tworzenie i wydawanie aktualizacji oprogramowania. Można ich używać do targetowania określonej grupy użytkowników lub całej bazy użytkowników.
Zasadniczo narzędzia te umożliwiają wdrażanie istotnych zmian w środowisku produkcyjnym na żywo bez utrudniania jego przepływu operacyjnego. Osiąga się to poprzez wykorzystanie flag funkcji w przeciwieństwie do skomplikowanych zmian kodu i procesów wdrażania.
Flagi funkcji: Wdrożenie i korzyści
Niewątpliwie tworzenie oprogramowania jest przedsięwzięciem ciągłym i cyklicznym. Tak długo, jak osoby pozostają zaangażowane w konkretny projekt, modyfikacje i ulepszenia będą stale wdrażane przez co najmniej jedną osobę lub podmiot.
W idealnej sytuacji potoki ciągłej integracji i ciągłego wdrażania (CI/CD) ułatwiają płynne dostarczanie spójnych aktualizacji kodu do środowisk produkcyjnych przy minimalnej interwencji człowieka. Jednak proces ten często wiąże się ze znacznymi inwestycjami w działania wdrożeniowe, które mogą być zarówno czasochłonne, jak i wymagające dużej ilości zasobów.
Rzeczywiście, dzięki wykorzystaniu flag funkcji można rozpowszechniać aktualizację wśród części lub całej populacji użytkowników, dostosowując jedynie ustawienia konfiguracyjne.
W różnych scenariuszach wykorzystanie flag funkcji można uznać za właściwe, na przykład:
Gdy chce się ocenić innowacyjną koncepcję przed jej powszechnym wdrożeniem, przeprowadzenie eksperymentu z kontrolowaną próbą użytkowników zapewnia skuteczny sposób gromadzenia zarówno jakościowych, jak i ilościowych danych dotyczących funkcjonalności produktu i jego ogólnego wpływu na użytkowników końcowych.
W obliczu pilnej sytuacji wymagającej krytycznych poprawek lub szybkich środków zaradczych, kluczowe jest posiadanie mechanizmu, który umożliwia natychmiastowe wdrożenie niezbędnych aktualizacji i obejść dla wszelkich wadliwie działających komponentów. Pozwala to na podjęcie szybkich działań w przypadku nieprzewidzianych okoliczności, minimalizując przestoje i zapewniając ciągłą stabilność i funkcjonalność systemu jako całości.
Dostosowanie doświadczeń użytkowników poprzez aktywację lub dezaktywację niektórych funkcji zgodnie z indywidualnymi cechami, preferencjami i planami subskrypcji jest kluczowym aspektem dostarczania spersonalizowanych usług.
Rozpoczęcie pracy z Flagsmith
Flagsmith oferuje kompleksowe podejście do wdrażania flag funkcji, które obejmuje zarówno opcję open source, jak i platformę opartą na chmurze. W tym przykładzie wykorzystamy ich usługę opartą na chmurze, aby płynnie włączyć flagi funkcji do aplikacji React.
Aby rozpocząć:
⭐ Przejdź do usługi w chmurze Flagsmith , zarejestruj konto i zaloguj się na stronie przeglądu swojego konta. 
⭐ Na stronie przeglądu kliknij przycisk Utwórz projekt, aby skonfigurować nowy projekt Flagsmith. Flagsmith automatycznie utworzy zarówno środowisko programistyczne, jak i produkcyjne na stronie ustawień projektu. W tym samouczku użyjesz środowiska programistycznego do zaimplementowania flag funkcji. 
⭐ Upewnij się, że jesteś w środowisku deweloperskim, wybierz zakładkę Funkcje i kliknij przycisk Utwórz pierwszą funkcję. 
⭐ Podaj identyfikator funkcji, którą chcesz oflagować, najlepiej ciąg znaków, kliknij przycisk przełączania, aby włączyć domyślną opcję funkcji, i naciśnij Utwórz funkcję . W tym przypadku zaimplementujesz flagę funkcji w ocenie różnych produktów e-commerce. 
⭐ Możesz przeglądać i zarządzać nowo utworzoną funkcją, przechodząc do strony przeglądu ustawień funkcji. 
Aby zakończyć konfigurację środowiska, konieczne jest uzyskanie klucza powiązanego z kontekstem po stronie klienta.
Generowanie klucza środowiska po stronie klienta
Aby uzyskać klucz środowiska po stronie klienta:
⭐ Kliknij kartę Ustawienia w środowisku programistycznym. 
⭐ Na stronie ustawień środowiska programistycznego kliknij kartę Klucze. 
⭐Skopiuj dostarczony klucz środowiska po stronie klienta.
Kod źródłowy tego projektu jest hostowany na platformie GitHub w dedykowanym repozytorium.
Utwórz projekt React
Po pierwsze, zdecyduj, czy chcesz zastosować pierwszą metodę, wykonując powyższe polecenie, czy alternatywnie wybierz drugą, wdrażając ją jako preferowaną metodę konfiguracji. Ważne jest, aby mieć świadomość, że instrukcje zawarte w tym przewodniku zakładają użycie Vite do utworzenia aplikacji React.
Aby kontynuować, należy włączyć do projektu zestaw SDK (Software Development Kit) firmy Flagsmith. Ten SDK obsługuje różnorodny zakres
npm install flagsmith
Włączenie pliku .env do katalogu głównego obszaru przechowywania projektu jest niezbędnym krokiem w celu zapewnienia odpowiedniego dostępu do zmiennych środowiskowych po stronie klienta. Aby ustanowić tę konfigurację, należy wygenerować nowy dokument .env i umieścić go na początku istniejącej hierarchii plików.W szczególności zmienna środowiskowa po stronie klienta musi zostać wprowadzona w sposób pokazany poniżej, aby pomyślnie zintegrować się z systemem:
VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>"
Add a Product List Functional Component
Aby przetestować możliwości flagowania funkcji Flagsmith, zbudujesz prosty komponent, który będzie renderował listę produktów e-commerce z interfejsu API DummyJSON .
Każda pozycja w katalogu posiada kilka cech, w tym tytuł, koszt, opis produktu i zagregowaną ocenę produktu. Naszym celem jest wykorzystanie przełącznika funkcji do kontrolowania aspektu oceny produktu. Po włączeniu tej funkcjonalności, użytkownicy będą mieli możliwość manipulowania funkcją za pomocą przycisku znajdującego się na zdalnym interfejsie serwisowym Flagsmith.
W katalogu źródłowym utwórz nowy podkatalog o nazwie “components” i zagnieżdż go w istniejącej hierarchii. Następnie umieść nowy plik o nazwie “Products.jsx” wewnątrz wspomnianego folderu komponentów i skopiuj poniższy blok kodu, aby wypełnić jego zawartość.
Najpierw zaimportuj następujące elementy:
import "./style.component.css";
import React, { useState, useEffect } from "react";
import flagsmith from 'flagsmith';
Włącz składnik funkcjonalny, ustalając parametry stanu początkowego, implementując wymagane komponenty JavaScript i włączając odpowiednie elementy HTML w odpowiednim kontekście.
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 ( Dummy Products {products.map((product)
Włącz następujący kod do komponentu funkcjonalnego:
useEffect(() => {
const fetchProducts = async () => {
await fetch("https://dummyjson.com/products")
.then((res) => res.json())
.then((json) => setProducts(json.products));
}
fetchProducts();
}, []);
Podczas początkowego renderowania wykonywana jest funkcja fetchProducts , która pobiera informacje o produkcie i odpowiednio aktualizuje bieżący stan zmiennej products .
Ostatecznie można przejść przez tablicę elementów i wyświetlić je w przeglądarce internetowej.
Poniżej podziału klasy “product-list”, włącz kolejny kod w nowym elemencie 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>
))}
W świetle tego, można bez wysiłku pobrać i wyświetlić katalog produktów z wyszczególnionymi pozycjami pobranymi z mock JSON API.
Integracja SDK Flagsmith
W celu włączenia i skonfigurowania Software Development Kit Flagsmith w aplikacji React przy użyciu haka useEffect , należy umieścić podany fragment kodu natychmiast po wywołaniu funkcji fetchProducts w ramach wspomnianego haka.
flagsmith.init({
environmentID:environmentID,
cacheFlags: true,
enableAnalytics: true,
onChange: (oldFlags, params) => {
setShowProductRating(flagsmith.hasFeature('product_rating'));
}
});
Integracja tej funkcjonalności pozwala na implementację flag funkcji w buforowanym i analizowanym środowisku w aplikacji React.
Funkcjonalność wykorzystuje mechanizm wywołania zwrotnego w celu adaptacyjnego regulowania prezentacji informacji o ocenie produktu zgodnie z aktualnym stanem flagi funkcji product\_rating. Można to uznać za aktywne (włączone) po aktywacji w usługach w chmurze lub nieaktywne (wyłączone) po dezaktywacji w tym samym kontekście.
Na koniec zmodyfikuj tag h3 oceny produktu, dołączając instrukcję w bloku kodu return w następujący sposób:
{showProductRating && <h3> Rating: {product.rating}</h3>}
Funkcjonalność niniejszej aktualizacji umożliwia wyświetlanie oceny produktu po aktywacji, o czym świadczy jej powiązanie ze zmienną showProductRating, która jest aktualizowana w celu wskazania, że ocena produktu powinna być wyświetlana w połączeniu z innymi odpowiednimi atrybutami. I odwrotnie, po dezaktywacji zmienna showProductRating powraca do swojego pierwotnego stanu, zapobiegając w ten sposób manifestacji oceny produktu w interfejsie.
Na koniec zmodyfikuj plik App.jsx, włączając instrukcję importu dla komponentu 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;
Ostatecznie uruchom swój program i przejdź do przeglądarki internetowej, aby obserwować funkcjonalność oprogramowania.
npm run dev
Aby zweryfikować funkcjonalność tego atrybutu, należy przejść do strony ustawień funkcji w Flagsmith i dezaktywować opcję ocen produktów.
Aby zaobserwować ostatnie modyfikacje wprowadzone w aplikacji, należy odświeżyć ekran przeglądarki internetowej, ponownie ładując lokalnie uruchomiony program. Jednocześnie wszelkie istniejące wcześniej oceny w systemie znikną. Jeśli jednak następnie ponownie aktywujesz wspomnianą funkcję, a następnie ponownie naciśniesz przycisk odświeżania, brakujące oceny powinny pojawić się ponownie.
Feature Releases Shouldn’t Be a Hassle Anymore
Flagi funkcji stały się niezbędnym narzędziem do regulowania wdrażania funkcji w aplikacjach.Integracja tych narzędzi jest zarówno usprawniona, jak i dyskretna, dzięki czemu skutecznie ogranicza potencjalne zagrożenia, które mogą powstać podczas wdrażania aktualizacji.
Funkcja ta zapewnia przyjazny dla użytkownika interfejs, który umożliwia zarówno osobom technicznym, jak i nietechnicznym łatwe modyfikowanie ustawień i funkcji, eliminując potrzebę posiadania rozległej wiedzy na temat kodowania.