Bir çırpıda değiştirebileceğiniz ayarlarla uygulamalarınıza esneklik ve sağlamlık katın.

Özellik bayrakları, yazılım güncellemelerinin oluşturulmasını ve yayınlanmasını kolaylaştırmaya yardımcı olan önemli bir araçtır. Bunları belirli bir kullanıcı grubunu veya kullanıcı tabanınızın tamamını hedeflemek için kullanabilirsiniz.

Temel olarak, üretim uygulamanızın iş akışını kesintiye uğratmadan, gerçek zamanlı ve isteğe bağlı olarak önemli değişiklikler yapmanıza olanak tanırlar. Bunu, kapsamlı kod değişiklikleri ve dağıtımlarına alternatif olarak özellik geçişlerini kullanarak yapabilirsiniz.

Özellik Bayrakları: Uygulama ve Faydalarının Açıklaması

Yazılım geliştirme şüphesiz sürekli ve yinelenen bir süreçtir. Herkes bir projeyi terk etmedikçe, birisi onu geliştirmeye devam edecek ve yeni değişiklikler getirecektir.

İdeal olarak CI/CD işlem hatları, tutarlı kod değişikliklerini üretime aktarmanıza olanak tanır. Bununla birlikte, bu süreçler önemli bir dağıtım çabası gerektirme pahasına gelir.

instagram viewer

Ancak özellik bayraklarını kullanarak, yalnızca bir ayarı değiştirerek kullanıcı tabanınızın bir kısmına veya tamamına bir güncelleme yayınlayabilirsiniz.

Özellik bayraklarının geçerli olduğu çeşitli durumlar vardır:

  • Yeni bir fikri tüm kullanıcılara sunmadan önce test etmek istediğinizde. Bunu yaparak performans ve bunun kullanıcı üzerindeki etkisi hakkında kolayca ve hızlı bir şekilde geri bildirim toplayabilirsiniz.
  • Önemli acil durum güncellemelerini ve düzeltmeleri kullanıma sunmak istediğinizde. Bir felaket yaşanırsa, uygulamanın tamamını yeniden dağıtmadan sorunlu özellikleri hızlı bir şekilde devre dışı bırakabilir ve düzeltmeleri kullanıma sunabilirsiniz.
  • Kullanıcı özelliklerine, tercihlerine veya abonelik paketlerine göre belirli özellikleri etkinleştirerek veya devre dışı bırakarak kişiselleştirilmiş kullanıcı deneyimleri sağlarken.

Flagsmith'e Başlarken

Flagsmith, özellik bayrakları için açık kaynaklı bir sürüm ve bir bulut hizmeti de dahil olmak üzere harika bir çözüm sunar. Bu kılavuz, özellik bayraklarını bir React uygulamasına entegre etmek için bulut çözümünü kullanacaktır.

Başlamak:

  1. Başını aşmak Flagsmith'in bulut hizmeti, bir hesaba kaydolun ve hesabınıza giriş yapın Genel Bakış sayfa.
  2. Genel bakış sayfasında, Proje Oluştur Yeni bir Flagsmith projesi oluşturmak için düğmesine basın. Flagsmith, cihazınızda hem geliştirme hem de üretim ortamlarını otomatik olarak oluşturacaktır. Proje ayarları sayfa. Bu eğitimde özellik bayraklarını uygulamak için geliştirme ortamını kullanacaksınız.
  3. içinde olduğunuzdan emin olun. Gelişim ortamı seçin Özellikler sekmesini tıklayın ve İlk Özelliğinizi oluşturun düğme.
  4. Bir sağlayın İD İşaretlemek istediğiniz özellik için (tercihen bir dize) geçiş düğmesini tıklayın. Varsayılan olarak etkinleştir özellik seçeneğini seçin ve tuşuna basın Özellik Oluştur. Bu durumda, farklı E-ticaret ürünlerinin derecelendirmesine bir özellik bayrağı uygulayacaksınız.
  5. Yeni oluşturulan özelliği, özellik ayarlarına genel bakış sayfasına giderek görüntüleyebilir ve yönetebilirsiniz.

Şimdi kurulumu tamamlamak için istemci tarafı ortam anahtarına ihtiyacınız var.

İstemci Tarafı Ortam Anahtarını Oluşturun

İstemci tarafı ortam anahtarını edinmek için:

  1. Tıkla Ayarlar altındaki sekme Gelişim çevre.
  2. Geliştirme ortamı ayarları sayfasında, Anahtarlar sekmesi.
  3. Sağlanan istemci tarafı ortam anahtarını kopyalayın.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

React Projesini Oluşturun

Şimdi devam edin ve create-react-app komutunu kullanarak bir React projesinin iskelesini oluşturun. Alternatif olarak şunları yapabilirsiniz: temel bir React projesi oluşturmak için Vite'ı kullanın. Lütfen bu kılavuzun React uygulamasını oluşturmak için Vite kullanacağını unutmayın.

