วิธีรวมฟีเจอร์แฟล็กในแอปพลิเคชันโต้ตอบโดยใช้ Flagsmith

แฟล็กฟีเจอร์เป็นเครื่องมือสำคัญที่ช่วยปรับปรุงการสร้างและเผยแพร่การอัปเดตซอฟต์แวร์ คุณสามารถใช้มันเพื่อกำหนดเป้าหมายกลุ่มผู้ใช้เฉพาะหรือฐานผู้ใช้ทั้งหมดของคุณ

โดยพื้นฐานแล้ว เครื่องมือเหล่านี้ช่วยให้สามารถดำเนินการเปลี่ยนแปลงที่สำคัญภายในสภาพแวดล้อมการผลิตจริงได้ โดยไม่ขัดขวางขั้นตอนการปฏิบัติงาน สิ่งนี้สามารถทำได้โดยการใช้แฟล็กคุณลักษณะซึ่งตรงข้ามกับการแก้ไขโค้ดและกระบวนการปรับใช้ที่ซับซ้อน

แฟล็กคุณลักษณะ: อธิบายการใช้งานและคุณประโยชน์

ไม่ต้องสงสัยเลยว่าการพัฒนาซอฟต์แวร์ถือเป็นการดำเนินการอย่างต่อเนื่องและเป็นวัฏจักร ตราบใดที่บุคคลยังคงมุ่งมั่นในโครงการใดโครงการหนึ่ง การแก้ไขและการปรับปรุงจะถูกนำมาใช้อย่างต่อเนื่องโดยบุคคลหรือนิติบุคคลอย่างน้อยหนึ่งราย

ตามหลักการแล้ว ไปป์ไลน์การบูรณาการอย่างต่อเนื่องและการปรับใช้อย่างต่อเนื่อง (CI/CD) ช่วยให้การส่งมอบการอัปเดตโค้ดที่สอดคล้องกันไปยังสภาพแวดล้อมการผลิตเป็นไปอย่างราบรื่น โดยมีการแทรกแซงของมนุษย์น้อยที่สุด อย่างไรก็ตาม กระบวนการนี้มักจะเกี่ยวข้องกับการลงทุนที่สำคัญในความพยายามในการปรับใช้ซึ่งอาจใช้เวลานานและต้องใช้ทรัพยากรมาก

ที่จริงแล้ว ด้วยการใช้แฟล็กฟีเจอร์ เราอาจเผยแพร่การอัปเกรดเป็นบางส่วนหรือทั้งหมดของกลุ่มผู้ใช้ เพียงแค่ปรับการตั้งค่าคอนฟิกูเรชันเท่านั้น

ในสถานการณ์ต่างๆ การใช้แฟล็กคุณลักษณะอาจถือว่าเหมาะสม เช่น:

เมื่อต้องการประเมินแนวคิดเชิงนวัตกรรมก่อนที่จะนำไปใช้ในระดับสากล การดำเนินการทดลองกับกลุ่มตัวอย่างที่ได้รับการควบคุมของผู้ใช้จะให้วิธีการที่มีประสิทธิภาพในการรวบรวมข้อมูลทั้งเชิงคุณภาพและเชิงปริมาณเกี่ยวกับฟังก์ชันการทำงานของผลิตภัณฑ์และอิทธิพลโดยรวมที่มีต่อผู้ใช้ปลายทาง

เมื่อต้องเผชิญกับสถานการณ์เร่งด่วนที่ต้องใช้แพตช์สำคัญหรือการแก้ไขอย่างรวดเร็ว การมีกลไกที่พร้อมสำหรับการปรับใช้การอัปเดตและวิธีแก้ไขปัญหาที่จำเป็นในทันทีสำหรับส่วนประกอบที่ทำงานผิดปกติใดๆ ถือเป็นเรื่องสำคัญ ช่วยให้สามารถดำเนินการได้อย่างรวดเร็วในกรณีที่มีสถานการณ์ที่ไม่คาดฝัน ลดเวลาหยุดทำงานให้เหลือน้อยที่สุด และรับประกันความเสถียรและการทำงานของระบบโดยรวมอย่างต่อเนื่อง

การปรับแต่งประสบการณ์ผู้ใช้โดยการเปิดใช้งานหรือปิดใช้งานฟังก์ชันบางอย่างตามลักษณะเฉพาะ ความชอบ และแผนการสมัครสมาชิกเป็นส่วนสำคัญในการให้บริการที่ปรับแต่งเอง

