Как создать цикл обратной связи с пользователями в вашем web3 dapp

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

Среди web3-разработчиков наиболее популярным методом сбора отзывов о своих dapp по-прежнему остаются централизованные решения от таких компаний, как Google и Mailchimp. Однако теперь доступны и on-chain формы обратной связи. Давайте рассмотрим эти web3-нативные формы, их важность для успеха вашего dapp и способы их использования.

В предыдущей статье мы представили Form-xChange — новую open-source децентрализованную web3-форму, созданную компанией Consensys, и показали, как интегрировать её в ваш dapp с помощью MetaMask SDK.

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

Web3-формы обратной связи для массового принятия технологии

Нативные децентрализованные формы обратной связи крайне необходимы в web3. Почему?

1. Они существенно снижают затраты: Единственные (и единовременные) расходы, связанные с созданием формы, возникают при развёртывании смарт-контракта. При развёртывании на L2 вроде Linea стоимость, как правило, не превышает нескольких долларов.

2. Практически безграничные возможности кастомизации: Вы можете настроить форму для сбора любых отзывов (текст, реакции, ссылки и т. д.). Кроме того, фронтенд полностью независим от контракта, что позволяет настраивать его по своему усмотрению.

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

4. Можно реализовать token gating: С помощью децентрализованных форм вы можете ограничить доступ к ответам на вопросы формы. Например, разрешить отвечать только кошелькам, владеющим NFT из вашей коллекции, кошелькам с ненулевым балансом ETH или с определённым ERC-20 токеном на ваш выбор.

Руководство: создание собственной децентрализованной формы обратной связи

Шаг 1: Установите MetaMask

Мы будем развёртывать контракты и взаимодействовать с ними в сети Linea. Для этого потребуется криптокошелёк, настроенный для работы с сетью Linea и имеющий небольшой баланс LineaETH.

Прежде всего вам нужен web3-кошелёк. В этом руководстве мы используем MetaMask — бесплатный и удобный кошелёк, который поставляется с предустановленной конфигурацией для Linea. Вы можете установить MetaMask в виде расширения для браузера здесь.

Примечание: для этого руководства рекомендуем использовать браузер, отличный от Brave (например, Edge, Chrome, Safari и т. д.). На момент написания статьи у Form-xChange есть известные проблемы с работой в браузере Brave.

После добавления расширения MetaMask предложит вам выполнить ряд шагов, в том числе получить фразу для восстановления кошелька. Храните эту фразу в надёжном месте. Если вы её потеряете, восстановить её будет невозможно. Если она будет похищена, злоумышленник получит доступ к вашим средствам.

После настройки кошелька перейдите к выпадающему меню выбора сети в верхнем левом углу расширения MetaMask и включите показ тестовых сетей. В новом выпадающем меню выберите сеть Linea Goerli. Если всё прошло успешно, ваш кошелёк должен выглядеть примерно так:

Шаг 2: Получите LineaETH из фaucet

Если вы работаете с Linea впервые, баланс вашего кошелька (очевидно) будет равен 0 LineaETH.

Давайте это исправим. У Infura есть faucet, который предоставляет бесплатно 0,5 LineaETH ежедневно. Для доступа к нему вам может потребоваться создать бесплатный аккаунт Infura.

После пополнения вы увидите небольшой баланс LineaETH:

Шаг 3: Получите RPC-эндпоинт Linea

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

Здесь создайте новый проект, нажав кнопку создания нового API-ключа в правом верхнем углу.

В качестве сети выберите web3 API. Ключу можно дать любое имя.

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

Шаг 4: Установите node и npm

Решение Form-xChange работает на стеке Infura, Next.js, Truffle и Dapp API. Для установки и использования этих технологий нам потребуются node и npm на локальной машине.

Скачать их для вашей операционной системы можно здесь.

После установки убедитесь в её корректности, проверив номера версий в терминале.

$ node -v
$ npm -v
Копировать

Шаг 5: Клонируйте репозиторий Form-xChange

Как упоминалось ранее, Form-xChange — это open-source репозиторий, исходный код которого находится в открытом доступе на GitHub.

Клонируем этот репозиторий и установим все необходимые пакеты с помощью следующих команд:

$ git clone https://github.com/Consensys/Form-XChange
$ cd Form-XChange
$ npm install
Копировать

Откройте репозиторий Form-xChange в вашем любимом редакторе кода (например, VS Code). Это готовый к использованию проект, поэтому писать код почти не придётся — нужно лишь настроить несколько переменных окружения.

