Original title:
Interaktivní vyhledávání v on-line archivu obrazových a audiovizuálních děl
Translated title:
Interactive Searching in Online Archive of Visual and Audiovisual Artworks
Authors:
Kuře, Dominik ; Myška, Vojtěch (referee) ; Schimmel, Jiří (advisor) Document type: Bachelor's theses
Year:
2020
Language:
cze Publisher:
Vysoké učení technické v Brně. Fakulta elektrotechniky a komunikačních technologií Abstract:
[cze][eng]
Bakalářská práce je zaměřena na vývoj webové aplikace, jenž slouží jako archiv pro audiovizuální díla, která jsou opatřena klíčovými slovy. Aplikace pracuje s již vytvořenou databází a serverem, na kterém se tato díla nachází. Databáze byla autorovi předána vedoucím práce. V archivu lze vyhledávat konkrétní díla pomocí vyhledávací lišty a několika druhů filtrů, které jsou vázány na informace o každém díle. Výsledky vyhledávání i databáze jako celek jsou ve vytvořené aplikaci reprezentovány grafy, které se podle stavu aplikace dynamicky mění. Jednotlivá díla lze na stránce přehrávat a na základě shod v klíčových slovech je pro každé dílo vytvořen seznam podobných videí. Aplikace byla realizována pomocí systému Node.js, knihovny React, databáze MariaDB a dalších technologií. Jazykem programu je převážně JavaScript, rozšířený o nemalé množství knihoven, díky kterým je možné ve všech oblastech vývoje tento jazyk používat jako primární. Text bakalářské práce je rozdělen na dvě části. V teoretické části jsou veškeré potřebné technologie a knihovny popsány. Důraz byl kladen zejména na ty části daných knihoven, které jsou v aplikaci opravdu používané. Kromě technologií nutných pro realizaci aplikace jsou také zmíněny knihovny, systémy a rozšíření, které práci programátora ulehčí, např. automatickým formátováním a zálohováním kódu, ukládáním kódu do verzí, přidáním statických datových typů do JavaScriptu pomocí TypeScriptu atd. Přečtení teoretické práce by mělo umožnit čtenáři nahlédnout do základů programování aplikací pro webové prohlížeče. V praktické části je potom rozebrán reálný vývoj takové aplikace od úplného začátku. Aplikace zprostředkovává komunikaci mezi čtyřmi servery - front-end, back-end, databázový server a server obsahující audiovizuální díla. Bakalářská práce se také zabývá možností ovládání prohlížeče pomocí interaktivních ovladačů.
This bachelor thesis focuses on development of a web application, which serves as an archive for videos. Each video has a certain amount of keywords. The application uses an already created database and a preinstalled server on which the videos are uploaded. The database was given to the author by his supervisor. Searching through the archive can be done by inputting an expression into a search bar or through a variation of filters that are based on information about each video. The results and the database as a whole are graphically represented by charts, which change their form based on given data. Videos can be played in a video player and a list of similar videos is generated. The list is based on keywords which the videos have in common. The main technologies used in the application are Node.js, React and MariaDB. A good amount of libraries are used for this application, allowing JavaScript to be the primary programming language in all phases of development. The text of this bachelor thesis can be dividen in two parts - theoretical and practical. The first part describes all the technologies and libraries used in the application. An in depth approach was taken especially on those parts of each library which are actually being used in the practical. Apart from the necessary technologies, the reader will be also introduced to libraries and systems which help a programmer with his work such as automatic formatting of code and it's backup, saving different versions of the code or adding static datatypes into JavaScript through TypeScript. The theoretical part should give the reader a summary of how browser applications work and communicate with each other. In the practical part an entire application will be built from scratch. The application will connect four different servers - front-end, back-end, database server and a server storing the videos - and allow them to communicate accordingly. The bachelor thesis also contains information about using different controllers for manipulating the browser.
Keywords:
App; Axios; Bootstrap; CORS; CSS; Express; HTML; HTTP; JavaScript; MariaDB; Node.js; React; Reactstrap; Recharts; Sequelize; TypeScript; Web; Aplikace; Axios; Bootstrap; CORS; CSS; Express; HTML; HTTP; JavaScript; MariaDB; Node.js; React; Reactstrap; Recharts; Sequelize; TypeScript; Web
Institution: Brno University of Technology
(web)
Document availability information: Fulltext is available in the Brno University of Technology Digital Library. Original record: http://hdl.handle.net/11012/190433
guest ::
