Connect-10

• Авторы
• Руководители
• Файлы работы
• Наградные документы

Комаровский А.Г. 1

---

1ГБОУ МО "Одинцовский "Десятый лицей"

Пименова О.Р. 1

---

1ГБОУ МО "Одинцовский "Десятый лицей"

Работа в формате PDF

782.6 KB

Автор работы награжден дипломом победителя I степени

Диплом школьникаСвидетельство руководителя

Название: Connect-10

Автор: Комаровский Алексей, 10 «Б» класс

Научный руководитель: Пименова Ольга Рушановна, учитель информатики

Цель: создать веб-приложение (социальную сеть) для оптимизации процесса дистанционной коммуникации между учителями, учениками и родителями в рамках одной школы.

Задачи:

Изучить языки разметки HTML и CSS.

Изучить языки программирования JavaScript и PHP.

Изучить принцип создания веб-приложений и сайтов.

Спроектировать минималистичный и удобный дизайн.

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

Написать программный код серверной части приложения.

Имплементировать связь между серверной и клиентской частями приложения.

Протестировать готовое приложение на наличие ошибок и багов, затем исправить их.

Представить полученный результат на научно-практической конференции.

Даты:

Сентябрь 2021 – Идея создания социальной сети.

Октябрь 2021 – Разработка дизайна приложения, начало создания клиентской части.

Октябрь 2021 – Январь 2022 – Разработка клиентской части приложения.

Январь – Март 2022 – Разработка серверной части приложения.

Материальное обеспечение: Персональный компьютер, среда разработки PHP Storm, локальный веб-сервер XAMPP, браузер Google Chrome.

Оглавление

Введение

Актуальность работы: сегодня социальные сети играют огромную роль в жизни современного общества. Они позволяют поддерживать связь со своими друзьями, знакомыми, коллегами, родными даже на большом расстоянии, нужен лишь доступ к интернету. По статистике, более 40% населения планеты пользуются социальными сетями для обмена информацией.

Проблема проектной работы: В связи со сложившейся в мире ситуацией в последствии вируса, остро встаёт вопрос о дистанционном обучении, в частности о процессе сообщения между учителями и учениками. Отличным решением этого вопроса является школьная социальная сеть.

Цель работы: создать веб-приложение (социальную сеть) для оптимизации процесса дистанционной коммуникации между учителями, учениками и родителями в рамках одной школы.

Задачи проекта:

1. Изучить языки разметки HTML и CSS.

2. Изучить языки программирования JavaScript и PHP.

3. Изучить принцип создания веб-приложений и сайтов.

4. Спроектировать минималистичный и удобный дизайн.

5. Сверстать клиентскую часть приложения, опираясь на ранее созданный макет.

6. Написать программный код серверной части приложения.

7. Имплементировать связь между серверной и клиентской частями приложения.

8. Протестировать готовое приложение на наличие ошибок и багов, затем исправить их.

9. Представить полученный результат на научно-практической конференции.

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

Экологическая оценка продукта: моё веб-приложение абсолютно безвредно для окружающей среды: всё, что надо для его работы – компьютер или смартфон с доступом в интернет.

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

Прогнозируемые результаты:

Научиться верстать веб-страницы с помощью языков разметки HTML и CSS

Научиться разрабатывать приложения на языке PHP

Создать веб-приложение – школьную социальную сеть «Connect-10»

Этапы работы над проектом:

Изучение языков разметки HTML, CSS и языков программирования JavaScript, PHP. Результат – освоение базовых навыков пользования этими языками.

Изучение принципа работы веб-приложений. Результат – получение представления о работе веб-приложения и сайтов.

Разработка дизайна приложения. Результат – готовый макет для последующей вёрстки.

Создание клиентской и серверной частей приложения. Результат – готовое веб-приложение.

Тестирование готового приложения, поиск ошибок и багов. Результат – готовое протестированное веб-приложение.

Глава 1. Теоретическая часть.

1.1 Термины

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

Фронтенд (frontend) – пользовательская, визуальная часть веб-сайта.

Бэкенд (backend) – серверная часть веб-сайта.

Стек технологий – набор используемых при разработке технологий.

Сайд-бар – боковое меню

1.2 Что такое веб-приложение?

Веб-приложение — клиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера. Простыми словами, веб-приложение — это полноценная программа, доступ к которой осуществляется через браузер.

По сравнению с обычным сайтом, веб-приложение имеет обширный функционал и интерактивные элементы.

Для работы веб-приложения требуются клиент и сервер. В роли клиента выступает браузер пользователя, серверная же часть располагается на удаленном облаке, доступ к которому предоставляется через интернет.

1.3 Языки разметки HTML и СSS