เริ่มต้นใช้งาน Flagsmith

Flagsmith นำเสนอแนวทางที่ครอบคลุมในการใช้แฟล็กคุณลักษณะ ซึ่งรวมถึงตัวเลือกโอเพ่นซอร์สและแพลตฟอร์มบนคลาวด์ ในตัวอย่างนี้ เราจะใช้บริการบนคลาวด์เพื่อรวมแฟล็กฟีเจอร์ภายในแอปพลิเคชัน React ได้อย่างราบรื่น

ที่จะเริ่มต้น:

⭐ ไปที่ บริการคลาวด์ของ Flagsmith ลงชื่อสมัครใช้บัญชี และลงชื่อเข้าใช้หน้าภาพรวมของบัญชีของคุณ

⭐ ในหน้าภาพรวม คลิกที่ปุ่มสร้างโครงการเพื่อตั้งค่าโครงการ Flagsmith ใหม่ Flagsmith จะสร้างทั้งสภาพแวดล้อมการพัฒนาและการใช้งานจริงในหน้าการตั้งค่าโปรเจ็กต์ของคุณโดยอัตโนมัติ สำหรับบทช่วยสอนนี้ คุณจะใช้สภาพแวดล้อมการพัฒนาเพื่อใช้งานแฟล็กฟีเจอร์

⭐ ตรวจสอบให้แน่ใจว่าคุณอยู่ในสภาพแวดล้อมการพัฒนา เลือกแท็บคุณสมบัติ แล้วคลิกปุ่มสร้างคุณสมบัติแรกของคุณ

⭐ ระบุ ID สำหรับคุณสมบัติที่คุณต้องการตั้งค่าสถานะ โดยควรเป็นสตริง คลิกปุ่มสลับเพื่อเปิดใช้งานตัวเลือกคุณสมบัติเริ่มต้น แล้วกดสร้างคุณสมบัติ ในกรณีนี้ คุณจะใช้แฟล็กคุณลักษณะในการให้คะแนนของผลิตภัณฑ์อีคอมเมิร์ซต่างๆ

⭐ คุณสามารถดูและจัดการคุณสมบัติที่สร้างขึ้นใหม่ได้โดยไปที่หน้าภาพรวมการตั้งค่าคุณสมบัติ

เพื่อให้การตั้งค่าสภาพแวดล้อมของคุณเสร็จสิ้น คุณจำเป็นต้องได้รับคีย์ที่เกี่ยวข้องกับบริบทฝั่งไคลเอ็นต์

สร้างคีย์สภาพแวดล้อมฝั่งไคลเอ็นต์

หากต้องการรับคีย์สภาพแวดล้อมฝั่งไคลเอ็นต์:

⭐ คลิกแท็บการตั้งค่าใต้สภาพแวดล้อมการพัฒนา

⭐ ในหน้าการตั้งค่าสภาพแวดล้อมการพัฒนา ให้คลิกแท็บคีย์

⭐คัดลอกคีย์สภาพแวดล้อมฝั่งไคลเอ็นต์ที่ให้มา

ซอร์สโค้ดสำหรับโปรเจ็กต์นี้โฮสต์บนแพลตฟอร์ม GitHub ภายในพื้นที่เก็บข้อมูลเฉพาะ

สร้างโครงการตอบโต้

ประการแรก ตัดสินใจว่าคุณต้องการใช้คำสั่งแรกโดยดำเนินการคำสั่งข้างต้น หรือเลือกใช้คำสั่งหลังโดยใช้เป็นวิธีการตั้งค่าที่คุณต้องการ สิ่งสำคัญคือต้องทราบว่าคำแนะนำที่ให้ไว้ในคู่มือนี้จะถือว่ามีการใช้ Vite เพื่อสร้างแอปพลิเคชัน React

หากต้องการดำเนินการต่อ ให้รวมชุดพัฒนาซอฟต์แวร์ (SDK) ของ Flagsmith ภายในโครงการของคุณ SDK นี้รองรับหลากหลาย

 npm install flagsmith 

