\documentclass[14pt, a4paper]{extarticle}
\usepackage[T1]{fontenc}
\usepackage{graphicx}
\usepackage{ragged2e}
\usepackage{float}
\usepackage{listings}
\usepackage{lscape}
\usepackage{array}
\usepackage{cmap}
\usepackage{xcolor}
\usepackage{listingsutf8}
\usepackage{multirow}
\usepackage{wrapfig}
\usepackage{subfigure}
\usepackage{tikz}
\usepackage[utf8]{inputenc}
\usepackage[english,russian]{babel}
\usepackage[left=3cm,right=1.5cm,top=2cm,bottom=2cm]{geometry}
\linespread{1.5}
\setlength{\parindent}{1.25cm}

\graphicspath{ {./images/} }

\usepackage{titletoc}
\usepackage{hyperref}
\renewcommand\thepart{\arabic{part}}
\renewcommand\thesection{\arabic{section}}
%\renewcommand\thesection{\arabic{part}.\arabic{section}}
\titlecontents{part}[0em]{\medskip\bfseries}%
{\thecontentslabel.\enspace}%numbered
{}%numberless
{\titlerule*[1.2pc]{.}\contentspage}%
%
\titlecontents{section}[0em]{\medskip\bfseries}%
{\thecontentslabel.\enspace}%numbered
{}%numberless
{\titlerule*[1.2pc]{.}\contentspage}%
%
\titlecontents{subsection}[0em]{\smallskip}%
{\thecontentslabel\enspace}%numbered
{}%numberless
{\normalfont\titlerule*[1.2pc]{.}\contentspage}%
%
\titlecontents{subsubsection}[0em]{\smallskip\bfseries}%
{\thecontentslabel\enspace}%numbered
{}%numberless
{\normalfont\titlerule*[1.2pc]{.}\contentspage}%


\title{Конспект по программированию}
\author{Евдакимов Н.В. 3ВбИТС}
\date{13.10.2024}

\definecolor{codegreen}{rgb}{0,0.6,0}
\definecolor{codegray}{rgb}{0.5,0.5,0.5}
\definecolor{codepurple}{rgb}{0.5,0,0.8}
\definecolor{backcolour}{rgb}{0.95,0.95,0.95}

\lstdefinestyle{pythonstyle}{
    language=Python,
    backgroundcolor=\color{backcolour},
    commentstyle=\color{codegreen},
    keywordstyle=\color{codepurple},
    numberstyle=\tiny\color{codegray},
    stringstyle=\color{codepurple},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=4,
    frame=single,
    rulecolor=\color{codegray}
}

\lstdefinestyle{jsstyle}{
    %language=JavaScript,
    backgroundcolor=\color{backcolour},
    commentstyle=\color{codegreen},
    keywordstyle=\color{codepurple}\bfseries,
    numberstyle=\tiny\color{codegray},
    stringstyle=\color{codepurple},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=4,
    frame=single,
    rulecolor=\color{codegray},
    morekeywords={async, await, let, const, var, function, return, if, else, for, while, do, switch, case, default, break, continue, try, catch, finally, throw, new, delete, typeof, instanceof, in, with, yield, export, import, from, class, extends, super, this, static, get, set}
}

\lstdefinestyle{dockerfilestyle}{
    backgroundcolor=\color{backcolour},
    commentstyle=\color{codegreen},
    keywordstyle=\color{magenta},
    numberstyle=\tiny\color{codegray},
    stringstyle=\color{codepurple},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=4,
    frame=single,
    rulecolor=\color{codegray},
    morekeywords={FROM,RUN,COPY,ADD,CMD,ENTRYPOINT,ENV,ARG,EXPOSE,WORKDIR,VOLUME,USER,LABEL,ONBUILD,STOPSIGNAL,HEALTHCHECK,SHELL,MAINTAINER},
    sensitive=true  % Учитывать регистр (инструкции обычно в UPPERCASE)
}

\lstdefinestyle{htmlstyle}{
    language=HTML,
    backgroundcolor=\color{backcolour},
    commentstyle=\color{codegreen},
    keywordstyle=\color{magenta},
    %tagstyle=\color{codered}\bfseries,  % Стиль тегов (например, <html>, </div>)
    %attributevalue=\color{codepurple},  % Если используется расширенная настройка
    stringstyle=\color{codepurple},
    numberstyle=\tiny\color{codegray},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=4,
    frame=single,
    rulecolor=\color{codegray}
}

