Como Implementar Mensagens Flash Animadas no Rails com Turbo

Na criação de sites, é fundamental ter uma comunicação eficaz com o usuário. Oferecendo feedback imediato após ações como salvar um formulário ou processar dados, as mensagens flash são uma excelente ferramenta para isso. Com a ajuda do Turbo, essas mensagens no Rails podem tornar a experiência mais agradável, não apenas informar, graças à fluidez da animação. Hoje, iremos demonstrar como é possível incorporar mensagens flash animadas no canto superior direito do seu aplicativo Rails.

O que Você Precisa Saber Antes de Começar

Antes de mergulharmos na implementação, certifique-se de que seu ambiente Rails já esteja configurado com o Turbo. O Turbo é parte do Hotwire, uma abordagem moderna para desenvolvimento web que minimiza a necessidade de JavaScript complexo, substituindo-o por blocos HTML substituíveis.

Passo a Passo para Implementação

1. Desenvolvendo o Partial para Flash Messages

Em app/views/layouts/, crie um partial _flash.html.erb. Aqui é onde você define o HTML para sua mensagem flash e a animação associada. Vamos utilizar um controller Stimulus para para aplicar a animação.

<%= turbo_frame_tag "flash" do %>
  <% if notice %>
    <div data-controller="flash" data-flash-text-value="<%= notice %>" data-flash-type-value="success"></div>
  <% end %>
  <% if alert %>
    <div data-controller="flash" data-flash-text-value="<%= alert %>" data-flash-type-value="error"></div>
  <% end %>
<% end %>

Adicione também um render ao seu layout (application.html.erb por exemplo).

<%= render "layouts/flash" %>

2. Preparando o Controller

Comece adicionando uma mensagem flash no seu controller. Após uma ação bem-sucedida, como criar ou atualizar um registro, adicione:

flash[:notice] = "Sua ação foi concluída com sucesso!"

3. Criando o Turbo Stream

No diretório app/views, crie um arquivo .turbo_stream.erb correspondente à ação. Por exemplo, para uma ação de criação, você terá create.turbo_stream.erb. Dentro deste arquivo, adicione:

<%= turbo_stream.update 'flash', partial: 'layouts/flash' %>

4. Adicionando o Comportamento

Vamos utilizar sweetalert para aplicar o efeito desejado. Antes de prosseguir tenha certeza de adicionar a dependência a seu projeto:

# Utilizando Webpack ou ESBuild
yarn add sweetalert2

# Ou se estiver utilizando importmap
bin/importmap pin sweetalert2

Em seguinda, crie um controller stimulus. Em nosso exemplo ele deverá se chamar flash_controller.js

import { Controller } from "@hotwired/stimulus";
import Swal from "sweetalert2";

// Connects to data-controller="flash"
export default class extends Controller {
  static values = {
    text: String,
    type: String,
  };

  connect() {
    const Toast = Swal.mixin({
      toast: true,
      position: "top-end",
      showConfirmButton: false,
      showCancelButton: true,
      cancelButtonText: "Entendi",
      timer: 6000,
      timerProgressBar: true,
      didOpen: (toast) => {
        toast.addEventListener("mouseenter", () => Swal.stopTimer);
        toast.addEventListener("mouseleave", () => Swal.resumeTimer);
      },
    });

    Toast.fire({
      icon: this.typeValue,
      title: this.textValue,
    });
  }
}

Conclusão

Implementar mensagens flash animadas no Rails com Turbo é uma ótima forma de melhorar a experiência do usuário, tornando as interações mais suaves e visivelmente agradáveis. Além de eficiente, este método mantém seu código limpo e sua aplicação fluída.

Espero que este guia tenha ajudado você a implementar mensagens flash com animação no seu aplicativo Rails. Experimente e veja como pequenos detalhes podem significativamente enriquecer a interação do usuário com seu aplicativo.

Gostou deste tutorial? Não esqueça de compartilhar com seus colegas desenvolvedores. E se tiver alguma dúvida ou sugestão é só falar!