163 lines
7.6 KiB
TeX
163 lines
7.6 KiB
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{лабораторной}{3}{Разработка мультимедийного приложения}{Мультимедиа технологии}{}{Д.А. Видьманов}
|
|||
|
\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=12cm]{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}
|
|||
|
|
|||
|
|