QR-коды и штрихкоды: реальные сценарии использования в Blazor

Узнайте, как совместно использовать QR-коды и штрихкоды в реальном приложении Blazor для продажи билетов на мероприятия, включая процесс регистрации билетов на входе.

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

Именно поэтому в этой статье мы рассмотрим, как компоненты Blazor Barcode и Blazor QR Code от Progress Telerik помогут вам легко визуализировать информацию. Давайте начнем!

Что такое QR-коды и штрихкоды?

Хотя мы постоянно используем QR-коды и штрихкоды, задумывались ли вы когда-нибудь, в чем разница между ними? Если вкратце, разница заключается в количестве измерений, используемых для хранения данных:

• Одномерный (1D) штрихкод хранит информацию с помощью набора полос и пробелов различной ширины. Он идеально подходит для коротких значений, таких как серийный номер или идентификатор, что и используется для товаров в супермаркетах.
• QR-коды, которые являются 2D или двухмерными, хранят информацию в сетке из белых и черных модулей. Поскольку они используют вертикальную и горизонтальную оси, в них можно хранить гораздо больше информации. Кроме того, стандарт определяет уровни, позволяющие считывать QR-код, даже если он поврежден или частично закрыт.

Часто возникает вопрос, когда использовать один, а когда другой. Ответ прост: штрихкоды идеально подходят для представления короткого идентификатора, а QR-коды лучше оставить для кодирования таких данных, как URL-адреса или контактная информация.

Создание приложения Blazor с использованием штрихкодов и QR-кодов

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

Интеграция компонентов Telerik в веб-проект Blazor

Чтобы использовать компоненты Telerik, мы должны установить их, если у нас уже создан проект Blazor, для чего можно воспользоваться руководством по установке. Если вы хотите начать с нуля, вы можете использовать готовый шаблон и интегрировать его в VS 2026, где есть все необходимое для немедленной работы.

Создание модели для системы продажи билетов

Для управления билетами на симулируемое мероприятие мы создадим новую модель под названием Ticket, которая будет выглядеть следующим образом:

В модели выше мы определили свойство Code, которое будет закодированным значением для URL-адреса QR-кода, в то время как свойство BarcodeNumber — это короткий номер для хранения значения штрихкода. Остальные данные будут использоваться для хранения информации об участниках, а также данных о регистрации.

Создание сервиса для системы продажи билетов

Когда модель готова, пришло время создать сервис, который будет обрабатывать логику приложения, включая выпуск билетов, создание URL-адреса для валидации и выполнение процесса регистрации. Давайте создадим новый класс под названием TicketService:

В приведенном выше коде мы определили несколько интересных моментов:

• Мы создали перечисление CheckInStatus, чтобы задать статус регистрации участника.
• Мы также определили запись CheckInResult, которая объединяет статус регистрации с соответствующей информацией о билете, чтобы иметь возможность отображать корректную информацию в пользовательском интерфейсе.
• Мы определили класс сервиса, который будет внедряться в компоненты Blazor. Конструктор получает конфигурацию с такими данными, как базовый URL-адрес для валидации, чтобы сканирование QR-кода с мобильного устройства работало корректно. Мы также создали три фиктивные записи для предварительного заполнения интерфейса данными.
• Мы создали событие типа Action, которое позволит нам уведомлять об изменениях при сканировании QR-кодов с телефона.
• Метод IssueTicket безопасно генерирует порядковый номер благодаря использованию Interlocked.Increment, что предназначено для сценариев, где несколько объектов могут одновременно изменять одно и то же значение.
• Метод BuildValidationUrl формирует URL-адрес, закодированный в QR-коде, объединяя базовый URL-адрес и номер билета.
• Метод CheckIn выполняет валидацию билета. Он принимает значение и ищет совпадение по коду, номеру штрихкода или URL-адресу валидации. Это позволит считывать как QR-код, так и штрихкод.

Когда класс сервиса готов, его необходимо зарегистрировать в следующем разделе.

Регистрация сервиса билетов в приложении Blazor

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

Создание раздела для генерации билетов

Мы создадим новую страницу компонента под названием EventTickets.razor, начав с определения маршрута, режима рендеринга и внедрения сервиса:

После того как основная часть приложения определена, мы создадим первый раздел, который отображает форму и служит для генерации билетов. Мы можем сделать это с помощью компонентов Telerik, таких как TelerikTextBox, TelerikDropDownList и TelerikButton, которые позволяют легко настроить и реализовать функционал:

Форма позволит вводить имя участника, адрес электронной почты и тип билета. С другой стороны, в разделе кода обрабатывается событие кнопки для создания нового билета с использованием сервиса TicketService.

Результат выглядит следующим образом:

Отображение сгенерированных QR-кодов и штрихкодов

