Hotwire 및 Rails를 사용한 실시간 리뷰 시스템 구축

오늘 우리는 Hotwire을 탐색할 것이다. 이것은 JSON이 아닌 온라인으로 HTML을 보내서 웹 응용 프로그램을 구축하는 새로운 방법이다.
Google은 프로젝트에 의견을 남기고 페이지를 넘기지 않고 실시간으로 이 의견을 볼 수 있는 간단한 프로그램을 구축함으로써 Hotwire가 Ruby on Rails와 어떻게 협동하는지 이해할 것입니다.
이 안내서는 내가 작년에 쓴 a guide의 또 다른 방법을 소개하는데, 이것은 자극을 통해 비슷한 체험을 창조하도록 지도한다.이 두 가지 방법은 모두 효과가 있고 효과가 양호하다.오늘 소개한 방법은 어떠한 자바스크립트 코드도 작성하지 않아도 체험할 수 있는 방법을 제공하였으며, 어떤 루비 온 레일스 개발자에게도 매우 자연스러울 것이다.
이것은 우리가 완성한 후의 모습이다.예쁘지는 않지만, 작동할 수 있고, 자바스크립트 한 줄을 쓸 수 없습니다.

이를 위해 새로운 Rails 6.1 앱을 시작으로 이 앱에 Hotwire를 설치한 뒤 보기와 컨트롤러에 Hotwire를 추가하는 기초 지식을 소개한다.
내가 이 글을 쓰는 전제는 당신이 Ruby on Rails 개발의 기초 지식을 숙지하고 이전에 Hotwire를 사용한 적이 없다는 것이다.
이 강좌의 전체 소스 코드 on Github을 찾을 수 있습니다.
들어가자.

우리의 프로젝트를 세우다

우선, 우리는 새로운 Rails 응용 프로그램을 만들고, 프로젝트 자원을 구축하여 우리의 평론 시스템을 구축할 것이다.기존의 프로그램을 사용할 수 있지만, 나와 함께 처음부터 시작하면, 이 안내서를 따르기 쉽다는 것을 알게 될 것이다.
먼저 다음 콘솔 명령을 실행하여 Rails 애플리케이션을 만들고 설정합니다.

rails new hotwire-comments -T
cd hotwire-comments
rails g scaffold Project name:string
rails g model Comment body:text project:references
rails db:migrate
rails s

브라우저에서 http://localhost:3000/projects으로 이동하여 항목을 만듭니다.우리는 평론 시스템을 구축할 때 이 프로젝트를 사용할 것이다.
완료되면 가장 좋아하는 편집기에서 프로그램의 코드를 열고 has_many :comments을 app/models/project.rb에 추가합니다.
그런 다음 app/views/projects/show.html.erb을 업데이트하여 항목 표시 페이지에 주석을 표시합니다.

<!-- app/views/projects/show.html.erb -->

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

<p>
  <strong>Name:</strong>
  <%= @project.name %>
</p>
<div>
  <% @project.comments.each do |comment| %>
    <div>
      <%= comment.body %>
    </div>
  <% end %>
</div>

<%= link_to 'Edit', edit_project_path(@project) %> |
<%= link_to 'Back', projects_path %>

rail 콘솔에 주석을 추가합니다.

Project.first.comments << Comment.create(body: "Hotwire comments are coming soon!")

훌륭했어
지금까지 추적을 성공적으로 수행한 경우 http://localhost:3000/projects/1을 방문하면 다음과 같은 내용이 표시됩니다.

이제 우리는 Hotwire를 설치하고 공부를 시작할 준비가 되어 있다.

핫라인을 설치하다

Hotwire를 설치하려면 먼저 콘솔에서 명령을 실행하거나 Gemfile을 수동으로 업데이트하고 터미널에서 bundle install을 실행하여 Hotwire rails gem을 Gemfile에 추가합니다.

bundle add hotwire-rails

gem을 추가한 후 터미널에서 설치 프로그램을 실행합니다.

rails hotwire:install

설치 프로그램이 실행된 후 rails 서버를 다시 시작하십시오. 그렇지 않으면 이 안내서 뒷부분에서 정의되지 않은 방법 오류가 발생할 수 있습니다.
현재 Hotwire가 설치되어 있으며, 실시간으로 렌더링된 주석을 가져오는 것부터 시작합니다.

설명 흐름 추가

Google이 사용하는 Hotwire는 Basecamp팀의 설계와 유지보수 프레임워크에 의존합니다.그 중 하나는 Turbo이다.터보(Turbo)는 페이지 변경 및 양식 제출을 가속화하는 보완 기술입니다.
Turbo 번들의 주요 구성 요소 Turbo Frames과 Turbo Streams에 대한 관심은 Dell의 목적에 따라 결정됩니다.
Turbo 흐름은 Websocket을 통해 브라우저에 페이지 변경 사항을 보냅니다.Google 애플리케이션에 Hotwire Rails 프로젝트를 추가하면 터보 Streams 작업을 단순화하는 도움말 세트에 액세스할 수 있습니다.
프로젝트 전시 페이지를 다음과 같이 업데이트해서 어떻게 작동하는지 알아보겠습니다.

<!-- app/views/projects/show.html.erb -->

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

<p>
  <strong>Name:</strong>
  <%= @project.name %>
</p>

<%= turbo_stream_from @project, :comments %>
<div id="<%= "#{dom_id(@project)}_comments" %>">
  <%= render @project.comments.order(created_at: :desc) %>
</div>

<%= link_to 'Edit', edit_project_path(@project) %> |
<%= link_to 'Back', projects_path %>

우리 하나하나 이곳의 변화를 훑어봅시다.
우선, 우리는 터보스트림을 추가하여 우리 프로젝트의 평론 채널에서 방송을 청취하는 데 사용한다.이 흐름은 프로젝트 리뷰 업데이트를 구독하는 방법입니다.주석: 현재 프로젝트의 주석 흐름(주)을 구독하고 있습니다. 현재 프로젝트의 주석 흐름을 구독하고 있기 때문입니다.
댓글 목록의 아버지div에 id를 추가했습니다.이 id는 DOM에 브로드캐스트 주석을 추가할 위치를 식별하는 데 사용됩니다.이 id가 존재하지 않거나 브로드캐스트의 id와 일치하지 않으면 브로드캐스트 메모가 변경될 때 DOM 업데이트가 발생하지 않습니다.
마지막으로 commentpartial을 사용하여 각 주석을 표시합니다.그 부분은 아직 존재하지 않는다. 우리는 지금 덧붙인다.

mkdir app/views/comments
touch app/views/comments/_comment.html.erb

그리고 다음 내용으로 평론 부분을 기입하세요.

<!-- app/views/comments/_comment.html.erb -->

<div id="<%= dom_id(comment) %>">
  <%= comment.body %>
</div>

여기서 모든 주석이 DOM에 유일한 id를 가지고 있는지 확인해야 새 주석이 DOM에 정확하게 삽입될 수 있습니다.
우리가 흐름 설정과 평론을 실시간으로 미리 처리하는 마지막 단계는 평론 모델에 리셋을 추가하는 것이다.
이 리셋이 실행될 때, 새로 만든 댓글은 프로젝트 #show 페이지에서 현재 구독하고 있는 프로젝트 #comments에서 방송됩니다.

  # app/models/comment.rb
include ActionView::RecordIdentifier

after_create_commit { broadcast_prepend_to [project, :comments], target: "#{dom_id(project)}_comments" }

이곳에서 우리는 터보 레일스가 제공한 broadcast_prepend_to 방법을 사용한다.트리거된 콜백을 모델을 변경하여 DOM 컨텐트를 추가, 삭제 및 교체하는 방법에는 여러 가지가 있습니다.이러한 방법을 찾는 가장 좋은 방법은 turbo-rails code을 읽는 것이다.target에 전달되는 broadcast_prepend_to 값은 이전에 DOM에서 설정한 id와 정확히 일치해야 합니다.
브로드캐스트 채널의 대상을 설정하는 데 사용되는dom id 메서드는 일반적으로 모델에서 사용할 수 없으므로 모델에는 관련 ActionView 도우미 클래스가 포함되어 있습니다.이것은 우리가 적당한 채널에 방송하는 방법을 간소화시켰다.GoRails을 통해 Chris Oliver에 H/T를 보내 주셔서 감사합니다.
이러한 변화가 있으면, 우리는 우리의 흐름을 시험해 보고, 그것이 어떻게 작동하는지 봅시다.
웹 브라우저에서 항목이 열려 있는지 확인한 다음 Rails 콘솔을 열고 주석을 만듭니다.성공적으로 수행한 경우 콘솔에서 주석을 작성한 후 다음과 같이 프로젝트 페이지에 추가된 주석이 브라우저에서 열립니다.

양식으로 설명 추가

Google 구독은 잘 되고 있지만 사용자는 Rails 콘솔을 통해 내용을 추가하지 않습니다.양식을 추가하여 이 자습서를 종료하고 페이지를 넘기지 않고 UI에 주석을 추가합니다.
먼저 양식을 표시할 섹션을 만듭니다.

touch app/views/comments/_form.html.erb

테이블에 다음을 추가합니다.

<!-- app/views/comments/_form.html.erb -->

