Речь_Цифровая_кафедра_Веб_разработчик-Финансист

Форма доклада и структура презентации выпускной аттестационной работы по программе ДПО ПП

«Web-разработчик»

Слайд 1

Уважаемый председатель и члены аттестационной комиссии! Вашему вниманию предлагается проекте на тему «игровой форума, где пользователи могут обсуждать различные темы, оставлять сообщения, анализировать контент и общаться друг с другом».

Проект выполнен командой из 5 человек, представленных на слайде.

В команде моя роль – Разработчик-финансист

РОЛЬ: Финансист

Слайд 2

• Практическая значимость заключается в создании удобного и функционального форума с открытым исходным кодом, который может быть адаптирован под различные игровые сообщества. Также заключается в замене ушедших зарубежных платформ для тематических обсуждений на отечественные. Например DISCORD

Слайд 3

На слайде представлен комплекс работ по проекту с распределением по исполнителям и оценкой трудоемкости каждого.

Слайд 4

Структура затрат на разработку проектной документации включает оплату труда, амортизационные отчисления, материальные затраты и прочие затраты, а также налоги и накладные расходы (рассказать немного про каждый). Общая себестоимость проекта составляет _483 820 _ руб.

1. Оплата труда основного персонала (40,06% – 308 500 руб.)

• Включает зарплаты разработчиков, дизайнеров, тестировщиков

• Рассчитана по ставкам и трудоемкости (61 чел./день)

2. Отчисления на социальные нужды (13,92% – 42 108 руб.)

• Обязательные платежи в ПФР, ФСС, ФОМС (30% от ФОТ)

• Учитываются страховые взносы за сотрудников

3. Амортизационные отчисления (1,38% – 4 174,5 руб.)

• Износ оборудования (ноутбуки, серверы)

• Учитывается срок полезного использования техники

4. Материальные затраты (1,39% – 4 204,75 руб.)

• Лицензии на ПО (IDE, графические редакторы)

• Облачный хостинг и домены

• Расходные материалы

5. Прочие прямые затраты (7,66% – 23 171,5 руб.)

• Командировочные расходы

• Услуги внешних консультантов

• Регистрация домена и SSL-сертификаты

6. Налоги (3,80% – 11 495 руб.)

• Налог на имущество (если используется офис)

• Земельный налог (при наличии)

7. Накладные расходы (31,79% – 96 164,75 руб.)

• Аренда офиса (или коворкинг)

• Коммунальные платежи, интернет

• Административные и управленческие расходы

Слайд 5

Для данного проекта был составлен реестр рисков, который представлен на слайде.

Слайд 6

В матрице рисков можно видеть риски проекта распределенные в соответствии с вероятностью их наступления, а также по степени их влияния на проект. К наиболее вероятным и наиболее влиятельным рискам относятся отказ базы данных , утечка персональных данных пользователей, а к наименее вероятным и влиятельным задержка загрузки стиля шрифта, изображений.

Всего у проекта __4___ критических рисков: включая ________

Утечка персональных данных пользователей	Отказ базы данных
Технические ошибки в коде	Недостаточное финансирование

Слайд 7

Для управления рисками проекта предлагаются следующие мероприятия, представленные на слайде.

Слайд 8

В рамках технической части проекта выполнены работы по ____ (описать проделанную работу).

Backend (Flask + SQLAlchemy)

• Разработаны RESTful API для взаимодействия с клиентской частью

• Реализована аутентификация и авторизация 

• Настроена база данных с использованием SQLAlchemy ORM

• Оптимизированы SQL-запросы для снижения нагрузки на сервер

• Внедрена логирование ошибок и мониторинг API

Frontend (Angular)

• Создан адаптивный интерфейс (поддержка мобильных устройств)

• Реализованы динамические формы для публикации постов и комментариев

• Настроен роутинг между страницами форума

• Добавлена валидация данных на стороне клиента

• Настроен CI/CD (GitHub Actions для автоматического деплоя)

Слайд 9

При выполнении работы использовать инструменты

