Разработка программного обеспечения может быть сложной задачей, но выпуск новых функций не должен быть таким. Процесс развертывания функций может занять много времени и быть подверженным ошибкам без надлежащей системы пометки функций. Для меня это должно быть фундаментальной частью набора инструментов разработчика, потому что снижает риск ошибок и осложнений.

Как функционируют функциональные флаги?

Флаг функции служит посредником между функцией и пользователем. Пометка функции включает в себя привязку функции к флагу функции. Вы можете управлять визуализацией объекта, включая или выключая его флаг. Такой уровень контроля позволяет инженерам-программистам эффективно и уверенно разрабатывать и развертывать функции.

Флаги функций в Nest

Концепция пометки функций не зависит от языка и может использоваться в большинстве языков программирования и фреймворков, к которым мы уже привыкли. Давайте посмотрим, как мы можем реализовать это в приложении NestJS, используя программное обеспечение для управления флагами функций ConfigCat.

ConfigCat имеет обучаемый за 10 минут интерфейс и предоставляет панель управления для управления флагами функций. Благодаря функции сегментации пользователей мы можем ориентироваться на пользовательские сегменты на основе настраиваемых атрибутов. Используя этот метод, мы можем наблюдать за влиянием новых функций на пользователей, которые выбрали нашу группу бета-тестирования, избегая при этом обычных пользователей и платных клиентов.

Образец заявления

Чтобы проиллюстрировать концепцию, я создал вымышленный веб-сайт автосалона, используя NestJS. Поскольку Nest считается серверной средой, компоненты внешнего интерфейса были разработаны с использованием Vue.js.

Я сосредоточусь здесь не на фронтенд-разработке. Полный интерфейс можно найти здесь.

Вот краткое описание приложения:

На главной странице приложения прямо под баннером я добавил:

  • Форма подписки на информационный бюллетень. Предположим, что это уже существующий компонент сайта.
  • Калькулятор расхода топлива — новая функция, которая скоро появится.

Прежде чем углубиться, давайте рассмотрим следующие предварительные условия:

Предпосылки

  • Редактор кода (например, Visual Studio Code)
  • Версия узла 16 или выше
  • Базовые знания NestJS и JavaScript

Разработка приложения NestJS

  • Запустите свой любимый редактор кода и терминал в каталоге вашего приложения. Если у вас нет существующего приложения, я кратко расскажу, как начать работу.
  • Установите Nest CLI и создайте новый проект Nest с помощью следующих команд:
npm i -g @nestjs/cli
nest new nest_app

При появлении запроса выберите npm в качестве диспетчера пакетов и подождите, пока процесс завершится.

  • Перейдите в каталог приложения и выполните следующую команду. Попробуйте получить доступ к приложению на https://localhost:3000/. Вы должны увидеть Hello World! сообщение.
npm run start

Чтобы использовать Nest с интерфейсом Vue.js, я изменил файл main.ts следующим образом:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors(); // New
  app.setGlobalPrefix('api'); // New
  await app.listen(3000);
}
bootstrap();

Создание флага функции

Чтобы интегрировать пометку функций, нам нужно изменить файл app.controller.ts. Но сначала давайте создадим флаг функции.

  • Нажмите кнопку в правой части экрана, как показано ниже, чтобы включить флажок функции.

Интеграция с ConfigCat

Настоятельно рекомендуется использовать клиент ConfigCat как объект Singleton в производственной среде.

  • Поскольку Nest — это фреймворк для рендеринга на стороне сервера, нам потребуется установить версию SDK JavaScript для SSR (рендеринг на стороне сервера) из ConfigCat. Для этого откройте терминал, перейдите в корень приложения и выполните следующую команду:
npm i configcat-js-ssr

Это установит необходимые пакеты, необходимые для подключения нашего приложения Nest к ConfigCat.

  • Обновите файл src/app.controller.ts, как показано ниже. Я добавил фрагменты кода комментариев ниже, чтобы объяснить каждую часть.
// Import ConfigCat
import * as configcat from "configcat-js-ssr";
import { IConfigCatClient } from 'configcat-common';
@Controller('travel')
export class AppController {
  constructor(private readonly appService: AppService) {
    // Initialize the ConfigCat client with your SDK key
    this.configCatClient = configcat.createClient("-VbaCFs0RUGAghJLdTal-g/ZRvIWKTu0k-ZXxhOiebpBQ");
  }
}
@Get('mileage')
  async getMileageFeature(): Promise<Boolean> {
    // Create a variable to store the state of the feature flag from ConfigCat.
    // This variable will be automatically updated every 60 seconds by default.
    const canShowMileageFeature = await this.configCatClient.getValueAsync("canshowmileagefeature", false)
if (canShowMileageFeature) {
      // When true is returned to the frontend, the Gas Mileage feature is rendered
      return true
    } else {
      // When false is returned to the frontend, the Gas Mileage feature is not rendered. Instead, the subscription form will be rendered.
      return false
    }
  }
public configCatClient: IConfigCatClient
}

Демонстрация приложения

  • Запустите приложение и перейдите к https://localhost:3000/, как показано ниже:

  • Отключите флаг функции на панели инструментов ConfigCat. Домашняя страница теперь должна выглядеть так:

По умолчанию клиентский SDK ConfigCat извлекает состояние флага функции каждые 60 секунд. Это избавляет от необходимости перезапускать приложение. ConfigCat также дает возможность увеличивать или уменьшать этот период интервала — подробнее об этом здесь.

Заключение

Процесс добавления флагов функций в ваши приложения быстрый, простой и не занимает много времени. Для рабочих процессов разработки с регулярными выпусками функций идеально подходит рабочий процесс с пометкой функций. Службы флагов функций особенно полезны для канареечных выпусков, где крайне важно экспериментировать, а откат можно легко выполнить с помощью переключателей функций.

Вы или ваша команда можете быстро приступить к работе благодаря исчерпывающей документации по ConfigCat. Также поддерживается множество других фреймворков и языков. Полный список поддерживаемых SDK см. на этой странице.

Следите за обновлениями ConfigCat в Twitter, Facebook, LinkedIn и GitHub.