Header Ads Widget

Ticker

6/recent/ticker-posts

Genere códigos QR en Angular 10 con Ngx-qrcode2

 En este tutorial, aprenderemos cómo generar códigos QR en Angular construyendo una aplicación de ejemplo simple usando la última versión de Angular 10.

En primer lugar, ¿qué es un código QR y para qué sirve?

Según Wikipedia :

Un código QR (abreviado de Quick Response code) es un tipo de código de barras de matriz (o código de barras bidimensional) diseñado por primera vez en 1994 para la industria automotriz en Japón. Un código de barras es una etiqueta óptica legible por máquina que contiene información sobre el artículo al que está adherido. En la práctica, los códigos QR a menudo contienen datos para un localizador, identificador o rastreador que apunta a un sitio web o aplicación. Un código QR utiliza cuatro modos de codificación estandarizados (numérico, alfanumérico, byte / binario y kanji) para almacenar datos de manera eficiente.

El sistema Quick Response se hizo popular fuera de la industria automotriz debido a su rápida legibilidad y mayor capacidad de almacenamiento en comparación con los códigos de barras UPC estándar. Las aplicaciones incluyen seguimiento de productos, identificación de artículos, seguimiento del tiempo, gestión de documentos y marketing general.

Por tanto, es simplemente una forma compacta y eficiente de almacenar datos.

Ahora veamos cómo generar códigos QR en sus aplicaciones Angular 10 por ejemplo.

Prerrequisitos

Antes de comenzar, necesita algunos requisitos previos:

  • Conocimientos básicos de TypeScript. En particular, la familiaridad con conceptos orientados a objetos como clases y decoradores de TypeScript.
  • Una máquina de desarrollo local con Node 10+ , junto con NPM 6+ instalado. La CLI de Angular requiere un nodo como la mayoría de las herramientas frontend en la actualidad. Simplemente puede ir a la página de descargas del sitio web oficial y descargar los binarios para su sistema operativo. También puede consultar las instrucciones específicas de su sistema sobre cómo instalar Node usando un administrador de paquetes. Sin embargo, la forma recomendada es usar NVM - Node Version Manager - un script bash compatible con POSIX para administrar múltiples versiones activas de Node.js.

Nota : Si no desea instalar un entorno local para el desarrollo de Angular pero aún desea probar el código en este tutorial, puede usar Stackblitz , un IDE en línea para el desarrollo de frontend que puede usar para crear un proyecto Angular compatible con Angular. CLI.

Paso 1: instalación de Angular CLI 10

En este paso, instalaremos la última versión de Angular CLI 10 (en el momento de escribir este tutorial).

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Para instalarlo, abra una nueva interfaz de línea de comandos y ejecute el siguiente comando:

$ npm install -g @angular/cli

En el momento de escribir este tutorial, angular / cli v10 estará instalado en su sistema.

Paso 2: creación de una nueva aplicación de Angular 10

Creemos ahora nuestro proyecto. Regrese a su interfaz de línea de comandos y ejecute los siguientes comandos:

$ cd ~
$ ng new angular10qrcode

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo local usando los siguientes comandos:

$ cd angular10qrcode
$ ng serve    

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

A continuación, abra una nueva terminal y asegúrese de navegar a la carpeta de su proyecto y ejecutar el siguiente comando para instalar la ngx-qrcodebiblioteca desde npm usando el siguiente comando:

$ npm install @techiediaries/ngx-qrcode

A continuación, abra el src/app/app.module.tsarchivo e importe NgxQRCodeModuledesde @techiediaries/ngx-qrcodesu módulo de la siguiente manera:

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

Una vez que se ha importado la biblioteca, puede usar el ngx-qrcodecomponente en su aplicación Angular.

Tenga en cuenta que también hemos importado FormsModule.

A continuación, abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

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/';
}

A continuación, abra el src/app/app.component.htmlarchivo y agregue el siguiente código:

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

Usamos varias propiedades para configurar nuestro código QR como:

  • el tipo,
  • el nivel de corrección de errores,
  • el valor,
  • la clase CSS.

Puede encontrar más información sobre estas propiedades y las otras propiedades admitidas en los ngx-qrcodedocumentos oficiales .

A continuación, agregue un área de texto para ingresar el valor que desea codificar:

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

Finalmente abra el src/styles.cssarchivo y agregue los siguientes estilos:

.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;
}

Esta es una captura de pantalla de nuestra aplicación:

Códigos QR angulares 10

Publicar un comentario

0 Comentarios