То, что вы будете создавать, смотрите в живой демо-версии в тестовой сети sepolia и в git-репозитории.

Узнайте, как создать децентрализованный рынок фрилансеров, такой как Upwork, с помощью React, Solidity и CometChat.

В этом пошаговом уроке мы научим вас:

  • Как создать интерфейсы React для списка вакансий
  • Как создавать смарт-контракты Solidity для управления заданиями
  • Как интегрировать CometChat для общения один на один в режиме реального времени
  • Как сделать маркетплейс децентрализованным и раздражающим

Независимо от того, являетесь ли вы опытным разработчиком или новичком в Web3, это руководство даст вам навыки создания собственной торговой площадки для фрилансеров. Давайте начнем!

Предварительные условия

Для сборки вместе со мной вам понадобятся следующие инструменты:

  • Node.js
  • Пряжа
  • МетаМаска
  • Реагировать
  • Солидность
  • CometChat SDK
  • CSS попутного ветра

Я рекомендую посмотреть видео ниже, чтобы узнать, как настроить MetaMask для этого проекта.

Установка зависимостей

Клонируйте стартовый комплект и откройте его в VS Code, используя команду ниже:

git clone https://github.com/Daltonic/tailwind_ethers_starter_kit dappworks

cd dappworks

Затем обновите package.json, используя приведенный ниже фрагмент.

Пожалуйста, запустите команду Yarn install в своем терминале, чтобы установить зависимости для этого проекта.

Настройка CometChat SDK

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

ШАГ 1:

Перейдите в панель управления CometChat и создайте учетную запись.

ШАГ 2:

Войдите в личный кабинет CometChat только после регистрации.

ШАГ 3:

На панели управления добавьте новое приложение под названием Play-To-Earn.

ШАГ 4:

Выберите приложение, которое вы только что создали, из списка.

Из быстрого запуска скопируйте APP_ID, REGION и AUTH_KEY в свой файл .env. См. изображение и фрагмент кода.

Замените ключи-заполнители REACT_COMET_CHAT соответствующими значениями.

REACT_APP_COMETCHAT_APP_ID=****************

REACT_APP_COMETCHAT_AUTH_KEY=******************************

REACT_APP_COMETCHAT_REGION=**

Файл .env должен быть создан в корне вашего проекта.

Настройка сценария Hardhat

Перейдите в корневой каталог проекта и откройте файл «hardhat.config.js». Замените существующее содержимое файла предоставленными настройками.

Этот код настраивает Hardhat для вашего проекта. Он включает в себя импорт необходимых плагинов, настройку сетей (по умолчанию используется localhost), указание версии компилятора Solidity, определение путей для контрактов и артефактов, а также установку тайм-аута для тестов Mocha.

Файл смарт-контракта

Следующие шаги проведут вас через процесс создания файла смарт-контракта для этого проекта:

  1. Создайте новую папку с именем Contracts внутри папки src.
  2. Создайте новый файл с именем Dappworks.sol внутри папки контрактов.
  3. Скопируйте предоставленные ниже коды, вставьте их в соответствующие файлы и сохраните.

Выполнив эти шаги, вы успешно настроите необходимую структуру каталогов и создадите файл Dappworks.sol, который послужит основой для реализации логики смарт-контракта.

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

  1. Наследование контрактов и библиотеки:
  • Контракт наследуется от контрактов Ownable и ReentrancyGuard, которые обеспечивают контроль доступа и защиту от повторных атак.
  • Он импортирует несколько библиотек из платформы OpenZeppelin, включая Counters для управления счетчиками, SafeMath для безопасных математических операций, а также Ownable и ReentrancyGuard для контроля доступа и защиты повторного входа.

2. Переменные состояния:

  • Контракт включает несколько переменных состояния для управления списками вакансий, фрилансерами и предложениями. К ним относятся счетчики, структуры и сопоставления для хранения соответствующих данных.

3. Структуры:

  • Контракт определяет несколько структур, включая JobStruct, FreelancerStruct и BidStruct, для структурирования и хранения информации о заданиях, фрилансерах и предложениях.

