Cách xây dựng trình tạo mã QR bằng React
Mã QR (Phản hồi nhanh) là mã vạch hai chiều có thể lưu trữ và truyền tải thông tin ở định dạng mà máy có thể đọc được. Những thông tin như vậy có thể bao gồm các liên kết đến trang web của công ty, thực đơn nhà hàng, chi tiết sản phẩm hoặc trang hướng dẫn.
Công nghệ mã QR nhằm mục đích giúp các doanh nghiệp cung cấp cho người dùng của họ quyền truy cập nhanh vào thông tin, điều này có thể mang lại lợi thế cạnh tranh.
Tìm hiểu cách xây dựng trình tạo mã QR trong React với các ví dụ mã thực tế.
Mục Lục
Trước khi bắt đầu
Để xây dựng trình tạo Mã QR, bạn sẽ cần:
Bạn có thể tìm thấy dự án đã hoàn thành trên GitHub để tham khảo và khám phá thêm.
Giải thích về công nghệ mã QR
Mã QR có thể trông đơn giản và ngẫu nhiên, nhưng định dạng này có một số tính năng thông minh để chứa nhiều dữ liệu và hỗ trợ khả năng đọc.
Thiết kế và Cấu trúc
Bạn có thể quen thuộc với hình ảnh mã QR. Cái ở trên sẽ đưa bạn đến trang chủ MUO nếu bạn quét nó. Bạn có thể đã thấy các mã QR tương tự trên các gói sản phẩm, tại nhà hàng hoặc trên bảng quảng cáo.
Thiết kế của mã QR tập trung vào tính thẩm mỹ của nó, bao gồm màu sắc và kích thước, thêm biểu trưng trong mã QR, kết hợp tác phẩm nghệ thuật tùy chỉnh hoặc thường áp dụng các hiệu ứng hình ảnh khác nhau.
Mặt khác, cấu trúc của mã QR tập trung vào sự sắp xếp vật lý của các thành phần bên trong mã QR. Các yếu tố này tuân theo bố cục được xác định trước để đảm bảo giải mã phù hợp. Chúng như sau:
- mô-đun dữ liệu là các khối màu trắng và đen của mã QR được sử dụng để lưu trữ tất cả thông tin hiển thị cho người dùng.
- Mẫu mắt hoặc công cụ tìm là các ô vuông lớn ở các góc của mã QR giúp máy quét nhận dạng mã QR một cách chính xác và nhanh chóng.
- dải phân cách giúp máy quét phân biệt các mẫu công cụ tìm với dữ liệu thực tế.
- khu vực yên tĩnh là nền trắng đóng vai trò là ranh giới xung quanh mã QR. Vùng này giúp máy quét định vị các mẫu công cụ tìm.
- Đánh dấu căn chỉnh nhỏ hơn các mẫu công cụ tìm và cho phép quét mã QR ở mọi góc độ.
Mã hóa và giải mã
Cái trước đề cập đến việc chuyển đổi dữ liệu hoặc thông tin đầu vào (một URL) thành ma trận mã QR. Ngược lại, loại thứ hai đề cập đến việc trích xuất dữ liệu hoặc thông tin được lưu trữ từ mã QR bằng máy ảnh của điện thoại thông minh hoặc máy quét mã QR chuyên dụng.
Giới thiệu Thư viện mã QR
QRCode là thư viện của bên thứ ba được sử dụng để tạo mã vạch 2D. QRCode hiện là thư viện mã QR phổ biến nhất, với hơn một triệu lượt cài đặt hàng tuần và hỗ trợ cho các ứng dụng máy khách và máy chủ.
Để cài đặt QRCode trong ứng dụng React hiện có, hãy mở thiết bị đầu cuối của bạn, điều hướng đến thư mục dự án của bạn và chạy mã sau:
yarn add qrcode
Hoặc nếu bạn thích npm, hãy sử dụng:
npm i qrcode
Thiết lập dự án
Kho lưu trữ của dự án chứa hai nhánh: người bắt đầu Và cuối cùng. Bạn có thể sử dụng cái trước làm cơ sở để xây dựng dự án hoặc cái sau để xem trước bản trình diễn đã hoàn thành.
Nhân bản ứng dụng Starter
Chúng tôi đã cung cấp ứng dụng dành cho người mới bắt đầu trên GitHub với giao diện người dùng được xây dựng để giúp bạn tập trung vào việc triển khai. Mở terminal của bạn và chạy lệnh sau để sao chép nhánh khởi động của kho lưu trữ vào máy cục bộ của bạn:
git clone -b starter https://github.com/smartreviewazcode/qr-code-generator.git
Chạy lệnh terminal sau, trong thư mục dự án, để cài đặt các phụ thuộc của nó:
yarn
Hoặc:
npm install
Để khởi động ứng dụng, hãy chạy:
yarn start
Hoặc:
npm start
Tuyệt vời! Bạn sẽ thấy giao diện người dùng được hiển thị trên trình duyệt của mình:
Thực hiện logic trong các bước
Mở src/App.jsx tập tin và thay thế nội dung của nó bằng đoạn mã sau:
import { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";const App = () => {
const [url, setUrl] = useState("");
const [dataUrl, setDataUrl] = useState("");
const handleQRCodeGeneration = () => {
QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
if (err) console.error(err);
setDataUrl(dataUrl);
});
};
return (
<div className="app">
<h1>QR Code Generator</h1>
<form onSubmit={handleQRCodeGeneration}>
<input
required
type="url"
placeholder="Enter a valid URL"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
<input type="submit" value="Generate" />
</form>
{
would go here */
}
</div>
);
};
export default App;
Đoạn mã này thực hiện như sau:
- nhập khẩu Mã QR ở cấp cao nhất.
- tạo một url trạng thái để lưu trữ URL đã nhập và url dữ liệu state để lưu trữ mã QR được tạo ở dạng DataURL.
- tạo một xử lýQRCodeGeneration chức năng mũi tên, trong đó nó gọi toDataURL phương pháp của Mã QR đối tượng với các đối số sau:
- Đối số đầu tiên là URL đã nhập để mã hóa.
- Đối số thứ hai là một đối tượng tùy chọn nơi chúng tôi chỉ định chiều rộng của mã QR.
- Đối số thứ ba là hàm gọi lại trả về phiên bản dataURL của URL đã nhập.
- Gọi các xử lýQRCodeGeneration chức năng mũi tên trong hình thức phần tử khi gửi biểu mẫu.
- Cập nhật trạng thái của url với giá trị do người dùng nhập vào.
Giờ đây, bạn có thể hiển thị chế độ xem được tạo theo điều kiện trong div phần tử khi url dữ liệu thay đổi trạng thái:
{dataUrl && (
<div className="generated-view">
<img src={dataUrl} alt="qr code" />
<a href={dataUrl}
Kiểm tra ứng dụng của bạn trong trình duyệt và xác nhận rằng nó mang lại kết quả như mong đợi:
Quét mã QR an toàn
Mặc dù công nghệ mã QR nhằm mục đích giúp mọi người truy cập thông tin nhanh chóng, nhưng nó cũng tiềm ẩn một số lo ngại về bảo mật.
Bây giờ bạn đã học cách tạo mã QR trong ứng dụng React của mình, bạn nên tìm hiểu về cách quét các mã QR này một cách an toàn.