Как генерировать QR-коды в Angular 10

kak generirovat qr kody v angular 10

В этом учебнике мы узнаем, как генерировать QR-коды в Angular 10, создав простой пример программы.

Но, прежде всего, что такое QR-код и что он делает?

Согласно Википедии:

QR-код (сокращенно от Quick Response code) — это тип матричного штрихкода (или двумерного штрихкода), впервые разработанный в 1994 году для автомобильной промышленности Японии.

Штрих-код – это машиночитаемая оптическая этикетка, содержащая информацию о предмете, к которому он прикреплен.

На практике QR-коды часто содержат данные для локатора, идентификатора или трекера, указывающие на веб-сайт или приложение.

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

Это просто компактный и эффективный способ хранения данных.

Теперь давайте посмотрим, как генерировать QR-коды в ваших программах Angular 10, создав пример.

Предпосылки

Прежде чем начать, вам нужно выполнить несколько предпосылок:

  • Базовые знания TypeScript. В частности, знакомство с объектно ориентированными понятиями, такими как классы TypeScript и декораторы.
  • Машина локальной разработки с Узел 10+вместе с NPM 6+ установлено.

Node требуется Angular CLI, как и большинство современных инструментов интерфейса. Вы можете просто перейти на страницу загрузки официального сайта и загрузить двоичные файлы для своей операционной системы.

Вы также можете обратиться к инструкциям вашей системы, чтобы узнать, как установить Node с помощью менеджера пакетов. Рекомендуемый способ – использовать NVM – Node Version Manager – POSIX-совместимый сценарий bash для управления несколькими активными версиями Node.js.

Примечание: Не хотите устанавливать локальную среду для разработки Angular, но все равно хотите попробовать код в этом учебнике? Вы можете использовать Stackblitz, онлайновую IDE для разработки интерфейса, позволяющую создавать проект Angular, совместимый с Angular CLI.

Шаг 1 — Установка Angular CLI 10

На этом шаге мы установим последнюю версию Angular CLI 10 (на момент написания данного руководства).

Angular CLI является официальным инструментом для инициализации и работы с проектами Angular. Чтобы установить его, откройте новый интерфейс командной строки и выполните следующие действия.

$ npm install -g @angular/cli

На момент написания статьи, angular/cli v10 будет установлен в вашей системе.

Шаг 2 — Создание нового приложения Angular 10

Теперь создадим наш проект. Вернитесь в интерфейс командной строки и выполните следующие команды:

$ cd ~
$ ng new angular10qrcode

CLI задаст вам несколько вопросов:

  • Хотите добавить маршрутизацию Angular? Тип y для Да, и
  • Какой формат таблицы стилей вы хотели бы использовать? Выберите CSS.

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

$ cd angular10qrcode
$ ng serve    

Откройте свой веб-браузер и перейдите к адрес, чтобы увидеть, как работает ваше приложение.

Далее откройте новый терминал и убедитесь, что вы перешли в папку вашего проекта и выполните такую ​​команду, чтобы установить ngx-qrcode библиотека с npm с помощью такой команды:

$ npm install @techiediaries/ngx-qrcode

Далее откройте src/app/app.module.ts файл и импортируйте NgxQRCodeModule от @techiediaries/ngx-qrcode в вашем модуле следующим образом:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxQRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После импорта библиотеки можно использовать файл ngx-qrcode компонент в вашем приложении Angular.

Обратите внимание, что мы также импортировали FormsModule.

Далее откройте src/app/app.component.ts файл и обновите его следующим образом:

import { Component } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value="
}

Далее откройте src/app/app.component.html файл и добавьте следующий код:

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="bshadow"></ngx-qrcode>

Мы используем различные свойства для настройки нашего QR-кода, например:

  • тип,
  • уровень исправления ошибок,
  • значение,
  • класс CSS.

Вы можете узнать больше об этих свойствах и других поддерживаемых свойствах у официальных лиц ngx-qrcode документы

Далее добавьте текстовую область для ввода значения, которое вы хотите закодировать:

<textarea [(ngModel)] = "value"></textarea>

Наконец-то откройте src/styles.css файл и добавьте следующие стили:

.bshadow {

  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(5px 5px 5px #222222);
  opacity: .5;

}

textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    opacity: .5;
}

Это скриншот нашей программы:

Скриншот-от-2020-08-06-20-26-36

Вот и мы завершили наш пример проекта Angular 10, демонстрирующего, как генерировать QR-коды.

Вы можете посетить нас на Techiediaries для учебных пособий по Angular и современные методы веб-разработки.

Вы можете проверить программу, созданную в этой статье, в прямом эфире на Stackblitz:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *