Создайте приложение ReactJS с помощью API 3Box
* Примечание: ссылка на более упрощенную версию статьи и репо здесь *
Что мы создаем
Мы будем создавать приложение ReactJS, которое интегрируется с несколькими API 3Box. Оно предназначено для использования в качестве диспетчера паролей, но приложение также можно использовать для хранения, получения или удаления любой «секретной» пары «ключ-значение», связанной с любым из ваших пространств.
Мы рассмотрим 3Box Profiles API, profile-hover и 3Box Storage (Spaces) API.
🦄3Box
О 3Box
3Box - это децентрализованный уровень идентификации с открытым исходным кодом, построенный на IPFS и OrbitDB.
С 3Box разработчикам DApp не нужно поддерживать централизованную серверную службу или хранить данные в блокчейне.
С 3Box конечные пользователи контролируют свои данные, позволяя им решать, какими данными делиться и с кем они хотели бы делиться ими.
Профили 3Box в конечном итоге представляют собой набор хэшей IPFS, сопоставленных с OrbitDB, которые затем сопоставляются с учетной записью блокчейна пользователя через их 3ID (система идентификации 3Box). 3Box запускает узел закрепления IPFS, чтобы гарантировать сохранение важных CID.
Документация подробно описывает архитектуру.
Профили 3Box
Профили 3Box позволяют разработчикам DApp хранить информацию, предназначенную для совместного использования в приложениях, такую как имена, изображения профиля и подтверждения в социальных сетях.
Подмножеством Profiles API является Плагин Profile Hover, легкий всплывающий компонент, который дополняет шестнадцатеричный код пользователя, отображая его социальную информацию.
Profile Hover обладает широкими возможностями настройки и обеспечивает более гостеприимное и личное взаимодействие с пользователем. Мы будем использовать его в этом приложении для отображения аутентифицированного пользователя.
API профилей можно использовать везде, где разработчики хотят получить доступ к общей информации о пользователях, или для включения человеческого прикосновения вместо шестнадцатеричного значения по умолчанию.
Хранилище 3Box
3Box Storage позволяет разработчикам DApp выполнять различные операции с пользовательскими пространствами, включая получение, установку и удаление как общедоступной, так и частной информации. У каждого пользователя есть хранилище данных как для общедоступных, так и для частных.
Хранилище - это изолированное хранилище данных типа "ключ-значение", в котором хранится информация, относящаяся к определенному приложению или контексту. Он использует IPFS для децентрализованного хранения и OrbitDB для структурирования базы данных.
API хранилища можно использовать для хранения любой пары "ключ-значение", включая предпочтения, настройки и конфиденциальную информацию. Его также можно использовать для хранения хэшей IPFS, которые указывают на более сложные файлы, такие как изображения или документы Word.
Преимущества 3Box
- Храните данные вместе с пользователем в IPFS, а не в блокчейне, когда это не нужно.
- Видеть человека, а не шестнадцатеричное значение
- Создавайте удобные для UX приложения DApps с помощью набора готовых инструментов
- Работа с аутентификацией и профилем аналогична уже знакомым приложениям web2
- Пользователи становятся владельцами своих данных
🗺Настройка
Это руководство действительно включает пару библиотек, которые могут выходить за рамки базового приложения ReactJS - в основном, Router и SCSS. Более подробную информацию по обоим можно найти в документации ниже:
Клонирование приложения
git clone https://github.com/ryanpedersen42/RP-3Box.git npm install
Ниже представлена структура каталогов приложения.
🏗Как это работает
Мы подробно рассмотрим действия, относящиеся к 3Box, в приложении ниже. Вы можете следить за своими действиями в своей среде IDE.
1. Аутентификация
Эта функция обрабатывает процесс аутентификации для вашего приложения. Всего несколькими строками кода мы подтверждаем учетную запись пользователя web3 и используем результат для выполнения действий с несколькими API 3Box.
Мы начинаем с предложения пользователю войти в систему с помощью своего провайдера web3; мы будем использовать возвращенный адрес, чтобы начать наши действия с 3Box .openBox() - это статический метод, который аутентифицирует пользователя данного адреса ethereum в 3box и возвращает box экземпляр связанного адреса. Этот box экземпляр будет сохранен в this.state и будет использоваться позже для переключения между пробелами.
Затем мы вызываем listSpaces - один из API хранилищ (пространств), который возвращает массив пространств, к которым принадлежит пользователь. Мы будем хранить их в this.state. Мы начинаем с открытия первого пространства в массиве, но вы также можете по умолчанию открыть свое собственное пространство. (Напишите об этом здесь.)
Количество необходимых подписей зависит от предыдущей активности пользователя в 3Box. При первом входе пользователя в систему ему необходимо будет предоставить три подписи: одну для создания учетной записи, одну для открытия окна и одну для открытия пространства.
2. Изменить пробелы
Функция openSpace() принимает строку. В приведенном выше случае строка поступает из нашего обработчика событий в компоненте dropdown-selector.jsx. Если строка соответствует существующему пространству, то она откроет выбранное пространство. (В данном случае это так; он исходит из массива существующих пробелов.) Однако, если ввод не соответствует ни одному пробелу, он создаст новое пространство с этим именем. Эта функция полезна, если одного места недостаточно - например, если у вас есть отдельные части вашего приложения или если контекстуально было бы больше смысла, чтобы данные не объединялись.
3. Добавьте новую пару "ключ-значение".
space.private.set() принимает две строки - ключ ввода и значение ввода - до put в выбранном пространстве. .private указывает, что ключ и значение будут зашифрованы. Конечный пользователь должен подписаться, чтобы получить доступ к своим личным пространствам для каждого открытого сеанса.
Чтобы put открытая пара "ключ-значение", мы должны использовать .public вместо .private.
Дополнительную информацию о шифровании приватных данных можно посмотреть в документации здесь.
4. Получите пару "ключ-значение".
Функция space.private.get() работает аналогично функции space.private.set(), но это gets значение переданной строки. Если такого ключа нет, она возвращает undefined.
5. Удалите пару "ключ-значение".
Эта функция принимает строку и удаляет значение связанного ключа. Возвращает Boolean - истина в случае успеха.
6. Выйти
box.logout() очищает локальный кеш и выполняет выход пользователя из системы. Если это вызвано, пользователю нужно будет подписать сообщение о согласии в следующий раз, когда вы позвоните openBox().
💭 Использование этих инструментов
Перечисленные выше инструменты должны быть применимы к множеству приложений, поэтому независимо от того, создаете ли вы децентрализованный Reddit, Twitter или Action DApp, не стесняйтесь подключать и играть. Полная документация здесь.
Бонус: разные ошибки
TypeError: Cannont read property ‘ciphertext' of null
›Убедитесь, что у вас есть обработка ошибок для возвращаемых значений, так как некоторые из них могут быть undefined. Подробнее здесь.
Uncaught(in promise) TypeError: Cannot read property 'sendAsync' of undefined
›Происходит от функции sendEth в index.js файла 3Box-js. Убедитесь, что вы передаете правильное значение openSpace().
