paint-brush
Cách xây dựng trình tạo mã QR trong Reacttừ tác giả@terieyenike
57,685 lượt đọc
57,685 lượt đọc

Cách xây dựng trình tạo mã QR trong React

từ tác giả Teri Eyenike8m2022/07/01
Read on Terminal Reader
Read this story w/o Javascript

dài quá đọc không nổi

Ý tưởng đằng sau việc tạo trình tạo mã phản hồi nhanh (QR) là dịch dữ liệu từ hình ảnh sang văn bản. Mã QR chỉ đơn giản là biểu diễn dữ liệu hình ảnh dưới dạng văn bản và nó có rất nhiều ứng dụng hữu ích từ thực đơn nhà hàng và vé xem hòa nhạc, đến lời mời trên lịch trực tuyến, thanh toán và danh sách tiếp tục.

Company Mentioned

Mention Thumbnail
featured image - Cách xây dựng trình tạo mã QR trong React
Teri Eyenike HackerNoon profile picture

Ý tưởng đằng sau việc tạo trình tạo mã phản hồi nhanh (QR) là dịch dữ liệu từ hình ảnh sang văn bản. Mã QR chỉ đơn giản là biểu diễn dữ liệu hình ảnh dưới dạng văn bản và nó có rất nhiều ứng dụng hữu ích từ thực đơn nhà hàng và vé xem hòa nhạc, đến lời mời trên lịch trực tuyến, thanh toán và danh sách tiếp tục.

Trong hướng dẫn này, bạn sẽ học cách tạo mã QR bằng thư viện JavaScript, React. Lợi ích của việc sử dụng React là nó làm cho việc xây dựng các ứng dụng giao diện người dùng trở nên dễ dàng vì nó cung cấp cho các nhà phát triển cách sử dụng lại các thành phần.

Để làm theo hướng dẫn này, những điều sau đây sẽ được đề cập đến:

  • Điều kiện tiên quyết
  • Bắt đầu
  • Tạo trình tạo mã QR
  • Tạo kiểu cho ứng dụng mã QR
  • Tải xuống mã QR đã tạo
  • Sự kết luận
  • Tài nguyên

Thử nghiệm

Điều kiện tiên quyết

Để hoàn thành hướng dẫn này, bạn cần những điều sau:

  • Hiểu biết cơ bản về React.js

Bắt đầu

Trước khi viết một dòng mã, hãy mở thiết bị đầu cuối của bạn và chạy lệnh sau:

 npx create-react-app qrcode-generator

Lệnh trên tạo các tệp và cài đặt một số gói cần thiết để tạo ứng dụng React.

Tiếp theo, điều hướng đến thư mục dự án và chạy máy chủ phát triển có thể truy cập trên

 http://localhost:3000
sử dụng lệnh bên dưới để xem trước ứng dụng trong trình duyệt:

 cd qrcode-generator npm start

Cuối cùng, hãy cài đặt thư viện phụ thuộc cần thiết để tạo trình tạo mã QR. Chạy lệnh:

 npm install qrcode.react

 qrcode.react
: Một thành phần React để tạo mã QR để hiển thị với DOM.

Tạo trình tạo mã QR

Công việc tuyệt vời cho đến nay!

Việc tạo trình tạo mã QR sẽ bắt đầu bằng việc tạo các tệp và thành phần chứa cấu trúc của mã QR. Bên trong thư mục src, tạo một thư mục có tên là các thành phần và một tệp có tên QrCode.js trong thư mục.

Sao chép và dán mã sau:

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

Các đoạn mã ở trên thực hiện những việc sau:

  • Nhập khẩu
     useState
    được sử dụng để khai báo trạng thái ban đầu của biến, url được đặt thành một chuỗi rỗng và
     setState
    hàm số,
     setUrl
    được sử dụng để cập nhật trạng thái
  • Thư viện,
     qrcode.react
    , được sử dụng để hiển thị mã QR đã tạo
  • Tiếp theo, việc sử dụng
     downloadQRCode
    chức năng gắn liền với
     onSubmit
    phương pháp của
     <form>
    vì điều này được kích hoạt bởi sự kiện gửi
  • Trên
     <input>
    phần tử,
     onChange
    trình xử lý sự kiện với hàm
     'qrCodeEncoder'
    nhận đầu vào của người dùng, nhận giá trị của nó và thay đổi mã QR với mỗi đầu vào mới được nhập
  • Một biến số
     qrcode
    được tạo ra. Nó có trong
     QRCodeCanvas
    và chuyển một số lời nhắc có sẵn để tùy chỉnh và làm cho mã QR hiển thị trên trình duyệt. Xem tài liệu để tìm hiểu thêm về cách sử dụng đạo cụ trong thành phần
  • cuối cùng
     <button>
    phần tử bị vô hiệu hóa cho đến khi đầu vào của người dùng nhận được dữ liệu

Tạo kiểu cho ứng dụng mã QR

bên trong

 src
thư mục, tạo biểu định kiểu,
 styles.css
chịu trách nhiệm về sự hấp dẫn trực quan của ứng dụng

Sao chép và dán mã sau:

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

Tiếp theo, nhập tệp QrCode.js và biểu định kiểu vào điểm nhập của ứng dụng, App.js:

 // src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) {  return (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

Với các bước hoàn tất, ứng dụng sẽ trông như thế này:

Tải xuống mã QR đã tạo

Tùy chọn để người dùng tải xuống mã QR đã tạo giúp nó hữu ích trong nhiều trường hợp sử dụng. Từ việc in mã đến nhúng mã trên trang web, các trường hợp sử dụng là không giới hạn.

Quay lại

 components/QrCode.js
tệp, hãy cập nhật cơ sở mã để sử dụng
 refs
để truy cập các nút của mô hình đối tượng tài liệu (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;

Bây giờ, hãy cập nhật

 downloadQRCode
chức năng trong
 QrCode.js
để có thể nhấp vào nút tải xuống mã QR và lưu canvas dưới dạng tệp hình ảnh.

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

bên trong

 downloadQRCode
chức năng, sau đây diễn ra:

  • Nó tham chiếu giá trị hiện tại của đối tượng ref với thuộc tính .current để biết khi nào nút thay đổi
  • Các
     qrcode.react
    thành phần tạo ra phần tử canvas trong DOM, cung cấp cho bạn khả năng tạo nội dung động
  • Canvas được nối vào
     toDataURL
    phương thức với tham số kiểu đã chỉ định được đặt thành định dạng tệp,
     image/png
  • Tiếp theo, mỏ neo,
     <a>
    phần tử được tạo và
     href
    được đặt thành hình ảnh tải xuống mã QR khi nút được nhấp vào
  • Phần tử liên kết được nối vào nội dung tài liệu và khi mã QR được tải xuống, nó sẽ bị xóa
  • Cuối cùng, url trạng thái được cập nhật với
     setUrl
    biến xóa đầu vào cho mã QR được tạo khi biểu mẫu được gửi

Mã hoàn chỉnh cho thành phần 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;

Kết quả cuối cùng của ứng dụng sẽ giống như sau:

Sự kết luận

Hướng dẫn này mô tả quy trình tạo trình tạo mã QR và cách tải xuống để sử dụng sau này.

Tài nguyên