Ruby on Rails Hotwire Turbo Kullanımı

Merhaba. Bu yazıda Ruby on Rails’te Hotwire Turbo kütüphanesindeki turbo frame ve turbo stream kullanımına bakacağız.

Turbo frame nedir ?

Her turbo frame in bir tag id si vardır.

Turbo frameler ile sarmalan kod parçasınin içerisinde olan a taglarına tıklandığında sayfa değişmeden arka planda o sayfaya gidilir. Kendi tag id si ile o sayfadaki tag id si aynı olan frame getirilir ve bu frame içerisine yerleştirilir. (replace)

Turbo strem nedir ?

Turbo stream web sayfası açıldığında ilgili keywork ile websokete bağlanır. Model sınıfının içerisinde yazdığımız kodla. Model sınıfında yeni kayıt, güncelleme ve silme gibi işlemler için yazdığım kod sayesinde bağlı tüm websoketlere yayın yapılarak reailtime olarak haberleşme sağlanır.

Bu işlem için modelin varsayılan olarak modelin partial view dosyası kullanılır. Örneğin. Blog modeli için _blog.html.erb dosyasıdır.

Kurulumlar

Turbo frame ve stream kullanarak basit reailtime mesajlaşma uygulaması yapacağız.

Yeni rails projesi oluşturuyoruz ve klasöre giriyoruz.

rails new hello-turbo
cd hello-turbo/

gemfile dosyasındaki gem turbolinks i siliyoruz veya yorum satırına alıyoruz. Turbo rails kütüphanesini ekliyoruz.

# gem 'turbolinks', '~> 5'

# Hotwire Turbo
gem 'turbo-rails'

Kütüphaneyi yüklüyoruz.

bin/bundle install
bin/rails turbo:install

Serveri başlatıyoruz.

bin/rails s

Bilgisayarınızda redis kurulu olması gerekli. Aksi takdirse uygulama çalışmayacaktır.

Mvc Oluşturma

Basit crud işlemlerini yapacağımız Message isminde bir model yapıyoruz.

bin/rails generate scaffold Message text:string

Veritabanı migrate işlemini yapıyoruz.

bin/rails db:migrate

config/routes.rb dosyasına root to: ‘messages#index’ kodunu ekliyoruz.

Tarayıcımızdan http://localhost:3000/ adresini açıyoruz. Crud işlemini yapabilen uygulamamız hazır.

View Kodları

app/views/messages klasörü altında “_message.html.erb” isminde bir dosya oluşturuyoruz ve diğer dosyaları da aşağıdakiler gibi yazıyoruz.

messages/_message.html.erb

<%= turbo_frame_tag dom_id(message) do %>
  <div class="row border">
      <div class="col-9"><%= message.text %></div>
      <div class="col-1"><%= link_to 'Show', message %></div>
      <div class="col-1"><%= link_to 'Edit', edit_message_path(message) %></div>
      <div class="col-1"><%= link_to 'Destroy', message, method: :delete, data: { confirm: 'Are you sure?' } %></div>
  </div>
<% end %>

messages/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Messages</h1>
<%= turbo_stream_from "messages" %>
<div>
  <%= turbo_frame_tag "messages" do %>
        <%= render @messages %>
  <% end %>
</div>

<br>
<%= turbo_frame_tag "new_message" do %>
  <%= link_to 'New Message', new_message_path %>
<% end %>

messages/edit.html.erb

<h1>Editing Message</h1>
<%= turbo_frame_tag dom_id(@message) do %>
  <div class="row align-items-center border">
    <div class="col-10">
      <%= render 'form', message: @message %>
    </div>

    <%= link_to 'Show', @message, class:'col-1' %>
    <%= link_to 'Back', messages_path, class:'col-1' %>
  </div>
<% end %>

messages/new.html.erb

<div>
  <h1>New Message</h1>
  <%= turbo_frame_tag "new_message" do %>
    <div class="row align-items-center border">
      <div class="col-10">
        <%= render 'form', message: @message %>
      </div>
      

      <%= link_to 'Back', messages_path, class:'col-2' %>
    </div>
  <% end %>
</div>

messages/show.html.erb

<p id="notice"><%= notice %></p>
<%= turbo_frame_tag dom_id(@message) do %>
  <div class="row align-items-center border">
    <p class="col-10">
      <strong>Text:</strong>
      <%= @message.text %>
    </p>

    <%= link_to 'Edit', edit_message_path(@message), class:"col-1" %>
    <%= link_to 'Back', messages_path, class:"col-1" %>
  </div>
<% end %>

layouts/application.html.erb

Bu dosyaya bootstrap css cdn dosyalarını ekliyoruz. Dosyanın eklenmiş hali aşağıdadır

<!DOCTYPE html>
<html>
  <head>
    <title>HelloTurbo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  </head>

  <body class="container">
    <%= yield %>
  </body>
</html>

Controller ve Model Kodları

View dosyalarımız tamamlandı. Şimdi app/controllers/messages_controller.rb üzerinde ufak bir iki değişiklik yapacağız.

Create içerisinde save altındaki kısmı redirect_to root_path olarak değiştiriyoruz.

Update içerisindeki @message.update kısmının redirect_to root_path olarak değiştiriyoruz.

Son olarak app/models/altında bulunan message model sınıfımızın içerisinde turbo stream ile ilgili kodları yazıyoruz.

class Message < ApplicationRecord
  after_create_commit { broadcast_append_to "messages" }
  after_destroy_commit { broadcast_remove_to "messages" }
  after_update_commit { broadcast_replace_to "messages" }
end

Artık uygulamamız kullanıma hazır.

Özetle

Yeni rails uygulamsı oluşturduk.
Default gelen Turbolinks i kaldırıp yerine hotwire turbo yu kurduk.
Message isminde bir controller, model ve viewlar oluşturduk.
İndex sayfasında messages isminde bir turbo frame oluşturduk.
_blog, show, edit sayfalarında tagi “dom_id(message)” olan turbo frame ile sarmaladık
- dom_id(message) kullandık çünkü anasayfada birden fazla mesaj olduğundan karışmaması her message tagi tekil olmalıydı.
Yeni mesaş için new_message taginde bir frame oluşturuk. indexte ve new de aynı tag isminde kullandık.
İndexte turbo stream from kullandık. ve model içinde ekleme güncelleme ve silme işlemlerinde hangi streamde ne işlemi yapacağını yazdık.