Course: Архітектура вебдодатків (Вибіркова дисципліна)

Section outline

Select section General

Collapse Expand
General

Collapse all Expand all
- Select activity Новини
  
  Новини Forum
- Select activity Викладач:Драєвьский Дмитро СергійовичEmailepk.drae...
  
  Students must
  
  Mark as done
  
  Викладач:
  
  Драєвьский Дмитро Сергійович
  
  Email: epk.draevskiy@gmail.com
  
  Google Meet: https://meet.google.com/gfh-hezw-quq
  
  Резервний Meet:
  
  (11:30 - 12:30) https://meet.google.com/peb-rhgd-cth
  
  (12:30 - 13:30) https://meet.google.com/kyr-dihe-jgf
- Select activity Робоча програма
  
  Робоча програма File
Select section Модульний контроль №1 / СМ 1

Collapse Expand
Модульний контроль №1 / СМ 1
Select section Модульний контроль №2 / СМ 1

Collapse Expand
Модульний контроль №2 / СМ 1
Select section Заліковий контроль / СМ 1

Collapse Expand
Заліковий контроль / СМ 1
Select section Практика №0. Пускова інструкція

Collapse Expand
Практика №0. Пускова інструкція
- Select activity Мета. Запустити дві частини — React-клієнт і Expre...
  
  Мета. Запустити дві частини — React-клієнт і Express-сервер — на різних портах; увімкнути CORS; показати «Hello».
  
  Теорія (коротко). Node.js LTS і менеджер пакунків (npm/pnpm); що таке дев-сервер Vite; чому фронт і бек на різних портах та що таке CORS.
  
  Результат.
  
  http://localhost:5173 — «Hello, React!»
  
  http://localhost:3000/api/health — {"ok":true}
  
  CORS дозволяє клієнту звертатися до бекенду.
- Select activity Практика №0
  
  Практика №0 Assignment
Select section Лекція №1. Вступ до вебархітектури

Collapse Expand
Лекція №1. Вступ до вебархітектури
- Select activity Короткий опис:Познайомимось із фундаментальними ...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Познайомимось із фундаментальними поняттями вебархітектури, розглянемо основні типи вебдодатків (SPA, MPA, PWA), їхні переваги та недоліки. Ви зрозумієте, з яких основних компонентів складається сучасний вебдодаток та як вони взаємодіють між собою.
Select section Практика №1. React з нуля: компоненти, JSX, пропси й стан

Collapse Expand
Практика №1. React з нуля: компоненти, JSX, пропси й стан
- Select activity Теорія. JSX; функціональні компоненти; props vs st...
  
  Теорія. JSX; функціональні компоненти; props vs state; useState; рендер списків і key; умовний рендеринг.
  Завдання. Статичний каталог курсів на клієнті (масив у коді): картка, список, фільтр за категорією (локальний стан).
- Select activity Практика №1
  
  Практика №1 Assignment
Select section Лекція №2. Клієнт-серверна архітектура

Collapse Expand
Лекція №2. Клієнт-серверна архітектура
- Select activity Короткий опис:Навчимося розуміти принципи роботи...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Навчимося розуміти принципи роботи клієнт-серверної взаємодії. Розглянемо, як працює HTTP-протокол, як формуються та обробляються запити та відповіді, та як розробляються RESTful API.
Select section Практика №2. Події, форми, «підйом» стану і композиція

Collapse Expand
Практика №2. Події, форми, «підйом» стану і композиція
- Select activity Теорія. Обробники подій; керовані поля; lifting st...
  
  Теорія. Обробники подій; керовані поля; lifting state up; односпрямований потік даних; композиція.
  Завдання. Пошук і сортування в каталозі: інпут «пошук», селект «сортувати за», підйом стану у батьківський компонент; підсвітка збігів.
- Select activity Практика №2
  
  Практика №2 Assignment
Select section Лекція №3. Front-end архітектура

Collapse Expand
Лекція №3. Front-end архітектура
- Select activity Короткий опис:Зануримось у світ Front-end розроб...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Зануримось у світ Front-end розробки. Поговоримо про базові технології HTML/CSS/JavaScript та про те, як працюють сучасні фреймворки (React, Angular, Vue). Навчимося створювати інтерактивні вебінтерфейси.
Select section Практика №3. Підключаємо бекенд: fetch, життєвий цикл, CORS, файли

Collapse Expand
Практика №3. Підключаємо бекенд: fetch, життєвий цикл, CORS, файли
- Select activity Теорія. useEffect і залежності; стани «завантаженн...
  
  Теорія. useEffect і залежності; стани «завантаження/помилка/успіх»; бази про CORS; файлова персистентність замість БД.
  Завдання.
  
  Бекенд: Express читає data/courses.json і віддає GET /api/courses, GET /api/courses/:id.
  
  Фронт: забирає каталог і деталі курсу через fetch, показує спінер/помилки.
- Select activity Практика №3
  
  Практика №3 Assignment
Select section Лекція №4. Back-end архітектура

Collapse Expand
Лекція №4. Back-end архітектура
- Select activity Короткий опис:Познайомимось із серверною частино...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Познайомимось із серверною частиною вебдодатків. Ви дізнаєтесь, як створити простий сервер, як працювати з базами даних (SQL, NoSQL), і як організувати вебдодаток за допомогою архітектурних шаблонів MVC та MVVM.
Select section Практика №4. Роутинг і макети (layout)

