Skip to main content

Stimulus.js ile Ruby on Rails Uygulamasına Etkileşim Ekleme ⚡

🧠 Teknik Özet​

Bu rehber, Ruby on Rails projelerinde Stimulus.js kullanarak kullanıcı etkileşimlerini minimal JavaScript koduyla nasıl yöneteceğinizi anlatır. Amaç, büyük SPA framework’leri (React, Vue) yerine sunucu tarafından üretilmiş HTML üzerinde hızlı, hedefe yönelik etkileşimler oluşturmaktır. Adımlar: Nested Post modeli oluşturma, controller yapılandırma, Webpacker ile Stimulus kurulumu ve JavaScript controller’larının kullanımı.

🎯 Bu Rehberde Ne Öğreneceksiniz​

  • Rails projelerinde Stimulus.js kurulumu ve entegrasyonu,
  • İç içe kaynak (nested resources) oluşturma,
  • Controller, Target ve Action kavramlarının mantığı,
  • Font Awesome ile kullanıcı aksiyonlarını geliştirme,
  • Turbolinks ve Stimulus’un birlikte çalışma prensibi.

⚙️ 1. İç İçe (Nested) Post Modeli Oluşturma​

Post modelini oluştur:

rails generate model Post body:text shark:references

Bu komut, Post modelini Shark modeliyle ilişkilendirir ve shark_id anahtarını ekler.

Model ilişkisini ayarla:

# ~/sharkapp/app/models/shark.rb
class Shark < ApplicationRecord
  has_many :posts, dependent: :destroy
  validates :name, presence: true, uniqueness: true
  validates :facts, presence: true
end

dependent: :destroy, bir köpekbalığı silindiğinde tüm gönderilerini de siler.

🧩 2. İç İçe Kaynak Controller’ı Oluşturma​

Rotaları düzenle:

# ~/sharkapp/config/routes.rb
Rails.application.routes.draw do
  resources :sharks do
    resources :posts
  end
  root 'sharks#index'
end

PostsController oluştur:

nano app/controllers/posts_controller.rb
class PostsController < ApplicationController
  before_action :get_shark

  def create
    @post = @shark.posts.create(post_params)
  end

  def destroy
    @post = @shark.posts.find(params[:id])
    @post.destroy
  end

  private

  def get_shark
    @shark = Shark.find(params[:shark_id])
  end

  def post_params
    params.require(:post).permit(:body, :shark_id)
  end
end

Bu controller, @shark değişkeniyle ilişkili gönderilerin oluşturulmasını ve silinmesini yönetir.

🧱 3. Görünümleri Parçacıklarla Düzenleme​

sharks/show.html.erb dosyasına parçacıkları ekleyin:

<h2>Posts</h2>
<%= render 'sharks/posts' %>

<div data-controller="posts">
  <button data-action="posts#showAll">Show Older Posts</button>
  <div data-target="posts.show" style="visibility:hidden">
    <%= render 'sharks/all' %>
  </div>
</div>

data-controller, data-target ve data-action Stimulus’un üç temel bileşenidir.

⚡ 4. Stimulus ve Webpacker Kurulumu​

Yarn Kurulumu​

sudo apt update
sudo apt install yarn

Webpacker Gem’ini Ekle​

# ~/sharkapp/Gemfile
gem 'turbolinks', '~> 5'
gem 'webpacker', '~> 4.x'

Gem’i yükle:

bundle install
bundle exec rails webpacker:install

Stimulus Kurulumu​

bundle exec rails webpacker:install:stimulus

Webpack yapılandırması:

// ~/sharkapp/app/javascript/packs/application.js
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("../controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

Bu kod, Stimulus controller’larını otomatik olarak yükler.

Güvenlik politikası ayarı:

# ~/sharkapp/config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|
  policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
end

🧠 5. Stimulus Parçacıklarıyla Etkileşim​

Yeni post formu (_posts.html.erb):

<div data-controller="posts">
  <%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody" } do |form| %>
    <%= form.text_area :body, placeholder: "Your post here", data: { target: "posts.body" } %>
    <br>
    <%= form.submit %>
  <% end %>
  <ul data-target="posts.add"></ul>
</div>

Görev listeleme (_all.html.erb):

<% for post in @shark.posts %>
  <ul>
    <li class="post">
      <%= post.body %>
      <%= button_tag "Görevi Kaldır", data: { controller: "posts", action: "posts#remove" } %>
      <%= button_tag "Beğen", data: { controller: "posts", action: "posts#upvote" } %>
    </li>
  </ul>
<% end %>

Her buton, Stimulus denetleyicisindeki farklı bir eylemi (action) tetikler.

💻 6. Stimulus Controller Yazımı​

// ~/sharkapp/app/javascript/controllers/posts_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["body", "add", "show"]

  addBody() {
    let content = this.bodyTarget.value
    this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>")
  }

  showAll() {
    this.showTarget.style.visibility = "visible"
  }

  upvote() {
    let post = event.target.closest(".post")
    post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>')
  }

  remove() {
    let post = event.target.closest(".post")
    post.style.visibility = "hidden"
  }
}

Bu controller, gönderi ekleme, gösterme, beğenme ve kaldırma işlemlerini DOM üzerinde yönetir.

❓ Sıkça Sorulan Sorular (SSS)​

1. Stimulus neden React yerine tercih edilmeli?

Sunucu taraflı render’larda hafif ve sade JavaScript katmanı sağlar, karmaşık durum yönetimine gerek bırakmaz.

2. Stimulus ve Turbolinks birlikte çalışır mı?

Evet, Turbolinks sayfa geçişlerini optimize ederken Stimulus DOM etkileşimlerini yönetir.

3. Controller, Target ve Action ne işe yarar?

Controller: JS sınıfı, Target: erişilecek element, Action: olayları yöneten metod.

4. Font Awesome neden kullanıldı?

Gönderi beğenisi gibi işlemleri görsel olarak belirtmek için.

5. Stimulus controller’larını nereye koymalıyım?

app/javascript/controllers klasörüne; Webpacker bu dizini otomatik algılar.

🎯 Sonuç​

Artık Ruby on Rails uygulamanızda Stimulus.js ile küçük ama etkili etkileşimler oluşturabiliyorsunuz. Bu yaklaşım, klasik MVC yapısını korurken modern bir kullanıcı deneyimi sunar.

💡 Rabisu Bulut platformunda Stimulus destekli Rails uygulamanızı hemen test edin!