% arara: pdflatex
% arara: pdflatex
% arara: pdflatex

% options:
% thesis=B bachelor's thesis
% thesis=M master's thesis
% czech thesis in Czech language
% slovak thesis in Slovak language
% english thesis in English language
% hidelinks remove colour boxes around hyperlinks

\documentclass[thesis=B,czech]{FITthesis}[2019/12/23]

\usepackage{xevlna} % zabraneni zlomu za jednopismennymi konci radku
\usepackage{graphicx}

% \usepackage[utf8]{inputenc} % LaTeX source encoded as UTF-8

% \usepackage{amsmath} %advanced maths
% \usepackage{amssymb} %additional math symbols

\usepackage{dirtree} %directory tree visualisation

% % list of acronyms
% \usepackage[acronym,nonumberlist,toc,numberedsection=autolabel]{glossaries}
% \iflanguage{czech}{\renewcommand*{\acronymname}{Seznam pou{\v z}it{\' y}ch zkratek}}{}
% \makeglossaries

\newcommand{\tg}{\mathop{\mathrm{tg}}} %cesky tangens
\newcommand{\cotg}{\mathop{\mathrm{cotg}}} %cesky cotangens

% % % % % % % % % % % % % % % % % % % % % % % % % % % % % % 
% ODTUD DAL VSE ZMENTE
% % % % % % % % % % % % % % % % % % % % % % % % % % % % % % 

\department{Katedra softwarového inženýrství}
\title{Vývoj nové správy rádiových stanic pro~Czech-American~TV}
\authorGN{Karel}
\authorFN{Vrabec}
\authorWithDegrees{Karel Vrabec}
\author{Karel Vrabec}
\supervisor{Ing. Tomáš Vondra, Ph.D.}
\acknowledgements{Chtěl bych poděkovat svému vedoucímu Ing. Tomáši Vondrovi, Ph.D. za jeho cenné rady, čas a odbornou pomoc, kterou mi poskytoval během psaní této bakalářské práce. Poděkování patří i zadavateli Johnu Honnerovi za jeho trpělivost, vstřícnost a zkušenosti, které se mnou sdílel při tvorbě nové správy rádiových stanic. Dále bych chtěl poděkovat své rodině za podporu a následujícím osobám za testování, korekturu či technickou pomoc – Aleš Kocián, Dana Vynikarová, Daniel Pogorzelski, Iva Floyd, Joe Mraz, Katie Lorence Janette, Katie Schon, Matthew Slaboch, Michal Ozogán, Ondřej Guth a další.}
\abstractCS{Tato bakalářská práce se zabývá tvorbou pluginu do redakčního systému WordPress. Zadavatelem je nezisková organizace Czech-American TV, která propaguje Českou republiku v USA. Webové stránky této organizace svým návštěvníkům nabízí dvě on-line rádia s českou vážnou a folklorní hudbou. Údržba těchto rádií je však složitá a velmi obtížná. Pomocí moderních webových technologií je navrhnuto a vytvořeno zcela nové řešení. Výsledkem práce je plugin do systému WordPress, který dodává novou jednoduchou správu pro řízení zmíněných rádiových stanic a jejich playlistů dle požadavků zadavatele.}
\abstractEN{This bachelor's thesis deals with the development of a brand new plugin for the~WordPress content management system. The plugin is demanded by the~Czech-American TV (a client), a non-profit organization which \mbox{promotes} the Czech Republic in the USA. The organization's website provides two \mbox{e-radios} with the Czech classical and folk music. But the maintenance of these \mbox{radios} is too hard and complicated. Therefore, a new solution is \mbox{designed} and developed with the help of modern web technologies. The result of this work is the WordPress plugin that adds a new interactive administration to manage and control each of the radio stations and their respective playlists very easily.}

\placeForDeclarationOfAuthenticity{V~Lánech}
\declarationOfAuthenticityOption{5}
\keywordsCS{plugin, WordPress, Czech-American~TV, UI, uživatelská přívětivost, JavaScript, PHP}
\keywordsEN{plugin, WordPress, Czech-American~TV, UI, user friendliness, JavaScript, PHP}

\usepackage{minted}
\counterwithin{listing}{chapter}
\renewcommand{\listingscaption}{Kód}
\renewcommand{\listoflistingscaption}{Seznam kódů}

\usepackage[style=iso-numeric,pagetotal=true]{biblatex}
\addbibresource{mybibliographyfile.bib}

\usepackage{hyphenat}
\hyphenation{de-scrip-tion record-ing ad-min-is-tra-tor stake-hold-ers con-tin-ue}

\begin{document}

\begin{introduction}

Redakční systém WordPress je mezi tvůrci webových stránek a aplikací dobře známým a zavedeným pojmem. Díky jeho jednoduchosti, kompatibilitě a přizpůsobitelnosti na počítačích a mobilních zařízeních lze spravovat webové stránky mnohem jednodušeji než kdy dříve. Teprve s rozšiřitelností ve formě pluginů se ze systému WordPress stává velice sofistikovaný nástroj, který umožňuje vytvářet mnohem rozsáhlejší webové aplikace. Není proto překvapivé, že je mezi svými uživateli tolik oblíbený. Díky své promyšlenosti jednoznačně patří mezi nejpopulárnější systémy pro správu obsahu na světě.

Czech-American TV je televizní stanice, která prostřednictvím systému WordPress spravuje své webové stránky. Na těch se nachází např. archiv vzdělávacích pořadů o České republice, články o českých tradicích nebo videa s českými recepty. Kromě toho stránky nabízí i dvě rádiové stanice s českou folklorní a vážnou hudbou, které může návštěvník na webu poslouchat. Rádia jsou vestavěna v současné vzhledové šabloně a jejich fungování vykazuje velké množství chyb. Vzhledem k tomu, že Czech-American TV připravuje novou vzhledovou šablonu, představuje současný stav rádií velice závažnou komplikaci a brzdu vývoje webové stránky. Z tohoto důvodu byl vznesen požadavek na vytvoření nové správy rádiových stanic jako vyčleněného pluginu do systému WordPress.

V teoretické části práce je čtenář seznámen se systémem WordPress a tvorbou pluginů. V této části práce se nachází i definice všech potřebných pojmů a stručný popis moderních webových technologií, které byly použity při implementaci. Součástí je i analýza původního a požadovaného stavu rádiových stanic včetně analýzy zadavatele.

Praktická část práce se skládá ze tří kapitol. První kapitolou je návrh nového pluginu rozdělený na frontend (webová část), backend (administrační část) a propojení těchto dvou částí. Druhou kapitolou je implementace pluginu pomocí moderních webových technologií, ve které jsou popsány implementační detaily výsledku. Třetí a zároveň poslední kapitolou je testování nového pluginu především z hlediska správného fungování, použitelnosti a kompatibility prohlížečů a zařízení. Kapitoly jsou doplněny o pomocné diagramy, náčrty a wireframes, aby si čtenář mohl snáze představit danou problematiku.

Výsledek práce zpřístupní administrátorům Czech-American TV doposud nepřístupné a těžce ovladatelné části jejich webové stránky – rádiové stanice. Každou z nich plně automatizuje a oprostí od pravidelné údržby. Usnadní přidávání, úpravu a odebírání rádií pro další zamýšlené rádiové stanice. Ulehčí práci vývojářům, kteří se při tvorbě nové vzhledové šablony nebudou muset rádii tolik zabývat. Navíc přispěje k dlouhodobému cíli Czech-American TV plně automatizovat své webové stránky a zpřístupnit každou jejich část obyčejnému administrátorovi. Zejména však podpoří tuto neziskovou organizaci v propagaci České republiky (a její hudby) v zahraničí.

\end{introduction}

\chapter{Cíl}

Hlavním cílem této bakalářské práce je vytvořit nový zásuvný modul do systému WordPress, který rozšíří webovou stránku Czech-American TV o nové funkcionality. Mezi ně patří chybějící správa pro řízení rádiových stanic, která umožní upravovat jednotlivá rádia, jejich nastavení, playlisty a nahrávky. Výstupem každé rádiové stanice je přehrávač, který je možné vložit do libovolného příspěvku v systému WordPress. Jeho vzhled a logika (tj. chování a fungování v různých situacích) patří mezi další a poslední funkcionality dodané pluginem. Přehrávač je kromě přehrávání nahrávek schopen zobrazit doprovodné texty, fotografie, příp. videa z existujícího úložiště. Tento hlavní cíl zahrnuje několik dílčích cílů.

Prvním cílem je analýza požadavků zadavatele na novou správu a logiku rádií. Do tohoto cíle spadá i seznámení se zadavatelem jako takovým, jeho krátkodobými i dlouhodobými cíli a prostředím jeho webové stránky.

Druhým cílem je návrh a implementace nového pluginu pomocí moderních webových technologií (se zaměřením na uživatelské rozhraní jak backendové, tak frontendové části).

Třetím cílem je automatizace fungování rádiových stanic s pohodlnou a nenáročnou údržbou. Důležité je, aby správa byla jednoduchá na používání a přehledná i pro netechnické uživatele.

Posledním cílem je otestování funkčnosti nového pluginu, kompatibility s různými prohlížeči a zařízeními včetně provedení testu použitelnosti na přispěvatelích Czech-American~TV.

\chapter{Teorie}

Tato kapitola je věnována popisu systému WordPress se zaměřením na tvorbu pluginů. Součástí je také přehled všech technologií, které byly použity při vývoji kýženého pluginu. Kapitola slouží k uvedení čtenáře do zkoumané problematiky a všech následujících kapitol.

\section{WordPress}

WordPress je svobodný redakční systém pro správu webových stránek a aplikací, který je jedním z nejpopulárnějších CMS (tj. \uv{Content Management System}) na světě. V současné době je zaveden přibližně na 40 \% všech webových stránek a má tak vysoký náskok před svými konkurenty, jakými jsou např. Wix, Joomla nebo Squarespace. \cite{w3techs}

Předností systému je zejména jednoduchá, přehledná a rozšiřitelná webová správa, kterou je možné obsluhovat bez znalosti programování. Systém je napsán pomocí skriptovacího jazyka PHP (tj. \uv{PHP: Hypertext Preprocessor}) v kombinaci se systémem řízení báze dat MySQL (tj. \uv{My Structured Query Language}). Rozvíjet a udržovat jej pomáhá vcelku rozsáhlá komunita vývojářů, tvůrců a dobrovolníků, kteří pravidelně pořádají setkání v různých městech celého světa \cite{wp-community}.

Mezi nejdůležitější funkcionality, kterými WordPress disponuje, patří především tvorba, editace a publikování webových článků. V administraci k tomu lze použít buď klasický WYSIWYG (tj. \uv{What You See Is What You Get}) editor ve formě pluginu, nebo novější editor Gutenberg, který je v systému WordPress oficiálně od verze 5.0 \cite{gutenberg}. 

\subsection{Knihovna médií} \label{teorie-knihovna-medii}

Psaní webových článků v systému WordPress lze doplnit o různé obrázky, hudbu, videa či ostatní soubory, jako např. PDF (tj. \uv{Portable Document Format}). Zároveň je možné vytvářet variace těchto souborů v podobě galerií či audio nebo video playlistů. Pro správu těchto typů souborů slouží v systému WordPress knihovna médií (tzv. \uv{Media Library}).

Soubory lze v knihovně třídit podle času nahrání (tj. měsíce a roku) a typu (tj. obrázky, audio, video atd.). Každému souboru lze navíc nastavit různé meta informace (např. alternativní text pro obrázky či album pro audio soubory). Obrázky lze upravovat pomocí jednoduchého vestavěného editoru, který umožňuje ořezávat, převracet, rotovat či škálovat daný obrázek. Soubory lze do webových článků vkládat z knihovny médií nebo přímo z počítače. Další možností je vkládání souborů pomocí URL (tj. \uv{Uniform Resource Locator}) adresy (např. u videí ze serverů třetích stran). 

Výhodou knihovny médií je především snadný přenos souborů do objektových úložišť (pomocí k tomu přizpůsobených WordPress pluginů). Nevýhodou jsou pak omezené možnosti organizace a hierarchie souborů.

\subsection{Uživatelé}

Ke správě webových stránek v systému WordPress může přistupovat více uživatelů. Každý uživatel má svůj účet, ke kterému se přihlašuje pomocí svého uživatelského jména (nebo e-mailové adresy) a hesla. Tomuto účtu je přiřazena určitá role (tzv. \uv{Role}), která představuje sadu oprávnění (tzv. \uv{Capabilities}) daného uživatele \cite{wp-roles}.

WordPress nabízí 6 základních uživatelských rolí – Super Admin, Administrator, Editor, Author, Contributor a Subscriber. Mezi jejich oprávnění patří kupříkladu \texttt{edit\_posts} (schopnost spravovat příspěvky a komentáře), \texttt{activate\_plugins} (schopnost spravovat pluginy) nebo také \texttt{manage\_options} (schopnost spravovat základní nastavení). \cite{wp-roles}

V základní verzi systému WordPress lze pouze přidávat, upravovat a mazat jednotlivé uživatelské účty. Pomocí pluginů, jako je např. User Role Editor, však lze spravovat i vlastní role a oprávnění.

\subsection{Šablony}

Důležitou součástí každé webové stránky je její vzhledová šablona. Dle \cite{ux} by webový design nikdy neměl být podceňován, jelikož v závislosti na jeho kvalitě je v návštěvníkovi vzbuzovaná mnohem větší důvěra. WordPress svým uživatelům v současné době nabízí výběr z přibližně 8 tisíc responzivních šablon, které lze stáhnout a nainstalovat přímo v administraci \cite{themes}. Ty mohou zjednodušit a urychlit práci ohledně vzhledu celého webu, a to zejména vývojářům. Mezi nejznámější šablony patří např. Twenty Twenty nebo Astra. Lze si však vytvořit i šablonu vlastní.

\subsection{Pluginy}

Základní funkce systému WordPress nemusí vždy postačovat. Z tohoto důvodu jsou k dispozici různé pluginy (neboli zásuvné moduly), které lze do systému WordPress jednoduše doinstalovat. V současné době je k dispozici přes 58 tisíc pluginů pro WordPress \cite{plugins}. Jedná se o samostatné moduly, které rozšiřují různé oblasti systému. Mezi nejznámější z nich patří např. Classic Editor, WPForms nebo Advanced Custom Fields. Lze si však vytvořit i plugin vlastní.

\section{Tvorba pluginů}

Zásuvný modul do systému WordPress je tvořen převážně PHP kódem, ale může být doplněn i o HTML (tj. \uv{HyperText Markup Language}), CSS (tj. \uv{Cascading Style Sheets}) nebo JS (tj. \uv{JavaScript}). Pro vytvoření nového pluginu se podle \cite{plugin-handbook} stačí držet následujících kroků:
 
\begin{enumerate}

    \item Vytvořit novou složku a pojmenovat ji podle názvu kýženého pluginu (např. \uv{muj-plugin}).
    
    \item Otevřít tuto složku a v té vytvořit nový PHP soubor, jehož název se shoduje s názvem složky (tj. \uv{muj-plugin.php}).

    \item Na začátek nového PHP souboru přidat hlavičkový komentář, který systému WordPress předá všechny základní informace o pluginu.

    \begin{listing}[htbp]
        \caption{Hlavičkový komentář pluginu}
        \begin{minted}{php}
            
    <?php
    
    /**
     * Plugin Name: Název pluginu
     * Description: Popis pluginu
     * Version:     Verze pluginu ve tvaru X.X.X
     * Author:      Jméno autora
     * License:     Název licence
     * ...
     */
     
    ?>
            
        \end{minted}
    \end{listing}

    \item Otevřít složku \uv{wp-content} a dále složku \uv{plugins} v základní instalaci systému WordPress.

    \item Vytvořenou složku \uv{muj-plugin} s PHP souborem vložit do složky \uv{plugins}, kde se nachází i ostatní WordPress pluginy.

\end{enumerate}

Výsledkem tohoto postupu je jednoduchý WordPress plugin, který je nyní dostupný ve výpisu všech pluginů v tomto systému (po kliknutí na položku \uv{Plugins} v levém navigačním menu v administraci). Základní PHP soubor s hlavičkou, který představuje samotný plugin, lze rozšířit o vlastní PHP funkce a další kód. Podobně i hlavičkový komentář lze rozšířit o další informace (např. požadovaná verze systému WordPress či PHP, webová stránka pluginu nebo autora atp.).

Složitost výsledného pluginu velice záleží na tom, k čemu byl určen. Příkladem budiž plugin Hello Dolly s pouhými 82 řádky \cite{plugin-handbook}. Lze tak vytvářet jednoduché pluginy s jedním PHP souborem, nebo pluginy složité, jejichž kód musí být členěn do více souborů a složek, a navíc obsahuje i HTML, CSS a JS.

\subsection{Hook}

Hook je označení pro konkrétní událost, která nastává v určitém momentu běhu systému WordPress. Představuje způsob, jakým lze integrovat vlastní kód do systému bez nutnosti měnit systémové soubory \cite{plugin-handbook}. Mezi hooky patří kupříkladu \texttt{wp\_loaded} (nastává po kompletním načtení systému WordPress), \texttt{get\_footer} (zavolán před načtením patičky webu) nebo \texttt{the\_title} (vyvolán pro úpravy nadpisu článků) \cite{hooks}. WordPress poskytuje rozhraní Plugin API, jehož součástí jsou funkce uvedené dále v této podkapitole. Ty umožňují přiřadit vlastní funkce k daným hookům. Hooky se rozlišují na akce a filtry \cite{plugin-handbook}.

Akce se používají pro provádění jednorázových činností (např. vložení dat do databáze, vytvoření nové sekce v navigačním menu atp.). Nejdříve je nutné vytvořit vlastní funkci (s vlastním kódem) bez návratové hodnoty. Tu lze registrovat k dané akci pomocí funkce \texttt{add\_action()}. \cite{plugin-handbook}

\begin{listing}[htbp]
    \caption{Registrace vlastní funkce k akci}
    \begin{minted}{php}
    
<?php

add_action(
  string $tag,
  callable $function_to_add,
  int $priority = 10,
  int $accepted_args = 1
);

?>

    \end{minted}
\end{listing}

Parametr \texttt{\$tag} představuje název hooku (akce), \texttt{\$function\_to\_add} je název registrované funkce s vlastním kódem. Mezi zbývající parametry patří priorita \texttt{\$priority}, která se používá v případě, kdy je na daný hook registrováno více funkcí. Dále počet argumentů \texttt{\$accepted\_args} přijímaných registrovanou funkcí. \cite{functions}

Filtry slouží pro úpravu existujících dat (např. nadpisu či obsahu článků). Nejdříve je nutné vytvořit vlastní funkci, která přijme, modifikuje a vrátí určitá data. Podobně jako u akcí je potřebné tuto funkci zaregistrovat k danému filtru. To lze provést pomocí funkce \texttt{add\_filter()}, která přijímá stejné parametry jako funkce \texttt{add\_action()}. \cite{plugin-handbook}

Po registraci vlastní funkce k hooku (akci či filtru) je tato funkce zavolána, jakmile nastane daný hook. Vlastní funkce může přijímat parametry specifické pro danou akci či filtr. Tyto parametry jsou definovány daným hookem a lze je dohledat v oficiální dokumentaci Plugin API.

Při tvorbě pluginu lze použít následující základní hooky:

\begin{itemize}
    \item \texttt{activation\_hook} – zavolán při aktivaci pluginu,
    
    \item \texttt{deactivation\_hook} – zavolán při deaktivaci pluginu,

    \item \texttt{uninstall\_hook} – zavolán při odinstalaci pluginu. \cite{plugin-handbook}

\end{itemize}

Ve vlastních funkcích připojených k těmto hookům lze řešit např. inicializaci pluginu nebo smazání vytvořených dat z databáze. Registrace vlastních funkcí se provádí pomocí funkce \texttt{register\_<nazev\_hooku>()}. Této funkci je nutné předat nejen samotný callback, ale i cestu k hlavnímu PHP souboru (daného pluginu), který obsahuje hlavičkový komentář. \cite{functions}

\subsection{Příspěvkový typ}

Příspěvkový typ (v angličtině \uv{Post Type}) je způsob, jakým lze v systému WordPress třídit obsah. Používá se pro vytváření archivů s tematicky podobnými příspěvky (např. knihy, auta nebo recepty). WordPress ve výchozím nastavení nabízí několik těchto příspěvkových typů, jako např. \texttt{post}, \texttt{page}, \texttt{attachment} nebo \texttt{revision}. Pomocí funkce \texttt{register\_post\_type()} je však možné si zaregistrovat i vlastní příspěvkový typ. \cite{wordpress}

\begin{listing}[htbp]
    \caption{Registrace vlastního příspěvkového typu}
    \begin{minted}{php}
    
<?php

register_post_type(
  string $post_type,
  array|string $args = array(),
);

?>

    \end{minted}
\end{listing}

Parametr \texttt{\$post\_type} značí identifikátor příspěvkového typu (kupříkladu \uv{book}, \uv{car} nebo \uv{recipe}). Tento identifikátor zároveň slouží jako slug (část URL adresy, pod kterou je daný příspěvkový typ přístupný). \texttt{\$args} je asociativní pole, které obsahuje různé parametry specifikující tento příspěvkový typ. Mezi ně patří např. název (\texttt{label}), popis (\texttt{description}), přístupnost (\texttt{public}) nebo možnost vytvářet hierarchie z příspěvků (\texttt{hierarchical}). \cite{functions}

Registraci nového příspěvkového typu je vhodné provést ve vlastní funkci, která je pomocí funkce \texttt{add\_action()} přiřazena hooku \texttt{init} \cite{plugin-handbook}. Po zaregistrování příspěvkového typu se v levém navigačním menu v administraci objeví nová položka s jeho názvem. Jedná se o administrační rozhraní, kde lze spravovat veškeré příspěvky tohoto typu. Tvorbu příspěvkových typů lze výrazně zjednodušit pomocí WordPress pluginů, jako např. Custom Post Type UI.

\subsection{Taxonomie}

Taxonomie je dalším způsobem, jakým lze v systému WordPress seskupovat obsah. Skládá se z prvků, které se nazývají termíny. Mezi taxonomií a příspěvkovým typem je ovšem rozdíl. Příspěvkový typ zastupuje nějaký obsah (např. množinu příspěvků), zatímco pomocí taxonomie (resp. jejích termínů) lze dále třídit obsah v rámci jednoho či několika příspěvkových typů. \cite{wordpress}

Jako příklad poslouží dva příspěvkové typy – česká města a české recepty. Řekněme, že na webové stránce existuje několik příspěvků o českých městech a receptech. Taxonomií jsou české kraje a mezi její termíny konkrétně patří \uv{Středočeský kraj}, \uv{Karlovarský kraj} atd. Pokud je uvedená taxonomie aktivovaná pro oba zmíněné příspěvkové typy, pak lze české recepty a města přiřazovat daným krajům během úprav těchto příspěvků.

Systém WordPress ve výchozím nastavení nabízí dvě taxonomie – kategorie a tagy \cite{theme-handbook}. Pomocí funkce \texttt{register\_taxonomy()} je však možné si zaregistrovat i vlastní taxonomii.

\begin{listing}[htbp]
    \caption{Registrace vlastní taxonomie}
    \begin{minted}{php}
    
<?php

register_taxonomy(
  string $taxonomy,
  array|string $object_type,
  array|string $args = array()
);

?>

    \end{minted}
\end{listing}

Parametr \texttt{\$taxonomy} značí identifikátor taxonomie (kupříkladu \uv{region}). \texttt{\$object\_type} reprezentuje identifikátory příspěvkových typů, pro které má být daná taxonomie aktivována. \texttt{\$args} je asociativní pole, které obsahuje různé parametry specifikující tuto taxonomii. Mezi ně patří např. přístupnost (\texttt{public}) či možnost vytvářet hierarchie z termínů (\texttt{hierarchical}). \cite{functions}

Podobně jako u příspěvkového typu je vhodné provést registraci nové taxonomie ve vlastní funkci, a tu následně pomocí funkce \texttt{add\_action()} přiřadit hooku \texttt{init} \cite{plugin-handbook}. Po registraci taxonomie se u položky daného příspěvkového typu v levém navigačním menu objeví položka dané taxonomie. Jedná se o administrační rozhraní, kde lze spravovat jednotlivé termíny (příp. sledovat, kolik příspěvků je k daným termínům momentálně přiřazeno).

\subsection{Navigační menu}

WordPress umožňuje přidávat položky do navigačního menu, které se nachází v levé části administrace tohoto systému. Toto navigační menu slouží jako hlavní rozcestník a obsahuje např. položky jednotlivých příspěvkových typů, pluginů, vzhledu, nastavení nebo seznamu uživatelů. Každá taková položka (tzv. menu) může obsahovat další podpoložky (tzv. submenu) \cite{plugin-handbook}. V kontextu tvorby pluginů tak lze vytvářet vcelku přehledná rozhraní, pomocí kterých se administrátor snadněji přemístí do nastavení daného pluginu. Novou položku lze přidat pomocí funkce \texttt{add\_menu\_page()} \cite{plugin-handbook}.

\begin{listing}[htbp]
    \caption{Tvorba vlastního menu}
    \begin{minted}{php}
    
<?php

add_menu_page(
  string $page_title,
  string $menu_title,
  string $capability,
  string $menu_slug,
  callable $function = '',
  string $icon_url = '',
  int $position = null
);

?>

    \end{minted}
\end{listing}

Parametr \texttt{\$page\_title} je hlavní titulek, který se objeví  v záložce prohlížeče po kliknutí na tuto položku. \texttt{\$menu\_title} je název položky v navigačním menu. \texttt{\$capability} je minimální oprávnění uživatelů, kteří tuto položku uvidí (např. \texttt{edit\_posts} pro editory). \texttt{\$menu\_slug} je identifikátor dané položky. \texttt{\$function} je jméno vlastní funkce, která obsahuje HTML obsah této položky. \texttt{\$icon\_url} je identifikátor ikonky, která se u položky objeví. \texttt{\$position} je pořadí položky v navigačním menu. \cite{functions}

Registraci nové položky je vhodné provést ve vlastní funkci, a tu následně zaregistrovat pomocí funkce \texttt{add\_action()} pro hook \texttt{admin\_menu} \cite{plugin-handbook}. Podpoložky lze vytvářet pomocí funkce \texttt{add\_submenu\_page()} s obdobnými parametry jako při tvorbě vlastního menu. Navíc je však nutné předat identifikátor rodičovské položky \cite{functions}.

\subsection{Metadata}

Metadata jsou libovolné informace přiřazené k příspěvkům, uživatelům, komentářům či termínům taxonomií \cite{plugin-handbook}. Jedná se o dvojice klíč/hodnota, kde klíč představuje název metadat a hodnota zastupuje informaci přiřazenou tomuto klíči \cite{wp-custom-fields}. Metadata lze přidávat pomocí funkce \texttt{add\_post\_meta()} \cite{plugin-handbook}.

\begin{listing}[htbp]
    \caption{Tvorba vlastních metadat}
    \begin{minted}{php}
    
<?php

add_post_meta(
  int $post_id,
  string $meta_key,
  mixed $meta_value,
  bool $unique = false
);

?>

    \end{minted}
\end{listing}

Parametr \texttt{\$post\_id} značí identifikátor příspěvku, kterému jsou nová metadata přiřazena. \texttt{\$meta\_key} je klíč metadat. \texttt{\$meta\_value} je hodnota metadat. Pokud je \texttt{\$unique} nastavený na hodnotu \texttt{false}, pak lze přidávat metadata se stejným klíčem. \cite{functions}

V systému WordPress existuje rozhraní pro správu metadat u každého příspěvku. Jedná se o box s názvem Custom Fields (v překladu \uv{uživatelská pole}), který je nutné nejdříve aktivovat v nastavení \uv{Screen Options}. V tomto boxu lze jednoduše a bez použití kódu přidávat, upravovat a mazat jednotlivá metadata. Ke každému příspěvku lze přiřadit téměř neomezené množství metadat \cite{plugin-handbook}. Pro uživatelská pole existují různé nadstavby ve formě WordPress pluginů, jako např. Advanced Custom Fields.

\subsection{Meta box}

Při úpravách příspěvků jsou k dispozici různé administrační prvky, jako např. box s titulní fotografií (tj. \uv{Featured image}), box s termíny určité taxonomie (pokud je pro daný typ příspěvků aktivovaná) nebo box s možností publikace či uložení daného příspěvku (tj. \uv{Publish}). Tyto boxy se označují jako tzv. \uv{Meta Boxes}. Meta boxy se používají pro seskupování informací k danému příspěvku. Pomocí funkce \texttt{add\_meta\_box()} lze vytvořit nový meta box s vlastním HTML obsahem. Tvorbu meta boxu je vhodné provést ve vlastní funkci zaregistrované pomocí funkce \texttt{add\_action()} pro hook \texttt{add\_meta\_boxes}. \cite{plugin-handbook}

\begin{listing}[htbp]
    \caption{Tvorba vlastního meta boxu}
    \begin{minted}{php}
    
<?php

add_meta_box(
  string $id,
  string $title,
  callable $callback,
  string|array|WP_Screen $screen = null,
  string $context = 'advanced',
  string $priority = 'default',
  array $callback_args = null
);

?>

    \end{minted}
\end{listing}

\newpage

Parametr \texttt{\$id} je identifikátor meta boxu. \texttt{\$title} je jeho titulek (kupříkladu \uv{Featured image}). \texttt{\$callback} je vlastní funkce s HTML obsahem boxu. \texttt{\$screen} je typ příspěvků, u kterých se daný box zobrazí. \texttt{\$context} je pozice boxu (např. v postranním sloupci). \texttt{\$priority} je priorita daného meta boxu (čím větší, tím je box umístěný výše). \texttt{\$callback\_args} představují data odeslaná vlastní funkci v parametru \texttt{\$callback}. \cite{functions}

\subsection{Shortcode}

Shortcode (v překladu \uv{krátký kód}) je makro, které lze vložit do libovolného příspěvku v systému WordPress. Toto makro zastupuje vlastní HTML kód, pomocí kterého je možné interagovat s obsahem daného příspěvku. Po zobrazení příspěvku na webové stránce je místo shortcode vykreslen zastupovaný HTML kód. Systém WordPress ve výchozím nastavení nabízí několik shortcodes, mezi nimi např. \texttt{[gallery]} (vykreslí galerii z připojených obrázků). Shortcode může být parametrický, pokud je nutné zastupovanému kódu předat jistá data (např. ID obrázků v případě galerie). Zároveň může být i párový (s počátečním a koncovým tagem), pokud je nutné jím zapouzdřit určitý obsah. Vlastní shortcode lze vytvořit pomocí funkce \texttt{add\_shortcode()}. \cite{plugin-handbook}, \cite{wordpress}

\begin{listing}[htbp]
    \caption{Tvorba vlastního shortcode}
    \begin{minted}{php}
    
<?php

add_shortcode(
  string $tag,
  callable $callback
);

?>

    \end{minted}
\end{listing}

\newpage

Parametr \texttt{\$tag} je identifikátorem shortcode. \texttt{\$callback} je vlastní funkce, která je zavolána v případě, že byl daný shortcode nalezen v textu příspěvku. Tato funkce přijímá 3 parametry: \texttt{\$atts} s atributy shortcode, \texttt{\$content} s obsahem shortcode (pokud je párový) a \texttt{\$shortcode\_tag} (totožný s parametrem \texttt{\$tag}). Návratovou hodnotou této funkce je zastupovaný HTML kód, který se zobrazí místo shortcode. Po registraci shortcode tak stačí do obsahu některého z příspěvků vložit: \texttt{[<identifikator\_shortcode>]}. \cite{plugin-handbook}, \cite{functions}

\subsection{Best Practices}

Při vývoji WordPress pluginů je podle \cite{plugin-handbook} vhodné dodržovat různá architektonická, bezpečnostní a organizační doporučení, která přispívají ke správnému chodu celého systému. V následujícím seznamu jsou uvedené příklady některých z nich:

\begin{itemize}

    \item Pluginy sdílejí stejný jmenný prostor pro názvy svých tříd, funkcí a proměnných. Z tohoto důvodu může docházet ke jmenným kolizím. Všechny názvy by měly obsahovat unikátní prefix. To platí i pro identifikátory vlastních příspěvkových typů, taxonomií, meta boxů nebo shortcodes.
    
    \item Uživatelé mají v systému WordPress různé role. Těmto rolím jsou přiřazena různá oprávnění. Pomocí funkce \texttt{current\_user\_can()} lze ošetřovat práva daného uživatele a zpřístupňovat mu jen určitý obsah. Důležité části by měly být přístupné pouze oprávněnějším uživatelům.
    
    \item Potenciálně nebezpečná vstupní či výstupní data by měla být ošetřována vůči nevhodným znakům (např. HTML, tabulátory či odřádkování). Lze tak předejít škodlivým XSS (tj. Cross-Site Scripting) útokům.
    
    \item Hlavní složka s pluginem by měla obsahovat pouze nejdůležitější soubory, jako např. hlavní PHP soubor s hlavičkovým komentářem. Všechny ostatní soubory by měly být uloženy v podsložkách.
    
\end{itemize}

\section{Přehled použitých technologií} \label{teorie-pouzite-technologie}

Tento přehled slouží pro seznámení čtenáře s veškerými technologiemi, které byly použity při vývoji nového pluginu. Jednotlivé technologie a pojmy se používají v pozdějších kapitolách, a proto je vyžadována alespoň jejich základní znalost v uvedeném rozsahu. Technologie jsou seřazené podle abecedy.

\subsection{Advanced Custom Fields}

Advanced Custom Fields je plugin do systému WordPress, který rozšiřuje tvorbu webového obsahu o nové funkční prvky. Mezi ně patří např. \uv{Text} (textové pole), \uv{Range} (rozsah hodnot), \uv{Checkbox} (výběr položek), \uv{Color Picker} (výběr barvy), \uv{File} (soubor), \uv{Gallery} (galerie), \uv{Link} (URL odkaz) a další z celkem 30 prvků \cite{acf}. Tyto prvky lze seskupovat do tzv. \uv{Field Groups} a zobrazovat v administraci např. u příspěvků daného typu. Během úprav těchto příspěvků je pak možné vyplnit požadované informace. Jedná se o nadstavbu tzv. \uv{Custom Fields}.

Nejdůležitějším prvkem (pro účely této práce) je tzv. \uv{Repeater Field} (kolekce položek). Toto uživatelské pole umožňuje uchovávat kolekci libovolného počtu položek, z nichž každá je kombinací uvedených funkčních prvků. Jednotlivé položky lze libovolně přidávat, upravovat, mazat nebo přemisťovat ve stylu \uv{Drag and Drop}. Repeater Field je možné využít např. pro ukládání informací o členech týmu, kdy každá položka kolekce reprezentuje daného člena. U něj lze ukládat např. fotografii (prvek \uv{Image}), jméno, e-mail nebo telefonní číslo (prvky \uv{Text}).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/theory/repeater-field.png}
    \caption{Jednoduchý wireframe prvku Repeater Field}
\end{figure}

\subsection{Babel}

Babel je kompilátor pro skriptovací jazyk JavaScript, který umožňuje převádět moderní prvky tohoto jazyka (verze ECMAScript 2015 a vyšších) do podoby srozumitelné současným a starším webovým prohlížečům. Jedná se o nástroj, který posílá daný kód ze vstupu na výstup. Skutečná kompilace je prováděna pomocí jeho pluginů, které dokáží transformovat novější syntaxi jazyka JavaScript. Místo ruční konfigurace je možné volit různé předvolby (tzv. \uv{Presets}). Preset zastupuje sadu pluginů, které jsou použity ve finální kompilaci (např. \texttt{@babel/preset-react}, který umožňuje zkompilovat React a syntaxi JavaScript XML). Díky technologii Babel je možné naprogramovat aplikaci pomocí nejmodernějších výdobytků jazyka se zajištěnou kompatibilitou webových prohlížečů. \cite{babel}

\subsection{Bootstrap}

Bootstrap je frontendový framework pro tvorbu responzivních webových stránek a aplikací. Nabízí šablony pro různé prvky UI (tj. \uv{User Interface}), jako např. \uv{Forms} (formuláře), \uv{Buttons} (tlačítka), \uv{Navbar} (navigační menu), \uv{Modal} (výstražná okna), \uv{Tooltips} (nápovědy) a další. Tyto šablony je možné použít ve vlastních projektech, čímž lze zjednodušit a urychlit proces vývoje. Jednou z nejdůležitějších součástí knihovny Bootstrap je tzv. \uv{Grid System} (mřížka). Mřížka rozděluje prostor na 12 stejně širokých sloupců. Pomocí třídy \texttt{col-*} lze libovolnému elementu přiřadit počet sloupců, který udává jeho celkovou šířku. Jako příklad lze uvést tři rovnoměrné elementy v řadě, z nichž každý má nastavenou třídu \texttt{col-4}. Třídě \texttt{col-*} lze přidat i další hodnotu, která udává hraniční úroveň (tzv. \uv{Breakpoint}). Mezi tyto hodnoty patří např. \texttt{sm} (small, >= 576px), \texttt{md} (medium, >= 768px) nebo \texttt{lg} (large, >= 992px). Pokud je šířka obrazovky např. v rozsahu úrovně \texttt{md} a všechny elementy mají třídu \texttt{col-md-*}, pak jsou tyto elementy umístěné horizontálně (s definovanou šířkou). Na menších obrazovkách jsou umístěné naopak vertikálně pod sebou a zabírají celou šířku. \cite{bootstrap}

\subsection{Composer}

Composer je správce závislostí pro jazyk PHP. Umožňuje deklarovat a spravovat závislosti (knihovny nebo balíčky ostatních autorů), na kterých je projekt závislý. Součástí tohoto nástroje je automatické nahrávání tříd spravovaných knihoven (tzv. \uv{Autoloading}). Je však možné nahrávat i třídy vlastní a předejít tak početným \texttt{include} či \texttt{require} deklaracím na začátcích souborů. Instalace a údržba jednotlivých knihoven probíhá pomocí CLI (tj. Command Line Interface). \cite{composer}

\subsection{Gulp}

Gulp je nástroj, který umožňuje zjednodušit, automatizovat a urychlit různé procesy při vývoji software. Ať už se jedná o kompilaci JS, minifikaci CSS nebo okamžité promítání změn souborů do prohlížeče. Každý takový proces lze vytvořit jako tzv. \uv{task}. Task je asynchronní JS funkce, jejíž návratovou hodnotou je např. stream. Stream je interpretován jako pipeline – sada samostatně pracujících jednotek (pluginů), které zpracovávají procházející data. Jednotlivé pluginy představují odpovídající NPM (tj. \uv{Node Package Manager}) balíčky ostatních autorů, které je potřeba stáhnout a začlenit do projektu (např. \texttt{gulp-cssnano} pro minifikaci CSS souborů nebo \texttt{gulp-rename} pro přejmenování souborů). Tímto způsobem je možné vytvářet např. tasks pro kompilaci, sestavení a minifikaci JS nebo SCSS (tj. \uv{Sassy CSS}) souborů. Vytvořené tasks lze jednoduše spouštět pomocí CLI. \cite{gulp}

\subsection{Node Package Manager}

Node Package Manager (zkráceně \uv{NPM}) je správce balíčků a závislostí pro jazyk JavaScript. Jedná se o největší registr balíčků kódu na světě. Používá se pro sdílení programů a užitečných nástrojů mezi vývojáři, kteří je mohou použít ve svých projektech (tím lze potenciálně urychlit a zjednodušit vývoj). Instalace NPM a jednotlivých balíčků (příp. jejich údržba) probíhá pomocí CLI. V současné době NPM nabízí více než 1 milion balíčků. \cite{npm}

\subsection{React}

React je frontendová JavaScript knihovna pro tvorbu uživatelského rozhraní, která se používá při vývoji webových stránek, aplikací a SPA (tj. \uv{Single-Page Application}). Umožňuje vytvářet nezávislé, uzavřené a znovupoužitelné části kódu – komponenty – ze kterých se skládá celé UI.

Vstupem komponenty mohou být libovolná data. Ta do komponenty přichází ve formě JS objektu (tzv. \uv{Props}). Komponenta může mít také svůj vlastní stav (tzv. \uv{State}). Jedná se o privátní JS objekt s proměnnými daty. S každou změnou stavu se komponenta znovu vykreslí. Pro vykreslení slouží metoda \texttt{render()}, jejíž návratovou hodnotou je UI dané komponenty. Při definování této metody lze využít potenciálu JSX (tj. \uv{JavaScript XML}). \cite{react}

JSX je syntaktické rozšíření jazyka JavaScript, které slouží ke snazšímu popisu UI. Kompilací JSX jsou vytvořeny React elementy (tj. JS objekty, které reprezentují skutečné HTML elementy). Ty jsou následně použity při sestavení DOM (tj. \uv{Document Object Model}). \cite{react}

Pomocí komponent je popsán vzhled celého UI. React vytváří VDOM (tj. \uv{Virtual Document Object Model}), pomocí kterého je kompletní reprezentace UI udržována v paměti. Při provádění změn je VDOM synchronizován s DOM. React aktualizuje jen takové elementy, u kterých nastaly změny. \cite{react}

Komponenty mohou definovat i další metody, které se uplatní v průběhu jejich životního cyklu. Mezi ně patří např. \texttt{componentDidMount()} (zavolána po vložení komponenty do DOM), \texttt{componentDidUpdate()} (zavolána po aktualizaci komponenty v DOM) nebo \texttt{componentWillUnmount()} (zavolána před odstraněním komponenty z DOM). \cite{react}

\subsection{Sass}

Kaskádové styly (zkráceně \uv{CSS}) se používají k definování vzhledu HTML elementů. Používání CSS však vede k rozsáhlému, nepřehlednému a těžce udržovatelnému kódu. Řešením tohoto problému je použití CSS preprocesoru, který zápis kaskádových stylů výrazně zjednoduší a zkrátí. Sass (tj. \uv{Syntactically Awesome Style Sheets}) je preprocesor kaskádových stylů, které rozšiřuje o nové funkcionality, jako např. proměnné, vnořování, dědění nebo operátory. Pomáhá udržovat princip DRY (tj. \uv{Don't Repeat Yourself}), který spočívá v odstraňování duplicitních částí kódu. Vylepšený zápis je překládán do obyčejných CSS, které jsou čitelné běžnými webovými prohlížeči. Soubory s CSS napsané pomocí jazyka Sass mají příponu SCSS. \cite{sass}

\subsection{Swiper}

Slider (také \uv{Slideshow} nebo \uv{Carousel}) je označení pro prezentaci snímků (např. obrázků) na webové stránce, ve které se jednotlivé snímky střídají. Swiper je technologie, zaměřená především na mobilní zařízení, která umožňuje tvorbu těchto interaktivních prvků v různých podáních. S její pomocí lze vytvářet např. horizontální či vertikální prezentace, volit různé efekty přechodů, přidat posuvné šipky či navigaci, aktivovat automatické přehrávání (tzv. \uv{Autoplay}) nebo efekt pomalého načítání obrázků (tzv. \uv{Lazy Load}). Díky rozsáhlému API (tj. \uv{Application Programming Interface}) lze vytvořit vlastní prezentaci a upravit ji dle vlastních potřeb. Swiper je možné používat i v kombinaci s dalšími moderními technologiemi, jako např. React. \cite{swiper}

\chapter{Analýza}

V této kapitole je provedena analýza zadavatele a původního stavu rádiových stanic na jeho webu (z vizuálního a implementačního hlediska). Následuje popis požadovaného stavu, ve kterém jsou uvedeny všechny funkční a nefunkční požadavky včetně případů užití a doprovodných diagramů. V následující kapitole je pak na základě analýzy navrhnuto vlastní řešení.

\section{Zadavatel}

Czech-American TV (dále jen \uv{CATV USA}) je americká televizní stanice a nezisková organizace, která byla založena v roce 2003. Její sídlo se nachází v Cape Coral, Florida, USA. Zakladatelem a současným ředitelem CATV USA je John Honner, americký producent českého původu. \cite{interview1}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{images/analysis/logo.png}
    \caption{Logo CATV USA \cite{logo-catv}}
\end{figure}

Hlavním cílem této organizace je rozšířit povědomí o České republice a její kultuře, tradicích, regionech, historii, památkách, hudbě a tanci nejen ve Spojených státech amerických, ale i v dalších zemích celého světa. Cílí na všechny diváky, kteří rádi cestují, poznávají nové věci a chtějí se dozvědět o České republice něco více. \cite{interview1}

CATV USA pravidelně vydává pořad \uv{Czech-American TV Show (produced by John Honner)} s naučnou a vzdělávací tematikou, který přibližuje Českou republiku divákům. Tento pořad je následně dodán kabelové televizi, která ho odvysílá v průběhu hlavního vysílacího času. Pořad se zaměřuje na české regiony, významné turistické destinace, hrady, zámky, muzea, českou kuchyni a recepty, tradice, folklorní hudbu a také na lekce češtiny. Jednotlivé díly jsou po odvysílání umístěny na webové stránky CATV USA, kde je mohou zhlédnout diváci z celého světa. \cite{interview1}

Správa vlastních webových stránek patří mezi další činnosti této organizace. Webové stránky se nachází na adrese \url{www.catvusa.com} a kromě již zmíněných dílů nabízí i recepty české kuchyně (v psané či video formě), výuku českého jazyka, články o českých tradicích, vyhledávání předků pro Američany s českými kořeny, fakta o České republice, dvě internetová rádia s českou folklorní a vážnou hudbou a mnoho dalších zajímavých věcí. \cite{interview1}

\begin{figure}[htbp]
    \centering
    \frame{\includegraphics[width=1.0\textwidth]{images/analysis/website.png}}
    \caption{Webové stránky CATV USA}
\end{figure}

Na fungování televizní stanice a jejím vylepšování se dobrovolně podílí studenti a univerzitní pracovníci z několika předních českých univerzit (v rámci svých závěrečných prací). Dále střední školy, orgány české státní správy, kraje, města, destinační společnosti, česká média a další. Mezi obory dobrovolníků patří nejen informatika, ale také např. marketing, design, hudba či jazyky. \cite{interview2}

CATV USA patří mezi první organizace, které se začaly věnovat internetovému vysílání a streamingu. Vzhledem k tomu, že se jedná o první a jedinečný projekt svého druhu, má obrovský potenciál i do budoucnosti. \cite{interview2}

\section{Původní stav}

CATV USA měla na svých webových stránkách dvě internetová rádia s českou folklorní a vážnou hudbou – \uv{Radio Folk} a \uv{Radio Classic}. Tato rádia automaticky přehrávala předem připravené playlisty za pomoci přehrávače Plyr. Playlisty byly složené z různých typů nahrávek -- např. vstupy moderátorů, písně nebo znělky televize CATV USA. Všechny byly uloženy a manuálně spravovány na FTP (tj. \uv{File Transfer Protocol}) serveru. Přehrávač Plyr byl již zabudovaný na webu. Záměrem bylo, aby posluchač vůbec nepoznal, že poslouchá automatizovaná rádia. Veškeré nahrávky byly předem připravené. Rádia demonstrovala a napodobovala živé vysílání. \cite{interview3}

\subsection{Rádio Folk}

\begin{figure}[htbp]
    \centering
    \frame{\includegraphics[width=0.7\textwidth]{images/analysis/radio-folk.png}}
    \caption{Ukázka rádia Folk}
\end{figure}

\newpage

Rádio Folk přehrávalo české folklorní písně z playlistu, který obsahoval následující soubory:

\begin{enumerate}

    \item přibližně deset krátkých nahrávek, na kterých bylo posluchači představeno rádio (tzv. znělky CATV USA se vstupem moderátora, např. \uv{You are listening to the Czech-American TV radio programme!}),
    
    \item přibližně dvacet krátkých nahrávek, na kterých byla posluchači představena hudební skupina (např. \uv{You will now listen to the Czech brass band Sobuláci!}),

    \item přibližně tisíc písní od přibližně dvaceti hudebních skupin. \cite{interview3}

\end{enumerate}

Soubory byly v playlistu uloženy následovně: jedna nahrávka z bodu 1, jedna nahrávka z bodu 2 a tři písně (od stejné hudební skupiny) z bodu 3. Tento vzor se neustále opakoval. Výběr znělek, hudebních skupin a písní byl při každém spuštění přehrávače náhodný a výlučný (tzn. že náhodně vybíral znělky, skupiny a písně, dokud nebyly přehrány úplně všechny). Tím bylo vyloučeno opakování (tzn. že posluchač nikdy neslyšel dvě stejné znělky, skupiny či písně po sobě). \cite{interview3}

Nad přehrávačem bylo zobrazeno logo rádiové stanice a textové informace o hudební skupině, jejíž písně se právě přehrávaly. Uváděl se název skupiny, její webové stránky a telefonní číslo. \cite{interview3}

\subsection{Rádio Classic}

\begin{figure}[htbp]
    \centering
    \frame{\includegraphics[width=0.7\textwidth]{images/analysis/radio-classic.png}}
    \caption{Ukázka rádia Classic}
\end{figure}

Rádio Classic přehrávalo českou vážnou hudbu z playlistu, který fungoval podobně jako playlist rádia Folk. Posluchači bylo nejdříve představeno rádio (formou znělky CATV USA), následovaly tři skladby od různých hudebních skladatelů (ti se již nepředstavovali) a takto stále dokola. Výběr znělek, hudebních skladatelů a jejich skladeb byl opět náhodný a výlučný (tzv. shuffle mód přehrávání). Narozdíl od rádia Folk se s každým přehrávaným skladatelem zobrazovala i jeho fotografie. Mezi textovými informacemi bylo jméno hudebního skladatele a název právě přehrávané skladby (v podobě odkazů vedoucích dále na server Wikipedia). \cite{interview3}

\subsection{Výstražná hlášení}

Obě rádia používala WordPress plugin s2Member Framework. Tento plugin primárně zpřístupňoval vybrané webové příspěvky pouze těm uživatelům, kteří si za malý poplatek pořídili členství. Tito uživatelé následně získali vlastní účet, přes který měli přístup k celému webovému obsahu. Ostatním uživatelům se vybraný obsah nezobrazoval. \cite{interview3}

Neregistrovanému či nepřihlášenému posluchači se po přehrání několika písní (konkrétně tří u obou rádií, 15–20 minut) přehrávání zastavilo. Zobrazila se první výstraha, která požadovala, aby si posluchač pořídil zmíněné členství. K dispozici byl i odkaz na formulář, kde se členství dalo vyřídit. Výstrahu šlo snadno obejít, ale poslech byl i nadále pravidelně přerušován tímto výstražným hlášením. Registrovanému a přihlášenému posluchači se první výstraha nezobrazovala, a ten tak mohl poslouchat rádio bez přerušení. \cite{interview3}

Po delší době (1–2 hodiny) se zobrazovala druhá výstraha, která pouze kontrolovala, zdali posluchač stále poslouchal. Jednalo se o prevenci proti zbytečnému streamingu a zatížení serveru. \cite{interview3}

\subsection{Zjištěné chyby}

V předešlých podkapitolách byly popsány jednotlivé rádiové stanice a výstražná hlášení. Jejich analýza proběhla v úzké spolupráci se zadavatelem. Po podrobném zkoumání se však ukázalo, že skutečný stav těchto rádií neodpovídal stavu, jak jej prezentoval zadavatel. Přehrávání rádiových stanic totiž doprovázela řada různých chyb:

\begin{enumerate}

    \item Po přeskočení první výstrahy se celá webová stránka s rádiem aktualizovala a vytvořil se nový playlist. Z implementace později vyplynulo, že jednotliví hudebníci byli do playlistu vybíráni sice náhodně, ale bez ohledu na výlučnost. Například u rádia Folk se hudebníci vybírali podle složek na FTP serveru, které obsahovaly jejich písně (co složka, to hudebník). Složky však byly interpretovány jako CD/DVD jednotlivých hudebníků. Tím pádem mohlo existovat i více složek jednoho hudebníka. Navíc tyto složky občas obsahovaly i stejné písně. Hudebníci a písně se tedy mohli opakovat. U rádia Classic po každých 5–10 skladbách nastala situace, kdy byl vybrán stejný hudební skladatel dvakrát po sobě.
    
    \item U obou rádií se přibližně po hodině poslechu samo od sebe zastavilo přehrávání. Rádiová stanice následně nedokázala načítat ani přehrávat další písně, dokud se neaktualizovala celá webová stránka.
    
    \item Druhá výstraha se vůbec nezobrazovala. V kódu nebyla nalezena její implementace. Pokud uživatel neinteragoval se stránkou s rádiovou stanicí, pak se nezobrazovala ani první výstraha. Jednalo se o případy, kdy v jedné záložce prohlížeče byla otevřena stránka s přehrávanou rádiovou stanicí a uživatel pracoval v jiné záložce (nebo mimo prohlížeč). Jinými slovy, pro korektní zobrazení prvního výstražného hlášení se uživatel musel na stránku s rádiovou stanicí dívat.
    
    \item Nebylo chybou, že přehrávanou píseň šlo jednoduše přeskočit. Stačilo přehrávání přesunout těsně před její konec na ukazateli průběhu. Píseň následně dohrála až do konce. V ten moment se však přehrávání zastavilo. Po spuštění se začala přehrávat ta samá píseň od začátku. Přítomnost ukazatele průběhu navíc kazila dojem posluchače, že doopravdy poslouchá živé rádio.
    
    \item Po otevření webové stránky s rádiovou stanicí se přehrávání spustilo automaticky. Pokud se však stránka s daným rádiem aktualizovala (např. pomocí klávesy F5), rádio bylo pozastavené a žádné automatické spuštění nenastalo.
    
    \item Daná webová stránka musela obsahovat pouze jednu rádiovou stanici. Pokud obsahovala např. rádio Classic a rádio Folk zároveň, pak se v obou rádiových stanicích přehrával playlist rádia Folk (vždy podle rádia vloženého naposledy).
    
\end{enumerate}

Za způsobené chyby mohla především špatná implementace, která byla v minulosti prováděna již několikrát \cite{interview3}. Z tohoto důvodu se v kódu nacházelo spoustu nepotřebných a zbytečných funkcí, proměnných a příkazů. Veškerá funkcionalita ohledně rádií byla implementována v šabloně webu v následujících souborech:

\begin{itemize}

    \item \texttt{radio.php} – hlavní PHP skript, který prováděl tvorbu playlistu v závislosti na vybrané rádiové stanici. Definoval UI a vlastní shortcode (pomocí něho se jednotlivá rádia zobrazovala na webu).
    
    \item \texttt{player.js} – novější zkompilovaný JS balíček, který zodpovídal za hlavní logiku přehrávače, jako např. procházení playlistu, přehrávání písní nebo promítání obrázků či informací o hudebnících).

    \item \texttt{style.css} – hlavní kaskádové styly webu, jejichž součástí byla i pravidla stylů pro UI rádiových stanic.

\end{itemize}

Dalším problémem byl až příliš imperativní a nerozšiřitelný kód (zejména v souboru \texttt{radio.php}). Playlisty rádiových stanic se rozlišovaly v \texttt{if() else\{\}} konstrukci dle názvu daného rádia. K jednotlivým souborům (písně, znělky, obrázky či informace o hudebnících) uloženým na FTP serveru se přistupovalo skrze jejich exaktní názvy. Tyto soubory musely být specificky pojmenované (např. symfonie č. 9 \uv{Z Nového světa} od Antonína Dvořáka se musela jmenovat \texttt{dvo\_new.mp3} a soubor s informacemi o skladateli \texttt{popis.txt}, protože to tak vyžadoval algoritmus). Přidávání dalších rádií, playlistů, hudebníků, písní nebo obrázků tedy bylo velice obtížné. Potenciálu objektově orientovaného programování (dále jen \uv{OOP}) bylo využito pouze v souboru \texttt{player.js}. Z pohledu administrátora však bylo velice těžké upravovat výstražná hlášení, poněvadž už byla zkompilovaná právě v tomto souboru.

\section{Požadovaný stav} \label{analyza-pozadovany-stav}

Organizace CATV USA v současné době připravuje nový webový design. Chybně fungující rádiové stanice vestavěné v současné vzhledové šabloně tak představují velký problém. Proto je vyžadována změna aktuálního stavu. Optimálním řešením je realizace nového nezávislého WordPress pluginu, který umožní vytvářet automatizované rádiové stanice a přidá jednoduchou správu pro jejich řízení. Veškeré podrobnosti o požadovaných funkcionalitách jsou uvedeny v následujících podkapitolách.

\subsection{Funkční požadavky}

Požadavky se dělí na dvě kategorie: frontend (webová část) a backend (administrační část). Všechny požadavky jsou později namapovány na případy užití, které jejich obsah více specifikují.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/analysis/functional-requirements.pdf}
    \caption{Přehled funkčních požadavků}
\end{figure}

\newpage

\noindent \textbf{Zkratka:} F1

\noindent \textbf{Název:} Zobrazování rádiových stanic

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} Uživatel může navštívit webovou stránku, na které se nachází předem připravená rádiová stanice. Rádio se skládá z názvu, multimédií a přehrávače. Mezi multimédia patří videa, obrázky či textový popis hudebníka, jehož píseň se přehrává. Pokud hudebníkovi uvedená multimédia chybí, pak se místo nich zobrazuje logo rádia, příp. vybrané příspěvky z webu. Přehrávač umožňuje spustit či zastavit přehrávání. Zobrazuje jméno hudebníka a název písně.

\bigskip

\noindent \textbf{Zkratka:} F2

\noindent \textbf{Název:} Zobrazování výstražných hlášení

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} Uživateli se při poslechu pravidelně zobrazují výstražná hlášení. Tato hlášení zastavují přehrávání a vyžadují od uživatele provedení určité akce. První výstraha uživatele žádá, aby si za malý poplatek pořídil členství, které mu přinese spoustu výhod (např. zpřístupnění kompletního webového obsahu nebo nepřerušovaný poslech). Druhá výstraha pouze kontroluje, jestli uživatel stále poslouchá. Obě výstražná hlášení lze přeskočit.

