הוסף גמישות וחוסן ליישומים שלך עם הגדרות שאתה יכול לשנות בהרף עין.

דגלי תכונות הם כלי חיוני, שעוזר לייעל את הבנייה והשחרור של עדכוני תוכנה. אתה יכול להשתמש בהם כדי למקד לקבוצת משתמשים ספציפית או לכל בסיס המשתמשים שלך.

בעיקרון, הם מאפשרים לך להציג שינויים משמעותיים, מבלי לשבש את זרימת העבודה של יישום הייצור שלך, בזמן אמת ולפי דרישה. אתה יכול לעשות זאת על ידי שימוש בחילופי תכונות כחלופה לשינויי קוד ופריסה נרחבים.

דגלי תכונה: הסבר על יישום ויתרונות

פיתוח תוכנה הוא, ללא ספק, תהליך מתמשך ואיטרטיבי. אלא אם כולם ינטשו פרויקט, מישהו ימשיך לפתח אותו, להציג שינויים חדשים.

באופן אידיאלי, צינורות CI/CD מאפשרים לך לדחוף שינויי קוד עקביים לייצור. אף על פי כן, תהליכים אלו באים במחיר של מאמץ פריסה משמעותי.

עם זאת, באמצעות דגלי תכונה, אתה יכול לשחרר עדכון לחלק או לכל בסיס המשתמשים שלך רק על ידי החלפת הגדרה.

ישנם מספר מצבים שבהם דגלים של תכונה ישימים, כולל:

  • כאשר אתה רוצה לבדוק רעיון חדש לפני השקתו לכל המשתמשים. על ידי כך, אתה יכול בקלות ובמהירות לאסוף משוב על הביצועים והשפעתו על המשתמש.
  • כאשר אתה רוצה להפיץ עדכוני חירום חיוניים ותיקונים חמים. אם יתרחש אסון, אתה יכול לבטל במהירות תכונות בעייתיות ולהפיץ תיקונים מבלי לפרוס מחדש את היישום כולו.
    instagram viewer
  • בעת מתן חוויות משתמש מותאמות אישית על ידי הפעלה או השבתה של תכונות ספציפיות על סמך תכונות משתמש, העדפות או חבילות מנוי.

תחילת העבודה עם Flagsmith

Flagsmith מספקת פתרון נהדר לדגלי תכונה, כולל גרסת קוד פתוח ושירות ענן. מדריך זה ישתמש בפתרון הענן שלו כדי לשלב דגלי תכונה באפליקציית React.

להתחיל:

  1. פנה אל שירות הענן של Flagsmith, הירשם לחשבון והיכנס לחשבון שלך סקירה כללית עמוד.
  2. בדף הסקירה הכללית, לחץ על צור פרויקט לחצן כדי להגדיר פרויקט Flagsmith חדש. Flagsmith תיצור באופן אוטומטי הן את סביבת הפיתוח והן את סביבת הייצור שלכם הגדרות פרויקט עמוד. עבור מדריך זה, תשתמש בסביבת הפיתוח כדי ליישם את דגלי התכונות.
  3. ודא שאתה ב- התפתחות סביבה, בחר את מאפיינים לשונית, ולחץ על צור את התכונה הראשונה שלך לַחְצָן.
  4. ספק תְעוּדַת זֶהוּת עבור התכונה שברצונך לסמן, רצוי מחרוזת, לחץ על לחצן החלפת המצב הפעל כברירת מחדל אפשרות תכונה, ולחץ צור תכונה. במקרה זה, תטמיע דגל תכונה על הדירוג של מוצרי מסחר אלקטרוני שונים.
  5. אתה יכול להציג ולנהל את התכונה החדשה שנוצרה על ידי ניווט לדף סקירת הגדרות התכונות.

כעת, כדי להשלים את ההגדרה, אתה צריך את מפתח הסביבה בצד הלקוח.

צור את מפתח הסביבה בצד הלקוח

כדי להשיג את מפתח הסביבה בצד הלקוח:

  1. הקלק על ה הגדרות הכרטיסייה מתחת ל- התפתחות סביבה.
  2. בדף הגדרות סביבת הפיתוח, לחץ על מפתחות לשונית.
  3. העתק את מפתח הסביבה שסופק בצד הלקוח.

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

צור את פרויקט React

עכשיו, קדימה, ו פיגום פרויקט React באמצעות הפקודה create-react-app. לחילופין, אתה יכול השתמש ב-Vite כדי להגדיר פרויקט React בסיסי. שימו לב שמדריך זה ישתמש ב-Vite כדי ליצור את אפליקציית React.

