📚Чтение Заметок
В предыдущей главе мы создали смарт-контракт с функциональными функциями Counter, а также функциями внесения/вывода средств. Этот смарт-контракт функционирует как серверная инфраструктура для нашего приложения. В этом уроке мы разработаем интерфейс или пользовательский интерфейс, позволяющий конечным пользователям получать к нему доступ через веб-браузер.
Важно помнить, что приложение, которое мы создаем, децентрализовано. Децентрализованные приложения (DApps) следуют определенным правилам.
- Одно из правил заключается в том, что серверная часть должна состоять исключительно из смарт-контрактов, не полагаясь на какие-либо централизованные серверы.
- Другое правило заключается в том, что интерфейс должен работать исключительно на стороне клиента и быть с открытым исходным кодом.
Их больше, но на данный момент эти два довольно важны для отслеживания. При соблюдении этих правил мы гарантируем, что мы не зависим от серверного сервера для предоставления нашего интерфейса. Если бы такой сервер использовался, он по своей сути был бы централизованным (поскольку не все конечные пользователи имели бы равный доступ), и в результате все наше приложение также стало бы централизованным.
В этой главе мы будем работать с другим кошельком TON под названием Tonkeeper. Это даст вам лучшее представление о том, как работают разные кошельки. Кошелек будет взаимодействовать с нашим DApp по протоколу под названием TON Connect 2. Если вы выбираете кошелек, отличный от Tonkeeper, пожалуйста, убедитесь, что он поддерживает эту версию TON Connect. Не забудьте убедиться, что ваш кошелек подключен к правильной сети - основной сети или тестовой сети.
Tonkeeper работает по умолчанию в основной сети TON. Если вы решили работать в тестовой сети, вам нужно будет вручную переключить приложение в режим разработки. Откройте вкладку "Настройки" и быстро нажмите 5 раз на номер версии внизу. Должно появиться "Меню раздвивающего". Нажмите на "Переключиться на Testnet" и переключитесь. Вы можете использовать это меню позже, чтобы вернуться в основную сеть.
TON Connect
Давайте попробуем понять, зачем нам вообще нужен TON Connect, когда мы решаем создать пользовательский интерфейс для нашего контракта.
Мы можем легко заметить, что участвуют 3 стороны:
Блокчейн TON позволяет создавать приложения и услуги с минимизацией доверия в массовом масштабе.
Приложения предоставляют пользовательский интерфейс для бесконечного диапазона функций в TON на основе смарт-контрактов, но не имеют немедленного доступа к средствам пользователей.
Кошельки предоставляют пользовательский интерфейс для утверждения транзакций и надежно хранят криптографические ключи пользователей на своих персональных устройствах.
Это разделение проблем обеспечивает быстрые инновации и высокий уровень безопасности для пользователей: кошелькам не нужно самостоятельно создавать огороженные садовые экосистемы, в то время как приложениям не нужно рисковать, удерживая учетные записи конечных пользователей.
TON Connect - это мост, который пересекает этот концептуальный пробел.
Подводя итог, TON Connect предназначен для оптимизации взаимодействия приложений с TON Blockhain через кошельки конечного пользователя.
Иногда вы увидите TON Connect 2, это просто самая последняя версия протокола. Придерживайтесь кошельков, поддерживающих TON Connect 2.
Настройка проекта для нашего DApp
Мы построим наш фронтенд с React. Для создания нашего проекта мы будем полагаться на Vite И его шаблон React. Выберите имя для вашего проекта, например, counter-front-end, затем откройте терминал и запустите следующее:
yarn create vite counter-front-end --template react-ts cd counter-front-end && yarn
Нам нужно будет установить еще несколько пакетов, которые позволят нам взаимодействовать с TON Blockchain. Мы видели эти пакеты в действии в предыдущих главах во время написания тестов и компиляции/развертывания сценариев. Выполнить следующие команды в командной строке:
yarn add ton ton-core ton-crypto
yarn add @orbs-network/ton-access
И последнее, но не менее важное: нам нужно будет преодолеть зависию библиотеки от буфера Nodejs, который недоступен в браузере. Мы можем сделать это, установив полифилл. Запустите следующее в терминале:
yarn add vite-plugin-node-polyfills
И чтобы закончить это исправление буфера, обновите свой vite.config.ts file:
To see your empty app template, run in command line:
yarn dev
Затем откройте веб-браузер и направьте его по URL-адресу, показанному в результатах CLI (что-то вроде http://localhost:5173/).
Вы увидите совершенно новую страницу с содержимым шаблона Vite TypeScript.
Вуаля! Мы готовы начать работу с TON Connect для аутентификации конечного пользователя для работы с нашим DApp.
P.S. Кредиты для вдохновения в частях этого учебника идут на потрясающие Shahar Yakir from Orbs team.
