تعد علامات الميزات أداة أساسية تساعد في تبسيط إنشاء تحديثات البرامج وإصدارها. يمكنك استخدامها لاستهداف مجموعة محددة من المستخدمين أو قاعدة المستخدمين بأكملها.

وهي تتيح لك بشكل أساسي إدخال تغييرات مهمة، دون تعطيل سير عمل تطبيق الإنتاج الخاص بك، في الوقت الفعلي وعند الطلب. يمكنك القيام بذلك عن طريق استخدام تبديل الميزات كبديل لتعديلات التعليمات البرمجية وعمليات النشر الشاملة.

علامات الميزات: شرح التنفيذ والفوائد

إن تطوير البرمجيات هو بلا شك عملية مستمرة ومتكررة. وما لم يتخلى الجميع عن مشروع ما، فسيستمر شخص ما في تطويره وإدخال تغييرات جديدة.

ومن الناحية المثالية، تتيح لك مسارات CI/CD دفع تغييرات التعليمات البرمجية المتسقة إلى الإنتاج. ومع ذلك، تأتي هذه العمليات على حساب أنها تتطلب جهدًا كبيرًا في النشر.

ومع ذلك، باستخدام علامات الميزات، يمكنك إصدار تحديث لبعض أو كل قاعدة المستخدمين الخاصة بك فقط عن طريق تبديل الإعداد.

هناك العديد من المواقف التي تنطبق فيها علامات الميزات، بما في ذلك:

• عندما تريد اختبار فكرة جديدة قبل طرحها لجميع المستخدمين. ومن خلال القيام بذلك، يمكنك بسهولة وبسرعة جمع التعليقات حول الأداء وتأثيره على المستخدم.
  instagram viewer
• عندما تريد طرح تحديثات الطوارئ والإصلاحات العاجلة الأساسية. في حالة وقوع كارثة، يمكنك تعطيل الميزات التي بها مشكلات بسرعة وطرح الإصلاحات دون إعادة نشر التطبيق بأكمله.
• عند توفير تجارب مستخدم مخصصة من خلال تمكين أو تعطيل ميزات محددة بناءً على سمات المستخدم أو التفضيلات أو حزم الاشتراك.

الشروع في العمل مع فلاج سميث

يوفر Flagsmith حلاً رائعًا لعلامات الميزات، بما في ذلك إصدار مفتوح المصدر وخدمة سحابية. سيستخدم هذا الدليل الحل السحابي الخاص به لدمج علامات الميزات في تطبيق React.

للبدء:

1. رئيس لأكثر من خدمة فلاج سميث السحابية، قم بالتسجيل للحصول على حساب، وقم بتسجيل الدخول إلى حسابك ملخص صفحة.
2. في صفحة النظرة العامة، انقر على إنشاء مشروع زر لإعداد مشروع Flagsmith جديد. سيقوم Flagsmith تلقائيًا بإنشاء بيئتي التطوير والإنتاج على جهازك إعدادات المشروع صفحة. في هذا البرنامج التعليمي، ستستخدم بيئة التطوير لتنفيذ علامات الميزات.
3. تأكد من أنك في تطوير البيئة، حدد سمات علامة التبويب، ثم انقر فوق قم بإنشاء الميزة الأولى الخاصة بك زر.
4. توفير بطاقة تعريف بالنسبة للميزة التي ترغب في وضع علامة عليها، ويفضل أن تكون سلسلة، انقر فوق زر التبديل إلى تمكين افتراضيا خيار الميزة، ثم اضغط إنشاء ميزة. في هذه الحالة، ستطبق علامة ميزة على تصنيف منتجات التجارة الإلكترونية المختلفة.
5. يمكنك عرض الميزة التي تم إنشاؤها حديثًا وإدارتها من خلال الانتقال إلى صفحة النظرة العامة على إعدادات الميزات.

الآن، لإكمال الإعداد، تحتاج إلى مفتاح البيئة من جانب العميل.

قم بإنشاء مفتاح البيئة من جانب العميل

للحصول على مفتاح البيئة من جانب العميل:

