Cách tích hợp các cờ tính năng trong ứng dụng React bằng Flagsmith

Cờ tính năng là một công cụ thiết yếu, giúp đơn giản hóa quá trình xây dựng và phát hành các bản cập nhật phần mềm. Bạn có thể sử dụng chúng để nhắm mục tiêu một nhóm người dùng cụ thể hoặc toàn bộ cơ sở người dùng của bạn.

Về bản chất, những công cụ này cho phép thực hiện những thay đổi đáng kể trong môi trường sản xuất trực tiếp mà không cản trở luồng hoạt động của nó. Điều này đạt được thông qua việc sử dụng các cờ tính năng thay vì các quy trình triển khai và sửa đổi mã phức tạp.

Cờ tính năng: Giải thích cách triển khai và lợi ích

Không còn nghi ngờ gì nữa, phát triển phần mềm là một công việc liên tục và mang tính chu kỳ. Miễn là các cá nhân vẫn cam kết với một dự án cụ thể thì các sửa đổi và cải tiến sẽ được thực hiện liên tục bởi ít nhất một cá nhân hoặc tổ chức.

Lý tưởng nhất là các quy trình Tích hợp liên tục và Triển khai liên tục (CI/CD) tạo điều kiện thuận lợi cho việc phân phối liền mạch các bản cập nhật mã nhất quán đến môi trường sản xuất với sự can thiệp tối thiểu của con người. Tuy nhiên, quá trình này thường đi kèm với sự đầu tư đáng kể vào nỗ lực triển khai, có thể tốn nhiều thời gian và tài nguyên.

Thật vậy, với việc sử dụng cờ tính năng, người ta có thể phổ biến bản nâng cấp cho một phần hoặc toàn bộ người dùng của họ chỉ bằng cách điều chỉnh cài đặt cấu hình.

Trong nhiều trường hợp khác nhau, việc sử dụng cờ tính năng có thể được coi là phù hợp, chẳng hạn như:

Khi muốn đánh giá một ý tưởng đổi mới trước khi triển khai nó trên toàn cầu, việc tiến hành thử nghiệm với một mẫu người dùng được kiểm soát sẽ cung cấp một phương tiện hiệu quả để thu thập cả dữ liệu định tính và định lượng về chức năng của sản phẩm cũng như ảnh hưởng tổng thể của nó đối với người dùng cuối.

Khi gặp phải tình huống khẩn cấp cần có các bản vá quan trọng hoặc biện pháp khắc phục nhanh chóng, điều quan trọng là phải có sẵn một cơ chế cho phép triển khai ngay các bản cập nhật cần thiết và cách giải quyết cho mọi thành phần gặp trục trặc. Điều này cho phép thực hiện hành động nhanh chóng trong trường hợp không lường trước được, giảm thiểu thời gian ngừng hoạt động và đảm bảo tính ổn định cũng như chức năng liên tục của toàn bộ hệ thống.

Điều chỉnh trải nghiệm người dùng bằng cách kích hoạt hoặc hủy kích hoạt một số chức năng nhất định theo đặc điểm, sở thích và gói đăng ký của từng cá nhân là một khía cạnh quan trọng của việc cung cấp các dịch vụ tùy chỉnh.

Bắt đầu với Flagsmith

Flagsmith cung cấp một cách tiếp cận toàn diện để triển khai cờ tính năng, bao gồm cả tùy chọn nguồn mở cũng như nền tảng dựa trên đám mây. Trong ví dụ này, chúng tôi sẽ sử dụng dịch vụ dựa trên đám mây của họ để kết hợp liền mạch các cờ tính năng trong ứng dụng React.

Để bắt đầu:

⭐ Truy cập dịch vụ đám mây của Flagsmith, đăng ký tài khoản và đăng nhập vào trang Tổng quan về tài khoản của bạn.

⭐ Trên trang tổng quan, nhấp vào nút Tạo dự án để thiết lập dự án Flagsmith mới. Flagsmith sẽ tự động tạo cả môi trường phát triển và sản xuất trên trang Cài đặt dự án của bạn. Đối với hướng dẫn này, bạn sẽ sử dụng môi trường phát triển để triển khai các cờ tính năng.

