Ваше первое Dapp
В этом руководстве вы узнаете, как создать dapp на блокчейне Aptos. Обычно dapp состоит из пользовательского интерфейса, написанного на JavaScript, который взаимодействует с одним или несколькими модулями Move.
В этом уроке мы будем использовать модуль Move HelloBlockchain
, описанный в руководстве "Ваш первый модуль Move", и сосредоточимся на создании пользовательского интерфейса.
Мы будем использовать:
Aptos Typescript SDK.
Кошелек Aptos, и
Aptos CLI для взаимодействия с блокчейном Aptos.
Конечным результатом будет dapp, позволяющий пользователям публиковать и делиться фрагментами текста на блокчейне Aptos.
ПОЛНЫЙ ИСХОДНЫЙ КОД Полный исходный код этого руководства доступен здесь.
Необходимые условия
Кошелек Aptos Перед началом этого урока установите расширение Aptos Wallet.
После того как вы его установите:
Откройте Кошелек и нажмите Create a new wallet. Затем нажмите Create account, чтобы создать учетную запись Aptos.
Скопируйте закрытый ключ. Он понадобится вам для настройки Aptos CLI в следующем разделе.
СОВЕТ Убедитесь, что на вашей учетной записи достаточно средств для выполнения операций, нажав кнопку "Faucet".
Aptos CLI
Установите Aptos CLI.
Запустите
aptos init
, и когда он запросит ваш закрытый ключ, вставьте закрытый ключ из Aptos Wallet, который вы скопировали ранее. Это инициализирует Aptos CLI для использования той же учетной записи, которая используется в Aptos Wallet.Запустите
aptos account list
, чтобы убедиться, что все работает.
Шаг 1: Создайте одностраничное приложение
Теперь мы настроим внешний пользовательский интерфейс для нашего dapp. В этом руководстве мы будем использовать create-react-app
для настройки приложения, но ни React, ни create-react-app
не являются обязательными. Вы можете использовать ваш любимый JavaScript фреймворк.
Теперь у вас есть базовое приложение React, запущенное в браузере.
Шаг 2: Интеграция API Web3 Aptos Wallet
Aptos Wallet предоставляет Web3 API для dapps в window.aptos
. Вы можете увидеть, как он работает, открыв консоль браузера и выполнив await window.aptos.account()
. Он выведет адрес, соответствующий учетной записи, которую вы создали в Aptos Wallet.
Далее мы обновим наше приложение, чтобы использовать этот API для отображения адреса учетной записи кошелька.
Подождите, пока window.aptos
будет определен
Первым шагом при интеграции с API window.aptos
является задержка отображения приложения до наступления события window.onload
.
Откройте файл src/index.tsx
и измените следующий фрагмент кода:
в этом:
Это изменение гарантирует, что API window.aptos
будет инициализирован к моменту отображения приложения (если мы выполним отображение слишком рано, расширение Wallet, возможно, еще не успеет инициализировать API и, таким образом, window.aptos
будет undefined
).
(Необязательно) Настройка TypeScript для window.aptos
Если вы используете TypeScript, вы также можете сообщить компилятору о существовании API window.aptos
. Добавьте следующее в src/index.tsx
:
Это позволяет нам использовать API window.aptos
без необходимости делать (window as any).aptos
.
Отображение window.aptos.account()
в приложении
Теперь наше приложение готово к использованию API window.aptos.
Мы изменим src/App.tsx
, чтобы получить значение window.aptos.account()
( учетная запись кошелька) при начальном отображении, сохранить его в состоянии, а затем отобразить:
Обновите страницу, и вы увидите адрес своей учетной записи.
Добавим некоторые CSS
Затем замените содержимое src/App.css
:
Шаг 3: Используйте SDK для получения данных из блокчейна
Кошелек теперь интегрирован в наш dapp. Далее мы интегрируем Aptos SDK для получения данных из блокчейна. Мы будем использовать Aptos SDK для получения информации о нашей учетной записи и отображения этой информации на странице.
Добавьте aptos
в package.json
Сначала добавьте SDK в проект:
Теперь вы увидите "aptos": "^0.0.20"
(или подобное) в вашем package.json
.
Создайте AptosClient
Теперь мы можем импортировать SDK и создать AptosClient
для взаимодействия с блокчейном (технически он взаимодействует с REST API, который взаимодействует с блокчейном).
Поскольку наша учетная запись кошелька находится в devnet, мы настроим AptosClient
для взаимодействия с devnet. Добавьте следующее в src/App.tsx
:
Теперь, помимо отображения адреса учетной записи, приложение будет также отображать sequence_number
учетной записи. Этот sequence_number
представляет собой порядковый номер следующей транзакции для предотвращения атак воспроизведения транзакций. Вы увидите, что этот номер увеличивается по мере совершения операций с учетной записью.
Шаг 4: Публикация модуля Move
Теперь наш dapp настроен на чтение из блокчейна. Следующим шагом будет запись в блокчейн. Для этого мы опубликуем модуль Move на нашей учетной записи.
Модуль Move предоставляет место для хранения этих данных. В частности, мы будем использовать модуль HelloBlockchain
из вашего первого модуля Move, который предоставляет ресурс MessageHolder
, хранящий строку (называемую message
).
Публикация модуля HelloBlockchain
с помощью Aptos CLI
HelloBlockchain
с помощью Aptos CLIМы будем использовать Aptos CLI для компиляции и публикации модуля HelloBlockchain
.
Скачайте
hello_blockchain
package.Затем используйте команду
aptos move publish
(заменив/path/to/hello_blockchain/
и<address>
):
Например:
Параметр --named-addresses
заменяет именованный адрес HelloBlockchain
в HelloBlockchain.move
на указанный адрес. Например, если мы укажем --named-addresses HelloBlockchain=0x5af503b5c379bd69f46184304975e1ef1fa57f422dd193cdad67dc139d532481
, то произойдет следующее:
станет:
Это позволяет опубликовать модуль для данной учетной записи (в данном случае нашей учетной записи кошелька, 0x5af503b5c379bd69f46184304975e1ef1fa57f422dd193cdad67dc139d532481
).
Предполагая, что на вашей учетной записи достаточно средств для выполнения транзакции, теперь вы можете опубликовать модуль HelloBlockchain
в своей учетной записи. Если вы обновите приложение, то увидите, что порядковый номер счета увеличился с 0 до 1.
Вы также можете проверить, что модуль был опубликован, зайдя в Aptos Explorer и найдя свою учетную запись. Если вы прокрутите вниз до раздела "Модули учетной записи", вы должны увидеть что-то вроде следующего:
Запишите "name": "Message"
, мы будем использовать его в следующем разделе.
Добавьте инструкции по публикации модулей в dapp
Для удобства пользователей мы можем заставить приложение отображать команду aptos move publish
, если модуль не существует. Для этого мы воспользуемся Aptos SDK для получения модулей учетных записей и поищем тот, в котором module.abi.name
равен "Message"
(т.е. "name": "Message"
, который мы видели в Aptos Explorer).
Обновите src/App.tsx
:
Новые пользователи смогут использовать эту команду для создания страницы для своей учетной записи.
Шаг 5. Записать сообщение в блокчейне
Теперь, когда модуль опубликован, мы готовы использовать его для записи сообщения в блокчейн. Для этого мы будем использовать функцию set_message
, открытую модулем.
Транзакция, вызывающая функцию set_message
Подпись для set_message
выглядит следующим образом:
Чтобы вызвать эту функцию, нам нужно использовать API window.aptos
, предоставляемый кошельком для отправки транзакции. В частности, мы создадим транзакцию script_function_payload
, которая будет выглядеть следующим образом:
Нет необходимости указывать аргумент account: signer
. Aptos предоставляет его автоматически.
Однако нам необходимо указать аргумент message_bytes
: это "<hex encoded utf-8 message>"
в транзакции. Нам нужен способ преобразовать строку JS в этот формат. Мы можем сделать это, используя TextEncoder
для преобразования в байты utf-8, а затем однострочное предложение для шестнадцатеричной кодировки байтов.
Добавьте эту функцию в src/App.tsx
:
Используя эту функцию, наша полезная нагрузка транзакции становится:
Используйте API window.aptos
для отправки транзакции set_message
window.aptos
для отправки транзакции set_message
Теперь, когда мы поняли, как использовать транзакцию для вызова функции set_message
, мы вызовем эту функцию из нашего приложения с помощью window.aptos.signAndSubmitTransaction()
.
Мы добавим:
где
<textarea>
пользователь может ввести сообщение, и<button>
, который вызываетset_message
функцию с содержимым файла<textarea>
.
Обновите src/App.tsx
:
Для проверки:
Введите что-нибудь в
<textarea>
и отправьте форму.Найдите свою учетную запись в Aptos Explorer, и теперь вы увидите ресурс
MessageHolder
в разделе Account Resources с написанным вамиmessage
.
Если вы его не видите, попробуйте использовать более короткое сообщение. Длинные сообщения могут привести к сбою транзакции, поскольку длинные сообщения требуют больше газа.
Шаг 6. Отображение сообщения в dapp
Теперь, когда ресурс MessageHolder
создан, мы можем использовать Aptos SDK для его получения и отображения сообщения.
Получить сообщение о состоянии учетной записи кошелька
Чтобы получить сообщение, мы сделаем следующее:
Сначала воспользуемся функцией
AptosClient.getAccountResources()
для получения ресурсов учетной записи и хранения их в состоянии.Затем мы будем искать тот,
type
которогоMessageHolder
. Полный тип -$address::Message::MessageHolder
, поскольку он является частью модуля$address::Message
.
В нашем примере это:
Мы будем использовать его для начального значения
<textarea>
.
Обновите src/App.tsx
:
Для проверки:
Обновите страницу и увидите сообщение, которое вы написали ранее.
Измените текст, отправьте форму и снова обновите страницу. Вы увидите, что содержимое страницы было обновлено вашим новым сообщением.
Это подтверждает, что вы читаете и записываете сообщения на блокчейне Aptos.
Отображение сообщений с других учетных записей
На данный момент мы создали "однопользовательский" dapp, в котором вы можете читать и писать сообщения на своей учетной записи. Далее мы сделаем так, чтобы другие люди могли читать сообщения, включая тех, у кого не установлен Aptos Wallet.
Мы настроим его так, чтобы переход по URL /<account address>
отображал сообщение, хранящееся по адресу /<account address>
(если оно существует).
Если приложение загружено по адресу
/<account address>
, мы также отключим редактирование.Если редактирование включено, мы покажем ссылку "Get public URL", чтобы вы могли поделиться своим сообщением
Обновите src/App.tsx
:
На этом мы завершаем данное руководство.
Last updated