\lstdefinestyle{dockercompose}{
    backgroundcolor=\color{backcolour},
    commentstyle=\color{codegreen},
    keywordstyle=\color{magenta},        % ключи верхнего уровня (services, networks и т.д.)
    stringstyle=\color{codepurple},      % строковые значения
    numberstyle=\tiny\color{codegray},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=2,
    frame=single,
    rulecolor=\color{codegray},
    % Дополнительная подсветка ключевых слов docker-compose
    morekeywords={services,version,volumes,networks,ports,environment,build,image,container_name,restart,depends_on},
    % Подсветка значений true/false/null как ключевых слов
    alsoletter={-},
    morekeywords=[2]{true,false,null}
}

\begin{document}
 
\begin{center}
\begin{figure}[h]
\begin{center}
	\includegraphics[scale=0.1]{logo.png}
\end{center}
\end{figure}
{\fontsize{10pt}{3.6pt}\selectfont МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ}\\
{\fontsize{10pt}{3.6pt}\selectfont федеральное государственное бюджетное образовательное учреждение высшего образования}\\
{\fontsize{10pt}{3.6pt}\selectfont \textbf{«МОСКОВСКИЙ АВТОМОБИЛЬНО-ДОРОЖНЫЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ (МАДИ)»}}\\
{\fontsize{10pt}{3.6pt}\selectfont Кафедра «Автоматизированные Системы Управления»}
\\
\vspace{0.5cm}
\textbf{КУРСОВОЙ ПРОЕКТ}\\
по дисциплине:\\
«Управление жизненным циклом объектов транспортного комплекса»\\
на тему:\\
«Создание ИЭТР по управлению сетевым оборудованием и устранению технических неполадок»\\
\end{center}
\vspace{0.5cm}
\hspace*{75mm} \textbf{Выполнил:}\\
\hspace*{75mm} Учебная группа: 4ВбИТС\\
\hspace*{75mm} ФИО: Евдакимов Н. В.\\
\hspace*{75mm} \textbf{Руководитель курсового проекта:}\\
%\hspace*{75mm} Должность: профессор\\
%\hspace*{75mm} Звание: кандидат технических наук\\
\hspace*{75mm} ФИО: Юрчик П.Ф.\\
\hspace*{75mm} 
\begin{tikzpicture}[remember picture, overlay]
    \draw (0, 0) node[inner sep=0, xshift=50mm, yshift=5mm]{\includegraphics[width=4cm]{pp.png}};
\end{tikzpicture}
Подпись \underline{\hspace{6.5cm}}\\
\hspace*{75mm} «\underline{\hspace{1cm}}» \underline{\hspace{5cm}} 20\underline{\hspace{1cm}} г.\\
\vspace{1.5cm}
\begin{center}
Москва, 2026 г.
\end{center}
\thispagestyle{empty}

\newpage
\setcounter{page}{1}

\tableofcontents
\setcounter{tocdepth}{3}

\newpage
\part*{}
\section{Введение}
При разработке любой современной информационной системы неизбежно возникает потребность в создании документации для конечного пользователя. Для удобства обращения современные документации также представляют собой интерактивные информационные системы, позволяющие оперативно определить проблему и переключить пользователя в необходимый раздел. 

Большинство современных Интерактивных Электронных Технических Руководств(ИЭТР) реализуются на стеках веб-технологий, что позволяет обеспечить универсальный и простой доступ, избавившись от сложностей, связанных с версионированием и актуализации данных, а также с необходимостью клиентов в хранении собственных копий документации.

\newpage
\section{Актуальность темы}
Современные предприятия и организации невозможно представить без развитой сетевой инфраструктуры. От её стабильной работы зависит доступ к данным, корпоративным сервисам и интернету. Любой сбой в сети мгновенно приводит к финансовым потерям, остановке бизнес-процессов и снижению общих результатов работы. Поэтому поддержка сетевой инфраструктуры становится одной из ключевых задач ИТ-подразделений.

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

Возникает потребность в новом инструменте, который объединит всю техническую документацию по сети в единую интерактивную среду. Именно такой инструмент называется интерактивным электронным техническим руководством, или ИЭТР. Разработка ИЭТР для системы поддержки сетевой инфраструктуры решает сразу несколько острых проблем. Снижается время диагностики и устранения аварий, так как специалист получает не просто описание, а логически выстроенный алгоритм действий. Минимизируются ошибки при настройке оборудования, ведь система может содержать интерактивные проверки и подсказки, привязанные к конкретной модели устройства. Упрощается ввод в должность новых сотрудников, поскольку всё знание о сети структурировано и доступно в одном месте.