Действие по созданию билета автоматически создает объект Ticket, который, как вы помните, содержит информацию для отображения QR-кодов и штрихкодов. Чтобы показать их в интерфейсе, просто используйте компонент TelerikQRCode для отображения QR-кодов и TelerikBarcode для отображения штрихкодов, каждый из которых привязан к соответствующему свойству:

В предыдущем разделе компонент TelerikQRCode получает в параметре Value URL-адрес валидации, который формирует сервис, что позволит выполнить регистрацию после сканирования. А TelerikBarcode получает в параметре Value номер билета. В обоих случаях компоненты автоматически берут на себя отрисовку кодов в пользовательском интерфейсе.

На изображении выше мы видим, как предварительный просмотр кода обновляется практически мгновенно при генерации билета.

Отображение сгенерированных билетов

Очень полезной функцией может стать отображение ранее созданных билетов. Это можно использовать для просмотра подробной информации о каждом билете, а также его текущего статуса.

Мы можем реализовать это с помощью компонента TelerikGrid, который обеспечивает довольно высокий уровень настройки:

Приведенная выше конфигурация позволяет выполнять привязку к информации, полученной из сервиса, а также обновлять выбранную запись благодаря методу OnTicketRowClick. Мы также используем Template для настройки вида последнего столбца, указывая, был ли билет зарегистрирован или нет.

Результат реализации выглядит следующим образом:

Теперь давайте посмотрим, как проверить статус билета.

Валидация доступа на мероприятие

Последний раздел, который мы реализуем, будет симуляцией, позволяющей людям проверять статус билета. Реализация выглядит следующим образом:

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

Наконец, давайте посмотрим, как мы можем протестировать приложение с помощью нашего физического устройства.

Создание страницы проверки для QR-кода

Хотя в предыдущем разделе уже можно было выполнить регистрацию (check-in) с использованием любого из двух значений в символьном формате, в идеале мы хотим использовать камеру телефона или аналогичное устройство.

Для этого мы создадим страницу, которая принимает код в маршруте и выполняет регистрацию сразу при открытии. Мы сделаем это, создав компонент Validate.razor:

В приведенном выше коде мы получаем код для проверки благодаря параметру Code. Кроме того, перед вызовом CheckIn проверяется RendererInfo.IsInteractive. Мы делаем это, чтобы предотвратить выполнение регистрации дважды из-за предварительного рендеринга Blazor.

Тестирование QR-кода с использованием туннеля разработки (Dev Tunnel)

При разработке приложения мы регулярно используем localhost для тестирования сайта, что означает, что мобильное устройство не сможет обратиться к тому же URL-адресу разработки для выполнения регистрации с телефона.

Чтобы решить эту проблему, нам нужно каким-то образом предоставить доступ к приложению по публичному URL-адресу. Хотя для этого существует множество способов, я буду использовать туннель разработки (dev tunnel) — бесплатный метод, предоставляемый VS 2026 для простого решения этой задачи.

Туннель разработки — это безопасный туннель, который создает публичный URL-адрес во время работы приложения, перенаправляя поступающие на него запросы на ваш локальный сервер. В VS 2026 вы можете создать его через меню Вид | Другие окна | Туннели разработки (View | Other Windows | Dev Tunnels).

Мы можем создать его со следующей конфигурацией:

• Name: eventticketing
• Tunnel Type: Persistent (для сохранения прежнего URL-адреса)
• Access: Public

После создания мы должны выбрать его перед запуском приложения:

Когда мы запущен приложение, нам будет предоставлен туннель следующего вида:

Чтобы QR-код указывал на этот туннель вместо фиктивного домена, давайте изменим файл appsettings.Development.json, добавив в него ключ:

Благодаря этому во время разработки мы будем использовать URL-адрес туннеля, а в продакшене будет использоваться URL-адрес, определенный в службе.

Наконец, в EventTickets.razor мы подпишемся на событие TicketsChanged, чтобы обновить статус билета, отсканированного с помощью QR:

При тестировании приложения происходит следующее:

В видео выше вы можете видеть, как сетка начинается со всеми билетами в неиспользованном состоянии. Затем мы сканируем QR-код, который переводит нас на страницу проверки, проверяющую действительность билета. Наконец, возвращаясь на главную страницу, мы видим сетку с обновленным билетом.

Заключение

В течение этой статьи вы смогли ознакомиться с реальным сценарием использования компонентов Blazor QR Code и Blazor Barcode, которые значительно упрощают задачу, когда нам необходимо реализовать такие типы кодов в наших приложениях.

Вы узнали об используемой модели, службе, различных частях приложения, задействующих такие типы приложений, и даже о возможной реализации чтения QR-кодов в процессе разработки приложения.

Теперь ваша очередь создавать решения быстрее, используя эти компоненты в приложениях ваших клиентов.

Попробуйте Telerik UI for Blazor