Пошаговое руководство по React для начинающих по созданию калькулятора криптовалюты - Часть 1

Создание собственного калькулятора возврата криптовалюты - отличное дополнение к портфолио любого разработчика, особенно если вы энтузиаст криптовалюты. Эта статья написана для вас, если вы являетесь разработчиком, проходящим обучение и у вас есть #Bitcoin в своей биографии в Twitter. Это руководство полностью подходит для начинающих и изучающих React среднего уровня! Я добавил код в CodeSandbox для различных шагов, чтобы вы могли легко следить за ними. В этом руководстве мы рассмотрим, как использовать хуки для ввода данных, как извлечь эти возвращенные данные из API и как отображать и использовать эти данные. Цена монет на заданную дату будет взята из CoinGecko API. API имеет небольшую задержку в данных, которые он предоставляет для монет, поэтому калькулятор не возвращает ничего для более поздних дат.

Как это будет работать

Пользователь вводит, какую монету они купили, дату покупки, дату продажи и количество купленных токенов. Калькулятор вернет их общую прибыль или убыток. Вы можете проверить мою версию окончательного проекта на https://cryptoreturnscalc.netlify.app/, а исходный код можно найти на: https://gitlab.com/adamshinder/crypto-returns-calculator. Итак, давайте перейдем к делу!

Шаг 1. Настройте и используйтеState

Во-первых, давайте запустим и запустим шаблонный проект React. Используйте npm create-react-app crypto-calc-tutorial или yarn create-react-app crypto-calc-tutorial в терминале. Это создаст базовую папку шаблона проекта React под названием crypto-calc-tutorial. Войдите в эту папку, выполнив cd crypto-calc-tutorial, и однажды в папке откройте любой редактор кода. Если вы, как и я, используете VSCode, то можете, code ..

Оказавшись в папке, откройте src / App.js, и вы можете извлечь файл. Просто оставьте следующее:

import React from “react”;
import “./styles.css”;
export default function App() {
  return (
    <div className=”App”>
      Welcome to the Tutorial!
    </div>
  );
}

Во-первых, давайте просто создадим поле для ввода. Нам понадобится функция, которая принимает ввод и изменяет переменную на то, что вводит пользователь. Для этого мы будем использовать хук useState. Импортируйте useState с import React, { useState } from “react”;.

Теперь давайте настроим функцию useState для приема входных данных. Это первое поле ввода будет переменной покупки. Вы можете объявить buy, который устанавливается с помощью функции setBuy, и установить его значение в пустую строку, как показано ниже.

const [buy, setBuy] = useState(“”);

Теперь нам нужно, чтобы ввод отображался на экране. Вы можете сделать это с помощью <input> </input> в <div> функции рендеринга. На вашем экране появится пустое поле ввода. Теперь давайте добавим следующие функции:

<input defaultValue={buy} onChange={(e) => setBuy(e.target.value)} />

Это устанавливает то, что вводится как значение покупки, и когда оно изменяется, возьмите функцию с опорой e и передайте ее значение в функцию setBuy. Теперь это изменит переменную покупки на то, что вы вводите в поле ввода. Чтобы доказать это, добавьте ввод в DOM с <h3> {buy} </h3>.

Пока что вы можете видеть этот пример с this CodeSandbox.

Шаг 2. Получение данных из CoinGecko API

Теперь давайте возьмем этот элемент ввода и используем его для получения цены биткойнов на определенную дату. Допустим, это ввод даты для покупки или продажи. Глядя на страницу CoinGecko API, похоже, что нам нужен /coins/{id}/history, потому что для получения цены требуется монета и дата. Идеально!

Прежде чем добавить его в приложение, давайте посмотрим, что возвращается по следующему URL. https://api.coingecko.com/api/v3/coins/bitcoin/history?date=1-1-2018&localization=false

Как видите, для монеты биткойн на дату, 1–1–2018, API возвращает все данные, которые нам могут понадобиться, такие как имя, тикер, изображение. активы, рыночные данные, такие как текущая цена, и другие показатели, ориентированные на сообщество, например, количество подписчиков в социальных сетях.

С правильным URL-адресом давайте настроим функции, которые принимают эту информацию и отображают возвращаемые данные. Во-первых, нам нужно создать функцию, которая вводит дату в URL-адрес API и возвращает приведенный выше текст. Мы делаем это следующим образом:

const coingeckoUrl = (date) => {
  return `https://api.coingecko.com/api/v3/coins/bitcoin/history?             date=${date}&localization=false`;
};

Как видите, он передает дату пропуска в URL-адрес, в который вводится дата. Итак, если свойство даты - «1–1–2018», функция coingeckoUrl вернет текст, показанный выше.

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

Функция, которая анализирует эту информацию, следующая:

const coingeckoFetch = async (date) => {
  fetch(coingeckoUrl(date)).then((response) =>
    response.json().then((jsonData) => {
      setBuy(jsonData);
      console.log(jsonData);
     })
  );
};

