НАУКОВИЙ ГУРТОК «ВЕБ-ПРОГРАМУВАННЯ»

ВСТУП

Вивчення веб-програмування сприяє ефективному оволодінню широким спектром навичок зі створення сучасних вебзастосунків, оскільки об’єднує різні способи діяльності — від проєктування інтерфейсів до реалізації серверної логіки. Основним завданням гуртка «Веб-програмування» є надання студентам уявлення про світ вебтехнологій, роботу та внутрішню структуру сучасних вебсайтів і вебзастосунків, принципи клієнт-серверної взаємодії, основи адаптивного дизайну, безпеки вебдодатків та сучасних фреймворків промислового рівня.

Реалізація гуртка дозволяє стимулювати інтерес і допитливість студентів, розвивати здібності до вирішення проблемних ситуацій: вміння досліджувати задачу, аналізувати наявні ресурси, висувати ідеї, планувати рішення і реалізовувати їх, а також розширити технічний словник студента. Крім цього, гурток допомагає розвитку комунікативних навичок за рахунок активної взаємодії в ході групової проєктної діяльності.

Гурток розраховано на студентів освітніх установ, які вперше знайомляться з веброзробкою. Жодних попередніх знань з програмування не вимагається. Як основний стек технологій обрано HTML5, CSS3, JavaScript, React та Next.js — відкриті технології, що є основою сучасних комерційних вебзастосунків.

ЗАГАЛЬНІ ВІДОМОСТІ ПРО ГУРТОК

Гурток веб-програмування створено за ініціативи викладачів циклової комісії програмування та інформаційних дисциплін і студентів-бакалаврів спеціальності інженерія програмного забезпечення. Засідання гуртка проводяться 4 рази на місяць протягом навчального року. Тематика засідань обирається з міркувань відповідності актуальним вимогам ринку праці у сфері IT, підвищення мотивації студентів до навчання та активізації їх творчої і дослідницької роботи.

МЕТА ТА ЗАВДАННЯ ГУРТКА

Мета роботи гуртка: підвищення обізнаності студентів у сфері сучасних вебтехнологій на основі практичного створення вебсайтів і вебзастосунків — від простої HTML-сторінки до повноцінного застосунку на Next.js, сприяння розвитку технічної творчості та інноваційної діяльності в освітніх установах.

Завдання роботи гуртка:

  • стимулювання мотивації студентів до отримання знань, допомога у формуванні творчої особистості;
  • розвиток інтересу до програмування, вебдизайну та сучасних інтернет-технологій;
  • розвиток конструкторських, інженерних та обчислювальних навичок у контексті веброзробки;
  • формування вміння самостійно вирішувати технічні завдання в процесі створення вебпроєктів;
  • ознайомлення з промисловим стеком технологій, що використовується у реальних комерційних проєктах.

ОЧІКУВАНІ РЕЗУЛЬТАТИ

Основними результатами гурткової діяльності є розвиток багатогранної творчої особистості, здатної до вирішення проблемних ситуацій у сфері веброзробки. Робота гуртка організовується таким чином, щоб формувати у його членів наступні вміння та навички:

  • самостійно і творчо реалізовувати власні вебпроєкти від ідеї до публікації;
  • верстати адаптивні вебсторінки з використанням HTML5 і CSS3;
  • програмувати інтерактивну поведінку сторінок засобами JavaScript;
  • будувати компонентні інтерфейси з використанням бібліотеки React;
  • розробляти повноцінні фулстек-застосунки на базі фреймворку Next.js;
  • працювати з браузерними інструментами розробника (DevTools) та системою контролю версій Git;
  • розуміти принципи клієнт-серверної взаємодії та базові основи вебзахисту;
  • орієнтуватися у світі IT-професій: фронтенд-розробник, бекенд-розробник, UI/UX-дизайнер, фулстек-розробник;
  • працювати в команді над спільним вебпроєктом, ефективно розподіляти обов’язки.

