Skip to content

Latest commit

 

History

History
234 lines (195 loc) · 15 KB

PROJECT_OVERVIEW_RU.md

File metadata and controls

234 lines (195 loc) · 15 KB

Обзор проекта: "Мой Дашборд"

Техническое задание

Цель проекта

Создание системы управления дашбордами для отображения информации на старых Android-телефонах. Пользователь через веб-приложение создаёт дашборды, добавляет виджеты и привязывает телефоны через QR-код. Телефон получает данные через API и отображает виджеты в режиме реального времени.

Основные компоненты

1. Веб-приложение (AnalogJS + tRPC + Pico.css)

  • Регистрация пользователя и анонимный режим с сохранением идентификатора в localStorage
  • Создание, редактирование и удаление дашбордов
  • Добавление, настройка и удаление виджетов (часы, календарь, отслеживание привычек)
  • Генерация QR-кода для привязки телефона
  • Перепривязка анонимных пользователей при последующей регистрации
  • UX и SEO: кнопка «Продолжить как гость», мета-теги для дашбордов

2. Мобильное приложение (Ionic + Capacitor)

  • Сканирование QR-кода для привязки телефона к дашборду
  • Получение списка виджетов с сервера через tRPC API
  • Отображение виджетов: часы с таймзоной и названием, календарь с фиксированным месяцем и датой, отслеживание привычек с интерактивным интерфейсом
  • Автоматическое обновление виджетов
  • Поддержка офлайн-кэша виджетов
  • Минимальный интерфейс: только отображение, без редактирования

3. Бэкенд (AnalogJS серверные маршруты + tRPC + Prisma + PostgreSQL)

Модели базы данных (схема из schema.prisma):

  • User: id, anonymousId, telegramUserId, supabaseUserId, isBlackTheme, Session[], Dashboard[]
  • Session: id, userId, createdAt, deletedAt
  • Dashboard: id, name, deviceId, userId, isBlackTheme, Widget[], createdAt, updatedAt, deletedAt
  • Widget: id, options (JSON), state (JSON), grid (columnIndex, rowIndex, columnCount, rowCount), colors, dashboardId, createdAt, updatedAt, deletedAt
  • WidgetLog: id, oldOptions, newOptions, oldState, newState, widgetId, createdAt, updatedAt, deletedAt

Эндпоинты tRPC:

  • /user/register – регистрация пользователя
  • /user/login – вход
  • /dashboards/create / /dashboards/update / /dashboards/delete / /dashboards/get
  • /widgets/create / /widgets/update / /widgets/delete / /widgets/get
  • /devices/link – привязка телефона через QR-код
  • /devices/widgets – получение виджетов для телефона
  • /releases/getMobileApkUrl – получение URL загрузки мобильного APK из релизов GitHub
  • Логирование изменений виджетов в WidgetLog
  • Анонимные пользователи: localStorage хранит идентификатор, перепривязка при регистрации

Основные компоненты

1. Веб-приложение (AnalogJS + tRPC + Pico.css)

  • Регистрация пользователя и анонимный режим с сохранением идентификатора в localStorage
  • Создание, редактирование и удаление дашбордов
  • Добавление, настройка и удаление виджетов (часы, календарь)
  • Генерация QR-кода для привязки телефона
  • Перепривязка анонимных пользователей при последующей регистрации
  • UX и SEO: кнопка «Продолжить как гость», мета-теги для дашбордов

2. Мобильное приложение (Ionic + Capacitor)

  • Сканирование QR-кода для привязки телефона к дашборду
  • Получение списка виджетов с сервера через tRPC API
  • Отображение виджетов: часы с таймзоной и названием, календарь с фиксированным месяцем и датой
  • Автоматическое обновление виджетов
  • Поддержка офлайн-кэша виджетов
  • Минимальный интерфейс: только отображение, без редактирования

3. Бэкенд (AnalogJS серверные маршруты + tRPC + Prisma + PostgreSQL)

Модели базы данных (схема из schema.prisma):

  • User: id, anonymousId, telegramUserId, isBlackTheme, Session[], Dashboard[]
  • Session: id, userId, createdAt, deletedAt
  • Dashboard: id, name, deviceId, userId, isBlackTheme, Widget[]
  • Widget: id, options (JSON), state (JSON), grid (columnIndex, rowIndex, columnCount, rowCount), colors, dashboardId
  • WidgetLog: id, oldOptions, newOptions, oldState, newState, widgetId

Эндпоинты tRPC:

  • /user/register – регистрация пользователя
  • /user/login – вход
  • /dashboards/create / /dashboards/update / /dashboards/delete / /dashboards/get
  • /widgets/create / /widgets/update / /widgets/delete / /widgets/get
  • /devices/link – привязка телефона через QR-код
  • /devices/widgets – получение виджетов для телефона
  • Логирование изменений виджетов в WidgetLog
  • Анонимные пользователи: localStorage хранит идентификатор, перепривязка при регистрации

Функциональные требования

1. Регистрация и анонимный режим

  • Email/password регистрация
  • Анонимный режим с идентификатором в localStorage
  • Перепривязка анонимного идентификатора к зарегистрированному аккаунту

2. Дашборды

  • Создание, редактирование, удаление
  • Название, тема (светлая/тёмная), привязка к телефону (deviceId)
  • Уникальность названия в рамках пользователя

