Cara Mengintegrasikan Feature Flags pada Aplikasi React Menggunakan Flagsmith

Tanda fitur adalah alat penting yang membantu menyederhanakan pembuatan dan rilis pembaruan perangkat lunak. Anda dapat menggunakannya untuk menargetkan sekelompok pengguna tertentu atau seluruh basis pengguna Anda.

Pada dasarnya, mereka memungkinkan Anda melakukan perubahan signifikan, tanpa mengganggu alur kerja aplikasi produksi Anda, secara real-time dan sesuai permintaan. Anda dapat melakukan ini dengan menggunakan fitur alihkan sebagai alternatif terhadap modifikasi dan penerapan kode ekstensif.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Tanda Fitur: Penjelasan Implementasi dan Manfaat

Pengembangan perangkat lunak, tidak diragukan lagi, merupakan proses yang berkesinambungan dan berulang. Kecuali jika semua orang meninggalkan suatu proyek, seseorang akan terus mengembangkannya, memperkenalkan perubahan baru.

Idealnya, pipeline CI/CD memungkinkan Anda mendorong perubahan kode yang konsisten ke produksi. Meskipun demikian, proses-proses ini memerlukan upaya penerapan yang besar.

Namun, dengan menggunakan tanda fitur, Anda dapat merilis pembaruan ke beberapa atau seluruh basis pengguna Anda hanya dengan mengubah pengaturan.

Ada beberapa situasi di mana tanda fitur dapat diterapkan, termasuk:

• Saat Anda ingin menguji ide baru sebelum meluncurkannya ke semua pengguna. Dengan melakukan hal ini, Anda dapat dengan mudah dan cepat mengumpulkan masukan mengenai kinerja dan dampaknya terhadap pengguna.
• Saat Anda ingin meluncurkan pembaruan darurat dan perbaikan terbaru yang penting. Jika terjadi bencana, Anda dapat dengan cepat menonaktifkan fitur yang bermasalah dan melakukan perbaikan tanpa men-deploy ulang seluruh aplikasi.
• Saat memberikan pengalaman pengguna yang dipersonalisasi dengan mengaktifkan atau menonaktifkan fitur tertentu berdasarkan atribut pengguna, preferensi, atau paket berlangganan.

Memulai Dengan Tukang Bendera

Flagsmith memberikan solusi hebat untuk tanda fitur, termasuk versi sumber terbuka dan layanan cloud. Panduan ini akan menggunakan solusi cloud untuk mengintegrasikan fitur flag dalam aplikasi React.

Untuk memulai:

1. Pergilah ke Layanan cloud Flagsmithdaftar akun, dan masuk ke akun Anda Ringkasan halaman.

   

2. Pada halaman ikhtisar, klik pada Buat Proyek tombol untuk menyiapkan proyek Flagsmith baru. Flagsmith akan secara otomatis membuat lingkungan pengembangan dan produksi pada Anda Pengaturan Proyek halaman. Untuk tutorial ini, Anda akan menggunakan lingkungan pengembangan untuk mengimplementasikan tanda fitur.

   

3. Pastikan Anda berada di dalam Perkembangan lingkungan, pilih Fitur tab, dan klik Buat Fitur pertama Anda tombol.

   

4. Berikan sebuah PENGENAL untuk fitur yang ingin Anda tandai, sebaiknya berupa string, klik tombol sakelar untuk Aktifkan secara default opsi fitur, dan tekan Buat Fitur. Dalam hal ini, Anda akan menerapkan tanda fitur pada peringkat produk E-niaga yang berbeda.

   

5. Anda dapat melihat dan mengelola fitur yang baru dibuat dengan membuka halaman ikhtisar pengaturan fitur.

   

Sekarang, untuk menyelesaikan penyiapan, Anda memerlukan kunci lingkungan sisi klien.

Hasilkan Kunci Lingkungan Sisi Klien

Untuk mendapatkan kunci lingkungan sisi klien:

1. Klik pada Pengaturan tab di bawah Perkembangan lingkungan.

   

2. Pada halaman pengaturan lingkungan pengembangan, klik Kunci tab.

   

3. Salin kunci lingkungan sisi klien yang disediakan.

Buat Proyek React

Sekarang, lanjutkan dan rancang proyek React menggunakan perintah create-react-app. Alternatifnya, Anda dapat menggunakan Vite untuk menyiapkan proyek dasar React. Harap dicatat bahwa panduan ini akan menggunakan Vite untuk membuat aplikasi React.

Selanjutnya, instal SDK Flagsmith di proyek Anda. SDK ini kompatibel dengan berbagai kerangka JavaScript.

 npm install flagsmith 