ПЛАН РОБОТИ ГУРТКА

  • Тема 1. Вступ. Як працює інтернет
    Поняття про клієнт і сервер, браузер, HTTP-запит, домен та хостинг. Огляд професій у веброзробці та сучасного стеку технологій.
  • Тема 2. Основи HTML
    Структура HTML-документа. Теги, атрибути, семантичні елементи. Заголовки, параграфи, списки, посилання, зображення, форми, таблиці.
  • Тема 3. Основи CSS
    Підключення стилів. Селектори, каскадність, специфічність. Кольори, шрифти, відступи. Блокова модель (box model). Позиціонування елементів.
  • Тема 4. Сучасне компонування
    Flexbox та CSS Grid — порівняння та практичне використання. Побудова повноцінного макету сторінки: шапка, навігація, контент, підвал.
  • Тема 5. Адаптивний дизайн та CSS-анімації
    Принцип mobile-first. Media queries. Тестування у DevTools. CSS-змінні. Переходи та анімації (transition, animation, keyframes).
  • Тема 6. Основи JavaScript
    Змінні (let, const), типи даних, оператори, умови, цикли. Функції та стрілкові функції. Масиви та об’єкти. Деструктуризація. Spread/rest оператори.
  • Тема 7. JavaScript та DOM
    Document Object Model. Вибір елементів, зміна вмісту та стилів. Обробники подій: click, input, submit. Динамічне створення та видалення елементів.
  • Тема 8. Асинхронний JavaScript та API
    Promises, async/await. Fetch API. Робота з JSON. Отримання та відображення даних з публічних API. Обробка помилок.
  • Тема 9. Git, GitHub та інструменти розробника
    Система контролю версій Git: основні команди. Робота з GitHub. Публікація проєкту на GitHub Pages. Огляд DevTools.
  • Тема 10. Практичний проєкт на Vanilla JS
    Збірка вебзастосунку «Погодний віджет» — підключення до Weather API, відображення даних у реальному часі, адаптивний інтерфейс.
  • Тема 11. Основи вебзахисту
    Поширені вразливості: XSS, CSRF, SQL-ін’єкції. HTTPS та SSL-сертифікати. Безпечне зберігання даних. Node.js та npm — поняття про серверний JavaScript і менеджер пакетів.
  • Тема 12. Вступ до React
    Компонентний підхід. Створення застосунку через Vite. JSX-синтаксис. Функціональні компоненти. Props та однонаправлений потік даних.
  • Тема 13. Стан та хуки React
    Хук useState — локальний стан компонента. Хук useEffect — побічні ефекти та життєвий цикл. useRef. Контрольовані форми. Підняття стану вгору.
  • Тема 14. Списки, умовний рендеринг та React Router
    Відображення масивів даних, ключі (key). Умовне відображення компонентів. Організація навігації між сторінками через React Router.
  • Тема 15. Глобальний стан та запити до API в React
    Проблема prop drilling. Context API. Отримання даних з API через useEffect. Стани завантаження та помилки. Огляд React Query та Zustand.
  • Тема 16. Стилізація в React
    CSS-модулі. Tailwind CSS — утилітарний підхід. Компонентна бібліотека shadcn/ui. Практична збірка інтерфейсу застосунку з використанням готових компонентів.
  • Тема 17. Вступ до Next.js
    Відмінності SSR, SSG та SPA. App Router. Файлова маршрутизація. Спеціальні файли: page, layout, loading, error. Server Components та Client Components, директива ‘use client’.
  • Тема 18. Отримання даних та серверна логіка у Next.js
    Fetch на сервері, кешування та ревалідація. Route Handlers — створення API-ендпоінтів. Server Actions — виконання серверного коду з форм без окремого API.
  • Тема 19. Бази даних та автентифікація у Next.js
    Підключення Prisma ORM, схема та CRUD-операції. Автентифікація через NextAuth.js: вхід через email та OAuth (Google, GitHub). Захист маршрутів через middleware. Деплой на Vercel.
  • Тема 20. Підсумковий проєкт
    Командна розробка повноцінного фулстек-застосунку на Next.js: планування архітектури, розподіл ролей, реалізація, публікація на Vercel. Презентація, аналіз технічних рішень, визначення напрямків подальшого розвитку.
План роботи гуртка
Перейти до вмісту