Inserciones Dinámicas de Notas con AJAX y SJR en Rails

Clase 33 de 36 • Curso de Introducción a Ruby on Rails

Resumen

¿Cómo integrar comportamiento dinámico utilizando AJAX y SJR?

En el mundo del desarrollo web, el dinamismo es esencial. En Rails, podemos lograrlo usando Server Generated JavaScript Responses (SJR). Este enfoque permite llevar una petición desde nuestro cliente, procesarla en el servidor y devolver un JavaScript que se ejecuta en el cliente, agregando así contenido dinámicamente a nuestro HTML existente. Este ciclo de vida brinda grandes capacidades de interacción dinámica dentro de nuestras páginas web.

¿Cómo estructurar el contenedor de notas en Rails?

Modificar la vista existente: Dirígete a show.html.haml dentro de views/tasks/show. Allí, estructura el contenedor de notas para facilitar la inserción dinámica.
```
.nodes
  -# Aquí incluyes el contenido previo, pero dentro de un nuevo div
```
Agregar más datos a las notas: Incorpora detalles como la fecha de creación y el autor de la nota. Usa métodos provistos por Rails para una mejor presentación, como time_ago_in_words.
```
%p= time_ago_in_words(node.created_at) + " by " + node.user.email
%hr/
```

¿Cómo reutilizar el fragmento de código?

Para manejar mejor el código, reutiliza fragmentos comunes utilizando parciales en Rails.

Crear parciales: Crea un parcial llamado node.html.erb dentro de un nuevo directorio views/tasks/nodes.

Refactorizar: Mueve el código deseado al parcial y asegúrate de pasar correctamente las variables necesarias.

<div class="node">
  <p><%= time_ago_in_words(node.created_at) %> by <%= node.user.email %></p>
  <hr/>
</div>

¿Cómo implementar el concepto de SJR en Rails?

Configurar el controlador: Asegúrate de que la acción create en tu controlador renderice el JavaScript adecuado que el cliente necesita.

# tasks_controller.rb
def create
  @node = Node.create(node_params)
  respond_to do |format|
    format.js
  end
end

Crear un archivo de plantilla de JavaScript: En views/tasks/nodes, crea un archivo create.js.erb.

const parentNode = document.querySelector('.nodes-container .nodes');
const newNode = document.createElement('div');
newNode.innerHTML = '<%= j render @node %>';

parentNode.appendChild(newNode);
document.querySelector('#node_body').value = '';
window.scrollTo(0, parentNode.scrollHeight);

¿Cómo transformar una petición HTML en una petición AJAX?

Para que el envío de datos a través de AJAX funcione correctamente, debemos especificar que el formulario es remoto:

Modificar el formulario: Cambia el formulario en show.html.haml para que use AJAX.

= simple_form_for @task, remote: true do |f|
  = f.input :body
  = f.button :submit

¡Animemos a los responsables a participar!

Al finalizar, podrías considerar mejorar la funcionalidad asegurando que solo los usuarios autorizados, como los responsables de una tarea, puedan añadir comentarios. Rails te facilita el manejo de autorizaciones utilizando gemas como CanCanCan.

¡Aprovecha esta poderosa funcionalidad para darle un toque dinámico y profesional a tus aplicaciones web! Incluye AJAX y SJR en tu repertorio, y observa cómo tus habilidades de desarrollo web se elevan al siguiente nivel.

Jorge Chirinos

student•

Les dejo el codigo utilizado en el minuto 6 ya que no lo consigo en otra parte.

<%- if @note.persisted? %>
    var parentNode = document.querySelector(".notes-container .notes")
    var div = document.createElement("div")
    div.innerHTML = "<%= j render 'tasks/notes/note', note: @note %>"
    parentNode.appendChild(div)
    document.getElementById("note_body").value = "";
    window.scrollTo({
        top: window.innerHeight,
        behavior: "smooth"
    });
