Introdução

Neste tutorial, vamos explorar a criação de APIs em tempo real utilizando o framework Phoenix e a biblioteca LiveView, ambos construídos com a linguagem Elixir. A proposta é implementar um sistema que permita a comunicação em tempo real entre o servidor e os clientes de forma eficiente, abordando conceitos fundamentais como sockets, eventos e atualizações dinâmicas. O Phoenix é conhecido por sua alta performance e escalabilidade, tornando-se uma opção poderosa para desenvolvedores que buscam construir aplicações web modernas e interativas. Ao final deste guia, você terá um entendimento completo de como criar uma aplicação web com funcionalidades de tempo real, incluindo a integração de testes e o ciclo de desenvolvimento completo. Vamos começar!

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o Elixir e o Erlang instalados em seu sistema. Use os seguintes comandos para verificar se as instalações estão corretas: `elixir -v` e `erl -v`. Se você não tiver o Elixir instalado, acesse a documentação oficial do Elixir para instruções de instalação adequadas ao seu sistema operacional.

    commands
    # Verifique as versões do Elixir e Erlang
    elixir -v
    erl -v

  2. Criar um Novo Projeto Phoenix

    Utilize o mix, ferramenta de gerenciamento de pacotes do Elixir, para criar um novo projeto Phoenix com suporte a LiveView. Execute o comando abaixo e siga as instruções para selecionar as dependências necessárias.

    commands
    # Criar um novo projeto Phoenix com LiveView
    mix phx.new my_app --live

  3. Configuração do Banco de Dados

    O Phoenix utiliza Ecto para interagir com o banco de dados. Abra o arquivo `config/dev.exs` para configurar o banco de dados e, em seguida, crie e migre o banco de dados com os comandos abaixo.

    commands
    # Atualize o banco de dados no arquivo de configuração
    # depois execute os comandos para migrações
    mix ecto.create
    mix ecto.migrate

  4. Criação do Modelo e do Contexto

    Vamos criar um novo modelo para representar nossos dados. Neste caso, criaremos um modelo `Message` para uma aplicação de chat. Utilize o comando mix para gerar o contexto e o modelo.

    commands
    # Gerar o contexto e modelo Message
    mix phx.gen.schema Message messages body:string

  5. Implementação do LiveView

    Agora vamos implementar um LiveView que irá permitir a interação em tempo real. Crie um novo arquivo `message_live.ex` no diretório `lib/my_app_web/live` e adicione a lógica necessária para a comunicação em tempo real com o cliente.

    MessageLive.ex
    defmodule MyAppWeb.MessageLive do
  use Phoenix.LiveView
  alias MyApp.Repo
  alias MyApp.Message

  def mount(_params, _session, socket) do
    {:ok, assign(socket, messages: list_messages())}
  end

  def handle_event("send_message", %{"body" => body}, socket) do
    %Message{body: body}
    |> Repo.insert()

    {:noreply, assign(socket, messages: list_messages())}
  end

  defp list_messages do
    Repo.all(Message)
  end
end

  6. Definição da Rota para LiveView

    Você deve agora definir a rota que irá renderizar o LiveView. Abra o arquivo `router.ex` e adicione a nova rota conforme o exemplo a seguir.

    router.ex
    scope "", MyAppWeb do
  pipe_through :browser

  live "/messages", MessageLive
end

  7. Implementação do Frontend do LiveView

    Agora vamos adicionar o frontend que irá permitir a interação do usuário. Crie um arquivo `messages.html.leex` no diretório `lib/my_app_web/live`. Nesse arquivo, você definirá a estrutura HTML para mostrar as mensagens e um formulário para enviar novas mensagens.

    messages.html.leex
    <div>
  <ul>
    <%= for message <- @messages do %>
      <li><%= message.body %></li>
    <% end %>
  </ul>

  <form phx-submit="send_message">
    <textarea name="body"></textarea>
    <button type="submit">Enviar</button>
  </form>
</div>

  8. Testando a Aplicação

    Utilize o mix para iniciar o servidor Phoenix e testá-lo em seu navegador. Acesse `http://localhost:4000/messages` para visualizar a LiveView em funcionamento. Você pode abrir várias abas para ver a comunicação em tempo real entre os clientes.

    commands
    # Iniciar o servidor da aplicação
    mix phx.server

  9. Implementação de Testes Unitários

    Crie testes para assegurar que sua lógica de LiveView funcione conforme o esperado. Você pode usar a biblioteca ExUnit para testar a funcionalidade de sua LiveView. Crie um arquivo `message_live_test.exs` e escreva os testes necessários.

    message_live_test.exs
    defmodule MyAppWeb.MessageLiveTest do
  use MyAppWeb.ConnCase
  import Phoenix.LiveViewTest

  test "displays messages in the live view", %{conn: conn} do
    {:ok, view, _html} = live(conn, "/messages")
    assert render(view) =~ "Enviar"
  end

  # Adicione mais testes conforme necessário
end

Conclusão

Neste tutorial, você aprendeu a criar uma aplicação web em tempo real utilizando Phoenix e LiveView, desde a configuração inicial do projeto até a implementação de um sistema de mensagens. Abordamos a criação de um modelo, configuração do banco de dados e a implementação de uma LiveView para comunicação em tempo real. Com essas ferramentas, você agora pode desenvolver aplicações interativas que podem responder instantaneamente às ações dos usuários. Explore mais sobre o Phoenix e LiveView para construir funcionalidades adicionais e aprimorar suas aplicações.

Hashtags

#Elixir #PhoenixFramework #LiveView #APIs #DesenvolvimentoWeb #TempoReal