4. Модификаторы:

  • Контракт определяет модификатор onlyJobOwner(uint id), который ограничивает определенные функции владельцем определенного списка вакансий.

5. Функции:

  • Контракт включает в себя различные функции по управлению списками вакансий и предложениями, в том числе:
  • addJobListing: позволяет пользователям создавать новый список вакансий, указав заголовок, описание и теги. Пользователи также должны прикрепить эфир в качестве приза за работу.
  • deleteJob: позволяет владельцу списка вакансий удалить его и получить приз.
  • updateJob: позволяет владельцу списка вакансий обновлять его данные.
  • bidForJob: позволяет пользователям делать ставки на списки вакансий.
  • AcceptBid: позволяет владельцу списка вакансий принимать конкретную ставку от фрилансера, назначая ему работу.
  • Спор: позволяет владельцу списка вакансий инициировать спор.
  • Отозвать: позволяет владельцу контракта отозвать назначение во время спора.
  • решено: позволяет владельцу контракта пометить спор как решенный.
  • выплата: позволяет владельцу списка вакансий платить назначенному фрилансеру, вычитая комиссию платформы.
  • Различные функции получения информации о вакансиях, участниках торгов, фрилансерах и многом другом.

6. Внутренние функции:

  • В контракте предусмотрены внутренние функции по учету времени и осуществлению платежей.

7. События:

  • Контракт генерирует события для регистрации различных действий и изменений состояния.

8. Конструктор:

  • Контракт не имеет конструктора, что указывает на то, что его можно развернуть как есть.

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

🚀 У блокчейна есть реальные варианты использования: Присоединяйтесь к Академии наставников Dapp за 8,44 доллара США в месяц, чтобы узнать все, что сможете.

Подпишитесь на Dapp Mentors Academy сегодня и получите эксклюзивный доступ к более чем 40 часам контента Web3, включая курсы по майнингу NFT, разработке блокчейнов и многому другому!

Тестовый сценарий

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

  1. Настройка и инициализация:
  • Скрипт импортирует необходимые библиотеки и определяет служебную функцию toWei для преобразования сумм эфира в wei.
  • Он определяет набор тестов с помощью функции describe Mocha и настраивает начальные переменные и экземпляры контракта в хуке beforeEach.

2. Тесты по созданию рабочих мест:

  • Сценарий включает несколько тестовых примеров для проверки создания и управления списками вакансий.
  • должен подтвердить получение списков вакансий: проверяет, можно ли получить список вакансий, и подтверждает, что существует один список вакансий.
  • должен подтвердить получение одного списка вакансий: извлекает конкретный список вакансий и проверяет его свойства.
  • должен подтвердить обновление вакансии: проверяет обновление сведений о вакансиях и правильность отражения изменений.
  • должен подтвердить удаление вакансии: добавляет, а затем удаляет список вакансий, проверяя, что количество вакансий становится равным нулю.
  • должен подтвердить подачу заявки на вакансию: проверяет размещение ставки в списке вакансий и подтверждает, что есть один участник торгов.
  • должен подтвердить принятие предложения о работе: размещает заявку, принимает ее и подтверждает назначение работы фрилансеру.
  • должен подтвердить оспаривание вакансии: инициирует оспаривание вакансии и проверяет, что вакансия помечена как оспариваемая.
  • должен подтвердить отзыв спорного задания: размещает заявку, принимает ее, оспаривает работу, а затем отзывает ее. Проверяет, отображается ли вакансия снова в списке и отменяется ли назначение фрилансера.
  • должен подтвердить разрешение спорного задания: инициирует спор, а затем разрешает его, гарантируя, что задание больше не будет помечено как оспариваемое.
  • должен подтвердить оплату задания: размещает ставку, принимает ее и выполняет выплату, подтверждая, что работа помечена как оплаченная.

В каждом тестовом примере используется утверждение expect Чайя для проверки ожидаемых результатов различных взаимодействий с контрактами. Тестовый сценарий тщательно тестирует функциональность смарт-контракта DappWorks, включая создание рабочих мест, назначение ставок, назначение, обработку споров, выплаты и многое другое.