<%= turbo_frame_tag "comment_form" do %>
  <%= form_with model: comment, url: project_comments_path(@project) do |form| %>
    <% if comment.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved:</h2>

        <ul>
          <% comment.errors.each do |error| %>
            <li><%= error.full_message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
    <%= form.text_field :body %>
    <%= form.submit %>
  <% end %>
<% end %>

이것은 표준 Rails form partial과 매우 가깝고 터보 frame 라벨을 추가하여 전체 요소를 감싸줍니다.
이 프레임 탭은 폼을 제출할 때 폼 부분의 내용을 선택적으로 바꿀 수 있도록 해 줍니다. 특별한 자바스크립트를 작성할 필요가 없습니다.
현재 우리는 이 폼에서 온 제출을 처리할 컨트롤러가 필요합니다.

rails g controller Comments

디렉터에 다음을 입력합니다.

# app/controllers/comments_controller.rb

class CommentsController < ApplicationController
  def create
    @project = Project.find(params[:project_id])
    @comment = @project.comments.new(comment_params)

    respond_to do |format|
      if @comment.save
        format.turbo_stream { render turbo_stream: turbo_stream.replace(
  'comment_form', 
  partial: 'comments/form', 
  locals: { comment: Comment.new }
) }
        format.html { render partial: 'comments/form', locals: { comment: Comment.new }}
      else
        format.turbo_stream { render turbo_stream: turbo_stream.replace(
  'comment_form', 
  partial: 'comments/form', 
  locals: { comment: @comment }
) }
        format.html { render partial: 'comments/form', locals: { comment: @comment }}
      end
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:body)
  end
end

우리의comments controller create 방법은 상당히 표준적인Rails 컨트롤러이지만,create 방법은turbo 흐름 요청에 응답합니다.
터보 흐름 요청이 이 노드에 전송되면 컨트롤러는 터보 흐름 응답으로 응답하여 성공적인 요청과 실패한 요청에서comments/form partial로comment form DOM 요소를 대체합니다.이전과 마찬가지로 터보 프레임의'comment form'id는 터보 흐름에 전달되는 목표와 일치해야 합니다.방법을 바꾸다.
실패 응답과 성공 응답 사이의 유일한 차이점은 실패 응답에 기존 @comment을 사용해서 오류를 발생시키는 것입니다.성공한 후에, 우리는 폼의comment 국부 변수를 새로운comment으로 설정하여 폼의 바디 필드를 지웁니다.
오류 경로를 테스트하려면 주석 모델을 업데이트하여 바디 필드의 존재를 검증할 수 있습니다.
그런 다음 의견을 작성하기 전에 라우트에 적절한 라우트를 추가해야 합니다.rb 파일:

# config/routes.rb

Rails.application.routes.draw do
  resources :projects do
    resources :comments, only: %i[create]
  end
end

마지막으로 프로젝트 데모 페이지에 설명 양식을 표시합니다.

<!-- app/views/projects/show.html.erb -->
<p id="notice"><%= notice %></p>

<p>
  <strong>Name:</strong>
  <%= @project.name %>
</p>

<%= render partial: "comments/form", locals: { comment: Comment.new } %>
<%= turbo_stream_from @project, :comments %>
<div id="<%= "#{dom_id(@project)}_comments" %>">
  <%= render @project.comments.order(created_at: :desc) %>
</div>

<%= link_to 'Edit', edit_project_path(@project) %> |
<%= link_to 'Back', projects_path %>

뷰를 업데이트한 후 항목 페이지를 새로 고칩니다.
만약 모든 것이 정확하게 설정되어 있다면, 추가된 새로운 평론이 페이지를 넘기지 않은 것을 보게 될 것입니다.제출할 때 주석의 본문을 비우면 페이지에 추가된 오류 메시지가 보입니다.

마무리

Hotwire와 Rails를 결합시키고 클라이언트 상호작용에 대한 소량의 자극을 더하는 것은 고성능, 확장 가능, 개발자와 사용자 친화적인 웹 응용 프로그램을 구축하는 강력한 방식이다.
최신 JavaScript 프레임워크를 사용하여 구축된 단일 페이지 응용 프로그램과 독립된 전단이 자신의 위치를 가지고 있지만, 만약 당신이 표준 SaaS 응용 프로그램을 구축하는 작은 단체라면, 나는 당신이 Hotwire가 구동하는 응용 프로그램을 배우는 데 시간을 들이고, 당신의 팀을 효율적으로 유지하며, 사용자를 위해 문제를 해결하는 데 전념하도록 권장합니다.
유용한 핫라인 리소스:

Hotwire intro video

Turbo handbook

Stimulus handbook

GoRails Hotwire introduction

turbo-rails source

읽어주셔서 감사합니다!여느 때와 마찬가지로, 만약 당신에게 어떤 문제가 있거나 내가 도울 수 있다면, 저에게 연락 주세요.