<% end %>```

Jose Ernesto Tamay Balam

student•

gracias!

Juan Zenón

student•

Seguro les encantó la funcionalidad que se implementó en este video. Muchos de ustedes se habrán dado cuenta que es una estrategia que ofrece una buena experiencia de usuario, pero, ¿qué pasa si necesito hacer esto en muchas partes de mi aplicación? ¿Siempre tendría que agregar un JS para cada una de las partes en las que quiero este tipo de funcionalidad? Esto es algo que tal vez muchos quieran evitar.

Bueno, el día de hoy vengo a hablarles de turbolinks_render. Recordemos que turbolinks es una biblioteca de JS que ayuda a que la carga de las páginas parezca más rápida de lo que es, así como cachear las páginas para que el navegar hacia atrás o hacia adelante sea mucho más rápido y no siempre haga peticiones a nuestro server.

Ahora, turbolinks_render es una gema que usa la magia de turbolinks para reemplazar el contenido de la página cuando el server recibe una petición AJAX. Es decir, basta con que nos encarguemos de que nuestro form haga una petición AJAX y que el controlador en el server haga render de una página completa (no solo de un partial). La gema añade un middleware para que la respuesta contenga un JS que reemplace el contenido de la página con el contenido de la respuesta.

Para nuestro caso podríamos usar el form tal cual lo tenemos y el controller:

def create
    @note = @task.notes.new(note_params)
    @note.user = current_user
    @note.save
    render 'tasks/show', task: @task
 end

Podemos obtener el mismo resultado con un redirect_to (aunque esto puede causar que la misma página se guarde varias veces en la historia del navegador), pero este método hace que sea más limpio para el usuario.

Para quien tenga curiosidad este es el link al repo de turbolinks_render. Y para los que tengan aún más curiosidad, este es el JS que la gema envía y hace toda la magia.

Heber Juan Lazo Benza

student•

Parece q no tiene matenimiento la gema.

Juan Moreno

company_admin•

Ahora con rails 7 hay muchos cambios por lo que es necesario hacer algnas configuraciones de otra manera para lograr el comportamiento deseado. En esta versión de rails se usa Turbo Stream Y con esto ya no es necesario crear el archivo create.js.erb, solo hay que modificar el controlador de creacion de notas asi:

 def create
    @note = @task.notes.new(note_params)
    @note.user = current_user
    @note.save

    if @note.persisted?
      respond_to do |format|
        format.turbo_stream do
          render turbo_stream: turbo_stream.append('notes', partial: 'tasks/notes/note',
          locals: { note: @note })
        end
      end
    end
  end

En cuento a la plantilla app\views\tasks\show.html.haml quedaria algo asi.


.notes-container
  #notes
    - @task.notes.each do |note|
      = render 'tasks/notes/note', note: note
  = simple_form_for Note.new, url: task_notes_path(task_id: @task.id), html: { data: {controller: "reset-form", action: "turbo:submit-end->reset-form#reset"}}, remote: true do |f|
    = f.input :body, label: false, as: :string, placeholder: 'Notes', input_html: { autocomplete: :off}

Finalmente es necesario crear el archivo app\javascript\controllers\reset_form_controller.js para lograr el comportamiento de limpiar el formulario una vez enviado

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

export default class extends Controller {
    reset() {
     this.element.reset()
    }
 }

Aqui mas información https://hotwired.dev/

Juan Pablo Grisales Quintero

student•

Que buen aporte, Juan. Muchas gracias, esto me serivrá mucho!

Fabián Veliz

student•

Muchisimas gracias por el aporte!

Jose Ramos

student•

Todo me funciono bien pero no entendi bien como se enlaza el create.js.erb con el create del note_controller. Como rails sabe que lo tiene que ejecutar cuando se crea un note nuevo? Hice un experimento y me di cuenta de que es obligatorio que tenga el mismo nombre que la función que se esta ejecutando en el controller pero aun no entiendo cómo sabe que lo tiene que ejecutar.

Johan Tique

teacher•

Hola José, es algo que se puede considerar "mágico", al inicio del curso mencioné que una de las ventajas de RoR es filosofía CoC (convention over configuration) que hace además parte de la filosofía del creador del framework llamada Conceptual Compression.

Lo que estás experimentando aquí es la conveción de invocación en las vistas y que puede ser obtenida gracias a las capacidades de meta-programación de Ruby como lenguaje (de la que no tienes que preocuparte mucho por ahora), revisa de nuevo la clase 8 para reforzar las convenciones dentro del patrón MVC, por otro lado, ten en cuenta que el formato (JS en este caso) es transversal a la acción del controlador pero igualmente importante al momento en el que Rails busca el renderizador y tipo de respuesta apropiada. Con esto te quiero decir que en las vistas puedes al mismo tiempo tener múltiples tipos de vista con el mismo nombre por ejemplo: create.html.haml create.js.erb create.json.jbuilder etc...

Johan Tique

teacher•

Como complemento de mi mensaje anterior, también ten en cuenta que en Rails puedes sobreescribir y manipular todos los comportamientos por defecto, así que si quieres hacer una renderización de otro archivo dentro de tu acción puedes usar el método render y apuntar a la ruta de tu archivo render ver doc aquí

Jesús Miguel Quinto Teran

student•

Más sobre SJR: https://signalvnoise.com/posts/3697-server-generated-javascript-responses

Cristian Pisco Intriago

student•

El reto

ability.rb

class Ability
  include CanCan::Ability

  def initialize(user)
    can :manage, Task, owner_id: user.id
    can :read, Task, participating_users: { user_id: user.id }
    can :create, Note, task: { owner_id: user.id }
  end
end

show.html.haml

%p#notice= notice

%p
  %b Name:
  = @task.name
%p
  %b Description:
  = @task.description
%p
  %b Due date:
  = @task.due_date
%p
  %b Category:
  = @task.category
-#rails routes | grep notes -> task_notes
.notes-container
  .notes
    - @task.notes.each do |note|
      = render 'tasks/notes/note.html.haml', note: note
    - if can? :create, @task
      = simple_form_for Note.new, url: task_notes_path(task_id: @task.id), remote: true do |f|
        = f.input :body, label: false, as: :string, placeholder: 'Ingrese su nota...', input_html: {autocomplete: :off}
= link_to 'Edit', edit_task_path(@task)
\|
= link_to 'Back', tasks_path

Oscar Julio Silvera Cruz

student•

Mi solución para que solo el responsable añada notas o comentarios a la tarea con cancancan

añadimos el siguiente código al controlador del note, justamente debajo de los callbacks, estas dos lineas nos permiten tener a dispocision los recursos del tasks, por medio de la relacion through.:
```
 load_resource :task
 load_and_authorize_resource :through => :task
