Jako vývojáři softwaru mi systém správy příznaků funkcí poskytuje kontrolu a jistotu, pokud jde o zavádění nových funkcí. Líbí se mi, že označování funkcí nabízí tuto úroveň ovládání a také snadnost, se kterou se integruje do mých vývojových pracovních postupů.
Co je příznak funkce?
Příznaky funkcí fungují jako prostředníci a řídí, jaké funkce mohou uživatelé vidět. Označením funkcí můžete také řídit jejich vydávání konkrétním segmentům uživatelů na základě demografických údajů, což usnadňuje vydávání a zavádění funkcí.
Další informace o příznacích funkcí získáte kliknutím sem.
Použití příznaků funkcí v aplikaci Nuxt.js
Nuxt.js je populární framework pro vývoj aplikací na straně serveru pomocí Vue.js . Vývojáři používají Nuxt.js kvůli jeho výhodám optimalizace pro vyhledávače (SEO).
Vytvořil jsem ukázkovou aplikaci, na které budu stavět. Je to fiktivní filmová aplikace s názvem AcmeTV Shows vytvořené pomocí rámce Nuxt.js.
Tady je to, jak to zatím vypadá:
Všimli jste si sekce trendových filmů hned pod bannerem?
Sekce trendových filmů je nová funkce, kterou chci uživatelům představit. Budu používat označení funkcí ke skrytí nebo zobrazení této sekce bez přímé aktualizace kódu. Abych tento proces zjednodušil, budu používat služby příznaků funkcí ConfigCat.
Nejprve si ale budu muset vytvořit účet ConfigCat.
Nastavení účtu ConfigCat a vytvoření příznaku funkce
1. Chcete-li vytvořit účet, klikněte sem.
2. Poté na řídicím panelu klikněte na + PŘIDAT VLAJKU FUNKCE tlačítko:
3. K vytvoření příznaku funkce používám následující data:
Údaje jsou následující:
Jméno :canShowTrendingMovies
Klíč :canshowtrendingmovies (automaticky se vyplní)
Nápověda (volitelné) :Příznak funkce – funkce populárních filmů pro pořady AcmeTV
4. klikněte na PŘIDAT VLAJKU FUNKCE tlačítko pro vytvoření příznaku funkce.
Připojení aplikace Nuxt.js k ConfigCat
1. Protože Nuxt.js je serverová rendered framework, budu muset nainstalovat verzi SSR (Server Side Rendered) JavaScript SDK z ConfigCat. Za tím účelem otevřu terminál a přejdu do kořenového adresáře aplikace Nuxt.js a spustím následující příkaz:
npm i configcat-js-ssr
Tím se nainstalují všechny požadované balíčky potřebné k připojení mého Nuxt.js aplikaci do ConfigCat .
2. V pages/index.vue soubor, importujte ConfigCat takto:
<script>
// Imports
// Code omitted to keep this code block short
// Import ConfigCat
import * as configcat from "configcat-js-ssr"; // New*
export default {
// Code omitted to keep this code block short
}
</script>
3. Přidám vlastnost dat s názvem canShowTrendingMovies , Jak je ukázáno níže. Později to použiji k určení, zda zobrazit složku trendových filmů nebo ne.
export default {
name: 'IndexPage',
components: {
// Code omitted to keep this code block short
},
data() {
return {
canShowTrendingMovies: false, // New*
}
},
}
5. Přidám metodu zkontrolovat, zda je zapnutý nebo vypnutý příznak funkce populárních filmů, který jsem vytvořil. V ideálním případě by tato metoda měla být spuštěna, když je aplikace připojena . S ohledem na to by můj kód nyní vypadal takto:
export default {
name: 'IndexPage',
components: {
// Code omitted to keep this code block short
},
data() {
return {
canShowTrendingMovies: false,
}
},
// New*
methods: {
checkTrendingMovies() {
configCatClient.getValueAsync("canshowtrendingmovies", false)
.then( value => {
this.canShowTrendingMovies = value;
});
}
},
mounted() {
this.checkTrendingMovies();
}
// End of New*
}
Abych to shrnul, když je moje aplikace připojena checkTrendingMovies() metoda provede. To zkontroluje, zda můžeShowTrendingMovies příznak funkce je povolen na mém hlavním panelu ConfigCat a aktualizujte vlastnost data nastavíme zde:
data() {
return {
canShowTrendingMovies: false,
}
},
Nyní přidám v-if na TrendingMovies komponent. Komponenta bude skryta, pokud je příznak funkce zakázán:
<template>
<main>
<Navigation />
<Jumbotron />
<TrendingMovies v-if="canShowTrendingMovies" /> // New*
<Movies />
</main>
</template>
Pojďme se podívat, jestli to funguje!
1. Spustím npm run dev pro spuštění aplikace lokálně.
2. Pokud je příznak funkce na mém řídicím panelu ConfigCat vypnutý, komponenta populárních filmů by měla být skrytá.
3. Počkejte několik sekund, znovu načtěte aplikaci a pak bychom měli být schopni vidět změny provedené výše.
Když je příznak funkce vypnutý , Složka trendových filmů bude skryta, jak je znázorněno na druhém obrázku níže:
Kód
Neváhejte a podívejte se na dokončenou ukázkovou aplikaci Nuxt.js zde.
Závěr
Správa Feature Flag je podle mého názoru nezbytná při nasazování nových funkcí do aplikací. Díky tomu se testování nových funkcí stává mnohem snazším a lépe ovladatelným, protože můžeme funkce zapínat nebo vypínat pro různé segmenty uživatelů bez změny kódu nebo opětovného nasazení aplikace.
ConfigCat také podporuje mnoho dalších frameworků a jazyků. Podívejte se na úplný seznam podporovaných sad SDK zde.
Chcete-li získat další úžasný obsah, držte krok s ConfigCat na Twitteru, Facebooku, LinkedIn a GitHubu.