Sekarang, buat a .env file di direktori root folder proyek Anda dan tambahkan kunci lingkungan sisi klien sebagai berikut:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>" 

Tambahkan Komponen Fungsional Daftar Produk

Untuk menguji kemampuan tanda fitur Flagsmith, Anda akan membuat komponen sederhana yang akan merender daftar produk e-niaga dari a DummyJSON API.

Setiap produk dalam daftar dilengkapi dengan berbagai atribut, seperti judul, harga, deskripsi produk, dan rating produk secara keseluruhan. Tujuannya adalah untuk menerapkan tanda fitur pada nilai peringkat produk. Setelah Anda menerapkan bendera, Anda akan dapat mengontrol fitur tersebut dengan mengaktifkan tombol di layanan cloud Flagsmith.

Dalam src direktori, buat folder baru dan beri nama, komponen. Di dalam folder ini tambahkan yang baru Produk.jsx dan sertakan kode berikut.

Pertama, lakukan impor berikut:

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

Selanjutnya, buat komponen fungsional, tentukan variabel keadaan awal, dan tambahkan elemen BEJ.

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <> 
      <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
} 

Sekarang, tentukan a gunakanEffect kait yang akan membuat permintaan HTTP ke API JSON tiruan untuk mengambil data produk. Anda dapat menggunakan Fetch API atau Axios untuk menggunakan API.

Di dalam komponen fungsional, tambahkan kode di bawah ini:

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

Itu ambilProduk fungsi akan berjalan setelah komponen dipasang. Ini mengambil data produk dan kemudian memperbarui statusnya produk variabel.

Terakhir, Anda dapat memetakan rangkaian produk dan merendernya di browser.

Tepat di bawah div kelas daftar produksertakan kode berikut:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2> 
        <p>Price: ${product.price}</p>
        <p>{product.description}</p>
        <h3>Rating: {product.rating}</h3>
    </div>
))} 

Dengan itu, Anda dapat dengan nyaman mengambil dan menampilkan daftar item produk dari API JSON tiruan.

Integrasikan SDK Flagsmith

Untuk mengintegrasikan dan menginisialisasi SDK Flagsmith di aplikasi React, tepat di bawah ambilProduk panggilan fungsi di dalam gunakanEffect kait, tambahkan kode di bawah ini.

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

Dengan menyertakan fungsi ini, Anda mengaktifkan manajemen tanda fitur dengan caching dan analitik di aplikasi React.

Fungsi ini menggunakan panggilan balik untuk secara dinamis mengelola cara menampilkan peringkat produk berdasarkan keadaan peringkat_produk bendera fitur. Nilainya harus benar (diaktifkan), ketika diaktifkan di layanan cloud, atau salah (dinonaktifkan) ketika dimatikan.

Terakhir, perbarui peringkat produk h3 elemen di kembali blok kode dengan pernyataan ini.

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

Dengan pembaruan ini, setelah Anda mengaktifkan fitur tersebut, fitur tersebut akan diperbarui tampilkan Peringkat Produk variabel ke BENAR. Hasilnya, rating produk akan muncul di samping atribut lainnya. Namun, jika Anda menonaktifkan fitur tersebut, tampilkan Peringkat Produk variabel akan menjadi PALSUdan rating produk tidak akan muncul.

Terakhir, perbarui Aplikasi.jsx file untuk mengimpor komponen produk.

 import "./App.css";
import Products from "./components/Products";
function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products />
      </div>
    </div>
  );
}
export default App; 

Terakhir, jalankan aplikasi Anda, dan buka browser Anda untuk melihat aplikasi.

 npm run dev 

Untuk menguji fitur ini, kembali ke Halaman Pengaturan Fitur di Flagsmith, dan matikan fitur peringkat produk.

Karena aplikasi berjalan di localhost, muat ulang aplikasi di browser untuk melihat perubahan yang diperbarui. Rating produk yang awalnya hadir akan hilang. Jika Anda mengaktifkan kembali fitur tersebut dan memuat ulang halaman tersebut, halaman tersebut akan muncul kembali.

Rilis Fitur Tidak Perlu Direpotkan Lagi

Tanda fitur telah menjadi alat pengubah permainan untuk mengelola rilis fitur dalam aplikasi. Mereka terintegrasi secara mulus ke dalam alur kerja pengembangan, meminimalkan risiko yang terkait dengan peluncuran pembaruan baru.

Mereka juga kuat, memberikan semua orang—bahkan pengguna akhir—kemampuan untuk mengaktifkan atau menonaktifkan fitur tanpa mendalami kode yang rumit.