Пример Dapplets × NEAR

7 min read
To Share and +4 nLEARNs

Пример Dapplets × NEAR —  Dapplet это (приложение расширение), которое может анализировать сообщения Twitter и сохранять их в контракте NEAR. Он также может отображать ваши сохраненные твиты на странице оверлея. 

1. Введение

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

Дапплеты используют расширение, которое мы создаем. Это расширение предоставляет простой API для разработчиков дапплетов и большие возможности для сообщества дапплетов. Наша платформа децентрализована. Мы используем сети NEAR и Ethereum для наших реестров и контрактов. Мы также используем децентрализованные хранилища, такие как Swarm, IPFS и SIA, для размещения кода дапплетов и мультимедиа. 

Чтобы использовать нашу платформу, сначала вам необходимо установить расширение Dapplets. В настоящее время он находится на стадии альфа-тестирования и не публикуется в Google Chrome или любом другом магазине. Чтобы установить его, выполните следующие действия: 

  1. Откройте один из следующих браузеров: Google Chrome, Firefox, Brave, Tor. 
  2. Загрузите  расширение браузера.
  3. Откройте chrome://extensions в новой вкладке.
  4. Включите режим разработчика и нажмите F5, чтобы обновить страницу.
  5. Перетащите загруженный файл на страницу расширений. Расширение установится автоматически. Если вы используете Ubuntu. В другой ОС Linux расширение Dapplets может исчезнуть из расширений Chrome после перезагрузки ПК. Чтобы избежать этого, разархивируйте архив и используйте кнопку Load unpacked, чтобы добавить расширение.
  6. Кликните значок расширения 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

28
Пролистать наверх