การรวมไฟล์.env ภายในไดเร็กทอรีหลักของพื้นที่จัดเก็บข้อมูลของโปรเจ็กต์เป็นขั้นตอนสำคัญเพื่อให้แน่ใจว่ามีการเข้าถึงตัวแปรสภาพแวดล้อมฝั่งไคลเอ็นต์อย่างเพียงพอ หากต้องการสร้างการกำหนดค่านี้ คุณควรสร้างเอกสาร.env ใหม่ และวางไว้ที่แถวหน้าของลำดับชั้นไฟล์ที่มีอยู่ โดยเฉพาะอย่างยิ่ง ต้องป้อนตัวแปรสภาพแวดล้อมฝั่งไคลเอ็นต์ดังที่แสดงด้านล่างเพื่อให้สามารถรวมเข้ากับระบบได้สำเร็จ:

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

เพิ่มส่วนประกอบการทำงานของรายการผลิตภัณฑ์

หากต้องการทดสอบความสามารถด้านฟีเจอร์แฟล็กของ Flagsmith คุณจะต้องสร้างส่วนประกอบง่ายๆ ที่จะแสดงรายการผลิตภัณฑ์อีคอมเมิร์ซจาก DummyJSON API

แต่ละรายการในแค็ตตาล็อกมีลักษณะเฉพาะหลายประการ รวมถึงชื่อ ต้นทุน รายละเอียดสินค้า และการประเมินผลิตภัณฑ์โดยรวม วัตถุประสงค์ของเราคือการใช้คุณลักษณะสลับเพื่อควบคุมแง่มุมการให้คะแนนผลิตภัณฑ์ หลังจากรวมฟังก์ชันการทำงานนี้แล้ว ผู้ใช้จะสามารถจัดการคุณลักษณะนี้ผ่านปุ่มที่อยู่บนอินเทอร์เฟซบริการระยะไกลของ Flagsmith

ในไดเร็กทอรีต้นทาง โปรดสร้างไดเร็กทอรีย่อยใหม่ชื่อ"ส่วนประกอบ"และซ้อนไว้ในลำดับชั้นที่มีอยู่ จากนั้น กรุณาวางไฟล์ใหม่ชื่อ"Products.jsx"ไว้ในโฟลเดอร์ส่วนประกอบดังกล่าว และคัดลอกบล็อกโค้ดที่ตามมาเพื่อเติมเนื้อหาในนั้น

ขั้นแรก ให้ทำการนำเข้าดังต่อไปนี้:

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