\bigskip

\noindent \textbf{Zkratka:} F3

\noindent \textbf{Název:} Správa hudebníků

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Uživatel může upravovat všechny hudebníky pomocí jednoduchého rozhraní v administraci systému WordPress. U každého hudebníka lze upravit jméno, textový popis, obrázky, vstupy moderátorů a písně. Hudebníkovi lze také nastavit odpovídající hudební žánr. Vstupy moderátorů se přehrávají vždy před písněmi daného hudebníka.

\bigskip

\noindent \textbf{Zkratka:} F4

\noindent \textbf{Název:} Správa rádiových stanic

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Uživatel může upravovat všechny rádiové stanice pomocí jednoduchého rozhraní v administraci systému WordPress. U každého rádia lze upravit název, logo, webové příspěvky, playlist a výstražná hlášení. Playlist se skládá z vybraných hudebníků. Rádiová stanice následně tyto hudebníky prochází a přehrává jejich písně, příp. vstupy moderátorů.

\newpage

\subsection{Nefunkční požadavky}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{images/analysis/non-functional-requirements.pdf}
    \caption{Přehled nefunkčních požadavků}
\end{figure}

\noindent \textbf{Zkratka:} N1

\noindent \textbf{Název:} Automatizace

\noindent \textbf{Popis:} Rádiové stanice pracují samostatně a v nepřetržitém provozu. Používají předem připravená data uložená ve správě (např. playlist rádia, hudebníky a jejich písně, vstupy moderátorů atp.). K jejich běžnému provozu není potřebná aktivní účast osob (např. moderátorů).

