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

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

студентов.

Задачи исследования

Характеристика предметной области

Все что мы видим в интернете от одностраничного сайта до платформы, которая создает эти одностраничные сайты, называется - web-приложение. Web-разработка делится на backend и frontend. Что же это такое, давайте разбираться по подробней.

Frontend - это всё, что выполняется прямо в браузере. А тех, кто занимается фронтэндом называют frontend-разработчики или просто фротендеры. У фронтендера есть 3 главных инструмента.

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

Второе - это Css или просто стили. Это такой код, который помогает делать ваш сайт красивее. Благодаря Css, например, мы можем сделать кнопку красной или зеленой. Или сделать окошки внутри странички с закругленными углами. Или даже поиграться со шрифтами.

Третье - это JavaScript. Либо другие аналогичные скрипты, которые обрабатывают действия пользователя на сайте. Например, при регистрации

вы вводите свой пароль. И у вас появляется окно, что у вас не хватает каких-то символов или цифр. Это frontend-разработчик обработал ваши действия и написал вам, что у вас слишком простой пароль (это называется валидация).

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

backend происходит с помощью http-запросов (http - это протокол для передачи

данных). Эта передача данных происходит из браузера на сервер и обратно. И всё это происходит незаметно для пользователя.

1 2 3 4 5 6 7 8 9

Формулировка задачи

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

Цель работы – разработать вычислительное приложение на Next.js. Для достижения поставленной цели необходимо решить ряд задач:

подобрать необходимые инструменты разработки;
изучить технологии включенные в Next.js;
разработать веб-приложение;
опубликовать веб-приложение в сеть интернет; Вывод по разделу 1

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

Определение технологий и разработка веб-приложения

Выбор и настройка среды разработки

Определение среды разработки

Среда разработки (IDE), также единая среда разработки, ЕСР – комплекс программных средств, используемый программистами для разработки программного обеспечения (ПО) [2]. Среда разработки включает в себя:

текстовый редактор;
транслятор (компилятор и/или интерпретатор);
средства автоматизации сборки;
отладчик.

Выбор среды разработки

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

а) Brackets - благодаря специализированным визуальным инструментам и поддержке препроцессора Brackets - это современный текстовый редактор, который упрощает разработку в браузере (рисунок 1). Он создан с нуля для

веб-дизайнеров и разработчиков интерфейса [5].

плюсы Brackets:

встроенные редакторы;
предварительный просмотр веб-страниц в реальном времени;
комплексная поддержка препроцессора.

минусы Brackets:

плохая поддержка разработчиками;
мало обновлений;
мало функционала;
медленная работа приложения.

Рисунок 1 – Интерфейс редактора Brackets

б) Atom – бесплатный текстовый редактор с открытым исходным кодом для Linux, macOS, Windows с поддержкой плагинов, написанных на JavaScript (рисунок 2), и встраиваемых под управлением Git [9].

плюсы Atom:

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

минусы Atom:

ограниченный функционал;
неинтуитивный интерфейс.

Рисунок 2 – Интерфейс редактора Atom

в) Sublime Text – проприетарный текстовый редактор (рисунок 3). [10]

плюсы Sublime Text:

легкий и быстрый редактор;
удобные горячии клавиши.

минусы Sublime Text:

подходит в основном только для верстки;
проприетарность.

Рисунок 3 – Интерфейс редактора Sublime Text

г) Visual Studio Code – бесплатный. Построен на открытом исходном коде (рисунок 4). Запускается везде [14].