Файл: Применение технологии для разработки Next js веб приложения по.docx

Пользователь может перемещаться по приложению посредством нажатия на ссылки (рисунок 48), которые находятся вверху страницы (рисунок 49), либо подчеркнутые синим шрифтом слова (рисунок 47).

Рисунок 47 – Пример ссылки на главной странице

Рисунок 48 – Кнопка перехода на страницу реализованных задач

Рисунок 49 – Кнопки перехода по страницам веб-приложения в мобильной версии
Работы профессора Сафронова выложены в виде окон, которые можно открыть отдельным окном, либо скачать (рисунок 50).

Рисунок 50 – Прикрепленный файл на главной странице

Адаптивность и логика приложения

Адаптивность

Дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету, и динамически подстраивающийся под заданные размеры окна браузера [16]. Минимальной шириной приложения для безошибочной работы приложения выбрана ширина монитора в 375 пикселей. Данная ширина относится в основном к устройствам Apple, а именно модели Iphone 5, так как данные устройства продолжают пользуются люди.

Разработка велась под основные размеры экранов устройств Apple

(рисунок 51).

Рисунок 51 – Расширения мобильных устройств Apple Под основные размеры экранов Android (рисунок 52).

Рисунок 52 – Расширения мобильных устройств Android

И под основные экраны персональных компьютеров (рисунок 53).

Рисунок 53 – Логика блоков разных версий приложения Адаптивность реализована с помощью flex подхода при написании

визуальной части разработки приложения (рисунок 54).

Рисунок 54 – Код реализации flex подхода

А также с использованием @media в коде SCSS (рисунок 55).

Рисунок 55 – Код реализации @media подхода

Данный код изменяет дизайн определенных элементов при изменении ширины устройства.

Дизайн страницы реализованных задач при ширине экрана 1920 пикселей (рисунок 56).

Рисунок 56 – Дизайн страницы реализованных задач при ширине 1920 пикселей
Дизайн страницы реализованных задачи при ширине экрана 375 пикселей (рисунок 57).

Рисунок 57 – Дизайн страницы реализованных задач при ширине 375 пикселей
Дизайн подробной страницы о проекте при ширине экрана 1920 пикселей (рисунок 58).

Рисунок 58 – Дизайн подробной страницы о проекте при ширине

экрана 1920 пикселей
Дизайн подробной страницы о проекте при ширине экрана 375 пикселей (рисунок 59).

Рисунок 59 – Дизайн подробной страницы о проекте при ширине экрана 375 пикселей

Логика приложения

Доступ к основным страницам приложения доступны на всех страницах в области проекта, как в полной версии, так и в мобильной (рисунок 60).

Рисунок 60 – Логика приложения

Дополнительная навигация присутствует на главной странице. Файлы с проектами и разработками профессора Сафронова доступны только на главной странице.
Вывод по разделу 3

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

Заключение

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

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

Представление тезисов, графиков, выводов и контактной информации студентов позволяют

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

Большая часть исследований посвящена разработке предложенной эстафетной схемы метания. Детальные разработки этой предложенной схемы находят потенциальных заказчиков в виде отраслевых предприятий.

В качестве инструмента разработки был выбран Фреймворк Next.js. Он является инструментом разработки для оптимизации работы веб-приложения. А именно изображений и структуры страницы DOM. Разработка с помощью Next.js позволяет масштабировать приложение без дополнительного переписывания кода.

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

Список используемой литературы

Alex Banks, Eve Porcello Learning React. 2020 23с.
Atom (текстовый редактор) [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/Atom_(%D1%82%D0%B5%D0%BA%D1%81%D1

%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%80%D0%B5%D0%B4%D0

%B0%D0%BA%D1%82%D0%BE%D1%80)

Azat Mardan React Quickly. 2019 42 с.
CSS basics [Электронный ресурс] // URL: https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_b asics
Douglas Crockford How JavaScript Works. 2018 122 с.
HTML [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/HTML
IDE Brackets [Электронный ресурс] // URL: https://brackets.io/
IDE Vs Code [Электронный ресурс] // URL: https://code.visualstudio.com/
JavaScript [Электронный ресурс] // URL: https://developer.mozilla.org/ru/docs/Web/JavaScript
Mark Thomas React in Action. 2019 234 c.
Next.js SSR [Электронный ресурс] // URL: https://dev- gang.ru/article/ssg-protiv-ssr-v-nextjs-ph74uqpemd/
Next.js.org [Электронный ресурс] // URL: https://nextjs.org/
Node.js 1.1 [Электронный ресурс] // URL: https://metanit.com/web/nodejs/1.1.php
NPM [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/Npm
Sublime_Text [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/Sublime_Text
VisualStudio autoimport [Электронный ресурс] // URL: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
VisualStudio eslint [Электронный ресурс] // URL: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode- eslint&ssr=false#overview
Адаптивный веб-сайт [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D 0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-

%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD

Интегрированная среда разработки [Электронный ресурс] // URL: https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D0%B3% D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D 0%B0%D1%8F_%D1%81%D1%80%D0%B5%D0%B4%D0%B0_%D1%80%D0

%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0% B8