\medskip

\noindent \textbf{Zkratka:} N2

\noindent \textbf{Název:} Dostupnost

\noindent \textbf{Popis:} Plugin lze použít jen na webové stránce spravované v systému WordPress. Rádiové stanice fungují spolehlivě na různých zařízeních (stolní počítač, notebook, tablet, mobilní telefon) a jsou kompatibilní s různými prohlížeči (Chrome, Firefox, Opera, Safari, Edge).

\medskip

\noindent \textbf{Zkratka:} N3

\noindent \textbf{Název:} Použitelnost

\noindent \textbf{Popis:} Úpravy hudebníků a rádiových stanic jsou jednoduché činnosti. Zvládnou je i netechničtí uživatelé, kteří nerozumí programování.

\medskip

\noindent \textbf{Zkratka:} N4

\noindent \textbf{Název:} Jazyková lokalizace

\noindent \textbf{Popis:} Veškeré textové výstupy pluginu jsou přeložené do anglického jazyka a zkontrolované rodilým mluvčím.

\medskip

\noindent \textbf{Zkratka:} N5

\noindent \textbf{Název:} Architektura

\noindent \textbf{Popis:} Plugin má jednoduchou modulární architekturu, která je snadno udržovatelná a potenciálně rozšiřitelná i do budoucnosti. Řídí se dle Best Practices (pro vývoj pluginů do systému WordPress), která zahrnují různá architektonická, bezpečnostní a organizační doporučení.

\medskip

\noindent \textbf{Zkratka:} N6

\noindent \textbf{Název:} Migrace

\noindent \textbf{Popis:} Plugin je přizpůsobený pro budoucí potenciální migraci dat webu CATV USA na moderní cloudové úložiště.

\subsection{Aktéři}

V této podkapitole jsou popsáni všichni aktéři, kteří dále vystupují v jednotlivých případech užití.

Posluchač je jakákoliv osoba, která má přístup k webovým stránkám CATV USA. Prostřednictvím rádiových stanic poslouchá českou folklorní a vážnou hudbu. Může přistupovat pouze k frontendové části pluginu.

Editor je jakákoliv osoba, která má přístup k administraci webu CATV USA. Vlastní potřebná práva pro úpravu jednotlivých hudebníků. Může přistupovat k backendové i frontendové části pluginu.

Administrátor je jakákoliv osoba, která má přístup k administraci webu CATV USA. Vlastní potřebná práva pro úpravu jednotlivých rádiových stanic a hudebníků. Může přistupovat k backendové i frontendové části pluginu.

\subsection{Případy užití}

Případy užití jsou namapovány na funkční požadavky následujícím způsobem:

\begin{figure}[htbp]
    \centering
    \frame{\includegraphics[width=1.0\textwidth]{images/analysis/mapping.png}}
    \caption{Mapování požadavků na případy užití}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/analysis/use-cases.pdf}
    \caption{Přehled případů užití}
\end{figure}

\noindent \textbf{Zkratka:} UC1

\noindent \textbf{Název:} Získat informace o hudebníkovi

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} V přehrávači rádiové stanice se zobrazuje jméno hudebníka (např. \uv{Bedrich Smetana}) a název skladby (např. \uv{Vltava}), která se právě přehrává. Posluchač si během přehrávání může přečíst textový popis daného hudebníka, ve kterém se nachází např. informace o jeho životě nebo kariéře. Zároveň si může prohlížet obrázky, na kterých je daný hudebník vyobrazen. Při změně hudebníka nebo skladby se uvedené informace aktualizují.

\bigskip

\noindent \textbf{Zkratka:} UC2

\noindent \textbf{Název:} Přehrávat rádiovou stanici

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} Posluchač může spustit či zastavit přehrávání rádiové stanice pomocí k tomu určených ikonek (play/pause) v přehrávači. Rádiová stanice přehrává audio/video nahrávky hudebníků (např. písně, reklamy, znělky). Během přehrávání zobrazuje obrázky a textové popisy hudebníků. Pokud obrázky a popisy hudebníkům chybí, může administrátor nastavit promítání vybraných webových příspěvků. Jedná se o jakékoli existující příspěvky z webu (např. české tradice). V takovém případě je zobrazena titulní fotografie a obsah daného příspěvku. Se změnou písně se zobrazí další webový příspěvek.

\bigskip

\noindent \textbf{Zkratka:} UC3

\noindent \textbf{Název:} Zobrazit stránku s rádiem

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} Pro poslech rádiové stanice musí posluchač nejprve přistoupit k předem připravené stránce s daným rádiem. Tato stránka obsahuje úvodní text, rádiovou stanici, příp. technické informace.

\bigskip

\noindent \textbf{Zkratka:} UC4

\noindent \textbf{Název:} Vyřídit výstražné hlášení

\noindent \textbf{Kategorie:} Frontend

\noindent \textbf{Popis:} Po přehrání určitého počtu hudebníků se přehrávání rádiové stanice zastaví. Zobrazí se výstraha, která požaduje, aby si posluchač pořídil členství. Ve výstraze je odkaz, který posluchače přesměruje na stránku s registračním formulářem. Výstrahu lze přeskočit a pokračovat v poslechu. Pokud se však posluchač nezaregistruje nebo nepřihlásí, výstraha bude i nadále pravidelně přerušovat přehrávání. Registrovaní a přihlášení posluchači mohou rádio poslouchat bez přerušení. Při přehrávání se zobrazuje i další výstraha, která pouze kontroluje, jestli posluchač stále poslouchá.

\newpage

\noindent \textbf{Zkratka:} UC5

\noindent \textbf{Název:} Spravovat informace o hudebníkovi

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor (příp. editor) může upravovat veškeré informace o daném hudebníkovi (tj. jméno a textový popis). Pro úpravy popisu má k dispozici vestavěný WYSIWYG editor. Hudebníka lze přiřadit k hudebnímu žánru, ke kterému muzikálně náleží. Žánry (např. klasická nebo lidová hudba) budou použity v budoucnosti pro tvorbu různých archivů na webovou stránku (např. archiv českých skladatelů).

\bigskip

\noindent \textbf{Zkratka:} UC6

\noindent \textbf{Název:} Spravovat obrázky hudebníka

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor (příp. editor) může přidávat, upravovat či mazat obrázky daného hudebníka. Ty se postupně zobrazují v průběhu přehrávání jeho písní. Výběr konkrétního obrázku je náhodný a výlučný (shuffle mód).

\bigskip

\noindent \textbf{Zkratka:} UC7

\noindent \textbf{Název:} Spravovat nahrávky hudebníka

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor (příp. editor) může přidávat, upravovat či mazat nahrávky daného hudebníka (např. písně, videa, znělky nebo reklamní oznámení). Taktéž může přidávat, upravovat či mazat úvodní nahrávky (např. \uv{You will now listen to the Czech brass band Vacenovjáci!}). Když na hudebníka dojde řada v playlistu, přehraje se jedna úvodní nahrávka (např. vstup moderátora) následovaná libovolným počtem nahrávek (např. písní). Výběr konkrétní úvodní nahrávky a nahrávky je náhodný a výlučný (shuffle mód).

\bigskip

\noindent \textbf{Zkratka:} UC8

\noindent \textbf{Název:} Zobrazit stránku s nastavením hudebníka

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Pro úpravu informací, obrázků a nahrávek daného hudebníka musí administrátor (příp. editor) nejprve přistoupit ke stránce s nastavením tohoto hudebníka. Ta se nachází v administraci systému WordPress společně se stránkami ostatních hudebníků. Na stejném místě lze jednotlivé hudebníky přidávat a mazat.

\bigskip

\noindent \textbf{Zkratka:} UC9

\noindent \textbf{Název:} Spravovat informace o rádiu

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor může upravovat veškeré informace o dané rádiové stanici (tj. název a logo). Logo rádia se zobrazuje jen tehdy, když hudebník nemá žádné obrázky ani popis a zároveň nejsou promítány žádné webové příspěvky. Pro každou rádiovou stanici je možné nastavit dobu zobrazení obrázků přehrávaných hudebníků (v sekundách). Dále lze vybrat konkrétní webové příspěvky, které se v rádiu promítají namísto obrázků a popisů hudebníků. Promítání webových příspěvků je náhodné a výlučné (shuffle mód).

\bigskip

\noindent \textbf{Zkratka:} UC10

\noindent \textbf{Název:} Spravovat výstražná hlášení rádia

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor může přidávat, upravovat či mazat výstražná hlášení dané rádiové stanice. U každého lze upravit nadpis, obsah, cílovou uživatelskou skupinu a počet hudebníků, po kterých se dané hlášení zobrazí. Součástí každé výstrahy je tlačítko pro její potvrzení. S tímto tlačítkem může být propojena nastavitelná URL adresa, na kterou je posluchač po kliknutí přesměrován.

\bigskip

\noindent \textbf{Zkratka:} UC11

