Pengunggahan Gambar Rails: Menggunakan CarrierWave dan Devise

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Di bagian pertama dari seri ini, Anda belajar bagaimana menggunakan CarrierWave dalam aplikasi Rails Anda. Di bagian kedua ini, Anda akan belajar cara mengaktifkan pengunggahan gambar untuk pengguna Anda menggunakan Devise. Devise adalah solusi otentikasi untuk Rails. Anda juga akan belajar cara menggunakan fog, perpustakaan layanan cloud Ruby yang akan memungkinkan aplikasi Anda terhubung ke Amazon Web Services.

Cukup pembicaraannya—mari kita mulai berbisnis.

Pengaturan Aplikasi Rails

Menghasilkan aplikasi rails baru Anda:

rails new myapp

Buka Gemfile Anda dan tambahkan gems berikut:

***Gemfile***

gem carrierwave
gem devise
gem mini_magick
gem fog

Jalankan bundle install untuk menginstal gems.

Dari terminal Anda, buat controller Pages:

rails g controller Pages index

Arahkan ke config/routes.rb dan tambahkan path root:

***config/routes.rb***

root to: 'pages#index'

Menghasilkan dan Mengkonfigurasi Devise

Fitur pengunggahan akan diintegrasikan ke dalam model User kami bagi pengguna untuk mengunggah avatar. Dari terminal Anda, instal devise:

rails generate devise:install

Generator akan memasang penginisialisasi yang menjelaskan semua opsi konfigurasi Devise. Buka app/views/layouts/application.html.erb di editor teks Anda dan tambahkan kode berikut di atas blok yield:

***app/views/layouts/application.html.erb***

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Pada titik ini Anda dapat menghasilkan model User Anda:

rails generate devise User

Selanjutnya, migrasikan database Anda:

rake db:migrate

Anda perlu mengedit view devise, jadi penting Anda menghasilkan:

rails generate devise:views

Dan itu akan melakukan keajaibannya.

Menggunakan editor teks Anda, buka app/views/devise/registrations/new.html.erb dan edit agar terlihat seperti ini:

***app/views/devise/registrations/new.html.erb***

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => {multipart: :true}) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :avatar do %>
      <%= f.file_field :avatar %>
      <%= f.hidden_field :avatar_cache %>
    <% end %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

Lakukan hal yang sama untuk app/views/devise/registrations/edit.html.erb:

***app/views/devise/registrations/edit.html.erb***

<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, multipart: :true }) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
  <% end %>

  <div class="field">
    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <% if current_user.avatar.url.present? %>
    <%= image_tag(current_user.avatar.url) %>
    <%= f.label :remove_avatar do %>
      <%= f.check_box :remove_avatar %>
    <% end %>
  <% end %>
  <%= f.file_field :avatar %>
  <%= f.hidden_field :avatar_cache %>

  <div class="field">
    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
    <%= f.password_field :current_password, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

<h3>Cancel my account</h3>

<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

<%= link_to "Back", :back %>

Dengan melakukannya, Anda perlu memasukkan daftar putih avatar untuk devise dan menambahkan kolom avatar ke tabel User. Dari terminal Anda, jalankan migrasi untuk menambahkan kolom avatar baru.

rails g migration add_avatar_to_users avatar:string
rake db:migrate

Tambahkan avatar CarrierWave ke model User Anda—model Anda akan terlihat seperti ini:

***models/user.rb***

class User < ActiveRecord::Base
  mount_uploader :avatar, AvatarUploader

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  # User Avatar Validation
  validates_integrity_of  :avatar
  validates_processing_of :avatar

  private
    def avatar_size_validation
      errors[:avatar] << "should be less than 500KB" if avatar.size > 0.5.megabytes
    end
end

Dalam kode di atas, Anda menambahkan baris mount_uploader di bagian atas kelas User. Ada juga validasi untuk memeriksa integritas dan pemrosesan avatar, di samping metode untuk memastikan bahwa tidak ada gambar yang lebih besar dari 500KB yang diunggah.

Anda perlu menambahkan avatar, avatar_cache, dan remove_avatar ke daftar atribut yang dapat diakses. Melakukan hal ini mudah—cukup buka application_controller.rb Anda dan membuatnya terlihat seperti ini:

***app/controllers/application_controller.rb***

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password, :password_confirmation, :remember_me, :avatar, :avatar_cache) }
    devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :password, :password_confirmation, :current_password, :avatar, :avatar_cache, :remove_avatar) }
  end
end

Dengan itu, Anda siap untuk mengintegrasikan CarrierWave.

Menyiapkan CarrierWave

