Подписка ReLife
Создание вашего первого приложения web3 может показаться пугающим, но с правильными инструментами и руководством это проще, чем вы думаете. В этом руководстве мы проведем вас через создание простого приложения с использованием последней версии Thirdweb Connect SDK от CoinDesk и развертывание собственного смарт-контракта.
К концу у вас будет полнофункциональное приложение web3, которое позволит пользователям подключать свой кошелек, просматривать текущее количество, хранящееся в блокчейне, а также увеличить или уменьшать стоимость.
Прежде чем мы начнем, убедитесь, что у вас есть следующее:
Базовое понимание React и TypeScript
Node.js установлен на вашем компьютере
Редактор кода, такой как VS Code
Кошелек web3, такой как MetaMask и другие
Некоторые тестовые средства в тестовой сети
Создание смарт-контракта
Первым шагом является создание простого смарт-контракта счетчика, который будет хранить значение счетчика и предоставлять функции для его преувеличения и сокращения.
Создать новый смарт-контракт npx thirdweb:
Назовите свой проект и выберите структуру, которую вы хотите использовать.
Назовите счетчик контрактов и выберите "Пустой контракт".
Откройте файл Counter.sol в редакторе кода.
Если файл Hardhat находится в папке контракта. Если файл Forge находится в папке src.
Замените содержимое следующим кодом:
Теперь, когда мы написали наш смарт-контракт, пришло время развернуть его в тестовой сети.
Откройте терминал и перейдите в каталог контрактов.
Запустить развертывание npx thirdweb
В вашем браузере должна открыться вкладка. Нажмите "Развернуть сейчас", чтобы развернуть контракт на любом блокчейне, совместимом с EVM.
Настройка проекта
Давайте начнем с создания нового проекта Next.js или клонируем наш стартовый шаблон Next
Отлично. Теперь наш проект настроен с помощью Next.js, TypeScript и Thirdweb SDK. Давайте начнем создавать наше приложение.
Подключение кошелька
Чтобы иметь возможность взаимодействовать с блокчейном, нам нужно будет разрешить пользователю подключить кошелек к нашему приложению.
Давайте создадим новый компонент и добавим компонент ConnectButton React из thirdweb. Предоставление его клиенту и цепочке, которую мы создали ранее.
Теперь у нас есть способ для пользователя подключить любой кошелек к нашему приложению.
Подключение к контракту
Чтобы взаимодействовать с нашим развернутым контрактом, нам нужно подключиться к нему с помощью третьего веб-SDK.
В этом уроке мы прошли через процесс создания простого приложения счетчика web3 от начала до конца с использованием thirdweb.
Ключевые шаги, которые мы рассмотрели:
Создание и развертывание смарт-контракта Counter с помощью thirdweb
Настройка нового проекта Next.js с помощью третьего Web Connect SDK
Подключение к нашему развернутому смарт-контракту
Создание компонентов пользовательского интерфейса для чтения и записи в контракт
Используя мощные инструменты и SDK thirdweb, мы смогли сделать это довольно быстро и легко. Thirdweb Connect SDK предоставляет удобные крючки и компоненты, которые делают взаимодействие со смарт-контрактами легким.
Я надеюсь, что это руководство дало вам прочную основу для создания собственных приложений web3 с помощью thirdweb. Возможности безграничны - вы можете продлить контракт, добавить больше функций в пользовательский интерфейс, интегрироваться с другими протоколами web3 и многое другое.
Всем удачи.
Комментарии