ДЗ / практика на використання Blazor

task.md

«Котик-генератор настрою з базою даних»

Мета:
Розробити інтерактивний Blazor-додаток, який допомагає підняти настрій за допомогою милих котиків. Користувач обирає свій настрій, отримує випадкового котика з фразою, може проголосувати за нього, а всі дані (котики та голоси) зберігаються в базі даних.

Технології, які необхідно використати:

• Компоненти Blazor (.razor-файли, параметри, події, вкладені компоненти)
• EditForm + DataAnnotations для валідації
• Ін'єкція залежностей (@inject, scoped-сервіс)
• Entity Framework Core + міграції
• HttpClient або JSInterop (опціонально — для завантаження картинок)
• Життєвий цикл компонентів (OnInitializedAsync)

Завдання

1. Створити модель даних

   Створити клас CatMoodEntry з такими полями:

   • Id (ключ, автоматично генерується)
   • ImageUrl (посилання на картинку котика, обов'язкове)
   • Phrase (текст, який каже котик, 5–150 символів)
   • Mood (перерахування: Happy, Sad, Tired, Angry, Curious тощо)
   • Likes (кількість голосів «підняв настрій», за замовчуванням 0)
   • CreatedAt (дата додавання)

2. Налаштувати базу даних

   • Використати Entity Framework Core
   • Створити DbContext з DbSet
   • Застосувати міграції та створити базу
   • Зареєструвати DbContext як scoped-сервіс у Program.cs

3. Створити сервіс для роботи з даними

   Створити клас CatMoodService (scoped), який:

   • Додає нового котика в базу (AddAsync)
   • Отримує всіх котиків (GetAllAsync)
   • Отримує топ-N котиків за кількістю лайків (GetTopAsync)
   • Збільшує кількість лайків для конкретного котика (LikeAsync)
   • Сповіщає компоненти про зміни (подія OnChange)

4. Реалізувати форму вибору настрою

   Компонент MoodSelector.razor:

   • Поле для вибору настрою (наприклад, InputRadioGroup або Select)
   • Опціональне текстове поле для власної фрази
   • Поле для введення або вибору URL картинки котика (InputText або InputFile*)
   • Кнопка «Дай мені котика!»
   • Валідація: настрій обов'язковий, фраза не довша 150 символів, URL картинки обов'язковий і має починатися з http/https

   Після натискання кнопки:

   • Створюється новий запис у базі
   • Форма очищається
   • Список оновлюється автоматично

5. Показати котика (компонент CatCard.razor)

   Вкладений компонент, який приймає один CatMoodEntry як параметр і показує:

   • Зображення котика (img з src=ImageUrl)
   • Фразу великими літерами
   • Кнопку «❤️ Підняв настрій!» (збільшує лайки)
   • Поточну кількість лайків
   • Настрій та дату додавання

6. Головна сторінка (Index.razor)

   • Показує форму MoodSelector
   • Показує останні 6–8 доданих котиків (або всіх, якщо небагато)
   • Окремий блок «Топ котиків, які підняли настрій» (3–5 найкращих за лайками)*
   • Автоматичне оновлення при додаванні нового котика чи голосуванні

7. Додаткові вимоги (обов'язкові для зарахування)

   • Усі операції з базою — асинхронні (async/await)
   • Використання @inject для сервісів
   • Правильна обробка подій зміни стану (OnChange → StateHasChanged)
   • Картинка котика повинна завантажуватися (перевірте, що URL доступний)

Бонусні завдання (факультативно)

• Додати можливість завантажувати власну картинку з комп'ютера (InputFile + збереження в wwwroot або blob)
• Зробити фільтр «Показати тільки котиків з настроєм X»
• Додати звук «мяу» при голосуванні (JSInterop)
• Захистити від дублювання голосів одним користувачем (наприклад, через cookie або localStorage)

Очікуваний результат

Надіслати:

• Скріншот додатка
• Скріншот бази даних