Актуальность работы также продиктована общемировым трендом на цифровую трансформацию технического обслуживания. Создание ИЭТР для сетевой инфраструктуры — это шаг к построению единой базы знаний, которая развивается вместе с сетью. Такой проект не только повышает надёжность и скорость восстановления сервисов, но и формирует культуру управления сетевыми активами, что напрямую влияет на конкурентоспособность бизнеса в условиях цифровой экономики.

\newpage
\section{Описание предметной области}
Предметная область данной работы охватывает процессы эксплуатации и поддержания работоспособности корпоративной сетевой инфраструктуры. Современная сеть предприятия представляет собой сложный комплекс оборудования, в который входят маршрутизаторы, коммутаторы, серверы и точки беспроводного доступа. Бесперебойная работа всех этих устройств напрямую зависит от скорости реакции обслуживающего персонала на инциденты и от глубины понимания инженерами архитектуры сети. Основной проблемой классического подхода к обслуживанию является разрозненность информации. Техническая документация часто существует в виде бумажных руководств или статичных файлов, которые неудобно использовать прямо на месте аварии. Инженеры теряют время на поиск нужной схемы подключения, инструкции по настройке протокола или алгоритма поиска неисправности, что увеличивает время простоя бизнес-процессов.

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

\newpage
\section{Цель работы}
Целью данной курсовой работы является разработка интерактивного электронного технического руководства для поддержки сетевой инфраструктуры предприятия. Современная сетевая среда включает множество устройств, сложные топологии и постоянно обновляемое программное обеспечение. Техническая документация при этом часто хранится в разрозненных файлах и папках, что сильно затрудняет оперативный поиск нужных инструкций в критический момент. ИЭТР призвано решить эту проблему, объединив все материалы по сетям, методам их поддержки и настройки в единую интерактивную систему.

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

Разработка ИЭТР также направлена на стандартизацию процедур обслуживания. Когда все сотрудники следуют единым утверждённым алгоритмам, повышается общая надёжность инфраструктуры. Руководство должно служить и учебной базой для новых работников, помогая им быстрее освоить внутренние регламенты и особенности сетевой архитектуры. Таким образом, конечная цель заключается в создании практичного программного продукта. Он преобразует множество разрозненных документов в централизованный ресурс технической поддержки, делая процессы эксплуатации и администрирования сети более прозрачными, управляемыми и эффективными.

\newpage
\section{Задачи для достижения цели работы}
Для успешного выполнения работы необходимо развернуть статический сайт с реализованной на ней ИЭТР, которая включает в себя необходимые методические указания, регламентные работы, а также интерактивный диалог поиска неисправностей.

Разработка включает в себя следующие пункты:
\begin{itemize}
\item Выбор фреймворков, предназначенных для создания сетевой документации
\item Разработка интерактивного диалога
\item Создание и заполнение информации по регламентным работам, известным проблемам и специфике технологии
\item Размещение ресурса в сети "Интернет"
\end{itemize}
\newpage
\section{Метод реализации ИЭТР}
В качестве основного инструмента для создания интерактивного электронного технического руководства был выбран генератор статических сайтов Docusaurus. Это решение позволило сосредоточиться на содержании документации, а не на программировании интерфейса. Docusaurus работает с файлами в формате Markdown, что делает написание и редактирование текстов очень простым и доступным даже для специалистов без глубоких знаний веб-разработки. Весь материал по настройке сетевого оборудования, регламентам обслуживания и типовым процедурам поиска неисправностей был подготовлен именно в таком виде.

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

Итоговый ресурс предполагается к размещению в качестве веб-ресурса во внутренней сети предприятия. Такой подход гарантирует, что специалисты всегда обращаются к самой актуальной версии документации. Для развёртывания не требуется сложное серверное программное обеспечение, достаточно обычного веб-сервера. Сборка проекта генерирует набор статических файлов, которые очень быстро загружаются и не нагружают канал связи. Это оказалось критически важным, так как в случае частичной деградации сети само руководство должно оставаться легкодоступным и помогать восстановить работоспособность инфраструктуры.

\newpage
\section{Обоснование выбора метода реализации}
Выбор в пользу генератора документации Docusaurus был сделан прежде всего из-за его простоты и доступности для инженерного состава. Специалистам по сетям не требуется изучать языки программирования или сложные системы управления контентом, чтобы вести документацию. Все материалы пишутся в легковесном формате Markdown, который интуитивно понятен и близок к обычному тексту. Это позволило максимально быстро наполнить руководство реальными инструкциями по настройке коммутаторов, схемами VLAN и регламентами замены оборудования, не отвлекаясь на технические детали оформления.

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

