Пример Dapplets × NEAR — Dapplet это (приложение расширение), которое может анализировать сообщения Twitter и сохранять их в контракте NEAR. Он также может отображать ваши сохраненные твиты на странице оверлея.
1. Введение
Дапплеты — приложения, которые взаимодействуют с веб-страницами, дополняют их, вставляя различные виджеты, анализируют данные страниц и добавляют некоторые новые функции. Они могут улучшить взаимодействие с пользователем при использовании социальных сетей, видеосервисов и других источников.
Дапплеты используют расширение, которое мы создаем. Это расширение предоставляет простой API для разработчиков дапплетов и большие возможности для сообщества дапплетов. Наша платформа децентрализована. Мы используем сети NEAR и Ethereum для наших реестров и контрактов. Мы также используем децентрализованные хранилища, такие как Swarm, IPFS и SIA, для размещения кода дапплетов и мультимедиа.
Чтобы использовать нашу платформу, сначала вам необходимо установить расширение Dapplets. В настоящее время он находится на стадии альфа-тестирования и не публикуется в Google Chrome или любом другом магазине. Чтобы установить его, выполните следующие действия:
- Откройте один из следующих браузеров: Google Chrome, Firefox, Brave, Tor.
- Загрузите расширение браузера.
- Откройте chrome://extensions в новой вкладке.
- Включите режим разработчика и нажмите F5, чтобы обновить страницу.
- Перетащите загруженный файл на страницу расширений. Расширение установится автоматически.
- Кликните значок расширения Dapplets на панели расширения. Попробуйте дапплет Dapplets × NEAR.
2. Руководство
Давайте изучим, как работает этот дапплет и почему Dapplets является дружественной платформой NEAR.
Цель этого примера — показать взаимодействие между NEAR и Dapplets. Если вы впервые сталкиваетесь с дапплетами, мы рекомендуем сначала ознакомиться с нашей документацией. Она содержит несколько упражнений, которые объясняют, как создавать дапплеты и адаптеры, от простых до сложных. Мы настоятельно рекомендуем просмотреть примеры ex01 и ex04, которые описывают, как создавать самые простые дапплеты и дапплеты с наложением. Знания, которые вы получите, облегчат понимание текущего примера.
Исходный код для этого примера находится в отдельной ветке: упражнение.
Вы можете клонировать это репо. Оно не будет работать напрямую. Попробуйте выполнить следующие шаги, чтобы запустить его.
Посмотрим на структуру. Есть три компонента: дапплет, оверлей и контракт.
Даплет — это точка входа приложения. Он использует адаптеры для взаимодействия с веб-страницами, определяя контексты для расширения и виджеты для вставки. Вы можете найти основные функции расширения внутри дапплета. Мы используем TypeScript в нашем проекте.
Мы определяем оверлей как место, где пользователь может что-то делать с проанализированными данными, подключаться к основным функциям дапплета через мост дапплета и управлять параметрами дополнения. Это важная часть приложения, но она работает в другой среде и публикуется как отдельный пакет. В большинстве случаев мы используем React как один из самых популярных фреймворков. Но вы можете использовать предпочитаемый вами фреймворк или чистый JavaScript или TypeScript.
Контракт не соединяется напрямую с другими модулями и может быть расположен вне дапплета. Однако этот простой контракт NEAR создан специально для этого дапплета. Поэтому его удобно размещать в структуре приложения.
Давайте посмотрим на каждый модуль.
2.1. Dapplet
Посмотрите файл /dapplet/src/index.ts.
Сначала мы создаем внедряемый класс с помощью декоратора @Injectable и используем @Inject, чтобы добавить адаптер Twitter в качестве переменной класса адаптера. Также создайте метод активации. Он запускается, когда выбранный адаптер находит определенный контекст и загружается. В нем будет вся основная логика.
Добавьте кнопку в каждый твит. Введите этот код для активации:
осмотрите на код. Получаем кнопку виджета из адаптера. Затем запустите метод attachConfig адаптера. Он получает объект с именами контекстов, которые будут использоваться в качестве ключей. Значения — это функции, которые получают проанализированный контекст в качестве единственного аргумента и возвращают виджет или массив виджетов. Вы также можете вернуть null, false или undefined.
Виджет — это функция, которая получает объект, состоящий из состояний виджета. Параметры состояния описаны в документации адаптеров. Документацию по адаптеру Twitter можно найти здесь. В нашем случае мы добавляем изображение на кнопку и всплывающую подсказку. exec — это функция, которая запускается при нажатии. Теперь мы просто показываем разобранный контекст в консоли.
Запустите дапплет:
⚠️ Since the browser is blocking pages with problematic security certificates, go to https://localhost:3001/dapplet.json when the application is running and agree to run in insecure mode
Откройте расширение. Перейдите на вкладку «Разработчик» и включите сервер разработки: https://localhost:3001/dapplet.json.
Включите вкладку Дапплеты. Рядом с нашим дапплетом вы увидите значок разработчика. Включите его.
Теперь вы можете видеть дополнительные кнопки на наших твитах. Нажмите на кнопку и откройте консоль. Вы увидите проанализированный контекст твита.
Вы сделали это! Поздравляем!!! Вернемся к коду.
Мы хотим показывать обработанные данные не в консоли, а пользователям. Для этого мы будем использовать оверлей. Но перед реализацией оверлея добавьте в дапплет логику взаимодействия между дапплетом и оверлеем.
Давайте изменим наш код. Добавьте переменную закрытого класса _overlay типа any. При активации добавьте следующий код:
Основная функция Core.overlay (проблемы с вводом будут исправлены в ближайшее время) получает объект с именем оверлея и заголовком оверлея и возвращает объект оверлея, который мы сохраняем в переменной _overlay.
Добавим в класс метод openOverlay:
В этом примере мы вызываем метод send the overlay. Он принимает два аргумента: имя этих данных и данные для отправки в оверлей.
Добавьте openOverlay в функцию exec и передайте проанализированный контекст в оверлей. Это текущий код дапплета:
Откройте ./dapplet/dapplet.json.
⚠️ Since the browser is blocking pages with problematic security certificates, go to https://localhost:3000 when the application is running and agree to run in insecure mode.
Здесь мы видим URL-адрес оверлея с именем «оверлей», который будет использоваться в режиме разработчиков. Во время публикации дапплета в реестр оверлей будет опубликован в децентрализованном хранилище.
Мы также видим адаптер Twitter в зависимостях. В примере мы используем версию 0.9.0.
Переходим к оверлею.
2.2. Оверлей
Как мы уже упоминали ранее, оверлей можно создать любым удобным для вас способом. Мы используем React в большинстве наших проектов. Мы не будем анализировать весь код оверлея, а только важные моменты для наших архитектурных аспектов.
Для взаимодействия с дапплетом установите пакет npm @dapplets/dapplet-overlay-bridge:
Чтобы получить данные из дапплета, нам нужен класс Bridge в оверлейной части. Посмотрите на модуль ./overlay/src/dappletBridge.ts. Вот метод onData, в котором мы подписываемся на событие data, которое мы описали в даплете.
Затем мы используем его в модуле App.tsx.
Теперь сохраните изменения и перезагрузите страницу Twitter. При нажатии на кнопку вы увидите оверлей с выбранными данными твита.
Это классно! Но наша цель — сохранить эти данные в цепочке NEAR и получить их обратно. Итак, давайте посмотрим контракт.
2.3. NEAR смарт-контракт
Посмотрите на модуль ./contract. Существует простой смарт-контракт NEAR, написанный на языке AssemblyScript с функцией create-near-app.
В ./contract/assembly/index.ts мы видим одну PersistentUnorderedMap с именем tweetsByNearId. Он хранит массив сериализованных данных твитов с текущим идентификатором пользователя. Он имеет методы для сохранения, удаления и извлечения сохраненных твитов.
Вы можете найти все необходимые данные о том, как писать, тестировать и развертывать смарт-контракты NEAR в официальной документации и курсах и руководствах Learn NEAR.
Давайте посмотрим, как подключиться к смарт-контракту и использовать его методы в дапплете.
Добавьте следующий код в метод активации модуля ./dapplet/src/index.ts:
Есть метод Core.contract, который получает 3 параметра: имя сети («near» или «etherium»), имя контракта и объект с методами просмотра и изменения.
Теперь мы сделаем методы контракта доступными в оверлее. Чтобы передать методы через мост дапплетов, добавьте функцию прослушивания к вызову наложения. Не бойтесь, просто скопируйте и вставьте этот код 🙂
Последние три асинхронных функции передают методы контракта в оверлей. Первые четыре функции должны связать кошелек с приложением. Чтобы получить объект Wallet, мы используем метод Core.wallet с именованными параметрами name (near или ethereum) и network. У кошелька есть методы isConnected, connect,disconnect и параметр accountId.
Следующим шагом будет изменение ./overlay/src/dappletBridge.ts. Мы должны сделать функции, описанные в даплете, доступными в оверлее. Скопируйте следующий код в класс Bridge:
Теперь мы можем использовать контрактные методы в оверлейных модулях. Мы можем авторизовать дапплет с помощью кошелька NEAR testnet и сохранить данные выбранных твитов в смарт-контракте. Мы также можем видеть наши сохраненные данные в оверлее.
Отмените коммит всего зафиксированного кода в файле ./overlay/src/App.tsx. Сохраните изменения и перезагрузите страницу Twitter.
Вишенкой на торте станет добавление возможности просмотра сохраненных твитов без разбора новых. Для этого достаточно добавить метод Core.onAction в активацию в ./dapplet/src/index.ts и передать ему функцию открытия оверлея.
Теперь вы увидите значок near рядом с именем дапплета.
Щелчок по кнопке открывает оверлей с сохраненными твитами.
Поздравляем всех, кто добрался до конца урока! Мы надеемся, что он был успешным.
Вот результат: dapplets-near-example
Если у вас что-то не получилось, или у вас остались какие-то вопросы, добро пожаловать в наши чаты в Discord и Telegram.
Спасибо за уделенное время. Мы надеемся, что эти новые знания будут вам полезны, и вы продолжите разработку впечатляющих и успешных приложений на платформе Dapplets, используя возможности протокола NEAR 🚀 ✨
Контакты:
Web: dapplets.org
Docs: docs.dapplets.org
GitHub: github.com/dapplets
Discord: discord.gg/YcxbkcyjMV
Telegram: t.me/dapplets
Twitter: @dappletsproject
