Tạo mã QRcode trong ứng dụng rails
Bài đăng này đã không được cập nhật trong 6 năm
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
I. Giới thiệu
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-width: 0;
border-style: none;
border-color: #0000ff;
border-collapse: collapse;
}
table.qr-code td {
border-width: 0;
border-style: none;
border-color: #0000ff;
border-collapse: collapse;
padding: 0;
margin: 0;
width: 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 !
All rights reserved