Collapse Expand
Практика №4. Роутинг і макети (layout)
- Select activity Теорія. React Router: маршрути, параметри, вкладен...
  
  Теорія. React Router: маршрути, параметри, вкладеність, 404, активні посилання.
  Завдання. Додати сторінки: / (каталог), /course/:id (деталі), /about; спільний хедер/футер як layout.
- Select activity Практика №4
  
  Практика №4 Assignment
Select section Лекція №5. Архітектурні патерни

Collapse Expand
Лекція №5. Архітектурні патерни
- Select activity Короткий опис:Дізнаємось про найбільш популярні ...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Дізнаємось про найбільш популярні архітектурні патерни для вебдодатків, такі як SOA та мікросервіси. Ви навчитеся обирати правильний патерн для свого проєкту та зрозумієте, як організувати складні додатки.
Select section Практика №5. Глобальний стан без «важких» бібліотек: Context + useReducer

Collapse Expand
Практика №5. Глобальний стан без «важких» бібліотек: Context + useReducer
- Select activity Теорія. Контекст як «шина»; ред’юсер і дії; мемоіз...
  
  Теорія. Контекст як «шина»; ред’юсер і дії; мемоізація значення; локальне збереження (LocalStorage).
  Завдання. «Кошик/записи»: додавання/видалення курсів, підрахунок підсумку, збереження кошика між перезавантаженнями, бейдж у хедері.
- Select activity Практика №5
  
  Практика №5 Assignment
Select section Лекція №6. Безпека вебдодатків

Collapse Expand
Лекція №6. Безпека вебдодатків
- Select activity Короткий опис:Розглянемо ключові аспекти безпеки...
  
  Students must
  
  Mark as done
  
  Короткий опис:
  
  Розглянемо ключові аспекти безпеки вебдодатків. Ви зрозумієте, що таке XSS, CSRF, SQL-ін'єкції, як їх уникнути, та як правильно реалізувати авторизацію й аутентифікацію за допомогою сучасних технологій, таких як JWT та OAuth.
Select section Практика №6. Форми з валідацією (клієнт і сервер) + запис у CSV/JSONL

Collapse Expand
Практика №6. Форми з валідацією (клієнт і сервер) + запис у CSV/JSONL
- Select activity Теорія. Керовані поля; синхронна/асинхронна валіда...
  
  Теорія. Керовані поля; синхронна/асинхронна валідація; дружній UX помилок; формати зберігання: CSV (табличні рядки) vs JSONL (по об’єкту в рядку).
  Завдання. «Заявка на курс»:
  
  Фронт: форма з кількома полями, валідація, спінер, повідомлення «успішно».
  
  Бек: POST /api/applications → appendCSV('data/applications.csv', row) або appendJSONL(...).
- Select activity Практика №6
  
  Практика №6 Assignment
Select section Індивідуальне домашнє завдання (ІДЗ)

Collapse Expand
Індивідуальне домашнє завдання (ІДЗ)
- Select activity Короткий опис:На цій лекції ви навчитеся зберіга...
  
  Students must
  
  Mark as done
  
  Тема. Завершення навчального застосунку: великі списки (пагінація + віртуалізація), аутентифікація з JWT у HttpOnly‑cookie, завантаження файлів (аватар), просте редагування каталогу без БД (оновлення courses.json).
  
  Відправна точка: використайте робочу версію після Практикуму 6. На цій основі доробіть функціональність, описану у документі.
  
  Достатньо виконати 2 із 4 завдань (на вибір).
- Select activity ІДЗ
  
  ІДЗ Assignment
Select section Лекція №7. Робота з файлами та зберігання даних у вебдодатках

Collapse Expand
Лекція №7. Робота з файлами та зберігання даних у вебдодатках

Not available
Select section Практика №7. Списки, пагінація, пошук, віртуалізація (із файлу)

Collapse Expand
Практика №7. Списки, пагінація, пошук, віртуалізація (із файлу)

Not available
Select section Лекція №8. Оптимізація продуктивності вебдодатків

Collapse Expand
Лекція №8. Оптимізація продуктивності вебдодатків

Not available
Select section Практика №8. Аутентифікація та захищені маршрути (JWT у HttpOnly-cookie, users.json)

Collapse Expand
Практика №8. Аутентифікація та захищені маршрути (JWT у HttpOnly-cookie, users.json)

Not available
Select section Лекція №9. Робота з API

Collapse Expand
Лекція №9. Робота з API

Not available
Select section Практика №9. Завантаження файлів: прев’ю, прогрес, збереження в /uploads

Collapse Expand
Практика №9. Завантаження файлів: прев’ю, прогрес, збереження в /uploads

Not available
Select section Лекція №10. Основи тестування вебдодатків

Collapse Expand
Лекція №10. Основи тестування вебдодатків

Not available
Select section Практика №10. Редагування/видалення «каталогу» без БД: оновлюємо courses.json

Collapse Expand
Практика №10. Редагування/видалення «каталогу» без БД: оновлюємо courses.json

Not available

Section outline

Достатньо виконати 2 із 4 завдань (на вибір).