Файл: Применение технологии для разработки 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