Руководство для начинающих по созданию децентрализованного приложения Web3 с помощью Next.js и смарт-контракта Motoko, работающего на блокчейне Интернет-компьютера
Введение
Цель этой статьи — дать новичкам краткое представление о том, как может выглядеть децентрализованное приложение Web3, помимо простого примера hello world с живой демонстрацией и полным исходным кодом для установки на локальном компьютере.
Технический стек Web3
Представьте себе веб-приложение, полностью работающее на блокчейне без использования каких-либо облачных сервисов. Обычно блокчейн относится к базе данных распределенного реестра с алгоритмом консенсуса. Иногда они могут быть децентрализованы, но многие — нет. Что, если есть способ разработать ваше новое веб-приложение с серверной частью, использующей смарт-контракт, и внешним интерфейсом, размещенным в сети HTTPS, обслуживающей смарт-контракт.
Текущая демонстрация
Прежде чем я углублюсь в детали, давайте немного повеселимся и попробуем живую демонстрацию, которая делает именно это. Перейдите на https://u4gun-5aaaa-aaaah-qabma-cai.raw.ic0.app/.
Поиграйте с примером приветствия, введя свое имя и нажав кнопку «Отправить». Он отправит ваше имя в Canister, который ответит вашим именем. Затем загрузите изображение и отправьте его. Он сохранит изображение во внутреннем хранилище (поэтому выберите что-нибудь тривиальное, пожалуйста) и загрузит его обратно для отображения в HTML.
Руководство для начинающих
Это простое веб-приложение размещено на блокчейне Internet Computer (IC), разработанном Dfinity Foundation. Он работает на трех канистрах (он же Умный контракт). Вот 3 канистры:
- Тип приветствия «Привет, мир» со сквозным внутренним смарт-контрактом
- Пример загрузки изображения с выбором изображения, отправкой изображения в Canister, загрузкой изображения обратно из Canister и его рендерингом в
<img>HTML - Веб-контейнер HTTPS, обслуживающий статические ресурсы (HTML/CSS/JavaScript), экспортированные из Next.js.
Пошаговое руководство Quick Start с подробным описанием доступно на Github https://github.com/dappblock/nextjs-ic-starter.
Вы можете следовать ему, чтобы развернуть dapp в локальных репликах IC с помощью команды dfx. По сути, это 7 шагов, описанных ниже (при условии, что у вас установлен NodeJS 16 или выше):
sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)" git clone https://github.com/dappblock/nextjs-ic-starter cd nextjs-ic-starter dfx start --background npm install dfx deploy npm run dev
Если вы пришли из React или Next.js, помните, что ваш интерфейс — это статический экспорт выходных данных Next.js. Это чистый HTML/CSS/JavaScript без серверной части Node.js. Некоторые функции Next.js на стороне сервера здесь не работают.
Пример загрузки изображения
Когда вы загружаете изображение в хранилище изображений, это, по сути, вызов транзакции обновления смарт-контракта, который включает консенсус между несколькими узлами. Для завершения требуется всего 2 секунды. Поскольку каждый Canister также является субъектом, каждая общедоступная функция обновления гарантируется атомарностью между узлами (пока внутри функции нет другого вызова await, иначе будет несколько коммитов). См. Image.mo.
Кроме того, загруженное изображение будет автоматически сохраняться в хранилище путем объявления stable var. Таким образом, вы можете на мгновение забыть о концепции базы данных или, например, о корзине Cloud Service S3.
stable var imageObjectStore : Trie.Trie<ImageId, ImageObject> = Trie.empty();
Хотя он может не подходить для всех видов использования, он побуждает вас мыслить нестандартно как разработчика и представлять себе приложение, разработанное совершенно по-новому, о чем раньше не думали.
Компонентное программирование с помощью React Hook
React Hooks не новы. Я нашел это особенно полезным при кодировании с агентом Dfinity во внешнем интерфейсе. В примере с изображением (см. ImageSection.js) достигается три вещи:
- Загрузить изображение в смарт-контракт
- Загрузить изображение из смарт-контракта
- Визуализация изображения в ‹img› HTML
Команда dfx в Dfinity предоставляет способ генерировать объявления пользовательского интерфейса для функций публичного актора Canister и типов данных для использования во фронтенд-разработке, например, JavaScript или TypeScript. С помощью хуков React он может инкапсулировать логику загрузки изображения.
Учитывая идентификатор изображения, загрузите двоичный объект из актера изображения Canister и обработайте его как источник изображения для использования с <img> HTML.
Теперь посетите: https://github.com/dappblock/nextjs-ic-starter/blob/master/ui/components/ImageSection.js.
Вы найдете useImageObject React Hook. Затем выполните следующие действия:
useImageObject.js › image-service.js › actor-locator.js › /ui/declarations/image/index.js
Кроме того, ImageSection может вызывать объявление пользовательского интерфейса изображения напрямую для взаимодействия с актором накопителя изображения. Используя хук useImageObject, он инкапсулирует сложность за кулисами и поощряет компонуемую логику в будущем. Он следует шаблонам Service Layer и Service Locator.
Обратите внимание, что существует Candid (язык описания интерфейса), который позволяет интерфейсу взаимодействовать с сервером. Вы можете полностью отказаться от парсинга JSON.
Стек технологий Web3 от Internet Computer
Компания Dfinity создала действительно хороший Инфографический PDF-файл для обобщения Интернет-компьютера. Пожалуйста, посмотрите.
Вот функции, которые я хотел бы выделить:
- Смарт-контракт как ваш сервер
- Накопитель веб-обслуживания для размещения ресурсов веб-интерфейса и обслуживания веб-служб
- Бесконечная масштабируемость через подсети
- 2-секундный вызов обновления консенсуса Canister с окончательностью
- Модель обратного газа (пользователям не нужно платить за каждую транзакцию смарт-контракта)
- Ортогональное постоянство (структура данных вашего смарт-контракта может быть объявлена стабильной)
- Родной актер и актерский класс
- Код на языке программирования Motoko или Rust и компиляция в WebAssembly (WASM)
- Возможность хранить и отправлять токены в Canister, например токен ICP
Хотя каждый пункт заслуживает отдельной страницы статьи, у вас может быть опыт работы с некоторыми из них, если вы разработчик. Как и в случае с Actor, вы могли использовать его в Scala или Swift (недавно при разработке приложения для iOS).
Возможно, вы использовали смарт-контракт Ethereum Solidity, но в основном для транзакций типа кошелька, токена, NFT или DeFi. Вы тоже думали о разработке своего бэкенда в Smart Contract? Я надеюсь, что эта живая демонстрация и пример кода помогут вам понять основные принципы.
Традиционным разработчикам может быть сложно сопоставить Интернет-компьютер с существующей технологией, потому что ни одна из существующих технологий не может сравниться с ИС. С точки зрения вычислений это похоже на бессерверную функцию. Плата за вычисления взимается только тогда, когда функция выполняется (когда используется стратегия наилучших усилий). Существует также плата за память и хранилище, но только за фактическое использование.
Благодаря ортогональному сохранению через стабильные переменные сериализуемая структура данных может сохраняться в хранилище и выдерживать будущие обновления, когда вводится новая программная логика. Он поставляется с хранилищем данных с несколькими мастерами (запись) / несколькими репликами (чтение) в подсети.
Представьте себе развертывание базы данных MongoDB или RDMS в нескольких регионах с набором реплик высокой доступности, имеющим реплики чтения или экземпляры с несколькими мастерами, допускающие как чтение, так и запись. Разница в том, что вы получаете эту новую архитектуру с каждым новым развертыванием Canister. Это не совсем тот же синоним, потому что его Протокол консенсуса намного сложнее, чем может предложить поставщик базы данных.
Мое путешествие в Web3
Если вы следили за моим блогом на Medium, возможно, вы читали мои предыдущие статьи, посвященные искусственному интеллекту, глубокому обучению, обучению с подкреплением и, совсем недавно, количественным финансам с активами Cryptos. Все они были интересными предметами, пока я не наткнулся на Интернет-компьютер в 2021 году. После его Genesis Launch в мае 2021 года я начал изучать Интернет-компьютер и стал разработчиком. В августе 2021 года я запустил новый проект Web3 под названием Content Fly с парой соучредителей. Предстоит еще многому научиться. Это интересное путешествие. Код Стартовый шаблон Next.js IC основан на опыте, который я получил при разработке Content Fly Dapp. Я добавлю больше полезных примеров в будущем.
Надеюсь, вам понравилось читать эту статью, и вы узнали что-то полезное. Обязательно дайте мне знать ваши мысли в комментариях. 🙂
Создавайте независимые децентрализованные компоненты с помощью Bit
Попрощайтесь с монолитными приложениями и оставьте слезы их разработки позади.
Будущее за компонентами; модульное программное обеспечение, которое быстрее, масштабируемее и проще в сборке. Инструменты OSS, такие как Bit, предлагают отличный опыт разработчика для создания независимых компонентов и составления приложений. Многие команды начинают с создания своих дизайн-систем или микроинтерфейсов с помощью общих компонентов. Попробуйте →
Подробнее
Краткое руководство пользователя Internet Computer
Инфографика Dfinity Internet Computer
Шаблон Next.js Internet Computer Starter Template
Content Fly Dapp
Запуск Dfinity Internet Computer Genesis
Достижение консенсуса в отношении Интернет-компьютера
