Sử dụng Cloudinary để quản lý ảnh cho ứng dụng của bạn

Cloudinary là gì?

Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery.

Với cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm phức tạp nào khác. Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động.

Những tính năng chính

Cloudinary cung cấp một Ruby Gem để dễ dàng cho việc tương tác với các app viết bởi ngôn ngữ Ruby với một số framwork như là Rails hay Sinatra với các tương tác chính sau:

• Xây dựng các URL để chuyển đổi và thao tác với hình ảnh
• Rails view helper cho việc nhúng và thay đổi hình ảnh
• API wrappers: upload image, quản lý và nhiều thứ khác
• Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin.
• Tích hợp với Active Record
• CarrierWave plugin
• Hình ảnh tĩnh đồng bộ với CDN delivery
• Migration tool

Làm thế nào để sử dụng

Dưới đây mình sẽ giới thiệu cho các bạn hướng dẫn sử dụng cho Rails app. Trước tiên để sử dụng bạn cần có tài khoản cloudinary, nếu chưa có bạn có thể đăng kí tại đây. Sau khi đăng kí thành công bạn nhớ check mail để verification tài khoản của mình nếu không thì sẽ chỉ sử dụng được tài khoản đó trong 1-2 ngày. Cloudinary có bản free và trả phí, tùy thuộc vào nhu cầu mà bạn có thể chọn gói phù hợp cho mình. Bạn có thể xem chi tiết tại đây

1. Cài đặt

Để cài đặt gem cloudinary bạn có thể làm như sau Trong terminal gõ lệnh sau

gem install cloudinary

Hoặc có thể chỉnh Gemfile, thêm gem cloudinary và chạy bundler

gem 'cloudinary'

Nếu bạn sử dụng optional là upload ảnh với Active Record sử dụng CarrierWave thì bạn cần thêm gem carrierwave và bundler lại

gem 'carrierwave'
gem 'cloudinary'

2. Configuration

Để sử dụng cloudinary bạn cần config cloud_name, api_key và api_secret. Những settings này bạn hoàn toàn có thể sử dụng, truyền vào trong mỗi request mà bạn gửi đi hoặc là sử dụng file config cục bộ trong Rails app là cloudinary.yml. Bạn hoàn toàn có thể dowload nó tại trang màn hình quản lý của mình.https://cloudinary.com/console. Dưới đây là file config mẫu:

development:
  cloud_name: ngocnguyen
  api_key: '874837483274837'
  api_secret: a676b67565c6767a6767d6767f676fe1
	...

Bạn cũng có thể xem thêm các option cho config tại đây

3. Upload image

Bây giờ bạn có thể upload image và bất kì file nào từ Ruby code hoặc Ruby on rails server. Bạn có thể sử dụng lệnh sau để update dựa vào các params truyền vào là cloud_name, api_key và api_secret.

auth = {
  cloud_name: "somename",
  api_key:    "1234567890",
  api_secret: "FooBarBaz123"
}

Cloudinary::Uploader.upload("my_picture.jpg", auth)

Image truyền vào có thể là đường dẫn tương đối hoặc một url ảnh bất kì. Nếu bạn sử dụng carrierwave để upload ảnh thì có thể sử dụng như sau: (lưu ý, bạn cần cài đặt gem như trên bước 2, và đặc biệt cần đặt gem carrierwave trước cloudinary) Sau khi generate Uploader, Trong file Uploader bạn cần include Cloudinary::CarrierWave.

class ImageUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave
	....
end

Trong model cần upload file bạn vẫn config và sử dụng bình thường như đối với carrierwave.

class Post < ActiveRecord::Base
  ...
  mount_uploader :picture, ImageUploader
  ...
end

Tương tự như trong view ta sẽ hiện thì upload file như sau:

= form_for(:post) do |post_form|
  = post_form.hidden_field(:picture_cache)
  = post_form.file_field(:picture)

Trong đó hỗ trợ một trường hidden là :picture_cache để khi mà page reloading hay validation errors thì sẽ không mất image đã upload.

4. Hiển thị và thao tác với image

Mỗi image update sẽ có một public ID, bạn hoàn toàn có thể sử dụng public ID của image để hiện thị ảnh đó. Ví dụ một ảnh có image id là "sample" ta có thể hiện thị ảnh như sau:

cl_image_tag("sample.jpg", :alt => "Sample Image")

Hoặc có thể dùng địa chỉ tuyệt đói của bức ảnh đó để hiện thị như sau

image_tag(
  "http://res.cloudinary.com/demo/image/upload/w_100,h_150,c_fill/sample.jpg",
  :awidth => 100, :height => 150)

Hay đối với Rails app, với một product bạn có thể hiện thị ảnh như sau

<%= image_tag @product.picture.url, alt: @product.name %>

Demo

https://github.com/nguyenngoc2505/cloudinary_demo

Tham khảo

• Ruby On Rails integration
• Cloudinary
• Rails & CarrierWave integration