Skip to content

basalaevaa/web-larek-frontend

BranchesTags

Repository files navigation

Яндекс.Практикум: Проектная работа "Веб-ларек"

Стек: HTML, SCSS, TypeScript, Webpack

Файловая структура проекта

  • src/ — исходные файлы проекта, модули слоя приложения
  • src/common.blocks/ - файлы стилей для блоков
  • src/images/ - изображения
  • src/pages/ - файлы html
  • src/public/ - файлы, необходимые для сборки приложения
  • src/scss/ - общие файлы стилей
  • src/vendor/ - сторонние пакеты
  • src/types/ - типы, используемые приложением
  • src/utils/ - вспомогательные функции и классы
  • src/components/ - исходные файлы TypeScript, валидация, управление состоянием
  • src/components/common/ - общие файлы, отвечающие за модели и представление
  • src/components/base/ - базовые классы для функциональности проекта

Важные файлы:

  • src/pages/index.html — HTML-файл главной страницы
  • src/styles/styles.scss — корневой файл стилей
  • src/index.ts — точка входа приложения ─ README.md # Документация по проекту

Установка и запуск

Для установки и запуска проекта необходимо выполнить команды

npm install
npm run start

или

yarn
yarn start

Окружение

Для правильной сборки проекта необходимо задать переменную окружения API_ORIGIN

Сборка

npm run build

или

yarn build

Архитектура MVP веб-приложения "Web-Larek"

Описание

MVP (Model-View-Presenter) - это архитектурный шаблон, который разделяет приложение на три основных компонента: модель (Model), представление (View) и презентер (Presenter). Этот шаблон помогает разделить логику приложения, пользовательский интерфейс и данные.

Компоненты

  1. Модель (Model)

    • Отвечает за управление данными и бизнес-логикой приложения.
    • Содержит классы, структуры и методы для работы с данными.
    • Не зависит от пользовательского интерфейса.

  2. Представление (View)

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

  3. Презентер (Presenter)

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

Связи между компонентами

  • Модель и Презентер:

    • Презентер запрашивает данные у модели и обновляет ее при необходимости.
    • Модель оповещает презентер о любых изменениях данных.

  • Презентер и Представление:

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

  • Модель и Представление:

    • Модель не зависит от представления и не имеет прямого взаимодействия с ним.
    • Представление обновляет себя на основе данных, полученных от презентера.

Базовый код

Класс Api

  • Свойства класса

    -baseUrl: базовый URL для API запросов.

    тип данных - string

    -options: настройки для выполнения HTTP-запросов.

    тип данных - RequestInit

  • Конструктор

    -constructor(baseUrl: string, options: RequestInit = {})

    аргументы, принимаемые на вход

    • baseUrl
    • options

  • Методы класса

    -protected async handleResponse(response: Response): Promise<object>: обрабатывает ответ от сервера.

    аргументы, принимаемые на вход

    • response
    • options - ответ HTTP-запроса.

    -async get(uri: string): выполняет HTTP GET-запрос по указанному URI.

    аргументы, принимаемые на вход

    • строка uri
    • options

    -async post(uri: string, data: object, method: ApiPostMethods = 'POST'): Выполняет HTTP POST-запрос по указанному URI с переданными данными.

    аргументы, принимаемые на вход

    • строка uri
    • объект с данными запроса data
    • HTTP-метод, который будет использован для запроса method

Класс EventEmitter

  • Свойства класса

    -_events: все поступающие в обработку события.

    тип данных - Map<EventName, Set<Subscriber>>

  • Конструктор

    -constructor().

    аргументы, принимаемые на вход - не принимает аргументы на вход.

  • Методы класса

    -on<T extends object>(eventName: EventName, callback: (event: T) => void): устанавливает обработчик на событие.

    аргументы, принимаемые на вход

    • имя события eventName
    • функция, которая будет вызвана при возникновении события callback: (data: T) => void

    -off(eventName: EventName, callback: Subscriber): снимает обработчик с события.

    аргументы, принимаемые на вход

    • eventName
    • callback: (data: T) => void

    -emit<T extends object>(eventName: string, data?: T): инициирует событие с данными.

    аргументы, принимаемые на вход

    • eventName
    • данные, которые будут переданы обработчикам события data

    -onAll(callback: (event: EmitterEvent) => void): слушает все события.

    аргументы, принимаемые на вход

    • callback.

    -offAll(): сбрасывает все обработчики

    -trigger<T extends object>(eventName: string, context?: Partial<T>): создает триггер для генерации события при вызове.

    аргументы, принимаемые на вход

    • имя события eventName
    • контекст, который будет объединен с данными события context.

Абстрактный класс Component