⭐ Đảm bảo bạn đang ở trong môi trường Phát triển, chọn tab Tính năng và nhấp vào nút Tạo tính năng đầu tiên của bạn.

⭐ Cung cấp ID cho tính năng bạn muốn gắn cờ, tốt nhất là một chuỗi, nhấp vào nút chuyển đổi để bật tùy chọn tính năng mặc định và nhấn Tạo tính năng. Trong trường hợp này, bạn sẽ triển khai cờ tính năng để xếp hạng các sản phẩm Thương mại điện tử khác nhau.

⭐ Bạn có thể xem và quản lý tính năng mới được tạo bằng cách điều hướng đến trang tổng quan về cài đặt tính năng.

Để hoàn tất việc thiết lập môi trường của bạn, bạn cần phải lấy khóa được liên kết với ngữ cảnh phía máy khách.

Tạo khóa môi trường phía máy khách

Để lấy khóa môi trường phía máy khách:

⭐ Nhấp vào tab Cài đặt trong môi trường Phát triển.

⭐ Trên trang cài đặt môi trường phát triển, nhấp vào tab Phím.

⭐Sao chép khóa môi trường phía máy khách được cung cấp.

Mã nguồn của dự án này được lưu trữ trên nền tảng GitHub trong một kho lưu trữ chuyên dụng.

Tạo dự án React

trước tiên, hãy quyết định xem bạn có muốn sử dụng lệnh trước bằng cách thực hiện lệnh nói trên hay chọn lệnh sau bằng cách triển khai lệnh này làm phương pháp thiết lập ưa thích của bạn. Điều quan trọng cần lưu ý là các hướng dẫn được cung cấp trong hướng dẫn này sẽ giả định việc sử dụng Vite để thiết lập ứng dụng React.

Để tiếp tục, hãy kết hợp Bộ công cụ phát triển phần mềm (SDK) của Flagsmith trong dự án của bạn. SDK này hỗ trợ nhiều loại

 npm install flagsmith 

Việc kết hợp tệp.env trong thư mục chính của vùng lưu trữ của dự án là một bước thiết yếu để đảm bảo rằng các biến môi trường phía máy khách được truy cập đầy đủ. Để thiết lập cấu hình này, bạn nên tạo một tài liệu.env mới và đặt nó ở đầu hệ thống phân cấp tệp hiện có. Cụ thể, biến môi trường phía máy khách phải được nhập như hình bên dưới để tích hợp thành công với hệ thống:

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

Thêm danh sách sản phẩm Thành phần chức năng

Để kiểm tra khả năng gắn cờ tính năng của Flagsmith, bạn sẽ xây dựng một thành phần đơn giản sẽ hiển thị danh sách các sản phẩm thương mại điện tử từ API DummyJSON.

Mỗi mặt hàng trong danh mục có một số đặc điểm, bao gồm tiêu đề, giá thành, mô tả sản phẩm và đánh giá tổng hợp về sản phẩm. Mục tiêu của chúng tôi là sử dụng tính năng chuyển đổi để kiểm soát khía cạnh xếp hạng sản phẩm. Sau khi kết hợp chức năng này, người dùng sẽ có khả năng thao tác với tính năng này thông qua một nút nằm trên giao diện dịch vụ từ xa của Flagsmith.

Trong thư mục nguồn, vui lòng tạo một thư mục con mới có tên là “thành phần” và lồng nó vào hệ thống phân cấp hiện có. Sau đó, vui lòng đặt một tệp mới có tên “Products.jsx” bên trong thư mục thành phần nói trên và sao chép khối mã tiếp theo để điền nội dung của nó.

Đầu tiên, thực hiện nhập khẩu sau:

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

Kết hợp thành phần chức năng bằng cách thiết lập các tham số trạng thái ban đầu, triển khai các thành phần JavaScript cần thiết và kết hợp các phần tử HTML thích hợp trong ngữ cảnh thích hợp.

 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>
    </>
  );
} 

