Архитектурата на нашето приложение
Архитектурата на Grass е проектирана като модерна Single Page Application (SPA), работеща изцяло в браузъра ("Client-to-AI" модел). Това елиминира нуждата от традиционен бекенд и повишава сигурността на личните данни.
Основни технологични компоненти:
Клиентски слой (Frontend): Изграден с React 19, TypeScript и Tailwind CSS. Управлява интерфейса и съхранява данните за родителски контрол локално (в State на браузъра) за максимална бързина.
Интеграционен слой (SDK): Използва Google GenAI SDK за директна връзка между клиента и AI модела, прилагайки "System Instructions" за персона и валидация.
AI Ядро: Google Gemini 2.5 Flash. Моделът извършва когнитивната работа и връща отговорите не като текст, а като структуриран JSON, който приложението автоматично превръща във визуални стъпки.
Поток на данните (Data Flow): User Input ➔ Prompt Engineering (Context + Schema) ➔ Gemini 2.5 Flash ➔ JSON Response ➔ Dynamic UI Rendering.
Data Flow Diagram- Описание на потока от данни
Диаграмата илюстрира хибриден процес на обработка, който разделя личните данни от аналитичните заявки:
Локална защита (Edge AI): Преди данните да напуснат устройството, модулът PII Masking автоматично засича и скрива чувствителна информация (напр. лични данни, карти), за да гарантира пълна поверителност.
AI Навигация: Към външния модел (External AI) се изпраща само анонимизиран контекст. Получените инструкции се визуализират като анимиран слой (Overlay) директно върху екрана на потребителя.
Синхронизация: Системата Wellbeing Monitor изпраща криптирани метаданни за времето към облачна база данни (Cloud DB). Това позволява налагането на унифицирани ограничения едновременно за телефон и компютър.
UX/UI Прототип – визуализации на интерфейса (wireframes, mockups)
Това е wireframe на нашето приложение с най-главните и части.
Естетика на спокойствието
Приложението е проектирано да противодейства на дигиталния стрес. Това личи от няколко ключови решения:
Цветова палитра: В index.html е дефинирана специална палитра nature (зелени нюанси) и earth (земни/бежови нюанси). Тези цветове подсъзнателно асоциират с природа и спокойствие, за разлика от агресивните сини или червени цветове на корпоративните софтуери.
Анимации: Използва се клас .fade-in за плавно появяване на елементите. Това предотвратява резките промени на екрана, които могат да натоварят очите и вниманието.
Тъмен режим (Dark Mode): Има пълна поддръжка на тъмен режим, което е критично за намаляване на напрежението в очите (eye strain) при работа на слаба светлина.
Достъпност и приобщаване
Основната целева група са хора с ниска дигитална грамотност или възрастни хора (споменато в geminiService.ts като "Non-tech savvy seniors").
Големи интерактивни зони: В VisualGuide.tsx иконите са големи (размер 48px), а бутоните са масивни и ясно надписани ("Помощ", "Здраве", "Родител").
Ясна Типография: Използва се шрифтът Inter, който е известен с високата си четимост на екрани.
Език: Инструкциите към AI модела изрично изискват търпелив, окуражаващ, прост език. Избягва се техническият жаргон.
Постепенно разкриване на информация
Това е най-силният UX принцип в компонента VisualGuide.tsx.
Вместо да се покаже дълъг списък с инструкции (което плаши начинаещите), приложението разбива задачата на малки стъпки.
Потребителят вижда само едно действие на екрана.
Има прогрес бар, който дава ясно усещане за напредък и край на задачата. Това намалява тревожността от типа "колко още остава".
Намаляване на когнитивния товар
Предварителни подсказки: В TaskAssistant.tsx има "чипове" с готови въпроси (напр. "Смяна на парола", "Увеличаване на шрифт"). Това помага на потребители, които може да не знаят как точно да формулират въпроса си.
Визуални котви: Всяка стъпка от инструкциите се асоциира с икона (VisualGuide.tsx -> getIcon). Ако текстът казва "Отидете в настройки", потребителят вижда икона на зъбно колело. Това помага за по-бързото разпознаване на елементите в реалния интерфейс на телефона им.
Обратна връзка и състояние на системата
Индикация за зареждане: При заявка към AI се показва Loader2 анимация и бутоните стават неактивни. Потребителят винаги знае, че системата "мисли".
Управление на грешки: Има специален блок за грешки в TaskAssistant, който обяснява проблема на човешки език, вместо да хвърля код на грешка.
Визуализация на данни: В WellbeingDashboard данните не са просто цифри, а са представени чрез графики (recharts) и цветни кодове (зелено за добре, червено за прекаляване), което прави информацията смилаема за секунди.
Емоционален дизайн и "Грижа"
Приложението не е просто инструмент, а "асистент".
В geminiService.ts е зададена "персона" на Grass.
Функцията за анализ на умората (checkDigitalFatigue) дава конкретни съвети и дори предлага бутон "Вземи почивка" с икона на кафе.
Секцията "Grass Mode" в таблото активно насърчава потребителя да спре да използва приложението и да излезе навън – парадоксален, но много ценен UX подход за приложение за благополучие.
В обобщение, кодът показва стремеж към емпатичен интерфейс — такъв, който разбира ограниченията и страховете на потребителя и го води за ръка през дигиталния свят, вместо просто да му предоставя сурови данни.
3.4. Използвани софтуерни технологии и инструменти
Проектът използва унифицирана Full-Stack TypeScript архитектура за максимална ефективност и съвместимост.
-
Клиентска част:
React Native: За изграждане на нативни мобилни приложения (iOS/Android) с една кодова база.
React.js: За уеб-базиран родителски портал и админ панел.
-
AI Ядро:
Google AI Studio (Gemini 1.5 Flash): Използва се за обработка на заявки, анализ на екрани (Vision) и генериране на инструкции с ниска латентност.
-
Сървърна част (Backend):
Node.js & PostgreSQL: За управление на потребители, бази данни и API логика.
WebSockets: За мигновена синхронизация на ограниченията между телефон и компютър в реално време.