לאחר מכן, התקן את ה-SDK של Flagsmith בפרויקט שלך. SDK זה תואם למגוון מסגרות JavaScript.

npm install flagsmith

כעת, צור א .env קובץ בספריית השורש של תיקיית הפרויקט שלך והוסף את מפתח הסביבה בצד הלקוח באופן הבא:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

הוסף רשימת מוצרים רכיב פונקציונלי

כדי לבדוק את יכולות הדגלים התכונה של Flagsmith, תבנה רכיב פשוט שיציג רשימה של מוצרי מסחר אלקטרוני מ- DummyJSON ממשק API.

כל מוצר ברשימה מגיע עם תכונות שונות, כגון כותרת, מחיר, תיאור מוצר ודירוג מוצר כולל. הכוונה היא להחיל את דגל התכונה על ערך דירוג המוצר. לאחר שיישמת את הדגל, תוכל לשלוט בתכונה על ידי החלפת כפתור בשירות הענן של Flagsmith.

בתוך ה src ספרייה, צור תיקיה חדשה ושמה לה, רכיבים. בתוך תיקיה זו הוסף חדש Products.jsx וכלול את הקוד הבא.

ראשית, בצע את הייבוא ​​הבא:

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

לאחר מכן, צור את הרכיב הפונקציונלי, הגדר את משתני המצב ההתחלתי והוסף את רכיבי JSX.

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>

 );
}

כעת, תגדיר א useEffect הוק שיבצע בקשות HTTP ל-Dmmy JSON API כדי להביא את נתוני המוצרים. אתה יכול השתמש ב-Fetch API או Axios כדי לצרוך את ה-API.

בתוך הרכיב הפונקציונלי, הוסף את הקוד שלהלן:

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) => (
"product" key={product.id}>
{product.title}</h2> 




Price: ${product.price}</p>


{product.description}</p>


Rating: {product.rating}</h3>
 </div>
))}

עם זה, אתה יכול בנוחות להביא ולהציג רשימה של פריטי מוצר מה-Dmmy JSON API.

שלב את ה-SDK של Flagsmith

כדי לשלב ולאתחל את ה-SDK של Flagsmith באפליקציית React, ממש מתחת ל- fetchProducts קריאת פונקציה בתוך useEffect hook, הוסף את הקוד למטה.

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

על ידי הכללת פונקציה זו, אתה מאפשר ניהול דגל תכונות עם מטמון וניתוח באפליקציית React.

הפונקציה משתמשת בהתקשרות חוזרת כדי לנהל באופן דינמי את האופן שבו היא מציגה דירוגי מוצרים בהתבסס על מצב ה- דירוג_מוצר דגל תכונה. זה צריך להיות נכון (מופעל), כאשר מופעל בשירות הענן, או false (מושבת) כאשר הוא מופעל.

לבסוף, עדכן את ה דירוג מוצר h3 אלמנט ב- לַחֲזוֹר בלוק קוד עם הצהרה זו.

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

עם עדכון זה, ברגע שאתה מפעיל את התכונה, הוא מעדכן את showProductRating משתנה ל נָכוֹן. כתוצאה מכך, דירוג המוצר יופיע לצד שאר המאפיינים. עם זאת, אם תכבה את התכונה, ה showProductRating משתנה יהיה שֶׁקֶר, ודירוג המוצר לא יופיע.

לבסוף, עדכן את ה App.jsx קובץ כדי לייבא את רכיב המוצר.

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


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

 </div>
 </div>
 );
}




exportdefault App;

לבסוף, הפעל את היישום שלך ועבור לדפדפן שלך כדי להציג את היישום.

npm run dev

כדי לבחון תכונה זו, חזור אל שלך דף ההגדרות של התכונה ב-Flagsmith, וכבה את תכונת דירוג המוצר.

מכיוון שהאפליקציה פועלת על localhost, טען אותה מחדש בדפדפן כדי להציג את השינויים המעודכנים. דירוג המוצר שהיה קיים בתחילה ייעלם. אם תפעיל מחדש את התכונה ותטען מחדש את העמוד, הוא יופיע שוב.

פרסום תכונות לא אמור להיות טרחה יותר

דגלי תכונות הפכו לכלי משנה משחק לניהול מהדורות תכונות באפליקציות. הם משתלבים בצורה חלקה בזרימת העבודה של הפיתוח, ומצמצמים את הסיכונים הכרוכים בהשקת עדכונים חדשים.

הם גם חזקים, ומעניקים לכולם - אפילו למשתמשי קצה - את הכוח להפעיל או להשבית תכונות מבלי לצלול לתוך קוד מורכב.