Добавьте гибкости и надежности своим приложениям с помощью настроек, которые можно переключать в любой момент.

Флаги функций — это важный инструмент, помогающий оптимизировать сборку и выпуск обновлений программного обеспечения. Вы можете использовать их для целевой группы пользователей или всей вашей пользовательской базы.

По сути, они позволяют вам вносить существенные изменения, не нарушая рабочий процесс вашего производственного приложения, в режиме реального времени и по требованию. Это можно сделать, используя переключатели функций в качестве альтернативы обширным модификациям и развертываниям кода.

Флаги функций: объяснение реализации и преимуществ

Разработка программного обеспечения, без сомнения, представляет собой непрерывный и итеративный процесс. Если все не бросят проект, кто-то будет его развивать, внося новые изменения.

В идеале конвейеры CI/CD позволяют вносить последовательные изменения кода в рабочую среду. Тем не менее, эти процессы требуют значительных усилий по развертыванию.

instagram viewer

Однако, используя флаги функций, вы можете выпустить обновление для некоторых или всей вашей пользовательской базы, просто переключив настройку.

Существует несколько ситуаций, в которых применимы флаги функций, в том числе:

  • Если вы хотите протестировать новую идею, прежде чем распространять ее среди всех пользователей. Таким образом вы сможете легко и быстро собрать отзывы о производительности и ее влиянии на пользователей.
  • Если вы хотите развернуть важные экстренные обновления и исправления. В случае аварии вы можете быстро отключить проблемные функции и внедрить исправления без повторного развертывания всего приложения.
  • При предоставлении персонализированного пользовательского опыта путем включения или отключения определенных функций на основе атрибутов пользователя, предпочтений или пакетов подписки.

Начало работы с флагсмитом

Flagsmith предоставляет отличное решение для флагов функций, включая версию с открытым исходным кодом и облачный сервис. В этом руководстве будет использоваться облачное решение для интеграции флагов функций в приложение React.

Для начала:

  1. Отправляйтесь в Облачный сервис Flagsmith, зарегистрируйте учетную запись и войдите в свою учетную запись Обзор страница.
  2. На странице обзора нажмите кнопку Создать проект Кнопка для настройки нового проекта Flagsmith. Flagsmith автоматически создаст на вашем компьютере как среду разработки, так и производственную среду. Настройки проекта страница. В этом руководстве вы будете использовать среду разработки для реализации флагов функций.
  3. Убедитесь, что вы находитесь в Разработка среду, выберите Функции вкладку и нажмите кнопку Создайте свою первую функцию кнопка.
  4. Предоставьте ИДЕНТИФИКАТОР для функции, которую вы хотите отметить (желательно строки), нажмите кнопку переключения, чтобы Включить по умолчанию вариант функции и нажмите Создать объект. В этом случае вы добавите пометку функции в рейтинг различных продуктов электронной коммерции.
  5. Вы можете просматривать вновь созданную функцию и управлять ею, перейдя на страницу обзора настроек функции.

Теперь для завершения настройки вам понадобится ключ клиентской среды.

Создайте ключ клиентской среды

Чтобы получить ключ среды на стороне клиента:

  1. Нажать на Настройки вкладка под Разработка среда.
  2. На странице настроек среды разработки нажмите кнопку Ключи вкладка.
  3. Скопируйте предоставленный ключ среды на стороне клиента.

Вы можете найти код этого проекта в его GitHub хранилище.

Создайте проект React

Теперь давай, и создать проект React с помощью команды create-react-app. Альтернативно, вы можете используйте Vite для настройки базового проекта React. Обратите внимание, что в этом руководстве для создания приложения React будет использоваться Vite.

Затем установите SDK Flagsmith в свой проект. Этот SDK совместим с различными JavaScript-фреймворки.

npm install flagsmith

Теперь создайте .env файл в корневом каталоге папки вашего проекта и добавьте ключ клиентской среды следующим образом:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Добавьте функциональный компонент «Список продуктов»

Чтобы протестировать возможности флагов функций Flagsmith, вы создадите простой компонент, который будет отображать список продуктов электронной коммерции из МанекенJSON API.

Каждый продукт в списке имеет различные атрибуты, такие как название, цена, описание продукта и общий рейтинг продукта. Цель состоит в том, чтобы применить флаг функции к значению рейтинга продукта. После реализации флага вы сможете управлять этой функцией, нажимая кнопку в облачном сервисе Flagsmith.

в источник каталог, создайте новую папку и назовите ее, компоненты. Внутри этой папки добавьте новый Продукты.jsx и включите следующий код.

Сначала выполните следующий импорт:

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

Затем создайте функциональный компонент, определите переменные начального состояния и добавьте элементы 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>

 );
}

Теперь определите использованиеЭффект крючок, который будет отправлять HTTP-запросы к фиктивному JSON API для получения данных о продуктах. Ты можешь используйте Fetch API или Axios для использования API.

В функциональный компонент добавьте следующий код:

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

fetchProducts Функция запустится после монтирования компонента. Он извлекает данные о продуктах и ​​впоследствии обновляет состояние продукты переменная.

Наконец, вы можете сопоставить массив продуктов и отобразить их в браузере.

Прямо под класс списка продуктов div, включите следующий код:

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

Благодаря этому вы можете удобно получать и отображать список товаров из фиктивного JSON API.

Интегрируйте SDK Flagsmith

Чтобы интегрировать и инициализировать SDK Flagsmith в приложении React, прямо под fetchProducts вызов функции внутри использованиеЭффект крючок, добавьте код ниже.

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

Включив эту функцию, вы включаете управление флагами функций с помощью кэширования и аналитики в приложении React.

Функция использует обратный вызов для динамического управления отображением рейтингов продуктов в зависимости от состояния Product_rating флаг функции. Это значение должно быть либо true (включено), если оно включено в облачной службе, либо false (отключено), если оно выключено.

Наконец, обновите рейтинг продукта h3 элемент в возвращаться блок кода с этим оператором.

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

В этом обновлении, как только вы включаете эту функцию, она обновляет показатьПродуктРейтинг переменная для истинный. В результате рейтинг продукта появится рядом с другими атрибутами. Однако если вы отключите эту функцию, показатьПродуктРейтинг переменная будет ЛОЖЬ, и рейтинг продукта не появится.

Наконец, обновите Приложение.jsx файл для импорта компонента продукта.

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


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

 </div>
 </div>
 );
}




exportdefault App;

Наконец, запустите свое приложение и перейдите в браузер, чтобы просмотреть его.

npm run dev

Чтобы протестировать эту функцию, вернитесь в свой Страница настроек функции на Flagsmith и отключите функцию оценки продукта.

Поскольку приложение работает на локальном хосте, перезагрузите его в браузере, чтобы просмотреть обновленные изменения. Рейтинг продукта, который присутствовал изначально, исчезнет. Если вы снова включите эту функцию и снова перезагрузите страницу, она появится снова.

Выпуск новых функций больше не должен быть проблемой

Флаги функций стали революционным инструментом для управления выпусками функций в приложениях. Они легко интегрируются в рабочий процесс разработки, сводя к минимуму риски, связанные с выпуском новых обновлений.

Они также являются мощными, предоставляя каждому — даже конечным пользователям — возможность включать или отключать функции, не углубляясь в сложный код.