Mencoba ActionText pada Rails 6

Rails 6 akan rilis sebentar lagi, ada beberapa fitur baru yang diperkenalkan. Dalam kesempatan ini, mari kita mencicipi ActionText, sebuah fitur baru yang ditambahkan di Rails 6 untuk mengintegrasikan editor teks kaya (Rich Text Editor) dengan aplikasi web.

Siapkan aplikasi Rails 6

Pertama-tama siapkan aplikasi Rails 6. Rails 6 saat ini masih beta, sehingga pemasangan gem-nya harus secara eksplisit menyertakan nomor versinya (jika Rails 6 sudah rilis, silakan hapus setelah -v:

$ gem install rails -v 6.0.0.beta3
$ rails new aplikasi-baru
$ cd aplikasi-baru
$ bundle install

Jalankan perintah pemasangan ActionText

Memasang ActionText terasa lebih mudah jika menggunakan skrip bantuan yang sudah disiapkan:

$ bin/rails action_text:install

Skrip ini akan menghasilkan berkas sebagai berikut:

• berkas migrasi untuk membuat 2 tabel yang memuat ActiveStorage
• berkas migrasi untuk membuat tabel yang memuat ActionText
• penambahan pustaka Trix dan ActionText dengan pengelola JavaScript Yarn
• berkas CSS untuk Trix
• berkas parsial untuk konten blob pada ActiveStorage
• berkas terjemahan untuk ActionText

Jalankan migrasi untuk membuat tabel-tabel di atas ke dalam basis data:

$ bin/rails db:migrate

Tambahkan gem image_processing

ActionText membutuhkan gem image_processing untuk mengolah gambar. Salah satunya untuk mengubah ukuran gambar. Tambahkan pada berkas GemFile:

# GemFile
gem 'image_processing', '~> 1.2'

Jangan lupa untuk jalankan bundle install untuk memasangnya

Buat Model

Sebagai contoh saya membuat sebuah Model dengan nama Post dengan satu atribut, yakni message dengan tipe text.

Tambahkan has_rich_text dengan simbol :message. Ini menandakan bahwa atribut message memiliki asosiasi dengan ActionText.

class Post < ApplicationRecord
  has_rich_text :message
end

Buat Controller

Sebagai contoh, saya akan membuat Controller untuk Model Post dengan tiga aksi:

• new, untuk menaruh form berisi ActionText
• create, untuk membuat entri post yang menyimpan message dengan ActionText
• show, untuk melihat hasil penyimpanan message

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    post = Post.create! params.require(:post).permit(:message)
    redirect_to post
  end

  def show
    @post = Post.find(params[:id])
  end
end

Buat View

Sehubungan dengan Controller di atas, maka saya membuat dua buah view sebagai berikut.

Untuk menampung form dengan ActionText di new.html.erb:

<%= form_with(model: @post) do |form| %>
  <div class="field">
    <%= form.label :message %>
    <%= form.rich_text_area :message %>
  </div>
  <%= form.submit %>
<% end %>

Dan untuk melihat hasilnya di show.html.erb:

<%= @post.message %>

Buat Routing Baru

Untuk mengakses MVC ini, kita memerlukan routing baru:

Rails.application.routes.draw do
  resources :posts
end

Demo

$ bin/rails s

Jalankan pelayan Rails dan pergilah ke rute baru di atas: http://localhost:3000/posts/new

Sekilas tentang ActionText

ActionText dibuat untuk integrasi editor teks kaya ke dalam aplikasi Rails. Sebagaimana pustaka dengan prefix "Action-" lainnya, ActionText didesain untuk menerima berbagai macam editor teks. Hingga tulisan ini dibuat, baru editor Trix saja yang sudah dicontohkan.

Manfaat ActionText

Biasanya untuk implementasi editor WYSIWYG (What You See Is What You Get) ke dalam aplikasi Rails itu cukup mudah. Cukup memasukkan gem yang berkaitan dengan editor tersebut dan jalankan bundle install.

Namun ada usaha tambahan yang dibutuhkan untuk mengintegrasikan editor tersebut dengan manajemen aset statik, seperti gambar dan dokumen. Biasanya cukup rumit 😅, setiap aplikasi memiliki cara tersendiri untuk mengunggah berkas dan mengelolanya.

Dengan adanya ActionStorage, pengelolaan berkas kini semakin mudah karena tambahan lapisan abstraksi. Berbagai jenis penyimpanan, baik itu melalui pengelola berkas di sistem operasi (file system) maupun di layanan penyimpanan berkas di komputasi awan seperti Amazon S3, semuanya dapat diakses menggunakan API yang sama. Hal inilah yang dimanfaatkan oleh ActionText. Setiap berkas yang diunggah ke dalam teks editor kaya yang dikelola oleh ActionText akan dianggap sebagai lampiran pada ActionStorage. Sehingga penambahan berkas bisa dengan semudah seret dan lepas (drag and drop) ke dalam editor.

Sangat memudahkan!

Yuk bermain dengan ActionText!

Semua langkah di atas bisa langsung dicoba dengan mengkloning repositori yang saya buat di https://github.com/firewalker06/taman-bermain-action-text.

$ git clone git@github.com:firewalker06/taman-bermain-action-text.git
$ cd taman-bermain-action-text
$ bundle install
$ bin/rails s
=> bisa dicoba di http://localhost:3000/posts/new

Selamat mencoba!