برنامه نویسی

کد QR را با Active Storage در Ruby on Rails 7 ایجاد کنید

توضیحات تصویر

کدهای QR بخشی ضروری از فناوری مدرن هستند. آنها به ما این امکان را می دهند که به راحتی اطلاعات را از یک دستگاه به دستگاه دیگر منتقل کنیم. در این پست وبلاگ، نحوه تولید یک کد QR با Ruby on Rails با استفاده از Active Storage و gem “rqrcode” را بررسی خواهیم کرد.

قبل از شروع، بیایید مطمئن شویم که همه چیز مورد نیاز خود را داریم.

یک پروژه ریل جدید به نام qr-code ایجاد کنید

rails new qr-code
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با اجرای دستور زیر، gem rqrcode را به فایل gem اضافه کنید:

bundle add rqrcode
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک داربست برای مدل پست ایجاد کنید

rails g scaffold post title body:text
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور چندین فایل تولید می کند که ایجاد سریع یک رابط کاربری CRUD (ایجاد، خواندن، به روز رسانی، حذف) برای مدیریت پست ها در برنامه وب ما را آسان می کند.

در اینجا چیزی است که هر بخش از دستور انجام می دهد:

  • rails دستور اجرای Ruby on Rails است.
  • g مخفف “تولید” است.
  • scaffold به Rails می‌گوید که مجموعه کاملی از فایل‌ها را برای یک مدل، شامل یک کنترل‌کننده، نماها و یک مهاجرت تولید کند.
  • post نام مدلی است که می خواهیم تولید کنیم.
  • title و body:text ویژگی های مدل پست هستند. “title” یک ویژگی رشته است و “body” یک ویژگی متنی است.

با تولید یک داربست، می‌توانیم به سرعت یک رابط کاربردی برای مدیریت پست‌ها در برنامه Rails خود ایجاد کنیم و در زمان و تلاش صرفه‌جویی کنیم. با این حال، توجه به این نکته مهم است که کد تولید شده ممکن است برای نیازهای خاص ما کامل نباشد و ممکن است لازم باشد آن را مطابق با نیازهای خود تغییر دهیم.

حالا فعال_storage را نصب می کنیم:

دستور زیر را اجرا کنید:

rails active_storage:install
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دستور is برای نصب و راه اندازی Active Storage در برنامه Ruby on Rails استفاده می شود. Active Storage یک چارچوب داخلی برای مدیریت آپلود فایل ها و پیوست ها در برنامه های Rails است.

در این مرحله از پروژه، اکنون می توانیم پایگاه داده خود را ایجاد کنیم، همه جداول را انتقال دهیم.

rails db:create
rails db:migrate
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قبل از اجرای سرور، باید با تعیین میزبان و پورتی که برنامه باید روی آن اجرا شود، گزینه های URL پیش فرض را برای کنترلر اکشن Rails تنظیم کنیم.

برای این کار خط زیر را به خط خود اضافه کنید development.rb فایل زیر config/environments/

# config/environments/development.rb
config.action_controller.default_url_options = { host: "localhost:3000", port: 3000 }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ابتدای فایل شما باید مانند قطعه کد زیر باشد

# config/environments/development.rb
require "active_support/core_ext/integer/time"

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.
  config.action_controller.default_url_options = { host: "localhost:3000", port: 3000 }

  # In the development environment your application's code is reloaded any time
  # it changes. This slows down response time but is perfect for development

# [... more code below ...]
end
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون می توانید با اجرای دستور زیر سرور برنامه را راه اندازی کنید:

rails server
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حالا مرورگر خود را باز کنید و به http://localhost:3000 بروید، باید رابط زیر را ببینید

توضیحات تصویر

اگر می‌توانید رابط بالا را در مرورگر خود ببینید، به این معنی است که آماده شروع هستید، اگر نه، می‌توانید به عقب برگردید و تمام مراحل را برای درک بهتر دنبال کنید. ♻♻

  • از آنجایی که همه چیز کار می کند، شما را باز کنید routes.rb فایل زیر /config/ Directore و مسیر root را برای برنامه تنظیم کنید:
# config/routes.rb
Rails.application.routes.draw do
  root "posts#index"
  resources :posts
end
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رفتن به app/models/post.rb و پیوست را اضافه کنید qrcode به مدل پست

# app/models/post.rb
class Post < ApplicationRecord
  has_one_attached :qrcode, dependent: :destroy
end
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد بالا روش تداعی Ruby on Rails ActiveRecord که a را تعریف می کند پیوست یک به یک ارتباط برای مدل پست ما.

این has_one_attached روش توسط کتابخانه Active Storage ارائه شده است و امکان پیوست کردن یک فایل به مدل پست را فراهم می کند. این پیوست در یک جدول جداگانه در پایگاه داده ذخیره می شود و ارتباط توسط Active Storage مدیریت می شود.

  • 👌 خوب است بدانید: به طور کلی، این کد به شما امکان می دهد یک فایل را به مدل پست پیوست کنید و تضمین می کند که پیوست به درستی مدیریت می شود و در صورت نیاز پاک می شود. این برای مواردی مفید است که شما نیاز به ذخیره و مدیریت فایل‌های پیوست در برنامه Rails خود دارید.

اضافه کردن :qrcode در روش پارامترهای قوی (post_params) برای لیست سفید و فیلتر کردن پارامترهای ارسال شده به یک اقدام ایجاد استفاده می شود.

  • رفتن به app\controllers\posts_controller.rb و مطمئن شوید که به شکل زیر است:
class PostsController < ApplicationController
# app\controllers\posts_controller.rb

# [ ... ]

  # Only allow a list of trusted parameters through.
  def post_params
    params.require(:post).permit(:title, :body, :qrcode)
  end