Базовый класс для компонентов интерфейса. Класс является дженериком и принимает в переменной T тип данных, которые могут быть переданы в метод render для отображения. В поле container хранит ссылку на DOM-элемент, за отображение которого он отвечает.

  • Свойства класса

    -container: HTMLElement

    тип данных - HTMLElement

  • Конструктор

    -constructor(container: HTMLElement)

    аргументы, принимаемые на вход

    • корневой DOM - элемент HTMLElement

  • Методы класса

    -toggleClass(element: HTMLElement, className: string, force?: boolean): преключает классы у элемента.

    аргументы, принимаемые на вход

    • элемент, у которого нужно переключить класс element: HTMLElement
    • имя класса className: string
    • force (опционально): boolean удалит или добавит класс.

    -setText(element: HTMLElement, value: unknown): устанавливает текстовое содержимое.

    аргументы, принимаемые на вход

    • элемент, текст которого надо задать
    • сам текст value: unknown

    -setDisabled(element: HTMLElement, state: boolean): меняет статус блокировки элемента.

    аргументы, принимаемые на вход

    • элемент, состояние блокировки которого надо изменить element: HTMLElemen
    • поставить блокировку (true) или снять блокировку (false) state: boolean

    -setHidden(element: HTMLElement): скрывает элемент.

    аргументы, принимаемые на вход

    • эоемент, который нужно скрыть element: HTMLElement

    -setVisible(element: HTMLElement): показывает элемент.

    аргументы, принимаемые на вход

    • элемент, который надо показать element: HTMLElement.

    -setImage(element: HTMLImageElement, src: string, alt?: string): устанавливает изображение и альтернативный текст для элемента.

    аргументы, принимаемые на вход

    • элемент, для которого это нужно сделать element: HTMLElement
    • URL источника изображения src: string
    • альтернативный текст для изображения alt (опционально): string .

    -render(data?: Partial<T>): HTMLElement: возвращает корневой DOM-элемент со всеми данными.

    аргументы, принимаемые на вход

    • данные для элемента data (опционально): Partial<T>.

Основной код

Класс ApiService

Отвечает за взаимодействие с серверным API. Он предоставляет методы для отправки HTTP-запросов и получения данных о продуктах, а также для отправки заказов.

  • Свойства класса

    -_api: экземпляр класса Api, используемый для выполнения HTTP-запросов.

    тип данных - Api

  • Конструктор

    -constructor(apiUrl: string, cdnUrl: string)

    аргументы, принимаемые на вход:

    • apiUrl: URL для API-сервера.
    • cdnUrl: URL для CDN-сервера, используемого для получения изображений продуктов.

  • Методы класса

    -getProducts(): Promise<Product[]>: получает список продуктов с сервера.

    аргументы, принимаемые на вход - не принимает аргументы на вход.

    возвращаемое значение - Promise<Product[]>: обещание, которое разрешается списком продуктов, где каждое изображение продукта дополнено cdnUrl.

    -getProduct(id: ProductId): Promise<Product>: получает продукт по идентификатору.

    аргументы, принимаемые на вход

    • идентификатор продукта ProductId id

    возвращаемое значение - Promise<Product>: обещание, которое разрешается объектом продукта, где изображение продукта дополнено cdnUrl.

    -sendOrder(order: Order): Promise<SentOrder>: отправляет заказ на сервер.

    аргументы, принимаемые на вход

    • объект заказа Order order

    возвращаемое значение - Promise<SentOrder>: обещание, которое разрешается объектом отправленного заказа SentOrder, включающим идентификатор и итоговую сумму заказа.

Класс HomePage

Отвечает за отображение главной страницы приложения и управление ее состоянием

  • Свойства класса

    -_headerCounter: элемент для отображения счетчика в заголовке.

    тип данных - HTMLElement

    -_gallery: элемент для отображения галереи.

    тип данных - HTMLElement

    -_headerBasket: элемент для корзины в заголовке.

    тип данных - HTMLElement

    -_wrapper: элемент-обертка страницы.

    тип данных - HTMLElement

  • Конструктор

    -constructor(events: IEvents)

    аргументы, принимаемые на вход

    • экземпляр интерфейса IEvents для обработки событий events

  • Методы класса

    -set counter(value: number): устанавливает значение счетчика в заголовке.

    аргументы, принимаемые на вход

    • значение счетчика number value

    -set gallery(items: HTMLElement[]): обновляет содержимое галереи.

    аргументы, принимаемые на вход

    • массив элементов HTMLElement[] items

    -set locked(value: boolean): блокирует или разблокирует элемент-обертку страницы.

    аргументы, принимаемые на вход

    • значение блокировки boolean value

Класс Modal

Управляет модальным окном в приложении, отображая его и скрывая по необходимости.

