CI
Правила сдачи задания:
- Важно: в рамках этого ДЗ нужно использовать npm (а значит, никакого
yarn.lockв репозитории быть не должно) - Frontend должен собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты
- Авто-тесты писать не требуется
Важно: в данном ДЗ вам потребуется выполнить мини-проект. Мы понимаем, что он может занять чуть больше времени, чем обычные ДЗ, но тема HTTP настолько важна, что стоит уделить этому чуть больше времени.
Пока backend-разработчик находится в отпуске, вам поручили сделать прототип API для сервиса управления заявками на помощь (можете за себя порадоваться, так недалеко и до fullstack'а), к которому вам и нужно будет в дальнейшем прикруить frontend.
Вам потребуется написать CRUD функционал для работы с заявками при помощи сервера koa. Для хранения данных мы будем оперировать следующими структурами:
Ticket {
id // идентификатор (уникальный в пределах системы)
name // краткое описание
status // boolean - сделано или нет
created // дата создания (timestamp)
}
TicketFull {
id // идентификатор (уникальный в пределах системы)
name // краткое описание
description // полное описание
status // boolean - сделано или нет
created // дата создания (timestamp)
}Примеры запросов:
- GET ?method=allTickets - список тикетов
- GET ?method=ticketById&id=
<id>- полное описание тикета (где<id>- идентификатор тикета) - POST ?method=createTicket - создание тикета (
<id>генерируется на сервере, в теле формыname,description,status)
Соответственно:
- GET ?method=allTickets - массив объектов типа
Ticket(т.е. безdescription) - GET ?method=ticketById&id=
<id>- объект типаTicketFull(т.е. сdescription) - POST ?method=createTicket - в теле запроса форма с полями для объекта типа
Ticket(сid=null)
Авто-тесты писать не нужно.
Не забывайте про CORS. Для обработки CORS в koa есть своя middleware koa-CORS
Для упрощения тестирования можете при старте сервера добавлять туда несколько тикетов.
Для начала, чтобы с сервера отдавать данные, достаточно в обработчиках koa написать:
const tickets = [];
app.use(async ctx => {
const { method } = ctx.request.querystring;
switch (method) {
case 'allTickets':
ctx.response.body = tickets;
return;
// TODO: обработка остальных методов
default:
ctx.response.status = 404;
return;
}
});А код ниже позволит обработать полученный ответ от сервера во Frontend:
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const data = JSON.parse(xhr.responseText);
} catch (e) {
console.error(e);
}
}
});В качестве результата пришлите проверяющему ссылку на GitHub репозиторий.
Часть API вами написано, пора приступить к своим прямым обязанностям - написанию фронтенда, который будет с этим API работать.
Общий вид списка тикетов (должны загружаться с сервера в формате JSON):
Модальное окно добавления нового тикета (вызывается по кнопке "Добавить тикет" в правом верхнем углу):
Модальное окно редактирования существующего тикета (вызвается по кнопке с иконкой "✎" - карандашик):
Модальное окно подтверждения удаления (вызывается по кнопке с иконкой "x" - крестик):
Для просмотра деталей тикета нужно нажать на тело тикета (но не на кнопки - "сделано", "редактировать" или "удалить"):
Ваше приложение должно реализовывать следующий функционал:
- Отображение всех тикетов
- Создание нового тикета
- Удаление тикета
- Изменение тикета
- Получение подробного описание тикета
- Отметка о выполнении каждого тикета
Весь этот функционал должен быть связан с сервером через методы. Например для удаления нужно отправить запрос с соответствующим методом, получить подтверждение и подтянуть обновлённый список тасков.
В качестве бонуса можете отображать какую-нибудь иконку загрузки (см. https://loading.io) на время подгрузки.
Авто-тесты к данной задаче не требуются. Все данные и изменения должны браться/сохраняться на сервере, который вы написали в предыдущей задаче.
В качестве результата пришлите проверяющему ссылку на GitHub репозиторий.
Заметка
Для получения данных с сервера вы можете использовать XMLHttpRequest или fetch API. Мы рекомендуем в fetch, но выбор остаётся за вами.
P.S. Подгрузка подробного описания специально организована в виде отдельного запроса, мы прекрасно понимаем, что на малых объёмах информации нет смысла делать её отдельно.
Важно: данная задача не является обязательной
Настало время докрутить менеджер картинок, который вы делали на протяжении нескольких лекций. Теперь нужно, чтобы все картинки загружались и хранились на сервере. А при удалении удалялись с сервера.
Напишите серверную часть с использованием 'koa' (по аналогии с тем, как это было на лекции), но докрутите туда:
- Хранение списка картинок - предложите, как отдавать его на клиент (возможно, JSON?)
- Удаление картинок с сервера (при нажатии на кнопку удалить с клиента)
Подсказка
Делайте удаление методом POST: /?method=removeImage&id=<id>
Напоминаем, как он должен выглядеть:
Обратите внимание на несколько важных моментов:
- Ваш менеджер картинок должен по-прежнему поддерживать drag and drop и загрузку по клику
- Не загружайте больших картинок (более 1Мб): на всех серверах установлены ограничения, мы для упрощения этот момент опускаем
Вам придётся провести исследовательскую работу и выяснить, как удалять файлы с помощью API NodeJS. Надеемся, что вы справитесь с этим, но дадим небольшую подсказку: https://nodejs.org/api/fs.html
Вы можете реализовать развёртывание в удобном для вас формате: либо так, как это было описано на лекции (отдельно для frontend + GitHub Pages и backend), либо собрать frontend и настроить backend так, чтобы он обрабатывал frontend так же, как картинки (см. koa-static с лекции).
Используйте FormData для отправки данных. Авто-тесты к данной задаче не нужны.
В качестве результата пришлите проверяющему ссылку на GitHub репозиторий.