Prerequisiti
Prima di cominciare a seguire questo tutorial, sincerati di avere installati sul computer:
1. Elixir
Digitando nel terminale:
elixir -vL'output dovrá essere simile a:
Elixir 1.10.3 (compiled with Erlang/OTP 22)2. Phoenix
Digitando nel terminale:
mix phx.new -vL'output dovrá essere simile a:
Phoenix v1.5.3Se hai una versione piú vecchia, ti consigliamo di aggiornarla all'ultima versione.
3. Node.js
Digitando nel terminale:
node -vL'output dovrá essere simile a:
v12.17.01 - Creiamo l'app
Nel terminale, esegui il seguente comando mix per generare una nuova app Phoenix:
mix phx.new live_view_contatore --live --no-ectoL'opzione --live indica al generatore dell'app che stiamo creando un'applicazione Liveview. Con questo comando verranno impostate le dipendenze e il codice standard per iniziare nel modo piú veloce possibile.
L'opzione --no-ecto indica che stiamo creando un'App senza un database.
Questa opzione ci permette di avere un'App molto semplice. Potremo sempre aggiungere un database piú avanti.
Quando vedrai il seguente prompt:
Fetch and install dependencies? [Yn]Digita Y e poi Invio, in questo modo verranno scaricate tutte le dipendenze necessarie.
Esegui la nuova App Phoenix!
Spostiamoci nella directory appena creata:
cd live_view_contatoreNel terminale esegui il seguente comando:
mix phx.serverE poi visita l'indirizzo localhost:4000 dal browser.
2 - Configura signing_salt in config.exs
Phoenix LiveView utilizza un salt crittografico per rendere sicure le comunicazioni tra client e server.
Nel terminale esegui il seguente comando:
mix phx.gen.secret 32Dovresti avere un output simile al seguente:
QykDKEbfEcAdU2IkroNzUkG7HtSExW/DCopia la stringa nella tua clipboard.
Apri il file config/config.exs e cerca la riga che inizia con live_view:
# Configures the endpoint config :live_view_contatore, LiveViewContatoreWeb.Endpoint, url: [host: "localhost"], secret_key_base: "s0e+LZ/leTtv3peHaFhnd2rbncAeV5qlR1rNShKXDMSRbVgU2Aar8nyXszsQrZ1p", render_errors: [view: LiveViewContatoreWeb.ErrorView, accepts: ~w(html json), layout: false], pubsub_server: LiveViewContatore.PubSub, live_view: [signing_salt: "tT2envDD"]
Sostituisci il valore stringa di signing_salt con quello generato dal terminale:
# Configures the endpoint config :live_view_contatore, LiveViewContatoreWeb.Endpoint, url: [host: "localhost"], secret_key_base: "s0e+LZ/leTtv3peHaFhnd2rbncAeV5qlR1rNShKXDMSRbVgU2Aar8nyXszsQrZ1p", render_errors: [view: LiveViewContatoreWeb.ErrorView, accepts: ~w(html json), layout: false], pubsub_server: LiveViewContatore.PubSub, live_view: [signing_salt: "QykDKEbfEcAdU2IkroNzUkG7HtSExW/D"]
3 - Aggiungi Phoenix. LiveView. Controller a live_view_ contatore_web .ex
3 - Aggiungi Phoenix.LiveView.Controller a live_view_contatore_web.ex
April il file lib/live_view_contatore_web.ex e aggiungi la dichiarazione di import Phoenix.LiveView al controller:
Prima:
def controller do
quote do
use Phoenix.Controller, namespace: LiveViewContatoreWeb
import Plug.Conn
import LiveViewContatoreWeb.Gettext
alias LiveViewContatoreWeb.Router.Helpers, as: Routes
end
end
Dopo:
def controller do
quote do
use Phoenix.Controller, namespace: LiveViewContatoreWeb
import Plug.Conn
import LiveViewContatoreWeb.Gettext
alias LiveViewContatoreWeb.Router.Helpers, as: Routes
import Phoenix.LiveView.Controller
end
end
Abbiamo finito la configurazione della App Phoenix per l'utilizzo di Liveview! Ora possiamo creare il contatore.
4 - Creare il file contatore.ex
Crea un nuovo file: lib/live_view_contatore_web/ live/contatore.ex e aggiungi il seguente codice:
Crea un nuovo file: lib/live_view_contatore_web/live/contatore.ex e aggiungi il seguente codice:
defmodule LiveViewContatoreWeb.Contatore do
use Phoenix.LiveView
def mount(_params, _session, socket) do
{:ok, assign(socket, :val, 0)}
end
def handle_event("inc", _, socket) do
{:noreply, update(socket, :val, &(&1 + 1))}
end
def handle_event("dec", _, socket) do
{:noreply, update(socket, :val, &(&1 - 1))}
end
def render(assigns) do
~L"""
<div>
<h1>Il conto è: <%= @val %></h1>
<button phx-click="dec">-</button>
<button phx-click="inc">+</button>
</div>
"""
end
end
5 - Creare la route in router.ex
Per far si che Phoenix sappai come invocare la funzione che abbiamo appena creato, apri il file lib/live_view_contatore_web/ router.ex e cerca il blocco di codice che inizia con scope "/", LiveViewCounterWeb do
Per far si che Phoenix sappai come invocare la funzione che abbiamo appena creato, apri il file lib/live_view_contatore_web/router.ex e cerca il blocco di codice che inizia con scope "/", LiveViewCounterWeb do
scope "/", LiveViewContatoreWeb do pipe_through :browser get "/", PageController, :index end
Sostituisci la riga get "/", PageController, :index con live("/", Contatore). Il risultato finale sarà:
scope "/", LiveViewContatoreWeb do
pipe_through :browser
live("/", Contatore)
end
Esegui l'App Contatore
Ora che abbiamo finito di scrivere il codice in contatore.ex, esegui l'App eseguendo il comando:
mix phx.serverE poi visita localhost:4000 sul tuo browser