HTML (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык разметки веб-страниц. Это структура сайта, его разметка, которая интерпретируется браузерами и отображается пользователю.

CSS (от англ. Cascading Style Sheets «каскадные таблицы стилей») – формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки. Проще говоря, это визуальная часть приложения.

HTML и CSS являются единым стандартом и лежат в основе каждого веб-приложения или сайта, поэтому актуальность данных языков разметки неизмеримо велика и, скорее всего, будет столь же велика еще долгое время.

1.4 Язык программирования JavaScript

JavaScript – язык программирования. Наиболее широко используется как язык сценариев для придания интерактивности веб-страницам. Однако также находит применение и в backend-разработке, разработке мобильных и десктопных приложений и т.д. В нашем приложении мы используем JavaScript для получения данных фильмов и сериалов из базы данных, создания интерактивности интерфейса, а также для отправки запросов на сервер.

JavaScript – универсальный, постоянно развивающийся и востребованный язык программирование, который выполняет все поставленные перед ним задачи. JavaScript не имеет конкурентов в области веб-разработки, ведь в них нет потребности.

1.5 Язык программирования PHP

PHP – скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

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

Глава 2. Практическая часть. Создание веб-приложения «Connect-10»

2.1 Разработка дизайна.

Первым этапом создания моего проекта стала разработка макета приложения. Я долго не мог прийти к какому-либо решению, касаемого дизайна, каждый новый вариант мне чем-то не нравился, поэтому спустя довольно долгое время я решил обратиться к уже существующем социальным сетям и подчерпнуть несколько идей. В итоге у меня получился красивый и минималистичный дизайн, довольно удобный для использования. Дизайн проектировался в известном сервисе для разработки интерфейсов – Figma.

2.2 Создание фронтенда

Первым этапом создания моего проекта стала разработка макета приложения. Я долго не мог прийти к какому-либо решению, касаемого дизайна, каждый новый вариант мне чем-то не нравился, поэтому спустя довольно долгое время я решил обратиться к уже существующем социальным сетям и подчерпнуть несколько идей. В итоге у меня получился красивый и минималистичный дизайн, довольно удобный для использования. Дизайн проектировался в известном сервисе для разработки интерфейсов – Figma.

2.3 Создание бэкенда

Визуальные элементы – это конечно хорошо, но они пока никак не взаимодействуют с данными

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

После создания базы данных, я начал разработку скриптов. Были реализованы функции авторизации, регистрации, рендера профиля пользователя, получения информации о пользователе.

Затем я создал сервер, работающий по протоколу WebSocket, который позволяет установить постоянное двунаправленное соединение с клиентом, что в свою очередь позволяет мгновенно передавать данные как от клиента на сервер, так и с сервера клиенту.

2.4 Рефакторинг

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

2.5 Концепция работы приложения

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

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

При регистрации пользователю надо заполнить небольшую форму: указать свои имя, фамилию, электронную почту, другие контактные данные и придумать пароль.

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

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

На странице «Моя страница», как следует понимать из названия, расположен профиль пользователя – владельца аккаунта, с которого выполнен вход в приложение. На этой странице можно создать новую запись в своей новостной ленте, отредактировать общедоступную информацию.

На странице «Сообщения» пользователь может просмотреть список своих диалогов с другими пользователями, открыть любой из них и написать сообщение.

На странице «Друзья» можно посмотреть список своих друзей, взаимодействовать с каждым из них, правда пока-что из доступного – написать сообщение и удалить из друзей, а также можно найти пользователей по имени или фамилии, введя их часть в соответствующем поле ввода.

На странице «Новости» расположена лента новостей других пользователей – список записей, которыми пользователи хотят поделиться.

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

2.6 Этапы создания приложения

Для разработки моего приложения использовалась среда разработки PHP Storm.

Можно выделить 8 основных этапов разработки:

1. Изучение материалов и документаций языков HTM, CSS, JavaScript, PHP.

2. Изучение других веб-приложений, их анализ и создание примерного функционала приложения.

3. Создание дизайна приложения.

4. Работа над фронтендом приложения.

5. Работа над бэкендом приложения.

6. Реализация функционала приложения.

7. Установление взаимосвязи между фронтендом и бэкендом.

8. Тестирование готового приложения.

2.7 Проблемы, с которыми пришлось столкнуться

1. Настройка локального веб-сервера.

2. Неправильное отображение приложения в разных браузера.

3. Поломка клавиатуры.

4. Ошибки кодировки файлов.

Выводы по второй главе:

1. Результатом моей работы стала рабочая школьная социальная сеть, написанная на языке программирования PHP.

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

3. Разработка приложения состояла из 8 этапов, самым трудным из них было – написание бэкенда, самым долгим – изучение используемых языков.

ЗАКЛЮЧЕНИЕ

Подводя итоги работы в рамках проекта, можно сделать следующие выводы:

1 JavaScript— это легковесный, интерпретируемый или JIT-компилируемый, объектно-ориентированный язык с функциями первого класса.

2. JavaScript стабильно входит в десятку самых популярных языков программирования.

3. На JavaScript можно создавать абсолютно любые приложения, этот язык отлично подходит и для взаимодействия с визуальными элементами, и для написания серверной части приложения.

4. HTML и CSS – единственные в своем роде языки разметки, пришедшие на смену XML.

5. PHP — интерпретируемый язык программирования, позволяющий создавать программы в процедурном и объектно-ориентированном стиле.

6. Результатом моей работы стала рабочая школьная социальная сеть, написанная на языке программирования PHP.

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

8. Разработка приложения состояла из 8 этапов, самым трудным из них было – написание бэкенда, самым долгим – изучение используемых языков.

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

Используемые источники

1. Рейтинг The RedMonk о востребованности языков программирования на июнь 2021 -

https://redmonk.com/sogrady/2021/08/05/language-rankings-6-21.

2. Официальный сайт PHP –

https://www.php.net/.

3. Рейтинг языков программирования Octoverse 2021 -

https://octoverse.github.com/#top-languages-over-the-years.

4. Современный учебник JavaScript –

https://learn.javascript.ru/.

5. Официальный сайт JavaScript -

https://www.javascript.com/.

6. Справочник по HTML и CSS -

http://htmlbook.ru/

Приложение

1.PHP код авторизации пользователя

2.PHP код получения списка друзей пользователя

3. CSS код для страницы пользователя

4.PHP код взаимодействия с друзьями

5. Список диалогов

6. Профиль пользователя