BMSTU/03-mmt-lab-04-report.tex

\documentclass[a4paper]{article}

\input{../common-preamble}
\input{../bmstu-preamble}
\input{../fancy-listings-preamble}

\numerationTop

\begin{document}
\fontsize{14pt}{14pt}\selectfont % Вполне очевидно, что мы хотим 14й шрифт, все его хотят
\thispagestyle{empty}
\makeBMSTUHeader

\makeReportTitle{лабораторной}{4}{Разработка мультимедийного веб-приложения}{Мультимедиа технологии}{}{Д.А. Видьманов}
\newpage
\thispagestyle{empty}
\tableofcontents
\newpage
\pagestyle{fancy}
\sloppy
\section{Цель}
Целью работы является приобретение навыков создания мультимедийных веб-приложений. Создать мультимедийное веб-приложение.

\section{Задачи}
\begin{enumerate}
\item Установить среду разработки;
\item Описать критерии создания приложения;  
\item Написать код и отладить работу приложения.
\end{enumerate}

\section{Выполнение работы}
Для написания мультимедйного приложения был выбран фреймворк Spring Boot. Разрабатываемое приложение - это единый мультимедийный просмотрщик файлов (офисные документы, pdf). Для реализации мультимедийности были выбраны несколько компонентов и создан экран, основной частью которого является область просмотра.

Иерархия проекта выглядит так, как показано на рис. \hrf{pic:hierarchy}

\begin{figure}[H]
  \centering
  \includegraphics[width=100mm]{03-mmt-lab-04-hierarchy.png}
  \caption{Иерархия проекта}
  \label{pic:hierarchy}
\end{figure}

Основным классом является класс презентации, содержащий название, описание и ссылку на прикрепленный файл. Исходный код класса представлен в листинге \hrf{lst:present}.

\begin{lstlisting}[language=Java,style=JCodeStyle,caption={Presentation.java},label={lst:present}]
@Table(name = "PRESENTATION")
@Entity
public class Presentation {
    @JmixGeneratedValue
    @Column(name = "ID", nullable = false)
    @Id
    private UUID id;

    @InstanceName
    @Column(name = "NAME")
    private String name;

    @Column(name = "DESCRIPTION")
    private String description;

    @Column(name = "FILE")
    private FileRef fileRef;

    public UUID getId() {
        return id;
    }

    public void setId(UUID id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public FileRef getFileRef() {
        return fileRef;
    }

    public void setFileRef(FileRef fileRef) {
        this.fileRef = fileRef;
    }
}
\end{lstlisting}

Макет экрана представлен на рис. \hrf{pic:screendraft}, а исходный код контроллера в листинге \hrf{lst:present-edit}

\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-04-screendraft.png}
  \caption{Макет экрана}
  \label{pic:screendraft}
\end{figure}

\begin{lstlisting}[language=Java,style=JCodeStyle,caption={PresentationEdit.java},label={lst:present-edit}]
  @UiController("Presentation.edit")
  @UiDescriptor("presentation-edit.xml")
  @EditedEntityContainer("presentationDc")
  public class PresentationEdit extends StandardEditor<Presentation> {
    @Autowired
    private BrowserFrame fileLookup;

    @Subscribe
    public void onAfterShow(AfterShowEvent event) {
      Presentation presentation = getEditedEntity();
      if (Objects.nonNull(presentation.getFileRef())) {
        fileLookup.setSource(FileStorageResource.class)
        .setFileReference(presentation.getFileRef());
      }
    }
  }
\end{lstlisting}

Приложение запускается по адресу localhost:8080/app и имеет вид, представленный на рисунках \hrf{pic:welcome}, \hrf{pic:browse}, \hrf{pic:edit-and-view}.

\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-04-welcome.png}
  \caption{Приветственное окно}
  \label{pic:welcome}
\end{figure}
\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-04-browse.png}
  \caption{Окно просмотра всех презентаций}
  \label{pic:browse}
\end{figure}
\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-04-edit-and-view.png}
  \caption{Окно просмотра и редактирования презентации}
  \label{pic:edit-and-view}
\end{figure}

\section{Контрольные вопросы}
\begin{enumerate}
\item \textbf{В чем преимущество TypeScript над JavaScript?} Строгая типизация и, как следствие, безопасность кода приложений.
\item \textbf{Какие модули включает в себя современное веб-приложение?} Чаще всего это модули учёта и авторизации пользователей, модуль работы с БД, фронтенд и другие модули, решающие бизнес-задачи.
\item \textbf{Для чего в проекте нужен docker-compose?} для одновременного запуска множества модулей приложения.
\item \textbf{В чём преимущество разделения на клиентскую и серверную части?} в возможности независимой разработки и в объединении нескольких серверных частей одной клиентской.
\item \textbf{Какой класс является репрезентацией таблицы в базе данных?} В описанном в данной работе приложении это класс Presentation.java (листинг \hrf{lst:present})
\item \textbf{Какие трудности возникают в процессе разработки веб-приложения?} У начинающих разработчиков это, обычно, понимание принципов работы веб-приложения, исполнения фронтенда, взаимосвязи модулей и работа с БД.
\end{enumerate}

\section{Выводы}
Для разработки мультимедийного приложения необходимо изучить разнообразный инструментарий, позволяющий манипулировать мультимедийными данными. Написание мультимедийнх приложений тесно связано с обработкой больших объёмов данных или использованием внешних библиотек и приложений. Мультимедийные приложения возможно написать для любых платформ и внедрить для любых категорий пользователей.

\end{document}