PetCare_Фронтенд_простыми_словами

1.

Фронтенд PetCare
Как устроен сайт
и как понимать его код
1 / 31

2.

Что делает фронтенд
Показывает страницы и данные питомцев.
Принимает ввод, нажатия и фотографии.
Отправляет запросы серверу и показывает результат.
frontend/src/data.js
2 / 31

3.

Один пример целиком
1. Человек вводит имя питомца.
2. Нажимает «Сохранить».
3. Сайт отправляет данные серверу.
4. Сервер сохраняет их, сайт обновляет список.
frontend/src/App.jsx
3 / 31

4.

Карта папки frontend
src — страницы, действия и оформление.
public — готовые картинки и файлы сайта.
vendor/pixel-pets — движок животных.
scripts — проверки интерфейса в браузере.
frontend/package.json
4 / 31

5.

Файлы бывают разными
JS и JSX описывают поведение сайта.
CSS задаёт внешний вид.
TSX содержит компоненты с проверкой типов.
JSON хранит настройки и списки.
frontend/src/main.jsx
5 / 31

6.

С чего запускается сайт
index.html даёт место для приложения.
main.jsx подключает оформление и тему.
Затем React показывает App.jsx.
frontend/src/main.jsx
6 / 31

7.

App.jsx управляет основными экранами
Хранит выбранного питомца и страницу.
Открывает формы и настройки.
Загружает данные аккаунта.
Связывает общие действия приложения.
frontend/src/App.jsx
7 / 31

8.

Компонент — часть экрана
Кнопка, форма и карточка могут быть компонентами.
Им передают нужные данные.
Один компонент используют в разных местах.
frontend/src/components/pet.jsx
8 / 31

9.

Три записи React, которые встретятся часто
useState — хранит текущее значение на экране.
useEffect — выполняет действие при изменении условий.
useRef — держит ссылку или служебное значение.
frontend/src/App.jsx
9 / 31

10.

data.js связывает сайт с сервером
api("state") читает дневник аккаунта.
api("pets/save", данные) сохраняет питомца.
api("records/save", данные) сохраняет запись.
При ошибке показывает понятную причину.
frontend/src/data.js
10 / 31

11.

Данные экрана и данные базы
Поле ввода сначала меняет состояние формы.
Кнопка «Сохранить» отправляет его серверу.
После успеха сайт перечитывает свежие данные.
frontend/src/App.jsx
11 / 31

12.

Вход и пробный просмотр
Личный аккаунт использует логин и пароль.
Сервер хранит постоянные данные владельца.
Демо создаёт отдельную временную копию.
Токен демо относится к конкретной вкладке.
frontend/src/components/auth.jsx
12 / 31

13.

Пять основных разделов
Питомцы — выбор животного и его профиль.
Медкарта — здоровье и история приёмов.
Питание — корм и реакция на него.
Календарь — запланированные дела.
Поиск — ответы по дневнику.
frontend/src/App.jsx
13 / 31

14.

Создание питомца
Форма хранит имя и выбранное животное.
Редактор меняет его внешность.
Дополнительные данные можно заполнить позже.
Сохранение передаёт всё в pets/save.
frontend/src/components/avatar-editor.jsx
14 / 31

15.

Из чего состоит пиксельный питомец
Вид задаёт форму тела.
Настройки задают цвета, узор и аксессуары.
Движок рисует кадр на canvas.
Позы меняют рисунок во времени.
frontend/vendor/pixel-pets/src/index.js
15 / 31

16.

Фото и ручная раскраска
avatar-photo.jsx помогает подобрать окрас по фото.
avatar-painter.jsx позволяет рисовать вручную.
avatar-tools.js содержит расчёты редактора.
Изменения внешности сохраняются в данных питомца.
frontend/src/components/avatar-photo.jsx
16 / 31

17.

Питомец внизу экрана
Персонажа можно взять мышью или пальцем.
Пока его держат, меняется состояние.
После отпускания он падает и отскакивает.
Затем продолжает движение.
frontend/src/companion.js
17 / 31

