Репозиторий курса "Проектирование Сетевых Приложений"

Основы Web: URI, Document, HTTP, HTML, CSS, Кратко JavaScript

• Презентация

Основы JavaScript: типы, операторы, функции, объекты, коллекции, классы, DOM

• Презентация

Углубленный JavaScript: замыкания, контекст, прототипы, наследования, модули, обработка ошибок, события

• Презентация

DNS, браузерный рендеринг, клиент-серверная модель, история веб-приложений, NPM, Ajax, Cookie, Cors

• Презентация

Node.js. Бэкенд на JavaScript

• Презентация

• Презентация

Event Loop, промисы, async/await, fetch

Полифиллы, Транспайлинг, Постпроцессоры, Бандлеры

• Презентация

• Установка Python, NodeJS, Git, Docker на Windows, MacOS, Linux

• Основные команды git и описание Docker Compose.

• каждому студенту весь код необходимо переписать по теме, только у вас будут такие названия переменных, массивов, страниц и тд. Никаких общих text, search, order, cart, basket, service и т.д. Это должны быть airplane, document, software_request, shipName, softwarePrice и тд.

Индивидуальные темы работ

У каждого студента практически одинаковое задание на весь семестр. Но оно должно быть модифицировано под вашу тему:

• весь код переписать по теме, только у вас будут такие названия таблиц, страниц и тд. Никаких общих text, search, order, cart, basket, service и т.д. Это должны быть airplane, document, software_request, shipName, softwarePrice и тд.
• ваши цвета и ваши данные

Под каждую лабораторную отдельная именованная по теме лаборатоной ветка в git. Сам репозиторий назвать по теме вашего варианта. Каждая работа демонстрируется и защищается отдельно. При защите необходимо продемонстрировать по вашей теме:

• работу всех программ этой лабораторной
• разделы отчета по данной лабораторной, в нем скриншоты в соответствии с Порядоком показа. Пример отчета
• отдельную ветку в github с кодом
• показать конспекты обязательных слайдов всех прошедших лекций
• перед показом письменно ответить на Контрольные вопросы (знать материал лекций и код лабораторных)
• Все исправления по предыдущим лабораторным вы обязательно исправляете и показываете вместе с новой. Нужно сделать файл .doc, в котором каждое замечание из таблицы должно быть прокомментировано текстом и должен быть скриншот на котором видно что вы его исправили

• Задание: Создание калькулятора. Верстка на HTML, CSS. Копировать 3-5 основных цветов кодами с сайта по вашей теме (хедер, фон, карточки, кнопки, hover) и еще 2-3 свойства (padding и тд)
• Порядок показа: объяснить все стили и теги, которые потребовалось добавить для повторения стилистики выбранного сайта (коды цветов с сайта через Inspect и в вашем CSS, hover и тд)
• Контрольные вопросы: основные составляющие web, опишите URI, напишите HTML для страницы из заголовка и абзаца текста, отличительные черты протокола HTTP

• Методические указания

• Задание: Создание калькулятора. Функции на JavaScript. Реализовать в калькуляторе индивидуальную операцию по вашей теме, функция должна быть встроена в логику калькулятора без дополнительных окон, alert
• Порядок показа: показать и объяснить индивидуальную операцию. Объяснить как связана кнопка = и код программы. Как по этапа происходит сложение в программме.
• Контрольные вопросы: объясните, как связана кнопка = с кодом лабораторной; объясните от начала до конца, что проиходит при сложении двух чисел (что нажимает пользователь, что происходит в коде); напишите класс кнопки, которая выводит количество нажатий; напишите код поиска максимального элемента в массиве

• Методические указания

• Задание: Знакомство с node, npm. Верстка интерфейса с карточками (страница списка с фильтрацией и страница подробнее), данные получать через mock объекты (коллекция). Добавить кнопку добавления (копировать первую карточку), кнопку удаления карточки. В хедере на обеих страницах должна быть кнопка Домой
• Порядок показа: объяснить состав компонентов в лабораторной, во вкладке Network показать GET запрос получения html и содержимое Response
• Контрольные вопросы: опишите структуру вашего проекта, что такое MVC, что такое роутинг, ключевые этапы рендера

• Методические указания

• Задание: Работа с коллекциями, функциями, классами.
• Порядок показа: объяснить реализацию требуемых функций, объяснить использование three.js

