Разработка приложения-сайта – социальная сеть

1.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ МОСКОВСКОЙ ОБЛАСТИ
ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ МОСКОВСКОЙ ОБЛАСТИ
"КОЛЛЕДЖ "ПОДМОСКОВЬЕ"
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ
РАБОТА
ДИПЛОМНЫЙ ПРОЕКТ
Тема: «Разработка приложения-сайта – социальная сеть»
Специальность: 09.02.07 «Информационные системы и программиро
Выполнил студент группы ИТ-19: Талызов И

2.

ВВЕДЕНИЕ
Одним из следствий научно-технического прогресса является
внедрение ЭВМ и интернета практически во все сферы жизни
человечества. В свою очередь, одним из побочных явлений
популяризации интернета являются социальные сети
Объект исследования – создание социальной сети.
Предмет
исследования
социальной сети.
–
разработка
web-приложения
Цель работы – создание завершенного веб-приложения.
Задачи проекта:
1) Изучение теоретических основ предметной области;
2) Создание клиентской части приложения;
3) Создание серверной части приложения;
4) Развертывание проекта на хостинге:
• Размещение файлов проекта на сервере;
• Получение домена;
• Получение SSL-сертификата;
• Развертывание SMTP-сервера

3.

ГЛАВА 1. ИССЛЕДОВАНИЕ ПРЕДМЕТНОЙ
ОБЛАСТИ
Социальные сети - это платформы, на которых пользователи
имеют такие возможности, как: создавать профиль, обмен
различной информацией, участвовать в группах, а также общаться
с другими пользователями сервиса.

4.

1.1. Классификация социальных сетей
1) По масштабу использования:
• Локальные - популярны на территории страны или региона.
• Глобальные – используются по всему миру

5.

2) По целевой аудитории:
• Общие – нет конкретной целевой группы, здесь могут быть люди
разных возрастов, интересов, геолокаций и другое.
• Профессиональные - поиск рабочих контактов, обмен информацией в
профессиональной среде.
• Интересные – обмен информацией по конкретным интересами.
3) По типу контента:
• Фото-социальные. Предназначение – обмен фотографиями и видео
между пользователями социальной сети
• Видео-социальные.
Предназначены
исключительно
для
обмена
видеоконтентом.
• Микроблоги. Короткие сообщения, новости, введение собственного
блога.
4) По способу коммуникации:
• Однонаправленные.
Социальные
сети
позволяют
выкладывать
контент без возможности комментирования.
• Двунаправленные. Позволяют пользователям общаться друг с другом
и комментировать публикации.
5) По сфере использования:
• Общие. Для общения с друзьями, родственниками и другими людьми.
• Специализированные. Обмен информацией в конкретной сфере
интересов.
• Профессиональные. Поиск работы и подбор персонала.

6.

1.2. Возможности социальных сетей
Сегодня социальные сети стали неотъемлемой частью жизни
любого человека, предоставляя множество возможностей:
• Общение. Пользователи могут легко найти новых друзей,
общаться со старыми знакомыми и делиться своими мыслями и
идеями.
• Обмен информацией. В социальных сетях пользователи могут
обмениваться информацией на любую тему – от новостей и
политики до кулинарии и животных.
• Создание сообществ. Социальные сети позволяют создавать
сообщества и группы, объединяющие людей с общими
интересами и увлечениями.
• Реклама.
Социальные
сети
являются
платформой для рекламы товаров и услуг.
эффективной
• Учеба и образование. Многие учебные заведения и университеты
используют социальные сети для обмена информацией,
организации учебного процесса и коммуникации студентов и
преподавателей.
• Развлечения. Социальные сети предоставляют множество
возможностей для развлечения, такие как игры, видео и музыка.

7.

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ
Название приложения – Exception.
Exception - прототип
дипломного проекта.
социальной
сети,
выполненный
в
рамках
Задачи, поставленные перед разработанной платформой:
Формирование профиля участника социальной сети,
Хранение и вывод сообщений пользователя,
Платформа для общения
Введение пользовательских групп, клубов по интересам
Группы пользователей:
Гость – неавторизированный пользователь
Участник – рядовой пользователь прошедший авторизацию.
Администратор - пользователь, который имеет доступ к управлению
всеми зарегистрированными пользователями и всеми группами
Побочные группы пользователей:
Участник беседы
Участник группы
Администратор беседы
Администратор группы

