Tạo Máy Phát QR Code Đầy Đủ Từ MERN với GraphQL & MongoDB (Không Cần API Bên Ngoài!)

Bạn đã bao giờ cần tạo một mã QR cho một URL nhưng không muốn phụ thuộc vào các API bên ngoài chưa? Trong bài viết này, tôi sẽ hướng dẫn bạn xây dựng một dịch vụ tạo mã QR sử dụng công nghệ MERN (MongoDB, Express, React, Node.js) và GraphQL mà không cần đến bất kỳ API nào. Dưới đây là cách tôi đã thực hiện để phục vụ cho đám cưới của mình, nơi mà khách mời có thể quét mã QR để truy cập vào trang chia sẻ hình ảnh.

🎯 Mục Tiêu Dự Án

Mục tiêu của dự án là tạo ra một dịch vụ chuyển đổi URL thành mã QR, lưu trữ mã QR trong MongoDB và phục vụ nó cho frontend qua GraphQL mà không cần đến API bên ngoài.

🧱 Công Nghệ Sử Dụng

• Frontend: Next.js 14+ với TypeScript, TailwindCSS, Apollo Client
• Backend: Node.js, Express, Apollo Server (GraphQL), MongoDB
• Extras: Hình ảnh mã QR Base64, mô hình Mongoose, schema/resolvers GraphQL

🗂️ Phân Tích Tính Năng

Dưới đây là các tính năng mà chúng ta sẽ triển khai trong dự án:

• Mở issue cho tính năng mã QR
• Tạo mô hình Mongoose: QRCode.ts
• Thêm các loại QRCode vào schema GraphQL
• Triển khai QRCodeService.ts:
  • generateQRCode
  • getQRCodeByUrl
  • getAllQRCodes
• Tạo qrCodeTypes cho GraphQL
• Xây dựng resolvers cho GraphQL
• Xây dựng giao diện frontend: app/qr-code/page.tsx

🧠 Lựa Chọn Thiết Kế

Tại Sao Chọn Mã QR Base64?

• ✅ Nhúng trực tiếp vào <img src="..."/>
• ✅ Dễ dàng gửi qua email hoặc in
• ✅ Không cần tải lên tệp hay cấu hình S3
• ✅ Bảo mật và đơn giản

🧪 Ví Dụ Mutation

mutation GenerateQRCode($input: QRCodeInput!) {
  generateQRCode(input: $input) {
    id
    url
    qrCodeData
    format
    size
    createdAt
    updatedAt
  }
}

Biến:

{
  "input": {
    "url": "https://weddingln.com/memory-lane",
    "size": 300
  }
}

📥 Ví Dụ Query

query GetQRCodeByUrl($url: String!) {
  qrCode(url: $url) {
    id
    url
    qrCodeData
    format
    size
    createdAt
    updatedAt
  }
}

Biến:

{
  "url": "https://weddingln.com/memory-lane"
}

🖼️ Tích Hợp Frontend

<img src="data:image/png;base64,{qrCodeData}" alt="Mã QR Chia Sẻ Tình Yêu" />

🚀 Kết Quả

Chúng ta đã có một dịch vụ mã QR đáng tin cậy và có thể tùy chỉnh cho dự án đám cưới của mình. Khách mời có thể quét mã QR và được chuyển hướng đến trang chia sẻ tình yêu.

🛠️ Tài Liệu Tham Khảo & Động Lực

Trước khi bắt đầu với tính năng mã QR này, tôi đã tìm kiếm các công cụ trực tuyến — những trình tạo mã QR “miễn phí”. Nhưng rất nhanh tôi nhận ra các vấn đề:

• Các chi phí ẩn để chỉnh sửa hoặc theo dõi mã QR
• Liên kết được lưu trữ có thể hết hạn hoặc chuyển hướng qua các miền của họ
• Quảng cáo và thương hiệu không thể xóa bỏ

Thay vì phụ thuộc vào điều gì đó quan trọng này, tôi đã xây dựng nó vào trong hệ thống của mình:

• 🧠 Tích hợp hoàn toàn vào kiến trúc MERN + GraphQL
• 🔒 Lưu trữ trực tiếp trong MongoDB
• 🖨️ Nhúng qua Base64, không cần lưu trữ tệp
• 💡 Được cung cấp bởi gói qrcode npm
• 🧪 Dễ dàng kiểm tra, tái sử dụng và mã nguồn mở

🧠 Bài Học Rút Ra

• MERN + GraphQL cho phép tạo ra các API sạch sẽ, mô-đun
• Sử dụng Base64 giúp đơn giản hóa việc xử lý tệp
• Mongoose & Apollo Server = một cặp đôi mạnh mẽ
• Lập kế hoạch trước (theo dõi vấn đề, lớp dịch vụ) sẽ mang lại kết quả tốt

💬 Câu Hỏi?

Bạn có ý kiến, ý tưởng hoặc muốn sử dụng điều này trong dự án của mình? Hãy kết nối — để lại một bình luận hoặc tin nhắn!