Application mobile: Comment créer/générer un code QR dans l’application Angular 12

Il s’agit d’un didacticiel angulaire étape par étape. Dans ce tutoriel, nous apprenons à générer ou créer un QR Code dans l’application Angular 12 à l’aide de angular2-qrcode une bibliothèque.

Le angular2-qrcode est un composant que vous pouvez facilement intégrer dans votre projet. Il s’appuie sur qrious pour générer des codes QR.

Dans les applications modernes, de nombreux travaux sont effectués en scannant les codes QR, qu’il s’agisse d’effectuer le paiement, de partager les données, d’obtenir les détails du produit ou de récupérer l’emplacement.

Il vous suffit de sortir le mobile de votre poche et de rester devant le scanner et le reste du travail effectué automatiquement par votre application. Il n’est pas faux de dire que les codes QR sont devenus la partie essentielle de nos vies.

En ce qui concerne la compatibilité, les codes QR sont donc pris en charge par toutes les principales plates-formes telles que iOS, Android et Windows.

Un code QR (code à réponse rapide) est un type de code-barres matriciel (ou code-barres bidimensionnel) conçu pour la première fois en 1994 pour l’industrie automobile japonaise. Un code-barres est une étiquette optique lisible par machine qui contient des informations sur l’article auquel elle est attachée. En pratique, les codes QR contiennent souvent des données pour un localisateur, un identifiant ou un tracker qui pointe vers un site Web ou une application.
– Wikipédia

Cet article vous aide à créer une application Angular à partir de zéro et vous explique comment implémenter des codes QR dans l’application Angular. Nous convertirons les données fournies par l’utilisateur en code QR. Alors restez avec nous jusqu’à la fin de ce tutoriel.

Créer une application angulaire

Pour travailler sur l’application Angular QR Code, vous devez avoir installé angular cli sur votre machine de développement.

npm install -g @angular/cli

Assurez-vous sur quelle version angulaire vous travaillez.

ng --version

Créer une nouvelle application angulaire est super facile ; il suffit d’une seule ligne de commande :

ng new angular-qr-code-app-example

Répondez à quelques questions CLI :


Accédez à la racine du projet :

cd angular-qr-code-app-example

Installer le module de code QR angulaire 12

Eh bien, ce tutoriel est incomplet sans installer le angular2-qrcode une bibliothèque. Pour installer le package qrcode Angular 2 en angulaire, exécutez la commande ci-dessous.

npm install angular2-qrcode

Importer et enregistrer QRCodeModule dans le module d’application

En général, pour générer les codes QR à l’aide du module angular2-qrcode, nous devons importer et enregistrer QRCodeModule package dans le fichier principal du module d’application d’angular.

De plus, nous importerons le FormulairesModule pour interagir avec les éléments d’entrée du formulaire HTML.

Ajoutez le code dans app.module.ts déposer.



import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { QRCodeModule } from 'angular2-qrcode';
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QRCodeModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implémenter le générateur de code QR dans Angular 10

Tous grêle au composant angular2-qrcode, vous pouvez très rapidement implémenter le générateur de code QR en angulaire en ajoutant simplement le qr-code> attribut.

<qr-code [value]="'www.positronx.io'">qr-code>

Certaines propriétés de code QR

Le QR Code offre différentes propriétés qui peuvent être associées à qr-code> directif.

valeur: Le type de propriété prend une valeur String et convertit String en code QR ; La valeur par défaut est « .

Taille: Cette propriété définit la hauteur et la largeur du composant de code QR, le type d’accessoire est un nombre et la valeur par défaut est définie sur 100.

niveau: Le type d’accessoire est une chaîne ; la valeur par défaut est définie sur L principalement utilisée pour le niveau de correction QR (« L », « M », « Q », « H »).

Contexte: Le type d’accessoire est une chaîne ; la valeur par défaut est le blanc. Principalement utilisé pour configurer la couleur d’arrière-plan.

backgroundAlpha : Il permet de définir l’opacité du fond, définie sous forme numérique, et la valeur par défaut est 1.0.

premier plan: Utilisé pour ajuster la couleur de premier plan, le type de propriété est Chaîne et la valeur par défaut est le noir.

premier planAlpha : Définit l’opacité du premier plan. La valeur par défaut est 1,0 et est définie sous forme numérique.

mime: Le type de valeur est String, utilisé pour configurer le type MIME pour l’image de sortie. De plus, la valeur par défaut est image/png.

rembourrage: Configure principalement le rembourrage dans le code QR ; le nombre est le type de propriété avec la valeur par défaut définie sur null.

Toile: Le type de valeur est booléen et utilisé pour la sortie d’un élément canvas s’il est défini sur true. Cependant, la valeur par défaut est définie sur false.

Stocker les données JSON dans le code QR

Dans cette étape, nous allons apprendre à inclure des données JSON dans le composant QR Code à l’aide du JSON.stringify() méthode et QR Code composant.



import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  data = [{
    'name': 'John Doe',
    'profile': 'Software Developer',
    'email': 'john@doe.com',
    'hobby': 'coding'
  }]

  dataToString = JSON.stringify(this.data);

}

Vous pouvez inclure le code dans app.component.html déposer.

<qr-code [value]="dataToString" size="300">qr-code>

Générer un QR-Code dynamique dans Angular

Voici la version rapide intégrée aux propriétés des codes QR pour mettre à jour dynamiquement les valeurs des composants du code QR dans Angular.

Placez le code suivant dans app.component.html déposer.

<h2>Dynamically Update QR Code Valuesh2>

<div>QR Code: {{ qrCodeVal }}div>
<div>Level: {{ level }}div>
<div>Width: {{ width }}div>

<br />
<br />

<div>
  <qr-code [value]="qrCodeVal" [size]="width" [level]="level">qr-code>
div>

<h4>Change QR Code Infoh4>
<label>
  Update name string: <input [(ngModel)]="qrCodeVal" placeholder="name" />
label>
<br />
<br />

<button (click)="updateQrInfo('John Doe')">Update to "John Doe"button>
<button (click)="updateQrInfo('Ryan Duff')">Update to "Ryan Duff"button>
<button (click)="updateQrInfo('Jerry Maguire')"> update to "Jerry Maguire"button>

<br />
<br />
<strong>Update Widthstrong>: 
<button (click)="updateWidth(500)">500button>
<button (click)="updateWidth(400)">400button>
<button (click)="updateWidth(300)">300button>
<button (click)="updateWidth(200)">200button>

<br />
<br />
<strong>Update Levelstrong>: 
<button (click)="updateLevel('L')">Lbutton>
<button (click)="updateLevel('M')">Mbutton>
<button (click)="updateLevel('Q')">Qbutton>
<button (click)="updateLevel('H')">Hbutton>

Incorporez le code ci-dessous dans app.component.html déposer.


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public qrCodeVal: string = null;
  public level: "L" | "M" | "Q" | "H";
  public width: number;

  constructor() {
    this.level = "L";
    this.qrCodeVal = "QR code string value";
    this.width = 200;
  }

  updateLevel(newValue: "L" | "M" | "Q" | "H") {
    this.level = newValue;
  }

  updateQrInfo(newValue: string) {
    this.qrCodeVal = newValue;
  }

  updateWidth(newValue: number) {
    this.width = newValue;
  }
}

Ensuite, lancez la commande suivante pour tester l’application :

ng serve --open

Finalement, nous avons terminé le didacticiel du générateur de code QR Angular 12 avec un exemple, j’espère que vous aimerez ce didacticiel. Vous pouvez également télécharger le code complet de ce tutoriel depuis GitHub.

#Comment #créergénérer #code #dans #lapplication #Angular