Gunakan editor teks Anda, arahkan ke config/initializers dan buat file bernama carrier_wave.rb. Tempel kode di bawah ini:

***config/initializers/carrier_wave.rb***

require 'carrierwave/orm/activerecord'

Ini adalah penginisialisasi yang diperlukan dalam memuat CarrierWave setelah ActiveRecord.

Dari terminal Anda, buat pengunggah:

rails generate uploader Avatar

Ini akan membuat direktori baru yang disebut uploaders di folder app dan file di dalamnya disebut avatar_uploader.rb. Saya telah mengedit isi file agar terlihat seperti yang saya miliki di bawah ini:

***app/uploaders/avatar_uploader.rb***

# encoding: utf-8

class AvatarUploader < CarrierWave::Uploader::Base

  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_fill => [100, 100]
  end

  version :medium do
    process :resize_to_fill => [300, 300]
  end

  version :small do
    process :resize_to_fill => [140, 140]
  end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_white_list
    %w(jpg jpeg gif png)
  end
end

Anda memerlukan baris MiniMagick untuk menghasilkan versi gambar yang berbeda. Saya menyertakan tiga versi gambar. MiniMagick membuat perubahan ukuran ke versi ini sebisa mungkin. Blok kode terakhir memastikan bahwa tidak ada ekstensi file selain yang tercantum di sini diunggah.

Pengaturan AWS

Untuk tutorial ini, kami akan mengunggah gambar kami ke Amazon Web Services. Jika Anda belum memiliki akun, lompat ke halaman pendaftaran dan buat akun gratis.

Setelah selesai, Anda perlu membuat bucket untuk menyimpan gambar Anda. Ketika disana, pilih Create Bucket untuk membuka kotak dialog. Masukkan nama untuk keranjang dan pilih wilayah. Setelah selesai, pilih Create.

Buka Gemfile Anda dan tambahkan gem ini, dan bundle install setelah selesai.

gem 'figaro'

Dari terminal Anda, jalankan bundle exec figaro install. Ini akan membuat file baru config/application.yml dan menambahkannya ke .gitignore aplikasi Anda. Anda memerlukan file ini untuk menjaga id akses AWS dan kunci rahasia Anda tetap aman.

Untuk menemukan id akses AWS dan kunci rahasia Anda, buka Amazon Web Services dan klik nama akun Anda, yang terletak di sudut kanan konsol.

Dari menu drop-down, pilih Security Credentials, dan klik tombol Continue to Security Credentials. Di halaman yang tampil, pilih Access Keys (ID Kunci Akses dan Kunci Akses Rahasia). Klik tombol Create New Access Key untuk membuat kunci baru, dan salin ke editor.

Di editor teks Anda, navigasikan ke config/application.yml dan tempelkan hal-hal berikut:

***config/application.yml***

aws_access_id: Enter access_id here
aws_access_secret_key: Enter access_key here

Ganti baris seperti yang disebutkan di atas.

Arahkan ke config/initializers, buat file bernama storage.rb, dan tempelkan yang berikut:

***config/initializers/storage.rb***

CarrierWave.configure do |config|
  config.storage = :fog
  config.fog_credentials = {
      provider:              'AWS',
      aws_access_key_id:     ENV["aws_access_id"],
      aws_secret_access_key: ENV["aws_access_secret_key"],
      region: 'us-west-2'
  }
  config.fog_directory  = "tutsplus-avatar"
  config.fog_public     = false
end

Menurut konfigurasi di atas, wilayah untuk keranjang saya adalah us-west-2, dan nama keranjangnya adalah tutsplus-avatar. Gantilah dengan informasi tentang keranjang Anda.

Mulai rails server Anda dan arahkan browser Anda ke https://localhost:3000/users/sign_up.

Menetapkan Avatar Default

Dalam aplikasi Anda, Anda mungkin ingin menetapkan avatar default untuk pengguna yang memilih untuk tidak mengunggah avatar. Melakukan ini mudah.

Buat folder di app/assets/images yang disebut fallback dan jatuhkan gambar default Anda di dalamnya. Gunakan editor teks Anda, arahkan ke app/uploaders/avatar_uploader.rb dan tempelkan kode di bawah ini:

***app/uploaders/avatar_uploader.rb***

def default_url(*args)
  ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default-avatar.gif"].compact.join('_'))
end

Pastikan untuk mengubah default-avatar.gif ke nama gambar Anda.

Kesimpulan

Sekarang Anda tahu cara mengaktifkan pengunggahan gambar untuk pengguna Anda. Ini menambahkan fitur penting ke aplikasi rails Anda. Saya harap Anda bersenang-senang. Di bagian selanjutnya, kita akan melihat PaperClip. Tanggapan Anda diterima.