Introdução
Sua primeira LiveVew
Tempo de leitura: 2 minutos
#Um passo de cada vez
O framework Phoenix trás consigo várias ferramentas configuradas para você não ter que se procupar: envio de emails, sistema de presença em tempo real, clusterização etc. Isso é incrível quando você precisa entregar um produto o mais rápido possível porém pode ser amedrontador quando você está só começando.
Para facilitar o entendimento, construí uma versão do LiveView bem enxuta chamada LiveView Playground. Iremos utilizar ele no início deste curso e gradualmente adicionaremos mais funcionalidades para você entender como as coisas funcionam no Phoenix e LiveView um pouco mais a cada passo.
#A LiveView mais básica de todas
Para scripts simples o comando elixir
executa brevemente um arquivo. Vamos criar um arquivo chamado hello_liveview.exs
.
# conteúdo do arquivo hello_liveview.exs
Mix.install([
{:liveview_playground, "~> 0.1.1"}
])
defmodule PageLive do
use LiveviewPlaygroundWeb, :live_view
def render(assigns) do
~H"""
Hello World
"""
end
end
LiveviewPlayground.start()
.ex ou .exs?
.ex
, já a extensão .exs
é mais usada para denotar que este arquivo é apenas um script separado que não faz parte do projeto principal. Também usamos .exs
como extensão dos nossos testes.
Em seguida basta executar no seu terminal elixir hello_liveview.exs
e o servidor irá ligar em http://localhost:4000
#Experimente
Tente colocar um pouco de HTML na sua função render/1
. Para poder ver as modificações você irá precisar desligar o servidor com Control+c
duas vezes e rodar novamente o projeto.
#Sucesso!
Agorá que você possui em mãos um playground de LiveView, nos próximos passos iremos entender o que cada pedaço desse código representa.
Feedback
Você tem algum feedback sobre esta página? Conte-nos!