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

Материалы курса 2022 года

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

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

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

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

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

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

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

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

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

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

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

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

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

• Задание: замена коллбеков на промисы, запросы fetch. Собрать файлы фронтенда через bundler, развернуть их на сервере c API
• Порядок показа: повторить действия из 5ой лаборатоной, но показать fetch. Показать что CORS работает без расширения
• Контрольные вопросы: что такое промис и 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. Можаев Дмитрий Владимирович