Learn Liveview

Test Connection to your phoenix application

# Test current routes
Mix.Tasks.Phx.Routes.run(~c"")

# Test liveview
Phoenix.LiveView.Socket.__struct__()

Understand standard phoenix view

There are the worklfow for a standard phoenix view:

In router.ex, the controller are defined to handle action.

get "/demo", DemoController, :index
get "/demo/:demo_name", DemoController, :show

In file lib/hello_web/controllers/demo_controller.ex

defmodule HelloWeb.DemoController do
  use HelloWeb, :controller

  def index(conn, _param) do
    render(conn, :index)
  end

  def show(conn, %{"demo_name" => demo_name}) do
    render(conn, :show, demo_name: demo_name)
  end
end

• index and show functions in DemoControllers defines how to render the view.
• The render logic is implement inside: demo_html.ex file basides demo_controller.ex.

Inside demo_html.ex

defmodule HelloWeb.DemoHTML do
  use HelloWeb, :html

  embed_templates "demo_html/*"

  def index(assigns) do
    ~H"""
    Hello! Demo
    """
  end
end

• It renders :index action by using a elixir function.
• It renders other actions by using the template files inside demo_html folder.
  • In folder lib/hello_web/controllers/demo_html, the template file show.html.heex renders the :show action

Understand plug

Understand the use macro, such as in the HelloWeb.DemoHTML module, there is use HelloWeb, :html.

When use MyModule, some: :options:
Elixir will invoke MyModule.__using__/1 passing the second argument of use as its argument.
So, the use HelloWeb, :html will invoke HelloWeb‘s __using__/1:

@doc """
When used, dispatch to the appropriate controller/live_view/etc.
"""
defmacro __using__(which) when is_atom(which) do
  apply(__MODULE__, which, [])
end

It calls HelloWeb.html.

The center of phoenix is plugs, and read hello_web.ex is the key to understand the flow of your request.

• Plugis also controller. All Phoenix controllers are plugs
  • All plugs must implement call/2 which accepts a conn and returns a conn. In our case, we’re looking for a conn that has some rendered HTML.
• live also goes through controller.
  • live() macros is adding a GET route and calls the Phoenix.LiveView.Plug.

Create LiveView

Instead of using get or post, we defines the route for LiveView with live:

scope "/", HelloWeb do
  pipe_through :browser

  get "/", PageController, :home
  get "/hello", HelloController, :index
  get "/demo", DemoController, :index
  get "/demo/:demo_name", DemoController, :show
  live "/guess", WrongLive
end

We then, create lib/hello_web/live/wrong_live.ex

defmodule HelloWeb.WrongLive do
  # use Phoenix.LiveView
  use HelloWeb, :live_view

  def mount(_params, _session, socket) do
    socket = assign(socket, score: 0, message: "Make a guess")
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    
Your score: <%= @score %>
    

      <%= @message %>
    
    <%= for n <- 1..10 do %>
      <%= n %>
    <% end %>
    

    """
  end

  def handle_event("guess", %{"number" => guess} = _data, socket) do
    message = "Your guess: #{guess}. Wrong. Guess again."
    socket = assign(socket, message: message, score: socket.assigns.score - 1)

    {
      :noreply,
      socket
    }
  end
end