Запустив Yarn Hardhat Test на терминале, вы проверите все основные функции этого смарт-контракта.

Сценарии развертывания

Скрипт развертывания DappWorks отвечает за развертывание смарт-контракта DappWorks в сети Ethereum с использованием среды разработки Hardhat. Вот обзор скрипта:

Ключевые компоненты и функциональность

  • Импортирует зависимости ethers и fs.
  • Определяет асинхронную функцию main() для развертывания контракта.
  • Получает фабрику контрактов для DappWorks.
  • Развертывает контракт и сохраняет экземпляр контракта в переменной контракта.
  • Ожидает завершения развертывания.
  • Извлекает адрес контракта и сохраняет его в переменной адреса.
  • Записывает адрес в файл JSON в каталоге src/abis/.
  • Обрабатывает любые ошибки, которые могут возникнуть во время выполнения.
  • Вызывает функцию main().
  • Регистрирует адрес развернутого контракта на консоли, если развертывание прошло успешно.

Сценарий развертывания DappWorks упрощает развертывание смарт-контракта DappWorks и генерирует файл JSON contractAddress.json, содержащий адрес развернутого контракта. Этот файл можно использовать для дальнейшей интеграции и взаимодействия с развернутым контрактом внутри проекта.

Чтобы использовать этот сценарий, создайте папку с именем «scripts» в корневом каталоге вашего проекта, если она еще не существует. В папке «scripts» создайте файл JavaScript с именем deploy.js, а затем скопируйте и вставьте предоставленный сценарий развертывания в этот файл.

Затем запустите yarn hardhat run scripts/deploy.js, чтобы развернуть смарт-контракт в сети на терминале.

Если вам требуется дополнительная помощь в настройке Hardhat или развертывании Fullstack DApp, я рекомендую посмотреть это информативное видео, содержащее рекомендации и инструкции.

Разработка фронтенда

Чтобы начать разработку внешнего интерфейса нашего приложения, мы создадим новую папку под названием «компоненты» внутри каталога src. В этой папке будут храниться все компоненты, необходимые для нашего проекта.

Для каждого из перечисленных ниже компонентов вам необходимо будет создать соответствующий файл в папке src/comComponents и вставить в него его коды.

Компонент заголовка

Компонент заголовка DappWorks — центральная часть пользовательского интерфейса. Он оснащен логотипом DappWorks, навигационными ссылками для быстрого доступа к различным разделам приложения и кнопкой подключения кошелька. Удобный для мобильных устройств дизайн включает кнопку переключения компактного меню. Этот компонент улучшает навигацию пользователя и интеграцию кошелька.

Компонент карты списка вакансий

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

Посмотрите мое новое руководство на YouTube, чтобы узнать, как интегрировать соединитель нескольких кошельков RainbowKit в ваше децентрализованное приложение, чтобы улучшить качество и удобство использования.

Компонент CreateJob

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

Удалить компонент Job

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

Компонент UpdateJob

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

Компонент JobListingOwnerActions

Этот компонент отображает набор действий, которые может выполнить владелец списка вакансий. Он отображает информацию о списке вакансий, включая название, цену, теги и описание. В зависимости от статуса списка вакансий он позволяет владельцу выполнять такие действия, как обновление, удаление, просмотр участников торгов, оплата и общение с фрилансером. Компонент также обрабатывает различные визуальные представления в зависимости от состояния списка вакансий, например отображение статуса «Завершено», когда задание оплачено.

Компонент JobBid

Этот компонент отображает информацию о списке вакансий для потенциальных участников торгов. Он отображает название должности, цену (в Ethereum), теги и описание вакансии. Кроме того, он предоставляет кнопку «Чат с фрилансером», которая позволяет пользователям начать чат с владельцем списка вакансий. Он служит предварительным просмотром вакансии для лиц, заинтересованных в торгах на нее.

Компонент «Карточка заявителя»

