La idea detrás de la creación de un generador de código de respuesta rápida (QR) es traducir datos de imágenes a texto. Un código QR es simplemente la representación de datos de imágenes como texto, y tiene muchas aplicaciones útiles, desde menús de restaurantes y entradas para conciertos, hasta invitaciones de calendario en línea, pagos, y la lista continúa.
En este tutorial, aprenderá cómo crear un código QR utilizando la biblioteca de JavaScript, React. El beneficio de usar React es que hace que la creación de aplicaciones frontend sea muy sencilla, ya que proporciona a los desarrolladores formas de reutilizar componentes.
Para seguir este tutorial, se cubrirá lo siguiente:
- requisitos previos
- Empezando
- Creación de un generador de códigos QR
- Diseñar la aplicación de código QR
- Descarga del código QR generado
- Conclusión
- Recursos
Manifestación
requisitos previos
Para completar este tutorial, necesita lo siguiente:
- Comprensión básica de React.js
- Nodo >= 14.0.0 y npm >= 5.6 instalado en su máquina local
Empezando
Antes de escribir una línea de código, abre tu terminal y ejecuta el siguiente comando:
npx create-react-app qrcode-generatorEl comando anterior crea andamios en los archivos e instala algunos paquetes necesarios para crear la aplicación React.
A continuación, navegue hasta el directorio del proyecto y ejecute el servidor de desarrollo al que se puede acceder en
http://localhost:3000 usando el siguiente comando para obtener una vista previa de la aplicación en el navegador: cd qrcode-generator npm startFinalmente, instalemos la biblioteca de dependencias requerida para crear el generador de códigos QR. Ejecute el comando:
npm install qrcode.react qrcode.react : un componente de React para generar códigos QR para renderizar al DOM.Creación de un generador de código QR
¡Gran trabajo hasta ahora!
La creación del generador de códigos QR comenzará con la creación de los archivos y componentes que contendrán la estructura del código QR. Dentro del directorio src, cree una carpeta llamada components y un archivo llamado QrCode.js en la carpeta.
Copia y pega el siguiente código:
// src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const downloadQRCode = ( e ) => { e.preventDefault(); setUrl( "" ); }; const qrCodeEncoder = ( e ) => { setUrl(e.target.value); }; const qrcode = ( < QRCodeCanvas
id = "qrCode"
value = {url}
size = {300}
bgColor = { "# 00ff00 "} level = { " H "} />
); return ( < div className = "qrcode__container" >
< div > {qrcode} </ div >
< div className = "input__group" >
< form onSubmit = {downloadQRCode} >
< label > Enter URL </ label >
< input
type = "text"
value = {url}
onChange = {qrCodeEncoder}
placeholder = "https://hackernoon.com"
/>
< button type = "submit" disabled = {!url} >
Download QR code </ button >
</ form >
</ div >
</ div >
); }; export default QrCode;Los fragmentos de código anteriores hacen lo siguiente:
- Importar
se utiliza para declarar el estado inicial de la variable, url que se establece en una cadena vacía, y eluseState
función,setState
utilizado para actualizar el estadosetUrl - La biblioteca,
, se utiliza para representar el código QR generadoqrcode.react
- A continuación, el uso de la
función adjunta a ladownloadQRCode
metodo de laonSubmit
elemento ya que esto es activado por el evento de envío<form> - Sobre el
elemento, el<input>
controlador de eventos con la funciónonChange
toma la entrada de los usuarios, obtiene su valor y cambia el código QR con cada nueva entrada escrita'qrCodeEncoder'
- Una variable
es creado. Toma en elqrcode
componente y pasa algunas indicaciones disponibles que personalizan y hacen que el código QR sea visible en el navegador. Consulte la documentación para obtener más información sobre el uso de accesorios en el componente.QRCodeCanvas
- Finalmente, el
el elemento está deshabilitado hasta que la entrada del usuario recibe datos<button>
Diseñar la aplicación de código QR
En el
src carpeta, crea la hoja de estilo, styles.css responsable del atractivo visual de la aplicaciónCopia y pega el siguiente código:
/* src/styles.css */
*, *:before, *:after { margin: 0 ; padding : 0 ; box-sizing : border-box; } :root { -- font - color : 230 35% 7% ; } body { color : hsl ( var (--font-color)); } img { max-width : 100% ; display : block; } .section { padding : 2em 0 ; display : flex; min-height : 100vh ; align-items : center; } .container { margin -inline: auto; max-width : 75rem ; width : 85% ; } .input__group { display : flex; margin-top : 2em ; } input { width : 100% ; padding : 1em 0.75em ; border : 1px solid #444343 ; border-radius : 3px ; margin-bottom : 2em ; margin-top : 0.75em ; } button { border : unset; background : hsl ( 231 , 77% , 90% ); padding : 1em 0.75em ; color : hsl ( var (--font-color)); cursor : pointer; text-transform : uppercase; font-weight : bold; } @media screen and ( min-width : 768px ) { .section { padding : 0 ; } input { margin : 0 ; } .qrcode__container { display : flex; align-items : center; } .input__group { margin-left : 3em ; } input { margin-bottom : 2em ; margin-top : 0.75em ; font-size : 1rem ; } }A continuación, importe el archivo QrCode.js y la hoja de estilo en el punto de entrada de la aplicación, App.js:
// src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) { return ( < div className = "section container" >
< QrCode />
</ div >
); }Con los pasos completos, la aplicación debería verse así:
Descarga del código QR generado
La opción para que los usuarios descarguen el código QR generado lo hace útil en una amplia variedad de casos de uso. Desde imprimir el código hasta incrustarlo en un sitio web, los casos de uso son ilimitados.
Regreso en el
components/QrCode.js archivo, actualicemos el código base para usar refs para acceder a los nodos del modelo de objeto de documento (DOM). // src/components/QrCode.js
import { useState, useRef } from "react" ; // other import
const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); // include this: call the useRef function
... const qrcode = ( < QRCodeCanvas
id = "qrCode"
value = {url}
size = {300}
bgColor = { "# 00ff00 "} level = { " H "} />
); return ( < div className = "qrcode__container" >
< div ref = {qrRef} > {qrcode} </ div > {/* include this */} {/* form input container */} </ div >
); }; export default QrCode;Ahora, actualicemos el
downloadQRCode función en el QrCode.js archivo para poder hacer clic en el botón de descarga del código QR y guardar el lienzo como un archivo de imagen. // src/components/QrCode.js
// imports
const QrCode = () => { // state
// useRef
const downloadQRCode = ( e ) => { e.preventDefault(); let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ; document .body.appendChild(anchor); anchor.click(); document .body.removeChild(anchor); setUrl( "" ); }; ... return ( < div className = "qrcode__container" >
< div ref = {qrRef} > {qrcode} </ div >
{/* form input container */} </ div >
); }; export default QrCode;En el
downloadQRCode función, ocurre lo siguiente:- Hace referencia al valor actual del objeto ref con la propiedad .current para saber cuándo cambia el nodo
- los
El componente produce el elemento de lienzo en el DOM que le brinda la capacidad de crear contenido dinámicamenteqrcode.react
- El lienzo se adjunta a la
método con el parámetro de tipo especificado establecido en el formato de archivo,toDataURLimage/png
- A continuación, el ancla,
se crea el elemento y el<a>
se establece en la imagen que descarga el código QR cuando se hace clic en el botónhref
- El elemento de anclaje se adjunta al cuerpo del documento y, una vez que se descarga el código QR, se elimina
- Finalmente, la URL del estado se actualiza con el
variable que borra la entrada del código QR generado a medida que se envía el formulariosetUrl
El código completo para el componente QrCode.js:
import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); const downloadQRCode = ( e ) => { e.preventDefault(); let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ; document .body.appendChild(anchor); anchor.click(); document .body.removeChild(anchor); setUrl( "" ); }; const qrCodeEncoder = ( e ) => { setUrl(e.target.value); }; const qrcode = ( < QRCodeCanvas
id = "qrCode"
value = {url}
size = {300}
bgColor = { "# 00ff00 "} level = { " H "} />
); return ( < div className = "qrcode__container" >
< div ref = {qrRef} > {qrcode} </ div >
< div className = "input__group" >
< form onSubmit = {downloadQRCode} >
< label > Enter URL </ label >
< input
type = "text"
value = {url}
onChange = {qrCodeEncoder}
placeholder = "https://hackernoon.com"
/>
< button type = "submit" disabled = {!url} >
Download QR code </ button >
</ form >
</ div >
</ div >
); }; export default QrCode;El resultado final de la aplicación debería verse así:
Conclusión
Este tutorial describió el proceso de creación de un generador de códigos QR y cómo se puede descargar para su uso posterior.
