Gain insights into building real-time web apps with Phoenix LiveView. Learn about creating interactive code, building a game from scratch, and managing distributed real-time dashboards.

Programming Phoenix LiveView by The Pragmatic Programmer_468 x 60 copy.png

liveview.tar.gz

Installation

LiveView_Sockets

Simple_App

Wrong_Guess_Number

Plug_Conn

Wrong_Guess_Number-auth

Wrong_Guess_Number-auth-gen

Wrong_Guess_Number-auth-gen-final

Generator

Generator-ecto

Generator-ected

Generator-web-ected

Forms-ected

Forms

Stateless

Stateless-ected

Stateful

Stateful-ected

Dashboard

Dashboard-ected

Distributed_Dashboard

Distributed_Dashboard-ected

Unit_Test

Unit_Test-ected

Core-ected

Core

phoenix_start_server

phoenix_build_only

phoenix_build_only_pento

phoenix_build_intro

test

intro_build_ected

intro_build_server

auth_build_server

auth_build_ected

generate_web_build_ected

generate_web_build_server

generator_build_server

generator_build_ected

forms_build_server

setup

forms_build_edcted

interactive_build_server

interactive_build_ected

distributed_build_server

distributed_build_ected

stateless_build_server

stateless_build_ected

stateful_build_server

stateful_build_ected

test_build_server

test_build_ected

core_build_server

core_build_ected

graphics_build_server

graphics_build_ected

test_build_terminal

test_build_GUI

test_build_server-copy

test_build_server-copy-copy

test_build_server-chrome-fix

test_build_server-docker_fix

intro-tester

If you want to program just for the joy of creating, LiveView will be an excellent opportunity for you. This programming model keeps your brain firmly on the server and lets you explore one concept at a time. Layering on graphics makes this kind of exploratory programming almost magical.

Programmers learn by writing code, and that’s exactly how this course will work. We’ll work on a project together as if we’re a fictional game company. You’ll write lots of code, starting with small tweaks of generated code and building up to major enhancements that extract common features with components.

As you build the application, you’ll encounter more complexity. A distributed dashboard will show a real-time view of other users and processes. You’ll even build a game from scratch—because that’s the best way to learn how to layer the most sophisticated LiveView applications.

Building Real-Time Web Applications with Phoenix LiveView

The authentication service integrates with the Phoenix stack to provide infrastructure for session management including plugs that we can use in the router to control access to our routes.

# Defining the authentication service

The authentication service is defined in the file `pento/lib/pento_web/controllers/user_auth.ex`. We could open up the code base, but instead, let’s do a quick review in `IEx` to see what the public API looks like.
Fire up the IEx in the terminal below with `iex -S mix`, and key this in:


And, we should see exported plug functions like this:

fetch_current_user/2 
log_in_user/2
log_in_user/3
log_out_user/1
redirect_if_user_is_authenticated/2
require_authenticated_user/2


All of these functions are plugs. The first fetches an authenticated user and adds it into the connection. The next three log users in and out. The last two plugs direct users between pages based on whether they are logged in or not. Let’s first examine `fetch_current_user/2`.

# How to fetch the Current User
Remember, plugs are reducers that take a `Plug.Conn` as the first argument and return a transformed `Plug.Conn`. Most of the plugs we’ll use are from the `UserAuth` module. The `fetch_current_user/2` function plug will add the current user to our `Plug.Conn` if the user is authenticated. We don’t have to take this on faith. Though we might not understand all of the code, we already know enough to get the overall gist of what’s happening. Let’s take a closer look.

Most of `Plug.Conn` contains private data we can’t change, but application developers have a key pointing to a dedicated map called `assigns` that we can use to store custom application data.

The `fetch_current_user/2` function plug will add a key in `assigns` called `current_user` if the user is logged in. We can see that the code generator adds this plug to our `browser` pipeline in the router at `pento/lib/pento_web/router.ex`, like this:


Learn how to add session management in a Phoenix application 

How to Protect Routes with Plugs

Learn how to add session management in a Phoenix application

Introduction

Phoenix and Authentication

Generators: Contexts and Schemas

Generators: Live Views and Templates

Forms and Changesets

Stateless Components

Stateful Components

Build an Interactive Dashboard

Build a Distributed Dashboard

Test Your Live Views

Build The Game Core

Render Graphics With SVG

Conclusion

Protect Routes with Plugs

Defining the authentication service