Этот компонент отображает информацию о претендентах или претендентах на вакансию. На нем показан усеченный адрес учетной записи участника торгов в Ethereum, а также кнопки для начала чата с участником торгов и принятия его ставки. Кнопка «Чат» ведет на страницу чата с участником торгов, а кнопка «Принять» позволяет владельцу задания принять предложение участника торгов. Он обеспечивает удобный интерфейс для управления заявлениями о приеме на работу.

Компоненты выплаты

Компонент «Выплата» используется для облегчения процесса выплаты по списку вакансий. Он отображает модальное диалоговое окно с возможностью инициировать платеж. Пользователи могут либо продолжить выплату, либо отменить ее. После инициации выплаты он связывается с блокчейном с помощью функции выплаты и отображает всплывающие уведомления, информирующие пользователя о статусе транзакции. Этот компонент предоставляет удобный интерфейс для обработки выплат за выполненные задания.

Хотите узнать, как создать DApp с ответом на заработок с помощью Next.js, TypeScript, Tailwind CSS и Solidity? Посмотрите это видео прямо сейчас!

Это видео — отличный ресурс для всех, кто хочет научиться создавать децентрализованные приложения и зарабатывать эфиры.

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

Чтобы начать разработку страниц нашего приложения, мы создадим новую папку под названием «pages» внутри каталога src. В этой папке будут храниться все страницы, необходимые для нашего проекта.

Для каждой из страниц, перечисленных ниже, вам нужно будет создать соответствующий файл в папке src/pages, так же, как вы делали это раньше с компонентами.

Домашняя страница

Домашняя страница объединяет другие компоненты, включая заголовок, герой и CreateJob, для создания пользовательского интерфейса домашней страницы. Заголовок обычно содержит навигационные ссылки и фирменный стиль, раздел «Герой» может отображать вводный контент или визуальные эффекты, а раздел «Создать работу» позволяет пользователям создавать новые списки вакансий. В целом, этот компонент объединяет эти части для создания полной домашней страницы приложения.

Страница «Мои проекты»

На странице «Мои проекты» пользователи могут управлять своими списками вакансий и выполнять с ними различные действия. Он включает в себя такие компоненты, как заголовок для навигации, JobListingOwnerActions для отображения списков вакансий и управления ими, UpdateJob для обновления сведений о вакансиях, DeleteJob для удаления списков вакансий и Payout для инициирования платежей. Пользователи могут просматривать опубликованные вакансии, редактировать или удалять их, а также инициировать выплаты фрилансерам. Если вакансий не опубликовано, отображается сообщение о том, что вакансий нет.

Страница «Мои вакансии»

Компонент «Мои задания» — это место, где пользователи могут просматривать назначенные им задачи или задания. Он включает заголовок для навигации и список компонентов JobBid, которые отображают информацию о каждой назначенной задаче. Если есть назначенные задачи, они отображаются с подробностями; в противном случае отображается сообщение о том, что для пользователя нет назначенных задач.

Страница Мои ставки

На странице MyBids пользователи могут просматривать вакансии, на которые они подали заявки, размещая ставки. Он включает заголовок для навигации и список компонентов JobBid, которые отображают информацию о каждом задании, на которое пользователь сделал ставку. Если есть вакансии, на которые пользователь сделал ставку, они отображаются с подробной информацией; в противном случае отображается сообщение о том, что пользователь еще не сделал ставок ни на одну работу.

Просмотреть страницу участников торгов

На странице ViewBidders пользователи могут просмотреть список претендентов на конкретную вакансию. Он использует перехватчик useParams для извлечения идентификатора задания из URL-адреса, извлекает список участников торгов и детали задания из блокчейна и отображает их. В зависимости от того, есть ли претенденты или позиция заполнена или вакантна, на нем отображается соответствующая информация, такая как карточки кандидатов или сообщения о статусе. Он также включает компонент «Заголовок» для навигации.

Страница аутентификации

