Créer une application Phoenix avec LiveView

C:\Users\broussel>elixir -v
Erlang/OTP 26 [erts-14.0.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]

Elixir 1.15.5 (compiled with Erlang/OTP 26)

C:\Users\broussel>mix local.hex
Found existing entry: c:/Users/broussel/.mix/archives/hex-2.0.6
Are you sure you want to replace it with "https://builds.hex.pm/installs/1.14.0/hex-2.0.6.ez"? [Yn] n

C:\Users\broussel>mix phx.new --version
Phoenix installer v1.7.7

C:\Users\broussel>psql --version
psql (PostgreSQL) 15.4

C:\Users\broussel>node --version
v18.17.1

C:\Users\broussel>npm --version
9.6.7


C:\Users\broussel>

C:\Users\broussel>cd C:\CarbonX1\Phoenix\Projets

C:\CarbonX1\Phoenix\Projets>mix phx.new minuteur --live
* creating minuteur/config/config.exs
* creating minuteur/config/dev.exs
* creating minuteur/config/prod.exs
* creating minuteur/config/runtime.exs
* creating minuteur/config/test.exs
* creating minuteur/lib/minuteur/application.ex
* creating minuteur/lib/minuteur.ex
* creating minuteur/lib/minuteur_web/controllers/error_json.ex
* creating minuteur/lib/minuteur_web/endpoint.ex
* creating minuteur/lib/minuteur_web/router.ex
* creating minuteur/lib/minuteur_web/telemetry.ex
* creating minuteur/lib/minuteur_web.ex
* creating minuteur/mix.exs
* creating minuteur/README.md
* creating minuteur/.formatter.exs
* creating minuteur/.gitignore
* creating minuteur/test/support/conn_case.ex
* creating minuteur/test/test_helper.exs
* creating minuteur/test/minuteur_web/controllers/error_json_test.exs
* creating minuteur/lib/minuteur/repo.ex
* creating minuteur/priv/repo/migrations/.formatter.exs
* creating minuteur/priv/repo/seeds.exs
* creating minuteur/test/support/data_case.ex
* creating minuteur/lib/minuteur_web/controllers/error_html.ex
* creating minuteur/test/minuteur_web/controllers/error_html_test.exs
* creating minuteur/lib/minuteur_web/components/core_components.ex
* creating minuteur/lib/minuteur_web/controllers/page_controller.ex
* creating minuteur/lib/minuteur_web/controllers/page_html.ex
* creating minuteur/lib/minuteur_web/controllers/page_html/home.html.heex
* creating minuteur/test/minuteur_web/controllers/page_controller_test.exs
* creating minuteur/lib/minuteur_web/components/layouts/root.html.heex
* creating minuteur/lib/minuteur_web/components/layouts/app.html.heex
* creating minuteur/lib/minuteur_web/components/layouts.ex
* creating minuteur/priv/static/images/logo.svg
* creating minuteur/lib/minuteur/mailer.ex
* creating minuteur/lib/minuteur_web/gettext.ex
* creating minuteur/priv/gettext/en/LC_MESSAGES/errors.po
* creating minuteur/priv/gettext/errors.pot
* creating minuteur/priv/static/robots.txt
* creating minuteur/priv/static/favicon.ico
* creating minuteur/assets/js/app.js
* creating minuteur/assets/vendor/topbar.js
* creating minuteur/assets/css/app.css
* creating minuteur/assets/tailwind.config.js
* creating minuteur/assets/vendor/heroicons/LICENSE.md
* creating minuteur/assets/vendor/heroicons/UPGRADE.md
* extracting minuteur/assets/vendor/heroicons/optimized

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix assets.setup
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd minuteur

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


C:\CarbonX1\Phoenix\Projets>

C:\CarbonX1\Phoenix\Projets>cd minuteur

C:\CarbonX1\Phoenix\Projets\minuteur>code .

C:\CarbonX1\Phoenix\Projets\minuteur>

# Configure your database
config :minuteur, Minuteur.Repo,
  username: "postgres",
  password: "postgres",
  hostname: "localhost",
  database: "minuteur_dev",
  stacktrace: true,
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

C:\CarbonX1\Phoenix\Projets\minuteur>mix ecto.create
Compiling 15 files (.ex)
Generated minuteur app
The database for Minuteur.Repo has been created

C:\CarbonX1\Phoenix\Projets\minuteur>

scope "/" MyAppWeb do
	pipe_through :browser
    
    get "/", PageController, :home
    live "/minuteur", MinuteurLive
end

