Курс посвящен созданию современных приложений на основе компонентов платформы Веб.

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

Вторая часть курса посвящена изучению возможностей современных веб-обозревателей для разработки веб-приложений и получение навыков программирование клиентской стороны насыщенных веб-приложений (RIA) с использованием современных стандартов HTML5 и JavaScript.

Интеллектуальные интернет-технологии

2021/22 учебный год, Институт математики и информационных технологий, осенний семестр.

Специальности:

• 01.04.02 Прикладная математика и информатика. Интеллектуальные интернет-технологии (магистр, 1 год обучения)

Лектор: К. А. Кулаков

Руководители практик: К. А. Кулаков

Лекции

• 1. Введение. Веб как программная платформа
• 2. Протокол HTTP
• 3. Архитектура Веб-сервера
• 4. Веб-приложения и фреймворки
• 5. Сохранение состояния в HTTP
• 6. Информационная безопасность веб-приложений
• 7. Технологии и инструментальные средства процесса разработки веб-приложений
• 8. Веб-программирование на стороне клиента
• 9. Динамическое манипулирование структурой DOM
• 10. Локальные хранилища данных. Мультимедийные возможности
• 11. Сетевые средства, синхронное и асинхронное взаимодействие с сервером
• 12. Манипулирование историей веб-обозревателя и создание одностраничных приложений
• 13. Организация одноранговых сетей с помощью WebRTC

Задания. Часть 1

• Задание 1.1. Минимальное приложение

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

• Задание 1.2. Работа с запросом
  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.3. Работа с несколькими ресурсами
  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.

• Задание 1.4. Аутентификация и сеансы

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

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

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

• Задание 1.5. Постоянное хранение данных

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

Задания. Часть 2

1. Задание 2.1. Работа с объектной моделью документа (DOM) В среде JSFiddle: форма из поля ввода и кнопки, при подтверждении формы (нажатием на кнопку или на ввод) текст из поля ввода копируется на страницу под формой. То же с использованием библиотеки JQuery для работы с DOM. Оформить в виде отдельного html-файла (без jsfiddle) с подключением JQuery. Список задач: при подтверждении формы текст из поля ввода добавляется в список. Рядом с каждым элементом две кнопки — «пометить» (изменяет внешний вид задачи) и «удалить».
2. Задание 2.2. Сохранение состояния в браузере Добавить в список задач сохранение состояния в LocalStorage. После повторного открытия страницы состояние (наличие и порядок задач в списке, какие отмечены) должно полностью восстановиться.
3. Задание 2.3. Мультимедиа Аудиоплеер с возможностью добавлять локальные файлы в список воспроизведения. См. элемент <audio> и метод createObjectURL для доступа к локальным файлам, которые выбрал пользователь.
4. Задание 2.4. Асинхронная загрузка и управление историей браузера Одностраничное приложение: панель навигации из нескольких ссылок, при нажатии на которые вся страница не перезагружается, но заменяется основная ее часть. При этом добавляется запись в историю браузера, так что переход отображается в адресной строке и работают кнопки «назад» и «вперед». См. XMLHttpRequest, history.pushState, window.onpopstate.
5. Задание 2.5. Одноранговая сеть Продемонстрировать установку прямого сетевого соединения и обмен текстовыми сообщениями между двумя экземплярами веб-приложения, которые могут работать в различных браузерах на разных компьютерах. Обмен установочной информацией можно производить без сервера путем копирования сгенерированного приложением описания соединения в текстовое поле другого экземпляра. См. WebRTC, RTCPeerConnection, RTCDataChannel.

Ссылки