\noindent \textbf{Název:} Spravovat playlist rádia

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Administrátor může přidávat, upravovat či mazat položky v playlistu dané rádiové stanice. Položka playlistu reprezentuje skupinu hudebníků. Pro každou položku lze nastavit konkrétní hudebníky, počet přehrávaných hudebníků a počet přehrávaných nahrávek od každého z nich. Výběr hudebníků je náhodný a výlučný (shuffle mód). Rádiová stanice prochází playlist cyklicky ve směru shora dolů.

\bigskip

\noindent \textbf{Zkratka:} UC12

\noindent \textbf{Název:} Zobrazit stránku s nastavením rádia

\noindent \textbf{Kategorie:} Backend

\noindent \textbf{Popis:} Pro úpravu informací, výstražných hlášení a playlistu dané rádiové stanice musí administrátor nejprve přistoupit ke stránce s nastavením tohoto rádia. Ta se nachází v administraci systému WordPress společně se stránkami ostatních rádií. Na stejném místě lze jednotlivá rádia přidávat a mazat.

\subsection{Diagram případů užití}

Následující diagram zobrazuje jednotlivé aktéry a jejich oprávnění v rámci webové stránky CATV USA. Každý z aktérů je asociován se specifickými případy užití. Oprávněnější aktéři dědí případy užití méně oprávněnějších aktérů. U všech případů je nejdříve nutné zobrazit specifickou webovou stránku (s rádiovou stanicí nebo s nastavením hudebníka či rádia). Používání rádia navíc může být rozšířeno o případ vyřízení výstražných hlášení.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/analysis/use-case-diagram.pdf}
    \caption{Diagram případů užití}
\end{figure}

\newpage

\subsection{Doménový model}

Následující diagram zachycuje entity problémové domény a vztahy mezi nimi. Slouží k jejich objasnění a lepšímu pochopení. Důležité je zmínit, že položky playlistu rádia jsou interpretovány jako soubory hudebníků, nikoliv jako nahrávky. Při přehrávání se z tohoto souboru vybere určitý počet hudebníků. Od každého z nich je následně přehrán určitý počet nahrávek. Z tohoto důvodu neexistuje přímá vazba mezi položkou playlistu a nahrávkou. Jedná se o nové pojetí playlistu, které bude více vysvětleno a rozšířeno v příští kapitole. V diagramu jsou v určitých případech použity kompoziční vztahy. Výstražná hlášení a položky playlistu jsou nedílné součásti rádiové stanice. Podobně obrázky, nahrávky ani úvodní nahrávky (s vazbou na konkrétního hudebníka) nemají bez hudebníka smysl.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/analysis/domain-model.pdf}
    \caption{Analytický doménový model}
\end{figure}

\newpage

\subsection{Podobná řešení}

V této kapitole byly popsány a rozebrány veškeré požadavky na nový plugin do systému WordPress. Nastává otázka, zdali již nebyl vytvořen jiný WordPress plugin, který by uvedenou problematiku uspokojivě řešil.

Organizace CATV USA by si tak mohla tento plugin jednoduše dohledat v knihovně pluginů, která je přístupná přímo v administraci. Po instalaci pluginu a dalších administračních úkonech by byly zprovozněny nové rádiové stanice a dosažen požadovaný stav.

V současné době bohužel neexistuje žádný WordPress plugin, který by řešil potřeby a požadavky organizace CATV USA uvedené v této kapitole. Mezi potenciální pluginy patří \textit{Radio Station}, \textit{WP Radio Player} a \textit{StreamCast}. Tyto pluginy se však zaměřují na vysílání již existujících živých rádií. Obsah vysílání nelze přímo vytvářet. Uvedené pluginy se tudíž neshodují s požadovaným stavem, a proto je v následující kapitole navrhnuto vlastní řešení.

\chapter{Návrh} \label{navrh}

Na základě analýzy původního a požadovaného stavu bylo navrhnuto řešení v podobě nového pluginu do systému WordPress. V této kapitole je uveden popis a podrobnosti tohoto řešení. Výklad je doplněn o fotografie finálního prototypu a pomocné wireframes. V další kapitole je pak na základě návrhu popsána implementace nového pluginu.

\section{Radio Manager}

Nový plugin do systému WordPress se jmenuje \textit{Radio Manager}. Představuje manažera, který spravuje a řídí všechna internetová rádia na webové stránce. Samotný plugin je rozdělen do tří částí – frontend (část viditelná z webové stránky), backend (část viditelná z administrace systému WordPress) a propojení těchto dvou částí (způsob, jakým lze rádiové stanice vkládat na web). Na webové stránce jsou rádiové stanice prezentovány koncovým posluchačům, zatímco v administraci systému WordPress jsou jednotlivá rádia spravována administrátory (příp. editory). Všechny uvedené části jsou podrobně popsány v následujících podkapitolách.

Návrh všech částí byl orientován na specifickou uživatelskou skupinu. Tato skupina zahrnuje anglicky mluvící uživatele z USA, kteří nerozumí technice ani programování. Někteří z nich znají systém WordPress jen na elementární úrovni (např. tvorba a editace příspěvků). Vyžadují jednoduchost, přehlednost, příp. adekvátní uživatelskou podporu. Důležité jsou pro ně zvyky, tradice a zavedené postupy. Z tohoto důvodu se neradi učí novým věcem, které potřebují pochopit a vysvětlit. Uživatelé z této skupiny byli vybráni pro testování, o kterém se lze dočíst více později v této práci (kap. \ref{testovani}).

\section{Frontend} \label{navrh-frontend}

Výstupem pluginu na webové stránce je responzivní přehrávač, který lze vložit do jakéhokoli příspěvku vytvořeného v systému WordPress. Tento přehrávač používá data konkrétní rádiové stanice ze správy. V této podkapitole je popsán jeho vzhled a jednotlivé součásti. Tvorba rádiových stanic je popsána v podkapitole \ref{navrh-backend}. Způsob, jakým lze přehrávač daného rádia vložit do konkrétního příspěvku, je popsán v podkapitole \ref{navrh-propojeni}.

\subsection{Přehrávač} \label{navrh-prehravac}

Přehrávač se skládá z názvu rádiové stanice, multimédií a ovládání. Použité barvy (světle modrá, tmavě červená, tmavě šedá a bílá) byly vybrány záměrně. Tyto barvy jsou součástí loga zadavatele a současné vzhledové šablony jeho webových stránek. Následující ukázky zobrazují finální prototyp přehrávače, který byl vytvořen a otestován v nástroji Axure RP.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/radio-classic.png}
    \caption{Ukázka rádia Classic}
\end{figure}

\newpage

\subsubsection{Název rádiové stanice}

První částí přehrávače je hlavička, ve které se nachází název rádia.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/radio-name.png}
    \caption{První část přehrávače}
\end{figure}

\subsubsection{Multimédia}

Ve druhé části přehrávače se zobrazují následující multimédia – videa, webové příspěvky, obrázky, textový popis a logo rádia. Videa, obrázky a textový popis jsou vázány na přehrávaného hudebníka, zatímco webové příspěvky a logo na danou rádiovou stanici. Hudebníci a rádiové stanice jsou v systému reprezentováni jako příspěvky nových typů (více později v této kapitole). V následujícím výčtu jsou podrobněji popsána jednotlivá multimédia: 

\begin{itemize}

    \item \textit{Videa} jsou nahrávky (příp. úvodní nahrávky) ve formátu MP4, které jsou přiřazeny danému hudebníkovi.
    
    \item \textit{Webové příspěvky} jsou vybrané příspěvky z webu, které mají titulní fotografii (tzv. \uv{Featured image}) a textový obsah. S každou přehrávanou písní je zobrazen vždy jiný webový příspěvek. V přehrávači je zobrazena jeho titulní fotografie (včetně doprovodných titulků). Po kliknutí na tuto fotografii se místo ní zobrazí obsah daného webového příspěvku (s možností návratu zpět).
    
    \item \textit{Obrázky} jsou soubory ve formátech JPG/PNG/GIF, které jsou přiřazeny danému hudebníkovi. V přehrávači se zobrazují jako snímky slideshow (včetně doprovodných titulků). Každý snímek je zobrazen po určitý čas. Přechody mezi snímky jsou plynulé. Po kliknutí na jakýkoli snímek se místo něj zobrazí popis daného hudebníka (s možností návratu zpět).
    
    \item \textit{Popis} je obsah příspěvku s hudebníkem. Může obsahovat kupříkladu informace o jeho životě či kariéře.
    
    \item \textit{Logo rádia} je titulní fotografie (tzv. \uv{Featured image}) příspěvku s rádiovou stanicí.

\end{itemize}

\newpage

Multimédia se řídí následujícím pravidlem, které vyznačuje jejich priority:

\bigskip

\textbf{Videa > Webové příspěvky > Obrázky > Popis > Logo}

\bigskip

Pokud se přehrává videonahrávka, ostatní multimédia napravo od ní jsou skrytá. Pokud se přehrává audionahrávka a zároveň se promítají webové příspěvky, pak jsou v přehrávači zobrazeny právě tyto příspěvky (i přesto, že hudebník má obrázky i popis). V případě ostatních multimédií je chování analogické. Pokud hudebník nemá žádná videa, obrázky ani popis a webové příspěvky se nepromítají, pak je zobrazeno logo rádiové stanice.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/radio-multimedia.png}
    \caption{Druhá část přehrávače}
\end{figure}

\subsubsection{Ovládání}

Poslední částí přehrávače je ovládání, které obsahuje tlačítko pro spuštění, příp. zastavení přehrávání. Tlačítko je záměrně červeně podbarvené, aby upoutalo pozornost posluchače \cite{ux}. Automatické spuštění přehrávání je (narozdíl od předešlého stavu rádií) vypnuté, jelikož představuje špatné UX (tj. \uv{User eXperience}) \cite{autoplay}. V této části přehrávače se zobrazuje i jméno hudebníka a název skladby, která se v danou chvíli přehrává. Obě položky mají vlastní popisky (např. \uv{Musician:} nebo \uv{Song:}). Ovládání používá mřížku knihovny Bootstrap a je tak responzivní na různých zařízeních.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/radio-player.png}
    \caption{Poslední část přehrávače}
\end{figure}

\newpage

\subsubsection{Výstražná hlášení}

Nepřímou součástí přehrávače jsou také výstražná hlášení. Jedná se o dialogová okna s tmavým pozadím, která se pravidelně zobrazují po přehrání určitého počtu hudebníků. Zatímco je výstraha zobrazená, přehrávání je pozastavené. Každá výstraha obsahuje nadpis, obsah, ikonku křížku a tlačítka \uv{Close} a \uv{OK}. Pomocí tlačítek a křížku lze výstrahu ukončit a pokračovat v poslechu. Tlačítko \uv{OK} však může být spojeno s libovolnou URL adresou, na kterou se posluchač po kliknutí přesměruje (v nové záložce prohlížeče).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/radio-warning.png}
    \caption{Výstražné hlášení}
\end{figure}

\subsection{Kontext}

Vzhledem k tomu, že přehrávač rádia lze vložit do jakéhokoli příspěvku v systému WordPress, má administrátor (příp. editor) možnost vytvářet různé doprovodné prvky. Mezi ně patří např. úvodní poutavý text nad přehrávačem nebo technické informace pod ním. Takové prvky však nejsou součástí přehrávače ani pluginu \textit{Radio Manager}.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/frontend/phones.png}
    \caption{Ukázka přehrávačů na mobilních telefonech}
\end{figure}

\section{Backend} \label{navrh-backend}

Výstupem pluginu v administraci je sekce pojmenovaná jako \textit{Radio Manager}, která se nachází v levém navigačním menu systému WordPress. Její název je vyznačen tematickou WordPress ikonkou \texttt{dashicons-format-audio} (tj. dvojice not). Mezi položkami uvedené sekce jsou:

\begin{itemize}

    \item \textit{Radio Stations} (stránka se správou rádiových stanic),
    
    \item \textit{Musicians} (stránka se správou hudebníků),

    \item \textit{Genres} (stránka se správou žánrů),
    
    \item \textit{Help} (uživatelská příručka).

\end{itemize}

\begin{figure}[htbp]
    \centering
    \frame{\includegraphics[width=0.4\textwidth]{images/backend/menu.png}}
    \caption{Rozhraní pluginu v administraci}
\end{figure}

Přístup k jednotlivým položkám je z bezpečnostních důvodů omezen. Uživatelé musí mít potřebná oprávnění. Administrátoři mají přístup ke všem položkám (díky oprávnění \texttt{manage\_options}). Editoři mají přístup pouze k položkám \textit{Musicians} a \textit{Help} (díky oprávnění \texttt{edit\_posts}). Ostatní uživatelé, kteří nemají oprávnění \texttt{manage\_options} ani \texttt{edit\_posts}, tuto sekci nevidí. V následujících podkapitolách jsou popsány všechny uvedené položky a jejich obsah. Doprovodné náčrty a wireframes byly vytvořeny v nástroji Axure RP.

\subsection{Rádiové stanice} \label{navrh-radiove-stanice}

Obsahem položky \textit{Radio Stations} je přehledný seznam, kde lze libovolně přidávat, upravovat, příp. mazat příspěvky s rádiovými stanicemi. Každé rádio je reprezentováno jako příspěvek nového typu s názvem \texttt{rm\_radio\_station}.

U každého příspěvku lze změnit název a titulní fotografii (tj. logo rádia), která zároveň slouží ke snadné orientaci v uvedeném seznamu. Dále je k dispozici unikátní shortcode, pomocí kterého lze rádio vložit na webovou stránku (více později v této kapitole). Následují tři uživatelská pole (vytvořená pomocí pluginu Advanced Custom Fields) pro nastavení, playlist a výstražná hlášení. Všechna jsou popsána v následujících podkapitolách.

Rozložení jednotlivých prvků je znázorněno na následujícím wireframe. Světle modře jsou označeny všechny prvky, které jsou automaticky přidané systémem WordPress. Zatímco světle žlutě jsou označeny prvky dodané pluginem. Rozložení většiny prvků může být ručně změněno.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/backend/radio-station.png}
    \caption{Rozložení prvků v příspěvku rádiové stanice}
\end{figure}

\subsubsection{Nastavení}

Prvním uživatelským polem (typu \uv{Group}) v příspěvku s rádiovou stanicí je nastavení. Skládá se ze čtyř položek:

\begin{itemize}

    \item \textit{Image duration} – doba zobrazení jednoho obrázku (v sekundách), který se promítá v přehrávači jako snímek slideshow.

    \item \textit{Website posts} – rozhraní pro výběr libovolných příspěvků z webu. Tyto příspěvky se následně promítají v přehrávači. Promítání webových příspěvků je však nutné aktivovat pro konkrétní položky playlistu (více níže). Webové příspěvky jsou promítány ve stylu shuffle.

    \item \textit{Musician caption} – popisek hudebníka v přehrávači (např. \uv{Composer:} či \uv{Music Band:}).

    \item \textit{Recording caption} – popisek nahrávky v přehrávači (např. \uv{Song:}).
    
\end{itemize}

Každá položka má textovou nápovědu (na místě \uv{Description.}).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/backend/settings.png}
    \caption{Nastavení rádiové stanice}
\end{figure}

\newpage

\subsubsection{Playlist}

Druhým uživatelským polem (typu \uv{Repeater}) v příspěvku s rádiem je playlist. Playlist se skládá z libovolného počtu položek, které může administrátor přidávat, upravovat, příp. mazat. Každá položka obsahuje čtyři podpoložky:

\begin{itemize}

    \item \textit{Genres} – hudební žánry, které představují různé skupiny hudebníků (např. \uv{Classical} či \uv{Folk}). Při přehrávání dané playlistové položky je zvolen jeden z těchto žánrů.

    \item \textit{Number of musicians} – počet hudebníků vybíraných ze zvoleného hudebního žánru.

    \item \textit{Number of recordings} – počet nahrávek vybíraných od zvolených hudebníků. Tyto nahrávky jsou následně přehrány.

    \item \textit{Show website posts} – možnost aktivovat promítání webových příspěvků při přehrávání nahrávek vybraných v rámci dané playlistové položky.
    
\end{itemize}

Všechny podpoložky mají textové nápovědy (na místě \uv{Description.}). Vzhledem k náročnosti zadavatelových požadavků a velkému množství písní nebylo možné playlist pojmout jako \uv{obyčejný seznam nahrávek}. Z tohoto důvodu je zvolena vyšší abstrakce založená na hudebních žánrech (tj. skupinách hudebníků), ke kterým lze jednotlivé hudebníky libovolně přiřazovat.

Jako příklad poslouží následující wireframe. Řekněme, že obsahem daného playlistu je pouze první položka. Nejdříve je vybrán hudební žánr (v tomto případě je vždy zvolen \uv{Classical}). Z tohoto žánru jsou vybráni tři skladatelé vážné hudby. Od každého z nich je vybrána jedna nahrávka. Rádiová stanice tedy přehrává tři skladby od různých skladatelů a takto stále dokola. Promítání webových příspěvků je vypnuté, tudíž se v průběhu přehrávání promítají obrázky skladatelů. Žánry a hudebníci jsou vybíráni ve stylu shuffle.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/backend/playlist.png}
    \caption{Playlist rádiové stanice}
\end{figure}

\subsubsection{Výstražná hlášení}

Posledním uživatelským polem (typu \uv{Repeater}) v příspěvku s rádiem jsou výstražná hlášení. Administrátor může přidávat, upravovat, příp. mazat jednotlivé výstrahy. Každá výstraha obsahuje následující položky:

\begin{itemize}

    \item \textit{Active} – možnost aktivovat či deaktivovat výstražné hlášení.

    \item \textit{Show to} – skupina uživatelů, kterým se výstraha zobrazuje. K dispozici jsou volby \uv{All users} (všichni uživatelé), \uv{Registered in the s2Member} (registrovaní) a \uv{Not registered in the s2Member} (neregistrovaní).

    \item \textit{First} – počet hudebníků, po kterých se výstraha zobrazí poprvé. Pomocí této položky lze výstražné hlášení zobrazit např. ihned po spuštění přehrávače (\textit{First}: 0).

    \item \textit{Step} – počet hudebníků, po kterých se výstraha pravidelně zobrazuje (počítáno od prvního zobrazení ve \textit{First}).

    \item \textit{Title} – nadpis výstrahy.

    \item \textit{Message} – obsah výstrahy.

    \item \textit{Link} – URL adresa, na kterou je posluchač přesměrován po kliknutí na tlačítko \uv{OK}. Pokud není vyplněna, pak toto tlačítko ukončuje výstražné hlášení.
    
\end{itemize}

Každá položka má textovou nápovědu (na místě \uv{Description.}).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/backend/warning.png}
    \caption{Výstražná hlášení rádiové stanice}
\end{figure}

\subsection{Hudebníci} \label{navrh-hudebnici}

Podobně jako u rádií je obsahem položky \textit{Musicians} přehledný seznam, kde lze libovolně přidávat, upravovat, příp. mazat příspěvky s hudebníky. Každý hudebník je reprezentován jako příspěvek nového typu s názvem \texttt{rm\_musician}.

U každého příspěvku lze změnit název (tj. jméno hudebníka), obsah (tj. popis hudebníka) a titulní fotografii, která slouží ke snadné orientaci v uvedeném seznamu. Pro úpravy obsahu slouží klasický WYSIWYG editor systému \mbox{WordPress}. K dispozici jsou také hudební žánry, ke kterým lze hudebníka přiřadit. Následují tři uživatelská pole (typu \uv{Repeater}) pro obrázky, úvodní nahrávky a nahrávky daného hudebníka. Obrázky se promítají v průběhu přehrávání nahrávek (např. písní). Úvodní nahrávky (např. vstupy moderátora) se přehrávají před nahrávkami. U obrázků lze upravovat doprovodné titulky a u nahrávek jejich názvy. Uvedená multimédia se nahrávají do knihovny médií a pro přehrávání jsou vybírána ve stylu shuffle.

Rozložení jednotlivých prvků je znázorněno na následujícím wireframe. Světle modře jsou označeny všechny vestavěné prvky systému WordPress. Zatímco světle žlutě jsou označeny prvky dodané pluginem. Rozložení většiny prvků může být ručně změněno.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.85\textwidth]{images/backend/musician.png}
    \caption{Rozložení prvků v příspěvku hudebníka}
\end{figure}

\subsection{Žánry} \label{navrh-zanry}

Obsahem položky \textit{Genres} je přehledný seznam, kde lze libovolně přidávat, upravovat, příp. mazat termíny nové taxonomie \texttt{rm\_genre}. Mezi ně patří např. \uv{Classical}, \uv{Folk}, ba dokonce \uv{Announcements} (reklamní oznámení) nebo \uv{Jingles} (znělky). Výběr termínů je k dispozici při tvorbě hudebníka. Administrátor (příp. editor) tak může jednotlivé hudebníky přiřazovat k různým žánrům, ze kterých je následně vytvářen playlist rádiové stanice.

\subsection{Pomoc}

Obsahem položky \textit{Help} je uživatelská příručka, která slouží jako podpora pro začínající uživatele. Může být použita i v případě různých nesnází či problémů. Uživatelská příručka je k dispozici v příloze \ref{priloha-uzivatelska-prirucka}.

\section{Propojení frontendové a backendové části} \label{navrh-propojeni}

Každá rádiová stanice obsahuje shortcode. Jedná se o krátký kód, pomocí kterého lze dané rádio vložit do libovolného příspěvku v systému WordPress. Jeho parametrem je \texttt{id}, které představuje identifikační číslo příspěvku rádiové stanice. Administrátor může použít tlačítko \textit{Copy} pro zkopírování shortcode, který následně vloží do jakéhokoli příspěvku. Po zobrazení příspěvku na webu se místo shortcode vykreslí přehrávač dané rádiové stanice. Na webové stránce může být vykresleno i více přehrávačů rádií, které fungují nezávisle na sobě. Implementační detaily se lze dočíst v následující kapitole.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.5\textwidth]{images/backend/shortcode.png}
    \caption{Shortcode v příspěvku rádiové stanice}
\end{figure}

\chapter{Implementace} \label{implementace}

V této kapitole je popsána implementace obou částí (tj. frontend a backend) nového WordPress pluginu \textit{Radio Manager} včetně jejich propojení. Implementace byla zhotovena na základě návrhu a analýzy požadavků zadavatele. Výklad je doplněn o pomocné diagramy. V další kapitole je popsáno testování vytvořeného pluginu.

\section{Vývoj}

Plugin \textit{Radio Manager} byl vyvíjen v prostředí Microsoft Visual Studio 2019 (s občasnou pomocí textového editoru Notepad++). Veškerý kód je uložen ve vzdáleném Git repozitáři, který se nachází na oficiálním GitHub účtu organizace CATV USA. Tento repozitář je privátní a mohou k němu přistupovat pouze oprávnění členové. Repozitář obsahuje dvě větve – \textit{dev}, na které probíhal vývoj, a \textit{main}, která obsahuje funkční a otestovaný kód z vývojářské větve. Od počátku vývoje bylo do repozitáře pravidelně příspíváno prostřednictvím vhodně pojmenovaných commitů. Významným commitům byly přiřazeny tagy ve formě čísel verzí (majoritních, minoritních i opravných). Veškerý kód byl okomentován pomocí JSDoc a PHPDoc. Jeho testování probíhalo na testovací webové stránce CATV USA, která představuje kopii oficiální webové stránky \url{www.catvusa.com}.

