Начало

Архитектурата на нашето приложение

Архитектурата на 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 архитектура за максимална ефективност и съвместимост.

1. Клиентска част:

React Native: За изграждане на нативни мобилни приложения (iOS/Android) с една кодова база.

React.js: За уеб-базиран родителски портал и админ панел.

2. AI Ядро:

Google AI Studio (Gemini 1.5 Flash): Използва се за обработка на заявки, анализ на екрани (Vision) и генериране на инструкции с ниска латентност.

3. Сървърна част (Backend):

Node.js & PostgreSQL: За управление на потребители, бази данни и API логика.

WebSockets: За мигновена синхронизация на ограниченията между телефон и компютър в реално време.

 

Естетика на спокойствието и Биофилен дизайн (Calming Tech & Biophilic Design)

Тази концепция се противопоставя на агресивния, високо-контрастен дизайн на съвременните социални мрежи, който цели допаминова стимулация.

Философия: Интерфейсът трябва да действа като "дигитална разходка в парка". Той не трябва да изисква внимание, а да успокоява нервната система на потребителя.

Визуален език: Използване на палитри, вдъхновени от природата (Forest, Earth, Sage), които доказано намаляват нивата на кортизол (хормона на стреса). Избягване на чисто черно и чисто бяло в полза на по-меки, "off-white" и тъмносиви нюанси.

Липса на спешност: Премахване на елементи, които създават усещане за неотложност (червени значки за известия, мигащи елементи, таймери за обратно броене).

 

Намаляване на когнитивния товар чрез "Chunking" (Cognitive Load Reduction)

Този принцип адресира проблема с "аналитичната парализа", която изпитват начинаещите потребители, когато видят сложен екран с много опции.

Концепция: Разделяне на информацията на малки, лесно смилаеми частици ("chunks"). Човешкият мозък може да държи в работната си памет само 3 до 5 елемента едновременно.

Еднопосочно внимание: Във всеки един момент на екрана трябва да има само едно главно действие или една инструкция. Всичко останало се скрива или затъмнява.

Линейност: Вместо разклонени менюта, интерфейсът води потребителя по права, линейна пътека (Стъпка 1 -> Стъпка 2 -> Край), елиминирайки страха от "загубване" в навигацията.

 

Емпатичен и "Прощаващ" Интерфейс (Empathic & Forgiving UI)

За разлика от стандартния софтуер, който третира грешките като проблем на потребителя ("Invalid Input"), Grass приема ролята на търпелив наставник.

Психологическа безопасност: Потребителят трябва да се чувства в безопасност да експериментира. Грешките не се наказват с червени екрани или технически жаргон, а се посрещат с конструктивни предложения.

Хуманизиран тон (Tone of Voice): AI персоналността не е енциклопедия, а спътник. Езикът е разговорен, насърчаващ ("Справяш се чудесно", "Да опитаме отново") и изчистен от технократска лексика.

Предвиждане на нуждите: Системата предлага решения преди потребителят да е осъзнал, че има проблем (напр. предлагане на почивка при засичана умора).

 

Приобщаващ дизайн за възрастни (Senior-First Accessibility)

Това надгражда стандартната достъпност (accessibility), като се фокусира специфично върху геронтологичните промени във възприятията.

Визуална яснота: Използване на хипер-четими шрифтове (sans-serif) и високи нива на контраст, но без заслепяване. Иконите са буквални, а не абстрактни (напр. икона на физически ключ за парола, вместо абстрактен катинар).

Моторна толерантност: Интерактивните зони (бутони, линкове) са значително по-големи от стандартите за индустрията, за да компенсират намалената фина моторика или тремор на ръцете.

Разпознаване вместо припомняне: Потребителят никога не трябва да помни какво е направил в предишната стъпка. Информацията трябва да е налична пред очите му ("Визуални котви").

Дизайн на "Не-задържането" (Anti-Retention Design)

Това е най-радикалната концепция в Grass, която противоречи на бизнес модела на повечето приложения.

Цел на взаимодействието: Успехът на приложението се дефинира от това колко бързо потребителят спира да го използва и се връща в реалния свят.

Търкане (Friction) при прекомерна употреба: Вместо да прави скролването безкрайно (infinite scroll), интерфейсът създава изкуствени бариери ("търкане") при продължителна употреба – напомняния за почивка, промяна на цветовата гама към по-уморени тонове или директни призиви за изключване.

Дигитална хигиена: Интерфейсът визуализира времето не като абстрактни цифри, а като ресурс (батерия), който се изчерпва, създавайки ментален модел за пестеливост на екранното време.

 

Събирани данни

 

Данни за времето: Общо време пред екрана, време в активност/неактивност, честота на почивките.

 

Потребителско поведение: Използвани приложения, честота на отваряне на раздела за помощ.

 

Данни за помощта: Видове зададени въпроси към чатбота, успеваемост на предоставените решения, оценки за полезност.

Метрики за умора: Субективна оценка на умората, въведена от потребителя (ако има такава функция).

 

 Използване на данни

 

Персонализиране: Анализиране на времето пред екрана за създаване на индивидуален график за почивки и филтри (напр. по-чести почивки при по-дълги сесии).

 

Подобрение на чатбота: Анализиране на неуспешните запитвания за помощ, за да се добави ново съдържание или да се подобри разбирането на естествения език (Natural Language Processing - NLP).

 

Отчитане: Предоставяне на потребителя на отчети за неговите дигитални навици и напредъка в справянето с умората.

 

Ефективност: Измерване на това колко често потребителите се връщат към ръчна помощ след използване на чатбота.