05

Vite, DOM, Fetch

Сборщик, объектная модель, запросы

Цель: начать освоение работы с асинхронными функциями, DOM, запросами к API с применением TS. Познакомиться с паттерном репозиторий.

Порядок выполнения лабораторной работы

Подготовка

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

git checkout main
git log --reverse
git checkout <SHA-1>

Установите сборщик Vite - npm create vite@latest. Внимательно читайте вопросы, что задает помощник настройки. Вы можете использовать . для создания проекта в текущем каталоге. Вы настраиваете проект для работы с “ванильным JS”, но с использованием TS. Изучите настройки, что предложил Vite для компилятора TS, сравните с тем как вы настраивали проект до этого. Какие отличия нашли, что еще включено у них и на что эти настройки влияют?

Посмотрите в package.json на команды которые вам теперь доступны.

Также обратите внимание на то как работает Vite с TS. Допишите предлагаемую команду для разработки, чтобы ее было проще запускать в отдельном процессе.

Также установите и настройте ESLint c поддержкой TS - npm init @eslint/config@latest. Если внимательно ответить на вопросы при инициализации, то не придется отдельно настраивать ESLint под TS.

Установите также json-server он будет вашей заменой сервера с API. Просмотрите документацию проекта, чтобы примерно знать, что она вам дает.

Реализация

Из третьей лабораторной работы возьмите:

  • тестовые данные и из них создайте файл JSON для json-server;
  • сущности пользователя и курса, они будут основой бизнес-логики вашего приложения.

Модифицируйте ваши существующие классы, добавьте при необходимости новые, чтобы они теперь использовали композицию с репозиториями.

Шаблон “репозиторий” - это шаблон проектирования, который обеспечивает абстрагирование от логики доступа к данным, выступая в качестве посредника между доменом и уровнями отображения данных. Он направлен на отделение операций с базой данных от бизнес-логики в приложениях.

В материале сказано, что оно требуется в больших приложениях, мы делаем исключение в учебных целях.

В репозиториях вы реализуете взаимодействие с REST API, используя Fetch API. Вам потребуется добавлять и удалять пользователей, подумайте над тем относятся ли методы удаления и добавления пользователей/курсов к самим объектам или стоит выделить их в другой класс.

Подумайте над тем как лучше организовать код в файлах.

Подготовьте пользовательский интерфейс в index.html, который позволит добавлять/удалять студентов и преподавателей. Создавать, модифицировать и удалять курсы.

Интерфейс должен быть аккуратным:

  • связанные элементы находятся друг к другу ближе, чем к другим;
  • элементы выровнены;
  • схожие элементы имеют одинаковый размер.

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

Для отрисовки интерфейса можете использовать сигналы, что вы реализовали в прошлом семестре.

Github

Зафиксируйте результаты работы с помощью системы контроля версий git в репозиторий на github. Отправьте коммиты на ваш репозиторий в Classroom.

Требования

  • Реализованы все функции, классы, типы аннотированы.
  • Нет замечаний от ESLint, код компилируется, проект собирается.

Результат выполнения

Код удовлетворяющий требованиям, сохраненный в коммите в отдельной ветке на удаленном репозитории.

Источники для занятия

Основные источники по TS

Вопросы для защиты

  1. Шаблон репозиторий
  2. Аннотации типов для асинхронных функций, promise
  3. Утверждения типов и их применение при работе с DOM и десериализацией
  4. REST API
  5. Работа с ошибками в коде и TS
Предыдущая Следующая