Эта функция принимает свойство даты и извлекает все, что возвращает coingeckoUrl. Предположим, что дата - «1–1–2018», это coingeckoUrl(date) и есть тот кусок информации. Затем возьмите этот ответ (большой двоичный объект) и проанализируйте его в формате JSON с помощью respone.json(). Затем возьмите этот jsonData и установите его в функцию setBuy, которую мы знаем из раздела useState, так что теперь buy теперь возвращает проанализированные данные. Это не самый эффективный способ хранения информации, но мы немного очистим его.

Теперь давайте вернемся к нашей функции возврата и вместо того, чтобы изменять функцию setBuy на onChange={(e) => setBuy(e.target.value), мы собираемся установить ввод на дату, которая вводится в функцию coingeckoUrl. Это показано в следующем:

onChange={(e) => coingeckoFetch(e.target.value)

Итак, теперь вводится дата, которая вводится в функцию coingeckoFetch! Чтобы уточнить, этот ввод даты передается в функцию coingeckoFetch, которая затем передается в функцию coingeckoUrl.

Весь код до этого момента можно найти в CodeSandbox здесь. Помните, что на протяжении всего руководства вам нужно заполнить весь формат в формате дд-мм-гггг. Любой другой формат и API не будут отображать выходные данные. Теперь у вас есть работающее приложение, которое возвращает данные о биткойнах за заданную дату. Чтобы убедиться в этом, проверьте консоль;)

Отличная работа над приложением! Вы должны быть очень довольны собой. Вы только что научились вводить данные, извлекать данные из API, а затем анализировать этот ответ! Далее мы перейдем к отображению этой информации.

Часть 3: Отображение данных

Возвращенные данные отображаются в консоли, как и ожидалось, так как мы можем сделать их отображением в DOM. Во-первых, запомните, где хранятся данные в переменной покупки. Итак, вы можете вызвать данные следующим образом:

<h3> {buy.market_data?.current_price.usd}{“ “}USD</h3>

На этом этапе в приложении, когда вы вводите дату, вы увидите цену биткойнов на эту дату в долларах США. Из журнала console.log(buy) видно, почему мы используем приведенный выше код. Начиная с переменной buy, затем .market_data , чтобы получить доступ к этому разделу json, затем .current_price, а затем мы хотим, чтобы эта цена была в долларах США, поэтому .usd. Это путь к возврату цены на указанную дату. Этот путь показан ниже.

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

Часть 4. Получение нескольких фрагментов данных

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

Для начала давайте создадим функцию с именем handleBuyChange, и вместо прямого вызова coingeckoFetch мы вызовем эту новую функцию. Создайте функцию, которая принимает ввод из поля и вызывает как coingeckoFetch, так и setBuy.

Ниже показано, как будет выглядеть эта функция.

const handleBuyChange = (e) => {
  let val = e.target.value;
  setBuy(val);
  coingeckoFetch(val);
};

Затем в onChange для элемента ввода удалите coingeckFetch и вызовите эту функцию с введенным значением. Больше не нужно делать e.target.value, потому что это уже было учтено в val.

Большой! А теперь давайте сделаем то же самое с продажами. Помните шаги, которые мы проделали в начале при вводе данных о покупке? Сначала нам нужно создать новый useState для sell и setSell. На этом этапе я изменил имена переменных, чтобы было более понятно, что мы вводим sellDate и setSellDate. Мы начнем хранить ответ от API в другой переменной. Подробнее об этом через минуту.

Во-первых, мы собираемся продублировать все входные данные и функции покупки для продажи. Скопируйте и вставьте элемент buy <input> и функцию handleBuyChange и переименуйте их соответствующим образом на sell. Измените defaultValue во входе, имя отображаемого значения, добавьте setSellDate к функции coingeckoFetch и напишите функцию handleSellChange, как это было сделано для ввода даты покупки. Вы можете увидеть все эти изменения, сделанные в CodeSandbox здесь.

Я уверен, что вы видите проблему с CodeSandbox выше, поскольку компоненты для продажи и покупки идентичны, поэтому он извлекает последнюю введенную дату. Раньше мы вводили разные даты покупки и продажи, но теперь нам нужно различать данные о покупке и продаже. Чтобы исправить это, нам нужно создать две переменные. Один, который может хранить данные, возвращенные для покупки, и другой, который возвращает данные для даты продажи (ввод). Я обозначил это trade и setTrade переменными sellData и buyData, установленными на пустой объект.

const [trade, setTrade] = useState({
  sellData: {},
  buyData: {},
});

Ранее в функции выборки мы просто передавали jsonData в setBuyDate, как показано ниже.

setBuyDate(jsonData);
setSellDate(jsonData);

Теперь, когда у нас есть переменные для хранения этих данных, нам нужно сделать следующее.

setTrade({ …trade, buyData: jsonData });

Теперь, как нам различать продажи и покупки, чтобы выборка знала, какие данные возвращать? Для этого мы будем использовать логическое значение buy. Если это покупка, она будет принята, и эта покупка будет равна истине, а если это продажа, для покупки будет установлено значение false. Когда мы передаем входные данные даты в coingeckoFetch, мы также предоставляем истину или ложь.

В функции coingeckoFetch добавьте дополнительную опору с именем buy и установите для jsonData значение buyData или sellData в зависимости от значения buy, используя оператор if. Ниже приведена функция с этим оператором покупки и продажи if, который устанавливает переменную в зависимости от того, какое логическое значение ей передано. Не передавайте покупку в coingeckoUrl, потому что ему все равно, покупка это или продажа.

const coingeckoFetch = async (buy, date) => {
  fetch(coingeckoUrl(date)).then((response) =>
    response.json().then((jsonData) => {
      if (buy) {
      setTrade({ …trade, buyData: jsonData });
      } else {
      setTrade({ …trade, sellData: jsonData });
      }
    })
  );
};

Теперь, когда coingeckoFetch ожидает, что ему будет передано логическое значение, нам нужно изменить наши функции handleSellChange и handleBuyChange, как показано ниже, передав эту переменную false для продажи.

const handleSellChange = (e) => {
  let val = e.target.value;
  setSellDate(val);
  coingeckoFetch(false, val);
};

Наконец, просто измените то место, где мы поместили sellDate и buyDate на trade.sellData и trade.buyData, потому что теперь у этих данных есть свои собственные переменные.

Все эти изменения можно найти в этом CodeSandbox, и теперь у вас есть приложение, которое может вводить даты, получать данные, а также сохранять и отображать цену. Поздравляю! С этого момента все идет довольно гладко. Самое сложное позади.

Часть 5. Добавьте объем и вычислите доход

Теперь у нас есть две разные цены на биткойны на две разные даты! Теперь давайте добавим область для объема (количества купленных токенов). Это не так уж сложно. Просто создайте volume и setVolume useState и установите для этого значения 0, как показано здесь:

const [volume, setVol] = useState(0);

Чтобы изменить эту громкость, нам нужно будет создать поле ввода, в котором будет установлено значение громкости. Это будет похоже на то, что мы сделали с вводом даты покупки и продажи. Итак, в return() добавьте следующее:

<input value={volume} onChange={(e) => setVolume(e.target.value)} />

Вы можете увидеть весь этот обновленный код здесь и, бац! Теперь у вас есть три переменные, необходимые для расчета прибыли от сделки. Теперь мы будем вычислять доходность, но сначала нам нужна переменная для хранения доходности и установка ее на ноль. Объявляя новую переменную, я очень оптимистично настроен, что вы будете зарабатывать деньги, поэтому я собираюсь вызвать эту переменную gains в trade const.

const [trade, setTrade] = useState({
  sellData: {},
  buyData: {},
  gains:0
});

Имея это на месте, попробуйте выполнить функцию самостоятельно. Я очень уверен, что вы справитесь! Запомните, какие значения возвращают данные о продаже и покупке. Затем установите выигрыш, равный их разнице, умноженной на объем жетонов.

Теперь пора создать функцию для вычисления этих прибылей (или убытков). Мы знаем, что цена биткойнов на основе введенной даты хранится в trade.sellData и trade.buyData, поэтому, чтобы получить цену в долларах США, мы получим разницу междуtrade.sellData.market_data?.current_price.usd и trade.buyData.market_data?.current_price.usd. Функция должна установить прирост для sellData минус значение buyData, умноженное на объем. Это показано ниже в функции calcGains. Прирост устанавливается в результате этих операций.

const calcGains = () => {
  setTrade({
     ...trade,
     gains:
       (trade.sellData.market_data?.current_price.usd -
         trade.buyData.market_data?.current_price.usd) *
       volume,
  });
};

Теперь создайте кнопку, которая вызывает calcGains и выводит результат! Тогда вы закончите с калькулятором возврата биткойнов! Добавьте элемент кнопки с onClick, который вызывает calcGains. Вуаля! У вас есть полностью функциональный калькулятор возврата биткойнов! Вы можете проверить его и поиграть с ним в CodeSandbox здесь.

Поздравляем с созданием калькулятора возврата биткойнов! Это отличный первый шаг на пути к разработке интерфейса. Я настоятельно рекомендую укладывать его и сделать так, чтобы он выглядел красиво. Если вы хотите превратить этот биткойн-калькулятор во множество различных криптовалют на выбор, перейдите к части 2 этого руководства. Увидимся там!

Если у вас есть какие-либо вопросы, комментарии или вы хотите связаться со мной, свяжитесь со мной в Twitter по адресу @adshinder. Также выражаем благодарность Лиору Бен-Давиду за его помощь в написании статьи. Подпишитесь на него в Твиттере @Lior_bendavid!

Больше контента на plainenglish.io