```

luego el abillity que es quien controla el acceso le agregue el siguiente código.

 	# * si el usuario es propietario del post puede escribir notas
 can :create, Note do |n|
 	# obtener el propietario de la tarea
 	owner_id = Task.find(n.task_id).owner_id
 	# obtener el pid del current user
 	user_id = user.id
 	# comparo si el current user es propietario de la tarea
 	owner_id == user_id
 end

Este código lo que hace es comparar el id del propietario de la tarea, contra el id del usuario actual y si es igual es porque es el propietario y le permite agregar la tarea sino no lo realiza.

Espero les sea de utilidad, saludos y nunca paren de aprender y compartir. :)

Agustina Corvo

student•

Buena solución! Solo un comentario, la siguiente linea no es necesaria:

user_id  =  user.id

Y la última linea del bloque quedaría:

owner_id  == user.id

Daniel J. Pérez

student•

Estoy usando Rails 7 y basta con usar el partial de _notes para que cada que se suba la nota haga un pequeño refresh de la página y aparezca la nota, sin el archivo create.js.erb

Sebastian Molinas

student•

Hola Profesor Johan, estoy tratando de realizar la tarea para solo permitir a los propietarios de la tarea poder crear notas, como soy nuevo en programación, me pierdo un poco todavía, podrías darme una mano.

Diego Alexander Gomez Chavarria

student•

Hola tengo todos los archivos tal cual el codigo propuesto en las clases, sin embargo, al enviar la nota no se me hace el renderizado con la nueva nota sino que al dale enter a la nota queda ahi como si aun la estuvese editando y no me aparece el js renderiado, uso exactamente las mismas versiones de ruby y rails propuestas en el curso. el log que me sale en consola es el siguiente

Started POST "/tasks/65/notes" for 127.0.0.1 at 2023-02-12 13:32:52 -0500
Processing by Tasks::NotesController#create as JS
  Parameters: {"note"=>{"body"=>"hola"}, "task_id"=>"65"}
  User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 8], ["LIMIT", 1]]
  Task Load (0.3ms)  SELECT "tasks".* FROM "tasks" WHERE "tasks"."id" = $1 LIMIT $2  [["id", 65], ["LIMIT", 1]]
  ↳ app/controllers/tasks/notes_controller.rb:17:in `set_task'
   (0.2ms)  BEGIN
  ↳ app/controllers/tasks/notes_controller.rb:7:in `create'
  Note Create (0.7ms)  INSERT INTO "notes" ("body", "user_id", "task_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["body", "hola"], ["user_id", 8], ["task_id", 65], ["created_at", "2023-02-12 18:32:52.561585"], ["updated_at", "2023-02-12 18:32:52.561585"]]
  ↳ app/controllers/tasks/notes_controller.rb:7:in `create'
   (0.9ms)  COMMIT
  ↳ app/controllers/tasks/notes_controller.rb:7:in `create'
  Rendering tasks/notes/create.js.erb
  Rendered tasks/notes/_note.html.haml (Duration: 2.0ms | Allocations: 2665)
  Rendered tasks/notes/create.js.erb (Duration: 2.8ms | Allocations: 3047)
Completed 200 OK in 14ms (Views: 4.6ms | ActiveRecord: 2.3ms | Allocations: 10104)

El codgo del controlador

class Tasks::NotesController < ApplicationController
  before_action :set_task

  def create
    @note = @task.notes.new(note_params)
    @note.user = current_user
    @note.save
  end

  private

  def note_params
    params.require(:note).permit(:body)
  end

  def set_task
    @task = Task.find(params[:task_id])
  end
end

El codigo del show

%p#notice= notice

%p
  %b Name:
  = @task.name
%p
  %b Description:
  = @task.description
%p
  %b Due date:
  = @task.due_date
%p
  %b Category:
  = @task.category.name

  .notes-container
  .notes
    - @task.notes.each do |note|
      = render 'tasks/notes/note.html.haml', note: note
    - if can? :create, @task
      = simple_form_for Note.new, url: task_notes_path(task_id: @task.id), remote: true do |f|
        = f.input :body, label: false, as: :string, placeholder: 'Ingrese su nota...', input_html: {autocomplete: :off}

= link_to t('common.edit'), edit_task_path(@task)
\|
= link_to t('common.back'), tasks_path

El codigo del partial notes que esta dentro de tasks/notes

%p= note.body
%p= time_ago_in_words note.created_at
%p= note.user.email
%hr

el codigo de create.js.erb que esta dentro de tasks/notes

<%- if @note.persisted? %>
  var parentNode = document.querySelector(".notes-container .notes")
  var div = document.createElement("div")
  div.innerHTML = "<%= j render 'tasks/notes/note', note: @note %>"
  parentNode.appendChild(div)
  document.getElementById("note_body").value = "";
  window.scrollTo({
    top: window.innerHeight,
    behavior: "smooth"
  });
<% end %>

Gracias

Manuel Alejandro González Cabello

student•

Logré hacer que solo el owner de la tarea sea capáz de crear notas pero quiero restrigingirlo a nivel de vista también. Es decir no quiero que aparezca el campo para ingresar nota si es que no puede crear tareas. Estuve leyendo la gema y entiendo que debería poder hacerlo con un if antes del simple_form_for

- if can?(:create, Note)
  = simple_form_for Note.new, url: task_notes_path(task_id: @task.id), remote: true do |f|
    =f.input :body, label: false, as: :string, placeholder: 'Ingrese nota', input_html: {autocomplete: :off }

Pero me sigue apareciendo. Pero el ability esta ok porque cuando intenta crear la nota me saca y me indica que no tengo permisos para crear. Que puede esatr pasando?

Johan Tique

teacher•

Hola, vale, muéstrame el contenido del archivo ability.rb por favor

Manuel Alejandro González Cabello

student•

Saludos profesor. Aquí dejo el ability.rb

class Ability
  include CanCan::Ability

  def initialize(user)

    can :manage, Task , owner_id: user.id 
    can :read, Task, participating_users: {user_id: user.id} 
    can :create, Note, task: {owner_id: user.id}
        
  end
end

Este es el show de task

%p#notice= notice

%p
  %b Name:
  = @task.name
%p
  %b Description:
  = @task.description
%p
  %b Due date:
  = @task.due_date.strftime("%d-%m-%Y")
%p
  %b Category:
  = @task.category.name
%p
  %b Created at:
  = @task.created_at.strftime("%d-%m-%Y %H:%M")
  
.notes-container
  .notes
    - @task.notes.each do |note|
      = render 'tasks/notes/note.html.haml', note: note
  
- if can?(:create, Note)
  = simple_form_for Note.new, url: task_notes_path(task_id: @task.id), remote: true do |f|
    =f.input :body, label: false, as: :string, placeholder: 'Ingrese nota', input_html: {autocomplete: :off }


= link_to 'Edit', edit_task_path(@task)
\|
= link_to 'Back', tasks_path

Lester Potestad Berovides

student•

Con Rails 8 el código para renderizar el parcial de notas que se muestra en la clase no me funcionó, tuve que quitar las extensiones del fichero al indicar la dirección donde se encuentra ubicado. Finalmente el código ajustado me quedó así:

= render 'tasks/notes/note', note: note

Edwin Stiven Galviz Quimbayo

student•

solucion a la prueba, en mi caso lo estoy haciendo con el sistema de plantillas erb, solo deje el permiso sobre el create ya dicha el propietario del tarea solo puede crear la nota y los otros pueden observarla

ability

lass Ability
  include CanCan::Ability

  def initialize(current_user)
   can :manage, Task, owner_id: current_user.id
   can :read, Task, participating_users: { user_id: current_user.id }
   can :manage, Note, task: { owner_id: current_user.id }
  end
end

vista

<% if can? :create, Note %>
  <div class="notas">
   
    <%= form_with method: :post, url: task_notes_path(@task.id), model: @task.notes.new do |form|%>
      <% if @task.errors.any? %>
        <div style="color: red">
          <h3><%= pluralize(@task.errors.count, "error") %> prohibited this note from being saved:</h3>

          <ul>
            <% @task.errors.each do |error| %>
              <li><%= error.full_message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

      <div>
        <%= form.label :body, style: "display: block" %>
        <%= form.text_area :body, id: "note_body" %>
      </div>

      <div>
        <%= form.submit %>
      </div>
    <% end %>
  </div>
<% end %>

Walter Jaramillo

student•

https://www.hostinger.es/tutoriales/que-es-ajax

Que es AJAX