Unpacked: Multi-Player Bingo
Разработка дизайна и кода приложения Elixir + Phoenix + Elm / Vue. Веб-приложение, которое мы изучаем, позволяет вам соревноваться в бинго с несколькими игроками в режиме реального времени. Через серию видеороликов мы каждый день изучаем дизайн, архитектуру и код полнофункционального приложения Elixir + Phoenix + Elm / Vue, давая вам возможность начать аналогичные приложения.
Объединив Elixir + Phoenix + Elm / Vue, вы можете создать несколько действительно классных приложений! Но чтобы достичь обещанного, вам придется ловко перемещаться через МНОГИЕ проектные решения, в том числе:
Мы начинаем с завершенного приложения и распаковываем его по слоям, отвечая на эти вопросы и многое другое. Вы закончите курс, понимая, как все части работают в гармонии, чтобы вы могли сразу перейти к созданию своих классных приложений!
НАЧАЛО
Загрузите комплект кода (В материалах курса), который содержит весь исходный код, показанный в видео, плюс некоторые бонусы!
После распаковки загруженного файла вы получите каталог с именем pragstudio-unpacked-bingo-code. Внутри этого каталога вы найдете следующие подкаталоги:
apps_elm: версия приложения, использующая Elm на лицевой стороне. Мы используем эту версию приложения в видео для модулей 1-17.
apps_vue: версия приложения, использующая Vue.js на фронтенде. Мы переключаемся на эту версию приложения, начиная с модуля 18.
бонус: другие версии приложения, указанные в сносках, но не показаны в видеороликах
В обоих каталогах apps_elm и apps_vue вы найдете следующие подкаталоги:
bingo - это приложение Elixir, которое содержит весь код, связанный с игрой
bingo_hall - приложение Phoenix, которое представляет собой веб-интерфейс для приложения бинго
- Итак, в какой версии вы должны запускать Elm или Vue.js? Первоначально это не имеет значения. В модулях 1-11 мы распаковываем только приложения Elixir и Phoenix, которые одинаковы независимо от того, какой интерфейс вы выбираете. Для модулей 12-17 мы запускаем версию приложения Elm. А для модулей 18-20 мы запускаем версию приложения Vue.js. Если вас интересует только интерфейс Vue.js, вы можете спокойно пропустить модули Elm. Другими словами, вы можете выбрать свое собственное приключение, начиная с модуля 11.
2. Установите Elixir 1.6
Исходный код основан на Elixir 1.6, хотя любая последующая версия также должна работать.
Чтобы проверить, какая версия была установлена, используйте
elixir --version
Современные инструкции по установке последней версии Elixir в любой операционной системе доступны по адресу https://elixir-lang.org/install.html
После того, как вы установили Elixir, вам также нужно установить диспетчер пакетов Hex:
mix local.hex
Если у вас уже установлен Hex, эта команда обновит Hex до последней версии.
3. Установите Phoenix
Phoenix распространяется как архив Mix, который вы можете установить с помощью
mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez
4. Установите Node.js и NPM.
Phoenix использует Brunch для компиляции интерфейсных активов, таких как JavaScript и CSS. И Brunch требует, чтобы менеджер пакетов Node.js (NPM) устанавливал свои зависимости. Поэтому вам нужно установить Node.js 6.0 или более поздней версии.
Чтобы проверить, какие версии вы установили, используйте
node --version
npm --v
На https://nodejs.org/en/ доступны последние инструкции по установке последней версии Node.js в любой операционной системе. Предварительно установленные инсталляторы также автоматически устанавливают NPM, поэтому нет отдельного шага.
В качестве альтернативы, если вы работаете на Mac и уже используете диспетчер пакетов Homebrew, вы можете установить Node.js и NPM, используя
brew install node
5. Установите платформу ELM
Если вы планируете запустить версию Elm приложения, вам нужно установить платформу Elm. Поскольку у вас уже установлен NPM, вы можете установить Elm Platform как пакет npm, например:
npm install -g elm
Вы можете увидеть некоторые предупреждения, но они доброкачественны.
По умолчанию npm устанавливает пакеты в локальную (текущую) директорию. Использование флага -g устанавливает пакет elm глобально, поэтому средства командной строки могут быть доступны из любого каталога вашей системы.
Если по какой-то причине вы не хотите устанавливать Elm с помощью NPM, вы можете загрузить и запустить предустановленный установщик Elm для вашей операционной системы. Или, если вы работаете на Mac и уже используете диспетчер пакетов Homebrew, вы можете установить Elm, используя
brew install elm
6. Запустите приложение Phoenix
Чтобы запустить приложение bingo_hall Phoenix:
Сначала перейдите в каталог bingo_hall, установите зависимости пакета Elixir и скомпилируйте приложение:
cd bingo_hall
mix deps.get
mix compile
Вы можете увидеть некоторые предупреждения о компиляции, но не о чем беспокоиться.
Затем перейдите в каталог bingo_hall / assets и установите зависимости Node.js:
cd assets
npm install
Если вам интересно, в зависимости от того, какую версию приложения вы используете в файле package.json в каталоге ресурсов, введите либо elm, либо vue в качестве зависимости. Таким образом, помимо установки всех стандартных пакетов, требуемых Phoenix, также устанавливаются Elm или Vue.js.
Затем, если вы используете версию Elm приложения, перейдите в каталог bingo_hall / assets / elm и установите зависимости пакета Elm:
cd elm
elm-package install -y
В качестве быстрой проверки работоспособности замените резервную копию на каталог bingo_hall / assets и убедитесь, что все построено:
cd ..
node node_modules/.bin/brunch build
Теперь вы готовы запустить конечную точку Phoenix. Перейдите в каталог bingo_hall верхнего уровня и запустите его:
CD ..
mix phx.server
Теперь вы можете посетить http://localhost:4000 из своего браузера, и вы сможете играть в игру!
Наши курсы уникальны, потому что их учат программисты, которые провели значительное время в траншеях по реальным проектам, выясняя, что работает, а что нет. Как небольшая компания, не имеющая большого отвлечения или накладных расходов, мы можем сосредоточиться на том, что важно: создание приложений.
