> For the complete documentation index, see [llms.txt](https://mtrsv.gitbook.io/backbone-intern-tasks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mtrsv.gitbook.io/backbone-intern-tasks/master.md).

# Разработка учебного проекта на Backbone

[Книга на gitbooks](https://ilya-matrosov.gitbook.io/backbone-intern-tasks/)

## Задачи

1. Создать проект на гитхабе. Разобраться с NPM, добавить package.json с backbone, jquery, lodash.
2. Настроить сборку scss, js используя webpack.
3. Сверстать форму ввода артикула.
4. Создать коллекцию для товаров.
5. Создать вью для формы поиска.
6. Добавить в проект Jest, написать тесты на модель и вью. Протестировать каждый метод. Все последующие задачи должны включать тесты.
7. Сверстать страницу товара с фото и характеристиками.
8. Создать модель и вью товара, реализовать вывод данных о товаре.
9. Реализовать вывод характеристик товара.
10. Реализовать вывод фото товара.
11. *Сверстать отзывы*.
12. *Создать коллекцию и вью для отзывов*.
13. *Реализовать вывод отзывов*.

### Подготовка к работе.

* Установить расширение для браузера, разрешающее cross origin запросы (для работы с API).
* Установить node.js и git.
* Зарегистрироваться на github, сгенерировать ключи прописать в настройках.
* Создать новый проект на github.
* Посмотреть макеты [на яндекс-диске](https://yadi.sk/d/WIR1yuyI3a6GWQ).
* Документация Backbone.js: [оригинальная](https://backbonejs.org/), [перевод](http://backbonejs.ru/).

### Соглашения по оформлению.

* Каждая задача должна быть выполнена в новой ветке и оформлена в пулл-реквест в репозиторий проекта.
* Названия веток должны быть вида BB-*номер задачи* (например BB-1).
* Название пулл-реквеста соответсвует названию ветки.  
* В описании пулл-реквеста содержится описание того, что было сделано.

## 1. Создать проект на гитхабе. Разобраться с NPM, добавить package.json с backbone, jquery, lodash.

#### Подсказки:

* Папка node\_modules не должна быть под гитом.
* Разобраться с назначением файлов .gitignore.

#### Результат:

* Репозиторий с проектом (файлы package.json, .gitignore).
* Понимание работы с пакетами.
* Понимание назначения файла package.json, .gitignore.

## 2. Настроить сборку scss, js используя webpack.

#### Результат:

* Файл настроек webpack.
* Исходные файлы `.js` и `.scss`, `index.html` с подключенными стилями и скриптами.
* Папка для результатов сборки.

#### Подсказки:

* Результаты сборки не должны быть под гитом.
* В результате сборки должен получаться один файл со скриптами и один файл со стилями.
* [Статья об основных сущностях ](https://webpack.js.org/concepts/) в документации webpack.
* Подробная [статья о конфигурации webpack](https://tproger.ru/translations/configure-webpack4/).

## 3. Сверстать форму ввода артикула

#### Результат:

* Форма ввода артикула должна соответствовать макетам.

## 4. Создать коллекцию для товаров

```
 Пример запроса на API: https://www.sima-land.ru/api/v3/item/?sid=123456,1005002
```

#### Результат:

* Создан файл коллекции для товаров.
* При открытии страницы отправляется запрос на сервер, в консоль выводится заполненная коллекция.

#### Подсказки:

* Расширять коллекцию от `Backbone.Collection`.
* Для корректного заполнения коллекции необходимо переопределить метод `parse`.
* Прочитать про систему событий Backbone. Изучить, как работают коллекции, в какой момент происходит событие `sync`.  
* Свойство `url` может быть строкой или функцией.

## 5. Создать вью для формы поиска.

#### Результат:

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

#### Подсказки:

* Расширять вью от `Backbone.View`.
* Изучить синтаксис lodash-шаблонов.
* Создать lodash-шаблон в теге `<script>`.
* Создать метод render, использовать `$.html()` для вставки новой разметки в элемент.
* Изучить назначение объекта `events`, привязать к клику на кнопку метод `render`.

## 6. Добавить в проект Jest, написать тесты на модель и вью. Протестировать каждый метод. Все последующие задачи должны включать тесты.

#### Результат:

* Подключенный jest.
* Два файла тестов (для вью и коллекции).

#### Подсказки:

* Разобраться с методами фреймворка для тестов: `beforeEach`, `afterEach`, `spyOn`, `expect`.

## 7. Сверстать страницу товара с фото и характеристиками.

* Страница товара должна соответствовать макетам.

## 8. Создать модель и вью товара, реализовать вывод данных о товаре.

#### Результат:

* После нажатия кнопки Подробнее, отображается карточка товара, с фотографией, названием и ценой, списко с атрибутами.

#### Изменения в запросе к API:

* Добавить к запросу товаров `&expand=photo_sizes,description` для получения описания товара и информации о размерах фото.
* Ссылки на фото товара приходят в массиве `photos`, информация о версиях фото в массиве `photoVersions`.
* Адрес фото товара строится по шаблону:

  `PHOTO_PART/PHOTO_INDEX/PHOTO_SIZE.jpg?v=PHOTO_VERSION`.
* Пример адреса фотографии товара:

  `https://cdn2.static1-sima-land.com/items/802893/0/700.jpg?v=0`.

## 9. Реализовать вывод характеристик товара.

## 10. Реализовать вывод фото товара.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mtrsv.gitbook.io/backbone-intern-tasks/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.