8.

2.1. Структура веб-приложения
URL
Значение страницы
https://demo-exception.space/
Получение общих сведений о сайте
https://demo-exception.space/help
Форма обратной связи
https://demo-exception.space/enter
Авторизация пользователя в
системе
https://demoexception.space/enter/reg
Регистрация пользователя в
системе
https://demoexception.space/enter/forget
https://demoexception.space/enter/recovery
Восстановление доступа для
пользователей, забывших пароль от
страницы
https://demo-exception.space/profile
Управление аккаунтом пользователя
https://demo-exception.space/message
Управление беседами пользователя
https://demoexception.space/message/viewer_mes
Просмотр истории сообщений беседы

9.

URL
Значение страницы
https://demo-exception.space/friends
Управление списками друзей, заявок
пользователя.
Просмотр списка пользователей,
зарегистрированных в системе
https://demoexception.space/profile/viewer_prof
Обозреватель профиля
https://demo-exception.space/group
Просмотр и управление списками
групп
https://demoexception.space/group/viewer_group
Обозреватель группы
https://demo-exception.space/news
Страница новостей пользователя
https://demoexception.space/group/edit_my_group
Обозреватель администрируемой
группы
https://demo-exception.space/option
Страница настроек
https://demo-exception.space/admin
Панель администрирования
https://demo-exception.space/**
Страница 404

10.

2.2. FrontEnd
Основа front-end приложения – это Angular.
Angular - это универсальный фреймворк для разработки вебприложений, созданный компанией Google. Angular использует модульную
архитектуру, позволяющую разрабатывать и поддерживать приложения
любого размера, от небольших виджетов до масштабных корпоративных
систем.
Главные преимущества Angular:
• Декларативность: Angular позволяет создать веб-приложение,
описывая его разметку и поведение.
• Разнообразный функционал: этот фреймворк содержит множество
функций, которые упрощают разработку приложений, такие как:
маршрутизация, работа с API, валидация форм и другие.
• Совместимость с другими библиотеками.
• Широкая
поддержка
со
стороны
сообщества:
множество
инструментов и плагинов предоставлено сообществом, что может
сильно упростить разработку.
• Высокая
производительность:
Angular
обладает
высокой
производительностью,
благодаря
интеграции
с
другими
инструментами Google, такими как Web Workers и Zone.js.
• Отличная документация: Angular имеет отличную и подробную
документацию, которая делает его простым для освоения и
использования.

11.

2.3. BackEnd
Серверное приложение создано на Node.js.
Node.js – это платформа для создания высокопроизводительных сетевых
приложений на языке JavaScript. Она предназначена для разработки
серверных приложений, позволяет запускать JavaScript-код на стороне
сервера, а не только в браузере. Node.js нативно поддерживает асинхронный
ввод-вывод, что делает его идеальным для обработки больших объемов
данных в режиме реального времени.
Основные преимущества Node.js:
• Быстродействие – Node.js базируется на движке V8 Chrome, что
обеспечивает высокую производительность и скорость работы;
• Асинхронность – благодаря неблокирующему вводу-выводу Node.js
обеспечивает высокую отзивчивость и масштабируемость;
• Поддержка пакетов – Node.js использует пакетный менеджер npm
(Node Package Manager), который позволяет быстро устанавливать и
использовать сторонние модули;
• Простота создания API – Node.js позволяет легко создавать RESTful
API благодаря библиотекам Express, Koa, Hapi и другим;
• Единый язык программирования – Node.js использует один язык
программирования – JavaScript, что делает его удобным для
разработки полноценных приложений.

12.

2.3. 1. Группы маршрутов серверного приложения

13.

2.4. Socket.io
Socket.IO - это библиотека JavaScript для обеспечения обмена данными в
режиме реального времени между клиентской и серверной стороной. Она
позволяет создавать приложения, которые могут передавать данные между
несколькими клиентами и сервером одновременно через веб-сокеты.
Socket.IO включает в себя два основных компонента: клиентскую
библиотеку и серверную библиотеку. Клиентская библиотека обеспечивает
подключение к серверу и передачу данных между клиентом и сервером в
режиме реального времени. Серверная библиотека обеспечивает обработку
входящих запросов и отправку данных обратно клиенту.