18.

Медкарта и питание
Медкарта хранит отдельные записи о здоровье.
Питание отдельно хранит вкус и порцию.
«Понравилось» и «переносится хорошо» различаются.
Общие формы используют одинаковые поля.
frontend/src/components/care-fields.jsx
18 / 31

19.

Календарь и колокольчик
Календарь показывает дела по датам.
Колокольчик открывает ближайшие напоминания.
Выполнение меняет запись на сервере.
ICS позволяет перенести события в другой календарь.
frontend/src/components/reminders-popover.jsx
19 / 31

20.

Поиск читает дневник выбранного питомца
Человек вводит вопрос.
Сайт отправляет question и petId.
Сервер возвращает ответ и источники.
Сайт позволяет открыть исходные записи.
frontend/src/App.jsx
20 / 31

21.

Публичная QR-карточка
Нашедший открывает её без регистрации.
Видит инструкции и контакты владельца.
Кнопка звонка использует tel-ссылку.
Личный дневник остаётся закрытым.
frontend/src/components/public-tag.jsx
21 / 31

22.

Сообщение нашедшего с фотографией
Сайт готовит фото подходящего размера.
Человек проверяет адрес, текст и фото.
После подтверждения сервер сохраняет отчёт.
Владелец читает его в управлении меткой.
frontend/src/image-upload.js
22 / 31

23.

Как фронтенд связан с Telegram
Настройки запрашивают одноразовую ссылку.
Пользователь открывает её и запускает бота.
Сервер связывает аккаунт с чатом.
Дальнейшие уведомления отправляет backend.
frontend/src/App.jsx
23 / 31

24.

Где менять внешний вид
theme.css задаёт цвета и переменные.
app.css задаёт основную раскладку.
game-ui.css и panels.css оформляют рамки.
visual.css уточняет итоговые размеры и правила.
frontend/src/visual.css
24 / 31

25.

Общие элементы интерфейса
ui/button.tsx — кнопка.
ui/input.tsx и textarea.tsx — ввод текста.
ui/dialog.tsx и sheet.tsx — окна.
ui/native-select.tsx — собственный список выбора.
frontend/src/components/ui/native-select.tsx
25 / 31

26.

Адаптация к телефону
Сетки перестраиваются под ширину окна.
Поля и панели могут сжиматься.
Длинные слова переносятся.
Нижнее меню сохраняет отдельное место каждому слову.
frontend/src/visual.css
26 / 31

27.

Файлы, которые помогают собрать сайт
package.json перечисляет библиотеки и команды.
package-lock.json закрепляет их версии.
vite.config.js настраивает сборку и dev-сервер.
font-assets.js готовит локальные шрифты.
frontend/vite.config.js
27 / 31

28.

Проверки перед публикацией
Тесты проверяют отдельные расчёты.
Браузерные сценарии открывают настоящий интерфейс.
Проверяются две темы и несколько ширин.
После GitLab нужна отдельная публикация на Spirit.
frontend/scripts/product-ui-check.mjs
28 / 31

29.

Как найти нужное место в коде
Текст кнопки или заголовок помогает найти компонент.
Обработчик onClick показывает действие.
Вызов api показывает запрос серверу.
Имя CSS-класса помогает найти оформление.
frontend/src/App.jsx
29 / 31

30.

Что рассказать на защите
«Мы разделили страницы, общие элементы и расчёты».
«Данные аккаунта сохраняет сервер».
«Демо даёт каждому посетителю свою копию».
«Мы проверяем интерфейс в разных размерах».
frontend/src/data.js
30 / 31

31.

Порядок самостоятельного чтения
1. main.jsx и структура frontend.
2. App.jsx и один знакомый экран.
3. data.js и один запрос сохранения.
4. Компоненты формы и CSS этого экрана.
5. Тест, который проверяет этот сценарий.
frontend/src/main.jsx
31 / 31