Bom, comecei a fazer um sistema para entender melhor como funciona Elixir e aprender sobre o Phoenix.
O Phoenix é um framework para Elixir, assim como o Rails é um framework para o Ruby, ele tem como missão ser um framework produtivo e que não compromete a velocidade ou a capacidade de manutenção.
Sem mais delongas, decidi criar um CRUD simples em Elixir para eu registrar os livros que eu já li, utilizei os seguintes comandos:
# Cria a aplicação.
$ mix phx.new booklistx
# Entra no projeto criado
cd booklistsx
# Gerador do CRUD (estilo scaffold do rails)
mix phx.gen.html Books Book books title:string
# Cria o banco e cria a tabela de books
mix ecto.create
mix ecto.migrate
Defini como root da aplicação ser a listagem de livros.
# lib/booklistx_web/router.ex
defmodule BooklistxWeb.Router do
use BooklistxWeb, :router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_flash
plug :protect_from_forgery
plug :put_secure_browser_headers
end
pipeline :api do
plug :accepts, ["json"]
end
scope "/", BooklistxWeb do
pipe_through :browser
# get "/", PageController, :index # <- Comentei essa linha!
resources "/", BooksController # <- Adicionei essa linha!
end
# Other scopes may use custom stacks.
# scope "/api", BooklistxWeb do
# pipe_through :api
# end
end
Executei o comando para iniciar a aplicação.
$ mix phx.server
Após isso estava pronto eu já podia adicionar livros e remover livros, foi ai que quando criei um livro mostrava uma flash message.
Utilizei o inspetor do browser para ver como era o html.
Ví que o html sempre vinha com as tags html de flash message.
<p class="alert alert-info" role="alert">Book updated successfully.</p>
<p class="alert alert-danger" role="alert"></p>
Tem apenas um truque simples de css para não mostrar nada caso não houver nenhum conteúdo na tag.
/* assets/css/phoenix.css */
.alert:empty {
display: none;
}
Por padrão o arquivo vem assim, carregando as tags de alert mesmo que não tenha nenhuma flash message.
# lib/booklistx_web/layout/app.html.exx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Booklistx · Phoenix Framework</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<%= csrf_meta_tag() %>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
</ul>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<main role="main" class="container">
#-> <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
#-> <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= render @view_module, @view_template, assigns %>
</main>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>
Isso estava me incomodando, pesquisei sobre como funciona e encontrei em uma issue sugerindo para utilizar da seguinte forma.
# lib/booklistx_web/layout/app.html.exx
...
<%= if info = get_flash(@conn, :info) do %>
<p class="alert alert-info" role="alert"><%= info %></p>
<% end %>
<%= if error = get_flash(@conn, :error) do %>
<p class="alert alert-danger" role="alert"><%= error %></p>
<% end %>
...
Ele só vai mostrar agora caso tenha alguma flash message, porem essas variaveis no meio do código não ficou legal info e error.
Decidi fazer algo parecido com o que já fiz no Rails.
Acredito que deve ter várias outras formas de resolver isso e que deve ser melhor, porem essa foi a que eu mais gostei porque é simples e utiliza os conceitos que eu venho estudando.
Criei os seguintes arquivos:
# Cria o arquivo shared_view
$ touch lib/booklistx_web/shared_view.ex
# Cria a pasta shared
$ mkdir lib/booklistx_web/templates/shared
# Cria o arquivo _flash_message.html.exx
$ touch lib/booklistx_web/templates/shared/_flash_message.html.eex
# lib/booklistx_web/shared_view.ex
defmodule BooklistxWeb.SharedView do
use BooklistxWeb, :view
import BooklistxWeb.Router.Helpers
def show_flash_message(conn) do
conn
|> get_flash
|> flash_message
end
def flash_message(%{"info" => message}) do
render "_flash_message.html", class: "primary", message: message
end
def flash_message(%{"error" => message}) do
render "_flash_message.html", class: "danger", message: message
end
def flash_message(_), do: nil
end
Aqui eu estou utilizando coisas que eu aprendi como pipe e pipeline no método show_flash_message e pattern matching para o método flash_message.
Já a partial ficou da seguinte forma.
# lib/booklistx_web/templates/shared/_flash_message.html.eex
<p class="alert alert-<%= @class %>" role="alert">
<%= @message %>
</p>
O nosso layout ficou da seguinte forma:
# lib/booklistx_web/layout/app.html.exx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Booklistx · Phoenix Framework</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<%= csrf_meta_tag() %>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
</ul>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<main role="main" class="container">
<%= BooklistxWeb.SharedView.show_flash_message(@conn) %>
<%= render @view_module, @view_template, assigns %>
</main>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>
Conclusão
No meu ponto de vista, ficou bem melhor do que utilizarmos as variáveis (info e error) e aqueles IF direto no layout, acredito que deve ter soluções melhores, mas essa foi a que eu consegui fazer e mais me agradou. Consegui colocar em pratica algumas coisas que aprendi como o pipe, pipeline e pattern matching.
Vou deixar o link desse código que eu fiz no github.
https://github.com/guilhermeyo/booklistx
Fique a vontade para deixar um feedback e melhorias que posso realizar.
Referências
#23: Partial Templates with Phoenix
Elixir forum - Check for error and info alert in Phoenix
Issue phoenixframework - Add has_flash? functions. #1757
Top comments (0)