XVI Международный конкурс научно-исследовательских и творческих работ учащихся

Старт в науке. Летняя площадка 2022

РАЗРАБОТКА АВТОМАТИЗИРОВАННОГО ВЕБ-ПРИЛОЖЕНИЯ С РАСПИСАНИЕМ

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

Елембаев-Беломорских Р. 1Жиделев Н. 2

---

1МАОУ «Гимназия №17», Г. Пермь

2МАОУ «Гимназия №17», г. Пермь

Пухова Ю.И. 1Петрова В.И. 2

---

1МАОУ «Гимназия №17», Г. Пермь

2МАОУ «Гимназия №17», г. Пермь.

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

2.3 MB

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

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

ВВЕДЕНИЕ

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

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

Объект исследования: проектная деятельность по созданию веб-приложения.

Предмет исследования: создание веб - приложения.

Цель - создание веб-приложения на основе серверного языка NODEJS. Считывание файла excel формата и вывод данных на фронтенд.

Задачи:

Изучение фреймворка javascript – NODEJS

Изучение основных языков: разметка(html), таблица стилей(css),

язык программирования(javascript)

Обработка excel файла

Вывод данных на фронтенд

Размещение сервера на хостинге

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

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

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СОЗДАНИЯ САЙТОВ И ВЕБ-ПРИЛОЖЕНИЙ.

1.1 Конструктор

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

Плюсы:

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

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

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

Минусы:

За первичной дешевизной часто скрываются дополнительные, порой значительные, траты: размещение на хостинге, домен второго уровня (по типу example.ru), электронная почта с именем домена и др.;

Тяжеловесность сайта. Сайт, сделанный на конструкторе всегда будет загружаться дольше аналогичного сайта, сделанного на CMS или разработанного самостоятельно. Объясняется это тем, что конструктор содержит в себе огромное количество программного кода, который не относится к Вашему сайту, но необходим для построения его итогового внешнего вида.

1.2 CMS

В данном случае рассмотрим самую популярную CMS – WordPress.

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

Плюсы:

Бесплатный доступ. Почти все CMS (кроме 1С-Битрикс) изначально бесплатны, а кроме того, в сети существует множество готовых шаблонов сайтов под них (особенно под WordPress). Берете любой понравившийся, меняете дизайн под себя и сайт готов;

Удобное управление контентом. С помощью панели управления управлять сайтом легко и просто. При использовании CMS не требуется особых навыков для управления контентом;

Множество готовых решений. В сети существует масса модулей, плагинов, дополнений для различных задач (от слайдеров для картинок до систем seo-оптимизации и сопровождения пользователя).

Минусы:

Уязвимость сайта. Самый важный минус любой широко распространенной CMS. Даже сайты, сделанные на конструкторах порой лучше защищены от взлома, чем те, которые находятся под управлением WordPress и других CMS. Даже платная 1С-Битрикс признана далеко не самой надежной и защищенной от атак и проникновения;

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

1.3 Самостоятельная разработка

Самый творческий и свободный, но и самый трудоемкий процесс, сравнимый с пошивом костюма по фигуре. Написание сайта или веб-приложения требует серьезных знаний не только по самим языкам программирования, но и пониманию архитектуры (php, java, nodejs, python, ruby, golang). При этом, создавая сайт с нуля, клиент получит уникальный и персонифицированный продукт, который будет решать его задачи и не тратить время на лишние процессы. Самостоятельная разработка позволяет создавать проекты любой сложности и по любым пожеланиям клиента.

Плюсы:

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

Широкие возможности продвижения. В отличие от CMS и конструкторов, продвинуть в естественном поиске самостоятельно разработанный сайт намного легче. Кроме того, в нашей студии, при заказе корпоративного сайта или интернет-магазина, подготовительный этап к seo-продвижению входит в стоимость разработки;

Индивидуальный дизайн. Только чистый код позволит Вам создать тот продукт, который Вы видите и хотите получить. Отдельно можно отметить, что грамотный подход к UI/UX может быть только при использовании чистого кода, так как при использовании CMS, клиент вынужден обращаться к готовым решениям, которые могут не отвечать всем его потребностям.

Минусы:

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

Выводы по главе 1:Проанализировав данные о создании сайта самым оптимальным решением стала самостоятельная разработка. Так как для разработки приложения с логикой и анализом каких-то входных данных (файл excel) нужны определенные библиотеки и самостоятельная логика вывода для подходящего оформления и дизайна. Изучаемыми языками для самостоятельной разработки стали: html, css, javascript и фреймворк nodejs.

ГЛАВА 2. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ

2.1 Создание html-страниц с расписанием

В ходе задумки автоматизированного сайта была написана первая версия приложения. Для данной версии неавтоматизированного приложения были написано несколько html страниц.

Две основные таблицы – это таблицы с расписанием классов на текущую половину года (рис.1). Таблицы заполнялись вручную и в самом коде, что неудобно и неправильно.

Рис.1. Нtml страница основного расписания