Домашнее задание состоит из 2 частей. В первой части ДЗ необходимо внедрить 2 задания по варианту (см ниже) в приложение вашей третьей лабораторной. Например, функция поиска палиндромов используется для выбора покупателей для подарков (тема Система электронных покупок).

Нужно использовать данные по вашей теме (текст, товары и тд), а переменные/функции в коде должны называться по этой теме (account, account_number и тд). Обязательно нужно использовать:

• цикл с (пост)условием, но не по счетчику (например после 12:00 или после нужного сообщения)
• строка
• объект
• хотя бы 1 коллекцию (массив или множества, например)

Во второй части ДЗ необходимо на странице Подробнее выводить вместе с картинкой 3D модель (см пример three.js). Модель .glb можно использовать одну и ту же для всех Услуг, но она должна быть по теме вашей работы

• Варианты задач для Части 1
• Пример работы с three.js для Части 2

• Задание: Реализация на Node.js собственного веб-сервиса для API, данные хранятся в json файле. Тестирование через Postman/Insomnia 5 методов: список с фильтрацией, получение одной записи, добавление, редактирование, удаление
• Порядок показа: показать коллекцию запросов в Postman, показать список, добавить новую запись, получить по id, удалить, показать в списке с фильтрацией
• Контрольные вопросы: Что такое NodeJS, каковы его особенности и среда применения; клиент серверная модель, сравнение SSR и SPA; назовите несколько встроенных библиотек NodeJS и их предназначение; перечислите для всех ваших методов url с описанием и json, приведите примеры обработки кодов состояний и в каких методах какие коды предусмотрены, приведите код вашего router, код добавления нового элемента в вашу модель.

• Методические указания

• Задание: Продолжение Лабораторной работы 3: добавить страницу добавления/редактирования и соответствующие кнопки, подключение к созданному API бэкенду. Запросы XHR, Cors обойти через расширение браузера CORS Unblock. Код 4ой лабораторной НЕ НУЖНО добавлять в ветку по 5ой, в 5ой и 6ой остается только фронтенд, как в 3ей
• Порядок показа: В Google Chrome запустить одновременно сервера из 4ой и 5ой лабораторных на разных сокетах. Открыть вкладку Network, выбрать xhr, выполнить фильтрацию в приложении, показать ошибку, включить CORS Unblock, повторить фильтрацию, показать параметр в заголовке запроса в Network. добавить в Postman новую запись, показать что она появилась в приложении, указать название этой записи в фильтрации
• Контрольные вопросы: опиишите проблему и пути решения CORS, что такое AJAX и xhr

• Методические указания

• Задание: замена коллбеков на промисы, запросы fetch. Собрать файлы фронтенда через bundler, развернуть их на сервере c API. Ветка по 6ой лабораторной остается только с файлами исходного кода, а собранный bundle необходимо добавить в ветку по 4ой лабораторной
• Порядок показа: Запустить 4ую лабораторную вместе с bundle: повторить действия из 5ой лаборатоной, но показать fetch. Показать что CORS работает без расширения, так как домен запросов AJAX совпадает с url страницы. Показать вкладку Sources, в ней должен быть только bundle, никаких файлов исходного кода
• Контрольные вопросы: что такое промис и fetch, что такое async/await, что такое bundler/babel/TS

• Методические указания

Пример отчета

ГОСТ (1.5 интервал, 1.25 см отступ, 14 пт и тд) - Требования по оформлению.

1. Титульный лист
2. Введение (задачи по каждой лабораторной). В введении указать полную формулировку темы (с услугами и заявками)
3. Разделы по лабораторным. Все рисунки подписать с названиями, ссылки в тексте (литература, таблицы, формулы аналогично)
4. Заключение (задачи с результатами). Ссылка на гит.
5. Список литературы

• Продолжение Лабораторной работы 6 - добавление уведомлений/обновлений через Polling
• Подключение к API VK
• библиотека three.js

Образ виртуальной машины Linux Ubuntu 20.04 для выполнения заданий курса

1. Node JS
2. npm
3. VS Code
4. VS Code LiveServer

1. Алехин Сергей Сергеевич
2. Елхимова Ирина Сергеевна
3. Шевчук Михаил Сергеевич
4. Толпаров Натан Русланович
5. Вивчарук Ростислав Владимирович
6. Можаев Дмитрий Владимирович