Для моего проекта фазы 1 для программы разработки программного обеспечения Flatiron School мне было поручено создать одностраничное приложение (SPA) с использованием HTML, CSS и JavaScript. Требования включали использование общедоступных API с JSON в качестве формата связи.

Фон

Прежде чем приступить к проекту, я должен рассказать вам небольшую предысторию. Если вы инвестор и инвестировали как в акции, так и в криптовалюты, вы, вероятно, знаете, как сложно узнать общую стоимость вашего портфеля, базовую стоимость и размер нереализованной прибыли или убытков. Это особенно верно, если вы покупаете внебиржевые ценные бумаги, торгуете акциями на международных биржах или инвестируете в нишевые криптовалюты. Вам придется работать с несколькими брокерскими компаниями, платформами обмена криптовалютами, а иногда и с DEX (децентрализованными биржами), и расчет совокупной стоимости портфеля всех платформ может быть такой головной болью.

Здесь на помощь приходит BUNDLE, мое простое приложение-агрегатор портфелей. Оно получает данные о ценах в режиме реального времени из двух API (Finnhub для акций и Alpha Vantage для криптовалют) и вычисляет общую стоимость. , нереализованная прибыль/убыток акций и криптовалют в вашем портфеле. Вы можете добавлять, редактировать или удалять позиции по акциям/криптовалюте на простой платформе, а BUNDLE агрегирует и обновляет ваш портфель.

Планирование

Я начал свой путь к созданию SPA-проекта с чернового дизайна пользовательского интерфейса в иллюстраторе. Затем я использовал FlowMapp для пошагового отображения взаимодействия пользователя с приложением от регистрации, входа в систему до добавления или продажи позиций по акциям/криптовалюте.

Хотя и первоначальный дизайн, и блок-схема пользователя ни в коем случае не были идеальными, и вскоре я понял, что не хватает некоторых важных частей, визуализация моих идей для проекта в начале помогла мне намного позже, когда я действительно начал кодировать и создавать проект.

Здание

Первая часть моего приложения — это формы входа/регистрации.Поскольку проект не включает в себя разработку серверной части, информация о пользователе и позиции по акциям/криптовалюте для пользователей хранятся в файле JSON на JSON-сервере. », который служит фиктивным внутренним сервером для проекта.

Вы можете переключаться между входом в систему и регистрацией, нажав зарегистрироваться и войти. При отправке форма регистрации отправляет запрос на выборку POST на сервер JSON и создает новые данные пользователя и записи данных о позиции. Форма входа имеет поле для ввода имени пользователя. При отправке формы входа данные пользователя извлекаются с сервера JSON, и приложение попытается найти запись данных пользователя с именем пользователя, совпадающим с вводом в форме входа. Если не удается найти совпадение, в форме входа отображается сообщение об ошибке «пользователь не найден, попробуйте еще раз». Если он находит совпадение, он извлекает данные о позиции портфеля соответствия и переводит вас в основной интерфейс.

Приложение будет отправлять запросы GET на выборку в API, чтобы в режиме реального времени получить цену активов в портфеле пользователя, а также рассчитать и отобразить общую стоимость, базовую стоимость, а также нереализованную прибыль и убыток.

Основной интерфейс имеет 3 дашборда и 2 таблицы. Позиции акций и криптовалюты отображаются в соответствующих таблицах. Общие значения, базовая стоимость и нереализованная прибыль/убыток портфелей акций и криптовалют отображаются на информационных панелях над таблицами, а на главной информационной панели отображаются агрегированные (акции + криптовалютные) значения портфелей.

Если вы хотите добавить акцию или криптовалюту в свой портфель, вы можете нажать кнопку ДОБАВИТЬ АКЦИЮ или ДОБАВИТЬ КРИПТО. Отобразится форма добавления акций/криптовалюты, которая принимает тикер или символ, количество акций или токенов и базовую стоимость акции или криптовалюты.

Когда вы нажмете ОТПРАВИТЬ, он отправит запрос POST на сервер JSON (добавит новую позицию к пользовательским данным) и запрос GET для API. Затем он отобразит положение, пересчитает значения и обновит информационные панели.

Если вы хотите отредактировать свою позицию, вы можете нажать кнопку редактирования, которая находится в правом конце каждой строки акций или криптовалюты в таблицах, и отобразится форма редактирования. Если вы хотите закрыть позицию, вы можете нажать закрыть позицию, а затем да. Если вы хотите изменить количество акций или токенов в позиции, вы можете нажать изменить позицию и выбрать либо уменьшить позицию на, либо увеличить позицию на. Затем вы указываете количество акций или токенов, которые хотите добавить или удалить из позиции. Если вы выберете увеличить позицию на, в форме также будет запрошена стоимость добавления.

После отправки он обновит информацию о позиции в пользовательских данных на сервере JSON, сделает запрос API и отобразит информационные панели с обновленными значениями.

Проблема и решение

Одна проблема, с которой я столкнулся больше всего, заключалась в последовательном выполнении блоков кода, хотя по умолчанию они выполняются асинхронно.

JavaScript обычно выполняет строки кода в порядке сверху вниз. Однако сетевые запросы (выборка) выполняются асинхронно в JavaScript. Это означает, что блок кода, содержащий запрос на выборку, удаляется из нормального потока выполнения. JavaScript не ожидает завершения запроса на выборку API перед выполнением следующих строк кода. Обычно это полезная функция для веб-сайта, поскольку ему не нужно ждать ответа от сервера, прежде чем загружать и отображать его содержимое.

В случае BUNDLE,расчеты стоимости портфеля и прибыли/убытка основаны на данных о ценах в реальном времени из API. Чтобы это работало, функция, которая обрабатывает вычисления, должна дождаться завершения выборки API. Чтобы выполнять блоки кода последовательно вместо асинхронно, я использовал асинхронную функцию. В функции async вы можете использовать ключевое слово await, которое заставляет функцию ждать, пока возвращенное обещание не будет разрешено.

В приведенном ниже коде функция renderExistingPosition() объявлена ​​с ключевым словом async, а ключевое слово await используется перед выражениями, обрабатывающими API. Запросы. Вызовы функций (updateStockMarketData и updateCryptoMarketData), которые следуют за выражениями await, будут ожидать разрешения возвращенных обещаний и использовать данные о цене, отправленные из API для выполнения расчетов.

Улучшения на будущее

В конце концов, я горжусь достигнутым прогрессом. Создание BUNDLE с нуля поначалу было пугающим, так как у меня не было опыта создания веб-приложений, но мне нравился каждый шаг планирования, проектирования, написания кода и решения проблем.

Я намерен вернуться к этому проекту и добавить еще несколько функций, чтобы улучшить BUNDLE. Некоторые из вещей, которые я хочу добавить, — это безопасный метод аутентификации с использованием стороннего API, такого как Firebase, и графическая визуализация портфеля (соотношение акций и криптовалюты, процент позиций и т. д.).

Большое спасибо за чтение этой статьи и дайте мне знать ваши мысли о моем проекте.