\section{Frontend}

Frontendová část pluginu \textit{Radio Manager} zahrnuje UI a logiku rádiových stanic na webové stránce. Tato část byla naprogramována pomocí skriptovacích jazyků JavaScript a Sass jako balíček NPM, který pracuje na straně klienta. Při jeho vývoji byly použity i další technologie, jako např. Babel, Bootstrap, Gulp, React či Swiper. Veškerý frontend je obsažen ve dvou balíčcích zkompilovaného a minifikovaného kódu – \texttt{rm-scripts.min.js} a \texttt{rm-styles.min.css}. První balíček obsahuje ES6 třídy a React komponenty. Druhý balíček obsahuje kaskádové styly pro tyto komponenty. Názvy balíčků obsahují unikátní prefix \uv{rm} (tj. zkratka názvu \textit{Radio Manager}) jako ochranu proti případným kolizím. Po zobrazení webové stránky jsou uvedené balíčky načteny do prohlížeče uživatele.

\subsection{Automatizace procesů}

Zmíněné balíčky kódu jsou výstupy nástroje Gulp. Tento nástroj umožňuje zjednodušit, automatizovat a urychlit různé procesy, se kterými se lze při vývoji software setkat. V případě pluginu \textit{Radio Manager} se Gulp používá pro zpracování skriptů, kaskádových stylů a sledování změn příslušných souborů, které jsou následně promítány do prohlížeče. Zpracování JS a SCSS se dále liší podle toho, zdali jsou určené pro vývojové nebo produkční prostředí. Pro všechny uvedené procesy byly vytvořeny následující tasks – \texttt{scriptsDev}, \texttt{scriptsProd}, \texttt{stylesDev}, \texttt{stylesProd} a \texttt{track}. Tyto tasks jsou veřejné (lze je spustit pomocí příkazu \texttt{gulp <nazevTasku>}).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/implementation/gulp.pdf}
    \caption{Diagram Gulp tasks}
\end{figure}

Pomocí Gulp metod \texttt{series()} a \texttt{parallel()} lze spustit více tasks, a to buď sekvenčně (za sebou), nebo paralelně (zároveň). Pro vývoj frontendové části byly vytvořeny následující kombinace:

\begin{itemize}

    \item \texttt{series( parallel( scriptsDev, stylesDev ), track )}
    
    \item \texttt{parallel( scriptsProd, stylesProd )}

\end{itemize}

První kombinace provádí paralelní kompilaci JS a SCSS včetně tzv. \uv{Source Maps} (více níže). Po dokončení těchto tasks je spuštěno sledování a promítání změn příslušných souborů do prohlížeče. Tato kombinace je nastavena jako tzv. výchozí task (spouští se po zadání příkazu \texttt{gulp}), protože byla při vývoji frontendové části nejvíce používaná.

Druhá kombinace opět provádí paralelní kompilaci JS a SCSS (tentokrát bez \uv{Source Maps}). Výsledné soubory jsou následně minifikovány. Výsledek této kombinace lze použít na webové stránce v produkčním prostředí.

Během vývoje stačí pomocí CLI zadat příkaz \texttt{npm start} (tj. spuštění vlastního NPM balíčku s frontendovou částí), který je namapovaný na příkaz \texttt{gulp}. Tento příkaz následně spustí výchozí task. Programátorovi je spuštěno prostředí, ve kterém může snáze a rychleji vyvíjet. Zároveň jej osvobozuje od velkého množství ruční práce spojené např. s kompilací, sestavením a minifikací JS nebo SCSS souborů. V následujících podkapitolách jsou popsány jednotlivé procesy podrobněji.

\subsubsection{Skripty}

Frontendová část byla napsána pomocí jazyka JavaScript. Při tvorbě skriptů byly použity i novější prvky a konstrukty (např. generátory) ze standardů ECMAScript 2015 (ES6) a vyšších. Zároveň byla použita technologie React včetně syntaxe JSX. Tasky \texttt{scriptsDev} a \texttt{scriptsProd} provádí inkrementální kompilaci všech JS souborů pomocí technologie Babel, pro kterou jsou nastaveny presety \texttt{@babel/preset-env} a \texttt{@babel/preset-react}. Zkompilované soubory jsou následně sloučeny do jediného souboru (tzv. \uv{bundle}).

V případě tasku \texttt{scriptsDev} jsou součástí kódu také tzv. \uv{Source Maps}, které mapují zkompilovaný JavaScript na původní soubory, čímž usnadňují jeho ladění a hledání případných chyb. V případě tasku \texttt{scriptsProd} je zkompilovaný kód jen minifikován (bez Source Maps). Task \texttt{scriptsDev} je určen pro vývoj v rámci testovacího prostředí, zatímco task \texttt{scriptsProd} pouze generuje finální JS balíček pro produkční prostředí.

\subsubsection{Kaskádové styly}

Při tvorbě frontendové části byl kromě jazyka JavaScript použit i jazyk Sass, ve kterém jsou napsané veškeré kaskádové styly. Pomocí tohoto jazyka lze psát CSS mnohem úsporněji a bez opakujících se částí kódu. Tasky \texttt{stylesDev} a \texttt{stylesProd} provádí kompilaci všech SCSS souborů do obyčejných CSS, kterým rozumí běžné webové prohlížeče.

V případě tasku \texttt{stylesDev} jsou součástí kódu také Source Maps, které usnadňují hledání chyb v CSS. V případě tasku \texttt{stylesProd} je zkompilovaný kód jen minifikován (bez Source Maps). Podobně jako u skriptů je task \texttt{stylesDev} určen pouze pro vývoj, zatímco task \texttt{stylesProd} slouží pro vygenerování finálního CSS balíčku pro produkční prostředí.

\subsubsection{Sledování změn}

Task \texttt{track} umožňuje pomocí technologie Browsersync spustit vlastní lokální server s rádiovou stanicí přímo v prohlížeči. Gulp nadále sleduje HTML, SCSS a JS soubory pomocí metody \texttt{watch()}. V případě modifikace jakéhokoli z těchto souborů se změny ihned projeví v prohlížeči. Okamžitá zpětná vazba bez nutnosti stránku aktualizovat (např. pomocí klávesy F5) urychluje vývoj. Spuštěná rádiová stanice je navíc přístupná i pro ostatní elektronická zařízení připojená v dané síti. Výsledek je tedy možné otestovat v různých prohlížečích a zařízeních, aniž by se musel nahrávat na internet.

\subsection{Komponenty UI}

Uživatelské rozhraní každé rádiové stanice je rozdělené do menších, samostatných a znovupoužitelných částí kódu – komponent. Pro jejich tvorbu byla použita technologie React a syntaxe JSX, která umožňuje zapisovat obdobu HTML do JS kódu. Každá komponenta je implementovaná jako ES6 třída, která příjímá určitý vstup (tzv. Props) a generuje určitý výstup v podobě React elementů nebo dalších React komponent.

Nejvyšší komponentou v hierarchii je \texttt{RMRadio}, která je pomocí knihovny ReactDOM a metody \texttt{render()} vložena na předem určené místo v modelu DOM. Této komponentě jsou předány počáteční parametry pro inicializaci jejího obsahu a dalších komponent. Komponenta také obsahuje stav (tzv. State) – privátní data, která jsou důležitá pro správnou funkčnost dané rádiové stanice. Tato stavová data (příp. metody, pomocí kterých je lze měnit) jsou následně předávána dalším komponentám umístěným níže v hierarchii. Každá komponenta obsahuje informace o UI, příp. logiku.

Z bezpečnostních důvodů React implicitně odstraňuje HTML z výrazů použitých v syntaxi JSX (např. z JS proměnných). Vše převádí na řetězce znaků, a tudíž předchází škodlivým XSS útokům. Tato ochrana je u rádiových stanic potlačena pouze v případě textů o hudebnících (příp. webových příspěvků) a zpráv výstražných hlášení. V prvním případě se jedná o zobrazení formátovaného příspěvku ze systému WordPress. Ve druhém případě se jedná o zobrazení formátovaného textu, který je uložený v systému pomocí pluginu Advanced Custom Fields. Pro oba případy je vyžadováno parsování HTML, aby byl daný obsah korektně zobrazen uživateli.

Následující diagram zobrazuje hierarchii React komponent, které zajišťují vzhled a logiku rádiové stanice na webové stránce.

\newpage

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/implementation/react.pdf}
    \caption{Diagram React komponent}
\end{figure}

Každá komponenta má v rámci hierarchie určitý účel a zodpovědnost. V následujícím seznamu jsou stručně popsány všechny uvedené komponenty:

\begin{itemize}

    \item \texttt{RMRadio} je nejvyšší komponenta, která obsahuje stav. Vykresluje rádiovou stanici jako celek rozdělený na 4 hlavní části – název, multimédia, vizuální přehrávač a výstražná hlášení.
    
    \item \texttt{RMRadioName} představuje název rádiové stanice.
    
    \item \texttt{RMRadioMultimedia} je proměnlivou částí rádia, ve které se přehrávají videa, promítají obrázky (příp. logo) a zobrazují texty.
    
    \item \texttt{RMRadioPlayer} vykresluje vizuální přehrávač, který obsahuje ikonky pro ovládání a informace o přehrávaném hudebníkovi a písni.
    
    \item \texttt{RMRadioWarning} není součástí rádiové stanice vizuálně. Zobrazuje se v průběhu přehrávání jako výstražné okno. Využívá také další externí komponenty \texttt{Button} a \texttt{Modal} pro vykreslení ovládacích tlačítek a samotného výstražného okna z knihovny Bootstrap.
    
    \item \texttt{RMPlayer} obsahuje veškerou logiku pro přehrávání a skrytý audio/video přehrávač, který postupně prochází playlist rádiové stanice.
    
    \item \texttt{RMSlider} je složený z externích komponent \texttt{Swiper} a \texttt{SwiperSlide} od technologie Swiper. Pomocí těchto komponent je vytvořen slider, který promítá různé obrázky (např. fotografie skladatele).
    
    \item \texttt{RMPost} představuje textový příspěvek, ve kterém se lze dočíst více informací o přehrávaném hudebníkovi. Zároveň se může jednat o jakýkoliv jiný článek z webové stránky (pokud jej administrátor nastaví k promítání). V této komponentě se používá také další externí komponenta \texttt{Button} pro vykreslení ovládacích tlačítek z knihovny Bootstrap.
    
    \item \texttt{RMLogo} vykresluje logo rádiové stanice.
    
    \item \texttt{RMIconField} je část vizuálního přehrávače s ikonkami pro spuštění, příp. zastavení přehrávání. Tyto ikonky byly převzaty z knihovny Bootstrap.
    
    \item \texttt{RMInfoField} je část vizuálního přehrávače s informacemi o právě přehrávaném hudebníkovi a písni.
    
    \item \texttt{RMCaption} představuje horní či spodní titulek promítaného obrázku.
    
    \item \texttt{RMInfo} je konkrétní informace zobrazená ve vizuálním přehrávači, např. jméno přehrávaného hudebníka nebo název písně.
    
    \item \texttt{RMPreloader} lze spatřit v případě pomalého načítání videí nebo obrázků. Jedná se o bílou rotující kružnici, která signalizuje načítání. Tento prvek byl převzat od technologie Swiper.

\end{itemize}

\subsection{Reprezentace dat}

Veškerá data přichází do frontendové části ve formě jediného JS objektu. Tento objekt je následně zpracován React komponentami. Příchozí data obsahují následující informace (v závorce je vždy uvedena React komponenta, do které tato data směřují):

\begin{itemize}

    \item název rádia (→ \texttt{RMRadioName}),
    
    \item logo rádia (→ \texttt{RMLogo}),
    
    \item popisky pro jméno hudebníka a název písně (→ \texttt{RMInfo}),
    
    \item doba zobrazení jednoho obrázku (→ \texttt{RMSlider}),
    
    \item playlistové položky, žánry, hudebníci (včetně jejich obrázků, úvodních nahrávek a písní), webové příspěvky a výstražná hlášení (→ \texttt{RMPlayer}).

\end{itemize}

Data směřující do komponenty \texttt{RMPlayer} jsou velmi důležitá pro přehrávání dané rádiové stanice. Jedná se o velice dynamická data, se kterými přehrávač pravidelně pracuje. Jejich manipulace by tak neměla být příliš náročná a složitá. Z tohoto důvodu pro ně byla zvolena reprezentace pomocí ES6 tříd a OOP. Zároveň byly použity i návrhové vzory Factory a Flyweight, o kterých se lze dočíst více v následujících podkapitolách.

Uvedená data jsou reprezentována jako seznamy prvků. Při tvorbě takového seznamu je nejprve určen jeho typ. Následně je určen typ prvků, které bude obsahovat. Nakonec je těmito prvky (daty) naplněn. Každý seznam je implementován pomocí ES6 generátoru, který cyklicky prochází a vrací jednotlivé prvky. V případě potřeby se přehrávač odvolá na daný seznam (generátor), který mu vrátí další prvek. Na této logice je postavené procházení playlistových položek a žánrů, střídání hudebníků a promítání jejich obrázků, přehrávání úvodních nahrávek a písní, promítání webových příspěvků a zobrazování výstražných hlášení.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/implementation/frontend-class-diagram.png}
    \caption{Diagram tříd frontendové části}
\end{figure}

\newpage

K atributům všech tříd je přistupováno pouze skrze \texttt{get} metody. Z tohoto důvodu byly všechny atributy označeny jako privátní, i když jazyk JavaScript v současné době takové atributy nepodporuje. V následujícím seznamu jsou stručně popsány všechny třídy uvedené v diagramu:

\begin{itemize}

    \item \texttt{RMListFactory} je továrna na tvorbu různých druhů seznamů.

    \item \texttt{RMPlainList} reprezentuje obyčejný seznam (resp. generátor, který cyklicky iteruje přes všechny prvky seznamu v takovém pořadí, v jakém do něj byly uloženy)
    
    \item \texttt{RMShuffleList} reprezentuje míchaný seznam (resp. generátor, který cyklicky iteruje přes všechny prvky seznamu, přičemž na začátku každé smyčky jsou tyto prvky náhodně zamíchány). Pro míchání prvků se používá NPM balíček \texttt{array-unsort} (resp. algoritmus Fisher-Yates).

    \item \texttt{RMList} je rodičovská třída pro všechny druhy seznamů.
    
    \item \texttt{RMListElementFactory} je továrna na tvorbu různých prvků seznamů.
    
    \item \texttt{RMPlaylistItem} reprezentuje playlistovou položku. Rádiová stanice má obyčejný seznam těchto položek (playlist). Každá položka má míchaný seznam žánrů.
    
    \item \texttt{RMGenreFactory} je továrna muší váhy, která se používá pro tvorbu a ukládání hudebních žánrů.
    
    \item \texttt{RMGenre} představuje hudební žánr. Každý žánr má míchaný seznam hudebníků.
    
    \item \texttt{RMMusicianFactory} je továrna muší váhy, která se používá pro tvorbu a ukládání hudebníků.
    
    \item \texttt{RMMusician} představuje hudebníka. Každý hudebník má míchané seznamy obrázků, úvodních nahrávek a nahrávek.

    \item \texttt{RMMultimedia} je rodičovská třída pro obrázky, úvodní nahrávky a nahrávky daného hudebníka.
    
    \item \texttt{RMImage} je obrázek daného hudebníka.
    
    \item \texttt{RMIntroduction} je úvodní nahrávka, která se přehrává vždy před písněmi daného hudebníka.
    
    \item \texttt{RMRecord} je píseň daného hudebníka.

    \item \texttt{RMWarning} reprezentuje výstražné hlášení, které se posluchači pravidelně zobrazuje v průběhu přehrávání. Rádiová stanice má obyčejný seznam těchto hlášení.
    
    \item \texttt{RMPost} reprezentuje libovolný příspěvek z webové stránky, kterým lze vyplnit obsah rádia v průběhu přehrávání (např. pokud vícero hudebníkům chybí textové popisy i obrázky). Rádiová stanice má míchaný seznam těchto příspěvků.

\end{itemize}

\subsubsection{Použití návrhového vzoru Factory}

Návrhový vzor Factory patří do skupiny tvořivých vzorů, které se zabývají vytvářením nových objektů. Jeho použitím lze eliminovat počet výskytů klíčového slova \texttt{new} v programu. Továrnou je myšlena speciální třída, která definuje rozhraní pro tvorbu nových objektů. Pro vytvoření konkrétního objektu je pak zavolána tovární metoda, které je předána informace o typu nového objektu. Metoda tento objekt vytvoří a vrátí volajícímu. Pomocí návrhového vzoru Factory lze snadněji vytvářet různé objekty, příp. měnit jejich inicializaci na jediném místě v programu. \cite{js-patterns}

V programu existují dvě továrny, které implementují statické tovární metody pro tvorbu nových objektů. První továrna vytváří různé druhy seznamů – obyčejný (plain) a míchaný (shuffle). Druhá továrna vytváří prvky těchto seznamů – playlistové položky, žánry, hudebníky, obrázky, úvodní nahrávky, nahrávky, výstražná hlášení a webové příspěvky. Tyto továrny umožňují vytvářet seznamy a jejich prvky mnohem snadněji a přehledněji.

Následující ukázka obsahuje statickou tovární metodu, která vytváří prvky seznamů. Z ukázky byly odstraněny doprovodné komentáře. Samotná tovární metoda je zkrácená. Při tvorbě hudebníka (příp. žánru) je používána další továrna, která souvisí s následujícím návrhovým vzorem Flyweight.

\begin{listing}[htbp]
    \caption{Statická tovární metoda pro tvorbu prvků seznamů}
    \begin{minted}{javascript}

static createListElement( elementType, object )
{
  if ( elementType == "musician" )
  {
    return RMMusicianFactory.getMusician( object )
  }
  else if ( elementType == "image" )
  {
    return new RMImage( object )
  }
  else if ( elementType == "introduction" )
  {
    return new RMIntroduction( object )
  }
  ...
}

    \end{minted}
\end{listing}

\subsubsection{Použití návrhového vzoru Flyweight}

Návrhový vzor Flyweight patří do skupiny strukturálních vzorů, které se zabývají uspořádáním jednotlivých tříd v programu. Cílem tohoto návrhového vzoru je sdílení co největšího množství dat mezi podobnými objekty. Tím lze ušetřit paměťové prostředky, ba dokonce snížit počet instancí potřebných k chodu aplikace. V programu se nachází továrny muší váhy, které spravují sdílené objekty a vytváří nové. Při tvorbě nového objektu si daná továrna nejdříve zkontroluje, zdali tento objekt již nespravuje. Pokud ne, pak jej vytvoří a uloží do továrny. V obou případech vrátí objekt volajícímu. \cite{js-patterns}

Návrhový vzor Flyweight se používá při tvorbě hudebníků a žánrů. Hudebník může být přiřazen více žánrům. Bez použití muší váhy by každý žánr pracoval s vlastní instancí identického hudebníka, což by navíc vedlo k problémům v podobě špatně fungujícího shuffle módu při přehrávání jeho písní. Podobná situace by nastala i při tvorbě žánrů. Playlist rádiové stanice může obsahovat více položek se stejným hudebním žánrem. Bez muší váhy by každá položka pracovala s vlastní instancí daného žánru. To by opět vedlo k problémům s shuffle módem a zbytečnému navýšení počtu objemných instancí. Díky návrhovému vzoru Flyweight existuje pouze jediná instance hudebníka přiřazeného více žánrům a žánru přiřazeného více playlistovým položkám.

Následující ukázka obsahuje továrnu muší váhy pro tvorbu hudebníků. Z ukázky byly odstraněny doprovodné komentáře.

\begin{listing}[htbp]
    \caption{Továrna muší váhy na hudebníky}
    \begin{minted}{javascript}
    
export default class RMMusicianFactory
{
  static musicians = {}

  static getMusician( object )
  {
    if ( !this.musicians[ object.id ] )
    {
      this.musicians[ object.id ] = new RMMusician( object )
    }

    return this.musicians[ object.id ]
  }
}

    \end{minted}
\end{listing}

\section{Backend}

Backendová část pluginu \textit{Radio Manager} zahrnuje správu rádiových stanic, hudebníků a žánrů v administraci systému WordPress. Tato část byla naprogramována pomocí skriptovacího jazyka PHP jako Composer balíček, který pracuje na straně serveru. Při jeho vývoji byly použity vestavěné PHP funkce systému WordPress a dalších API, jako např. Plugin API, Shortcode API či Rewrite API. Backendová část má jediné dvě externí závislosti – WordPress pluginy Advanced Custom Fields (s rozšířením \uv{Repeater Field}) a s2Member Framework. Tyto pluginy byly na webových stránkách zadavatele zavedeny již v minulosti. První slouží pro tvorbu různých administračních prvků, zatímco druhá se používá při kontrole oprávnění posluchačů během zpracování výstražných hlášení. Technologie Advanced Custom Fields navíc přinesla výrazné usnadnění tvorby této části pluginu. Pomocí ní byly pro správu rádiových stanic vytvořeny tyto prvky (v závorce je vždy uveden typ daného prvku):

\begin{itemize}

    \item nastavení pro rádiovou stanici (typ \uv{Group Field})
    
    \item kolekce pro playlistové položky rádiové stanice (typ \uv{Repeater Field})
    
    \item kolekce pro výstražná hlášení rádiové stanice (typ \uv{Repeater Field})
    
    \item kolekce pro obrázky hudebníka (typ \uv{Repeater Field})
    
    \item kolekce pro úvodní nahrávky hudebníka (typ \uv{Repeater Field})
    
    \item kolekce pro nahrávky hudebníka (typ \uv{Repeater Field})

\end{itemize}

Do těchto administračních prvků může administrátor (příp. editor) ukládat všechna potřebná data. Uvedené prvky se nachází u každého příspěvku rádiové stanice či hudebníka. Mezi nastavení konkrétní rádiové stanice patří doba zobrazení jednoho obrázku, webové přískěvky a dále popisky pro jméno hudebníka a název písně.

\subsection{Architektura}

Hlavním souborem pluginu je \texttt{radio-manager.php}, ve kterém se nachází základní informace o pluginu pro systém WordPress (v podobě hlavičkového komentáře). Tento soubor je z celého pluginu načten jako první. Jeho kód nejdříve aktivuje automatické nahrávání tříd (tzv. \uv{Autoloading}), kterého je dosaženo pomocí nástroje Composer. Následně zaregistruje balíčky JS a CSS kódu pro frontendovou a backendovou část. Nakonec definuje potřebné konstanty a vytvoří instanci třídy \texttt{RMManager}, která inicializuje ostatní subsystémové třídy. Tyto typy tříd zastupují jednotlivé součásti pluginu a nesou zodpovědnost za jejich správnou od/instalaci a funkčnost.