14.

2.4. База данных
MySQL - это реляционная система управления базами данных (СУБД),
которая разрабатывалась и поддерживалась компанией MySQL AB. Сейчас
она стала частью Oracle Corporation и имеет открытое и бесплатное
средство распространения лицензий. MySQL работает на множестве
операционных систем и является одной из наиболее популярных СУБД в
мире.
СУБД MySQL имеет следующие преимущества:
• Открытый исходный код. MySQL имеет открытый исходный код, что
позволяет разработчикам создавать свои собственные версии с базой
данных и дополнительными функциями.
• Бесплатная
и
доступная.
MySQL
доступна
бесплатно
и
распространяется под лицензией GPL.
• Простота установки и настройки. Установка и настройка MySQL
является относительно простой и может быть выполнена даже
начинающими пользователями.
• Надежность.
MySQL
обладает
высокой
надежностью
и
стабильностью, что позволяет использовать ее в критических
приложениях.

15.

2.4. 1. Схема БД

16.

2.5. Хостинг
Beget – это хостинг-провайдер, который предоставляет услуги
хостинга сайтов, регистрации доменных имен, аренды выделенных серверов.
Основные преимущества хостинг-провайдера Beget включают:
• Широкий спектр пакетов хостинга, от общего до VPS и выделенных
серверов, с различными уровнями цен и производительности.
• Бесплатное использование панели управления сайтом ISPManager,
которая облегчает процесс настройки и управления сайтом и
позволяет
пользователям
взаимодействовать
с
системами
безопасности, базами данных, почтовыми сервисами и другими
функциями.
• Круглосуточная техническая поддержка в режиме онлайн-чата и
тикет-системы, чтобы помочь пользователям решить любые
проблемы, связанные с хостингом.

17.

2.6. VPS
Для реализации проекта используется VPS потому что:
1) Экономически выгодное решение, в сравнении с хостингом и арендой
полноценных серверов.
2)
Полная свобода действий, самостоятельное администрирование
сервера.
Характеристика
Значение
IP-адрес
62.113.104.247
Количество ядер CPU
1
Объем ОЗУ
2 ГБ
Объем ПЗУ
10 ГБ
Пропускная способность
250 Мб/сек

18.

2.6.1. ПО, установленное на VPS
Название
Ubuntu 22.04
Роль
Операционная система
Nginx
Веб-сервер
MySQL
PHP
Node.js
СУБД
Программный модуль
платформа для создания
высокопроизводительных
сетевых приложений на
языке JavaScript
процесс менеджер для
Node.js-приложений
Pm2
snap
certbot
Значение
Работа всего сервера,
платформа для ПО
Работа клиентмкой
части приложения
Работа с БД
Работа с ЯП PHP
запуск JavaScript-код на
стороне сервера
управление и
мониторинг процессов
Node.js на сервере
система пакетирования
упаковывание
программного обеспечения приложений в песочницы
клиент для
автоматической
генерации и управления
SSL-сертификатами
Let's Encrypt
Генерация SSL
сертификата

19.

2.7. Экономическая часть
Статья расхода
Сумма, руб.
Фреймворк Angular
0,00
Node.js
0,00
Visual Studio Code
0,00
Аренда VPS на 2 месяца
596,58
Регистрация домена на 1 год
119,00
SSL сертификат на 3
0,00
месяца
Итого:
715,58

20.

ЗАКЛЮЧЕНИЕ
В рамках дипломной работы были проведены исследования и
проанализированы основные функциональные возможности существующих
социальных сетей.
Система разработана с использованием различных технологий и языков
программирования, таких как Angular, HTML, CSS, JavaScript, TypeScript и
другие.
Перспективы развития приложения:
Добавление нового функционала:
Увеличение количества ролей беседы;
Увеличение количества ролей группы;
Система модерации;
Изменение архитектуры приложения (Перевести
функций под Socket.io);
Редизайн;
Индексирование в поисковых системах;
Подключение Яндекс.Метрики;
Рекламные интеграции в малых количествах.
большинство
Результаты работы могут быть использованы в качестве основы для
разработки реальных социальных сетей и сервисов.