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

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

студентов.

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

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

Все что мы видим в интернете от одностраничного сайта до платформы,которая создает эти одностраничные сайты, называется - web-приложение.Web-разработка делится на backend и frontend. Что же это такое, давайтеразбиратьсяпоподробней.Frontend-этовсё,чтовыполняетсяпрямовбраузере.Атех,ктозанимаетсяфронтэндомназываютfrontend-разработчикиилипростофротендеры.У фронтендера есть3главныхинструмента.Первое-этоHtml.Этоязыкразметки,которыйпомогаетбраузерупонять, как и где расположить блоки, текст, картинки и т.д. на странице.Например, вверху мы располагаем шапку сайта, по центру мы располагаемкаталогвещей,а внизуссылки на соцсети.Второе - это Css или просто стили. Это такой код, который помогаетделатьвашсайткрасивее.БлагодаряCss,например,мыможемсделатькнопкукраснойилизеленой.Илисделатьокошкивнутристраничкисзакругленнымиуглами.Или даже поиграться со шрифтами.Третье -это JavaScript. Либо другие аналогичные скрипты, которыеобрабатываютдействияпользователянасайте.Например,прирегистрации

---

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

2. 1   2   3   4   5   6   7   8   9

---

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

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

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

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

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

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

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

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

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

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

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

---

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

1. 
   плюсы Brackets:
   

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

минусы Brackets:

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

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

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

1. 
   плюсы Atom:
   

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

минусы Atom:

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

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

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

1. 
   плюсы Sublime Text:
   

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

минусы Sublime Text:

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

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

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

1. 
   плюсы Visual Studio Code:
   

• 
  кастомизация;
  
• 
  быстрота;
  
• 
  поддержка разработчиками Microsoft;
  
• 
  огромная библиотека расширений.
  

---

минусы Visual Studio Code:

• 
  большое количество инструментов, которые не нужны большинству разработчиков.
  

Мой выбор пал на Visual Studio Code, так как по соотношению плюсов и минусов он самый подходящий.



Рисунок 4 – Интерфейс редактора Visual Studio Code

3. 1   2   3   4   5   6   7   8   9

---