Při tvorbě backendové části byla zvolena objektově orientovaná architektura \textit{Main plugin file, then one or more class files} uvedená mezi Best Practices \cite{plugin-handbook}. Složka s pluginem navíc (s mírnými úpravami) dodržuje doporučovanou adresářovou strukturu. Všechny třídy jsou umístěné ve stejném jmenném prostoru a jejich názvy obsahují unikátní prefix \uv{RM} (jako zkratka názvu pluginu), čímž je předcházeno případným kolizím. V této architektuře byly zároveň použity i návrhové vzory Facade a Singleton, o kterých se lze dočíst více v následujících podkapitolách.

\begin{figure}[htbp]
    \centering
    \includegraphics[width=1.0\textwidth]{images/implementation/backend-class-diagram.png}
    \caption{Diagram tříd backendové části}
\end{figure}

V následujícím seznamu jsou stručně popsány všechny třídy uvedené v diagramu. Každá třída má v rámci pluginu určitou zodpovědnost. Třídy vyznačené polem \uv{Subsystems} značí subsystémy, které představují jednotlivé součásti pluginu.

\begin{itemize}

    \item \texttt{RMManager} je hlavní třídou, která volá a integruje obsah ostatních tříd (subsystémů) do systému WordPress.

    \item \texttt{RMSubsystem} je abstraktní rodičovská třída, která je společná pro všechny subsystémové třídy. Tyto třídy ji dědí a definují požadovanou funkcionalitu (metody pro od/instalaci).
    
    \item \texttt{RMACFFieldCreator} je subsystém zodpovědný za tvorbu administračních prvků pomocí pluginu Advanced Custom Fields.

    \newpage

    \item \texttt{RMMenuAndLinkCreator} je subsystém, který je zodpovědný za tvorbu menu a jeho položek v levém navigačním panelu systému WordPress (pomocí funkcí \texttt{add\_menu\_page()} a \texttt{add\_submenu\_page()}). Zároveň je zodpovědný za tvorbu odkazů, které se zobrazují u pluginu \textit{Radio Manager} ve výpisu všech pluginů v systému (např. vytváří odkaz \uv{Help}, který administrátora přesměruje na uživatelskou příručku).
    
    \item \texttt{RMMetaBoxCreator} je subsystém, který vytváří administrační box s shortcode dané rádiové stanice (pomocí funkce \texttt{add\_meta\_box()}). Administrátor následně zkopíruje tento shortcode pomocí tlačítka \uv{Copy} a vloží na webovou stránku, kde se místo něj vykreslí přehrávač. Funkcionalita kopírovacího tlačítka představuje jediný JS kód, který je z pluginu načítaný do backendové části.
    
    \item \texttt{RMPostTypeCreator} je subsystém, který vytváří příspěvkové typy pro rádiové stanice a hudebníky (pomocí funkce \texttt{register\_post\_type()}). Administrátor (příp. editor) tak může vytvářet, upravovat, příp. mazat jednotlivé příspěvky v rozhraní dodaném systémem WordPress.
    
    \item \texttt{RMShortcodeCreator} je důležitý subsystém, který zodpovídá za shortcode (způsob, jakým lze rádiové stanice zobrazit na webové stránce). Jeho zodpovědností je vykreslení přehrávače daného rádia a přenos všech dat z backendové do frontendové části.
    
    \item \texttt{RMTaxonomyCreator} je subsystém zodpovědný za tvorbu taxonomie pro hudební žánry (pomocí funkce \texttt{register\_taxonomy()}). Administrátor tak může vytvářet, upravovat, příp. mazat jednotlivé žánry v rozhraní dodaném systémem WordPress.

\end{itemize}

\subsubsection{Použití návrhového vzoru Facade}

Návrhový vzor Facade je jedním ze strukturálních vzorů, které se zabývají uspořádáním tříd v programu. S postupujícím vývojem přibývá množství kódu, tříd, metod a dalších funkcionalit. Celý program se tak velice snadno může stát komplexním. Jeho další rozšiřování může být velmi obtížné. Cílem návrhového vzoru Facade je vytvoření nového zjednodušeného rozhraní (fasády), které umožní snadné používání daného programu a jeho tříd bez nutnosti znát veškeré implementační detaily. \cite{php-patterns}

Jako fasáda je implementována třída \texttt{RMManager}, která obsahuje metody pro aktivaci, deaktivaci, instalaci a odinstalaci daného pluginu. Tato třída si udržuje instance jednotlivých subsystémů, na kterých následně provádí jednotlivé operace. Bez existence fasády by kupříkladu instalace pluginu a jeho součástí představovala tvorbu instancí všech subsystémů a volání jejich vlastních metod ručně. Díky tomuto návrhovému vzoru postačuje vytvořit instanci fasády a zavolat jedinou metodu pro instalaci pluginu.

Následující ukázka obsahuje zmíněnou třídu \texttt{RMManager}, která slouží jako fasáda. Z ukázky byly odstraněny doprovodné komentáře a vypuštěny nepodstatné části kódu.

\begin{listing}[htbp]
    \caption{Fasáda pro snadné řízení subsystémů}
    \begin{minted}{php}

<?php

class RMManager
{
  private $subsystems;

  public function __construct()
  {
    $this->subsystems =
    [
      RMACFFieldCreator::getInstance(),
      RMMenuAndLinkCreator::getInstance(),
      RMMetaBoxCreator::getInstance(),
      RMPostTypeCreator::getInstance(),
      RMShortcodeCreator::getInstance(),
      RMTaxonomyCreator::getInstance(),
    ];
  }

  public function activate() { ... }
  public function deactivate() { ... }
  public function install() { ... }
  public function uninstall() { ... }
}

?>

    \end{minted}
\end{listing}

\subsubsection{Použití návrhového vzoru Singleton}

Návrhový vzor Singleton je jedním z nejjednodušších návrhových vzorů. Patří do skupiny tvořivých vzorů, které se zabývají vytvářením nových objektů. Jeho cílem je omezit počet instancí dané třídy na nejvýše jednu, ke které poskytne přístupový bod. Místo toho, aby třída na různé požadavky odpovídala vytvářením dalších a dalších instancí, je vytvořena a uložena pouze jediná instance, která se v případě potřeby vrátí volajícímu. Tím jsou také šetřeny paměťové prostředky. \cite{php-patterns}

Všechny subsystémové třídy jsou implementovány jako jedináčci. Existence více instancí těchto tříd by totiž ze samotné podstaty subsystémů nedávala smysl. Každý subsystém obsahuje privátní konstruktor a statickou metodu, pomocí které lze získat, příp. vytvořit jeho instanci. Navíc má omezené možnosti klonování. Instance daného subsystému je uložena v příslušném privátním statickém atributu.

Následující ukázka obsahuje třídu \texttt{RMPostTypeCreator}, která představuje jedináčka. Z ukázky byly odstraněny doprovodné komentáře a vypuštěny nepodstatné části kódu.

\begin{listing}[htbp]
    \caption{Subsystém pro tvorbu příspěvkových typů}
    \begin{minted}{php}

<?php

class RMPostTypeCreator extends RMSubsystem
{
  private static $instance = null;

  private function __construct() {}
  private function __clone() {}

  public static function getInstance()
  {
    if ( self::$instance == null )
    {
      self::$instance = new self();
    }

    return self::$instance;
  }

  public function install() { ... }
  public function uninstall() { ... }

  public function createPostTypes() { ... }
}

?>

    \end{minted}
\end{listing}

\section{Propojení frontendové a backendové části} \label{implementace-propojeni}

Nejdůležitější součástí pluginu \textit{Radio Manager} je správa rádiových stanic, ve které lze přidávat, upravovat a mazat příspěvky jednotlivých rádií. U každého z nich je k dispozici speciální kód (tzv. shortcode), pomocí kterého lze danou rádiovou stanici vložit na webovou stránku. Tam si ji mohou poslechnout i ostatní uživatelé a návštěvníci webu. Shortcode rádiové stanice je krátký kód ve tvaru:

\bigskip

\noindent \texttt{[rm\_radio\_station id="\texttt{<cislo>}"]}

\bigskip

Každý shortcode obsahuje atribut \texttt{id}. Jedná se o automaticky vygenerovaný číselný identifikátor příspěvku rádiové stanice, který je unikátní v rámci systému WordPress. Administrátor následně vloží daný shortcode do konkrétního příspěvku na webové stránce. Aby byl přehrávač rádiové stanice plně funkční a korektně zobrazený všem posluchačům, musí backendová a frontendová část pluginu provést specifické činnosti.

V rámci backendové části je nejdříve zaregistrován výše uvedený shortcode. Registraci provádí třída \texttt{RMShortcodeCreator} pomocí WordPress funkce \texttt{add\_shortcode()}, která se vykoná po vyvolání hooku \texttt{init}. Funkci jsou předány 2 parametry – tag daného shortcode (tj. \texttt{rm\_radio\_station}) a callback, který vrací následující HTML kód:

\bigskip

\noindent \texttt{<div data-rm-output-id=\texttt{"\texttt{<cislo>}"}></div>}

\bigskip

Při parsování je shortcode nahrazen tímto HTML kódem, kterému je předán identifikátor příspěvku dané rádiové stanice. Pokud tento identifikátor neodpovídá žádnému takovému příspěvku, je místo shortcode zobrazeno:

\bigskip

\noindent \textcolor{red}{\textbf{There are no data for this radio station.}}

\bigskip

Uvedený callback zároveň získá veškerá data dané rádiové stanice ze správy, kam je dříve uložil administrátor (příp. editor). Ta jsou následně pomocí vestavěné funkce \texttt{wp\_add\_inline\_script()} odeslána na frontendovou část, kde se objeví v podobě JS objektu uloženého v proměnné \texttt{rmData<cislo>} (název opět obsahuje výše uvedený identifikátor). Tato proměnná je deklarována v hlavičce webu před balíčkem minifikovaného a zkompilovaného JS kódu (s komponentami a logikou rádiových stanic).

V rámci frontendové části je po načtení HTML dokumentu zavolán tzv. IIFE (\uv{Immediately Invoked Function Expression}). IIFE vyhledá všechny HTML výstupy, které byly vykresleny místo shortcodes. Podle obsahu datového atributu \texttt{data-rm-output-id} je pro každý takový výstup vyhledána korespondující proměnná \texttt{rmData<cislo>}, která obsahuje data dané rádiové stanice. Těmito daty je následně inicializována React komponenta \texttt{RMRadio}, která je vložena do odpovídajícího HTML výstupu. Po načtení webové stránky je místo shortcode zobrazen přehrávač rádiové stanice. Výhoda takového přístupu spočívá v tom, že na jediné webové stránce může být i více přehrávačů různých rádiových stanic, které pracují nezávisle na sobě.

\section{Nasazení}

Plugin \textit{Radio Manager} je v současné době zprovozněný na testovacím a produkčním webu organizace CATV USA. Jeho instalace proběhla pomocí vestavěného rozhraní pro nahrávání pluginů, které je k dispozici přímo v systému WordPress. Veškeré další potřebné aktualizace byly prováděny na příslušném FTP serveru pomocí klienta FileZilla. Samotné nasazení a zprovoznění bylo doprovázeno drobnými kolizemi kaskádových stylů, kdy se CSS vzhledové šablony promítaly do CSS rádiových stanic. Tento problém nastával především u prvků knihovny Bootstrap (např. tlačítek či dialogových oken). Kolize byly vyřešeny dopsáním potřebných protideklarací. Současná vzhledová šablona je zastaralá a v budoucnosti je plánováno její zrenovování.

Od svého prvního nasazení byl plugin pravidelně testován, refaktorován a vylepšován. Ve spolupráci se zadavatelem byly pro americké posluchače vytvořeny následující rádiové stanice – Classical Music Audio Program (původní rádio Classic), Folk Music Audio Program (původní rádio Folk) a nejnovější Cultural Audio Program. První rádiová stanice je zaměřena na českou vážnou hudbu, druhá přehrává české folklorní písně a ve třetí si lze poslechnout různé podcastové nahrávky s českou tematikou. Specialitou každé z nich je, že si posluchač může při poslechu číst různé zajímavé články přímo v přehrávači (o životech jednotlivých hudebních skladatelů, českých tradicích nebo osobách, které v podcastech hovoří). Každá stránka s rádiovou stanicí obsahuje úvodní poutavý text nad rádiem. Pod ním se následně nachází technické informace a představení moderátorů daného rádia (ve formě rozbalovacích boxů).

\chapter{Testování} \label{testovani}

Poslední kapitola se zabývá testováním zhotoveného pluginu \textit{Radio Manager}. Testování bylo zaměřené na správnou funkčnost, kompatibilitu různých prohlížečů a zařízení, prototypy UI, použitelnost a překlady. Na konci kapitoly se nachází shrnutí všech dosažených výsledků.

\section{Funkčnost}

Testování funkčnosti probíhalo na pravidelné bázi v průběhu celého vývoje, zejména pak na jeho konci. Spočívalo v kompletním systematickém průchodu celým zdrojovým kódem, během kterého byly vyzkoušeny veškeré funkcionality a možnosti. Zároveň byly ošetřeny různé mezní případy a stanovena omezení při tvorbě rádiových stanic a hudebníků. Následující výčet uvádí příklady těchto restrikcí:

\begin{itemize}

    \item Playlist rádiové stanice musí obsahovat alespoň jednu položku.
    
    \item Každý hudebník musí mít alespoň jednu nahrávku.

    \item Minimální hodnota pro dobu zobrazení jednoho obrázku je 1 sekunda.
    
    \item Každé výstražné hlášení musí obsahovat neprázdnou zprávu.

    \item Seznam nahrávek hudebníka nesmí obsahovat prázdné položky (stejné omezení platí i pro seznamy obrázků a úvodních nahrávek).
    
\end{itemize}

Tato omezení zabraňují vzniku výjimečných situací, které by jinak představovaly nefunkční rádiovou stanici (např. rádio s prázdným playlistem nic nepřehrává, i když posluchač kliká na ikonky pro spuštění či zastavení přehrávání). Zároveň představují podporu pro uživatele, kterému pomáhají vytvářet kompletní a kvalitní obsah. Pokud uživatel některé z těchto omezení poruší, je na ně upozorněn při ukládání, příp. publikování daného příspěvku.

Na testování funkčnosti se tedy nahlíželo jak z pohledu tvůrce (v kódu), tak z pohledu uživatele (v administraci). V prvním případě se jednalo o časově náročnou činnost, která však odhalila a vedla k opravám velkého množství chyb. Ve druhém případě se jednalo o prevenci chyb ze strany uživatele, podporu při tvorbě a především zamezení případů, ve kterých by koncový posluchač vyhodnotil rádiovou stanici jako nefunkční.

V NPM balíčku s frontendovou částí je pro základní otestování funkčnosti připravena sada testovacích dat (konkrétně v souboru \textit{index.html} na přiloženém CD). Tuto sadu je možné rozšířit a nakonfigurovat podle vlastních potřeb. Týká se však pouze frontendové části a jako taková nepostačuje pro kompletní otestování funkčnosti.

\section{Kompatibilita prohlížečů a zařízení} \label{testovani-kompatibilita}

K otestování kompatibility prohlížečů a zařízení výrazně přispěly použité moderní technologie. Kompilátor Babel umožňoval přeložit moderní JavaScript (verze ES6 a vyšší) do takové podoby, která je srozumitelná současným i starším prohlížečům. Technologie Browsersync umožňovala spustit vlastní lokální server s rádiovou stanicí, kterou bylo možné vyzkoušet v různých prohlížečích a na různých zařízeních připojených k lokální síti. O pomoc s testováním byli požádáni i další techničtí pomocníci a přispěvatelé organizace CATV USA. Testování bylo zaměřené především na následující aspekty:

\begin{itemize}

    \item Základní funkcionality přehrávače (včetně výstražných hlášení).
    
    \item Vzhled a responzivita přehrávače.
    
    \item Reakční rychlost a načítání (obrázků, videí).

\end{itemize}

\subsection{Testované prohlížeče}

Následující seznam obsahuje všechny otestované prohlížeče (v závorce je vždy uvedena konkrétní verze):

\begin{itemize}
    \item Google Chrome (verze 87, 88),
    \item Mozilla Firefox (verze 85),
    \item Opera (verze 74),
    \item Safari (verze 14),
    \item Microsoft Edge (verze 87, 88),
    \item Internet Explorer (verze 11).
\end{itemize}

\subsection{Testovaná zařízení}

Následující seznam obsahuje všechna otestovaná zařízení (v závorce je vždy uveden systém, příp. značka daného zařízení):

\begin{itemize}
    \item Mobilní telefon (Android 6.0, Samsung Galaxy A5)
    \item Mobilní telefon (iOS 14.4, iPhone 8)
    \item Mobilní telefon (EMUI 9.1, Huawei Honor 9)
    \item Mobilní telefon (Android 8.1, Xiaomi Redmi 5)
    \item Mobilní telefon (Android 9, Sony)
    \item Tablet (iOS 14.2, iPad 6)
    \item Notebook (Windows 10 Enterprise, Acer)
    \item Notebook (Windows 10 Home, Lenovo)
    \item Notebook (Linux Ubuntu 20, Acer Aspire 3)
    \item Stolní počítač (Windows 10 Pro)
    \item Stolní počítač (Windows 10 Home)
    \item Stolní počítač (Windows 7 Pro)
    \item Stolní počítač (MacOS Big Sur)
\end{itemize}

\subsection{Vyskytlé problémy}

Problémy s kompatibilitou nastaly pouze u prohlížeče Internet Explorer 11 (dále jen \uv{IE 11}). Tento prohlížeč ohlásil chybu u tzv. \uv{Template Literals}, které v jazyce JavaScript zjednodušují práci s řetězci. Jedná se o nový syntaktický prvek ze standardu ES6, který byl obsažen v kódu balíčku \texttt{array-unsort} (pro realizaci shuffle módu přehrávání). Tato závislost tak musela být do kompilace přidána navíc. IE 11 následně ohlásil další problémy (např. chybějící podpora metody \texttt{Object.assign()}), které byly vyřešeny zahrnutím potřebných polyfillů (ve formě balíčku \texttt{core-js}) do projektu.

U prohlížeče Mozilla Firefox byly opraveny drobné vzhledové odlišnosti. Žádné další chyby nebyly nalezeny. Přehrávač je kompatibilní s výše uvedenými prohlížeči a zařízeními.

\section{Prototypy}

V průběhu tvorby návrhu backendové a frontendové části probíhalo pravidelné testování prototypu UI přehrávače. Na jeho testování se podílely 3 stakeholders (zájmové skupiny): návrhář (autor práce), zadavatel a skupina 2–3 uživatelů (vybraných zadavatelem). Uživatelé byli převážně rodilými mluvčími z USA, budoucími posluchači a zároveň zkušenými návrháři, jejichž poznámky výrazně přispěly ke tvorbě finálního prototypu.

V první verzi prototypu byla fotografie hudebníka vizuálně oddělená od jeho popisu. Mezi těmito částmi se nacházel přehrávač se jménem hudebníka, názvem písně a ovládacími ikonkami. Tento prototyp byl úspěšný pouze v případě rádia Classic. V rádiu Folk se však promítaly webové příspěvky s českými tradicemi, které s názvem skupiny a písně neměly nic společného. Prototyp měl i další nevýhodu v podobě nedostatku informací. Samostatné české názvy (hudebníků, písní) jsou srozumitelné českým uživatelům, ale v případě amerických uživatelů způsobují zmatení (z jazykových důvodů).

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.925\textwidth]{images/testing/old-prototype.png}
    \caption{Zachovaná fotografie staršího prototypu}
\end{figure}

Ve druhé (finální) verzi prototypu byly názvům hudebníka a písně přidány popisky (např. \uv{Music Band:} či \uv{Song:}). Zároveň bylo odstraněno vizuální oddělení fotografie a textu. Text se zobrazí po kliknutí na fotografii, ke které mohou být navíc připojeny titulky. Změnilo se také uspořádání prvků ve vizuálním přehrávači. Ikonka pro spuštění či zastavení přehrávání je červeně podbarvena pro upoutání pozornosti. O finálním prototypu si lze přečíst více v kapitole \ref{navrh-prehravac}. Tento prototyp byl úspěšný i v případě nového rádia Cultural.

Uvedené prototypy se týkaly jen frontendové části. V rámci backendové části byly zadavateli předloženy jen různé náčrty a wireframes, které zobrazovaly logické rozmístění jednotlivých prvků (např. v příspěvku rádiové stanice či hudebníka). Při tvorbě této části byl použit WordPress plugin Advanced Custom Fields, který uvedené prvky dodával.

\section{Použitelnost} \label{testovani-pouzitelnost}

Testování použitelnosti proběhlo po dokončení celého pluginu. Jednalo se o nejdůležitější testování, jelikož se při něm pracovalo se skutečnými americkými uživateli. Jeho cílem bylo získat zpětnou vazbu od těchto uživatelů (týkající se zejména jednoduchosti používání, srozumitelnosti či přehlednosti) a podle ní případně upravit plugin.

Testování probíhalo vzdáleně formou Skype videohovorů. Mezi účastníky byl zadavatel a jím vybraní spolupracovníci CATV USA (v celkovém počtu 7 testerů). Většina těchto účastníků nerozuměla programování a neznala WordPress. Mezi testery byli i budoucí uživatelé (celkem 2), kteří se správou rádiových stanic plánují pracovat.

\subsection{Příprava}

Pro testování použitelnosti byl určen testovací web CATV USA, na kterém byl zřízen účet \texttt{Tester} s administrátorskými právy. Na tento účet se jednotliví testeři přihlašovali. Obsahem testování byly tři testovací scénáře (k dispozici v příloze \ref{priloha-testovaci-scenare}), kterými musel každý tester projít. Pracovní prostředí moderátora testů se skládalo z následujících věcí:

\begin{itemize}
    \item stůl,
    \item židle,
    \item hodiny,
    \item tužka,
    \item papír na poznámky,
    \item kamera,
    \item mikrofon,
    \item reproduktory,
    \item PC s testerem,
    \item notebook s testovacími scénáři.
\end{itemize}

Samotnému testování použitelnosti předcházela Skype konference, na které byl formou 30 minutové prezentace představen testovaný plugin. Konference se zúčastnil zadavatel a všichni ostatní testeři. Jejím účelem bylo seznámení testerů s autorem této práce, jeho projektem a průběhem testování.

\subsection{Průběh}

Testování použitelnosti probíhalo s každým testerem individuálně dle jeho časových možností a technických schopností. Samotný test byl veden v anglickém jazyce a skládal se z následujících úkonů:

\begin{enumerate}

    \item Představení moderátora.
    \item Nasdílení testerovy obrazovky (včetně zapnutí jeho kamery).
    \item Přihlášení testera do administrace testovacího webu pod účtem \texttt{Tester}.
    \item Krátké zopakování celého projektu a průběhu testování.
    \item Uklidnění testera.
    \item Postupný průchod všemi testovacími scénáři.
    \item Závěrečné poděkování, pochvala testera a rozloučení.
    \item Návrat testovacího prostředí do původního stavu.

