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

Книга на gitbooks

Задачи

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.

• Посмотреть макеты на яндекс-диске.

• Документация Backbone.js: оригинальная, перевод.

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

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

• Названия веток должны быть вида 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 с подключенными стилями и скриптами.

• Папка для результатов сборки.

Подсказки:

• Результаты сборки не должны быть под гитом.

• В результате сборки должен получаться один файл со скриптами и один файл со стилями.

• Статья об основных сущностях в документации webpack.

• Подробная статья о конфигурации webpack.

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. Реализовать вывод фото товара.