chto-sozdat-veb-prilozhenie/tech-spec.md

10 KiB
Raw Permalink Blame History

Техническое задание: Веб-приложение «Умный планировщик учёбы»

1. Общие сведения

Название: Умный планировщик учёбы (Study Planner)

Целевая аудитория: школьники (5-11 классы), студенты колледжей и вузов

Основная цель: помочь учащимся организовывать учебные задания, контролировать сроки и видеть прогресс обучения

Тип приложения: одностраничное веб-приложение (SPA) с серверным хранением данных


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

2.1. Расписание

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

Функции:

  • Просмотр расписания на текущую неделю
  • Добавление занятия (предмет, время, день недели, кабинет/ссылка)
  • Редактирование и удаление занятий
  • Цветовая индикация типов предметов (лекции, практики, лабораторные)

Данные занятия:

{
  id: number,
  subject: string,        // название предмета
  day: string,            // "mon", "tue", "wed", "thu", "fri", "sat", "sun"
  time: string,           // "14:00"
  location: string,       // кабинет или ссылка
  type: string,           // "lesson" | "lecture" | "practice" | "lab"
  color: string           // цветовой акцент
}

2.2. Список заданий

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

Функции:

  • Добавление задания с названием, предметом, дедлайном и приоритетом
  • Отметка о выполнении
  • Сортировка по дедлайну и приоритету
  • Фильтрация (все / активные / выполненные / просроченные)
  • Удаление заданий

Данные задания:

{
  id: number,
  title: string,          // название задания
  subject: string,        // предмет
  dueDate: string,        // "2026-08-25"
  priority: string,       // "high" | "medium" | "low"
  status: string,         // "pending" | "completed" | "overdue"
  description: string,    // описание (опционально)
  createdAt: string       // дата создания
}

2.3. Календарь

Назначение: визуальное отображение сроков и событий

Функции:

  • Просмотр месяца с индикацией дедлайнов
  • Отображение количества заданий на каждый день
  • Быстрый переход к текущему месяцу
  • Цветовые метки по приоритетам

2.4. Прогресс

Назначение: статистика и мотивация пользователя

Метрики:

  • Всего заданий выполнено
  • Процент выполнения за неделю/месяц
  • Текущая серия (дней подряд с выполненными задачами)
  • Распределение по предметам
  • График активности (7 дней)

Визуализация:

  • Круговая диаграмма (выполнено / в процессе / просрочено)
  • Столбчатый график по дням недели
  • Список достижений (gamification)

2.5. Напоминания

Назначение: уведомление о приближающихся дедлайнах

Функции:

  • Автоматический расчёт дедлайнов (за 24 часа, за 2 часа, за 30 минут)
  • Визуальные уведомления в интерфейсе
  • Список предстоящих событий на сегодня

Данные напоминания:

{
  id: number,
  taskId: number,         // ссылка на задание
  message: string,        // текст напоминания
  time: string,           // время напоминания
  isShown: boolean        // показано ли уже
}

3. Технические требования

3.1. Архитектура

Фронтенд:

  • HTML5 + CSS3 + Vanilla JavaScript (ES6+)
  • Без фреймворков (React/Vue) — для быстродействия
  • Адаптивная вёрстка (mobile-first)
  • LocalStorage для кэширования

Бэкенд:

  • Node.js (стандартная библиотека http)
  • REST-like API для CRUD операций
  • Хранение данных в data.json

Структура данных (data.json):

{
  "tasks": [],
  "schedule": [],
  "reminders": [],
  "settings": {
    "theme": "light",
    "notifications": true
  }
}

3.2. API endpoints

Метод Путь Описание
GET /api/tasks Получить все задания
POST /api/tasks Создать задание
PUT /api/tasks/:id Обновить задание
DELETE /api/tasks/:id Удалить задание
GET /api/schedule Получить расписание
POST /api/schedule Добавить занятие
DELETE /api/schedule/:id Удалить занятие
GET /api/stats Получить статистику

3.3. Интерфейс

Структура страниц:

  1. Главная (Dashboard)

    • Сводка на сегодня
    • Ближайшие дедлайны (3-5 шт.)
    • Быстрое добавление задания
  2. Задания (Tasks)

    • Полный список с фильтрами
    • Форма добавления/редактирования
    • Чекбоксы выполнения
  3. Расписание (Schedule)

    • Недельный вид
    • Карточки занятий по дням
  4. Календарь (Calendar)

    • Месячный вид
    • Индикаторы дедлайнов
  5. Прогресс (Progress)

    • Диаграммы и графики
    • Статистика по предметам

3.4. Дизайн-система

Цветовая палитра:

--primary: #4F46E5      /* индиго — основной */
--success: #10B981      /* зелёный — выполнено */
--warning: #F59E0B      /* жёлтый — среднее */
--danger: #EF4444       /* красный — срочно/просрочено */
--background: #F9FAFB   /* светлый фон */
--surface: #FFFFFF      /* карточки */
--text: #111827         /* тёмный текст */
--text-secondary: #6B7280

Типографика:

  • Шрифт: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif
  • Заголовки: 32px / 24px / 18px
  • Текст: 16px, line-height 1.5

Компоненты:

  • Карточки с тенью box-shadow: 0 1px 3px rgba(0,0,0,0.1)
  • Кнопки с border-radius: 8px
  • Анимации: transition: all 0.2s ease

4. Требования к безопасности

  • Валидация всех входящих данных на бэкенде
  • Защита от XSS (экранирование вывода)
  • CORS заголовки для API
  • Нет чувствительных данных (пароли, персональные данные)

5. Критерии приёмки

5.1. Функциональность

  • Все 5 блоков работают независимо
  • Задания сохраняются между сессиями
  • Расписание отображается корректно
  • Статистика считается верно
  • Уведомления появляются вовремя

5.2. Юзабилити

  • Интерфейс понятен без инструкций
  • Мобильная версия удобна
  • Добавление задания ≤ 3 кликов
  • Нет «битых» состояний

5.3. Производительность

  • Первая загрузка < 2 сек
  • Отклик на действия < 100 мс
  • Нет утечек памяти

6. Этапы разработки

Этап Срок Результат
1. Вёрстка главной 1 день Dashboard с мок-данными
2. Бэкенд для задач 1 день CRUD заданий + data.json
3. Расписание 0.5 дня Недельный вид
4. Календарь 0.5 дня Месячный вид
5. Прогресс 0.5 дня Графики и статистика
6. Напоминания 0.5 дня Уведомления
7. Тестирование 0.5 дня Фикс багов

Итого: ~4-5 дней на полноценную разработку


7. Будущие улучшения (не в MVP)

  • Авторизация и синхронизация между устройствами
  • Экспорт в Google Calendar
  • Совместные проекты (групповые задания)
  • Интеграция с LMS (Moodle, Canvas)
  • Умные рекомендации (когда лучше учиться)
  • Мобильное приложение (PWA)

8. Контакты и поддержка

Проект учебный, обратная связь через платформу Vibe42.