-Свойства класса

  • _closeButton: кнопка закрытия модального окна.

    тип данных: HTMLButtonElement

  • _content: элемент для отображения содержимого модального окна.

    тип данных - HTMLElement

  • Конструктор

  • constructor(events: IEvents)

    аргументы, принимаемые на вход

    • events - экземпляр интерфейса IEvents для обработки событий

-Методы класса

  • set content(value: HTMLElement): устанавливает содержимое модального окна.

    аргументы, принимаемые на вход

    • value- содержимое модального окна HTMLElement

  • open(): открывает модальное окно.

    аргументы, принимаемые на вход - не принимает аргументы на вход.

  • close(): закрывает модальное окно.

    аргументы, принимаемые на вход - не принимает аргументы на вход.

  • render(data: IModal): HTMLElement: рендерит модальное окно с заданным содержимым и открывает его.

    аргументы, принимаемые на вход

    • data: данные для рендера IModal

    возвращаемое значение: HTMLElement: контейнер модального окна.

Класс Order

Управляет заказом и его формой.

-Свойства класса

  • _submitButton: кнопка отправки формы.

    тип данных: HTMLButtonElement

  • _formErrors: элемент для отображения ошибок формы.

  • тип данных - HTMLElement

  • _form: HTML-форма для заказа.

  • тип данных: HTMLFormElement

-Конструктор

  • constructor(templateId: string)

    аргументы, принимаемые на вход

    • templateId- идентификатор шаблона для клонирования.

-Методы класса

  • set validation(value: IOrder['validation']): устанавливает валидацию формы. аргументы, принимаемые на вход

    • value- объект валидации Validation

  • set submitDisabled(value: boolean): включает или отключает кнопку отправки формы. аргументы, принимаемые на вход

    • value- флаг отключения кнопки boolean

Класс OrderPayment

Управляет выбором метода оплаты заказа.

-Свойства класса

  • _buttonCard: кнопка выбора оплаты картой.

    тип данных: HTMLButtonElement

  • _buttonCash: кнопка выбора оплаты наличными.

    тип данных: HTMLButtonElement

  • _addressInput: поле ввода адреса.

    тип данных: HTMLInputElement

  • _events: объект для работы с событиями.

    тип данных: IEvents

-Конструктор

  • constructor(events: IEvents)

    аргументы, принимаемые на вход

    • events- объект для работы с событиями IEvents

-Методы класса

  • set payment(value: IOrder['payment']): устанавливает метод оплаты.

    аргументы, принимаемые на вход

    • value- метод оплаты card или cash

Класс OrderContacts

Управляет контактными данными для заказа.

-Свойства класса

  • _emailInput: поле ввода email.

    тип данных: HTMLInputElement

  • _phoneNumberInput: поле ввода номера телефона.

    тип данных: HTMLInputElement

  • _events: объект для работы с событиями.

    тип данных: IEvents

-Конструктор

  • constructor(events: IEvents)

    аргументы, принимаемые на вход

    • events- объект для работы с событиями IEvents

-Методы класса

  • _dataInput(type: string, ev: Event): обрабатывает ввод данных и генерирует соответствующее событие.

    аргументы, принимаемые на вход

    • type- тип данных
    • ev- событие ввода Event

Класс Basket

Реализует корзину, позволяет отображать элементы корзины, общую стоимость.

-Свойства класса

  • _items: элемент для отображения списка товаров в корзине.

    тип данных: HTMLElement

  • _total: элемент для отображения общей стоимости товаров в корзине.

    тип данных: HTMLElement

  • _submitButton: кнопка для оформления заказа.

    тип данных: HTMLButtonElement

-Конструктор

  • constructor(events: IEvents)

    аргументы, принимаемые на вход

    • events- объект для работы с событиями IEvents.

-Методы класса

  • set items(items: HTMLElement[]): устанавливает элементы корзины и управляет состоянием кнопки для оформления заказа.

    аргументы, принимаемые на вход

    • items- массив элементов HTMLElement[].

  • set total(value: number): устанавливает общую стоимость товаров в корзине.

    аргументы, принимаемые на вход

    • общая стоимость value

Класс Product

-Свойства класса

  • _image: изображение продукта.

    тип данных: HTMLImageElement

  • _title: название продукта.

    тип данных: HTMLElement

  • _category: категория продукта.

    тип данных: HTMLElement

  • _price: цена продукта.

    тип данных: HTMLElement

-Конструктор

  • constructor(templateId: string)

    аргументы, принимаемые на вход

    • templateId- идентификатор шаблона для клонирования

