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

163 lines
7.6 KiB
TeX
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

\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}