Фронтенд-проект

Этот проект представляет собой интеллектуальную систему мониторинга и прогноза автобусного трафика в реальном времени, основанную на анализе собранных данных (геолокация, количество пассажиров и т.д.).

Цель проекта:

• визуализировать текущие позиции автобусов на интерактивной карте
• предсказывать вероятное количество пассажиров на определённой линии и в определённое время

Бэкенд полностью разработан (Java + Flask + MySQL + ML-модель). Ваша задача как фронтенд-разработчика — создать интуитивно понятный, интерактивный и современный веб-интерфейс, который взаимодействует с этим бэкендом.

Endpoint 1: /transport/data

• Метод: GET
• Описание: Получить 200 последних позиций автобусов
• Ответ (JSON): см. изображение 1.1

 Endpoint 2: /transport/forecast?routeId=35&hour=10

• Метод: GET
• Описание: Прогноз количества пассажиров на указанной линии в указанное время
• Параметры:
• routeId (int): номер маршрута
• hour (int): час будущего прогноза (0–23)
• Ответ (JSON): см. изображение 1.2

Значение прогнозируется ML-моделью (работает через Python Flask API, не вызывается напрямую с фронтенда).

1. Карта с автобусами (интерактивная)

• Использовать библиотеку (Leaflet.js, Mapbox, Google Maps)
• Получить данные из /transport/data
• Показать автобусы с:

1. позицией (lat/lon)
2. номером маршрута
3. количеством пассажиров
4. последним обновлением

2. Форма для прогноза

• Поля:

1. routeId (ввод или список маршрутов)
2. hour (слайдер или числовое поле)

• Кнопка «Предсказать»
• Отображение результата: "Прогноз: 67.5 пассажиров" (Например)

• HTML5, CSS3, JavaScript (ES6+)
• Фреймворк (необязательно): Vue.js, React.js или чистый JS
• Библиотеки:
• leaflet.js (легкий и бесплатный)
• fetch / axios для API-запросов
• Bootstrap или Tailwind CSS для UI

Обязательно передай точные URL для локального подключения:

http://localhost:8080/transport/data

http://localhost:8080/transport/forecast?routeId=35&hour=10 (Например)

• Фронтенд работает только с Java API (localhost:8080)
• Flask-сервер не вызывается напрямую (используется внутри Java)
• Все данные — в формате JSON
• Аутентификация не требуется (разработка в локальном режиме)

Note: "Я не очень разбираюсь в java. После выполнения задания вы должны объяснить мне, как запустить программу на компьютере. Пожалуйста, не давите на меня, чтобы я завершил заказ. Вы получите деньги."