🅰️ День 5 (часть 2)

Пошаговый план реализации PWA-приложения «Autopark»

Этап 1: Инфраструктура, Модели и API-клиент

  • Шаг 1.1: Генерация проекта с отключенным Zone.js (ng new autopark-pwa --zoneless) и подключение пакета @angular/pwa для генерации сервис-воркера и манифеста.
  • Шаг 1.2: Создание строгих интерфейсов данных на основе предоставленного API-ответа (AutoparkResponse, Project, CarItem).
  • Шаг 1.3: Написание AutoparkHttpClientService на базе встроенного HttpClient, инкапсулирующего методы checkUser() и checkPassword().

Этап 2: Жесткий рубеж безопасности (Роутинг и Гварды)

  • Шаг 2.1: Настройка конфигурации app.routes.ts с поддержкой Component Input Binding для автоматического маппинга параметров путей (:tg_chat_id, :project_id) в сигналы.
  • Шаг 2.2: Написание функционального authGuard (CanActivateFn). Он будет вызывать API /check-user, анализировать флаг ok и, в случае неуспеха, делать редирект на /auth/login с автоматическим заполнением query-параметров ?from=.

Этап 3: Экран авторизации (4-значный ПИН-код)

  • Шаг 3.1: Реализация standalone-компонента страницы входа.
  • Шаг 3.2: Создание формы ввода пин-кода с использованием ReactiveFormsModule или Signals-биндинга. Обработка ошибок некорректного пароля и редирект назад на страницу гаража при "ok": true.

Этап 4: Главный экран гаража и Каскадные селекторы создания авто

  • Шаг 4.1: Отрисовка списка текущих автомобилей пользователя (projects) с использованием встроенного цикла @for и блока @empty для пустых состояний.
  • Шаг 4.2: Проектирование реактивной формы создания машины с каскадными асинхронными запросами:
    1. Селектор Бренд (при изменении триггерит поток).
    2. Селектор Модель (отображается в виде интерактивной плитки с картинками, данные подтягиваются на лету через switchMap).
    3. Селекторы Трансмиссия (статический выбор: MT/AT/AMT/CVT) и Год (вычисляемый диапазон из ответа API моделей).

НазадПереезд на Angular 20+ (день 5 часть 1/2)