defmodule MinuteurWeb.MinuteurLive do
	use MinuteurWeb, :live_view
    
    def mount(_param, _session, socket) do
    	{:ok, assign(socket, hello: :world)}
    end
    
    def render(assigns) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>on placera le minuteur ici</h2>
        """
    end
	
end

defmodule MinuteurWeb.MinuteurLive do
	# use Phoenix.LiveView
	use MinuteurWeb, :live_view
    
    def mount(_param, _session, socket) do
    	:timer.send_interval(1000,self(),:tick)
    	{:ok, assign(socket, hello: :world, count: 180)}
    end
    
    def render(assigns) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>vos oeufs sont prêt dans :</h2>
        <p>décompte : <%= @count %> secondes</p>
        """
    end
	
    def handle_info(:tick, socket) do
    	{:noreply, count(socket)}
    end
    
    defp count(socket) do
    	assign(socket, count: socket.assigns.count - 1)
    end
end

C:\Users\broussel>iex
Erlang/OTP 26 [erts-14.0.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]

Interactive Elixir (1.15.5) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> h :timer

                                     :timer

This module provides useful functions related to time. Unless otherwise stated,
time is always measured in milliseconds. All timer functions return immediately,
regardless of work done by another process.

Successful evaluations of the timer functions give return values containing a
timer reference, denoted TRef. By using cancel/1 (stdlib:timer#cancel/1), the
returned reference can be used to cancel any requested action. A TRef is an
Erlang term, which contents must not be changed.

The time-outs are not exact, but are at least as long as requested.

Creating timers using erlang:send_after/3 (erts:erlang#send_after/3) and
erlang:start_timer/3 (erts:erlang#start_timer/3) is more efficient than using
the timers provided by this module. However, the timer module has been improved
in OTP 25, making it more efficient and less susceptible to being overloaded.
See the Timer Module section in the Efficiency Guide
(system/efficiency_guide:commoncaveats#timer-module).

## Examples

Example 1

The following example shows how to print "Hello World!" in 5 seconds:

    1> timer:apply_after(5000, io, format, ["~nHello World!~n", []]).
    {ok,TRef}
    Hello World!

Example 2

The following example shows a process performing a certain action, and if this
action is not completed within a certain limit, the process is killed:

    Pid = spawn(mod, fun, [foo, bar]),
    %% If pid is not finished in 10 seconds, kill him
    {ok, R} = timer:kill_after(timer:seconds(10), Pid),
    ...
    %% We change our mind...
    timer:cancel(R),
    ...

## Notes

A timer can always be removed by calling cancel/1 (stdlib:timer#cancel/1).

An interval timer, that is, a timer created by evaluating any of the functions
apply_interval/4 (stdlib:timer#apply_interval/4), send_interval/3
(stdlib:timer#send_interval/3), and send_interval/2
(stdlib:timer#send_interval/2) is linked to the process to which the timer
performs its task.

A one-shot timer, that is, a timer created by evaluating any of the functions
apply_after/4 (stdlib:timer#apply_after/4), send_after/3
(stdlib:timer#send_after/3), send_after/2 (stdlib:timer#send_after/2),
exit_after/3 (stdlib:timer#exit_after/3), exit_after/2
(stdlib:timer#exit_after/2), kill_after/2 (stdlib:timer#kill_after/2), and
kill_after/1 (stdlib:timer#kill_after/1) is not linked to any process. Hence,
such a timer is removed only when it reaches its time-out, or if it is
explicitly removed by a call to cancel/1 (stdlib:timer#cancel/1).

iex(2)> System.halt

C:\Users\broussel>

    #si on a le assigns.count à 0
    defp count(socket=%{assigns: %{count: 0}}) do
    	:timer.kill_after(0) #on arrête le timer immédiatement
    	socket #pas de modification de socket
    end
    
    # dans les autres cas
   defp count(socket) do
    	assign(socket, count: socket.assigns.count - 1)
    end

defmodule MinuteurWeb.MinuteurLive do
	use MinuteurWeb, :live_view

    def mount(_param, _session, socket) do
      	{:ok, my_timer}  = :timer.send_interval(1000,self(),:tick)
    	{:ok, assign(socket, hello: :world, count: 180, timer: my_timer)}
    end

    def render(assigns) do
    	~H"""
    	  <h1>bonjour <%= @hello %></h1>
        <h2>vos oeufs sont prêt dans :</h2>
        <p>décompte : <%= @count %> secondes</p>
      """
    end

    def handle_info(:tick, socket) do
    	{:noreply, count(socket)}
    end

    #si on a le assigns.count à 0
    defp count(socket=%{assigns: %{count: 0, timer: my_timer}}) do
      :timer.cancel(my_timer) #on arrete le timer
      socket #pas de modification de socket
    end

    # dans les autres cas
    defp count(socket) do
      assign(socket, count: socket.assigns.count - 1)
    end
end

defmodule MinuteurWeb.MinuteurLive do
	# use Phoenix.LiveView
	use MyAppWeb, :live_view
    
    def mount(_param, _session, socket) do
    	{:ok, assign(socket, hello: :world, count: 180, timer_status: :ready )}
    end
    
    def render(assigns) do
    	afficher(assigns) 
    end
    
    # ready
    def afficher(assigns=%{timer_status: :ready}) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>Mettez vos oeufs dans l'eau bouillante et appuyez sur 'start'</h2>
        <button phx-click="start">start</button>
        """
    end
	    
    # running
    def afficher(assigns=%{timer_status: :running}) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>Minuteur status : <%= @timer_status %></h2>
        <h2>vos oeufs sont prêt dans :</h2>
        <p>décompte : <%= @count %> secondes</p>
        <button phx-click="stop">stop</button>
        """
    end
    
    # stopped
    def afficher(assigns=%{timer_status: :stopped}) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <p>décompte : <%= @count %> secondes</p>
        <h2>Le Minuteur a été arrété</h2>
        <h2>Réinitialisez le minuteur avec 'reset'</h2>
        <button phx-click="reset">reset</button>
        """
    end    
    
    # finished
    def afficher(assigns=%{timer_status: :finished}) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <p>décompte : <%= @count %> secondes</p>
        <h2>Vos oeufs sont prêts : retirez-les de l'eau !</h2>
        <h2>Bonne dégustation</h2>
        <button phx-click="reset">reset</button>
        """
    end
    
    # affichage du cas général lorsque le status ne correspond à aucun cas ci-dessus
    def afficher(assigns) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>status du minuteur : <%= @timer_status %></h2>
        <button phx-click="reset">reset</button>
        """
    end
    
    # bouton reset : réinitialisation à ready
    def handle_event("reset", _metadata, socket) do
        {:ok, assign(socket, count: 180, timer_status: :ready  )}
    end
    
    # bouton start ! lancement du compteur
    def handle_event("start", _metadata, socket) do
        {:ok, my_timer} = :timer.send_interval(1000,self(),:tick)
        # IO.inspect(my_timer, label: "my_timer")
        {:ok, assign(socket, count: 180, timer_status: :running, timer: my_timer )}
    end
    
    # bouton stop : arrêt du compteur
    def handle_event("stop", _metadata, socket=%{assigns: %{timer: my_timer}}) do
    	:timer.cancel(my_timer) #on arrete le timer
        {:ok, assign(socket, timer_status: :stopped  )}
    end
    
    def handle_info(:tick, socket) do
    	{:noreply, count(socket)}
    end
    
    #si on a le assigns.count à 0
    defp count(socket=%{assigns: %{count: 0, timer: my_timer}}) do
      :timer.cancel(my_timer) #on arrete le timer
      assign(socket, timer_status: :finished) #nous passons le status à :finished
    end
    
    defp count(socket) do
    	assign(socket, count: socket.assigns.count - 1)
    end
end

defmodule MinuteurWeb.MinuteurLive do
	# use Phoenix.LiveView
	use MyAppWeb, :live_view
    
    def mount(_param, _session, socket) do
    	# :timer.send_interval(1000,self(),:tick)
    	{:ok, assign(socket, hello: :world, count: 180, timer_status: :stopped  )}
    end
    
    def render(assigns) do
    	~H"""
    	<h1>bonjour <%= @hello %></h1>
        <h2>Minuteur status : <%= @timer_status %></h2>
        <h2>vos oeufs sont prêt dans :</h2>
        <p>décompte : <%= @count %> secondes</p>
        <button phx-click{:start}>start</button>
        <button phx-click{:stop}>stop</button>
        """
    end
	
    def handle_info(:tick, socket) do
        if socket.assigns.timer_status == :running do
      		Process.send_after(self(), :tick, 1000)
      		{:noreply, count(socket)}
    	else
      		{:noreply, socket}
    	end    	
    end
    
    def handle_event("start", _metadata, socket) do
    	Process.send_after(self(), :tick, 1000)
        {:ok, assign(socket, hello: :world, count: 180, timer_status: :running  )}
    end
    
    def handle_event("stop", _metadata, socket) do
        {:ok, assign(socket, hello: :world, timer_status: :stopped  )}
    end
    
    defp count(socket) do
    	assign(socket, count: socket.assigns.count - 1)
        if socket.assigns.count <= 0 do
      		assign(socket, timer_status: :stopped  )
    	end	
    end
end