Saltar al contenido

Phoenix live view #2 – Dinamismo

Este mes vamos a realizar una pequeña práctica, que nos permita actualizar el contenido de la web de manera simple. Para ello vamos a realizar un pequeño reloj.  Utilizaremos el ejemplo del mes pasado. 

Primero cambiaremos el archivo page_live.html.leex y modificamos el nombre de la variable que contiene por uno mas acorde. Por ejemplo “@clock”.

<section class="phx-hero">
  <h1></h1>
</section>

Ahora modificaremos el contenido del fichero page_live.ex con el siguiente código.

defmodule ExampleWeb.PageLive do
  use ExampleWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    Process.send_after(self(), :update, 1000)
    {:ok, assign(socket, clock: "Cargando...")}
  end

  def handle_info(:update, socket) do
    Process.send_after(self(), :update, 1000)
    {:noreply, assign(socket, clock: Time.utc_now() |&gt; Time.truncate(:second) |&gt; Time.to_string)}
  end
end

Ahora repasemos que hace este código.

Empecemos por el método mount. Cual como ya sabemos del anterior articulo. Es el primer método que se ejecuta al generar la web.

En él estamos haciendo dos cosas:

  Process.send_after(self(), :update, 1000)

Esta función nos ejecutara el método update, una vez pasado 1000 mili-segundos es decir un segundo. Que es cada cuento vamos a actualizar el reloj.

Por otro lado:

{:ok, assign(socket, clock: "Cargando...")}

Esta línea es la respuesta que espera plv. Para montar el PageLive con la vista. Esta formada por 2 valores. :ok y socket. A este ultimo añadimos las variables que queremos usar en la vista “@clock” gracias a la función “assign”. Le pondremos un string con el texto “Cargando…” con la idea de mostrarlo incialmente antes de que el reloj comience a funcionar.

Una vez cargada, al segundo ejecutará el método:

def handle_info(:update, socket) do
  Process.send_after(self(), :update, 1000)
  {:noreply, assign(socket, clock: Time.utc_now() |&gt; Time.truncate(:second) |&gt; Time.to_string)}
end

El cual en su primera línea se volverá a llamar a a si mismo, para generar el bucle infinito del reloj.

Y en su siguiente línea actualizará la variable “@clock” con la hora actual. En formato: hora, minutos, y segundos. En una variable del tipo string.

El resultado,  es que donde antes teníamos nuestro “hola mundo” del ejercicio anterior, ahora tenemos el reloj que se actualiza cada segundo.

En siguiente el artículo, veremos cómo recoger los datos de un formulario de forma dinámica. 

gustavo-desarrollador-hidup

Gustavo Adolfo Mesa Roldán

Development Team Leader en Hidup. Pionero en la introducción de Phoenix y Elixir en nuestro País. Amante de las películas de "serie B" y webinars de códigos informáticos para desarrolladores inquietos.