ساخت QR Code در انگولار

توی این مقاله قصد دارم به کمک انگولار یک QR Code بسازم.اما اول از همه باید بدونیم QR چیه و چه هدفی دنبال می کنه؟ بر طبق اسناد ویکی پدیا QR کد نوعی بارکد ماتریسی (یا بارکد دو بعدی) هستش که اغلب حاوی داده های هستش که به یک وبسایت اشاره میکنه و از چهار حالت رمزگذاری استاندارد (numeric, alphanumeric, byte/binary, and kanji) برای ذخیره سازی کارآمد داده استفاده می کنه.به زبان ساده ، QR کد، یک روش فشرده و کارآمد برای ذخیره اطلاعات هستش. حالا بیاین قدم به قدم بریم جلو تا ببینیم که چطور میشه یه QR کد ساخت :

قدم اول _ انگولار CLI نصب کنید

$ npm install -g @angular/cli

قدم دوم _ یک پروژه جدید بسازید

$ ng new angular10qrcode

قدم سوم _ npm ngx-qrcode نصب کنید

$ npm install @techiediaries/ngx-qrcode

قدم چهارم _ توی AppModule ماژول بارکد معرفی کنید

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 { }

قدم پنجم _ app.component.ts خودتون اصلاح کنید

به سراغ فایل app.component.ts برید و در اونجا این کدهای 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 = 'https://www.techiediaries.com/';
}

قدم ششم _ app.component.html خودتون تغییر بدید

<ngx-qrcode
  [elementType]=&quotelementType&quot
  [errorCorrectionLevel]=&quotcorrectionLevel&quot
  [value]=&quotvalue&quot
  cssClass=&quotbshadow&quot></ngx-qrcode>

اگه خواستید می تونید از یه تگ textarea هم برای تغییر آدرس سایت و تغییر QR Code استفاده کنید.

<textarea [(ngModel)] = &quotvalue&quot></textarea>

من سعی کردم 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;
}

خب اینم از نتیجه کار :

به انتهای این مقاله رسیدیم ، امیدوارم تونسته باشم مقاله مفیدی توی چند قدم به شما آموزش داده باشم.

ممنون از توجهتون :)