Tạo mã QRcode trong ứng dụng rails

Bài viết này hướng dẫn cho bạn cách tạo ra mã QR code ở trong ứng dụng ruby on rails

Mã QR codes rất hữu ích cho một số loại dữ liệu khác nhau. Bạn có thể dễ dàng lưu trữ URL, văn bản và nhiều hơn nữa trong một mã vạch đơn giản và dễ đọc bởi hầu hết các điện thoại thông minh hiện nay. Trong bài viết nàu tôi sẽ chỉ cho bạn cách tạo ra mã QR codes ở trong ứng dụng rails. Bắt đầu nào.

II. Thiết lập ứng dụng

Để tạo ra mã QR codes, chúng ra sẽ sử dụng gem rqrcode-with-patches. Gem rqrcode-with-patches là một phiên bản cải tiến của gem rqr-code. Hãy thêm nó vào trong file Gemfile của bạn:

gem 'rqrcode-with-patches', '~> 0.5.4'

Chạy lệnh bundle install để cài đặt gem vào ứng dụng. Tuyệt vời, bước tiếp theo là chúng ra sẽ tạo ra một controller gọi là QRCodes với 2 action là new và create. Action new ở trong QRCodesConotroller sẽ hiển thị 1 màn hình yêu cầu chúng ta nhập dữ liệu mà chúng ta muốn tạo ra QRcodes từ nó, và phương thức create sẽ tạo ra kết quả cho chúng ta. Chạy lệnh dưới đây để tạo ra chúng.

rails g controller qr_codes new create

Tuyệt vời, giờ chúng ta sẽ tạo ra đường link để dẫn trình duyệt đến các action đó. Chỉnh sửa file config/routes.rb của bạn và trông nó sẽ giống như dưới đây:

Rails.application.routes.draw do
  resources :qr_codes, only: [:new, :create]
  root to: "qr_codes#new"
end

Bước tiếp theo chúng ta sẽ thêm 1 dòng vào tệp config/environment.rb của ứng dụng để thêm thư viện rqrcode-with-patches vào ứng dụng. Sửa đổi file đó và trông nó sẽ như sau:

# Load the Rails application.
require 'rqrcode'
require File.expand_path('../application', __FILE__)

# Initialize the Rails application.
Rails.application.initialize!

Bây giờ chúng ta cần sửa đổi controller QRCodes mà chúng ta đã tạo ra ban đầu, và trông nó sẽ như sau:

class QrCodesController < ApplicationController
  def new
  end

  def create
    @qr = RQRCode::QRCode.new( qr_code_params[:text], size: 4)
  end

private
  def qr_code_params
    params.require(:qr_code).permit(:text)
  end
end

Tiếp theo là chúng ra sẽ tạp ra view cho action new, mở file view new.html.erb trong thư mục view của QRcodes và sủa nó thành như sau:

<%= form_for :qr_code, url: qr_codes_path do |f| %>
  <%= f.label :text %>
  <%= f.text_field :text %>
  <%= f.submit %>
<% end %>

Và bước tiếp theo hãy dựng code cho action create để xem mã QRcodes được tạo ra trên trình duyệt. Mở file create.html.erb trong thư mục view của QRcodes và sửa để nó trông giống dưới đây:

<table class="qr-code">
<% @qr.modules.each_index do |x| %>
  <tr>
  <% @qr.modules.each_index do |y| %>
   <% if @qr.dark?(x,y) %>
    <td class="black"/>
   <% else %>
    <td class="white"/>
   <% end %>
  <% end %>
  </tr>
<% end %>
</table>
<br />
<br />
<%= link_to "New QR Code", new_qr_code_path %>

Bạn có thể nhìn thấy mã QRcodes sau khi được tạo ra sẽ không thực sự giống một mã QR mà chúng ta hay nhìn thấy, cho đến khi bạn thêm css cho nó. Sửa đổi tệp application.css để thêm css cho đoạn mã QRcodes được tạo ra:

/*
 *= require_tree .
 *= require_self
 */

table.qr-code {
  border-awidth: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
}
table.qr-code td {
  border-awidth: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  awidth: 15px;
  height: 15px;
}
table.qr-code td.black { background-color: #000; }
table.qr-code td.white { background-color: #fff; }

Bây giờ thì hãy khởi động ứng dụng rails của bạn và mở trình duyệt đến trang http://localhost:3000 có thể ban sẽ nhanh chóng tạo ra được mã QRcodes mà văn bản hay 1 đoạn text mà bạn nhập vào và sau đó submit lên server. Để biết thêm thông tin về gem này xin hãy truy cập vào rqrcode-with-patches GitHub page. Cảm ơn bạn đã đọc bài viết !