Последние новости: Coursehunters.club

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

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

Unpacked: Multi-Player Bingo - Полный список уроков

Развернуть / Свернуть
  • Урок 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

Разработка дизайна и кода приложения 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 из своего браузера, и вы сможете играть в игру!

Твоя оценка

6 0
Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

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

30-11--0001 en 150 уроков
udemy The Complete Elixir and Phoenix Bootcamp
Усвой лучшие методы программирования с Elixir и Phoenix во время обучения созданию привлекательных веб-приложений! Elixir и Phoenix - одни из самых горячих технологий 2017 года. Функциональное программирование? Мы этого научимся. Phoenix и OAuth? Изи. Postgres для хранения данных? Самом собой! Websockets тоже! Этот курс поможет вам быстро начать работать с Elixir и Phoenix - научит вас основам, необходимым для глубокого понимания и создания...
Duration 17:22:11
11 3
30-11--0001 en 36 уроков
pragmaticstudio Developing With Elixir/OTP
Создайте полное приложение Elixir / OTP от начала до конца. Поместите Elixir и OTP в действие, когда вы создаете отказоустойчивое приложение с нуля, в этом 6,5-часовом видеокурсе.  Если вы новичок в Elixir, вы получите пошаговые инструкции в привлекательном формате, который вы больше нигде не найдете. Если у вас есть опыт работы с Elixir, вы получите более глубокое понимание того, что вы принимаете как должное, и заполните пробелы в знаниях.
Duration 06:42:04
10 0
16-08-2018 en 72 урока
frontendmasters Introduction to Elm v2
В этом воркшопе вы получите знание языка программирования Elm с нуля, чтобы иметь возможность создавать веб-приложение. Во-первых, мы обсудим преимущества Elm, в том числе его очень сплоченную независимую экосистему пакетов, отладчик и репутацию практически никогда не падающего приложения. Затем мы перейдем к синтаксису языка, взаимодействию, управлению состоянием, тестированию, работу с серверами, взаимодействию с JavaScript и тому, как собрать...
Duration 05:07:21
9 0
17-08-2018 en 53 урока
frontendmasters Advanced Elm
Вы потратили время на строительство с Elm, и у вас возникли некоторые вопросы. Каковы наилучшие методы аутентификации, масштабирования, стилизации, структуры модулей, отдельных страниц и оптимизации производительности? Как вы можете декодировать сложные структуры JSON и взаимодействовать с хитрыми API-интерфейсами JavaScript? Этот семинар будет подробно рассказывать обо всех этих темах, помогая вам использовать способности Elm на следующем...
Duration 04:59:45
5 0
en 32 урока
knowthen.com Elm Beyond the Basics
Узнайте, как создавать веб-приложения с помощью Elm. Elm - потрясающий новый функциональный язык программирования для создания фронтенд части веб-приложений.
Duration 04:47:18
4 0

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

Просто Express (с кучей node и http). В деталях.

Просто Express (с кучей node и http). В деталях.

en
Нет MERN или MEAN ... просто Express. Для тех, кто немного узнал о самом крутом фреймворке node и хочет больше. У вас есть представление о том, что такое Node, Express и http, иначе вас бы здесь не было. Node и серверная часть JavaScript взяли мир штурмом, [НЕКОТОРАЯ БОЛЬШАЯ КОМПАНИЯ] переехала...
Разработка модуей Drupal 8 с примерами

Разработка модуей Drupal 8 с примерами

en
Никогда не было лучшего времени для изучения разработки модулей Drupal 8. Это потому, что Drupal 8 уже является лучшим технологически и более быстрым способом создания приложений Drupal (по сравнению с Drupal 7). Drupal 8 построен поверх Symfony, поэтому хорошие новости заключаются в том...
Appium (Версия 1.8.2) - Мобильное автоматизированное тестирование с нуля

Appium (Версия 1.8.2) - Мобильное автоматизированное тестирование с нуля

en
Appium курс - 200+ лекций по мобильной автоматизации от основ с примерами в реальных проектах. Курс полностью обновлен 12 ноября с последней версией Appium 1.8.2. Узнайте все, что вам нужно знать о мобильной автоматизации (Android + IOS), даже если вы никогда не программировали раньше.
gRPC [Golang] Мастер-класс: создание современных API и микросервисов

gRPC [Golang] Мастер-класс: создание современных API и микросервисов

en
Лучше, чем REST API! Создайте быстрый и масштабируемый HTTP / 2 API для Go микро-сервиса с помощью gRPC, Protocol Buffers (protobuf). gRPC - это новый и современный фреймворк для построения масштабируемого, современного и быстрого API. Он используется многими ведущими технологическими компаниями...
Машинное обучение от А до Я: станьте мастером Kaggle

Машинное обучение от А до Я: станьте мастером Kaggle

en
Изучите основные алгоритмы машинного обучения с использованием Python от начального до супер продвинутого уровня, включая математические знания. Хотите стать хорошим специалистом по данным? Тогда это правильный курс для вас. Этот курс был разработан специалистами IIT, которые освоили математику...
PHP: Разработка микрофреймворка

PHP: Разработка микрофреймворка

ru
Фреймворки - основной способ создавать сложные сайты в интернете. На определённом уровне недостаточно просто знать как ими пользоваться, нужно понимать как они устроены внутри. Благодаря этому курсу вы не только узнаете про все внутренности, но и создадите свой собственный неповторимый фреймворк.
Регулярные выражения

Регулярные выражения

ru
Практически каждый программист сталкивается с регулярными выражениями в повседневной практике. Многих они отпугивают, но регулярные выражения основаны на небольшом количестве простых понятий. Освоив эти понятия, вы сможете всегда чувствовать себя комфортно при работе с этим мощным инструментом.
chat
logo