Следуя нашему предыдущему руководству Простая интеграция виджета аукциона, вот более подробное руководство о том, как интегрировать виджет аукциона в ваше приложение.
Настройка приложения
Мы собираемся использовать здесь yarn, но вы можете использовать npm, если хотите.
При необходимости установите create-react-app.
$ yarn global add create-react-app
Мы создадим новое приложение auctioned-my-car, предназначенное для продажи моей машины с аукциона:
Начнем с создания:
$ create-react-app auctioned-my-car $ cd auctioned-my-car $ yarn start
Теперь у нас есть работающее приложение, давайте интегрируем виджет аукциона Auctionity, соответствующий моей машине.
Очистка нашего приложения
В первую очередь удалите все ненужные файлы: App.css, App.js, App.test.js… и т. Д. Ваш проект может выглядеть так:
Добавление виджета:
Перейдите на https://app.auctionity.com и войдите в свою учетную запись.
Создание нового аукциона
Скопируйте первое предоставленное поле кода.
и вставьте его в свой index.html
Затем, если вы еще не используете Bit, настройте его реестр с областью действия для установки компонентов с помощью Yarn:
$ yarn config set "@bit:registry" "https://node.bitsrc.io/"
или с npm:
$ npm config set @bit:registry https://node.bitsrc.io
Дополнительная документация по биту на https://bitsrc.io
Затем установите @bit/domraider.auctionity.global.auction-widgetpackage
$ yarn add @bit/domraider.auctionity.global.auction-widget
В вашем index.js
Вот и мы, наш аукцион открыт:
Это нормально, но, возможно, слишком просто и не совсем то, что нам нужно, чтобы подчеркнуть красоту нашей машины.
Давай настроим это
Итак, что мы сделали?
WidgetContainer - это своего рода суперкомпонент, отвечающий за создание моста между клиентом и блокчейном.
Его ids props представляет собой массив идентификаторов аукционов, вы можете управлять любым количеством аукционов, используя только один контейнер.
Контейнер использует шаблон «Функция как дочерние компоненты». Как следует из названия, его дочерним элементом является функция, параметры которой являются всей необходимой информацией для отображения аукциона по вашему желанию.
id, name: идентификатор и название аукциона.
amount - текущая сумма аукциона
history - это массив каждой ставки на аукционе, отсортированный по дате от самой последней до самой последней.
startAt, endAt - отметки времени
isLogin устанавливается в true, если клиент вошел в систему, по умолчанию false
email - адрес электронной почты подключенного пользователя, по умолчанию null
bid - это функция, которая принимает 2 параметра: id аукциона и amount (повышение). Он попросит пользователя пройти аутентификацию, если он еще этого не сделал.
logout функция отключения 😮
pending устанавливается на true во время торгов.
Конечный результат
Вот и мы! Вы можете пойти еще дальше с клиентским API «bc -uctionjs», чтобы управлять своей собственной системой аутентификации, мы расскажем вам больше об этой функции в следующей статье.
Если вам понравилась эта статья, похлопайте по ней! 👏
