Ознакомиться с важной информацией: Майнер отключен!

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

Unpacked: Multi-Player Bingo
Duration 03:21:20
Открыть все курсы от pragmaticstudio

Разработка дизайна и кода приложения Elixir + Phoenix + Elm / Vue.  Веб-приложение, которое мы изучаем, позволяет вам соревноваться в бинго с несколькими игроками в режиме реального времени.  Через серию видеороликов мы каждый день изучаем дизайн, архитектуру и код полнофункционального приложения Elixir + Phoenix + Elm / Vue, давая вам возможность начать аналогичные приложения.

Объединив Elixir + Phoenix + Elm / Vue, вы можете создать несколько действительно классных приложений! Но чтобы достичь обещанного, вам придется ловко перемещаться через МНОГИЕ проектные решения, в том числе:

  • Как организован и структурирован код? Сколько приложений OTP?
  • Когда и где используются GenServers?
  • Как выглядит дерево наблюдения?
  • Если произойдет параллельный процесс, как его состояние будет восстановлено?
  • Какую роль играет Phoenix?
  • Каков баланс сил и ответственности между внешними приложениями и внутренними службами?
  • Как интерфейсы Elm и Vue.js взаимодействуют с каналами Phoenix в реальном времени?

Мы начинаем с завершенного приложения и распаковываем его по слоям, отвечая на эти вопросы и многое другое. Вы закончите курс, понимая, как все части работают в гармонии, чтобы вы могли сразу перейти к созданию своих классных приложений!

НАЧАЛО

Загрузите комплект кода (В материалах курса), который содержит весь исходный код, показанный в видео, плюс некоторые бонусы!

После распаковки загруженного файла вы получите каталог с именем 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 в любой операционной системе доступны по адресу http://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 доступны последние инструкции по установке последней версии 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 из своего браузера, и вы сможете играть в игру!

Полный список уроков Развернуть / Свернуть
  • Урок 1. INTRO AND SETUP 00:01:04
  • Урок 2. GAME AND APP DESIGN: GAME 00:02:20
  • Урок 3. GAME AND APP DESIGN: APP DESIGN 00:03:31
  • Урок 4. ELIXIR GAME MECHANICS 00:12:24
  • Урок 5. CONCURRENT GAMES: PART I 00:14:32
  • Урок 6. CONCURRENT GAMES: PART 2 00:09:07
  • Урок 7. WHAT'S UP, SUPERVISORS? 00:08:30
  • Урок 8. ETS TO THE RESCUE 00:10:39
  • Урок 9. PHOENIX BINGO HALL 00:05:15
  • Урок 10. PLAYER SESSIONS 00:07:13
  • Урок 11. SPINNING UP NEW GAMES 00:07:29
  • Урок 12. TALKING ON CHANNELS: PART I 00:13:58
  • Урок 13. TALKING ON CHANNELS: PART II 00:13:31
  • Урок 14. WHO'S PLAYING, PRESENTLY? 00:13:32
  • Урок 15. ELM FRONT-END: APP OVERVIEW 00:04:07
  • Урок 16. ELM: BUILDING WITH BRUNCH 00:03:36
  • Урок 17. ELM: EMBEDDING WITH FLAGS 00:03:40
  • Урок 18. ELM: SOCKETS AND CHANNELS 00:12:03
  • Урок 19. ELM: MODEL DESIGN 00:06:00
  • Урок 20. ELM: HANDLING MESSAGES: AFTER JOIN 00:10:54
  • Урок 21. ELM: HANDLING MESSAGES: MARK 00:05:57
  • Урок 22. ELM: HANDLING MESSAGES: CHAT 00:04:58
  • Урок 23. VUE FRONT-END: APP OVERVIEW 00:06:38
  • Урок 24. VUE: JOINING THE CHANNEL: PART I 00:06:40
  • Урок 25. VUE: JOINING THE CHANNEL: PART II 00:06:28
  • Урок 26. VUE: MARKING AND CHATTING 00:06:46
  • Урок 27. WRAP UP 00:00:28
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 06.09.2018. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Комментарии

Похожие курсы

