Saltar al contenido

Phoenix live view #1 – Instalación

En Hidup Consulting nos hemos propuesto presentar con todos los honores una tecnología que ha nacido para revolucionar el mundo de la informática. Este será el primero de una serie de artículos mensuales con los que vamos a aprender a implementar esta apasionante tecnología que incluye “Phoenix 1.5” Llamada Phoenix live view. Como no podía ser de otra manera en el primer artículo de la serie  nos centraremos en la instalación.

Phoenix live view #1 – Instalación:

Phoenix nos permite un gran número de opciones al crear un nuevo proyecto para este caso usaremos la opción “–live”:

$ mix phx.new example --live

El cual nos creará una aplicación phx con las estructura y dependencias necesarias. Y nos preguntará si queremos instalar las dependencias… esto es útil para no tener que hacerlo posteriormente, en el caso de que no vayamos a añadir más dependencias.

* creating example/config/config.exs
* creating example/config/dev.exs
* creating example/config/prod.exs
* creating example/config/prod.secret.exs
* creating example/config/test.exs
* creating example/lib/example/application.ex
* creating example/lib/example.ex
* creating example/lib/example_web/channels/user_socket.ex
* creating example/lib/example_web/views/error_helpers.ex
* creating example/lib/example_web/views/error_view.ex
* creating example/lib/example_web/endpoint.ex
* creating example/lib/example_web/router.ex
* creating example/lib/example_web/telemetry.ex
* creating example/lib/example_web.ex
* creating example/mix.exs
* creating example/README.md
* creating example/.formatter.exs
* creating example/.gitignore
* creating example/test/support/channel_case.ex
* creating example/test/support/conn_case.ex
* creating example/test/test_helper.exs
* creating example/test/example_web/views/error_view_test.exs
* creating example/lib/example/repo.ex
* creating example/priv/repo/migrations/.formatter.exs
* creating example/priv/repo/seeds.exs
* creating example/test/support/data_case.ex
* creating example/lib/example_web/templates/layout/root.html.leex
* creating example/lib/example_web/templates/layout/app.html.eex
* creating example/lib/example_web/templates/layout/live.html.leex
* creating example/lib/example_web/views/layout_view.ex
* creating example/lib/example_web/live/page_live.ex
* creating example/lib/example_web/live/page_live.html.leex
* creating example/test/example_web/views/layout_view_test.exs
* creating example/test/example_web/live/page_live_test.exs
* creating example/lib/example_web/gettext.ex
* creating example/priv/gettext/en/LC_MESSAGES/errors.po
* creating example/priv/gettext/errors.pot
* creating example/assets/webpack.config.js
* creating example/assets/.babelrc
* creating example/assets/js/app.js
* creating example/assets/css/app.scss
* creating example/assets/package.json
* creating example/assets/static/favicon.ico
* creating example/assets/css/phoenix.css
* creating example/assets/static/images/phoenix.png
* creating example/assets/static/robots.txt

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd example

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

En este punto, hay que configurar la base de datos de la aplicación en config/dev.exs para el entorno de desarrollo. 

config :example, Example.Repo,
  username: "postgres",
  password: "postgres",
  database: "example_dev",
  hostname: "localhost",
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

Podemos comprobar que en el archivo router.ex llamó a otro plug para los flash, y nos creó, una ruta con plv.

pipeline :browser do
...
    plug :fetch_live_flash
...
end
  
scope "/", ExampleWeb do
    pipe_through :browser
    
    live "/", PageLive, :index
end

Vamos a modificar primero el fichero lib/example_web/page_live.ex y modificamos la función mount. La cual es la primera función que plv ejecuta en la vista, se usa, para inicializar todo lo necesario. Y la modificamos para añadirle una variable que mostrar al visualizar la página.

Por defecto Phoenix te genera un buscador dinámico. El cúal es interesante de leer, para comprender mejor cómo funciona. Esto lo veremos más adelante, de momento, cambiaremos el contenido del fichero por lo siguiente:

defmodule ExampleWeb.PageLive do
  use ExampleWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, hello: "Hola mundo")}
  end
end

Ahora nos vamos al fichero lib/example_web/page_live.html.leex. El cual contiene el html a generar, al visualizar la pagina. Cambiaremos su contenido por:

<section class="phx-hero">
  <h1><%= @clock %></h1>
</section>

Ahora levantamos el servidor con:

$ mix phx.server

Este comando nos levantará un servidor en local. con la ruta localhost:4000Si la visitamos nos mostrará la web, con la variable que le hemos añadido.

phoenix-framework

Con esto, terminamos esta primera entrega que esperamos os haya sido de provecho. El mes que viene, veremos cómo realizar un reloj que se actualice de forma dinámica. 

Ha sido un placer mostraros esta aproximación al fascinante lenguaje Phoenix espero seguir contando con vuestra atención en los próximos artículos. Si os ha parecido interesante o tenéis algún tipo de pregunta estaré encantado de responderla. 

Dejad vuestros comentarios, y compartir con nosotros vuestras impresiones.

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 codigos informáticos para desarrolladores inquietos.