Архитектура и фреймворки веб-приложений

Реализовать (или использовать пример) и проверить работу приложения, возвращающего текст "Hello, World!" в ответ на GET-запрос с путем /.

1. Модифицировать минимальное веб-приложение таким образом, чтобы по запросу к его корневому ресурсу с заданным параметром name (например /?name=Alexander) оно возвращало HTML-документ с приветствием «Hello, <значение параметра name>».
2. Создать веб-приложение, реализующее работу с ресурсом /, отражающим список людей следующим образом. Запрос к ресурсу с помощью метода POST с заданным параметром name позволяет добавлять в комнату человека с именем name. GET-запрос к ресурсу возвращает:
   1. строку «The room is full of people who care…» в случае, если комната пуста;
   2. строку «There are <список имен> in the room», причем список имен представляет собой строку <Имя1>, <Имя2>, … and <ИмяN>. При этом, для случая, когда в комнате только один человек должен использоваться вспомогательный глагол «is».

При реализации веб-приложения на языке Python для хранения состояния комнаты объявите в модуле переменную встроенного типа list (больше примеров работы со списками в Python).

Для того, чтобы выполнить запрос типа POST можно воспользоваться утилитой curl:

$ curl -X POST <имя сервера>/?name=Alexander

С той же целью можно использовать режим разработки браузера, например для браузера Firefox: сначала записать запрос в строке браузера (по-умолчанию будет отправлен запрос типа GET) нажать F12, затем выбрать вкладку сеть, выбрать предыдущий запрос, нажать на кнопку «Изменить и снова отправить», указать в качестве метода «POST», нажать кнопку «Отправить».

1. Создать веб-приложение, позволяющее создавать коробки. Приложение должно предоставлять доступ к следующим ресурсам:
   • / — простая веб-страница с кратким описанием приложения, которая в том числе содержит информацию о том, сколько коробок уже создано и гипер-ссылкой на ресурс /boxes.

   • /boxes — при запросе POST с параметрами color и name создается новая коробка, помеченная заданным цветом и названием, причем цвет может быть только одним из следующего списка: red, green, blue, yellow, magenta.

     В случае, если в запросе передан неверный цвет или коробка с таким цветом или именем уже создана, приложение должно вернуть веб-страницу, содержащую сообщение об ошибке, а также текущий список коробок.

     В случае, если коробка успешно создана, приложение должно вернуть страницу с «радостным» сообщением и также вывести текущий список коробок.

     Запрос GET к данному ресурсу должен вывести список коробок.

     При выводе списка коробок каждая строка должна содержать имя коробки, выделенное соответствующим цветом (напоминание: при задании CSS-стиля элемента можно использовать символьные имена цветов, например background: yellow;).

2. Модифицировать предыдущее приложение таким образом, чтобы в каждую коробку можно было поместить некоторый предмет. Ресурсы приложения должны обслуживаться следующим образом:

   • /boxes/<имя коробки> — при запросе к этому ресурсу с помощью метода POST и с переданным параметром name в коробку с заданным именем должен помещаться предмет с названием name. Если коробки с заданным именем не существует, приложение должно вернуть ответ с кодом 404 и сообщением об ошибке. В случае успешного выполнения запроса приложение должно вернуть обновленный список вещей в заданной коробке.

     Запрос GET к данному ресурсу должен выводить список вещей в коробке или ошибку со статусом 404 в случае, если заданной коробки не существует.

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

   • /boxes — модифицируйте список коробок из предыдущего задания таким образом, чтобы каждый элемент являлся ссылкой на соответствующую коробку.
3. Добавьте к веб-страницам, содержащим список коробок и список вещей в коробке HTML-форму, позволяющую обновить соответствующий список.

При реализации веб-приложения на языке Python для хранения списка коробок с их атрибутами, а также содержимого коробок, можно воспользоваться встроенной в язык структурой данных «словарь» — dict.

Добавить поддержку аутентификации пользователей (форма для ввода логина и пароля) в приложение из задания 3. Можно поместить несколько имен пользователей с соответствующими паролями непосредственно в код, регистрация и хранение учетных записей в базе данных не требуется.

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

Для сопоставления запросов с авторизованными пользователями следует использовать сеансы (sessions).

Для приложения из задания 4 обеспечить сохранение состояния (коробки, их содержимое и владельцы) так, чтобы оно не терялось при перезапуске приложения. Рекомендуется использовать встраиваемую СУБД SQLite (использование в Flask).

1. В среде JSFiddle: форма из поля ввода и кнопки, при подтверждении формы (нажатием на кнопку или на ввод) текст из поля ввода копируется на страницу под формой.
2. То же с использованием библиотеки JQuery для работы с DOM.
3. Оформить в виде отдельного html-файла (без jsfiddle) с подключением JQuery.
4. Список задач: при подтверждении формы текст из поля ввода добавляется в список. Рядом с каждым элементом две кнопки — «пометить» (изменяет внешний вид задачи) и «удалить».

Добавить в список задач сохранение состояния в LocalStorage. После повторного открытия страницы состояние (наличие и порядок задач в списке, какие отмечены) должно полностью восстановиться.

Аудиоплеер с возможностью добавлять локальные файлы в список воспроизведения. См. элемент <audio> и метод createObjectURL для доступа к локальным файлам, которые выбрал пользователь.

Одностраничное приложение: панель навигации из нескольких ссылок, при нажатии на которые вся страница не перезагружается, но заменяется основная ее часть. При этом добавляется запись в историю браузера, так что переход отображается в адресной строке и работают кнопки «назад» и «вперед». См. XMLHttpRequest, history.pushState, window.onpopstate.

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