รวมองค์ประกอบการทำงานโดยการสร้างพารามิเตอร์สถานะเริ่มต้น การใช้งานส่วนประกอบ JavaScript ที่จำเป็น และรวมองค์ประกอบ HTML ที่เกี่ยวข้องภายในบริบทที่เหมาะสม

 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 } จาก’react’; นำเข้า axios จาก’axios’; ฟังก์ชั่น DummyAPI() {const [products, setProducts]=useState([]);useEffect(()=> {async function fetchData() {ลอง {const การตอบสนอง=รอ axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} catch (ข้อผิดพลาด) {console.log(error);}}fetchData();}, []);return ( ผลิตภัณฑ์จำลอง {products.map ((ผลิตภัณฑ์)

รวมรหัสต่อไปนี้ภายในองค์ประกอบการทำงาน:

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

เมื่อเรนเดอร์ครั้งแรก ฟังก์ชัน fetchProducts จะถูกดำเนินการ ซึ่งจะดึงข้อมูลผลิตภัณฑ์และอัปเดตสถานะปัจจุบันของตัวแปร ผลิตภัณฑ์ ตามนั้น

ท้ายที่สุดแล้ว เราสามารถสำรวจอาร์เรย์ของรายการและแสดงในเว็บเบราว์เซอร์ได้

ใต้หมวดคลาส"รายการผลิตภัณฑ์"ให้รวมโค้ดที่ตามมาภายในองค์ประกอบ div ใหม่:

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

ด้วยเหตุนี้ เราจึงสามารถเรียกดูและแสดงแค็ตตาล็อกของผลิตภัณฑ์แยกรายการที่ได้รับจาก JSON API จำลองได้อย่างง่ายดาย

บูรณาการ SDK ของ Flagsmith

เพื่อรวมและตั้งค่าชุดพัฒนาซอฟต์แวร์ของ Flagsmith ภายในแอปพลิเคชัน React โดยใช้ฮุก useEffect เราควรวางข้อมูลโค้ดที่กำหนดทันทีหลังจากเรียกใช้ฟังก์ชัน fetchProducts ภายในฮุกดังกล่าว

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

การรวมฟังก์ชันการทำงานนี้ช่วยให้สามารถใช้งานแฟล็กคุณลักษณะภายในสภาพแวดล้อมที่แคชและวิเคราะห์ภายในแอปพลิเคชัน React ของคุณ

ฟังก์ชันนี้ใช้กลไกการเรียกกลับเพื่อควบคุมการนำเสนอข้อมูลการให้คะแนนผลิตภัณฑ์ตามสถานะปัจจุบันของแฟล็กคุณลักษณะการให้คะแนนผลิตภัณฑ์\_ สิ่งนี้ถือได้ว่าใช้งานอยู่ (เปิดใช้งาน) เมื่อเปิดใช้งานภายในบริการคลาวด์ หรือไม่ใช้งาน (ปิดใช้งาน) เมื่อปิดใช้งานภายในบริบทเดียวกัน

สุดท้าย แก้ไขแท็ก h3 ของการให้คะแนนผลิตภัณฑ์โดยรวมคำสั่งภายในบล็อกโค้ด return ดังนี้:

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

ฟังก์ชันการทำงานของการอัปเดตปัจจุบันช่วยให้สามารถแสดงการให้คะแนนผลิตภัณฑ์เมื่อเปิดใช้งาน ตามที่เห็นได้จากการเชื่อมโยงกับตัวแปร showProductRating ซึ่งได้รับการอัปเดตเพื่อระบุว่าควรแสดงการให้คะแนนผลิตภัณฑ์ร่วมกับแอตทริบิวต์อื่นๆ ที่เกี่ยวข้อง ในทางกลับกัน เมื่อปิดใช้งาน ตัวแปร showProductRating จะย้อนกลับไปสู่สถานะเดิม ดังนั้นจึงป้องกันการแสดงการให้คะแนนผลิตภัณฑ์ภายในอินเทอร์เฟซ

สุดท้าย แก้ไขไฟล์ App.jsx โดยรวมคำสั่งการนำเข้าสำหรับส่วนประกอบผลิตภัณฑ์

 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; 

ท้ายที่สุด ให้รันโปรแกรมของคุณและไปที่เว็บเบราว์เซอร์เพื่อดูการทำงานของซอฟต์แวร์

 npm run dev 

หากต้องการตรวจสอบฟังก์ชันการทำงานของแอตทริบิวต์นี้ โปรดไปที่หน้าการตั้งค่าฟีเจอร์ภายใน Flagsmith และปิดใช้งานตัวเลือกการให้คะแนนผลิตภัณฑ์

เพื่อสังเกตการแก้ไขล่าสุดที่เกิดขึ้นกับแอปพลิเคชัน โปรดรีเฟรชการแสดงผลเว็บเบราว์เซอร์โดยโหลดโปรแกรมที่รันในเครื่องอีกครั้ง ในขณะเดียวกัน การให้คะแนนที่มีอยู่ก่อนหน้านี้ภายในระบบจะหายไป อย่างไรก็ตาม หากคุณเปิดใช้งานฟังก์ชันดังกล่าวอีกครั้งในภายหลัง แล้วกดปุ่มรีเฟรชอีกครั้ง การให้คะแนนที่ขาดหายไปควรปรากฏขึ้นอีกครั้ง

การเปิดตัวฟีเจอร์ไม่ควรยุ่งยากอีกต่อไป

แฟล็กฟีเจอร์ได้กลายเป็นเครื่องมือที่ขาดไม่ได้ในการควบคุมการปรับใช้ฟีเจอร์ภายในแอปพลิเคชันซอฟต์แวร์ การผสานรวมเครื่องมือเหล่านี้มีความคล่องตัวและไม่เกะกะ จึงช่วยบรรเทาอันตรายที่อาจเกิดขึ้นจากการดำเนินการเปิดตัวการอัปเดตได้อย่างมีประสิทธิภาพ

คุณลักษณะนี้มีอินเทอร์เฟซที่เป็นมิตรต่อผู้ใช้ซึ่งช่วยให้บุคคลทั้งด้านเทคนิคและไม่ใช่ด้านเทคนิคสามารถปรับเปลี่ยนการตั้งค่าและฟังก์ชันต่างๆ ได้อย่างง่ายดาย โดยไม่จำเป็นต้องมีความรู้ด้านการเขียนโค้ดอย่างกว้างขวาง