end
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قبل از_commit را در پست مدل

  • دنبال کن [rqrcode] gem (https://github.com/whomwah/rqrcode) اسناد برای تنظیم همه چیز و پس از آن مطمئن شوید که post.rb فایل زیر app/models/ شبیه زیر است:
# app/models/posts.rb
class Post < ApplicationRecord
  include Rails.application.routes.url_helpers
  has_one_attached :qrcode, dependent: :destroy

  before_commit :generate_qrcode, on: :create

  private

  def generate_qrcode
    # Get the host
    # host = Rails.application.routes.default_url_options[:host]
    host = Rails.application.config.action_controller.default_url_options[:host]

    # Create the QR code object
    # qrcode = RQRCode::QRCode.new("http://#{host}/posts/#{id}")
    qrcode = RQRCode::QRCode.new(post_url(self, host:))

    # Create a new PNG object
    png = qrcode.as_png(
      bit_depth: 1,
      border_modules: 4,
      color_mode: ChunkyPNG::COLOR_GRAYSCALE,
      color: "black",
      file: nil,
      fill: "white",
      module_px_size: 6,
      resize_exactly_to: false,
      resize_gte_to: false,
      size: 120,
    )

    # Attach the QR code to the active storage
    self.qrcode.attach(
      io: StringIO.new(png.to_s),
      filename: "qrcode.png",
      content_type: "image/png",
    )
  end
end
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای قطعه کد بالا a تعریف می کنم generate_qrcode روشی که یک کد QR برای پست ایجاد می کند و با استفاده از Active Storage آن را به ارتباط qrcode متصل می کند.

در اینجا خلاصه ای از آنچه که کد انجام می دهد آورده شده است:

مدل پست

  • شامل Rails.application.routes.url_helpers ماژول، که روش های کمکی را برای تولید URL در Rails ارائه می دهد.

این before_commit :generate_qrcode, on: :create پاسخ به تماس

  • را اجرا می کند generate_qrcode روش قبل از اینکه پست در هنگام ایجاد به پایگاه داده متعهد شود.

این generate_qrcode روش

  1. یک کد QR برای پست ایجاد می کند و با استفاده از ذخیره سازی فعال آن را به ارتباط qrcode متصل می کند.

  2. استفاده می کند Rails.application.config.action_controller.default_url_options[:host] مقدار پیکربندی برای دریافت نام میزبان برای برنامه فعلی Rails.

  3. با استفاده از کد QR ایجاد می کند RQRCode::QRCode.new روش، ارسال در URL پست به عنوان یک رشته.

  4. استفاده می کند qrcode.as_png روشی برای تولید یک تصویر PNG از کد QR.

  5. تصویر کد QR را با استفاده از Active Storage به ارتباط qrcode متصل می کند.

👌خوب است بدانید👌: به طور کلی، این کد یک تصویر کد QR برای یک پست جدید ایجاد می کند و آن را با استفاده از Active Storage به پست متصل می کند. سپس می‌توان از کد QR برای پیوند به URL پست استفاده کرد و اشتراک‌گذاری پست با دیگران را آسان می‌کند.

می توانید کد بالا را کپی کرده و آن را در خود تنظیم کنید.

در اینجا ما می رویم،

  • همانطور که اکنون ما کد qr خود را تولید کرده ایم، اجازه دهید آن را در صفحه پست نمایش دهیم.

باز کن _post.html.erb فایل جزئی در زیر app/views/posts/ و یک image_tag برای qrcode به صورت زیر اضافه کنید:

# app/views/posts/_post.html.erb
<div id="<%= dom_id post %>">
  <p>
    <strong>Title:</strong>
    <%= post.title %>
  </p>

  <p>
    <strong>Body:</strong>
    <%= post.body %>
  </p>

  <%= image_tag(url_for(post.qrcode)) %>
</div>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  • اکنون پروژه خود را ذخیره کرده و یک پست جدید در مرورگر ایجاد کنید. پس از ایجاد، باید کد qr را که در صفحه وب به صورت تصویر زیر نمایش داده شده است، مشاهده کنید:

توضیحات تصویر

اکنون ممکن است لازم باشد آن qr-code را آزمایش کنید.

  • راه های مختلفی برای آزمایش این و از طریق مرورگر شما وجود دارد
    سایت webqr را باز کنید و مطمئن شوید که دوربین شما از صفحه نمایش شما فیلم می گیرد.

  • یا فقط از qr-code reader گوشی خود استفاده کنید.

در نتیجهتولید کدهای QR اکنون بخشی ضروری از فناوری مدرن است زیرا به ما امکان می دهد به راحتی اطلاعات را از یک دستگاه به دستگاه دیگر منتقل کنیم.

در این پست وبلاگ، نحوه تولید کد QR با Ruby on Rails با استفاده از Active Storage و gem “rqrcode” را یاد گرفتیم. با پیروی از راهنمای گام به گام ارائه شده در پست، ما توانستیم یک رابط کاربری CRUD برای مدیریت پست ها در برنامه وب خود ایجاد کنیم و همچنین نحوه نصب و راه اندازی Active Storage را در برنامه Ruby on Rails یاد گرفتیم.

در نهایت، با استفاده از Ruby on Rails، یک qrcode به مدل پست خود وصل کردیم ارتباط ActiveRecord متد، qrcode را در متد پارامترهای قوی (post_params) اضافه کرد و پارامترهای ارسال شده به یک اقدام ایجاد را در لیست سفید و فیلتر کرد.

Github: تولید کننده qrcode

مستندات: rqrcode

به طور کلی، این پست یک راهنمای عالی برای هر کسی که به دنبال تولید کدهای QR با استفاده از Ruby on Rails است، ارائه می دهد.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا