Οι σημαίες λειτουργιών είναι ένα ουσιαστικό εργαλείο, που συμβάλλει στον εξορθολογισμό της δημιουργίας και της κυκλοφορίας ενημερώσεων λογισμικού. Μπορείτε να τα χρησιμοποιήσετε για να στοχεύσετε μια συγκεκριμένη ομάδα χρηστών ή ολόκληρη τη βάση χρηστών σας.

Ουσιαστικά, σας επιτρέπουν να εισάγετε σημαντικές αλλαγές, χωρίς να διαταράσσεται η ροή εργασιών της εφαρμογής παραγωγής σας, σε πραγματικό χρόνο και κατά παραγγελία. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας εναλλαγές λειτουργιών ως εναλλακτική λύση σε εκτενείς τροποποιήσεις και αναπτύξεις κώδικα.

Σημαίες χαρακτηριστικών: Επεξήγηση εφαρμογής και πλεονεκτημάτων

Η ανάπτυξη λογισμικού είναι, αναμφίβολα, μια συνεχής και επαναλαμβανόμενη διαδικασία. Αν δεν εγκαταλείψουν όλοι ένα έργο, κάποιος θα συνεχίσει να το αναπτύσσει, εισάγοντας νέες αλλαγές.

Στην ιδανική περίπτωση, οι αγωγοί CI/CD σάς επιτρέπουν να προωθείτε συνεπείς αλλαγές κώδικα στην παραγωγή. Ωστόσο, αυτές οι διαδικασίες έχουν το κόστος της απαίτησης σημαντικής προσπάθειας ανάπτυξης.

Ωστόσο, χρησιμοποιώντας σημαίες χαρακτηριστικών, μπορείτε να απελευθερώσετε μια ενημέρωση σε μέρος ή σε ολόκληρη τη βάση χρηστών σας απλώς εναλλάσσοντας μια ρύθμιση.

Υπάρχουν πολλές περιπτώσεις όπου ισχύουν σημαίες χαρακτηριστικών, όπως:

• Όταν θέλετε να δοκιμάσετε μια νέα ιδέα πριν τη διαθέσετε σε όλους τους χρήστες. Με αυτόν τον τρόπο, μπορείτε εύκολα και γρήγορα να συλλέγετε σχόλια σχετικά με την απόδοση και τον αντίκτυπό τους στους χρήστες.
• Όταν θέλετε να διαθέσετε βασικές ενημερώσεις έκτακτης ανάγκης και επείγουσες επιδιορθώσεις. Σε περίπτωση καταστροφής, μπορείτε να απενεργοποιήσετε γρήγορα τις προβληματικές λειτουργίες και να δημιουργήσετε επιδιορθώσεις χωρίς να επανατοποθετήσετε ολόκληρη την εφαρμογή.
• Όταν παρέχετε εξατομικευμένες εμπειρίες χρήστη ενεργοποιώντας ή απενεργοποιώντας συγκεκριμένες λειτουργίες που βασίζονται σε χαρακτηριστικά, προτιμήσεις ή πακέτα συνδρομής χρήστη.

Ξεκινώντας με το Flagsmith

Το Flagsmith παρέχει μια εξαιρετική λύση για σημαίες χαρακτηριστικών, συμπεριλαμβανομένης μιας έκδοσης ανοιχτού κώδικα και μιας υπηρεσίας cloud. Αυτός ο οδηγός θα χρησιμοποιήσει τη λύση cloud για να ενσωματώσει σημαίες χαρακτηριστικών σε μια εφαρμογή React.

Για να ξεκινήσετε:

1. Κατευθυνθείτε προς Υπηρεσία cloud του Flagsmith, εγγραφείτε για έναν λογαριασμό και συνδεθείτε στον λογαριασμό σας ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ σελίδα.
2. Στη σελίδα επισκόπησης, κάντε κλικ στο Δημιουργία έργου κουμπί για να ρυθμίσετε ένα νέο έργο Flagsmith. Η Flagsmith θα δημιουργήσει αυτόματα τόσο τα περιβάλλοντα ανάπτυξης όσο και παραγωγής στο δικό σας Ρυθμίσεις έργου σελίδα. Για αυτό το σεμινάριο, θα χρησιμοποιήσετε το περιβάλλον ανάπτυξης για να εφαρμόσετε τις σημαίες χαρακτηριστικών.
3. Βεβαιωθείτε ότι είστε στο Ανάπτυξη περιβάλλον, επιλέξτε το Χαρακτηριστικά καρτέλα και κάντε κλικ στο Δημιουργήστε την πρώτη σας λειτουργία κουμπί.
4. Παρέχετε ένα ταυτότητα για το χαρακτηριστικό που θέλετε να επισημάνετε, κατά προτίμηση μια συμβολοσειρά, κάντε κλικ στο κουμπί εναλλαγής Ενεργοποίηση από προεπιλογή δυνατότητα επιλογής και πατήστε Δημιουργία λειτουργίας. Σε αυτήν την περίπτωση, θα εφαρμόσετε μια επισήμανση χαρακτηριστικών στην αξιολόγηση διαφορετικών προϊόντων ηλεκτρονικού εμπορίου.
5. Μπορείτε να προβάλετε και να διαχειριστείτε τη λειτουργία που δημιουργήθηκε πρόσφατα μεταβαίνοντας στη σελίδα επισκόπησης ρυθμίσεων λειτουργιών.