Шаг 6: Разверните форму обратной связи

Перейдите в подпапку, содержащую проект Truffle и смарт-контракты формы:

В этой папке вы увидите подпапку contracts, содержащую два основных контракта: FeedbackForm и FeedbackFormFactory.

Первый реализует отдельную форму, способную хранить список вопросов и ответов на них.

Второй — это фабричный контракт, который можно использовать для развёртывания кастомизированных версий первого.

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

На этом шаге мы развернём контракт FeedbackFormFactory. Это позволит нам, как создателям, создавать формы из нашего Next-фронтенда.

Для этого создайте файл .env и добавьте в него следующую информацию:

Затем в файле truffle-config.js замените универсальный RPC-эндпоинт на эндпоинт Infura, сгенерированный на шаге 3. Итоговый файл конфигурации должен выглядеть примерно так:

require("dotenv").config();
const mnemonic = process.env["MNEMONIC"];

const HDWalletProvider = require("@truffle/hdwallet-provider");

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // Localhost
      port: 9545,
      network_id: "5777",
      chain_id: 1337,
    },
    linea: {
      provider: () =>
        new HDWalletProvider(mnemonic, `< INFURA LINEA ENDPOINT >`),
      network_id: 59140,
      chain_id: 59140,
    },
  },
  mocha: {
    timeout: 100000,
  },
  compilers: {
    solc: {
      version: "0.8.13",
    },
  },
};
Копировать

Всё готово! Разверните фабричный контракт формы обратной связи, выполнив следующую команду:

Если всё прошло успешно, вы увидите вывод, похожий на этот:

> [email protected] linea
> npm run compile && npm run generate-types && npm run migrate:linea

> [email protected] compile
> truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

> [email protected] generate-types
> typechain --target=truffle-v5 'build/contracts/*.json'

Successfully generated 5 typings!

> [email protected] migrate:linea
> truffle migrate --network linea

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

Starting migrations...
======================
> Network name:    'linea'
> Network id:      59140
> Block gas limit: 61000000 (0x3a2c940)

1_deploy_contracts.js
=====================

   Replacing 'FeedbackFormFactory'
   -------------------------------
   > transaction hash:    0x50ba2c362cb463d0b763ba5f092e3f1a8591dd9cd358f2feda035438ce02cee0
   > Blocks: 2            Seconds: 21
   > contract address:    0xBDAb1F857dC80968022784cc1C868820BFD2F7c5
   > block number:        1099121
   > block timestamp:     1688991002
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.62878173171592041
   > gas used:            2636875 (0x283c4b)
   > gas price:           2.500000007 gwei
   > value sent:          0 ETH
   > total cost:          0.006592187518458125 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.006592187518458125 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.006592187518458125 ETH
Копировать

Запишите адрес контракта — он понадобится нам на следующем шаге.

Шаг 7: Разверните фабрику Next-фронтенда

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

Нам нужно связать приложение с контрактом, развёрнутым на предыдущем шаге. Для этого откройте файл lib/contract.ts/config.ts и добавьте адрес контракта.

В папке apps/web создайте ещё один файл .env и на этот раз добавьте ключ Infura, связанный с вашим проектом из шага 3.

Всё готово! Теперь развернём приложение на localhost:

Теперь вы можете открыть приложение по адресу localhost:3000. Оно должно выглядеть примерно так:

Давайте создадим новую форму!

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

Это позволит вам создавать новые формы через интерфейс здесь.

Добавьте название формы, описание и хотя бы один вопрос, затем нажмите Create Form.

MetaMask запросит подтверждение транзакции. Помните, что это происходит потому, что создание формы фактически означает создание нового контракта FeedbackForm.

Вернитесь на главную страницу — там должна появиться ваша форма. Теперь вы можете отправлять ответы через неё!

Обратите внимание: для записи ответа потребуется оплатить небольшую комиссию за газ (через MetaMask).

Продолжайте строить на web3-стеке: Infura, Linea и MetaMask

Вот и всё! Практически не написав кода, мы развернули полноценное децентрализованное решение для сбора отзывов в нашем dapp и получили возможность не просто собирать пользовательские отзывы, но и делать это в децентрализованной, web3-нативной форме. Такие проекты, как Form-xChange, станут важным шагом на пути к переносу UX-дизайна web2 в web3-приложения. Не стесняйтесь изменять внешний вид и функциональность вашего Next-фронтенда, а также возможности смарт-контрактов. Вы вольны (и даже поощряетесь) сделать это решение своим.