1. اضغط على إعدادات علامة التبويب تحت تطوير بيئة.
2. في صفحة إعدادات بيئة التطوير، انقر فوق مفاتيح فاتورة غير مدفوعة.
3. انسخ مفتاح البيئة المقدم من جانب العميل.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

إنشاء مشروع رد الفعل

الآن، تفضل، و قم ببناء مشروع React باستخدام أمر create-react-app. بدلا من ذلك، يمكنك استخدم Vite لإعداد مشروع React أساسي. يرجى ملاحظة أن هذا الدليل سيستخدم Vite لإنشاء تطبيق React.

بعد ذلك، قم بتثبيت SDK الخاص بـ Flagsmith في مشروعك. يتوافق SDK هذا مع العديد من أطر جافا سكريبت.

npm install flagsmith

الآن، قم بإنشاء .env الملف في الدليل الجذر لمجلد المشروع الخاص بك وأضف مفتاح البيئة من جانب العميل كما يلي:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

إضافة مكون وظيفي لقائمة المنتجات

لاختبار قدرات علامات الميزات الخاصة بـ Flagsmith، ستقوم بإنشاء مكون بسيط يعرض قائمة بمنتجات التجارة الإلكترونية من DummyJSON واجهة برمجة التطبيقات.

يأتي كل منتج في القائمة بسمات مختلفة، مثل العنوان والسعر ووصف المنتج والتقييم العام للمنتج. والقصد من ذلك هو تطبيق علامة الميزة على قيمة تصنيف المنتج. بمجرد تنفيذ العلامة، ستتمكن من التحكم في الميزة عن طريق تبديل زر في خدمة Flagsmith السحابية.

في ال src الدليل، قم بإنشاء مجلد جديد وقم بتسميته، عناصر. داخل هذا المجلد أضف ملفًا جديدًا المنتجات.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 إلى واجهة برمجة تطبيقات JSON الوهمية لجلب بيانات المنتجات. أنت تستطيع استخدم Fetch API أو Axios لاستهلاك واجهة برمجة التطبيقات.

ضمن المكون الوظيفي، أضف الكود أدناه:

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

مع ذلك، يمكنك جلب وعرض قائمة عناصر المنتج بشكل مريح من واجهة برمجة تطبيقات JSON الوهمية.

دمج SDK الخاص بـ Flagsmith

لدمج وتهيئة حزمة تطوير البرامج الخاصة بـFlagsmith في تطبيق React، أسفل ملف fetchProducts استدعاء وظيفة داخل useEffect هوك، أضف الكود أدناه.

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

من خلال تضمين هذه الوظيفة، يمكنك تمكين إدارة علامة الميزات من خلال التخزين المؤقت والتحليلات في تطبيق React.

تستخدم الوظيفة رد اتصال لإدارة كيفية عرض تقييمات المنتج ديناميكيًا بناءً على حالة المنتج Product_rated علم الميزة. يجب أن يكون هذا إما صحيحًا (ممكّنًا)، عند تشغيله في الخدمة السحابية، أو خطأ (معطلًا) عند إيقاف تشغيله.

وأخيراً قم بتحديث تصنيف المنتج 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، وقم بإيقاف تشغيل ميزة تصنيف المنتج.

نظرًا لأن التطبيق يعمل على المضيف المحلي، فأعد تحميله في المتصفح لعرض التغييرات المحدثة. سوف يختفي تصنيف المنتج الذي كان موجودًا في البداية. إذا قمت بتبديل الميزة مرة أخرى وأعدت تحميل الصفحة مرة أخرى، فسوف تظهر مرة أخرى.

لا ينبغي أن تشكل إصدارات الميزات أي مشكلة بعد الآن

أصبحت علامات الميزات أداة لتغيير قواعد اللعبة لإدارة إصدارات الميزات في التطبيقات. وهي تندمج بسلاسة في سير عمل التطوير، مما يقلل من المخاطر المرتبطة بطرح التحديثات الجديدة.

كما أنها قوية أيضًا، حيث تمنح الجميع - حتى المستخدمين النهائيين - القدرة على تمكين الميزات أو تعطيلها دون الغوص في تعليمات برمجية معقدة.