en 121 урок
udemy The Complete Elixir and Phoenix Bootcamp
Усвой лучшие методы программирования с Elixir и Phoenix во время обучения созданию привлекательных веб-приложений! Elixir и Phoenix - одни из самых горячих технологий 2017 года. Функциональное программирование? Мы этого научимся. Phoenix и OAuth? Изи. Postgres для хранения данных? Самом собой! Websockets тоже! Этот курс поможет вам быстро начать работать с Elixir и Phoenix - научит вас основам, необходимым для глубокого понимания и создания...
Duration 14:19:56
8 3
en 36 уроков
pragmaticstudio Developing With Elixir/OTP
Создайте полное приложение Elixir / OTP от начала до конца. Поместите Elixir и OTP в действие, когда вы создаете отказоустойчивое приложение с нуля, в этом 6,5-часовом видеокурсе.  Если вы новичок в Elixir, вы получите пошаговые инструкции в привлекательном формате, который вы больше нигде не найдете. Если у вас есть опыт работы с Elixir, вы получите более глубокое понимание того, что вы принимаете как должное, и заполните пробелы в знаниях.
Duration 06:42:04
8 0
16-08-2018 en 1 урок
frontendmasters Introduction to Elm v2
В этом воркшопе вы получите знание языка программирования Elm с нуля, чтобы иметь возможность создавать веб-приложение. Во-первых, мы обсудим преимущества Elm, в том числе его очень сплоченную независимую экосистему пакетов, отладчик и репутацию практически никогда не падающего приложения. Затем мы перейдем к синтаксису языка, взаимодействию, управлению состоянием, тестированию, работу с серверами, взаимодействию с JavaScript и тому, как собрать...
Duration 07:50:25
0 0
17-08-2018 en 1 урок
frontendmasters Advanced Elm
Вы потратили время на строительство с Elm, и у вас возникли некоторые вопросы. Каковы наилучшие методы аутентификации, масштабирования, стилизации, структуры модулей, отдельных страниц и оптимизации производительности? Как вы можете декодировать сложные структуры JSON и взаимодействовать с хитрыми API-интерфейсами JavaScript? Этот семинар будет подробно рассказывать обо всех этих темах, помогая вам использовать способности Elm на следующем...
Duration 07:55:48
0 0

Последнее добавленное

Продвинутый Elm

Продвинутый Elm

en
Вы потратили время на строительство с Elm, и у вас возникли некоторые вопросы. Каковы наилучшие методы аутентификации, масштабирования, стилизации, структуры модулей, отдельных страниц и оптимизации производительности? Как вы можете декодировать сложные структуры JSON и взаимодействовать с...
Java: модульное программирование с Java 9: 2 в 1

Java: модульное программирование с Java 9: 2 в 1

en
С легкостью создавайте и поддерживайте большие приложения с помощью возможностей модульного программирования в Java 9. Чтобы создать стандартизованный интерфейс и включить модули для связи, вам необходимо разбить среду разработки программного обеспечения на отдельные модули, чтобы минимизировать...
Изучаем React с нуля на реальном проекте

Изучаем React с нуля на реальном проекте

ru
В этом курсе вы изучите, как создавать проекты на React. Вы создадите реальное приложение. Этот курс будет полезен тем, кто хочет изучить React на реальном проекте. Курс будет дополняться - вы получите еще больше обучающих видео уже осенью 2018! Будет записано более 20 часов. Вы изучите все...
Введение в Elm v2

Введение в Elm v2

en
В этом воркшопе вы получите знание языка программирования Elm с нуля, чтобы иметь возможность создавать веб-приложение. Во-первых, мы обсудим преимущества Elm, в том числе его очень сплоченную независимую экосистему пакетов, отладчик и репутацию практически никогда не падающего приложения.
AWS для Frontend инженеров (S3, Cloudfront, Route 53, and Lambda@Edge)

AWS для Frontend инженеров (S3, Cloudfront, Route 53, and Lambda@Edge)

en
Итак, вы работали над фантастическим приложением - что теперь? Как вы собираетесь выставить его в Интернете, чтобы ваши пользователи в Сиднее могли наслаждаться такой же задержкой, как в Миннеаполисе или Куала-Лумпуре? Как насчет DNS? В этом воркшопе мы рассмотрим, что предлагает AWS для Frontend...
chat
logo