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

In this last part of the course, we’ll be building the game of Pentominoes—the favorite game of legendary CBS News anchor Walter Cronkite. Pentominoes is something like a cross between Tetris and a puzzle. The player is presented with a set of shapes called “pentominoes” and a game board of a certain size. The player must figure out how to place all of the pentominoes on the board so that they fit together to evenly cover all of the available space, like a puzzle.

Each pentomino is a shape composed of five even squares joined together. There are 12 basic shapes.

Assuming we're playing a round of Pentominoes with a large rectangular board and all of the available pentomino shapes, we might end up with a finished puzzle that looks like this:

Now, let's say we're playing a round of Pentominoes with a small rectangular board and just three shapes—a `:c`, a `:v`, and a `:p`. We might end up with a finished puzzle that looks like this:


Now that we have a basic idea of how the game works, let’s talk about the core concepts of the game that we’ll model in code.

# The game board

Each round of pentominoes solves a different puzzle. This means that each round presents the player with a board of different sizes and a new set of pentomino pieces to place.

We’ll model the game board with a module that produces `Board` structs. Each board struct will have the following attributes:

- `points`: All of our puzzles will be rectangles of different shapes. The puzzle shape will be a list of points that make up the grid of our puzzle board.
- `palette`: The set of pentomino shapes that must be placed onto the board in order to complete the puzzle.
- `completed_pentos`: The pentomino shapes that have already been placed on the board. This will update as the user places more shapes.
- `active_pentos`: The pentomino from the palette that the user has selected and is active in the process of placing on the board.

We’ll return to the `Board` module and its functionality later in the following lessons. For now, let’s move on to a high-level overview of our next game fundamental, the pentominoes pieces themselves.

# The pentominoes pieces

We’ll define a module, `Pentomino`, that produces pentominoes structs. Each pentomino struct will have the following attributes:
- `name`: The type of shape, for example `:i` or `:p`.
- `rotation`: The number of degrees that the shape has been rotated to.
- `reflected`: A true/false value to indicate whether the user flipped the shape
over to place it on the board.
- `location`: The location of the shape on the board grid.

Along with the `Pentomino` module that represents the placement of a shape on the board, we’ll also define another module, `Shape`, that wraps up the attributes of individual pentominoes shapes. If `Pentomino` is responsible for representing a shape on the board, `Shape` is responsible for modeling a given pentomino shape. Each shape struct will have the following attributes:
- `points`: The five points that comprise the given shape. 
- `color`: The color associated with the given shape.

We’ll take a closer look at the relationship between a `Pentomino` struct and a `Shape` struct later on, and we’ll see how to use them to model the placement of pentominoes on the game board. Before we move on, however, we have one more game fundamental to discuss.

# The pentominoes points

Each shape is consists of a set of five points of equal size, and each point will occupy a spot on the board grid. We’ll model these points with the `Point` module. It will produce `{x,y}` point tuples that represent the x, y coordinates of the point on the game board. It will also implement a set of reducer functions to move these points according to the location, rotation, and reflection of the shape to which a point belongs. 

In order to place our pentominoes on the board, we'll apply functions to rotate, reflect, and move that pentomino to all five individual points that make up the pentomino. If that seems a little confusing right now, don’t worry. We’ll build this out step by step in the following sections.

Now that we have a high-level understanding of the basic building blocks of our game, let’s start building the functional core in earnest. Each of the modules we’ve outlined so far will be implemented in our application’s core, and we’ll use the CRC pattern to build them. Our core modules will have constructors that create and return the module’s data type, reducers to manipulate that data, and converters to transform the data into something that can be consumed by other parts of our application. While not all of our core modules will implement each of these CRC elements, you will see all of them come into play in the following lessons.

An overview of what we are going to create in this chapter.

The Plan

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

The Plan