Oktatóanyag: Változatfunkció-jelzők használata Node.js alkalmazásban

2025-06-16

Ebben az oktatóanyagban egy változatfunkció-jelzővel kezelheti a különböző felhasználói szegmensek élményét egy példaalkalmazásban, a Nap idézőjele alkalmazásban. A Use variant feature flags (Változatok használata) funkciójelzőkben létrehozott változatfunkció-jelzőt használja. A folytatás előtt győződjön meg arról, hogy az Alkalmazáskonfigurációs áruházban létrehozza a Greeting (Üdvözlés) nevű változatfunkció-jelzőt.

Előfeltételek

Node.js LTS-verziók.
Kövesse a Változatok funkciójelzők használata oktatóanyagot, és hozza létre a Változat funkciójelzőt Üdvözlés néven.

Node.js alkalmazás létrehozása

Hozzon létre egy mappát, quote-of-the-day és inicializálja a projektet.
```
mkdir quote-of-the-day
cd quote-of-the-day
npm init -y
```

Telepítse a következő csomagokat.

npm install @azure/app-configuration-provider
npm install @microsoft/feature-management
npm install express

Hozzon létre egy server.js nevű új fájlt, és adja hozzá a következő kódot.

const express = require("express");
const server = express();

const appConfigEndpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const { DefaultAzureCredential } = require("@azure/identity");
const { load } = require("@azure/app-configuration-provider");
const { FeatureManager, ConfigurationMapFeatureFlagProvider } = require("@microsoft/feature-management");

let appConfig;
let featureManager;
async function initializeConfig() {
    appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
        featureFlagOptions: {
            enabled: true,
            refresh: {
                enabled: true
            }
        }
    });

    const featureFlagProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
    featureManager = new FeatureManager(featureFlagProvider);
}

function startServer() {
    // Use a middleware to refresh the configuration before each request
    server.use((req, res, next) => {
        appConfig.refresh();
        next();
    });
    server.use(express.json());
    // Serve static index.html from the current folder
    server.use(express.static("."));

    // This API returns the different greeting messages based on the segment the user belongs to.
    // It evaluates a variant feature flag based on user context. The greeting message is retrieved from the variant configuration.
    server.get("/api/getGreetingMessage", async (req, res) => {
        const { userId, groups } = req.query;
        const variant = await featureManager.getVariant("Greeting", { userId: userId, groups: groups ? groups.split(",") : [] });
        res.status(200).send({ message: variant?.configuration });
    });

    server.post("/api/like", (req, res) => {
        const { UserId } = req.body;
        if (UserId === undefined) {
            return res.status(400).send({ error: "UserId is required" });
        }
        // Here you would typically emit a 'like' event to compare variants.
        res.status(200).send();
    });

    const port = "8080";
    server.listen(port, () => {
        console.log(`Server is running at http://localhost:${port}`);
    });
}

// Initialize the configuration and start the server
initializeConfig()
    .then(() => {
        startServer();
    })
    .catch((error) => {
        console.error("Failed to load configuration:", error);
        process.exit(1);
    });

Hozzon létre egy index.html nevű új fájlt, és adja hozzá a következő kódot:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quote of the Day</title>
<style>
    .heart-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    }

    .heart-button:hover {
    background-color: #F0F0F0;
    }
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4;">
    <header style="background-color: white; border-bottom: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; font-family: 'Arial', sans-serif; font-size: 16px;">
    <div style="font-size: 1.25em; color: black;">QuoteOfTheDay</div>
    </header>

    <main style="display: flex; justify-content: center; align-items: center; flex-grow: 1;">
    <div style="background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 700px; position: relative; text-align: left;">
        <div id="quote-content">
        <h2 id="greeting">Quote of the Day</h2>
        <blockquote style="font-size: 2em; font-style: italic; color: #4EC2F7; margin: 0 0 20px 0; line-height: 1.4;">
            <p>"You cannot change what you are, only what you do."</p>
            <footer style="font-size: 0.55em; color: black; font-family: 'Arial', sans-serif; font-style: normal; font-weight: bold;">— Philip Pullman</footer>
        </blockquote>
        <div style="position: absolute; top: 10px; right: 10px; display: flex;">
            <button class="heart-button" id="like-button">
            <span id="heart-icon" style="color: #ccc">♥</span>
            </button>
        </div>
        </div>
        <div id="loading" style="display: none;">
        <p>Loading</p>
        </div>
    </div>
    </main>
</div>

<script>
    // extract URL parameters to simulate user login
    document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const currentUser = urlParams.get('userId') || '';
    let liked = false;

    const greetingElement = document.getElementById('greeting');
    const heartIcon = document.getElementById('heart-icon');
    const likeButton = document.getElementById('like-button');
    const quoteContent = document.getElementById('quote-content');
    const loadingElement = document.getElementById('loading');

    async function init() {
        quoteContent.style.display = 'none';
        loadingElement.style.display = 'block';

        const response = await fetch(`/api/getGreetingMessage?userId=${currentUser}`, { 
        method: "GET"
        });
        const result = await response.json();
        greetingElement.textContent = result.message || "";
        quoteContent.style.display = 'block';
        loadingElement.style.display = 'none';
    }

    likeButton.addEventListener('click', async function() {
        if (!liked) {
        const response = await fetch("/api/like", { 
            method: "POST", 
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ UserId: currentUser }),
        });
        }
        liked = !liked;
        heartIcon.style.color = liked ? 'red' : '#ccc';
    });

    init();
    });
</script>
</body>
</html>

Az egyszerűség kedvéért a példa kinyeri az userId URL-lekérdezési paraméterekből (például ?userId=UserA) a különböző felhasználói identitások szimulálásához.

Az alkalmazás futtatása

Állítsa a AZURE_APPCONFIG_ENDPOINT nevű környezeti változót az Alkalmazáskonfigurációs áruház végpontjára, amely az Azure Portalon található áruház áttekintésében található.

Ha a Windows parancssorát használja, futtassa a következő parancsot, és indítsa újra a parancssort a módosítás érvénybe lépésének engedélyezéséhez:
```
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
```
Ha a PowerShellt használja, futtassa a következő parancsot:
```
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
```
MacOS vagy Linux használata esetén futtassa a következő parancsot:
```
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
```
Indítsa el az alkalmazást.
```
node server.js
```
Nyissa meg a böngészőt, és navigáljon a localhost:8080 címre. Meg kell jelennie annak az alkalmazásnak az alapértelmezett nézete, amely nem tartalmaz üdvözlő üzenetet.
Az URL-címben található lekérdezési paraméterrel userId megadhatja a felhasználói azonosítót. Látogasson el localhost:8080/?userId=UserA , és egy hosszú üdvözlő üzenet jelenik meg.
Próbálja ki a különböző felhasználói azonosítókat annak megtekintéséhez, hogy a változat funkciójelzője hogyan módosítja az üdvözlőüzenetet a felhasználók különböző szegmenseinél. Látogasson el localhost:8080/?userId=UserB , és egy rövidebb üdvözlőüzenet jelenik meg.

Következő lépések

A JavaScript szolgáltatásfelügyeleti kódtár teljes funkciólefutását az alábbi dokumentum tartalmazza.

JavaScript-szolgáltatáskezelés

Megosztás a következőn keresztül:

Oktatóanyag: Változatfunkció-jelzők használata Node.js alkalmazásban

Előfeltételek

Node.js alkalmazás létrehozása

Az alkalmazás futtatása

Következő lépések

Visszajelzés

További források