Flagi funkcji są niezbędnym narzędziem pomagającym usprawnić tworzenie i wydawanie aktualizacji oprogramowania. Możesz za ich pomocą kierować reklamy do określonej grupy użytkowników lub całej bazy użytkowników.

Zasadniczo pozwalają na wprowadzenie znaczących zmian, bez zakłócania pracy aplikacji produkcyjnej, w czasie rzeczywistym i na żądanie. Można to zrobić, używając przełączników funkcji jako alternatywy dla obszernych modyfikacji i wdrożeń kodu.

Flagi funkcji: objaśnienie implementacji i korzyści

Tworzenie oprogramowania jest bez wątpienia procesem ciągłym i iteracyjnym. Jeśli wszyscy nie porzucą projektu, ktoś będzie go dalej rozwijał, wprowadzał nowe zmiany.

W idealnym przypadku potoki CI/CD umożliwiają wypychanie spójnych zmian w kodzie do środowiska produkcyjnego. Niemniej jednak procesy te wiążą się z koniecznością znacznego wysiłku wdrożeniowego.

Jednak korzystając z flag funkcji, możesz udostępnić aktualizację dla części lub całej bazy użytkowników, po prostu przełączając ustawienie.

Flagi funkcji mają zastosowanie w kilku sytuacjach, w tym:

• Gdy chcesz przetestować nowy pomysł przed udostępnieniem go wszystkim użytkownikom. W ten sposób możesz łatwo i szybko zebrać opinie na temat wydajności i jej wpływu na użytkownika.
• Gdy chcesz wdrożyć niezbędne aktualizacje awaryjne i poprawki. W przypadku awarii możesz szybko wyłączyć problematyczne funkcje i wdrożyć poprawki bez konieczności ponownego wdrażania całej aplikacji.
• Zapewniając spersonalizowane doświadczenia użytkownika poprzez włączanie lub wyłączanie określonych funkcji w oparciu o atrybuty użytkownika, preferencje lub pakiety subskrypcji.

Pierwsze kroki z Flagsmithem

Flagsmith zapewnia doskonałe rozwiązanie dla flag funkcji, w tym wersję open source i usługę w chmurze. W tym przewodniku wykorzystamy rozwiązanie chmurowe do integracji flag funkcji z aplikacją React.

Rozpocząć:

1. Udaj się do Usługa chmurowa Flagsmith, załóż konto i zaloguj się na swoje konto Przegląd strona.
2. Na stronie przeglądu kliknij przycisk Utwórz projekt przycisk, aby skonfigurować nowy projekt Flagsmith. Flagsmith automatycznie utworzy na Twoim komputerze zarówno środowisko programistyczne, jak i produkcyjne Ustawienia projektu strona. W tym samouczku będziesz używać środowiska programistycznego do implementowania flag funkcji.
3. Upewnij się, że jesteś w Rozwój środowisku, wybierz Cechy i kliknij przycisk Stwórz swoją pierwszą funkcję przycisk.
4. Podaj ID dla funkcji, którą chcesz oznaczyć (najlepiej jako ciąg znaków), kliknij przycisk przełączania Włącz domyślnie opcję funkcji i naciśnij Utwórz funkcję. W takim przypadku zaimplementujesz flagę funkcji w ocenie różnych produktów e-commerce.
5. Możesz przeglądać nowo utworzoną funkcję i zarządzać nią, przechodząc do strony przeglądu ustawień funkcji.

Teraz, aby ukończyć konfigurację, potrzebujesz klucza środowiska po stronie klienta.

Wygeneruj klucz środowiska po stronie klienta

Aby uzyskać klucz środowiska po stronie klienta:

1. Kliknij na Ustawienia zakładka pod Rozwój środowisko.
2. Na stronie ustawień środowiska programistycznego kliknij przycisk Klucze patka.
3. Skopiuj podany klucz środowiska po stronie klienta.

Kod tego projektu znajdziesz w jego pliku GitHub magazyn.

Utwórz projekt React

No dalej, i Stwórz szkielet projektu React za pomocą polecenia create-react-app. Alternatywnie, możesz użyj Vite, aby skonfigurować podstawowy projekt React. Pamiętaj, że w tym przewodniku do stworzenia aplikacji React zostanie wykorzystany Vite.

Następnie zainstaluj pakiet SDK Flagsmith w swoim projekcie. Ten zestaw SDK jest kompatybilny z różnymi Frameworki JavaScript.

npm install flagsmith

Teraz utwórz .środka plik w katalogu głównym folderu projektu i dodaj klucz środowiska po stronie klienta w następujący sposób:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Dodaj komponent funkcjonalny listy produktów

Aby przetestować możliwości Flagsmith w zakresie flag funkcji, zbudujesz prosty komponent, który wygeneruje listę produktów e-commerce z Manekin JSON API.

Każdy produkt na liście ma różne atrybuty, takie jak tytuł, cena, opis produktu i ogólna ocena produktu. Zamiarem jest zastosowanie flagi funkcji do wartości oceny produktu. Po zaimplementowaniu flagi będziesz mógł kontrolować tę funkcję, przełączając przycisk w usłudze chmurowej Flagsmith.

w źródło katalog, utwórz nowy folder i nadaj mu nazwę, składniki. Wewnątrz tego folderu dodaj nowy Produkty.jsx i dołącz następujący kod.

Najpierw wykonaj następujący import:

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

Następnie utwórz komponent funkcjonalny, zdefiniuj zmienne stanu początkowego i dodaj elementy 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>

 );
}

Teraz zdefiniuj a użyjEfektu hak, który będzie wysyłał żądania HTTP do fikcyjnego API JSON w celu pobrania danych produktów. Możesz użyj Fetch API lub Axios, aby skorzystać z API.

W komponencie funkcjonalnym dodaj poniższy kod:

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

The pobierz produkty funkcja zostanie uruchomiona po zamontowaniu komponentu. Pobiera dane produktów, a następnie aktualizuje stan produkty zmienny.

Na koniec możesz mapować szereg produktów i renderować je w przeglądarce.

Tuż pod klasa listy produktów div, dołącz następujący kod:

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

Dzięki temu możesz wygodnie pobierać i wyświetlać listę produktów z fikcyjnego API JSON.

Zintegruj pakiet SDK Flagsmith

Aby zintegrować i zainicjować pakiet SDK Flagsmith w aplikacji React, tuż pod plikiem pobierz produkty wywołanie funkcji wewnątrz użyjEfektu hook, dodaj poniższy kod.

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

Włączając tę ​​funkcję, umożliwiasz zarządzanie flagami funkcji za pomocą buforowania i analiz w aplikacji React.

Funkcja wykorzystuje wywołanie zwrotne do dynamicznego zarządzania sposobem wyświetlania ocen produktów na podstawie stanu ocena_produktu flaga funkcji. Powinno to mieć wartość Prawda (włączone), gdy jest włączone w usłudze w chmurze, lub Fałsz (wyłączone), gdy jest wyłączone.

Na koniec zaktualizuj plik ocena produktu h3 element w powrót blok kodu z tą instrukcją.

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

Dzięki tej aktualizacji po włączeniu tej funkcji aktualizuje ona pokażOcenę Produktu zmienna do PRAWDA. W efekcie ocena produktu pojawi się obok pozostałych atrybutów. Jeśli jednak wyłączysz tę funkcję, plik pokażOcenę Produktu zmienna będzie FAŁSZ, a ocena produktu nie pojawi się.

Na koniec zaktualizuj plik Aplikacja.jsx plik, aby zaimportować komponent produktu.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Na koniec uruchom aplikację i przejdź do przeglądarki, aby wyświetlić aplikację.

npm run dev

Aby przetestować tę funkcję, wróć do swojego Strona ustawień funkcji na Flagsmith i wyłącz funkcję oceniania produktów.

Ponieważ aplikacja działa na serwerze localhost, załaduj ją ponownie w przeglądarce, aby wyświetlić zaktualizowane zmiany. Ocena produktu, która była początkowo obecna, zniknie. Jeśli ponownie włączysz tę funkcję i ponownie załadujesz stronę, pojawi się ona ponownie.

Wydania nowych funkcji nie powinny już być problemem

Flagi funkcji stały się narzędziem zmieniającym reguły gry w zakresie zarządzania wydaniami funkcji w aplikacjach. Bezproblemowo integrują się z procesem programowania, minimalizując ryzyko związane z wdrażaniem nowych aktualizacji.

Są także potężne i dają każdemu — nawet użytkownikom końcowym — możliwość włączania i wyłączania funkcji bez zagłębiania się w skomplikowany kod.