Многопользовательский бинго под капотом (Elixir + Phoenix + Elm / Vue)

Многопользовательский бинго под капотом — это практический курс, в котором вы шаг за шагом исследуете архитектуру, дизайн и код реального веб‑приложения на базе Elixir, Phoenix и Elm / Vue.js. К концу обучения вы поймёте, как организовать собственное масштабируемое приложение с живыми обновлениями и несколькими игроками в реальном времени.

Что вы узнаете на курсе

Курс создан для разработчиков, которые хотят разобраться, как строятся сложные многопользовательские приложения на Elixir и Phoenix. Вы изучите внутреннее устройство проекта, научитесь работать с процессами, состояниями и каналами реального времени, а также увидите, как фронтенд на Elm или Vue взаимодействует с backend‑логикой.

Ключевые вопросы, которые мы разберём

• Как грамотно организовать и структурировать код, и сколько приложений OTP нужно.
• Когда использовать GenServer и какие задачи он решает.
• Как выглядит дерево наблюдения и как оно обеспечивает отказоустойчивость.
• Как восстанавливается состояние при параллельных процессах.
• Роль Phoenix и его взаимодействие с внутренними сервисами.
• Как распределить ответственность между внешними и внутренними модулями.
• Каким образом Elm или Vue.js работают с каналами Phoenix в реальном времени.

Курс начинается с полного приложения, которое мы постепенно «распаковываем», слой за слоем, чтобы показать, как все части системы работают в едином ритме.

Что входит в комплект кода

После загрузки стартового набора вы получите каталог pragstudio-unpacked-bingo-code с несколькими версиями приложения.

Основные директории

• apps_elm — версия с Elm на фронтенде (используется в модулях 1–17).
• apps_vue — версия с Vue.js (используется в модулях 18–20).
• bonus — дополнительные варианты из сносок.

Общие подкаталоги в apps_elm и apps_vue

• bingo — Elixir-приложение с игровой логикой.
• bingo_hall — Phoenix-приложение, предоставляющее веб-интерфейс.

Вы можете свободно выбирать, какую версию использовать: для первых модулей интерфейс не важен, далее — по предпочтению (Elm или Vue).

Установка необходимых инструментов

Установка Elixir

Код основан на Elixir 1.6, но подойдёт и более новая версия.

elixir --version

Инструкции по установке: elixir-lang.org/install.html

Установка Hex:

mix local.hex

Установка Phoenix

mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Node.js и NPM

Phoenix использует Brunch для сборки frontend‑активов, поэтому требуется Node.js 6+.

node --version
npm --v

Инструкции: nodejs.org

Для macOS через Homebrew:

brew install node

Установка Elm (опционально)

Для фронтенда на Elm:

npm install -g elm

Или, для macOS:

brew install elm

Запуск приложения Phoenix

1. Установка зависимостей Elixir

cd bingo_hall
mix deps.get
mix compile

2. Установка зависимостей Node.js

cd assets
npm install

3. Установка зависимостей Elm (если используете Elm-версию)

cd elm
elm-package install -y

4. Сборка фронтенда

cd ..
node node_modules/.bin/brunch build

5. Запуск Phoenix-сервера

cd ..
mix phx.server

После запуска откройте http://localhost:4000 и начните игру!