Вы могли покупать или не покупать криптовалюту в последние годы, месяцы или даже недели. Биткойн какое-то время доминировал в новостном цикле, и так много людей стали новыми инвесторами. Но поскольку цель состоит в том, чтобы быть в безопасности с вашими монетами, может быть хлопотно проверять цену каждой монеты, сколько ее у вас есть, и что вы приобрели или потеряли. Использование API и некоторого количества JavaScript может упростить процесс проверки и сделать его таким же простым, как загрузка на веб-страницу.
Выбор API
Существует несколько различных API, и использование API с рынка может быть проблемой, потому что это показывает вам, по чему торгуется рынок, и не обязательно правильную цену. Если у вас есть монеты на бирже, лучше всего использовать API этой биржи, если он у них есть. Есть две большие бесплатные, о которых я знаю, Binance (одна из крупнейших бирж) и Coin Market Cap. В качестве API я выбрал Coin Market Cap.
Начало
Все начинается с простого запроса. Существует несколько способов ограничить то, что вы фактически загружаете, используя convert, limit и start. Я преобразовал все значения в доллары США и решил загрузить только 200 лучших криптовалют.
Одной из проблем, связанных с загрузкой слишком большого количества файлов, является время загрузки и последующие функции сортировки. Но вы не хотите загружать слишком мало, потому что они оцениваются по общей «рыночной капитализации», которая представляет собой стоимость монеты, умноженную на количество монет в обращении. Тем не менее, стоимость очень изменчива, поэтому ваша монета может быть высоко в один день, но намного ниже на следующий день. У вас есть монета с рейтингом 180 прямо сейчас, я рекомендую загрузить еще около 50 монет после этого, чтобы учесть изменение рыночной капитализации.
Вы можете увидеть всю документацию для этого API здесь:
Вытягивание из объектов
Мы загрузим наш объект в переменную, все в порядке, потому что это будет просто массив объектов, каждый объект будет информацией о монете.
cObj теперь содержит всю информацию о 200 монетах, которые мы загрузили ранее. Есть несколько различных вариантов, к которым мы можем получить доступ из этих объектов:
Но наша главная цель — взять наши монеты и увидеть их текущую стоимость, чтобы нам не приходилось каждый раз входить в разные места или выполнять расчеты самостоятельно. Для этого я сделал простую функцию.
Нашими параметрами для этой функции будут четыре монеты, которые у меня есть в качестве примера, и несколько других битов, которые мне понадобятся. ericContent и e — это две строки, которые используются для обозначения различных областей, в которые я собираюсь добавить эту информацию в HTML. ericArrayName и ericArrayPrice — это пустые массивы, в которые я собираюсь сохранять значения. И, наконец, ericPurchasePrices — это массив значений времени покупки монеты, чтобы мы могли сравнить их с текущими ценами.
Отображение
Я не буду вдаваться в подробности этого цикла for, потому что там весь код. Сначала это может немного сбивать с толку, но цель состоит в том, чтобы взять наши символы, которые мы передали, в массив, которым мы владеем, и отсортировать объект, пока не будет совпадения.
Когда происходит совпадение, мы начинаем извлекать информацию из этого объекта, добавляем класс или два для небольшого стиля, а затем отображаем его на странице с помощью некоторого динамического отображения HTML. Одна забавная вещь заключается в том, что я создаю значок и меняю его класс в зависимости от того, больше или меньше текущая цена, чем текущая цена. Это даст пользователю или вам немедленную визуальную обратную связь о том, выигрывают они или нет.
Здесь важно отметить, что два пустых массива, которые мы передаем, заполняются: один — именами монет, а другой — ценами монет в соответствующих слотах.
Расчеты
У нас есть около половины того, что нам сейчас нужно, включая название валюты, цену покупки и текущую цену. Но мы не выяснили, сколько каждой монеты у нас есть, общую сумму денег и процент прибыли/убытков. Все это может пригодиться.
В этой функции мы сортируем имена всех монет и помещаем внутрь простой оператор switch для работы с каждой монетой, которая у нас есть. Для чего-либо крупномасштабного вы бы хотели, чтобы это указывало на отдельную функцию для выполнения ваших вычислений, но, поскольку их всего четыре и больше их не будет, я чувствовал себя нормально, имея встроенный код для каждого отдельного оператора, хотя это было немного повторение.
Наши постоянные значения, такие как ERIC_VEN, представляют собой количество купленных монет. Мы просто умножаем это на цену предмета и получаем общую стоимость. Затем мы ищем узел абзаца, который мы создали в нашей функции forLoop (помните ту строку «e», которую мы передали? она была добавлена к идентификатору на странице с названием монеты), и мы присоединяем абзац плюс текст к идентификатору. Функцию создания этого абзаца и текста можно увидеть ниже. Затем мы просто добавляем значение к промежуточной общей цене.
Заключительные части
На данный момент нам просто нужно отобразить общую сумму денег, а также процент проигрыша/прибыли.
Все еще внутри функции вычисления, но вне и после нашего цикла, мы округляем нашу общую цену и отображаем ее. Мы также сообщаем нашу общую прибыль и убытки. И, наконец, подсчитайте процент потерь и добавьте его на страницу.
Добавление HTML
Из-за того, что мы используем динамическое создание HTML, фактический HTML очень разреженный. Я использовал Bootstrap, чтобы сайт выглядел красиво и с хорошей функциональностью, не тратя на это слишком много времени (вы могли заметить, что в моем коде добавлены классы, соответствующие bootstrap). Наш необработанный HTML невероятно прост, как показано ниже.
Вывод
Помимо этого, простой стиль — это все, что нужно для красивого отображения вещей. Вы можете просмотреть мой завершенный проект и увидеть, сколько денег я потерял здесь:
Не стесняйтесь смотреть на мой github для полного кода
Райдер Дженсен — студент программы «Цифровые медиа» в Университете Юта-Вэлли, Орем, штат Юта, изучает разработку веб-сайтов и приложений. Следующая статья относится к дополнительному личному проекту и представляет полученные навыки.