Страница «Аутентификация» предназначена для аутентификации пользователя при общении в приложении. Он позволяет пользователям либо входить в систему, либо регистрироваться для использования чата с помощью службы CometChat. После успешной аутентификации он отображает сообщение об успехе и направляет пользователя на страницу сообщений чата. Он также включает компонент заголовка для навигации и предоставляет пользователю обратную связь посредством всплывающих уведомлений.

Страница недавних разговоров

На странице «RecentConversations» в приложении DappWorks отображается список последних разговоров в чате. Он извлекает и отображает эти разговоры, позволяя пользователям нажимать на разговор, чтобы перейти к интерфейсу чата с этим пользователем. В каждом разговоре отображается имя пользователя и уникальный идентификатор для легкой идентификации. Если недавних чатов нет, пользователю будет отправлено сообщение. Эта страница предоставляет удобный способ доступа к недавним взаимодействиям в чате и управления ими.

Страница чатов

Страница «Чаты» отвечает за управление и отображение сообщений чата между пользователями. Он извлекает и отображает сообщения на основе выбранного пользователя, позволяет пользователям отправлять сообщения и автоматически обновляет чат в режиме реального времени. Пользователи могут видеть свои собственные сообщения справа и сообщения других пользователей слева со значками профиля и содержимым сообщений. Компонент также включает в себя заголовок для навигации и контейнер чата с прокруткой для удобного просмотра сообщений.

Сервис Блокчейн

Этот скрипт представляет собой модуль JavaScript, который взаимодействует со смарт-контрактом блокчейна, используя блокчейн Ethereum. Он предоставляет функции для различных действий, связанных с блокчейном, а также сохраняет или извлекает данные из блокчейна. Обратите внимание, что вам нужно будет создать файл с именем Blockchain.jsx в папке src ››services и вставить внутрь приведенный ниже код.

Вот обзор того, что делает этот скрипт:

  1. Он импортирует необходимые зависимости, включая ABI контракта (двоичный интерфейс приложения), адреса контрактов и библиотеки, связанные с Ethereum.
  2. Определяет служебные функции, такие как toWei и fromWei, для преобразования между Ether и Wei.
  3. Определяет функцию getEthereumContract для установления соединения с блокчейном Ethereum и получения экземпляра контракта.
  4. isWalletConnected проверяет, подключен ли кошелек Ethereum пользователя (например, MetaMask), и обрабатывает изменения учетной записи и цепочки изменений.
  5. Такие функции, как ConnectWallet, addJobListing, updateJob, deleteJob, bidForJob, AcceptBid, спор, разрешено, отзыв, выплата, bidStatus, getBidders, getFreelancers, getAcceptedFreelancer, getJobs, getMyJobs, getJob, getMyBidJobs, getMyGigs и loadData, определены для взаимодействия со смарт-контрактом. для различных действий, таких как создание рабочих мест, участие в торгах, принятие предложений и т. д.
  6. Функции StructuredJobs, StructuredBidder и StructuredFreelancers форматируют данные, полученные из блокчейна, в структурированные объекты для упрощения управления и отображения.

В целом, этот скрипт действует как интерфейс между внешним приложением и блокчейном Ethereum, позволяя пользователям выполнять действия и получать данные, связанные с заданиями и ставками, в блокчейне. Он интегрируется со смарт-контрактом, используя ABI и адрес контракта. Смотрите сценарий выше.

Убедитесь, что вы обновили переменные среды, чтобы они выглядели следующим образом:

REACT_APP_COMETCHAT_APP_ID=****************

REACT_APP_COMETCHAT_AUTH_KEY=******************************

REACT_APP_COMETCHAT_REGION=**

REACT_APP_RPC_URL=http://127.0.0.1:8545

Служба чата

Этот скрипт представляет собой модуль JavaScript, обеспечивающий функциональность для интеграции и взаимодействия со службой CometChat Pro в веб-приложении. CometChat Pro — это платформа для чата и обмена сообщениями, которая позволяет разработчикам добавлять в свои приложения функции чата в реальном времени. Как и в случае с предыдущим сервисом, вам нужно будет создать еще один файл с именемchat.jsx в папке src >services и вставить внутрь приведенный ниже код.