VS Code	Редактирование кода (Python, TypeScript)
Git / GitHub	Контроль версий, совместная разработка
TELEGRAM	Управление задачами и сроками
Figma	Прототипирование UI/UX

Слайд 10

Использовались такие технологии, как

Flask	Бэкенд: обработка запросов, бизнес-логика
SQLAlchemy	ORM для работы с SQLlite
Angular	Динамический фронтенд, SPA
RxJS	Управление состоянием приложения
Nginx	Прокси-сервер, балансировка нагрузки

Слайд 11

На слайде представлена структура страницы обсуждения, разработанной с использованием HTML5 и Angular.

Страница состоит из:

1. Навигационной панели (.navigation-bar), выполненной с помощью Flexbox, которая содержит ссылки на главную страницу и список обсуждений. Навигация одинаковая на всех страницах сайта.

2. Основного контента (.discussion-container), который включает:

   • Заголовок обсуждения с информацией об авторе (аватар, имя, дата создания)

   • Рейтинг обсуждения с возможностью голосования

   • Кнопку сохранения/удаления из сохраненных

   • Текст обсуждения

   • Секцию комментариев с формой добавления нового комментария

   • Список существующих комментариев с возможностью голосования за каждый

3. Стилизованных элементов интерфейса:

   • Адаптивное текстовое поле для комментариев с автоматическим изменением высоты

   • Интерактивные кнопки голосования с визуальным отображением текущего выбора пользователя

   • Всплывающие уведомления (snackbar) при выполнении действий

Слайд 12

Для разработанной страницы обсуждения применяются современные CSS-техники:

1. Основные стилевые решения:

   • Гибкая верстка с использованием Flexbox (.navigation-bar, .discussion-header, .comment-actions)

   • Семантическая цветовая схема в темных тонах с акцентами (#bb86fc)

   • Плавные переходы (transition) для интерактивных элементов

   • Тени (box-shadow) для создания глубины интерфейса

2. Ключевые селекторы:

   • Классовые селекторы (.discussion-content, .comment-form)

   • Составные селекторы (.nav-link:hover, .nav-link.active)

   • Псевдоклассы (:hover, :active) для интерактивных элементов

   • Псевдоэлементы (::-webkit-scrollbar) для кастомизации скроллбаров

3. Адаптивные техники:

   • Медиа-запросы для различных размеров экранов

   • Отзывчивые контейнеры с max-width и автоматическими отступами

   • Гибкие текстовые поля (.auto-expand-textarea)

4. Специальные эффекты:

   • Анимация изменения состояния кнопок голосования

   • Динамическое изменение высоты текстового поля комментария

   • Стилизованные уведомления с кастомными скроллбарами

Пример: Для кнопок голосования применяется комплексный стиль с изменением цвета и фона при наведении (псевдокласс :hover) и специальным оформлением активного состояния ([class.active]), что улучшает пользовательский опыт, визуально показывая текущий выбор пользователя.

Слайд 13

Таким образом, в ходе проделанной работы разработаны MVP игровой-форум Sigma, включающий:

1. Серверную часть:

   • RESTful API на Python (Flask)

   • Модели данных для пользователей, обсуждений и комментариев

   • Аутентификацию и авторизацию

   • Систему оценки контента

2. Клиентскую часть:

   • Адаптивный интерфейс на Angular

   • Систему навигации между разделами

   • Страницы:

     • Главная (список обсуждений)

     • Страница обсуждения с комментариями

     • Формы создания контента

   • Интерактивные элементы:

     • Голосование (лайки/дизлайки)

     • Динамические формы

     • Систему уведомлений

3. Ключевые функции:

   • Создание и управление обсуждениями

   • Комментирование и оценка контента

   • Персонализированные коллекции (избранное)

   • Адаптивный дизайн для всех устройств

Технологический стек:

• Frontend: Angular, TypeScript, SCSS, Angular Material

• Backend: Python, Flask, SQLAlchemy

• База данных: SQLite

Проект реализует современные подходы к веб-разработке, обеспечивая удобное взаимодействие пользователей с контентом и между собой.