O objetivo deste artigo falar sobre o Ciclo de Vida do Request no framework web para a Linguagem de Programao Elixir chamado Phoenix. Esse assunto introdutrio para comearmos a aprender o framework, onde criaremos duas pginas ao longo do nosso projeto.

Como base para este guia, foram retirados alguns trechos da documentao oficial do Phoenix, e de algumas ideias do bootcamp da Rocketseat.

Criando o Projeto

Primeiramente, vamos criar o projeto rodando o comando abaixo:

$ mix phx.new hello_phoenix --no-ecto

Note que usamos um underline para separar o nome hello_phoenix. Essa separao chamada de snake case uma conveno da comunidade Elixir, usada bastante tambm para nomear arquivos. Com o underline, nossa aplicao vai conseguir converter o nome hello_phoenix para HelloPhoenix em nomes de mdulos.

Note tambm que usamos a flag --no-ecto, isso diz ao Phoenix que no queremos usar um banco de dados nessa aplicao.

Vamos entrar agora na pasta do projeto com o comando cd hello_phoenix e subir o servidor com o comando mix phx.server. Vamos acessar no navegador o endereo http://localhost:4000/ e voc dever ver a tela de Boas-vindas do Phoenix:

Se voc no tem ainda o Elixir e o Phoenix instalado, recomendo visitar esse artigo que criei: Instalao das ferramentas de um desenvolvedor Elixir

Uma Nova Pgina

Quando seu navegador acessa http://localhost:4000/ na barra de endereo, ele envia uma solicitao HTTP (HTTP request) para qualquer servio que esteja sendo executado nesse endereo, neste caso, nossa aplicao Phoenix.

A solicitao HTTP feita de um verbo e um caminho. Por exemplo, as seguintes solicitaes do navegador so traduzidas em:

Existem outros verbos HTTP. Por exemplo, o envio de um formulrio onde normalmente usamos o verbo POST.

Os aplicativos da Web normalmente lidam com solicitaes mapeando cada par de verbo / caminho em uma parte especfica de seu aplicativo. Essa correspondncia no Phoenix feita pelo roteador (router). Por exemplo, podemos mapear "/articles" para uma parte de nosso aplicativo que mostra todos os artigos. Portanto, para adicionar uma nova pgina, nossa primeira tarefa adicionar uma nova rota.

Uma nova rota

O roteador mapeia pares de verbo HTTP / caminho exclusivos para pares de controlador / ao que os trataro. Os controladores (controllers) em Phoenix so simplesmente mdulos Elixir. Aes (actions) so funes definidas nesses controladores.

O Phoenix gera um arquivo de roteador para ns em novos aplicativos no caminho lib/hello_phoenix_web/router.ex. aqui que vamos encontrar a rota de Boas-Vindas do Phoenix.

O percurso do nosso "Welcome to Phoenix!", quando acessamos antes o endereo http://localhost:4000/ tem esta aparncia.

get "/", PageController, :index

Vamos digerir o que essa rota est nos dizendo. Visitando http:// localhost:4000/ emita uma solicitao HTTP GET (HTTP GET request) para o caminho raiz. Todas as solicitaes como essa sero tratadas pela funo index no mdulo HelloPhoenixWeb.PageController definido em lib/hello_phoenix_web/controllers/page_controller.ex.

A pgina que iremos construir dir simplesmente "Hello World, from Phoenix!" quando apontaremos nosso navegador para o endereo http://localhost:4000/hello.

A primeira coisa que precisamos fazer para criar essa pgina definir uma rota para ela. Vamos abrir o arquivo lib/hello_phoenix_web/router.ex em um editor de texto. Para um aplicativo totalmente novo, o arquivo semelhante:

Esse scope "/" simplesmente informa que todos os caminhos que estiverem nesse escopo (nesse bloco de cdigo), sero colocados aps o endereo http://localhost:4000. Outro exemplo, se tivssemos outro bloco de cdigo abaixo com scope "/api", ento todos os caminhos que estivessem nesse escopo, seriam colocados aps o endereo http://localhost:4000/api.

