Пока наш бэкенд занимается оптимизацией газа на контрактах, я решил переписать проект в четвёртый раз. На этот раз начав с вёрстки.
⬇️ Для этого я с помощью GPT сгенерировал набор моковых данных для каналов и постов, основываясь на интерфейсах смарт-контрактов.
В качестве базы я выбрал модульную структуру проекта:
interface FolderStructure {
/** Название папки */
name: string;
/** Описание назначения папки */
description: string;
/** Дополнительные примечания */
notes?: string;
}
/** Структура проекта */
const PROJECT_STRUCTURE: FolderStructure[] = [
{
name: 'Adapters',
description: 'Адаптеры для взаимодействия между различными компонентами системы'
},
{
name: 'Components',
description: 'Компоненты приложения, которые могут быть переиспользованы в разных частях проекта'
},
{
name: 'Config',
description: 'Файлы конфигурации и настройки для различных частей приложения'
},
{
name: 'Data',
description: 'Объекты передачи данных (DTO) и модели данных'
},
{
name: 'Extensions',
description: 'Файлы, расширяющие базовую функциональность проекта'
},
{
name: 'Handlers',
description: 'Обработчики событий, запросов и других действий'
},
{
name: 'Helpers',
description: 'Вспомогательные функции и классы, упрощающие выполнение определенных задач'
},
{
name: 'Interfaces',
description: 'Интерфейсы, определяющие контракты для реализации в модулях и компонентах'
},
{
name: 'Messages',
description: 'Файлы, описывающие структуру сообщений и событий, используемых в проекте'
},
{
name: 'Middlewares',
description: 'Промежуточные слои для обработки запросов в веб-приложениях'
},
{
name: 'Modules',
description: 'Логически сгруппированные части функциональности, объединяющие несколько компонентов и сервисов'
},
{
name: 'Parts',
description: 'Уникальная папка для хранения внутренних реализаций компонентов и модулей',
notes: 'Не может находиться в корне проекта'
},
{
name: 'Repositories',
description: 'Классы и функции для работы с данными и базами данных'
},
{
name: 'Services',
description: 'Сервисы и обработчики, работающие с данными и логикой приложения'
},
{
name: 'Shared',
description: 'Общие файлы и компоненты, которые могут использоваться несколькими модулями',
notes: 'Также может называться Common'
},
{
name: 'Toolkit',
description: 'Набор инструментов, утилит и вспомогательных функций'
},
{
name: 'Utils',
description: 'Вспомогательные функции и утилиты, используемые в проекте',
notes: 'Также может называться Utilities'
}
];1️⃣ Опираясь на стайл-гайд компании, был создан CoreModule, где происходит настройка vue-router с Pinia, и Web3Module, где мы подключаемся к провайдеру RPC и устанавливаем связь с Metamask SDK.
2️⃣ Внутри Web3Module также был создан компонент WalletConnect.vue, который подключает кошелёк пользователя (если он есть) к нашему приложению и использует его в качестве RPC провайдера.
3️⃣ Эти и другие модули мы экспортируем в контейнер зависимостей (как в Angular) с помощью пакета компании, который является альтернативой InversifyJS.
4️⃣ А вот компонент кнопки мы экспортируем через provide/Inject, или можем использовать явные импорты
import { WalletConnect } from '@/modules/Web3Module’, но это приводит к связанности модулей. Этот функционал не зависит от API смарт-контрактов, а значит, мне не придётся их изменять в пятый раз и можно приступать к вёрстке.
📊 #статистика День 1082 == 2154 час в IT