javascriptimport { useState } từ’react’;nhập axios từ’axios’;function DummyAPI() {const [products, setProducts]=useState([]);useEffect(()=> {async functionfetchData() {try {const phản hồi=đang chờ axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} bắt (lỗi) {console.log(error);}}fetchData();}, []);return ( Sản phẩm giả {products.map ((sản phẩm)

Kết hợp mã sau trong thành phần chức năng:

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

Khi kết xuất ban đầu, hàm fetchProducts được thực thi, hàm này lấy thông tin sản phẩm và cập nhật trạng thái hiện tại của biến products tương ứng.

Cuối cùng, người ta có thể duyệt qua một loạt các mục và hiển thị chúng trong trình duyệt web.

Bên dưới phân chia lớp “danh sách sản phẩm”, hãy kết hợp mã tiếp theo trong phần tử div mới:

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

Do đó, người ta có thể dễ dàng truy xuất và hiển thị danh mục các sản phẩm được chia thành từng khoản được lấy từ API JSON mô phỏng.

Tích hợp SDK của Flagsmith

Để kết hợp và thiết lập Bộ công cụ phát triển phần mềm của Flagsmith trong ứng dụng React bằng hook useEffect, người ta phải đặt đoạn mã đã cho ngay sau khi gọi hàm fetchProducts trong hook nói trên.

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

Việc tích hợp chức năng này cho phép triển khai các cờ tính năng trong môi trường được lưu trữ và phân tích trong ứng dụng React của bạn.

Chức năng này sử dụng cơ chế gọi lại để điều chỉnh thích ứng việc trình bày thông tin xếp hạng sản phẩm theo trạng thái hiện tại của cờ tính năng xếp hạng sản phẩm. Điều này có thể được coi là hoạt động (đã bật) khi được kích hoạt trong các dịch vụ đám mây hoặc không hoạt động (đã tắt) sau khi bị vô hiệu hóa trong cùng một bối cảnh.

Cuối cùng, sửa đổi thẻ h3 của xếp hạng sản phẩm bằng cách đưa vào một câu lệnh trong khối mã return như sau:

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

Chức năng của bản cập nhật hiện tại cho phép hiển thị xếp hạng sản phẩm khi được kích hoạt, bằng chứng là sự liên kết của nó với biến showProductRating, được cập nhật để cho biết rằng xếp hạng sản phẩm phải được hiển thị cùng với các thuộc tính liên quan khác. Ngược lại, khi bị vô hiệu hóa, biến showProductRating sẽ trở lại trạng thái ban đầu, do đó ngăn chặn việc hiển thị xếp hạng sản phẩm trong giao diện.

Cuối cùng, sửa đổi tệp App.jsx bằng cách kết hợp câu lệnh nhập cho thành phần Sản phẩm.

 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; 

Cuối cùng, hãy thực thi chương trình của bạn và điều hướng đến trình duyệt web để quan sát chức năng của phần mềm.

 npm run dev 

Để xác minh chức năng của thuộc tính này, vui lòng điều hướng đến trang Cài đặt tính năng trong Flagsmith và tắt tùy chọn xếp hạng sản phẩm.

Để quan sát những sửa đổi gần đây được thực hiện đối với ứng dụng, vui lòng làm mới màn hình trình duyệt web bằng cách tải lại chương trình chạy cục bộ. Đồng thời, mọi xếp hạng hiện có trong hệ thống sẽ biến mất. Tuy nhiên, nếu sau đó bạn kích hoạt lại chức năng nói trên rồi nhấn nút làm mới một lần nữa, xếp hạng bị thiếu sẽ xuất hiện lại.

Việc phát hành tính năng sẽ không còn rắc rối nữa

Cờ tính năng đã nổi lên như một công cụ không thể thiếu để điều chỉnh việc triển khai tính năng trong các ứng dụng phần mềm. Việc tích hợp các công cụ này vừa được sắp xếp hợp lý vừa không phô trương, nhờ đó giảm thiểu một cách hiệu quả các mối nguy tiềm ẩn có thể phát sinh khi triển khai triển khai bản cập nhật.

Tính năng này cung cấp giao diện thân thiện với người dùng, cho phép cả những người có kỹ thuật và không chuyên về kỹ thuật sửa đổi cài đặt và chức năng một cách dễ dàng, loại bỏ nhu cầu có kiến ​​thức mã hóa sâu rộng.