Следующими были написаны две html страницы – актуальные изменения для 1 и 2 смены (рис.2). Таблицы заполнялись вручную в самом коде каждый день. Данные заполнения показали, что неавтоматизированное приложение содержит множество минусов. Самым главным из них стало время заполнения и невозможность в некоторые дни заполнить изменения.

Рис.2. Нtml страница с изменениями

Затем была сделана кнопка переключения по дням недели. Кнопка содержала в себе 6 дней недели и представляла собой выпадающий список (рис. 3).

Рис.3. Кнопка с днями недели

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

Рис.4. Header (верхняя панель управления сайтом)

В завершении был сделан footer (нижняя панель управления приложением, рис.5). В нём мы поместили ссылки на таблицы с расписанием и написали авторов веб-приложения.

Рис.5. Окончательный вид с footer (нижней панелью управления приложением)

Также в течение всей работы над написанием первой версии подобрали наиболее спокойные цвета, чтобы приложение было в одной цветовой гамме и при просмотре не резал глаз.

Новинкой для приложения стала страница с объявлениями (рис.6).
Здесь можно посмотреть дополнительную информацию по уроку или консультации выбрав в списке свой класс. Страница тоже заполнялась вручную каждый день, что занимало много времени.

Рис.6. Нtml страница с объявлениями

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

Ссылка на веб-приложение первой версии: https://raspisaniye-17-gimnaziya.github.io/2_Smena/.

Приведём посещаемость 1 версии веб-приложения в течении ноября 2021 года (рис. 7). Отметим высокую степень посещаемости, учитывая, что проект был запущен в тестовом режиме для обучающихся 7 классов.

Рис. 7. Количество просмотров в ноябре 2021 года

Таблица 1. Обновления и количество просмотров сайта

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

Одним из качественных изменений было создание QR-код табличек для быстрого доступа к веб-приложению. Учитывая, что каждый школьник или учитель имеет у себя мобильный телефон с доступом в интернет, мы предположили, что QR-код для посещения приложения будет востребованным.

Нами был разработан яркий заметный дизайн (рис.8). 9 ноября 2021 года qr-коды расклеены в четырёх кабинетах и выданы каждому обучающемуся 7 классов.

Рис.8 Табличка QR-кода с расписанием

2.2 Создание сервера nodejs и обработка excel файла

Первый этап – инициализация проекта:

Для этого просто напишем в терминал (находясь в папке проекта)

команду npm init –y

Рис. 9. Инициализация проекта

Для создания сервера используется модуль http.

Рис.10. Подключение модуля http

Обработка запросов и ответов сервера осуществляет метод createServer. Передаваемыми параметрами будут: request(запрос) и response(ответ).

Рис. 11. Добавление метода createServer()

Обработка excel файла

Для считывание файла формата excel существует библиотека exceljs

Рис.12. Подключение библиотеки excel

Выделение нужных модулей для считывания.

Рис. 13. Определение пути до нужного файла excel

Создание функции считывания и получение рабочего листа:

Рис.14. Получение рабочего листа

(для считывания классов использовались регулярные выражения)

Создание цикла считывания таблицы (столбцы и строки)

Рис.15 Цикл обработки файла excel (приведена часть кода)

Для удобства удалим из массива со считанными данными значения null

Рис.16 Функция удаление элементов из объекта (приведена часть кода)

2.3 Вывод данных на фронтенд

Фронтенд (англ. front-end) — клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса.

Создание верстки.

Скелет приложения был написан на html и стилизован с помощью css внутри сервера nodejs (response).

В полноценном автоматизированном приложении следует передать количество выполненной работы через правильно оформленный дизайн. Нашей задачей было сделать интерфейс более удобным и привлекательным.

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

На заднем плане можно увидеть фотографию нового здания школы.

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

Можно вспомнить объявления из первой неавтоматизированной версии приложения. В новой автоматизированной версии идея усовершенствуется. Теперь дополнительная информация размещается чуть ниже таблицы, основываясь на нажатой кнопке класса.

Рис.17. Html структура автоматизированного приложения

Выделение элементов таблицы с помощью javascript внутри сервера nodejs(response).

Рис. 18. Выделение элементов автоматизированной структуры (часть кода)

Вывод классов в виде кнопок.

Рис.19 Пример кнопок (пример вывода классов)

Рис. 20. Вывод кнопок (приведена часть кода)

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

Рис.21 Вывод уроков и кабинетов (приведена часть кода для одной кнопки)

ЗАКЛЮЧЕНИЕ

В ходе разработки нами были изучены такие языки программирования как: html, css, javascript, фреймворк nodejs. Было создано автоматизированное веб-приложение на основе серверного языка NODEJS, со считыванием файла excel формата и вывод данных на фронтенд основываясь на нажатую кнопку класса пользователем. Процесс создания автоматизированного приложения был увлекательный и захватывающий.

Поставленная цель – создание веб-приложения на основе серверного языка NODEJS и считывание файла excel формата и вывод данных на фронтенд достигнута.

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

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

https://www.sololearn.com/

https://www.udemy.com/

https://metanit.com/

https://learn.javascript.ru/