Размещение итогового продукта как веб-ресурса во внутренней сети также повлияло на выбор инструмента. Docusaurus генерирует готовый набор статических файлов, что гарантирует очень быструю загрузку страниц и минимальную нагрузку на каналы связи. Это критически важно, когда к руководству обращаются в момент аварии или нестабильной работы сети. Кроме того, развёртывание не требует серверных баз данных или специального программного обеспечения, достаточно обычного веб-сервера. Сопровождение такого ресурса сводится к простой замене файлов при обновлении контента, а централизованное хранение исключает путаницу с версиями инструкций у разных сотрудников. Сочетание лёгкости написания документов, мощной интерактивности на базе React и надёжности статического веб-сайта сделало данный метод реализации оптимальным для создания системы поддержки сетевой инфраструктуры.

\newpage
\section{Ход работы}
\subsection{Создание интерактивного диалога}
\subsubsection{Блок-схемы}
Ниже приведены блок-схемы, иллюстрирующие общую схему интерактивного диалога.
\begin{figure}[h]
\centering
\includegraphics[width=0.5\textwidth]{problem1.png}
\caption{\centering
Ошибки подключения к Интернету при исправном функционировании локальной сети
}
\end{figure}
\newpage
\begin{figure}[h]
\centering
\includegraphics[width=0.5\textwidth]{problem2.png}
\caption{\centering
Ошибки подключения к локальной сети, не локализованные на одном устройстве
}
\centering
\includegraphics[width=0.5\textwidth]{problem3.png}
\caption{\centering
Ошибки подключения к Интернету при исправном функционировании локальной сети
}
\end{figure}
\newpage
\begin{figure}[h]
\centering
\includegraphics[width=0.5\textwidth]{problem4.png}
\caption{\centering
Ошибки подключения к сайтам при исправной работе интернета
}
\end{figure}
\subsubsection{Реализация диалога}
Для реализации диалога в системе Docusaurus было решено использовать встроенный функционал и создать небольшое React приложение.

При создании React приложения решено следовать классической парадигме программирования MVC, где роль Модели(Model) играет объект, реализующий паттерн Snapshot, в который сведены основные данные о вариантах развития диалога; роль Отображения(View) берёт на себя сам Docusaurus, предоставляя основные стили и интерфейс для дивалога; роль Контроллера(Controller) играет несколько асинхронных функций, обрабатывающих нажатия на кнопки.

Разделение уровня данных и уровня реализации осуществляется посредством выделения содержания объекта Snapshot в отдельный json файл.
\paragraph{Структура модели}
Модель представляет из себя объект типа "хэш-таблица", содержащий в качестве ключа тэг объекта-элемента, а в качестве значения - сам объект-элемент

Объект-элемент представляет собой любой объект, реализующий следующий интерфейс TypeSctipt:
\begin{lstlisting}[style=jsstyle]
interface Option {
  options?: Option[];
  text?: string;
  goto?: string;
  alert?: string;
}
\end{lstlisting}
\begin{enumerate}
\item Поле options представляет собой варианты ответа на вопрос - такие же объекты Option
\item Поле text представляет собой текст вопроса или ответа
\item Поле goto представляет собой тэг или ссылку для безусловного перехода к следующему Options или к выходу из диалога
\item Поле alert представляет собой сообщение выводящееся во всплывающем окне. Если alert нулевое, сообщение не выводится
\end{enumerate}

Безусловным слабым местом подобной схемы является смешение содержания вопросов, ответов на них и необходимых действий. Такое смешение требует от разработчика внимательного подхода при составлении схемы, так как поведение программы при попытке перейти из вопроса непосредственно в вопрос не определено - переход от вопроса к вопросу всегда требует промежуточного элемента с goto, так что дочерние элементы Option в options в строгом смысле не являются полноценными, так как не предполагают наличия своих полей options.

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

\paragraph{Структура контроллера}
Контроллер представляет собой React приложение, которое получает и парсит json объект модели в хэш-таблицу с названием \texttt{allOptions}.

Контроллер по умолчанию выбирает Option с тэгом \texttt{start} и назначет его в поле currentKey.

Контроллер рассматривает каждый соответствующий ключу Option и в случае, если он не содержит goto, выводит элементы поля options в качестве кнопок.