Τώρα, για να ολοκληρώσετε τη ρύθμιση, χρειάζεστε το κλειδί περιβάλλοντος από την πλευρά του πελάτη.

Δημιουργήστε το κλειδί περιβάλλοντος από την πλευρά του πελάτη

Για να αποκτήσετε το κλειδί περιβάλλοντος από την πλευρά του πελάτη:

1. Κάνε κλικ στο Ρυθμίσεις καρτέλα κάτω από το Ανάπτυξη περιβάλλον.
2. Στη σελίδα ρυθμίσεων περιβάλλοντος ανάπτυξης, κάντε κλικ στο Κλειδιά αυτί.
3. Αντιγράψτε το κλειδί περιβάλλοντος που παρέχεται από την πλευρά του πελάτη.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε το React Project

Τώρα, προχωρήστε, και ικρίωμα ενός έργου 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.

Κάθε προϊόν στη λίστα συνοδεύεται από διάφορα χαρακτηριστικά, όπως τίτλος, τιμή, περιγραφή προϊόντος και συνολική βαθμολογία προϊόντος. Η πρόθεση είναι να εφαρμοστεί η σημαία χαρακτηριστικού στην τιμή αξιολόγησης προϊόντος. Αφού εφαρμόσετε τη σημαία, θα μπορείτε να ελέγχετε τη δυνατότητα κάνοντας εναλλαγή ενός κουμπιού στην υπηρεσία cloud του 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 στο εικονικό 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>
))}

Με αυτό, μπορείτε άνετα να ανακτήσετε και να εμφανίσετε μια λίστα με στοιχεία προϊόντων από το εικονικό JSON API.

Ενσωματώστε το SDK της Flagsmith

Για να ενσωματώσετε και να αρχικοποιήσετε το SDK του Flagsmith στην εφαρμογή React, ακριβώς κάτω από το fetchProducts κλήση λειτουργίας μέσα στο useEffect αγκίστρι, προσθέστε τον παρακάτω κώδικα.

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

Με τη συμπερίληψη αυτής της λειτουργίας, ενεργοποιείτε τη διαχείριση επισημάνσεων λειτουργιών με προσωρινή αποθήκευση και αναλυτικά στοιχεία στην εφαρμογή React.

Η λειτουργία χρησιμοποιεί μια επανάκληση για να διαχειριστεί δυναμικά τον τρόπο εμφάνισης των αξιολογήσεων προϊόντων με βάση την κατάσταση του αξιολόγηση προϊόντος χαρακτηριστικό σημαία. Αυτό θα πρέπει να είναι είτε true (ενεργοποιημένο), όταν ενεργοποιείται στην υπηρεσία cloud είτε 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, φορτώστε την ξανά στο πρόγραμμα περιήγησης για να δείτε τις ενημερωμένες αλλαγές. Η βαθμολογία προϊόντος που υπήρχε αρχικά θα εξαφανιστεί. Εάν ενεργοποιήσετε ξανά τη λειτουργία και φορτώσετε ξανά τη σελίδα, θα εμφανιστεί ξανά.

Οι κυκλοφορίες λειτουργιών δεν πρέπει να είναι πια ταλαιπωρία

Οι σημαίες λειτουργιών έχουν γίνει ένα εργαλείο αλλαγής παιχνιδιών για τη διαχείριση των κυκλοφοριών λειτουργιών σε εφαρμογές. Ενσωματώνονται απρόσκοπτα στη ροή εργασιών ανάπτυξης, ελαχιστοποιώντας τους κινδύνους που σχετίζονται με την κυκλοφορία νέων ενημερώσεων.

Είναι επίσης ισχυρά, δίνοντας σε όλους —ακόμη και στους τελικούς χρήστες— τη δύναμη να ενεργοποιούν ή να απενεργοποιούν λειτουργίες χωρίς να βυθίζονται σε περίπλοκο κώδικα.