scope "/", HelloWeb do  # por enquanto, no se preocupe com essa linha abaixo  pipe_through :browser  get "/", PageController, :index  # aqui adicionamos a nova rota  # http://localhost:4000/hello  get "/hello", HelloController, :indexend

Um Novo Controller

Os controladores so mdulos Elixir e as aes so funes Elixir definidas neles. O objetivo das aes reunir todos os dados e realizar as tarefas necessrias para a renderizao. Em nossa nova rota precisamos de um mdulo HelloPhoenixWeb.HelloController com uma ao index/2.

Para que isso acontea, vamos criar o arquivo lib/hello_phoenix_web/controllers/hello_controller.ex e torn-lo parecido com o seguinte:

defmodule HelloPhoenixWeb.HelloController do  # no se importe muito agora com a linha abaixo, apenas  # saiba que isso define o nosso mdulo como um Controller  use HelloPhoenixWeb, :controller  def index(conn, _params) do    text(conn, "Hello World, from Phoenix!")  endend

Ao acessarmos agora o endereo http://localhost:4000/hello no navagador, devemos ver a nossa mensagem:

Bem, voc deve estar se perguntando, o que esse conn e esse _params? essa funo text t vindo de onde? Pois bem, vamos agora entrar em detalhes para entender tudo isso.

Todas as aes do controlador levam dois argumentos. A primeira a conexo, conn, que uma struct que contm muitos dados sobre a solicitao. A segunda, params, so os parmetros da solicitao, ou seja, so dados passados nela. Aqui, no estamos usando params ainda, ento evitamos os avisos do compilador adicionando o underline _.

Vamos ver a conn com mais detalhes. Para isso, vamos modificar o cdigo adicionando IO.inspect():

defmodule HelloPhoenixWeb.HelloController do  use HelloPhoenixWeb, :controller  def index(conn, _params) do    conn    |> IO.inspect()    |> text("Hello World, from Phoenix!")  endend

Agora, atualizando a pgina http://localhost:4000/hello, podemos ver no terminal que a varivel conn uma struct %Plug.Conn{}:

Se voc no tem muita familiaridade com o Pipe Operator |> voc pode acessar esse guia: https://elixirschool.com/pt/lessons/basics/pipe-operator/

Antes de entender a varivel params, vamos ver de onde est vindo a funo text. Ela pertence ao mdulo Phoenix.Controller, mas como j temos todas as funcionalidades do controller no nosso mdulo, motivo que colocamos a linha use HelloPhoenixWeb, :controller, no precisamos chamar a funo com o mdulo dessa forma Phoenix.Controller.text().

Mas por curiosidade, se colocarmos dessa forma Phoenix.Controller.text() e repousarmos a seta do mouse sobre a funo, podemos verificar informaes de entrada, retorno e exemplos de uso:

lembrando que essa funcionalidade de passar o mouse em cima faz parte da extenso do vscode ElixirLS. Eu falo sobre essa e outras ferramentas nesse artigo: Instalao das ferramentas de um desenvolvedor Elixir

Uma ltima coisa antes de partirmos para o entendimento do params criar uma visualizao (view).

defmodule HelloPhoenixWeb.HelloController do  use HelloPhoenixWeb, :controller  def index(conn, _params) do    # aqui trocamos a funo `text` para a funo `render`    render(conn, "index.html")  endend

Criando a Segunda Pgina

Vamos adicionar uma nova pgina que ir reconhecer um pedao da URL, rotul-la como um "mensageiro" e pass-la atravs do controlador para o modelo para que nosso mensageiro possa dizer ol.

Lembrando que, para adicionar uma pgina, precisamos criar uma rota.

Vamos converter o map params para um JSON. A funo Phoenix.Controller.json() consegue converter automaticamente as chaves de um map para JSON (OBS: para structs devemos fazer modificaes, mas no vamos nos preocupar com isso agora):

def index(conn, params) do    conn    |> put_status(:ok)    # Phoenix.Controller.json(espera uma conexo, e um map) retorna uma conexo    |> json(params)end

DICA: para o JSON ficar formatado no navegador voc precisa instalar uma extenso do chrome: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=pt-BR