Создание Сквозного dApp на Aptos

Распространенный способ изучения нового фреймворка или языка программирования - создать простой список задач. В этом учебнике мы изучим, как создать сквозной todo list dapp, начиная со стороны смарт-контракта через сторону фронтенда и, наконец, использование кошелька для взаимодействия между ними.

Посмотрите готовый код в исходном коде.

После выполнения предварительных требований и настройки, как описано ниже, вы будете следовать этому учебнику в таком порядке:

1. Создать смарт-контракт
2. Настроить фронтенд
3. Получить данные из цепи
4. Отправить данные в цепь
5. Обработать задачи

У вас должно быть:

• node и npm

Хотя мы объясним некоторые решения React, мы не будем глубоко погружаться в то, как работает React; поэтому мы предполагаем, что у вас есть некоторый предыдущий опыт с React.

В этом разделе мы создадим директорию my-first-dapp для хранения файлов нашего проекта, как клиентского кода (на основе React), так и кода Move (нашего смарт-контракта).

Для этого мы будем использовать create-aptos-dapp для создания проекта.

1. Откройте терминал и перейдите в желаемую директорию для проекта (например, директорию Desktop).
2. Запустите npx create-aptos-dapp@latest для создания проекта.

npx create-aptos-dapp@latest

3. Следуйте инструкциям для создания проекта.

• Выберите имя для проекта, например my-first-dapp.
• Выберите опцию Full-stack project.
• Выберите опцию Boilerplate Template.
• Для простоты выберите не использовать Surf.
• Выберите опцию фреймворка Vite app.
• Выберите опцию сети Devnet.

Инструмент создаст проект в директории с тем же именем, что и проект, и установит необходимые зависимости.

Следуйте инструкциям Next Steps.

Теперь давайте создадим смарт-контракт.

В этом учебнике вы изучите:

• Язык Move: Основы программирования на безопасном языке Move
• Структуры данных: Создание и управление ресурсами для хранения данных
• Публичные функции: Разработка API для взаимодействия с контрактом
• Тестирование: Написание и выполнение unit тестов для Move
• Развертывание: Публикация контракта в блокчейне Aptos

• React интеграция: Подключение React приложения к блокчейну Aptos
• TypeScript SDK: Использование Aptos TypeScript SDK для взаимодействия с блокчейном
• Управление состоянием: Синхронизация данных блокчейна с UI состоянием
• Wallet интеграция: Подключение и взаимодействие с кошельками Aptos
• Обработка транзакций: Отправка транзакций и обработка результатов

• End-to-end архитектура: Понимание как смарт-контракты взаимодействуют с фронтендом
• Управление данными: Эффективное получение и обновление данных блокчейна
• Пользовательский опыт: Создание плавного UX для блокчейн приложений
• Обработка ошибок: Graceful обработка ошибок блокчейна и сети
• Развертывание: Подготовка полного dApp к продакшену

Наш пример приложения будет включать:

• Создание задач: Добавление новых задач в список
• Управление задачами: Отметка задач как выполненных/невыполненных
• Постоянство данных: Сохранение данных в блокчейне
• Владение данными: Каждый пользователь управляет своими задачами
• Реальное время обновления: Синхронизация изменений между UI и блокчейном

После завершения настройки ваш проект будет иметь следующую структуру:

my-first-dapp/
├── contract/                 # Move смарт-контракт
│   ├── sources/
│   │   └── todolist.move    # Основной контракт
│   ├── Move.toml            # Конфигурация Move проекта
│   └── tests/               # Unit тесты
├── frontend/                # React приложение
│   ├── src/
│   │   ├── components/      # React компоненты
│   │   ├── hooks/          # Custom React hooks
│   │   ├── utils/          # Утилиты и хелперы
│   │   └── App.tsx         # Главный компонент
│   ├── package.json        # Зависимости frontend
│   └── vite.config.ts      # Конфигурация Vite
└── README.md               # Документация проекта

• Aptos: Высокопроизводительный блокчейн Layer 1
• Move: Безопасный язык смарт-контрактов
• Aptos CLI: Инструменты командной строки для разработки

• React 18: Современная библиотека UI
• TypeScript: Типизированный JavaScript для лучшей надежности
• Vite: Быстрый инструмент сборки и dev сервер
• Aptos TypeScript SDK: Официальный SDK для взаимодействия с Aptos

• Aptos Wallet Adapter: Стандартизированное подключение кошельков
• TailwindCSS: Utility-first CSS фреймворк для стилизации
• React Query: Управление состоянием сервера и кэшированием

По завершении учебника ваш dApp будет иметь:

• ✅ Подключение кошелька одним кликом
• ✅ Создание новых задач
• ✅ Просмотр всех задач
• ✅ Отметка задач как выполненных/невыполненных
• ✅ Удаление задач
• ✅ Постоянное хранение в блокчейне

• ✅ Безопасный смарт-контракт с тестами
• ✅ Отзывчивый современный UI
• ✅ Обработка ошибок и состояний загрузки
• ✅ Оптимистичные UI обновления
• ✅ Управление газом транзакций
• ✅ Типобезопасность на всем стеке

• ✅ Модульная архитектура кода
• ✅ Переиспользуемые компоненты
• ✅ Типизированные API взаимодействия
• ✅ Comprehensive error handling
• ✅ Производительные обновления состояния
• ✅ Готовность к продакшену

Это руководство разработано пошагово, где каждая глава строится на предыдущей. К концу у вас будет полное понимание того, как создавать современные dApps на Aptos.

Давайте начнем с создания смарт-контракта!