Tạo mã QR code trong trang web với gem rqrcode_png

QR code là gì?

Mã QR (QR code) là một mã ma trận (matrix-barcode) hay mã vạch hai chiều. Chữ "QR" xuất phát từ "Quick Response", nghĩa là đáp ứng nhanh, vì người tạo ra nó có ý định cho phép mã được giải mã ở tốc độ cao. QRcode có thể được đọc bởi một máy đọc mã vạch hay smartphone (điện thoại thông minh) có chức năng chụp ảnh (camera) với ứng dụng chuyên biệt để quét mã vạch.

Ngày nay, mã QR đang ngày càng trở nên phổ biến hơn do nó có thể biểu diễn một chuỗi kí tự dài một cách nhanh chóng và thuận tiện, Một mã QRcode có thể chứa đựng thông tin một địa chỉ web (URL), thời gian diễn ra một sự kiện, thông tin liên hệ (như vCard), địa chỉ email, tin nhắn SMS, nội dung ký tự văn bản hay thậm chí là thông tin định vị vị trí địa lý và cả hình ảnh.

Với việc sử dụng gem rqrcode_png trong Rails, bạn có thể tạo và lưu trữ QR code một cách nhanh chóng và dễ dàng. Sau đây chúng ta sẽ cùng tìm hiều cách sử dụng gem này nhé (honho)

Trước hết bạn cần add gem vào Gemfile:

gem 'rqrcode_png'

Sau đó chạy bundle install.

Bạn có thể xem thêm thông tin về gem rqrcode_png tại đây.

Ok, giờ bạn có thể bắt đầu sử dụng rqrcode_png rồi!

Tại file controller muốn sử dụng QR code, ta thêm dòng sau vào đầu file:

require 'rqrcode_png'

Ở ví dụ này, mình sẽ add vào controller "StaticPages", sử dụng ở action home, với chuỗi mã hóa là "Hello! I'm QR code".

class StaticPagesController < ApplicationController
  require "rqrcode_png"
  def home
    @qr = RQRCode::QRCode.new("Hello! I'm QR code")
      .to_img.resize(100, 100).to_data_url
  end
end

Hàm to_data_url sẽ convert ảnh QR kích cỡ 100x100 thành một chuỗi mã hóa base64 có thể sử dụng được trong thẻ image_tag của Rails.

Ở view index của controller tương ứng, ta có thể truyền biến @qr vào thẻ image để hiển thị như sau:

<%= image_tag @qr %>

Không có khó khăn gì, chúng ta nhận được hình ảnh QR tương ứng với câu trên, (yeah)

Ngoài ra, gem rqrcode_png có thể kết hợp với gem DragonFly (các bạn có thể xem cách sử dụng gem DragonFly tại đây.

Ta có ví dụ sau:

# app/models/product.rb
class Product < ActiveRecord::Base
  dragonfly_accessor :qr_code
end

Tạo QR code và lưu lại:

# create qr code
qr_code_img = RQRCode::QRCode.new("Hello! I'm QR code", size: 14,
  level: :h ).to_img
@product.update_attribute :qr_code, qr_code_img.to_string

Tại controller show của product, tìm @product có QR code

# app/controllers/products.rb
def show
    @product = Product.find(params[:id])
end

sau đó truyền vào thẻ image ở view như ví dụ trên:

# app/views/products/show.html.erb
<%= image_tag @product.qr_code.url %>

Có một lưu ý nhỏ, ảnh QR code của gem mặc định là đen và trắng, gem rqrcode_png sử dụng chunky_png để generate ảnh. Do đó nếu bạn muốn thay đổi màu sắc của ảnh mã hóa (ví dụ là trắng và xanh), bạn có thể overide hàm render ở file: rqrcode_png/lib/rqrcode_png/image.rb và đổi hằng số BLACK thành BLUE, với hằng số BLUE là BLUE = ::ChunkyPNG::Color::PREDEFINED_COLORS[:blue]

Hàm render trong image.rb:

    # Returns an image file of the QR Code
    def render bg_color = WHITE
      png = blank_img(bg_color)
      @sequence.dark_squares_only do |x, y|
        png[y + @sequence.border_width(), x +
        @sequence.border_width()] = BLACK
      end
      return png
    end

Trên đây là một số chia sẻ của mình về gem rqrcode_png, nếu có thắc mắc hay góp ý gì các bạn có thể để lại bình luận bên dưới. Thank you for reading!