3. Виджеты

  • Типы: часы, календарь
  • Параметры:
    • Часы: timeZone, name
    • Календарь: фиксированный месяц и дата
  • Опции отображения: цветовая схема (isBlackTheme, backgroundColor, primaryColor, positiveColor, negativeColor), положение в сетке (columnIndex, rowIndex, columnCount, rowCount)
  • Состояние виджета хранится в JSON (Widget.state)
  • История изменений (WidgetLog)

4. Телефоны

  • Привязка к дашборду через QR-код
  • Получение виджетов с сервера через tRPC
  • Автообновление при изменении данных на сервере
  • Отображение виджетов без возможности редактирования

5. Интеграция веб + мобильного приложения

  • Веб управляет дашбордами и виджетами
  • Мобильное приложение отображает только данные с сервера
  • Обновления виджетов мгновенно видны на телефоне

Нефункциональные требования

  • Поддержка Android старых версий
  • Производительность: кэширование виджетов на телефоне
  • UX: удобный интерфейс для привязки и просмотра дашбордов
  • SEO: мета-теги для веб-страниц дашбордов
  • Логи и метрики использования: привязка телефонов, количество дашбордов, просмотры виджетов

Архитектура проекта

[Веб-приложение (AnalogJS + tRPC + Pico.css)]
|
| tRPC API
v
[Бэкенд AnalogJS серверные маршруты + Prisma + PostgreSQL]
|
| tRPC API
v
[Мобильное приложение Ionic + Capacitor]

Дополнительные возможности

  • Возможность добавления новых виджетов в будущем
  • Опция запрета перепривязки телефона к другим пользователям
  • Поддержка темной и светлой темы для дашбордов и виджетов
  • Возможность офлайн-просмотра виджетов на телефоне

Ссылки на документацию

Текущий статус реализации

Завершенные компоненты

  1. Инфраструктура проекта

    • ✅ Веб-приложение AnalogJS с интеграцией tRPC
    • ✅ Мобильное приложение Ionic с Capacitor для Android
    • ✅ ORM Prisma со схемой базы данных
    • ✅ Конфигурация развертывания Vercel
    • ✅ Рабочий процесс GitHub Actions для сборки мобильных приложений

  2. Система аутентификации

    • ✅ Аутентификация через Telegram с проверкой на стороне сервера
    • ✅ Настройка туннелирования для локальной разработки (tuna.am)

  3. Схема базы данных

    • ✅ Все необходимые модели реализованы (User, Session, Dashboard, Widget, WidgetLog)
    • ✅ Правильно настроены связи и ограничения
    • ✅ Реализованы индексы и уникальные ограничения

  4. Базовый веб-интерфейс

    • ✅ Страница входа с аутентификацией через Telegram
    • ✅ Страница списка дашбордов
    • ✅ Страница деталей дашборда
    • ✅ Страница привязки устройства с генерацией QR-кода

Завершенные компоненты

  1. Управление пользователями

    • ✅ Аутентификация через Telegram с проверкой на стороне сервера
    • ✅ Анонимный режим с localStorage
    • ✅ Функциональность перепривязки пользователей
    • ✅ Регистрация по email/password
    • ✅ Аутентификация через Supabase с email/password и OAuth провайдерами
    • ✅ Поля пользователей Supabase в базе данных с правильной синхронизацией данных
    • ✅ Функция динамического получения и загрузки APK мобильного приложения из GitHub релизов

  2. Управление дашбордами

    • ✅ Полные операции CRUD для дашбордов
    • ✅ Рабочий процесс создания дашбордов
    • ✅ Возможности редактирования дашбордов
    • ✅ Совместное использование дашбордов и шаблоны

  3. Управление виджетами

    • ✅ Полные операции CRUD для виджетов
    • ✅ Реализация виджета отслеживания привычек
    • ✅ Интерфейс конфигурации виджетов
    • ✅ Позиционирование виджетов в сетке
    • ✅ Несколько типов виджетов (часы, календарь, отслеживание привычек)

  4. Мобильное приложение

    • ✅ Функциональность сканирования QR-кода
    • ✅ Привязка устройств к дашбордам
    • ✅ Компоненты отображения виджетов
    • ✅ Реализация офлайн-кэширования
    • ✅ Мобильные улучшения пользовательского интерфейса
    • ✅ Push-уведомления

  5. Интеграционные функции

    • ✅ Обновления виджетов в реальном времени
    • ✅ Управление состоянием виджетов
    • ✅ Логирование изменений (WidgetLog)
    • ✅ Сбор метрик использования
    • ✅ Ограничение частоты запросов к API и функции безопасности
    • ✅ Интеграции с сторонними API
    • ✅ Поддержка вебхуков

План разработки

Спринт 1 (2025-11-12 – 2025-11-17)

Фокус: Завершение основного функционала для базового управления дашбордами

Спринт 2 (2025-11-18 – 2025-11-24)

Фокус: Реализация мобильного приложения и полной интеграции

Сводка технологического стека

Слой Технология
Фронтенд (Веб) AnalogJS, Angular, tRPC, Pico.css, Tailwind CSS
Фронтенд (Мобильное) Ionic, Angular, Capacitor
Бэкенд Серверные маршруты AnalogJS, tRPC, Prisma ORM
База данных PostgreSQL (рекомендуется Neon)
Развертывание Vercel (веб), GitHub Actions (мобильное)
Аутентификация OAuth Telegram

Ссылки проекта