Наиболее существенным элементом контроллера является следующая анонимная функция, вызывающаяся при нажатии кнопок:

\begin{lstlisting}[style=jsstyle]
  const handleAnswerClick = (option: Option) => {
    if (option.alert) {
      alert(option.alert);
    }
    if (option.goto) {
      if (option.goto.startsWith("/")) {
        window.location.assign(option.goto);
        return;
      }
      setCurrentKey(option.goto);
      handleAnswerClick(allOptions[option.goto]);
    }
  };
\end{lstlisting}

Функция выпускает alert в случае наличия и, в случае наличия goto, переходит либо на нужную страницу( начинается с /), либо меняет текущий ключ и запускает рекурсивное выполнение.

Очевидными слабостями данной реализации являются два момента:
\begin{enumerate}
\item Рекурсия сама по себе
\item Возможность мягкой блокировки(softlock) в случае отсутствия у option полей options и goto
\end{enumerate}

Наличие этих слабостей объясняется тем, что любые возможные потенциальные проблемы связаны с наличием явных ошибок при составлении основного заранее определённого json файла, что по принципу единой ответственности переводит вопрос стабильности программы диалога в этой части к ведению QA и связанных инструментов проверки корректности файлов конфигурации:
\begin{enumerate}
\item Рекурсия в сколь-либо реалистичных сценариях может привести к проблеме переполнения стека лишь в случае нахождения цикла безусловного перехода - ситуации, когда существует замкнутая на себя посредством goto цепочка элементов Option.
\item Мягкая блокировка возникает лишь в случае наличия такого Option, который одновременно не содержит как поля options, так и goto.
\end{enumerate}

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

\paragraph{Структура отображения}

Основную реализацию отображения диалога берёт на себя, как это было отмечено ранее, фреймворк Docusaurus. Он подключается за счёт внедрения результата работы React приложения в качестве тела в производный HTML тэг \texttt{<Layout></Layout>}. Кнопки имеют стандартный для Docusaurus CSS класс \texttt{"button button--secondary button--lg"}

\subsection{Создание документации}

Документация в рамках Docusaurus ведётся в формате Markdown(*.md) - современном текстовом формате, совмещающим человекочитаемость, характерную для обычных текстовых документов, и набор упрощённых(в сравнении с LaTeX или HTML) тегов форматирования и гипертекстовой разметки. Этот формат надёжно закрепился в нише копирайтинга и поддерживается широким кругом ресурсов, включающим большинство социальных сетей и мессенджеров.

Для сложных задач Markdown поддерживает стандартные HTML теги, так как его спецификация подразумевает явное преобразование Markdown файлов в XHTML.

Также существует расширяющий возможности классического Markdown формат Markdown + JSX(*.mdx), представляющий собой zip архив с характерной структурой директорий и позволяющий инкапсулировать Markdown документы со всеми зависимостями - фото, видео и т.д.

\subsubsection{Известные ошибки}
Известные ошибки представляют собой конечные точки интерактивного диалога - те страницы, на которые осуществляется переход при разрешении диалога.

\subsubsection{Справка}
Включает в себя основную информацию по сетям

\subsubsection{Регламентные работы}
Включает в себя таблицу, содержащую описание основных регламентных работ, и подробную информацию по самим работам.

\subsection{Настройка Docusaurus}
Docusaurus в основном контролируется через два файла конфигураций в формате JS (*.js): \texttt{docusaurus.config.js} и \texttt{sidebars.js}.

\texttt{docusaurus.config.js} содержит основную часть конфигурации Docusaurus в формате объекта Config.

Наиболее существенными для проекта являются следующие поля:

\texttt{presets/themeConfig/navbar/items}, содержащий конфигурацию шапки проекта, включая основные разделы.

\texttt{presets/themeConfig/footer}, содержащий конфигурации нижнего контикула проекта.

\texttt{sidebars.js} содержит описание основных разделов сайта, а именно структуру с подобными полями:
\begin{lstlisting}[style=jsstyle]
stuffSidebar: [{ type: "autogenerated", dirName: "stuff" }]
\end{lstlisting}

MD страницы размещаются в директориях docs и blog, доступ к ним осуществляется по пути относительно базовых директорий без указания расширения

JS/TS страницы, в частности, разработанный интерактивный диалог, размещаются в директории src/pages. Там же находится базовая конфигурация сайта.

Домашняя страница находится в src/components/HomepageFeature