\end{enumerate}

\subsection{Výsledky}

Testování použitelnosti bylo úspěšné u všech testerů. Každý test trval min. 30 minut a max. 1 hodinu. 4 ze 7 testerů reagovali opravdu pozitivně (s poukázáním na jednoduchost, příjemnou práci a přehlednost). Zároveň byla získána další data ohledně kompatibility prohlížečů a zařízení od samotných testerů. Testování použitelnosti přineslo následující poznatky:

\begin{itemize}

    \item Starší uživatelé, kteří neznají WordPress, potřebují větší asistenci, příp. vysvětlení jednotlivých funkcionalit tohoto systému a pluginu.
    
    \item Při ukládání příspěvku měli 4 ze 7 testerů tendenci hledat tlačítko pro uložení ve spodní části obrazovky. Toto tlačítko se však ve výchozím nastavení nachází v boxu v pravém postranním panelu. To ovšem nepředstavuje velký problém, jelikož jej lze přesouvat.
    
    \item Při otevírání příspěvku 2 ze 7 testerů nevědělo, zdali mají kliknout na odkaz příspěvku nebo jej zaškrtnout (jako \uv{Checkbox}).
    
    \item 1 ze 7 testerů neustále klikal na položku \uv{Radio Manager} v levém navigačním menu, když měl otevřít správu hudebníků (tj. podpoložka, která se objeví po najetí myší na uvedenou položku).
    
    \item 1 ze 7 testerů chvíli trvalo, než pochopil nové pojetí playlistu. To samé se stalo i u nastavení výstražných hlášení (volby \uv{First} a \uv{Step}).
    
    \item 1 ze 7 testerů vůbec nepostřehl výstražné hlášení, které se objevilo v průběhu přehrávání a které chvíli před tím sám vyřídil.
    
    \item Červeně podbarvená ikonka pro spuštění či zastavení přehrávání se osvědčila u většiny testerů. Jednalo se o první bod, kam směřoval kurzor jejich myši po otevření stránky s rádiovou stanicí.

\end{itemize}

Na základě těchto poznatků byly vylepšeny textové nápovědy, které se nachází u všech nastaveních ve správě. Úpravy proběhly i v uživatelské příručce, která byla výrazně rozšířena.

Testování se zadavatelem proběhlo vícekrát. Při každém z nich bylo provedeno velké množství drobných úprav. Zadavatel také otestoval instalaci pluginu, kterou zvládl bez jakékoli asistence (i přesto je v uživatelské příručce k dispozici návod). Po určité době používání pluginu přišel od zadavatele další pozitivní ohlas – pracovat se správou se naučil velmi rychle.

\section{Překlady} \label{testovani-preklady}

Plugin je určen pro americké prostředí. Správnost všech textových výstupů tudíž znamenala nejvyšší prioritu. Případné chyby by vedly k nedorozumění a zbytečnému zmatení uživatele. Z tohoto důvodu byl překlad z českého jazyka do americké angličtiny průběžně korekturován dvěma rodilými mluvčími z USA. Mezi zkorekturované výstupy patřily:

\begin{itemize}

    \item textové výstupy ve frontendové části (zejména materiály dodané zadavatelem, např. životy hudebních skladatelů, titulky fotografií nebo technické informace),
    
    \item textové výstupy v backendové části (nápovědy pro jednotlivá nastavení, popisy jednotlivých boxů),
    
    \item uživatelská příručka,
    
    \item soubor README v repozitáři s pluginem na GitHub účtu CATV USA (obsahuje informace pro budoucí vývojáře),
    
    \item testovací scénáře (pro srozumitelnost výkladu při testování).

\end{itemize}

\section{Shrnutí výsledků} \label{testovani-shrnuti-vysledku}

Výsledkem této práce je nový WordPress plugin \textit{Radio Manager}, který slouží pro tvorbu automatizovaných rádiových stanic a jejich obsahu. Nejdříve byly ve spolupráci s televizním producentem Johnem Honnerem analyzovány požadavky na novou správu rádiových stanic (kap. \ref{analyza-pozadovany-stav}). Následně bylo pomocí moderních webových technologií (kap. \ref{teorie-pouzite-technologie}) navrhnuto (kap. \ref{navrh}) a implementováno (kap. \ref{implementace}) nové řešení v podobě pluginu do systému WordPress. Ve správě rádiových stanic lze upravovat jednotlivá rádia, jejich playlisty, nastavení, příp. výstražná hlášení (kap. \ref{navrh-radiove-stanice}). Ve správě hudebníků lze upravovat jednotlivé hudebníky, jejich popisy, audio/video soubory a obrázky (kap. \ref{navrh-hudebnici}). Ve správě žánrů lze upravovat jednotlivé žánry, pomocí kterých se hudebníci zařazují do playlistu rádia (kap. \ref{navrh-zanry}). V případě nesnází je k dispozici uživatelská příručka (příloha \ref{priloha-uzivatelska-prirucka}) dostupná přímo v administraci. Výstupem každého rádia je responzivní přehrávač, který lze pomocí shortcode (kap. \ref{navrh-propojeni}) vložit na webové stránky. Přehrávač umožňuje přehrávat jednotlivé písně (audio/video soubory), promítat obrázky v podobě slideshow, zobrazovat doprovodné texty a webové příspěvky (kap. \ref{navrh-prehravac}). Plugin byl otestován z hlediska správné funkčnosti, kompatibility, UI, použitelnosti a překladů (kap. \ref{testovani}). V následujícím seznamu je pro větší přehled uvedeno propojení zadavatelových požadavků s kapitolami, ve kterých byly řešeny:

\begin{itemize}

    \item (F1 – Zobrazování rádiových stanic) Vyřešen v návrhu frontendové části pluginu (kap. \ref{navrh-frontend}).

    \item (F2 – Zobrazování výstražných hlášení) Vyřešen v návrhu frontendové části pluginu (kap. \ref{navrh-frontend}).
    
    \item (F3 – Správa hudebníků) Vyřešen v návrhu backendové části pluginu (kap. \ref{navrh-backend}).
    
    \item (F4 – Správa rádiových stanic) Vyřešen v návrhu backendové části pluginu (kap. \ref{navrh-backend}).

    \item (N1 – Automatizace) Rádiové stanice pracují na straně klienta. Používají jen ta data ze správy, která jsou potřebná k jejich chodu. Tato data jsou předána z backendové na frontendovou část při načtení webové stránky s rádiem (kap. \ref{implementace-propojeni}). Rádiová stanice následně pracuje s těmito daty samostatně a v nepřetržitém provozu. Data ze správy jsou předem připravena. Rádiové stanice jsou tudíž plně automatizované.
    
    \item (N2 – Dostupnost) Vyřešen při testování kompatibility různých prohlížečů a zařízení (kap. \ref{testovani-kompatibilita}).
    
    \item (N3 – Použitelnost) Z výsledků testování použitelnosti (kap. \ref{testovani-pouzitelnost}) vyplynulo, že se testerům pracovalo velmi příjemně. Pozitivně reagoval i sám zadavatel. K testování byli vybráni především netechničtí typy testerů. Pro větší podporu uživatele jsou u všech nastaveních textové nápovědy. V administraci je také k dispozici uživatelská příručka (příloha \ref{priloha-uzivatelska-prirucka}).
    
    \item (N4 – Jazyková lokalizace) Vyřešen při testování překladů (kap. \ref{testovani-preklady}).
    
    \item (N5 – Architektura) Samotný plugin je modulem, který se skládá z jednotlivých submodulů. Tyto submoduly představují jednotlivé OOP třídy v backendové i frontendové části, příp. znovupoužitelné React komponenty. Každý submodul má v rámci systému určitou zodpovědnost a pracuje samostatně. V architektuře byly použity i návrhové vzory Factory, Flyweight, Facade a Singleton (kap. \ref{implementace}). V celé implementaci se používají prefixované názvy (jako prevence proti kolizím). Bezpečnost pluginu je založena především na adekvátních oprávněních uživatelů (kap. \ref{navrh-backend}).
    
    \item (N6 – Migrace) Pro ukládání obrázků, úvodních nahrávek a nahrávek je používána knihovna médií (kap. \ref{navrh-hudebnici}). Pomocí specializovaných WordPress pluginů lze její obsah snadněji migrovat do objektových úložišť.

\end{itemize}

\begin{conclusion}

V teoretické části práce byl popsán redakční systém WordPress a tvorba pluginů, které jej rozšiřují o nové možnosti. Dále byl uveden přehled a stručný popis technologií, které byly použity při vývoji kýženého pluginu. Součástí teoretické části byla také analýza zadavatele a analýza původního a požadovaného stavu rádiových stanic na webu CATV USA.

V praktické části práce bylo na základě provedených analýz navrhnuto řešení v podobě nového zásuvného modulu do systému WordPress. Dále byla popsána implementace tohoto pluginu včetně jejího otestování. Návrh byl vytvořen se zaměřením na UI/UX. Implementace byla zhotovena pomocí moderních webových technologií.

Hlavním cílem této bakalářské práce bylo vytvořit nový plugin do systému WordPress, který usnadní řízení rádií na webu CATV USA. Tento cíl byl splněn v podobě nového WordPress pluginu \textit{Radio Manager}, který řeší veškeré požadavky zadavatele. Jednotlivé dílčí cíle (analýza, návrh, implementace, automatizace a testování) byly taktéž splněny. Nabytí jednotlivých požadavků a cílů bylo okomentováno v předešlé podkapitole \ref{testovani-shrnuti-vysledku}. \textit{Radio Manager} je již v provozu na testovacím a produkčním webu CATV USA. Původní implementace rádií Folk a Classic, vestavěná ve vzhledové šabloně, byla odstraněna.

Plugin \textit{Radio Manager} přinesl zcela nové pohledy, možnosti a příležitosti pro CATV USA a její spolupracovníky. V průběhu vypracování této práce a vývoje pluginu se pojetí obou rádií Folk a Classic různě měnilo. Od běžných internetových rádií až po současné hudební programy, které si kladou za cíl svého posluchače vzdělávat v oblasti české hudby. Dále vzniklo nové rádio pojmenované jako \uv{Cultural Audio Program}. Jeho obsahem jsou nahrávky mluveného slova (tzv. \uv{podcasty}), ve kterých se rozmlouvá o zajímavých tématech spojených s Českou republikou (např. české tradice, výuka češtiny atp.). Nahrávky jsou namlouvané různými hlasateli, kteří mají přístup do administrace webu CATV USA. Pomocí nového pluginu si v rádiu mohou vytvářet své vlastní \uv{shows} a začít svou potenciální kariéru. CATV USA tak může odstartovat nové projekty s různými uměleckými školami.

Do budoucnosti není plánován další vývoj pluginu \textit{Radio Manager} (s výjimkou refaktorování a případných oprav). Může však být implementována podpora pro novější WordPress editor Gutenberg. Vzhledem k tomu, že CATV USA používá primárně klasický WordPress editor, není tato úprava v současné době vyžadována.

\end{conclusion}

\printbibliography[title=Literatura]

\appendix

\chapter{Seznam použitých zkratek}
% \printglossaries
\begin{description}

	\item [API] Application Programming Interface
	
	\item [CATV USA] Czech-American TV
	
	\item [CLI] Command Line Interface
	
	\item [CMS] Content Management System
	
	\item [CSS] Cascading Style Sheets
	
	\item [DOM] Document Object Model
	
	\item [DRY] Don't Repeat Yourself
	
	\item [FTP] File Transfer Protocol
	
	\item [HTML] HyperText Markup Language
	
	\item [IE] Internet Explorer
	
	\item [IIFE] Immediately Invoked Function Expression
	
	\item [JS] JavaScript
	
	\item [JSX] JavaScript XML
	
	\item [MySQL] My Structured Query Language
	
	\item [NPM] Node Package Manager
	
	\item [OOP] Object-Oriented Programming
	
	\item [PDF] Portable Document Format
	
	\item [PHP] PHP: Hypertext Preprocessor
	
	\item [SASS] Syntactically Awesome Style Sheets
	
	\item [SCSS] Sassy CSS
	
	\item [SPA] Single-Page Application
	
	\item [UI] User Interface
	
	\item [URL] Uniform Resource Locator
	
	\item [UX] User eXperience
	
	\item [VDOM] Virtual Document Object Model
	
	\item [WYSIWYG] What You See Is What You Get
	
	\item [XSS] Cross-Site Scripting
	
\end{description}

\chapter{Uživatelská příručka} \label{priloha-uzivatelska-prirucka}

Kompletní verze tohoto dokumentu je k dispozici na přiloženém CD.

\section{Dependencies}

To make the plugin work properly, you must have the following WordPress plugins installed and activated:

\begin{itemize}
    
    \item Advanced Custom Fields
    \item Advanced Custom Fields: Repeater Field
    \item s2Member Framework

\end{itemize}

Do not expect 100 \% functionality if any of the plugins above is missing. Your website should also have \textbf{the Bootstrap library (version 4.6)} installed. Contact your webmaster to get more information about it.

\section{Installation}

We expect you to be an administrator.

\begin{enumerate}

    \item Contact the creator (see the last chapter) to get a ZIP archive of the plugin.
    \item Log into your WordPress account.
    \item Go to \textit{Plugins → Add New} in the WordPress navigation menu on the left.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=0.3\textwidth]{images/user-guide/1.png}}
    \end{minipage}
    \medskip

    \item Click on the \textit{Upload Plugin} button on top of the page. Find the ZIP archive of the plugin in your computer and click on the \textit{Install Now} button to start the installation process.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/2.png}}
    \end{minipage}
    \medskip

    \item After the installation, activate the plugin by clicking on the \textit{Activate Plugin} button.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/3.png}}
    \end{minipage}
    \medskip

    \item Find the plugin in \textit{Plugins → Installed Plugins} and click on the \textit{Help} link nearby to continue reading this user guide right in the website administration.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/4.png}}
    \end{minipage}
    \medskip
    
    \item You have successfully completed the installation.
    
\end{enumerate}

\section{Uninstallation}

We expect you to be an administrator.

\begin{enumerate}

    \item Log into your WordPress account.
    \item Go to \textit{Plugins → Installed Plugins} in the WordPress navigation menu on the left.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=0.3\textwidth]{images/user-guide/5.png}}
    \end{minipage}
    \medskip

    \item Find the plugin in the list and click on the \textit{Deactivate} link nearby.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/6.png}}
    \end{minipage}
    \medskip
    
    \item After that, click on the \textit{Delete} link and confirm the uninstallation.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/7.png}}
    \end{minipage}
    \medskip
    
    \item You have successfully completed the uninstallation.
    
\end{enumerate}

\newpage \section{PART 1: Basics}

The \textit{Radio Manager} WordPress plugin is a software that enables you to create
e-radios for your website.

\subsection{Features}

An e-radio (also “radio”, “radio station” or “jukebox”) can do the following things:

\begin{itemize}

    \item play audio/video recordings;
    \item play audio/video introductions (e.g., entries by an e-radio presenter);
    \item display images (with the top and bottom title of each);
    \item display other posts from the website;
    \item show the musician and recording names;
    \item show the musician description;
    \item show the e-radio logo;
    \item show the e-radio name; and
    \item show dialogs (so-called “warnings”) that interrupt the playback and prompt the listener to take a certain action.
    
\end{itemize}

\subsection{Different playlist}

The \textbf{e-radio} has a \textbf{playlist}. The playlist is composed of \textbf{playlist items} that are being played one after another. But playlist items \textbf{ARE NOT} recordings (as one might expect). Every playlist item is a group of music genres you can manage. A \textbf{genre} (e.g., \textit{Folk}, \textit{Classical}, \textit{Announcements}, \textit{Jingles}, etc.) is a group of musicians. A \textbf{musician} is a group of recordings (and also images, etc.).

When the e-radio starts to play, it sets the first playlist item from the playlist. Then, it sets a music genre from the playlist item and a musician from this genre. Finally, it sets a recording from this musician to be played (and also images to be shown, etc.). Genres, musicians, and recordings are shuffled (see below). The whole process continues for other playlist items. This is the main principle of all e-radios.

\subsection{Shuffle mode}

\textit{“Shuffle play is a mode of music playback in which songs are played in a randomized order that is decided upon for all tracks at once.” – Wikipedia}

\begin{itemize}

    \item All the \textbf{genres} attached to a particular playlist item are shuffled.
    \item All the \textbf{musicians} attached to a particular music genre are shuffled.
    \item All the \textbf{images}, \textbf{introductions}, and \textbf{recordings} attached to a particular musician are shuffled.
    \item If all the genres, musicians, introductions, or recordings were played, they are \textbf{shuffled again} (except the images).
    
\end{itemize}

\newpage \section{PART 2: Website}

You can insert the e-radio into an arbitrary WordPress post or page (details in the next chapter). After that, there is a blue-styled responsive universal jukebox on the website. The jukebox can do all the things mentioned in the \textit{Features} in the previous chapter. It is also accessible for all your website visitors who can enjoy it. Let us describe the jukebox and all the situations you may face.

\subsection{Videos}

This is the jukebox playing the \textit{Support Us} video recording by the \textit{CATV USA} musician.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/8.png}
\end{figure}

\begin{enumerate}

    \item A field for the \textbf{name} of the e-radio.
    \item A field for the \textbf{multimedia} (the video in this case).
    \item A field for the e-radio \textbf{controls and information}.
    \item A button that can \textbf{play or pause} the playback.
    \item A \textbf{caption} for a musician’s name.
    \item The \textbf{musician’s name}.
    \item A \textbf{caption} for a recording’s name.
    \item The \textbf{recording’s name}.
    
\end{enumerate}

\subsection{Images}

This is the jukebox playing the \textit{A Pair in Love} audio recording by the \textit{Vitezslav Novak} musician. It also projects images of this musician (even if you stop the playback). Each image is shown for a specific length of time (e.g., three seconds). The transition between images is \textit{fade}.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/9.png}
\end{figure}

\begin{enumerate}

    \item The \textbf{top title} of the image.
    \item The \textbf{image} of the musician.
    \item The \textbf{bottom title} of the image.
    
\end{enumerate}

\subsection{Description}

In the case of \textit{Images}, you can click on the image. After that, the musician’s description appears.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/10.png}
\end{figure}

\newpage

\begin{enumerate}

    \item With the help of the \textit{Back} buttons, you can return to the image.
    
\end{enumerate}

\subsection{Description (no images)}

If the musician has no images, the description appears by default (notice that there are no \textit{Back} buttons). If the description is very long, there is a side slider for scrolling up and down.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/11.png}
\end{figure}

\subsection{Logo}

If there are no images nor description, there is a logo of the e-radio by default.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/12.png}
\end{figure}

\subsection{Website posts}

There is the possibility of projecting some website posts in the e-radio. It can be useful if all the musicians have no images nor descriptions. In this case, there is a \textbf{featured image} of that website post accompanied by the top and bottom title of that image. If you click on the featured image, there is the \textbf{content} of the website post. The website posts are \textbf{shuffled}. A particular post is shown for the whole length of the recording. If the next recording starts to play, another website post appears. For instance, there are no images nor descriptions for the music bands in the Folk Music Audio Program. Therefore, you see the website posts about Czech traditions.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/13.png}
\end{figure}

\newpage

\subsection{Warnings}

These dialogs interrupt the playback and require a listener’s attention. They can be used for example as a prevention against the loss of streaming or as adverts. Every warning comes with a dark grey background to center the listener’s attention onto it.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.75\textwidth]{images/user-guide/14.png}}
\end{figure}

\begin{enumerate}

    \item The \textbf{title} of the warning.
    \item The \textbf{message} of the warning.
    \item The ways to \textbf{finish} the warning and continue listening.
    \item The \textit{OK} button can finish the warning too, but it can also be used to redirect the listener to a new URL link in a new tab after clicking it.
    
\end{enumerate}

\subsection{Preloader}

If there is a high-quality image or video, or your internet connection is slow, there is a small white circle turning around while the multimedia are loading.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/15.png}
\end{figure}

\subsection{Understand the multimedia rule}

This is the multimedia rule:

\medskip

\noindent \textbf{Videos > Website posts > Images > Description > Logo}

\begin{itemize}

    \item If the e-radio plays a \textbf{video} recording, everything to the right is hidden.
    \item If the e-radio plays an audio recording and the \textbf{website posts} are activated, everything to the right is hidden.
    \item If the e-radio plays the audio recording and the website posts are deactivated, there are \textbf{images} attached to a musician and everything to the right is hidden.
    \item If the musician has no images, there is just a \textbf{description} of this musician and everything to the right is hidden.
    \item If the musician has no images nor description, there is a \textbf{logo} of the e-radio.
    \item If the e-radio has no logo, there is simply \textbf{nothing}.
    
\end{itemize}

\newpage \section{PART 3: Administration}

You can manage all the e-radios, musicians, and genres in the WordPress administration. First, log into your WordPress account. After that, move the mouse on the \textit{Radio Manager} item in the WordPress navigation menu on the left.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.75\textwidth]{images/user-guide/16.png}}
\end{figure}

\begin{enumerate}

    \item There you can manage all the \textbf{e-radios}.
    \item There you can manage all the \textbf{musicians}.
    \item There you can manage all the \textbf{music genres}.
    \item There you can find \textbf{this document}.
    
\end{enumerate}

If you cannot find the \textit{Radio Manager} menu item, you probably do not have the respective user capabilities. You must be able to \textbf{edit posts} at least (in the case of this capability, you can see only \textit{Musicians} and \textit{Help} submenu items). Administrators, editors, authors, and contributors can edit posts by default. Moreover, only administrators can also \textbf{manage options} and see the rest in the image above.

\newpage

\subsection{Radio stations}

After clicking on the \textit{Radio Stations} item in the submenu, you can see a list with all the existing e-radios.

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/17.png}}
\end{figure}

\begin{itemize}

    \item There you can \textbf{start creating} a new e-radio.
    \item There is a \textbf{list} of all the existing e-radios that you can manage.
    \item There you can \textbf{search for} an existing e-radio from the list.
    
\end{itemize}

\subsection{Editing a radio station}

After clicking on the specific e-radio or creating a new one, you will land on the editing page. Let us now consider everything this page contains.

\subsubsection{Name}

The name is shown in the jukebox on top.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/18.png}}
\end{figure}

\subsubsection{Logo}

The logo is shown in the jukebox by default.

\newpage

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/19.png}}
\end{figure}

\subsubsection{Shortcode}

This is the way you can \textbf{import a jukebox} into an arbitrary WordPress post or page. Just click on the \textit{Copy} button, find a particular post or page, and insert the shortcode to the content. After opening the post or page on the website, you will see the jukebox.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/20.png}}
\end{figure}

\subsubsection{Publish}

Every time you change something, go here to \textbf{update} or \textbf{publish} all the changes.

\newpage

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/21.png}}
\end{figure}

\subsubsection{Settings}

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/22.png}}
\end{figure}

