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

To go much further, we’re going to need data, so we’ll switch gears from the view and focus on the backend service. In order to render products and their average star ratings in a chart, the LiveView must be able to query for this data in the form of a list of product names and their associated average star ratings.

This will be a good time to practice good Phoenix design. We’ll add a new API function to the `Catalog` context to make requests to the database. Our context function will rely on new query functions in the core to extract exactly the data it needs. Separating these concerns will keep the codebase organized and beautiful.

# How to shape the data with ecto

The format of the data is somewhat dictated by the manner in which we will need to feed it into our chart. We’ll provide the exact details later. For now, its enough to understand that we need to fetch a list of products and average ratings as a list of tuples, as in this example:
``` JSON
[
   {"Tic-Tac-Toe", 3.4285714285714284},
   {"Table Tennis", 2.5714285714285716},
   {"Chess", 2.625}
]
```
With any luck, Ecto can return data in exactly the shape we need, but first, we need to decide where the queries should go. If we make sure to validate any data before it ever reaches the query layer, the process of building a query should never fail unless there’s a bug in our code. In other words, the process is certain and predictable, exactly the kind of job that belongs in the core. So, we’ll create a query builder module, `Pento.Catalog.Product.Query`, in our application’s core.

We’ll need a query to fetch products with average ratings, so we’ll build a few reducers in the `Pento.Catalog.Product.Query` module to shape a query that does just that. We’ll use Ecto `where` clauses to select the right demographic, a `join` clause to pluck out the ratings for relevant users, a `group_by` clause to provide the `average` statistic, and a `select` clause to pluck out the tuples that match the required shape. That’s a bit much to add to one giant function, but we know how to break the code down into single-purpose reducers. To do so, we add the following code in `pento/lib/pento/catalog/product/query.ex` file like this:

Learn how to fetch data from an API in a Phoenix LiveView in this lesson.

How to Fetch Survey Results Data

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

How to Fetch Survey Results Data