Ý 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
- Node> = 14.0.0 và npm> = 5.6 được cài đặt trên máy cục bộ của bạn
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-generatorLệ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 startCuố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
đượ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àuseState
hàm số,setState
được sử dụng để cập nhật trạng tháisetUrl - Thư viện,
, được sử dụng để hiển thị mã QR đã tạoqrcode.react
- Tiếp theo, việc sử dụng
chức năng gắn liền vớidownloadQRCode
phương pháp củaonSubmit
vì điều này được kích hoạt bởi sự kiện gửi<form> - Trên
phần tử,<input>
trình xử lý sự kiện với hàmonChange
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'qrCodeEncoder'
- Một biến số
được tạo ra. Nó có trongqrcode
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ầnQRCodeCanvas
- cuối cùng
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<button>
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ụngSao 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
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 độngqrcode.react
- Canvas được nối vào
phương thức với tham số kiểu đã chỉ định được đặt thành định dạng tệp,toDataURLimage/png
- Tiếp theo, mỏ neo,
phần tử được tạo và<a>
được đặt thành hình ảnh tải xuống mã QR khi nút được nhấp vàohref
- 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
biến xóa đầu vào cho mã QR được tạo khi biểu mẫu được gửisetUrl
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.