-Методы класса

  • render(model: IProduct): рендерит данные продукта.

    аргументы, принимаемые на вход

    • model - модель данных продукта IProduct.

  • set title(value: string): устанавливает название продукта.

    аргументы, принимаемые на вход

    • value- название продукта

  • set image(value: string): устанавливает изображение продукта.

    аргументы, принимаемые на вход

    • value- путь к изображению продукта

  • set category(value: string): устанавливает категорию продукта.

    аргументы, принимаемые на вход

    • value- категория продукта

  • set price(value: string): устанавливает цену продукта.

    аргументы, принимаемые на вход

    • value- цена продукта

  • set categoryClass(value: string): устанавливает класс категории продукта.

    аргументы, принимаемые на вход

    • value- класс категории продукта

Класс ProductCard

-Свойства класса

  • _description: описание продукта.

    тип данных: HTMLElement

  • _toBasketButton: кнопка для добавления в корзину.

    тип данных: HTMLButtonElement

-Конструктор

  • constructor(events: Pick<ProductEvents, 'toggleBasket'>)

    аргументы, принимаемые на вход

    • events- объект событий для обработки добавления продукта в корзину

-Методы класса

  • set description(value: string): устанавливает описание продукта.

    аргументы, принимаемые на вход

    • value- описание продукта

  • set isInBasket(inBasket: boolean): устанавливает состояние кнопки добавления в корзину.

    аргументы, принимаемые на вход

    • inBasket- проверяет, находится ли продукт в корзине

Класс BasketProduct

-Свойства класса

-_itemIndex: индекс продукта в корзине.

тип данных: HTMLElement

-_deleteFromBasketButton: кнопка для удаления из корзины.

тип данных: HTMLElement

-Конструктор

-constructor(events: Pick<ProductEvents, 'onDeleteClick'>): инициализирует новый экземпляр класса BasketProduct.

аргументы, принимаемые на вход

  • events - объект событий для обработки удаления продукта из корзины

-Методы класса

-set itemIndex(value: number): устанавливает индекс продукта в корзине.

аргументы, принимаемые на вход

  • индекс продукта value

Класс SuccessOrder

Отвечает за успешное оформление заказа

-Свойства класса

-_description: элемент для отображения описания успешного заказа.

тип данных: HTMLElement

-_closeButton: кнопка для закрытия сообщения об успешном заказе.

тип данных: HTMLButtonElement

-Конструктор

-constructor(events: IEvents): инициализирует новый экземпляр класса SuccessOrder.

аргументы, принимаемые на вход

  • events - объект для работы с событиями IEvents.

-Методы класса

-set description(value: number): устанавливает описание успешного заказа.

аргументы, принимаемые на вход

  • описание успешного заказа - итоговая cумма value .

Интерфейсы и типы данных

  • IEvents: Интерфейс для управления событиями в приложении.

  • Product: Интерфейс для описания продукта.

  • ApiListResponse: Обобщенный тип для описания ответа от сервера с коллекцией элементов.

  • ApiPostMethods: Тип данных для описания методов HTTP-запросов (POST, PUT, DELETE).

  • ApiResponse: Интерфейс для описания ответа от сервера.

  • IHomePage: Интерфейс для описания основных данных главной страницы.

Основные события в приложении

  • Инициализация

Создаются экземпляры различных компонентов: EventEmitter, ApiService, HomePage, Modal, BasketState, OrderState, Basket, OrderPayment, OrderContacts, SuccessOrder.

  • Рендеринг продуктов

apiService.getProducts() - загружает список продуктов с сервера.

renderProduct - функция рендерит каждый продукт для отображения на главной странице.

renderProductCard - функция отображает карточку продукта при клике на продукт в каталоге.

  • Bзаимодействиe с другими продуктами

events.on('product', ({ product }) => renderProductCard(product)) — обработка события клика на продукт для отображения его карточки.

events.on('deleteProduct', ({ product, basket }) => { ... }) — обработка события удаления продукта из корзины.

events.on('basketOpen', () => { ... }) — обработка события открытия корзины.

events.on('basketOrder', () => { ... }) — обработка события начала оформления заказа.

  • Обработка ввода данных заказа

events.on('addressInput', (data) => { ... }) — обработка ввода адреса.

events.on('emailInput', (data) => { ... }) — обработка ввода email.

events.on('phoneNumberInput', (data) => { ... }) — обработка ввода номера телефона.

events.on('submitPayment', () => { ... }) — обработка отправки платежной информации.

events.on('submitContact', () => { ... }) — обработка отправки контактной информации.

  • Платеж и завершение заказа

events.on('submitContact', () => { ... }) — отправка заказа на сервер и обработка ответа.

events.on('successClose', () => { ... }) — закрытие модального окна с успешным заказом и обновление главной страницы.

  • Логирование событий в режиме разработки

if (process.env.NODE_ENV !== 'production') { events.onAll(({ eventName, data }) => { console.log(eventName, data); }); }

About

Фронтенд проекта "Веб Ларёк"

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages