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 из своего браузера, и вы сможете играть в игру!
Наши курсы уникальны, потому что их учат программисты, которые провели значительное время в траншеях по реальным проектам, выясняя, что работает, а что нет. Как небольшая компания, не имеющая большого отвлечения или накладных расходов, мы можем сосредоточиться на том, что важно: создание приложений.
Усвой лучшие методы программирования с Elixir и Phoenix во время обучения созданию привлекательных веб-приложений! Elixir и Phoenix - одни из самых горячих технологий 2017 года. Функциональное программирование? Мы этого научимся. Phoenix и OAuth? Изи. Postgres для хранения данных? Самом собой! Websockets тоже! Этот курс поможет вам быстро начать работать с Elixir и Phoenix - научит вас основам, необходимым для глубокого понимания и создания удиви
pragmaticstudio
Создайте полное приложение Elixir / OTP от начала до конца. Поместите Elixir и OTP в действие, когда вы создаете отказоустойчивое приложение с нуля, в этом 6,5-часовом видеокурсе. Если вы новичок в Elixir, вы получите пошаговые инструкции в привлекательном формате, который вы больше нигде не найдете. Если у вас есть опыт работы с Elixir, вы получите более глубокое понимание того, что вы принимаете как должное, и заполните пробелы в знаниях.
В этом воркшопе вы получите знание языка программирования Elm с нуля, чтобы иметь возможность создавать веб-приложение. Во-первых, мы обсудим преимущества Elm, в том числе его очень сплоченную независимую экосистему пакетов, отладчик и репутацию практически никогда не падающего приложения. Затем мы перейдем к синтаксису языка, взаимодействию, управлению состоянием, тестированию, работу с серверами, взаимодействию с JavaScript и тому, как собрать
Вы потратили время на строительство с Elm, и у вас возникли некоторые вопросы. Каковы наилучшие методы аутентификации, масштабирования, стилизации, структуры модулей, отдельных страниц и оптимизации производительности? Как вы можете декодировать сложные структуры JSON и взаимодействовать с хитрыми API-интерфейсами JavaScript? Этот семинар будет подробно рассказывать обо всех этих темах, помогая вам использовать способности Elm на следующем уровне
knowthen.com
Узнайте, как создавать веб-приложения с помощью Elm. Elm - потрясающий новый функциональный язык программирования для создания фронтенд части веб-приложений.
