Cách tạo Rails gem từ Jquery plugin

Bài đăng này đã không được cập nhật trong 6 năm

Đối với một Ruby developer thì việc sử dụng các gem trong các dự án về Ruby cũng như Rails là một điều vô cùng quen thuộc. Sau một thời gian tìm hiểu, tôi có biết cách đơn giản để tự xây dựng một gem từ một Jquery plugin để sử dụng trong Rails project. Trong bài viết này, tôi xin trình bày các bước để xây dựng một gem đơn giản cho Rails từ một Jquery plugin.

Chuẩn bị

Việc đầu tiên và cũng là quan trọng nhất đó là ta phải lấy mã nguồn của plugin mà mình muốn chuyển đổi. Trong khuôn khổ bài viết này, tôi sẽ sử dụng plugin timeago để xây dựng thành gem time_ago_client.

Cách thực hiện

Đầu tiên cần khởi tạo một gem mới của bạn bằng câu lệnh: bundle gem time_ago_client như sau:

$ bundle gem time_ago_client
      create  time_ago_client/Gemfile
      create  time_ago_client/.gitignore
      create  time_ago_client/lib/time_ago_client.rb
      create  time_ago_client/lib/time_ago_client/version.rb
      create  time_ago_client/time_ago_client.gemspec
      create  time_ago_client/Rakefile
      create  time_ago_client/README.md
      create  time_ago_client/bin/console
      create  time_ago_client/bin/setup
      create  time_ago_client/.travis.yml
      create  time_ago_client/.rspec
      create  time_ago_client/spec/spec_helper.rb
      create  time_ago_client/spec/time_ago_client_spec.rb
      create  time_ago_client/LICENSE.txt
      create  time_ago_client/CODE_OF_CONDUCT.md
Initializing git repo in /Users/luongvietdung/Documents/workspace/demo_viblo/time_ago_client

Sau khi đã khởi tạo xong một gem, tiếp theo thì cũng giống như một ứng dụng Rails thì ta sẽ cần phải copy mã ngồn của thư viện bên thứ ba vào thư mục vendor/assets/javascripts, mà cụ thể ở đây chính là thư viện jquery timeago. Sau khi đã thực hiện sẽ có được một project gem có cấu trúc như sau:

├── Gemfile
├── LICENSE.txt
├── Rakefile
├── lib
│   ├── time_ago_client
│   │   └── version.rb
│   └── time_ago_client.rb
├── time_ago.gemspec
└── vendor
    └── assets
        └── javascripts
            └── jquery.timeago.js

Tiếp theo, ta sẽ tạo file javascript app/assets/javascripts/timeago.js để sử dụng trong app chính sau này. Nội dung file này rất đơn giản, chỉ cần khai báo và sử dụng phương thức timeago() của plugin:

// app/assets/javascripts/timeago.js

//= require jquery.timeago
//= require jquery.timeago.ja // Sử dụng ngôn ngữ Tiếng Nhật

$(document).ready(function() {
  $("time.timeago").timeago();
});

Bước tiếp trong quá trình tạo gem là ta cần thay đổi trong module TimeAgoClient để module này có thể kế thừa ::Rails::Engine như sau:

# lib/time_ago_client.rb
require "time_ago_client/version"

module TimeAgoClient
  class Engine < ::Rails::Engine
  end
end

Cuối cùng, bởi vì ta có thể publish gem này cho cộng đồng nên cần thay đổi các thông tin cơ bản tong file gemspec. Ví dụ như sau:

# time_ago_client.gemspec
# coding: utf-8
lib = File.expand_path('../lib', __FILE__)
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
require 'time_ago_client/version'

Gem::Specification.new do |spec|
  spec.name          = "time_ago_client"
  spec.version       = TimeAgoClient::VERSION
  spec.authors       = ["Luong Viet Dung"]
  spec.email         = ["luong.viet.dung@framgia.com"]

  spec.summary       = %q{A gem to integrate the timeago.js}
  spec.description   = %q{A gem to integrate the timeago.js}
  spec.homepage      = "https://github.com/luongvietdung/timeagoclient"
  spec.license       = "MIT"

  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
    f.match(%r{^(test|spec|features)/})
  end
  spec.bindir        = "exe"
  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
  spec.require_paths = ["lib"]

  spec.add_development_dependency "bundler", "~> 1.14"
  spec.add_development_dependency "rake", "~> 10.0"
end

Về cơ bản đến bước này thì gem đã hoàn thành và có thể sử dụng được. Tuy nhiên, cũng có thể tạo thêm các helper tuỳ từng nhu cầu của mọi người. Ví dụ là tạo ra một helper để sinh ra thẻ HTML để hiển thị time ago:

# app/helpers/time_ago_client_helper.rb
module TimeAgoClientHelper
  def timeago(time, options = {})
    options[:class] ||= "timeago"
    content_tag(
     :time,
     time.to_s,
     options.merge(datetime: time.getutc.iso8601)
    ) if time
  end
end

Như vậy, đến đây chúng ta đã hoàn thành phần cài đặt cho gem time_ago_client

Publish gem lên RubyGem

Để publish lên RubyGem trước tiên bạn cần đăng ký tài khoản tại đây. Sau đó trong thư mục của project gem ta thực hiện build gem:

$ gem build time_ago.gemspec

Câu lệnh trên sẽ sinh ra một file mới là time_ago_client-0.1.0.gem. Bây giờ ta chỉ cần push file này lên RubyGem bằng lệnh sau là hoàn thành việc publish:

$ gem push time_ago_client-0.1.0.gem

Từ bây giờ để sử dụng gem ta chỉ cần khai báo gem time_ago_client trong Gemfile giống như bất kỳ các gem phổ biến khác. Chi tiết về cách sử dụng có thể xem đây

Kết luận

Trong bài viết trên, tôi đã trình bày cách tạo gem đơn từ một Jquery plugin như thế nào. Hy vọng bài viết có ích cho mọi người. Cảm ơn đã theo dõi! Demo bài viết: