Использование флагов функций variant в приложении Python

Статья
02/04/2025

В этом руководстве вы используете флаг функции variant для управления взаимодействием с различными сегментами пользователей в примере приложения с кавычками дня. Вы используете флаг функции variant, созданный в разделе "Как изменить флаги компонентов". Прежде чем продолжить, убедитесь, что вы создадите флаг функции variant с именем Greeting в хранилище Конфигурация приложений.

Необходимые компоненты

Python 3.8 или более поздней версии— сведения о настройке Python в Windows см. в документации по Python в Windows.
Следуйте инструкциям в руководстве по варианту флагов функций и создайте флаг функции variant с именем Greeting.

Настройка веб-приложения Python Flask

Если у вас уже есть веб-приложение Python Flask, можно перейти к разделу "Использовать флаг функции вариантов".

Создайте новую папку проекта с именем QuoteOfTheDay.
Создайте виртуальную среду в папке QuoteOfTheDay .
```
python -m venv venv
```
Включите виртуальную среду.
```
.\venv\Scripts\Activate
```

Установите последние версии следующих пакетов.

pip install flask
pip install flask-login
pip install flask_sqlalchemy
pip install flask_bcrypt

Создание кавычки приложения Day

Создайте файл с именем app.py в папке QuoteOfTheDay со следующим содержимым. Он настраивает базовое веб-приложение Flask с проверкой подлинности пользователя.

from flask_bcrypt import Bcrypt
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
from flask import Flask

app = Flask(__name__, template_folder="../templates", static_folder="../static")
bcrypt = Bcrypt(app)

db = SQLAlchemy()
db.init_app(app)

login_manager = LoginManager()
login_manager.init_app(app)

from .model import Users

@login_manager.user_loader
def loader_user(user_id):
    return Users.query.get(user_id)

with app.app_context():
    db.create_all()

if __name__ == "__main__":
    app.run(debug=True)

from . import routes
app.register_blueprint(routes.bp)

Создайте файл с именем model.py в папке QuoteOfTheDay со следующим содержимым. Он определяет Quote класс данных и пользовательскую модель для веб-приложения Flask.

from dataclasses import dataclass
from flask_login import UserMixin
from . import db

@dataclass
class Quote:
    message: str
    author: str

# Create user model
class Users(UserMixin, db.Model):

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(250), unique=True, nullable=False)
    password_hash = db.Column(db.String(250), nullable=False)

    def __init__(self, username, password):
        self.username = username
        self.password_hash = password

Создайте файл с именем routes.py в папке QuoteOfTheDay со следующим содержимым. Он определяет маршруты для веб-приложения Flask, обработки проверки подлинности пользователей и отображения домашней страницы со случайной цитатой.

import random

from flask import Blueprint, render_template, request, flash, redirect, url_for
from flask_login import current_user, login_user, logout_user
from . import db, bcrypt
from .model import Quote, Users

bp = Blueprint("pages", __name__)

@bp.route("/", methods=["GET", "POST"])
def index():
    context = {}
    user = ""
    if current_user.is_authenticated:
        user = current_user.username
        context["user"] = user
    else:
        context["user"] = "Guest"
    if request.method == "POST":
        return redirect(url_for("pages.index"))

    quotes = [
        Quote("You cannot change what you are, only what you do.", "Philip Pullman"),
    ]

    greeting_message = "Hi"

    context["model"] = {}
    context["model"]["greeting_message"] = greeting_message
    context["model"]["quote"] = {}
    context["model"]["quote"] = random.choice(quotes)
    context["isAuthenticated"] = current_user.is_authenticated

    return render_template("index.html", **context)

@bp.route("/register", methods=["GET", "POST"])
def register():
    if request.method == "POST":
        password = request.form.get("password")
        hashed_password = bcrypt.generate_password_hash(password).decode('utf-8')
        user = Users(request.form.get("username"), hashed_password)
        try:
            db.session.add(user)
            db.session.commit()
        except Exception as e:
            flash("Username already exists")
            return redirect(url_for("pages.register"))
        login_user(user)

        return redirect(url_for("pages.index"))
    return render_template("sign_up.html")


@bp.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        user = Users.query.filter_by(username=request.form.get("username")).first()
        password = request.form.get("password")
        if user and bcrypt.check_password_hash(user.password_hash, password):
            login_user(user)
            return redirect(url_for("pages.index"))
    return render_template("login.html")

@bp.route("/logout")
def logout():
    logout_user()
    return redirect(url_for("pages.index"))

Создайте новую папку с именем шаблонов в папке QuoteOfTheDay и добавьте в нее новый файл с именем base.html со следующим содержимым. Он определяет страницу макета для веб-приложения.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QuoteOfTheDay</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='site.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand"  href="/">QuoteOfTheDay</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">

                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                    </ul>
                    {% block login_partial %}
                    <ul class="navbar-nav">
                    {% if isAuthenticated %}
                        <li class="nav-item">
                            <a  class="nav-link text-dark">Hello {{user}}!</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark"  href="/logout">Logout</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link text-dark"  href="/register">Register</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark"  href="/login">Login</a>
                        </li>
                    {% endif %}
                    </ul>
                    {% endblock %}
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            {% block content %}
            {% endblock %}
        </main>
    </div>
</body>

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2024 - QuoteOfTheDay
    </div>
</footer>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Создайте файл с именем index.html в папке шаблонов со следующим содержимым. Он расширяет базовый шаблон и добавляет блок содержимого.

{% extends 'base.html' %}

{% block content %}
<div class="quote-container">
    <div class="quote-content">
       {% if model.greeting_message %}
            <h3 class="greeting-content">{{model.greeting_message}}</h3>
        {% endif %}
        <br />
        <p class="quote">“{{model.quote.message}}”</p>
        <p>- <b>{{model.quote.author}}</b></p>
    </div>

    <div class="vote-container">
        <button class="btn btn-primary" onclick="heartClicked(this)">
            <i class="far fa-heart"></i> <!-- Heart icon -->
        </button>
    </div>

    <form action="/" method="post">
    </form>
</div>
<script>
    function heartClicked(button) {
        var icon = button.querySelector('i');
        icon.classList.toggle('far');
        icon.classList.toggle('fas');
    }
</script>
{% endblock %}

Создайте файл с именем sign_up.html в папке шаблонов со следующим содержимым. Он определяет шаблон для страницы регистрации пользователя.

{% extends 'base.html' %}

{% block content %}
<div class="login-container">
  <h1>Create an account</h1>
  <form action="#" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" />
    <label for="password">Password:</label>
    <input type="password" name="password" />
    <button type="submit">Submit</button>
  </form>
</div>
{% endblock %}

Создайте файл с именем login.html в папке шаблонов со следующим содержимым. Он определяет шаблон для страницы входа пользователя.

{% extends 'base.html' %}

{% block content %}
<div class="login-container">
  <h1>Login to your account</h1>
  <form action="#" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" />
    <label for="password">Password:</label>
    <input type="password" name="password" />
    <button type="submit">Submit</button>
  </form>
</div>
{% endblock %}

Создайте папку с именем static в папке QuoteOfTheDay и добавьте в нее новый файл с именем site.css со следующим содержимым. Он добавляет стили CSS для веб-приложения.

html {
    font-size: 14px;
  }

  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }

  .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  }

  html {
    position: relative;
    min-height: 100%;
  }

  body {
    margin-bottom: 60px;
  }

  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.quote-container {
    background-color: #fff;
    margin: 2em auto;
    padding: 2em;
    border-radius: 8px;
    max-width: 750px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: start;
    position: relative;
}

.login-container {
  background-color: #fff;
  margin: 2em auto;
  padding: 2em;
  border-radius: 8px;
  max-width: 750px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  justify-content: space-between;
  align-items: start;
  position: relative;
}

.vote-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 0em;
}

    .vote-container .btn {
        background-color: #ffffff; /* White background */
        border-color: #ffffff; /* Light blue border */
        color: #333
    }

        .vote-container .btn:focus {
            outline: none;
            box-shadow: none;
        }

        .vote-container .btn:hover {
            background-color: #F0F0F0; /* Light gray background */
        }

.greeting-content {
    font-family: 'Georgia', serif; /* More artistic font */
}

.quote-content p.quote {
    font-size: 2em; /* Bigger font size */
    font-family: 'Georgia', serif; /* More artistic font */
    font-style: italic; /* Italic font */
    color: #4EC2F7; /* Medium-light blue color */
}

Использование флага функции variant

Установите последние версии следующих пакетов.

pip install azure-identity 
pip install azure-appconfiguration-provider
pip install featuremanagement[AzureMonitor]

app.py Откройте файл и добавьте следующий код в конец файла. Он подключается к Конфигурация приложений и настраивает управление функциями.

Вы используете DefaultAzureCredential для проверки подлинности в хранилище Конфигурация приложений. Следуйте инструкциям, чтобы назначить учетные данные роли чтения данных Конфигурация приложений. Перед запуском приложения обязательно предоставьте достаточно времени для распространения разрешения.
```
import os
from azure.appconfiguration.provider import load
from featuremanagement import FeatureManager
from azure.identity import DefaultAzureCredential

ENDPOINT = os.getenv("AzureAppConfigurationEndpoint")

# Updates the flask app configuration with the Azure App Configuration settings whenever a refresh happens
def callback():
    app.config.update(azure_app_config)

# Connect to App Configuration
global azure_app_config
azure_app_config = load(
    endpoint=ENDPOINT,
    credential=DefaultAzureCredential(),
    on_refresh_success=callback,
    feature_flag_enabled=True,
    feature_flag_refresh_enabled=True,
)
app.config.update(azure_app_config)

# Create a FeatureManager
feature_manager = FeatureManager(azure_app_config)
```

Откройте routes.py и добавьте следующий код в конец его для обновления конфигурации и получения варианта функции.

from featuremanagement.azuremonitor import track_event
from . import azure_app_config, feature_manager

...
# Update the post request to track liked events
if request.method == "POST":
    track_event("Liked", user)
    return redirect(url_for("pages.index"))

...
# Update greeting_message to variant
greeting = feature_manager.get_variant("Greeting", user)
greeting_message = ""
if greeting:
    greeting_message = greeting.configuration

Сборка и запуск приложения

Задайте переменную среды с именем AzureAppConfigurationEndpoint конечной точке хранилища Конфигурация приложений, найденной в разделе "Обзор хранилища" в портал Azure.

Если вы используете командную строку Windows, выполните следующую команду и перезапустите командную строку, чтобы изменения вступили в силу:
```
setx AzureAppConfigurationEndpoint "<endpoint-of-your-app-configuration-store>"
```
Если вы используете PowerShell, выполните следующую команду:
```
$Env:AzureAppConfigurationEndpoint = "<endpoint-of-your-app-configuration-store>"
```
Если вы используете macOS или Linux, выполните следующую команду:
```
export AzureAppConfigurationEndpoint='<endpoint-of-your-app-configuration-store'
```
В командной строке в папке QuoteOfTheDay выполните следующую flask runкоманду:
Дождитесь запуска приложения, а затем откройте браузер и перейдите к http://localhost:5000/ней.
После просмотра запущенного приложения нажмите кнопку "Зарегистрировать " в правом верхнем углу, чтобы зарегистрировать нового пользователя.
Зарегистрируйте нового пользователя с именем usera@contoso.com.

Примечание.

Важно использовать эти имена именно в этом руководстве. Пока функция настроена должным образом, два пользователя должны видеть разные варианты.
Нажмите кнопку "Отправить" после ввода сведений о пользователе.
Вы автоматически вошли в систему. При просмотре приложения должно появиться usera@contoso.com длинное сообщение.
Выход с помощью кнопки выхода в правом верхнем углу.
Зарегистрируйте второго пользователя с именем userb@contoso.com.
Вы автоматически вошли в систему. При просмотре приложения должно появиться userb@contoso.com короткое сообщение.

Следующие шаги

Полный запуск функции библиотеки управления функциями Python см. в следующем документе.

Управление функциями Python

Поделиться через