Daha sonra Flagsmith'in SDK'sını projenize yükleyin. Bu SDK çeşitli yazılımlarla uyumludur JavaScript çerçeveleri.

npm install flagsmith

Şimdi bir tane oluşturun .env proje klasörünüzün kök dizinine dosya ekleyin ve istemci tarafı ortam anahtarını aşağıdaki gibi ekleyin:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Ürün Listesi İşlevsel Bileşeni Ekleme

Flagsmith'in özellik işaretleme yeteneklerini test etmek için, e-ticaret ürünlerinin bir listesini oluşturacak basit bir bileşen oluşturacaksınız. KuklaJSON API'dir.

Listedeki her ürün; başlık, fiyat, ürün açıklaması ve genel ürün derecelendirmesi gibi çeşitli özelliklerle birlikte gelir. Amaç, özellik bayrağını ürün derecelendirme değerine uygulamaktır. Bayrağı uyguladıktan sonra, Flagsmith'in bulut hizmetindeki bir düğmeyi değiştirerek özelliği kontrol edebileceksiniz.

İçinde kaynak dizini açın, yeni bir klasör oluşturun ve adlandırın, bileşenler. Bu klasörün içine yeni bir tane ekleyin Ürünler.jsx ve aşağıdaki kodu ekleyin.

İlk olarak aşağıdaki içe aktarmaları yapın:

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

Daha sonra işlevsel bileşeni oluşturun, başlangıç ​​durum değişkenlerini tanımlayın ve JSX öğelerini ekleyin.

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>

 );
}

Şimdi bir tanım yapın kullanımEtkisi ürünlerin verilerini almak için sahte JSON API'sine HTTP istekleri gönderecek kanca. Yapabilirsiniz API'yi kullanmak için Fetch API'yi veya Axios'u kullanın.

İşlevsel bileşenin içine aşağıdaki kodu ekleyin:

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

Ürünleri getir bileşen bağlandığında işlev çalışacaktır. Ürünlerin verilerini alır ve ardından ürünün durumunu günceller. ürünler değişken.

Son olarak, ürün dizisini haritalandırabilir ve bunları tarayıcıda oluşturabilirsiniz.

Hemen altında ürün listesi sınıfı div, aşağıdaki kodu ekleyin:

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

Bununla, sahte JSON API'sinden ürün öğelerinin bir listesini rahatça alıp görüntüleyebilirsiniz.

Flagsmith'in SDK'sını entegre edin

Flagsmith'in SDK'sını React uygulamasına entegre etmek ve başlatmak için, Ürünleri getir içindeki işlev çağrısı kullanımEtkisi hook'a aşağıdaki kodu ekleyin.

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

Bu işlevi ekleyerek, React uygulamasında önbelleğe alma ve analiz ile özellik bayrağı yönetimini etkinleştirirsiniz.

İşlev, ürün derecelendirmelerinin durumuna göre nasıl görüntüleneceğini dinamik olarak yönetmek için bir geri aramayı kullanır. ürün_derecelendirmesi özellik bayrağı. Bu, bulut hizmetinde açıldığında doğru (etkin) veya kapatıldığında yanlış (devre dışı) olmalıdır.

Son olarak güncelleyin ürün derecelendirmesi h3 içindeki eleman geri dönmek Bu ifadeyle kod bloğu.

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

Bu güncellemeyle, özelliği açtığınızda, showÜrünDeğerlendirmesi değişken doğru. Sonuç olarak ürün derecelendirmesi diğer özelliklerin yanında görünecektir. Ancak özelliği kapatırsanız, showÜrünDeğerlendirmesi değişken olacak YANLIŞve ürün derecelendirmesi görünmeyecektir.

Son olarak güncelleyin Uygulama.jsx Ürün bileşenini içe aktarmak için dosya.

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


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

 </div>
 </div>
 );
}




exportdefault App;

Son olarak uygulamanızı çalıştırın ve uygulamayı görüntülemek için tarayıcınıza gidin.

npm run dev

Bu özelliği test etmek için sunucunuza geri dönün. Özelliğin Ayarlar sayfası Flagsmith'te ürün derecelendirme özelliğini kapatın.

Uygulama localhost üzerinde çalıştığından, güncellenen değişiklikleri görüntülemek için tarayıcıya yeniden yükleyin. Başlangıçta mevcut olan ürün derecelendirmesi kaybolacaktır. Özelliği tekrar açıp sayfayı yeniden yüklerseniz yeniden görünecektir.

Özellik Sürümleri Artık Sorun Olmamalı

Özellik bayrakları, uygulamalardaki özellik sürümlerini yönetmek için oyunun kurallarını değiştiren bir araç haline geldi. Yeni güncellemelerin kullanıma sunulmasıyla ilişkili riskleri en aza indirerek geliştirme iş akışına sorunsuz bir şekilde entegre olurlar.

Aynı zamanda güçlüdürler ve herkese, hatta son kullanıcılara, karmaşık kodlara dalmadan özellikleri etkinleştirme veya devre dışı bırakma gücü verirler.