Thodle — образовательная платформа для студентов, построенная как кроссплатформенное приложение (Android через Tauri). Приложение хранит данные студентов (группа, факультет, кластер, университет) и предоставляет расписания, уведомления и опросы. Архитектура поддерживает работу с несколькими университетами одновременно и интеграцию с внешними сервисами через API.
| Слой | Стек |
|---|---|
| Frontend | Svelte 5 (runes), SvelteKit, TypeScript |
| Стили | Tailwind CSS v4, shadcn-svelte (стиль «nova»), oklch-палитра |
| UI-компоненты | Bits UI, Lucide Icons, mode-watcher, runed, svelte-toolbelt |
| Desktop/Mobile | Tauri v2 (Android-билды через tauri android build) |
| Бандлер | Vite v8, Bun как runtime |
| Линтер/форматтер | Biome v2 |
| Шрифты | Geist Mono Variable |
thodle-app/
├── src/
│ ├── components/
│ │ └── ui/ # Переиспользуемые UI-компоненты (shadcn-svelte)
│ │ ├── alert/ # Alert с заголовком, описанием, действием
│ │ ├── alert-dialog/ # Модальный диалог подтверждения
│ │ ├── avatar/ # Аватар с fallback и badge
│ │ ├── badge/ # Бейдж-метка
│ │ ├── button/ # Кнопка с вариантами (default, ghost, outline…)
│ │ ├── card/ # Карточка (header, content, footer, actions)
│ │ ├── checkbox/ # Чекбокс
│ │ ├── dialog/ # Модальный диалог
│ │ ├── field/ # Группа полей формы (label, error, description)
│ │ ├── input/ # Текстовое поле ввода
│ │ ├── item/ # Элемент списка (media, title, actions…)
│ │ ├── label/ # Лейбл
│ │ ├── radio-group/ # Группа радиокнопок
│ │ ├── separator/ # Разделитель
│ │ ├── textarea/ # Многострочное поле
│ │ └── toggle-group/# Переключатель (single/multiple)
│ ├── lib/
│ │ ├── app.svelte.ts # Глобальный App-класс (setContext/getContext, data-path атрибут)
│ │ ├── eruda.ts # Ленивая загрузка Eruda (devtools для мобильных)
│ │ └── utils.ts # Утилиты: cn() (clsx + tailwind-merge), типы
│ ├── routes/ # SvelteKit-роуты (SPA-режим)
│ │ ├── +layout.svelte # Корневой лейаут: ModeWatcher, Nav, safe-area
│ │ ├── +layout.ts # ssr = false (Tauri не имеет Node.js SSR)
│ │ ├── +page.svelte # Главная страница (пока заглушка с датой)
│ │ ├── profile/ # Профиль студента (аватар, ФИО, кнопка настроек)
│ │ ├── schedule/ # Расписание (в разработке)
│ │ ├── settings/ # Настройки (в разработке)
│ │ └── university/ # Информация об университете (в разработке)
│ ├── sections/
│ │ └── nav.svelte # Нижняя навигация (4 вкладки + alert при недоступности)
│ └── styles/
│ └── index.css # Tailwind-директивы, CSS-переменные (oklch), safe-area
├── src-tauri/
│ ├── capabilities/ # Tauri-капабилити (права доступа)
│ ├── icons/ # Иконки приложения (32–128px, icns, ico)
│ ├── src/
│ │ ├── lib.rs # Tauri Builder: plugins (haptics, opener), команда greet
│ │ └── main.rs # Точка входа (windows_subsystem для release)
│ ├── Cargo.toml # Rust-зависимости: tauri v2, serde, plugins
│ └── tauri.conf.json # Конфиг Tauri: окно, bundle, Android (minSdk 24)
├── static/ # Статические файлы (favicon, avatar.jpg…)
├── biome.json # Biome: форматирование (4 пробела, single quotes), lint
├── components.json # shadcn-svelte: алиасы, стиль nova, baseColor mist
├── svelte.config.js # adapter-static (fallback: index.html), алиасы
├── tsconfig.json # TypeScript: strict, bundler moduleResolution
└── vite.config.js # Vite: Tailwind, SvelteKit, oxc minify, lightningcss
Tauri не предоставляет Node.js-сервер для SSR, поэтому приложение работает в режиме SPA. @sveltejs/adapter-static с fallback: 'index.html' генерирует единственный HTML-файл, а маршрутизация обрабатывается на клиенте.
Весь код написан с использованием Svelte 5 runes ($state, $effect, $props), что обеспечивает реактивность без stores в большинстве случаев.
CSS-переменные --space-safe-top/bottom/left/right учитывают env(safe-area-inset-*) для корректного отображения на устройствах с вырезами и скруглениями. Tailwind-утилиты pt-area-top, pl-area-left и т.д. применяют эти отступы.
Нижняя панель навигации (sections/nav.svelte) содержит 4 кнопки:
- Главная (
/) — активна - Расп-ние (
/schedule) — в разработке - АГУ (
/university) — в разработке - Профиль (
/profile) — активна
Неактивные разделы показывают Alert-диалог «Пока недоступно» с haptic feedback.
Поддержка светлой и тёмной темы через mode-watcher. CSS-переменные определены в oklch-пространстве для лучшей перцептивной равномерности.
- Bun (рекомендуется как runtime для npm-скриптов)
- Rust (для Tauri)
- Tauri CLI (
bunx tauriилиcargo install tauri-cli) - Для Android: Android SDK, NDK, Java 17+
# Установка зависимостей
bun install
# Dev-сервер (Vite, порт 1420)
bun run dev
# Проверка типов
bun run check
# Проверка линтером
bunx biome check .
# Сборка (Vite → build/)
bun run build
# Превью собранного
bun run preview
# === Tauri / Android ===
# Запуск в режиме разработки Tauri
bun run tauri dev
# Сборка APK (universal, aarch64 + armv7)
bun run build:android
# Полная цепочка: очистка → сборка → zipalign → подпись
bun run build:appДля подписи используется keystore thodle.keystore. Команда build:sign запускает apksigner с этим keystore. Для продакшена замените на собственный keystore.
- Интеграция с API для получения данных студентов
- Расписание занятий и экзаменов
- Уведомления (push через внешние сервисы)
- Опросы (в т.ч. таргетированные по группе/факультету/кластеру)
- Аналитика и дашборды
- Поддержка нескольких университетов
- Telegram Mini App версия
- Чат-бот интеграция
MIT