Module 2 Evaluation - Cómo definir las rutas

May 08, 2020

Nosotros definiremos todas nuestras rutas dentro de app.rb

Primero, según las historias de usuario, el usuario puede ver el landing page, así que definimos nuestra primera ruta ”/” y la vista index dentro de la carpeta views (views/index.erb). Ya que esta vista no comparte ni el header ni el footer de las demás páginas, no la metemos dentro de nuestro layout.

# app.rb
get "/" do
  erb :index, layout: false
end

Esta vista debe incluir todo el html de la página inicial, eso incluye el head y los link. Luego, en las demás páginas el usuario puede ver el navbar y footer. Entonces creamos nuestro layout (views/layout.erb). Podemos entonces tener el siguiente HTML.

<!-- views/layout.erb -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <navbar>...</navbar>
    <%= yield %>
    <footer>...</footer>
  </body>
</html>

Ya que nuestro CSS estará en la carpeta public/css, la llamamos con la ruta absoluta /css/style.css, si no usamos una ruta absoluta podemos tener problemas para llamar nuestros estilos. Es importante incluir yield, ya que ahí estará el contenido de cada una de nuestras páginas.

Ahora, el usuario también puede ver la página de search. Así que creamos la ruta GET /search y la vista views/search.erb.

# app.rb
get "/search" do
  erb :search
end

El usuario puede buscar libros y lo hace desde la página search. Entonces en la vista search debemos tener un formulario que mande el input del usuario a la misma página y que sea visible en la URL.

<!-- views/search.erb -->
<form method="GET" action="/search">
  <input name="query" />
  <button type="submit">Buscar</button>
</form>

Y ese input lo recogemos en nuestra misma ruta GET /search.

# app.rb
get "/search" do
  query = params[:query]
  # Con el input del usuario, llamamos a la API de google
  # https://www.googleapis.com/books/v1/volumes?q=EL_VALOR_DEL_QUERY
  # Y obtenemos los libros y los almacenamos en la variable books
  # Y lo pasamos a la vista search
  erb :search, locals: { books: books }
end

El usuario puede darle click a la portada del libro en la página search (views/search.erb) y eso lo manda a la página de detalles de ese libro. Entonces creamos la ruta GET /books/:bookid y la vista del libro views/bookdetail.erb

# app.rb
get "/books/:book_id" do
  book_id = params[:book_id]
  # Con el ID, llamamos a la API de google
  # https://www.googleapis.com/books/v1/volumes/ID_DEL_LIBRO
  # Y obtenemos ese libro en especifico y se lo podemos pasar
  # a nuestra vista
  erb :book_detail, locals: { book: book }
end

El usuario puede agregar un libro desde la vista search o book_detail a través de algún formulario. Entonces luego de agregarlo en la vista, el usuario debe poder ver sus libros agregados en la página My Books. Nosotros le pondremos solo /books y crearemos la vista views/book.erb.

# app.rb
get "/books" do
  # Llamamos los libros que tengamos almacenados con lazyrecord
  # Y lo asignamos a la variable books que luego podemos
  # pasar a nuestra vista
  erb :books, locals: { books: books }
end

EL usuario puede editar un libro que ya agregó antes. Esto lo hace con ID que tenga almacenado en lazyrecord. Para eso creamos la ruta GET /books/:bookid/edit vista views/bookedit.erb.

# app.rb
get "/books/:book_id/edit" do
  id = params[:book_id]
  # Buscamos el libro con nuestro modelo Book que hereda de lazyrecord
  book = Book.find(id)
  erb :book_edit, locals: { book: book }
end

En la misma página el usuario puede actualizar algunos datos del libro, entonces creamos un formulario que haga una petición PUT o PATCH a la misma ruta de la página. Nosotros usaremos PUT :).

<!-- views/book_detail.rb -->
<form method="POST" action="/books/:book_id/edit">
  <!--
    Para mandar un método PUT con un formulario, el form
    debe tener el método POST y agregamos un input:hidden
  -->
  <input type="hidden" name="_method" value="PUT" />
</form>

# app.rb
put "/books/:book_id/edit" do
  id = params[:book_id]
  book = Book.find(id)
  # También recogemos los otros input del usuario con params
  # Modificamos los datos del libro con algo como
  # book.notes = params[:notes]
  book.save # Y lo guardamos con lazy record
  # Y como ya esta guardado podemos redirigir a la página que queramos (GET)
  # Nosotros lo redirigimos a la misma página para editar el libro,
  # pero también podemos mandarlo a la pagina My Books (/books)
  redirect to("/books/#{id}/edit")
end

Por el momento esas son las rutas que estamos trabajando, luego pondré como definir el modelo Book con LazyRecord. Gracias.