В заключительном проекте четвертого этапа учебного курса Flatiron Software Engineering Bootcamp вы создадите одностраничное приложение (SPA) с использованием HTML, CSS и JavaScript с внутренним API, созданным с помощью Ruby и Rails. Для этого проекта мы возродим проект CLI, который мы создали на первом этапе учебного курса Flatiron Software Engineering Bootcamp, CyptoStats,и, используя тот же API, превратим его в криптовалюту. торговый симулятор!

Требования к проекту

  1. Приложение должно представлять собой внешний интерфейс HTML, CSS и JavaScript с внутренним интерфейсом Rails API, где все взаимодействия между клиентом и сервером обрабатываются асинхронно с использованием AJAX, а данные, отправляемые обратно, отображаются в формате JSON.
  2. Приложение JavaScript должно использовать объектно-ориентированный JavaScript для инкапсуляции связанных данных и поведения.
  3. Домен и модель, обслуживаемые бэкендом Rails, должны включать ресурс, по крайней мере, с одним отношением «имеет-много». (пример: у пользователей есть много связанных моделей публикации или фотографии)
  4. Серверная часть и внешний интерфейс должны совместно демонстрировать взаимодействие клиент-сервер с не менее чем 3 вызовами AJAX, охватывающими не менее 2 операций Create, Read, Update,иDelete (CRUD). .

Обзор проекта

Crypto Trading Simulator (CTS) — это веб-приложение JavaScript, которое имитирует торговую платформу криптовалюты. Это веб-приложение использует API CoinGecko для получения актуальных рыночных данных о 100 лучших криптовалютах на их рынке. Затем рыночные данные передаются в рыночную таблицу веб-приложений, которая периодически обновляет данные. Пользователю предоставляется 100 000 долларов США (фальшивая валюта) в качестве его начальной покупательной способности, которую он может использовать для покупки и продажи криптовалют по их текущей цене. Каждая купленная монета затем сохраняется во внутреннем API Rails и отображается в пользовательской таблице Wallet, которая отображает цену и количество монеты (криптовалюты), когда она была куплена, а также текущую стоимость этой монеты на рынке и расчетная доходность в случае продажи.

Внешний интерфейс

Файловая структура внешнего интерфейса будет разделена следующим образом:

Отправка запросов на выборку в удаленный API CoinGecko

В нашем coin.js мы будем отправлять запросы на выборку в удаленный API CoinGecko, где полученные данные будут отображаться в нашей рыночной таблице и сохраняться в статической переменной следующим образом:

Ajax звонки

Мы создадим файл JavaScript с именем api.js для динамической обработки наших вызовов Ajax. Этот класс будет использоваться нашими внешними моделями JavaScript user.js и trade.js для отправки запросов на выборку на наш сервер, который позаботится о наших Create, Read , и Update (CRUD).

Запросы на выборку внутри каждой из наших моделей внешнего интерфейса JavaScript можно выполнять с помощью async и awaitи/или .then следующим образом, чтобы создать наши экземпляры объекта JavaScript.

Бэкенд

Бэкэнд-структура будет сгенерирована с помощью следующих команд:

$ rails new crypto-trading-simulator-backend --api
$ rails g scaffold user username buying_power:decimal wallet_value :decimal
$ rails g scaffold trades coin_id user_id:integer sym qty:integer cost:decimal

Это должно сгенерировать нашу внутреннюю структуру в режиме API, сгенерировать наши модели и файлы миграции, а также наши контроллеры с кодом, который будет автоматически отображать наши данные в формате JSON.

Внесение доменов в белый список с помощью Rack CORS

Мы будем использовать Rack CORS для внесения в белый список доменов, которым разрешено подключаться к нашему серверу. Это должно быть уже закомментировано в нашем Gemfile, поэтому все, что нам нужно сделать, это прокомментировать это и запустить bundle install.

// Gemfile
gem 'rack-cors'

Затем перейдите в /config/initializers/cors.rb.

Прокомментируйте следующий код и установите для нашего источника значение * (все), так как сейчас мы будем запускать его через локальный сервер.

Это будет принимать все входящие запросы со всех доменов. Обычно вы добавляете домен, из которого вы размещаете свое веб-приложение (например, Heroku).

Сериализация наших данных с помощью Fast JSON API

Мы будем использовать Fast JSON для сериализации данных, которые будут отображаться в нашем API. Нам нужно будет включить это в наш Gemfile и запустить bundle install.

// Gemfile
gem 'fast_jsonapi'

Затем мы можем использовать rails для создания нашего сериализатора с помощью следующей команды:

$ rails g serializer User name buying_power:decimal wallet_value:decimal
$ rails g Trade coin_id user_id:integer qty:integer cost:decimal

И добавьте наши ассоциации и атрибуты, которые будут отображены следующим образом.

Дополнительная информация

Для получения дополнительной информации о проекте вы можете просмотреть мой GitHub.

Для демонстрации видео о том, как работает проект и как он выглядит, нажмите здесь.