Introdução

Neste tutorial, vamos mergulhar no desenvolvimento full stack utilizando Ruby on Rails, com foco em como integrar Hotwire e Stimulus para criar aplicações web reativas e de alta performance. Ruby on Rails é um framework poderoso que permite desenvolver aplicações complexas de forma rápida e eficiente. Hotwire é uma abordagem nova para construção de interfaces de usuário, que elimina a necessidade de um JavaScript pesado, enquanto Stimulus complementa Hotwire ao adicionar comportamentos interativos em seus componentes HTML. Nesta caminhada, abordaremos a configuração do ambiente, criação de uma aplicação simples e a implementação do Hotwire e Stimulus para melhorar a experiência do usuário. Vamos lá!

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter Ruby e Rails instalados em sua máquina. Você pode verificar as versões instaladas utilizando os comandos `ruby -v` e `rails -v`. Se não estiverem instalados, você pode seguir as instruções oficiais na página do Ruby e no site do Rails.

    commands
    # Verificar versões instaladas
    ruby -v
    rails -v

  2. Criação do Projeto Rails

    Utilize o terminal para criar um novo projeto Rails. Navegue até o diretório onde você deseja criar o projeto e execute o seguinte comando para gerar uma nova aplicação Rails com suporte para Hotwire:

    commands
    rails new myapp --skip-javascript --skip-turbolinks
    cd myapp
    bundle add hotwire-rails

  3. Configuração do Hotwire e Stimulus

    Depois de adicionar Hotwire ao seu projeto, você deve executar a instalação. Isso adicionará as dependências do Stimulus ao seu projeto Rails. Execute os seguintes comandos:

    commands
    rails hotwire:install

  4. Criação do Modelo de Tarefa

    Agora vamos criar um modelo simples de ‘Tarefa’. Isso nos permitirá explorar as funcionalidades do Hotwire e Stimulus enquanto interagimos com dados. Execute os seguintes comandos para gerar o modelo e a migração:

    commands
    rails generate model Task title:string completed:boolean
    rails db:migrate

  5. Criação do Controlador de Tarefas

    Com o modelo criado, agora precisamos de um controlador que gerencie as tarefas. Execute o comando abaixo para gerar o controlador e, em seguida, adicione as ações necessárias:

    commands
    rails generate controller Tasks

    TasksController.rb
    class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def create
    @task = Task.new(task_params)
    if @task.save
      respond_to do |format|
        format.html { redirect_to tasks_path }
        format.turbo_stream
      end
    else
      render :new
    end
  end

  private

  def task_params
    params.require(:task).permit(:title, :completed)
  end
end

  6. Criando as Views com Hotwire

    Vamos agora criar as views de tarefas utilizando Turbo para renderizar a lista de tarefas. Em `app/views/tasks/index.html.erb`, adicione o seguinte código:

    index.html.erb
    <h1>Tarefas</h1>
<%= form_with model: Task.new, local: false do |form| %>
  <%= form.text_field :title %>
  <%= form.submit "Criar Tarefa" %>
<% end %>

<turbo-frame id="tasks">
  <%= render @tasks %>
</turbo-frame>

  7. Renderizando Cada Tarefa

    Crie uma parcial para renderizar cada tarefa, facilitando a injeção reativa. Em `app/views/tasks/_task.html.erb`, adicione:

    _task.html.erb
    <div>
  <%= task.title %>
  <%= button_to 'Completar', complete_task_path(task), method: :patch, data: { turbo_method: :patch } %>
</div>

  8. Finalizando a Integração com Stimulus

    Para complementar a aplicação, adicione um controlador Stimulus. Crie um arquivo em `app/javascript/controllers/task_controller.js` e inclua uma simples lógica para executar alguma ação ao interagir com a tarefa.

    task_controller.js
    import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  complete() {
    alert('Tarefa completa!');
  }
}

  9. Executando a Aplicação

    Agora, você pode executar a aplicação e verificar se tudo está funcionando corretamente. Inicie o servidor Rails e acesse a aplicação pelo navegador.

    commands
    rails server
    # Acesse o navegador e vá para http://localhost:3000/tasks

Conclusão

Neste tutorial, você aprendeu a configurar um aplicativo Ruby on Rails completo utilizando Hotwire e Stimulus para criar uma interface reativa. Vimos como configurar o ambiente, criar um modelo simples e implementar ações reativas com Turbo e Stimulus. Essa abordagem moderna reduz a complexidade do JavaScript, promovendo uma experiência de desenvolvimento mais fluida e produtiva. Com esse conhecimento, você está pronto para explorar mais sobre aplicações web reativas com Rails.

Hashtags

#RubyOnRails #Hotwire #Stimulus #DesenvolvimentoFullStack #AplicaçõesReativas