Практика №11

Приложение "Прокат велосипедов"

В чём суть

На протяжении следующих трёх занятий мы будем делать небольшое приложение, в ходе разработки которого вы закрепите темы, повторите вёрстку и потренируетесь выполнять стандартные задачи фронтенд-разработчиков на нативном JavaScript

О приложении

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

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

Для выполнения вам понадобятся:

Макеты - https://www.figma.com/file/OAYtuZYjTYFZ9zIuit26gpaE/%D0%9F%D1%80%D0%BE%D0%BA%D0%B0%D1%82

Бекенд на node.js - https://bitbucket.org/frontschoolnsk/rent/src/master/

Что следует знать для начала работы

• Все шаблоны находятся в папке "front/templates"
• Статические файлы (css, js, images) берутся из папки "front"
• Файлы "pointers" и "bikes" нужно скопировать в папку "server/models/db"
• Сервер запускается командой npm run start

Страницы приложения

 

• / - главная 
• /catalog - каталог всех доступных велосипедов
• /catalog/:pointId - каталог доступных велосипедов в конкретном пункте pointId
• /map - страница с картой
• /login - авторизация
• /registration - регистрация
• /logout 
• /card-requsites - реквизиты карты
• /lk - личный кабинет
• /order/:bikeId - аренда велосипеда bikeId

Работа с mustache

https://github.com/janl/mustache.js/

{{title}} - вывод значения (например, в header.html)

Условный вывод (аналог if(value)):

{{#isShowHello}} Hello! {{/isShowHello}}

isShowHello = true;  ->  "Hello!"

isShowHello = false;  ->  ""

Условный вывод (аналог if(!value)): 

{{^isShowHello}} Bye! {{/isShowHello}}

isShowHello = false;  ->  "Bye!"

isShowHello = true;  ->  ""

Работа с mustache

Вывод списка объектов

stooges = [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]

{{#stooges}}
  <b>{{name}}</b>
{{/stooges}}

Задание на практику

1. Выведите на странице с каталогом велосипедов список пунктов выдачи и заголовок с помощью mustache. Шаблон страницы называется "catalog.html".

Для этого вам нужны следующие данные, которые доступны в шаблоне:

- pointInfo - данные о выбранном пункте

- pointersList - массив пунктов

У одного пункта есть поля:

- address

- _id

- isActive

2. Отобразите первую страницу списка велосипедов на странице каталога при загрузке страницы с помощью js.

Для получения списка c сервера уже написана функция "api.getBikes(pointId = '', page = 1)".

Она возвращает Promise со списком велосипедов (bikesList) и флагом, есть ли продолжение списка (hasMore).

Чтобы функция была доступна, добавьте скрипт "/js/api.js" на страницу каталога.

Допишите ваш код в файл "/js/catalog.js". pointId возьмите из url страницы (document.URL).

Если hasMore равно true, отобразите кнопку "Загрузить ещё".

 

3. Реализуйте логику подгрузки списка велосипедов по нажатию на кнопку "Загрузить ещё". 

В момент загрузки списка кнопка должна быть задесейблена, в состоянии ожидания, пока ответ не придёт, новых запросов делать не нужно.

Если hasMore равно false, спрячьте кнопку подгрузки со страницы. 

4. Дополните страницу каталога стилями по макету.

5. Сверстайте главную страницу сервиса, "index.html".

6*. Сделайте страницу с картой, "map.html". Процесс работы с картой описан в документации - https://tech.yandex.ru/maps/doc/jsapi/2.1/quick-start/index-docpage/

Вам понадобятся методы создания и добавления на карту геообъекта ymaps.GeoObject - https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/geoobjects-docpage/

Список пунктов выдачи для отображения на карте можно получить из метода "api.getPointers()", он возвращает promise со списком пунктов. Вам понадобятся поля address, _id, coordinates пункта.

 

* - не обязательно к выполнению, для тех, у кого есть время и желание