Вот описание того, как работает этот скрипт:

  1. Он импортирует библиотеку CometChat (CometChat) и функцию (getGlobalState) из пользовательского хранилища.
  2. Он определяет константы (CONSTANTS) для настроек приложения CometChat, включая идентификатор приложения, регион и ключ аутентификации. Эти настройки обычно хранятся в переменных среды в целях безопасности.
  3. Функция initCometChat инициализирует CometChat с предоставленными настройками приложения. Он подписывается на обновления присутствия пользователя и устанавливает регион. Инициализация выполняется асинхронно, и любые ошибки, возникающие во время инициализации, фиксируются и протоколируются.
  4. Функция loginWithCometChat выполняет вход пользователя в систему CometChat. Он принимает уникальный идентификатор пользователя (UID) и ключ аутентификации в качестве параметров, пытается войти в систему и возвращает обещание, которое разрешается в объект пользователя при успешном входе в систему или отклоняется с ошибкой в ​​случае неудачи.
  5. Функция SignUpWithCometChat создает нового пользователя в CometChat. Он также принимает UID пользователя и ключ аутентификации в качестве параметров, устанавливает имя пользователя и возвращает обещание, которое разрешается вновь созданному пользователю в случае успеха или отклоняется с ошибкой в ​​случае неудачи.
  6. Функция logOutWithCometChat выводит текущего пользователя из CometChat. Он возвращает обещание, которое выполняется при успешном выходе из системы или отклоняется в случае ошибки.
  7. Функция isUserLoggedIn проверяет, вошел ли пользователь в настоящее время в CometChat, и возвращает обещание, которое разрешается вошедшему пользователю или отклоняется с ошибкой.
  8. Функция getUser получает информацию о пользователе из CometChat на основе предоставленного UID. Он возвращает обещание, которое разрешается в объект пользователя или отклоняется с ошибкой.
  9. Функция getMessages извлекает сообщения для конкретного пользователя (UID) из CometChat. Он устанавливает лимит сообщений и возвращает обещание, которое разрешается в массив текстовых сообщений или отклоняется с ошибкой.
  10. Функция sendMessage отправляет текстовое сообщение указанному получателю (receiverID) через CometChat. Он возвращает обещание, которое разрешается в отправленное сообщение или отклоняется с ошибкой.
  11. Функция getConversations получает список разговоров из CometChat. Он устанавливает лимит разговоров и возвращает обещание, которое разрешается в список разговоров или отклоняется с ошибкой.
  12. Функция ListenForMessage настраивает прослушиватель для получения входящих текстовых сообщений в режиме реального времени. Он принимает идентификатор прослушивателя (обычно UID пользователя) и возвращает обещание, которое разрешается в полученное сообщение или отклоняется с ошибкой.

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

Отличный! Теперь давайте поработаем над файлом хранилища, который служит библиотекой управления состоянием.

Файл магазина

Этот скрипт предоставляет централизованную систему управления состоянием для приложения React с использованием библиотеки response-hooks-global-state. Он также включает служебные функции для усечения текста и форматирования даты. Вам нужно будет создать файл с именем index.jsx в папке src>>store и вставить внутрь приведенный ниже код.

Вот обзор того, что делает этот скрипт:

  1. Он импортирует функцию createGlobalState из библиотеки response-hooks-global-state.
  2. Он использует функцию createGlobalState для создания глобального контейнера состояний с начальными значениями состояния. Этот контейнер глобального состояния затем разбирается на три функции: setGlobalState, useGlobalState и getGlobalState.
  • setGlobalState: функция, используемая для установки или обновления значений глобального состояния. В качестве аргументов он принимает ключ и новое значение.
  • useGlobalState: специальный хук, который позволяет компонентам получать доступ к глобальным значениям состояния и подписываться на них. Он возвращает текущее значение, связанное с указанным ключом, и автоматически обновляет компонент при изменении этого значения.
  • getGlobalState: функция, которая извлекает текущее значение, связанное с указанным ключом, из глобального состояния.
  1. Он определяет функцию усечения, которая принимает в качестве аргументов текстовую строку, количество начальных и конечных символов, а также максимальную длину. Эта функция усекает текст и добавляет многоточие (…) посередине, если текст превышает указанную максимальную длину. Он используется для сокращения текста для отображения.
  2. Он определяет функцию formatDate, которая принимает временную метку в качестве аргумента и возвращает отформатированную строку даты в формате «Месяц, День, Год». Эта функция используется для форматирования временных меток в более удобочитаемые строки даты.
  3. Он определяет функцию timestampToDate, которая принимает метку времени в качестве аргумента и возвращает отформатированную строку даты в формате «день месяца, год, час:минута». Эта функция используется для форматирования временных меток в более подробные строки даты и времени.

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

Индексные файлы

Файл index.jsx является точкой входа для приложения. Он инициализирует службу CometChat, устанавливает зависимости и отображает приложение React, используя компонент App в BrowserRouter. Он создает корневой элемент для рендеринга и настраивает необходимые конфигурации для запуска приложения.

Чтобы использовать этот код, вам нужно будет заменить приведенный ниже код внутри файлов index.jsx и index.css в папке src вашего проекта.

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

  • Терминал № 1: узел пряжи каски
  • Терминал № 2: yarn hardhat запускает скрипты/deploy.js, а затем yarn start

Поздравляем с созданием клона Web3 Upwork с помощью React, Solidity и CometChat!

Ваше достижение является свидетельством вашего мастерства в объединении этих передовых технологий для создания инновационного и привлекательного приложения. Используя React для внешнего интерфейса, Solidity для ваших смарт-контрактов и интегрируя CometChat для общения в реальном времени, вы продемонстрировали универсальный набор навыков как в разработке блокчейнов, так и в интерактивном пользовательском опыте.

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

Продолжайте в том же духе и продолжайте исследовать безграничные возможности технологий! Ваше путешествие в мир разработки Web3 обязательно приведет к еще более интересным и впечатляющим проектам в будущем.

Вот ссылка на веб-сайт CometChat, где вы можете узнать больше о SDK и о том, как начать работу.

Дополнительные ресурсы Web3 можно найти в этом видео, в котором рассказывается, как создать децентрализованное приложение путем создания децентрализованного приложения для лотереи Web3. Я рекомендую вам его.

В видео представлено практическое руководство по созданию децентрализованного приложения для лотереи с использованием NextJs, Tailwind CSS и Solidity.

Заключение

Поздравляем с завершением процесса создания клона Web3 Upwork с помощью React, Solidity и CometChat. Это подробное руководство позволило вам создать передовую платформу, сочетающую в себе возможности React для внешнего интерфейса, Solidity для смарт-контрактов и CometChat для общения в реальном времени. Взяв на себя этот проект, вы продемонстрировали свое мастерство в разработке блокчейнов и интерактивном пользовательском опыте.

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

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

Чтобы еще больше расширить свои знания и быть в курсе последних событий в области блокчейна и Интернета3, рассмотрите возможность подписки на наш канал YouTube и изучите наш веб-сайт в поисках дополнительных ресурсов.

Желаем вам всего наилучшего на пути к инновациям и открытиям в мире web3 и децентрализованных приложений!

Об авторе

Я веб3-разработчик и основатель Dapp Mentors, компании, которая помогает предприятиям и частным лицам создавать и запускать децентрализованные приложения. У меня более 7 лет опыта работы в индустрии программного обеспечения, и я увлечен использованием технологии блокчейн для создания новых и инновационных приложений. Я веду канал YouTube под названием Dapp Mentors, где делюсь учебными пособиями и советами по разработке web3, а также регулярно публикую в Интернете статьи о последних тенденциях в сфере блокчейна.

Оставайтесь на связи с нами, присоединяйтесь к сообществам

Дискорд: Присоединяйтесь

Твиттер: Следуй

LinkedIn: Подключайтесь

GitHub: Исследовать

Сайт: Визит