Все статические файлы(изображения, pdf-документы, архивы и т.д.) находятся в директории static
\subsection{Сборка в Docker}
Для удобства размещения рекомендуется использовать средства контейниризации вроде Docker, позволяющие минимизировать до разумного минимума зависимость работы приложения от среды.

\begin{lstlisting}[style=dockerfilestyle]
FROM node:26-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json* yarn.lock* ./
RUN if [ -f yarn.lock ]; then yarn install --frozen-lockfile; \
    elif [ -f package-lock.json ]; then npm ci; \
    else npm install; fi
COPY . .
RUN npm run build

### STAGE 2 ###

FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
\end{lstlisting}

Сборка проекта осуществляется в два этапа: сначала создаётся сборочная среда на базе NodeJS, которая собирает статический сайт, а следом результат сборки перемещается под обычный Nginx.

Сборка и запуск контейнера осуществляются посредством следующих двух команд:
\begin{lstlisting}[style=jsstyle]
docker build -t docusaurus-site .
docker run -p 8080:80 docusaurus-site
\end{lstlisting}

\subsection{Размещение в интернете}
Несмотря на то, что проект предполагается к размещению в локальных сетях, ничто не мешает разместить его в сети "Интернет".

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

Единственный существенный момент относится к вопросу размещения сайта на одном сервере с другими ресурсами и оформления необходимых TLS сертификатов. Для упрощения решения данной задачи был сделан выбор в пользу Caddy - современного открытого веб-сервера, который автоматизирует получение и пролонгирование сертификатов \texttt{Let's Encrypt}.

\subsection{Итоговая проверка}
В результате мы имеем ИЭТР. Ниже приложены снимки экрана

\begin{figure}[h]
\centering
\includegraphics[width=1\textwidth]{start_page.png}
\caption{\centering
Стартовая страница
}
\centering
\includegraphics[width=1\textwidth]{reglaments.png}
\caption{\centering
Регламентные работы
}
\end{figure}
\newpage
\begin{figure}[h]
\centering
\includegraphics[width=1\textwidth]{dialogue.png}
\caption{\centering
Диалог
}
\end{figure}


\newpage
\section{Заключение}
В ходе выполнения курсового проекта была достигнута основная цель - разработана полноценная интерактивная электронная техническая документация для поддержки сетевой инфраструктуры. Полученное решение объединило в себе подробные справочные материалы, практические руководства по настройке сетей и встроенный диалоговый помощник. Благодаря такому подходу пользователь получает не просто статичный набор инструкций, а живую систему, способную в реальном времени подсказывать дальнейшие шаги при решении типовых задач.

Основой для построения документации послужил генератор статических сайтов Docusaurus. Его использование позволило структурировать большой объём технической информации, обеспечить быстрый поиск и удобную навигацию между разделами. Вся документация автоматически адаптируется под любые устройства, что делает её доступной как с рабочего места инженера, так и с мобильного телефона во время выезда на объект. Версионирование материалов даёт возможность отслеживать изменения в регламентах обслуживания сетевого оборудования и при необходимости возвращаться к более ранним редакциям инструкций.

Ключевым интерактивным элементом системы стал диалоговый модуль, написанный на React. Он представляет собой встраиваемый компонент, который реагирует на запросы пользователя и выдаёт актуальные рекомендации, основываясь на содержании документации. С помощью этого диалога инженер может быстро уточнить параметры команды, найти описание неисправности или получить пошаговый план настройки конкретного сервиса. Интеграция помощника напрямую в структуру руководства сокращает время поиска информации и снижает вероятность ошибок при настройке сетевых узлов.

Для удобства развёртывания и переноса система была упакована в Docker-контейнер. Такой подход исключает зависимость от окружения сервера и гарантирует, что проект запустится одинаково стабильно на любой платформе. Образ контейнера содержит всё необходимое для работы, поэтому внедрение документации в инфраструктуру организации происходит за считанные минуты. Контейнеризация также упрощает масштабирование: при росте числа пользователей достаточно запустить несколько экземпляров сервиса.

Финальным этапом стало размещение готового продукта в сети Интернет. Для обеспечения безопасного доступа был выбран веб-сервер Caddy, который автоматически управляет SSL-сертификатами и настраивает защищённое соединение по протоколу HTTPS. Администратору не требуется вручную продлевать сертификаты или прописывать сложные правила маршрутизации, что заметно снижает порог входа для обслуживания всей системы. Таким образом, документация доступна сотрудникам из любой точки мира, а передаваемые данные остаются надёжно защищёнными.

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

\end{document}