Заставице функција су суштински алат, који помаже да се поједностави прављење и издавање ажурирања софтвера. Можете их користити за циљање одређене групе корисника или читаве базе корисника.

У суштини, они вам омогућавају да унесете значајне промене, без ометања тока рада ваше производне апликације, у реалном времену и на захтев. То можете да урадите коришћењем прекидача функција као алтернатива опсежним модификацијама и применама кода.

Ознаке функција: Објашњена примена и предности

Развој софтвера је, без сумње, континуиран и итеративан процес. Осим ако сви не напусте пројекат, неко ће наставити да га развија, уносећи нове промене.

У идеалном случају, ЦИ/ЦД цевоводи вам омогућавају да унесете доследне промене кода у производњу. Без обзира на то, ови процеси долазе по цену да захтевају значајне напоре у примени.

Међутим, користећи ознаке функција, можете објавити ажурирање за неке или све ваше корисничке базе само пребацивањем подешавања.

Постоји неколико ситуација у којима су применљиве ознаке функција, укључујући:

• Када желите да тестирате нову идеју пре него што је представите свим корисницима. На тај начин можете лако и брзо прикупити повратне информације о перформансама и њиховом утицају на кориснике.
• Када желите да уведете битна хитна ажурирања и хитне исправке. Ако дође до катастрофе, можете брзо да онемогућите проблематичне функције и уведете поправке без поновног постављања целе апликације.
• Када пружате персонализовано корисничко искуство омогућавањем или онемогућавањем одређених функција на основу корисничких атрибута, преференција или пакета претплате.

Почетак рада са Флагсмитх-ом

Флагсмитх пружа одлично решење за заставице функција, укључујући верзију отвореног кода и услугу у облаку. Овај водич ће користити своје решење у облаку за интеграцију заставица функција у Реацт апликацију.

Започети:

1. Пређите на Флагсмитх-ов цлоуд сервис, региструјте се за налог и пријавите се на свој налог Преглед страна.
2. На страници са прегледом кликните на Креирајте пројекат дугме да бисте подесили нови Флагсмитх пројекат. Флагсмитх ће аутоматски креирати и развојно и производно окружење на вашем Подешавања пројекта страна. За овај водич, користићете развојно окружење за имплементацију заставица функција.
3. Уверите се да сте у Развој окружење, изаберите Карактеристике картицу и кликните на Направите своју прву функцију дугме.
4. Обезбедите ан ИД за функцију коју желите да означите, по могућности низ, кликните на дугме за пребацивање Омогући подразумевано опцију функције и притисните Цреате Феатуре. У овом случају, применићете ознаку функције на рејтингу различитих производа е-трговине.
5. Можете да видите и управљате новокреираном функцијом тако што ћете отићи на страницу са прегледом подешавања функција.

Сада, да бисте довршили подешавање, потребан вам је кључ окружења на страни клијента.

Генеришите кључ окружења на страни клијента

Да бисте добили кључ окружења на страни клијента:

1. Кликните на Подешавања картица испод Развој Животна средина.
2. На страници са подешавањима развојног окружења кликните на Кључеви таб.
3. Копирајте обезбеђени кључ окружења на страни клијента.

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Креирајте Реацт пројекат

Сада, само напред, и скеле Реацт пројекта користећи команду цреате-реацт-апп. Алтернативно, можете користите Вите да бисте поставили основни Реацт пројекат. Имајте на уму да ће овај водич користити Вите за креирање Реацт апликације.

Затим инсталирајте Флагсмитх-ов СДК у свој пројекат. Овај СДК је компатибилан са разним ЈаваСцрипт оквири.

npm install flagsmith

Сада, креирајте а .енв датотеку у основном директоријуму фасцикле вашег пројекта и додајте кључ окружења на страни клијента на следећи начин:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Додајте функционалну компоненту листе производа

Да бисте тестирали Флагсмитх-ове могућности означавања функција, направићете једноставну компоненту која ће приказати листу производа е-трговине из ДуммиЈСОН АПИ.

Сваки производ на листи долази са различитим атрибутима, као што су наслов, цена, опис производа и укупна оцена производа. Намера је да се ознака функције примени на вредност оцене производа. Када имплементирате заставицу, моћи ћете да контролишете функцију тако што ћете укључити дугме на Флагсмитх-овој услузи у облаку.

У срц директоријум, креирајте нови фолдер и дајте му име, компоненте. Унутар овог фолдера додајте нови Продуцтс.јск и укључите следећи код.

Прво направите следеће увозе:

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

Затим креирајте функционалну компоненту, дефинишите почетне променљиве стања и додајте ЈСКС елементе.

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>

 );
}

Сада дефинишите а усеЕффецт кука која ће упућивати ХТТП захтеве лажном ЈСОН АПИ-ју за преузимање података о производима. Можете користите Фетцх АПИ или Акиос да бисте искористили АПИ.

Унутар функционалне компоненте додајте код у наставку:

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

Тхе фетцхПродуцтс функција ће се покренути када се компонента монтира. Он преузима податке о производима и накнадно ажурира стање производи променљива.

Коначно, можете мапирати низ производа и приказати их у претраживачу.

Тачно испод класа производа листе див, укључите следећи код:

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

Уз то, можете удобно да преузмете и прикажете листу ставки производа из лажног ЈСОН АПИ-ја.

Интегришите Флагсмитх-ов СДК

Да бисте интегрисали и иницијализовали Флагсмитх-ов СДК у Реацт апликацији, одмах испод фетцхПродуцтс позив функције унутар усеЕффецт кука, додајте код испод.

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

Укључивањем ове функције омогућавате управљање ознакама функција са кеширањем и аналитиком у апликацији Реацт.

Функција користи повратни позив да динамички управља начином на који приказује оцене производа на основу стања продуцт_ратинг обележје заставе. Ово би требало да буде тачно (омогућено), када је укључено у услузи у облаку, или нетачно (онемогућено) када је искључено.

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

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

Са овим ажурирањем, када укључите функцију, она ажурира сховПродуцтРатинг променљива до истина. Као резултат тога, оцена производа ће се појавити поред осталих атрибута. Међутим, ако искључите ову функцију, сховПродуцтРатинг променљива ће бити лажно, а оцена производа се неће појавити.

На крају, ажурирајте Апп.јск датотеку за увоз компоненте производа.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Коначно, покрените апликацију и идите на прегледач да бисте видели апликацију.

npm run dev

Да бисте тестирали ову функцију, вратите се на своју Страница подешавања функције на Флагсмитх-у и искључите функцију оцењивања производа.

Пошто апликација ради на локалном хосту, поново је учитајте у прегледач да бисте видели ажуриране промене. Оцена производа која је првобитно била присутна ће нестати. Ако поново укључите функцију и поново учитате страницу, она ће се поново појавити.

Издања функција више не би требало да буду гњаважа

Заставице функција постале су алатка која мења игру за управљање издањима функција у апликацијама. Они се неприметно интегришу у развојни ток рада, минимизирајући ризике повезане са увођењем нових ажурирања.

Такође су моћни, дајући свима — чак и крајњим корисницима — моћ да омогуће или онемогуће функције без урањања у сложени код.