Introduction

This section will create an admin-facing dashboard that will show real-time information about all the current shoppers on the website. We’ll learn about and use Phoenix Tracker and Presence along the way.

Phoenix Tracker

The distributed state is a challenging problem. Variations in time and network partitions are just some of the challenges we’ll face when writing a distributed system. Phoenix Tracker makes distributing a list of processes and metadata about each process an easy endeavor. Tracker uses an advanced data structure to distribute states across a cluster efficiently and accurately, which allows us to know how many Channels are connected currently. This is a complex problem to tackle appropriately, but Tracker handles it for us!

We’ll start this section by going over the plan for our admin dashboard. The most crucial feature we’ll implement in this section is the active shopper list. This will show a store admin the number of connected shopping carts and which shoes are most popular. We’ll also restrict access to the dashboard so that only admins can access it. Of course, we’ll use Phoenix Channels and Tracker to power our dashboard. We’ll compare the base Phoenix.Tracker module to a version with additional features—Phoenix.Presence—before building our dashboard.

After we cover Tracker, we’ll scaffold the admin dashboard, build a Presence that can track carts, and then wire all of these pieces together in an interface built for admins. We’ll do this all in a modest amount of code due to the powerful abstractions provided by Tracker and Presence. We’ll then load test the dashboard using an Elixir application that simulates many shoppers connected to Sneakers23.

Let’s get started by looking at what we’re going to build.

Plan our admin dashboard

Shoppers can use our store right now, but we don’t know how many shoppers are online, what they have in their cart, or where they are in the checkout process. With this information, we will learn how well a launch is performing—maybe the demand is more or less than expected, and the launch needs to be adjusted.

This section will build a dashboard for Sneaker23 admins that provides live store analytics. Our dashboard will have the following features:

• Show the count of unique shoppers.
• Show the count of shoppers based on the page they’re on.
• Show the count of shoes in an active cart by size.
• Restrict access to admins only.

We’ll start with a plan for how we’ll go about building our admin dashboard. Let’s jump in.

Turn requirements into a plan

We’ll use the access restriction techniques covered in the section Restrict Socket and Channel Access to restrict access to our dashboard. Our admin dashboard needs a higher level of restriction than the previous section’s features, so we will create a dedicated Socket for it. The following figure shows our Socket and Channel structure: