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

Основы 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 и тд.

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

• Задание: Создание калькулятора. Верстка на HTML, CSS.
• Порядок показа: объяснить все стили и теги, которые потребовалось добавить для повторения стилистики выбранного сайта
• Контрольные вопросы: основные составляющие web, опишите URI, напишите HTML для страницы из заголовка и абзаца текста, отличительные черты протокола HTTP

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

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

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

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

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

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

• Методические указания
• Пример работы с three.js

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

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

• Задание: Продолжение Лабораторной работы 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. Можаев Дмитрий Владимирович