\begin{enumerate}

    \item \textit{Image duration} – There you can set the time (in seconds) for which every image of the musician is displayed when playing recordings from this musician.
    \item \textit{Website posts} – There you can set all the website posts to be projected when playing recordings from the particular musician. But you must enable projecting these posts for the specific playlist items in the playlist below.
    \item \textit{Musician caption} – There you can set a caption for the musician’s name displayed in the jukebox.
    \item \textit{Recording caption} – There you can set a caption for the recording’s name displayed in the jukebox.
    
\end{enumerate}

\subsubsection{Playlist}

There you can add, edit, swap, or delete playlist items from the playlist. There must be at least one playlist item. For each of the playlist items, at least one music genre must be set.

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/23.png}}
\end{figure}

\begin{enumerate}

    \item \textit{Genres} – There you can set music genres as the groups of musicians.
    \item \textit{Number of musicians} – There you can set the number of musicians to be played per genre.
    \item \textit{Number of recordings} – There you can set the number of recordings to be played per musician.
    \item \textit{Show website posts} – There you can set whether the website posts are being projected while playing this playlist item or not.
    \item After moving the mouse on the specific playlist item, you can delete it or even add a new one by clicking on the \textit{Plus} or \textit{Minus} icon on the right.
    \item There you can add a new playlist item composed of the previous information – \textit{Genres}, \textit{Number of musicians}, \textit{Number of recordings} and \textit{Show website posts}.
    \item After moving the mouse on the specific playlist item, you can collapse or expand it by clicking on the \textit{Arrow} icon in the top left corner of the item.
    
\end{enumerate}

\subsubsection{Warnings}

There you can add, edit, swap, or delete warnings. For every warning, the message must be set.

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/24.png}}
\end{figure}

\begin{enumerate}

    \item \textit{Active} – There you can set whether this warning shows or not.
    \item \textit{Show to} – There you can set the user group that is supposed to see this warning (for example \textit{All users}).
    \item \textit{First} – There you can set the first time when this warning will appear (counted per musician).
    \item \textit{Step} – There you can set a regular step between the last time and the next time this warning appears (counted per musician).
    \item \textit{Title} – There you can set the heading of this warning.
    \item \textit{Message} – There you can set the content of this warning.
    \item \textit{Link} – There you can set the URL link of the confirm button of this warning. If it is empty, then clicking on the confirm button will close the warning. If not, the listener will be redirected to the URL link in a new tab after clicking.
    \item After moving the mouse on the specific warning, you can delete it or even add a new one by clicking on the \textit{Plus} or \textit{Minus} icon on the right.
    \item There you can add a new warning composed of the previous information – \textit{Active}, \textit{Show to}, \textit{First}, \textit{Step}, \textit{Title}, \textit{Message} and \textit{Link}.
    \item After moving the mouse on the specific warning, you can collapse or expand it by clicking on the \textit{Arrow} icon in the top left corner of the warning.
    
\end{enumerate}

\subsection{Musicians}

After clicking on the \textit{Musicians} item in the submenu, you can see a list with all the existing musicians.

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/25.png}}
\end{figure}

\newpage

\begin{enumerate}

    \item There you can \textbf{start creating} a new musician.
    \item There is a \textbf{list} of all the existing musicians that you can manage.
    \item There you can \textbf{search for} an existing musician from the list.
    
\end{enumerate}

\subsection{Editing a musician}

After clicking on the specific musician or creating a new one, you will land on the editing page. Let us now consider everything this page contains.

\subsubsection{Name}

The name is displayed in the jukebox next to the musician’s caption.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/26.png}}
\end{figure}

\subsubsection{Description}

The description appears after clicking on the projected images.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/27.png}}
\end{figure}

\subsubsection{Featured image}

This image just represents the musician in a list of all the existing musicians. It does not show anywhere in the jukebox.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/28.png}}
\end{figure}

\newpage

\subsubsection{Genres}

If you assign the musician to a specific genre, he or she can be played in the playlist.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/29.png}}
\end{figure}

\subsubsection{Publish}

Every time you change something, go here to \textbf{update} or \textbf{publish} all the changes.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.5\textwidth]{images/user-guide/30.png}}
\end{figure}

\newpage

\subsubsection{Images}

There you can add, edit, or delete images of the musician. The images are being projected while playing recordings from the musician. All the images of the musician should have the \textbf{same width and height}. To add, if you set a \textbf{top title} or a \textbf{bottom title} for one image (see below), it should also be set in the remaining images. If you move the mouse on the image, then the \textit{Pencil}, \textit{Remove}, \textit{Minus} and \textit{Plus} icons appear nearby.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.75\textwidth]{images/user-guide/31.png}}
\end{figure}

\newpage

\begin{enumerate}

    \item By clicking on the \textit{Pencil} icon, you can change the \textbf{top and bottom title} of the image.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/32.png}}
    \end{minipage}
    \medskip
    
    A. There you can edit the \textbf{top title} of the image.
    
    B. There you can edit the \textbf{bottom title} of the image.
    
    C. There you can \textbf{update} all the changes.

    \item By clicking on the \textit{Plus} or \textit{Minus} icon, you can \textbf{add or remove} the image.
    \item There you can \textbf{add} a new image (from your computer or the Media Library).

\end{enumerate}

\subsubsection{Introductions}

There you can add, edit, or delete audio/video introductions of the musician. Before playing the recordings of the musician, one of them is set and played. Introductions are \textbf{shuffled} and can be used for example as the entries of an e-radio presenter. If you move the mouse on the introduction, then the \textit{Minus} and \textit{Plus} icons appear nearby.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.75\textwidth]{images/user-guide/33.png}}
\end{figure}

\newpage

\begin{enumerate}

    \item By clicking on the \textit{Plus} or \textit{Minus} icon, you can \textbf{add or remove} the introduction.
    \item There you can \textbf{add} a new introduction (from your computer or the Media Library).
    
\end{enumerate}

\subsubsection{Recordings}

There you can add, edit, or delete audio/video recordings of the musician. For every musician, there must be at least one recording. If you move the mouse on the recording, then the \textit{Pencil}, \textit{Remove}, \textit{Minus} and \textit{Plus} icons appear nearby.

\begin{figure}[htbp]
    \frame{\includegraphics[width=0.75\textwidth]{images/user-guide/34.png}}
\end{figure}

\newpage

\begin{enumerate}

    \item By clicking on the \textit{Pencil} icon, you can change the \textbf{name} of the recording that is displayed next to the recording’s caption in the e-radio.

    \medskip
    \begin{minipage}{\linewidth}
        \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/35.png}}
    \end{minipage}
    \medskip
    
    A. There you can edit the \textbf{name} of the recording.
    
    B. There you can \textbf{update} all the changes.

    \item By clicking on the \textit{Plus} or \textit{Minus} icon, you can \textbf{add or remove} the recording.
    \item There you can \textbf{add} a new recording (from your computer or the Media Library).
    
\end{enumerate}

\subsection{Genres}

After clicking on the \textit{Genres} item in the submenu, you can see a list with all the existing music genres. Genres are very important for creating the playlist.

\begin{figure}[htbp]
    \frame{\includegraphics[width=1.0\textwidth]{images/user-guide/36.png}}
\end{figure}

\newpage

\begin{enumerate}

    \item There you can \textbf{create} a new genre.
    \item There is a \textbf{list} of all the existing genres that you can manage.
    \item There you can \textbf{search for} an existing genre from the list.
    
\end{enumerate}

\newpage \section{PART 4: Bonus features}

\subsection{Skipping}

By clicking on the bottom right corner of the e-radio, you can skip the current recording/introduction. This hidden feature is very useful if you just want to test the playback without having to wait every time until the recording/introduction is finished.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/37.png}
\end{figure}

\subsection{Clever images}

If you click on the image of the musician in the e-radio, the musician’s description appears. Then, if you get back with the help of the \textit{Back} button, there is a \textbf{different} image than before. In that moment, images are \textbf{shuffled}. It works perfectly only if there are a lot of images to show. Otherwise, you will probably see the same image.

\subsection{Extended logo}

The logo of an e-radio can have its top and bottom title too.

\begin{figure}[htbp]
    \includegraphics[width=0.75\textwidth]{images/user-guide/38.png}
\end{figure}

\newpage

\section{Contact}

If you have any troubles or do not understand something, please contact the creator of this plugin.

\medskip

\noindent \textbf{Skype:} karelvrabeckv

\noindent \textbf{E-mail:} karelvrabeckv@gmail.com

\medskip

Your message helps us to make this user guide and the whole plugin better for understanding.

\chapter{Testovací scénáře} \label{priloha-testovaci-scenare}

\section{Tvorba hudebních žánrů}

Hudební žánry jsou velice důležité, poněvadž umožňují zařadit větší množství hudebníků do playlistu rádiové stanice. Proto je jejich tvorba velice důležitá a je nutné ji otestovat jako první. Zároveň by tvorba žánrů měla být (dle odhadu) nejjednodušším procesem v administraci. Význam hudebních žánrů je testerovi dopodrobna vysvětlen až v následujících testovacích scénářích, kdy je hudebník k danému žánru přiřazen a kdy je na základě žánrů vytvořen playlist rádiové stanice.

\subsection*{Odhadovaný čas}

Dvě minuty.

\subsection*{Počáteční bod}

Tester je přihlášen na testovacím účtu a nachází se na hlavní stránce (tzv. \uv{Dashboard}) v administraci systému WordPress na testovacím webu.

\subsection*{Instrukce v českém jazyce}

\begin{enumerate}

    \item Klikněte na položku \textit{Radio Manager → Genres} v levém navigačním menu systému WordPress.
    
    \item Vytvořte jeden hudební žánr – \textit{Czech Classical Music}.

\end{enumerate}

\subsection*{Instrukce v anglickém jazyce}

\begin{enumerate}

    \item Click on the \textit{Radio Manager → Genres} item in the WordPress navigation menu on the left.
    
    \item Create a new music genre – \textit{Czech Classical Music}.

\end{enumerate}

\subsection*{Koncový bod}

Tester vytvořil jeden hudební žánr – \textit{Czech Classical Music}.

\subsection*{Očekávané kroky}

\begin{enumerate}

    \item Kliknout na položku \textit{Radio Manager → Genres} v levém navigačním menu systému WordPress.
    
    \item Vyplnit důležité údaje ve formuláři (tj. \textit{Name}, volitelně i \textit{Slug}, \textit{Parent genre} či \textit{Description}).
    
    \item Kliknout na tlačítko \textit{Add New Genre}.
    
    \item Kroky 2–3 lze opakovat v závislosti na počtu přidávaných hudebních žánrů.

\end{enumerate}

\section{Tvorba hudebníků}

Z hudebníků je tvořen playlist rádiové stanice. Je proto důležité vyzkoušet jejich tvorbu a ověřit, zdali je vhodně navržena. Tester již musí mít vyzkoušenou tvorbu hudebních žánrů, jelikož hudebníka v tomto scénáři k některému z nich připojí.

\subsection*{Odhadovaný čas}

Pět minut.

\subsection*{Počáteční bod}

Tester je přihlášen na testovacím účtu a nachází se na hlavní stránce (tzv. \uv{Dashboard}) v administraci systému WordPress na testovacím webu.

\subsection*{Instrukce v českém jazyce}

\begin{enumerate}

    \item Klikněte na položku \textit{Radio Manager → Musicians} v levém navigačním menu systému WordPress.
    
    \item Vytvořte nového hudebníka s následujícími informacemi:

    \begin{itemize}
    
        \item \textbf{Jméno:} Antonin Dvorak
        
        \item \textbf{Popis:} One of the most famous Czech composers.
        
        \item \textbf{Hlavní obrázek:} (vynechat)
        
        \item \textbf{Žánr:} Czech Classical Music
        
        \item \textbf{Obrázky:} antonin-dvorak.jpg
        
        \item \textbf{Úvodní nahrávky:} (vynechat)
        
        \item \textbf{Nahrávky:} antonin-dvorak-new-world-symphony.mp3 a další (celkem čtyři)
    
    \end{itemize}

    \item Krok 2 lze opakovat v závislosti na počtu přidávaných hudebníků. Veškeré materiály (obrázky, úvodní nahrávky, nahrávky) jsou již k dispozici v administraci.

\end{enumerate}

\subsection*{Instrukce v anglickém jazyce}

\begin{enumerate}

    \item Click on the \textit{Radio Manager → Musicians} item in the WordPress navigation menu on the left.
    
    \item Create a new musician with the following information:

    \begin{itemize}
    
        \item \textbf{Name:} Antonin Dvorak
        
        \item \textbf{Description:} One of the most famous Czech composers.
        
        \item \textbf{Featured image:} (skip)
        
        \item \textbf{Genre:} Czech Classical Music
        
        \item \textbf{Images:} antonin-dvorak.jpg
        
        \item \textbf{Introductions:} (skip)
        
        \item \textbf{Recordings:} antonin-dvorak-new-world-symphony.mp3 and so on (four files together)
    
    \end{itemize}

    \item Step 2 can be repeated depending on the number of musicians to be added. All materials (like images, introductions, and recordings) are already available in the website administration.
    
\end{enumerate}

\subsection*{Koncový bod}

Tester vytvořil hudebníka Antonína Dvořáka.

\subsection*{Očekávané kroky}

\begin{enumerate}

    \item Kliknout na položku \textit{Radio Manager → Musicians} v levém navigačním menu systému WordPress.

    \item Dále kliknout na tlačítko \textit{Add New}.

    \item Vyplnit \uv{Antonin Dvorak} do první položky (→ jméno).

    \item Vyplnit \uv{One of the most famous Czech composers.} do druhé položky (→ popis).

    \item V boxu \textit{Genres} zaškrtnout \uv{Czech Classical Music}.

    \item V boxu \textit{Images} kliknout na tmavé tlačítko \textit{Add Image}. Po zobrazení nové položky kliknout na světlé tlačítko \textit{Add Image} a v knihovně médií vyhledat např. \uv{antonin dvorak}. Vybrat obrázek/obrázky a kliknout na tlačítko \textit{Select}.

    \item V boxu \textit{Recordings} kliknout na tmavé tlačítko \textit{Add Recording}. Po zobrazení nové položky kliknout na světlé tlačítko \textit{Add File} a v knihovně médií vyhledat např. \uv{antonin dvorak}. Vybrat nahrávku/nahrávky a kliknout na tlačítko \textit{Select}.

    \item Kliknout na tlačítko \textit{Publish} pro uložení nového hudebníka.

    \item Kroky 2–8 lze opakovat v závislosti na počtu přidávaných hudebníků. Navíc může být přidán i hlavní obrázek a úvodní nahrávky (pro tento testovací scénář jsou tyto položky volitelné).
    
\end{enumerate}

\section{Tvorba rádiových stanic}

Rádiové stanice jsou základní výstupy pluginu, které lze přidat přímo na webové stránky. Je proto důležité vyzkoušet jejich tvorbu a ověřit, zdali je vhodně navržena. Dále je důležité vyzkoušet zmíněné dosazení na konkrétní webovou stránku. Tester již musí mít vyzkoušenou tvorbu hudebníků a hudebních žánrů, jelikož playlist bude v tomto testovacím scénáři vytvářen právě na základě žánrů a jim přidělených hudebníků.

\subsection*{Odhadovaný čas}

Pět minut.

\subsection*{Počáteční bod}

Tester je přihlášen na testovacím účtu a nachází se na hlavní stránce (tzv. \uv{Dashboard}) v administraci systému WordPress na testovacím webu.

\subsection*{Instrukce v českém jazyce}

\begin{enumerate}

    \item Klikněte na položku \textit{Radio Manager → Radio Stations} v levém navigačním menu systému WordPress.
    
    \item Vytvořte novou rádiovou stanici s následujícími informacemi:

    \paragraph*{Základní informace}

    \begin{itemize}
    
        \item \textbf{Název:} Czech Classical Music Radio
        
        \item \textbf{Logo:} classical-music-audio-program.jpg
    
    \end{itemize}

    \paragraph*{Nastavení}

    \begin{itemize}
    
        \item \textbf{Doba zobrazení jednoho obrázku:} (vynechat)
        
        \item \textbf{Webové příspěvky:} (vynechat)
        
        \item \textbf{Popisek hudebníka:} Composer:
        
        \item \textbf{Popisek nahrávky:} Composition:
    
    \end{itemize}

    \paragraph*{Playlist (první položka)}

    \begin{itemize}
    
        \item \textbf{Žánry:} Czech Classical Music
        
        \item \textbf{Počet přehrávaných hudebníků:} 1
        
        \item \textbf{Počet přehrávaných nahrávek na jednoho hudebníka:} 1
        
        \item \textbf{Promítat webové příspěvky:} (vynechat)
    
    \end{itemize}

    \paragraph*{Výstražná hlášení (první položka)}

    \begin{itemize}
    
        \item \textbf{Aktivní:} Ano
        
        \item \textbf{Ukázat komu:} Všichni uživatelé
        
        \item \textbf{Poprvé zobrazit po:} 0 (hudebnících)
        
        \item \textbf{Pravidelně zobrazovat po:} 1 (hudebníkovi)
        
        \item \textbf{Titulek:} Streaming Warning Popup
        
        \item \textbf{Obsah:} Are you still listening? Click the OK button and continue!
        
        \item \textbf{Link:} (vynechat)
    
    \end{itemize}

    \item Zkopírujte kód v boxu \textit{Shortcode} a vložte jej do libovolné stránky v systému WordPress (např. \textit{Czech Classical Music Program}).

    \item Podívejte se na tuto stránku na webu a ověřte, že se rádiová stanice zobrazila na daném místě a pracuje správně.

    \item Kroky 2–4 lze opakovat v závislosti na počtu přidávaných rádiových stanic. Veškeré materiály (loga, webové příspěvky, hudebníci, žánry) jsou již k dispozici v administraci (a vytvořeny v předchozích scénářích).

\end{enumerate}

\subsection*{Instrukce v anglickém jazyce}

\begin{enumerate}

    \item Click on the \textit{Radio Manager → Radio Stations} item in the WordPress navigation menu on the left.
    
    \item Create a new radio station with the following information:

    \paragraph*{Basic information}

    \begin{itemize}
    
        \item \textbf{Name:} Czech Classical Music Radio
        
        \item \textbf{Logo:} classical-music-audio-program.jpg
    
    \end{itemize}

    \paragraph*{Settings}

    \begin{itemize}
    
        \item \textbf{Image duration:} (skip)
        
        \item \textbf{Website posts:} (skip)
        
        \item \textbf{Musician caption:} Composer:
        
        \item \textbf{Recording caption:} Composition:
    
    \end{itemize}

    \paragraph*{Playlist (first item)}

    \begin{itemize}
    
        \item \textbf{Genres:} Czech Classical Music
        
        \item \textbf{Number of musicians:} 1
        
        \item \textbf{Number of recordings:} 1
        
        \item \textbf{Show website posts:} (skip)
    
    \end{itemize}

    \paragraph*{Warnings (first item)}

    \begin{itemize}
    
        \item \textbf{Active:} Yes
        
        \item \textbf{Show to:} All users
        
        \item \textbf{First:} 0 (musicians)
        
        \item \textbf{Step:} 1 (musicians)
        
        \item \textbf{Title:} Streaming Warning Popup
        
        \item \textbf{Message:} Are you still listening? Click the OK button and continue!
        
        \item \textbf{Link:} (skip)
    
    \end{itemize}

    \item Copy the code in the \textit{Shortcode} box and insert it into an arbitrary post or page in the WordPress (e.g. \textit{Czech Classical Music Program}).

    \item Look at the post or page on the website and check the functionality of the radio station.

    \item Steps 2–4 can be repeated depending on the number of radio stations to be added. All materials (like logos, website posts, musicians, and music genres) are already available in the website administration.

\end{enumerate}

\subsection*{Koncový bod}

Tester vytvořil rádiovou stanici Czech Classical Music Radio, vložil ji na konkrétní webovou stránku a ověřil její funkčnost.

\subsection*{Očekávané kroky}

\begin{enumerate}

    \item Kliknout na položku \textit{Radio Manager → Radio Stations} v levém navigačním menu systému WordPress.

    \item Dále kliknout na tlačítko \textit{Add New}.

    \item Vyplnit \uv{Czech Classical Music Radio} do první položky (→ název).

    \item V boxu \textit{Logo} kliknout na \textit{Set logo} a v knihovně médií vyhledat např. \uv{classical music audio program}. Vybrat obrázek a kliknout na tlačítko \textit{Set logo}.

    \item V boxu \textit{Settings} vyplnit \uv{Composer: } do položky \textit{Musician caption} a \uv{Composition: } do položky \textit{Recording caption}.

    \item V boxu \textit{Playlist} kliknout na tlačítko \textit{Add Playlist Item}. Po zobrazení nové položky nastavit \textit{Genres} na \textit{Czech Classical Music} a dále \textit{Number of musicians} a \textit{Number of recordings} na 1.

    \item V boxu \textit{Warnings} kliknout na tlačítko \textit{Add Warning}. Po zobrazení nové položky nastavit \textit{Active} na \textit{YES}, \textit{Show to} na \textit{All users}, \textit{First} na 0 (hudebníků), \textit{Step} na 1 (hudebníka) a dále vyplnit \uv{Streaming Warning Popup} do \textit{Title} a \uv{Are you still listening? Click the OK button and continue!} do \textit{Message}.

    \item Kliknout na tlačítko \textit{Publish} pro uložení nové rádiové stanice.

    \item V boxu \textit{Shortcode} kliknout na tlačítko \textit{Copy} a zkopírovaný kód vložit do libovolné stránky vytvořené v systému WordPress (např. \textit{Czech Classical Music Program}). Tuto stránku následně uložit, zobrazit v prohlížeči a zkontrolovat funkčnost vložené rádiové stanice.

    \item Kroky 2–9 lze opakovat v závislosti na počtu přidávaných rádiových stanic. Zároveň lze opakovat i kroky 6 a 7 v závislosti na počtu přidávaných položek playlistu a výstražných hlášení. Navíc může být nastavena i doba zobrazení jednoho obrázku, webové příspěvky a jejich promítání u konkrétních položek playlistu a dále link tlačítka \textit{OK} u výstražných hlášení (pro tento testovací scénář jsou tyto položky volitelné).
    
\end{enumerate}

\chapter{Obsah přiloženého CD}

\begin{figure}

	\dirtree{%
		.1 readme.txt\DTcomment{stručný popis obsahu CD}.
		.1 backend.rp\DTcomment{wireframes backendové části ve formátu RP}.
		.1 frontend.rp\DTcomment{prototyp frontendové části ve formátu RP}.
		.1 radio-manager\DTcomment{zdrojové kódy implementace}.
		.1 thesis.pdf\DTcomment{text práce ve formátu PDF}.
		.1 thesis.tex\DTcomment{zdrojová forma práce ve formátu \LaTeX{}}.
		.1 user-guide.pdf\DTcomment{uživatelská příručka ve formátu PDF}.
	}
	
\end{figure}

\end{document}
