Интегрируйте форму обратной связи в ваш Dapp и собирайте данные пользователей

По мере того как парадигмальный сдвиг web3 продолжает преобразовывать интернет, разработчики должны постоянно искать новые способы повышения вовлечённости пользователей, демократизации принятия решений и получения ценных данных от людей, использующих создаваемые ими on-chain приложения. Один из методов сбора обратной связи — интеграция формы обратной связи или опроса в dapps. Такие формы устраняют коммуникационный разрыв между пользователями и разработчиками и обеспечивают получение обратной связи в режиме реального времени в масштабе, что позволяет улучшать приложения. Кроме того, они создают среду для активного участия и коллективного принятия решений.

От децентрализованных автономных организаций (DAO), использующих формы обратной связи для on-chain управления, до компаний, применяющих их для оценки настроений сотрудников, — возможности применения форм обратной связи безграничны.

В этом блоге представлено пошаговое руководство по интеграции формы обратной связи в бэкенд вашего приложения и началу сбора отзывов пользователей. Для этого мы воспользуемся формой обратной связи, разработанной нами внутри компании с использованием MetaMask SDK и других инструментов Consensys, под названием Form xChange.

Form xChange

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

Что такое Form xChange и как это работает?

Form xChange — это инструмент с открытым исходным кодом, разработанный для создания и использования форм обратной связи на блокчейне. Хотя смарт-контракт для Form xChange в настоящее время развёрнут на Linea, его адаптируемая архитектура позволяет выполнять развёртывание в любой EVM-совместимой сети.

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

Form xChange использует удобный интерфейс, созданный на Next.js, и работает на основе двух смарт-контрактов, написанных на Solidity: контракта FeedbackForm и контракта FeedbackFormFactory. Процесс прост: каждый раз при создании новой формы развёртывается новый контракт FeedbackForm — эту задачу эффективно выполняет контракт FeedbackFormFactory.

Для использования Form xChange пользователи должны сначала подключиться и войти в приложение с помощью кошелька MetaMask. Некоторые из поддерживаемых ролей и обязанностей:

Автор формы

• Возможность создавать новые формы с несколькими вопросами для сбора обратной связи.

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

Участник

• Возможность отправлять ответы на формы или предложения с сохранением анонимности.

• Доступ к просмотру результатов после отправки ответов.

Интегрируйте форму обратной связи в свой dapp для масштабного сбора отзывов пользователей

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

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

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

Как клонировать бэкенд Form xChange

В этом разделе предполагается, что на вашем компьютере установлен node.js версии 16 или выше, а также среда разработки Truffle.

1. Клонируйте репозиторий: git clone [email protected]:Consensys/Form-XChange.git

2. Перейдите в директорию контракта: cd Form-XChange/packages/form-XChange

3. Скомпилируйте контракт: truffle compile

4. Запустите тест: truffle test

Как развернуть собственный экземпляр бэкенда Form xChange на Linea

Что такое Linea и почему стоит развёртывать на Linea? Linea — это zkEVM (zero-knowledge Ethereum Virtual Machine) второго типа, которая воспроизводит среду Ethereum в виде rollup, позволяя разработчикам работать с ней, используя опыт и безопасность Ethereum, но при более низких транзакционных издержках.

Linea предлагает такие преимущества, как более быстрая финализация, совместимость со всеми инструментами разработки, встроенная интеграция с MetaMask и высокая пропускная способность, что делает её отличным выбором для развёртывания бэкенда Form xChange.

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

1. Запустите Truffle dashboard: truffle dashboard.

2. Перейдите по адресу localhost:24012 в браузере, подключите кошелёк MetaMask и выберите Linea в выпадающем списке сетей.

3. Выполните команду truffle migrate --network dashboard в отдельном терминале.

4. Вернитесь на localhost:24012 и нажмите «Подтвердить» в запросе на подтверждение развёртывания.

Вот и всё — в окне терминала, в котором вы выполняли команду truffle migrate --network dashboard, должен отобразиться адрес нового развёрнутого контракта. Вы можете убедиться в успешном развёртывании, посетив обозреватель блоков Linea.

Используйте MetaMask SDK для бесшовного подключения вашего dapp к кошелькам пользователей

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

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

Чтобы использовать MetaMask SDK в кодовой базе вашего React-фронтенда, выполните следующие шаги:

1. Установите MetaMask SDK с помощью Yarn или NPM: yarn add @metamask/sdk or npm install @metamask sdk

2. Импортируйте MetaMask SDK в свой React-проект: import { MetaMaskSDK } from '@metamask/sdk';

3. Создайте экземпляр MetaMask SDK, используя следующие параметры

 const sdk = new MetaMaskSDK(options);
 sdk.getProvider(); 
Копировать

1. Получите доступ к MetaMask SDK в любом месте вашей кодовой базы React: window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

Вызов eth_requestAccounts через ethereum.request() вызывает появление всплывающего окна установки или подключения, поэтому рекомендуется всегда вызывать эту функцию первой.

Ознакомьтесь с документацией MetaMask SDK для получения дополнительной информации о том, как использовать MetaMask SDK с Node.js, iOS, Unity и другими платформами.

Form xChange улучшает ваш dapp, обеспечивая ценный сбор обратной связи и способствуя расширению участия пользователей и совместному принятию решений. А возможность работы в любой EVM-совместимой сети и удобный интерфейс делают интеграцию простой и понятной.

Это руководство содержит шаги по интеграции формы обратной связи в ваш dapp. От подготовки бэкенда и его развёртывания на Linea до установки соединения с MetaMask с помощью MetaMask SDK для улучшения пользовательского опыта — вы полностью готовы к созданию вовлекающей и демократичной среды внутри вашего dapp. Никогда не забывайте: мощь web3 — в ваших руках!

Чтобы узнать больше о MetaMask SDK, посетите metamask.com/developer/sdk.