%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%kapitola o teorii k webovému modulu
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\chapter{Technologie webového modulu}
%V této kapitole je  popsána technologie použitá při psaní webového modulu. 
%Některé části webových aplikací je možné realizovat jako zásuvné webové moduly, které se starají o určitou činnost. Tyto moduly je možné následně připojovat do různých webových aplikací, kde je jejich funkce potřeba. Pro tvorbu těchto modulů se používají stejné technologie jako pro tvorbu webových aplikací, do kterých jsou přidávány.
Pro získání co nejvíce uživatelů je výhodné vytvářet webové aplikace, které jsou snadno dostupné nezávisle na čase, místě a platformě. Tyto webové aplikace mohou také obsahovat zásuvné webové moduly, které se starají o určitou funkci dané aplikace. Tyto moduly je možné přidávat do různých webových aplikací.  
\section{HTTP}
HTTP je protokol pro přenos hypertextu, jedná se o jeden z protokolů aplikační vrstvy ISO/OSI síťového modelu, který pracuje na transportním protokolu TCP. Dnes se také využívá zabezpečený protokol HTTPS, který navíc využívá protokol TLS pro šifrování spojení. Také se začíná používat verze protokolu HTTP/3, který na rozdíl od předchozích verzí nevyužívá protokolu TCP, ale již využívá protokol UDP nevyžadující potvrzení každého odeslaného datagramu.\cite{http}
Klient posílá požadavky na server, které dle požadovaného účelu používají jednu z následujících metod\cite{httpmetody}:
\newline
\\
\textbf{GET} metoda žádá reprezentaci zadaného zdroje. Metoda by měla pouze obdržet data.\newline
\textbf{HEAD} metoda žádá o stejnou odpověď jako GET, ale bez těla odpovědi.\newline
\textbf{POST} je metoda pro odesílání entit zadanému zdroji. Metoda způsobuje změnu dat na serveru.\newline
\textbf{PUT} je metoda pro úpravu konkrétních dat zdroje.\newline
\textbf{DELETE} je metoda pro mazání dat zdroje.\newline
\textbf{CONNECT} metoda stanoví tunel na server identifikovaný cílovým zdrojem.\newline
\textbf{OPTIONS} metoda popisuje možnosti komunikace s cílovým zdrojem.\newline
\textbf{TRACE} metoda slouží k diagnostice přesměrování.\newline
\textbf{PATCH} slouží k aplikování částečné modifikace zdroje \cite{httpmetody}.
\\
\par Na základě požadavku vytvoří server odpověď obsahující hlavičku (informace o délce a formátu odpovědi), návratový kód a textový obsah. Návratový kód slouží k informování klienta (prohlížeče), zda byl požadavek úspěšný nebo se vyskytla nějaká chyba. Jedná se tedy o velmi důležitou část odpovědi a pro ošetření chyb je nutné správně zpracovávat různé návratové kódy.
Mezi důležité návratové kódy patří:\newline
\\
\textbf{200 OK} - požadavek na server byl úspěšný.\newline
\textbf{301 Moved Permanently} - stránka přemístěna, je požadováno přesměrování.\newline
\textbf{302 Moved Temporarily} - data byla dočasně přemístěna, je požadováno jednorázové přesměrování.\newline
\textbf{400 Bad Request} - chybný tvar požadavku.\newline
\textbf{403 Forbidden} - server odmítá autorizovat požadavek.\newline
\textbf{404 Not Found} - stránka nebyla nalezena.\newline
\textbf{500 Internal Server Error} - Během zpracování požadavku nastala výjimka, která znemožnila naplnění požadavku.\newline
\\
Další návratové kódy a více informací ke kódům a k protokolu HTTP lze nalézt ve specifikaci protokolu \cite{httpkody}.


\section{Technologie na straně klienta}
Cílem klientské části aplikace (frontendu) je dodat stránce vzhled a interaktivitu, která uživateli vhodně zobrazí data a zpříjemní procházení webu. klientská část je složena ze souborů obsahujících kaskádové styly (CSS), které definují vzhled stránky a jejích prvků a programu \cite{javascriptdom}.
\smallskip
\smallskip
\par Dnešní prohlížeče nativně podporují programovací jazyk JavaScript a jiné jazyky přímo nepodporují. JavaScript manipuluje s DOM a tím je schopen modifikovat vzhled stránky. Komponenty v DOM jsou vázány na jednotlivé HTML elementy. Může měnit všechny HTML elementy, atributy a CSS styly na stránce a také je odstraňovat a přidávat, může reagovat na události na stránce a přidávat nové \cite{javascriptdom}. 
\smallskip
\smallskip
\par Velmi rozšířené jsou nástavbové knihovny pro javascript, jelikož běžné manipulace s DOM, jako jsou úprava, přidávání, vyhledávání a odebírání, jsou v nativním javascriptu poměrně obtížné.
\\
Mezi nejrozšířenější v současné době patří:

\begin{itemize}
	\item React,
	\item Angular,
	\item Ember,
	\item Vue.
\end{itemize}
\section{Technologie na straně serveru}
Každá stránka disponuje také serverovou částí (backendem). Jedná se o část stránky, kterou uživatel nevidí. Serverová část se stará o zpracování požadavků stránky, generuje HTML, posílá dotazy databázi a přidává nebo aktualizuje prvky v databázi.
\newpage
Mezi nejpoužívanější jazyky pro serverovou část patří:

\begin{itemize}
	\item Java,
	\item Python,
	\item Ruby,
	\item PHP.
\end{itemize}
Pro tvorbu serverové části byl zvolen jazyk Python. Jedná se o interpretovaný, vysokoúrovňový programovací jazyk, který umožňuje objektové i procedurální programování. Pro Python je dostupná celá řada knihoven a frameworků, které usnadňují řešení běžných úkolů a problémů \cite{python}. Mezi často používané frameworky užívané pro tvorbu serverové části stránky patří Django a Flask, který sice nenabízí tolik možností jako Django, ale je možné jeho schopnosti rozšířit dle potřeby.
\smallskip
\smallskip
\par Serverová část je zpravidla připojena k databázi. Většinou se jedná systémy relačních databází a pro práci s nimi se používá jazyk SQL (MySQL, PosgreSQL, Microsoft SQL server a SQLite). Existují také řešení bez použití SQL jako například mongoDB, která data ukládá v souborech typu JSON\footnote{<\url{https://learnsql.com/blog/most-popular-sql-databases-2020/}>}. Jelikož práce s relačními databázemi může být obtížná, byly vytvořeny nástroje typu ORM, které převádějí databázové řádky na objekty.   
\subsection{Curl}
%Pro komunikaci s NPS je použit nástroj CURL, který se používá pro přenos dat s použitím různých síťových protokolů jako je například HTTP, HTTPS, IMAP a další 
Pro zasílání dotazů na koncové body NPS API je použit nástroj CURL, který se používá pro přenos dat s použitím různých síťových protokolů jako je například HTTP, HTTPS, IMAP a další
\cite{curlprotocols}.
\smallskip
\smallskip
\par Curl je rozdělen na dvě části a to na nástroj příkazové řádky a na knihovnu libcurl. Pro přenos dat nejprve nutné nastavit specifické informace a detaily pro přenos a následně přenos provést. Po provedení dotazu je spojení uloženo a je možné jej použít znovu. To přináší benefity ve formě rychlosti a v požadovaných zdrojích. Knihovna je napsána v jazyce C a disponuje C API pro aplikace psané v jazyce C. Pro ostatní jazyky existují knihovny, které slouží jako vrstva mezi libcurl a daným programovacím jazykem \cite{curllib}. 
\smallskip
\smallskip
\par Jednou z těchto knihoven je PycURL pro programovací jazyk Python, která umožňuje získávat data z URL z programu psaného v tomto jazyce. Knihovna podporuje většinu funkcí libcurl, jako je rychlost nebo podpora vícero protokolů.\cite{pycurl}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%kapitola návrhu a realizaci weobového modulu
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\chapter{Návrh a realizace webového modulu}
V této kapitole je popsán návrh a realizace řešení webového modulu. Aplikace je realizována jako webový modul, který je možné připojit do různých e-shopů. Aplikace je rozdělena na klientskou část, kterou vidí uživatel a může s ní interagovat, a na serverovou část, která se stará o to, co se uživateli zobrazí, a o zpracování odpovědí uživatele.
\smallskip
\smallskip
\par Pro změnu zaměření aplikace na jiný produkt je nutné navrhnout a realizovat novou bázi znalostí, nastavovací soubor pro filtr, upravit volání na NPS API a upravit otázky případně otázky přidat nebo odebrat. 
\smallskip
\smallskip 
%vložit obrázek s diagramem od Lukáše a nějak to popsat  
\par Téměř všechny dnešní e-shopy nabízejí možnost filtrování nabízeného zboží pomocí filtru, kde si uživatel může vybrat produkt přesně dle svých požadavků. Například jeden z nejznámějších českých e-shopů Alza.cz nabízí pro výběr mobilních telefonů velmi obsáhlý filtr, který umožňuje uživateli si zvolit vše od velikosti displeje přes model procesoru, po typ operačního systému, či si nastavit přesně jaké technologie chce, aby telefon obsahoval (viz obr. 6.1). To je velmi výhodné pro uživatele, kteří se v dané problematice vyznají a mohou si navolit telefon přesně podle požadovaných parametrů přístroje.\\
\smallskip
\begin{figure}[!h]
	\begin{center}
		\includegraphics[scale=0.65]{obrazky/alza_filtr.PNG}
	\end{center}
	\caption[Snímek obrazovky filtru produktů na webu Alza.cz.]{Snímek obrazovky filtru na webu Alza.cz.}
\end{figure}
\par Avšak značná část zákazníků se v parametrech mobilních telefonů neorientuje a je pro ně tento obsáhlý filtr velmi složitý a neefektivní a mnohdy ani těmto parametrům nerozumí a neví, co jednotlivá označení znamenají. 
\smallskip
\smallskip
\par Tato aplikace je vhodná pro zákazníky s minimálními nebo žádnými znalostmi této problematiky.Zákazníci zodpoví devět jednoduchých otázek, v závislosti na tom jakou představu mají o využívání přístroje bez nutnosti znalosti parametrů, technických pojmů a velmi rychle se vyvíjejících technologií v této oblasti. 
\smallskip
\smallskip
\par Na obrázku 6.2 je vyobrazeno blokové schéma, kde jednotlivé bloky značí části webového modulu, které jsou popsány v následujících podkapitolách. 
%obrazek s blokovým diagramem aplikace 
  \begin{figure}[!h]
  	\begin{center}
  		\includegraphics[scale=0.36]{obrazky/vyvojovydiagramaplikace.png}
  	\end{center}
  	\caption[Blokové schéma webového modulu.]{Blokové schéma webového modulu.}
  \end{figure}   
%podkapitola o frontendu
\newpage
\section{Klientská část}
 
Klientská část aplikace je realizována jako  dvě samostatné stránky. Je rozdělena na stránku s otázkami a na stránku s produkty. 
%popis stránky s otázkami
\subsection{Stránka s otázkami}
Stránka obsahuje formulář s otázkami, které jsou popsané v kapitole 4.1. Na každou otázku má uživatel možnost odpovědět pomocí rozbalovacího menu s dostupnými odpověďmi ( viz obr. 6.3). Po rozbalení uživatel vybere odpověď, která je následně zobrazena po zavření rozbalovacího menu.
%obrazek se snímkem obrazovky stránky s otázkama
\begin{figure}[!h]
  \begin{center}
    \includegraphics[scale=0.5]{obrazky/snimek_obrazovky_s_otazkama.png}
  \end{center}
  \caption[Snímek obrazovky stránky s otázkami.]{Snímek obrazovky stránky s otázkami.}
\end{figure}     
\par Součástí výběru je otázka preference konkrétní značky, která bude sloužit jako konečný filtr produktů, pokud má uživatel oblíbenou značku a nechce ji měnit. Pokud uživateli na značce nezáleží, zvolí možnost „Nemám preference“ a na základě toho budou vykresleny produkty všech značek odpovídajících vybraným parametrům.
\smallskip
\smallskip
\par Po zvolení všech odpovědí  odešle uživatel formulář prostřednictvím tlačítka Odeslat. Tím se jeho odpovědi zašlou do serverové části, kde budou zpracovány.  Pokud uživatel ponechá, nebo opětovně zvolí u všech odpovědí možnost „Nevím“,  zobrazí se všechny dostupné telefony v databázi telefonů. Nalevo od tlačítka Odeslat se nachází tlačítko Vyčistit formulář, které uživateli navrátí formulář do výchozího stavu.      
%popis stránky s produkty
\subsection{Stránka s produkty}
Po získání dat od serveru jsou zobrazeny karty s vybranými telefony. Každá karta obsahuje obrázek telefonu, značku, model, velikost paměti telefonu v GB, cenu a  základní informace o vhodnosti použití telefonu.
\begin{figure}[!h]
  \begin{center}
    \includegraphics[scale=0.45]{obrazky/stranka_s_vysledky_bez_preferovane_znacky.PNG}
  \end{center}
  \caption[Snímek obrazovky stránky s výsledky bez vybrané preferované značky.]{Snímek obrazovky stránky s výsledky bez vybrané preferované značky.}
\end{figure}
\par Telefony se na stránce zobrazují v pořadí podle ceny, a to od nejlevnějších po nejdražší. Vybere-li uživatel během vyplňování formuláře svoji oblíbenou značku, pak jsou nejprve zobrazeny produkty této značky a pod nimi dále produkty ostatních značek s parametry odpovídajícím jeho požadavkům. Ukázka stránky s výsledky je na obrázku 6.4 a 6.5. 
\begin{figure}[!h]
	\begin{center}
		\includegraphics[scale=0.45]{obrazky/stranka_s_vysledky_s_vybranou_znackou.PNG}
	\end{center}
	\caption[Snímek obrazovky stránky s výsledky s vybranou preferovanou značkou.]{Snímek obrazovky stránky s výsledky s vybranou preferovanou značkou.}
\end{figure}
\bigskip
\par Stránka také obsahuje tlačítko Zpět na výběr telefonu, které uživatele přesměruje zpět na formulář obsahující jeho volbu odpovědí na otázky a uživatel může následně odpovědi na otázky změnit, pokud mu nebudou vybrané telefony vyhovovat, a formulář odeslat znovu kliknutím na tlačítko Odeslat.  
%podkapitola o backendu
\newpage
\section{Serverová část}
%nove
Kliknutím uživatele na tlačítko Odeslat budou jeho odpovědi zaslány na serverovou část.
Tato část je realizována pomocí frameworku Flask pro Python. Zde se zavolá funkce, která zajistí zasílání dotazů na NPS API. To probíhá ve dvou krocích. Nejprve jsou zaslány přihlašovací údaje, po ověření je zaslán zpět autorizační token s omezenou časovou platností. Ten slouží pro ověření v následujících voláních. Ve výpisu 6.1 je uvedena ukázka zasílání odpovědí do systému NPS, v tomto kroku již musí být známý autorizační token a identifikační číslo báze znalostí se kterou bude prováděna konzultace.
\begin{lstlisting}[language=python,caption={Ukázka zasílání odpovědí na NPS.},label=lst:zasilani.odpovedi.nps,basicstyle=\ttfamily\small, keywordstyle=\color{black}\bfseries]
crl.setopt(
crl.URL, 'https://www.stud.feec.vutbr.cz/~xkorin12
/npsdata/feedback/do?lang=cs-CZ')
# setting up query header it uses authorization token acquired before
crl.setopt(crl.HTTPHEADER, ['X-Requested-With: XMLHttpRequest',
'Authorization: Bearer {token}',
 'Content-Type: application/x-www-form-urlencoded'])
# setting up data for query, answer is set for
# every question in knowlage base, all answers are send together
data_to_send = {'baseId': {base_id},
 'answers[video]': {answer for first question},
 'answers[hry]': {answer to second question},...}
\end{lstlisting}
\bigskip
 \par Ve druhém kroku jsou již zaslány odpovědi uživatele a je provedena konzultace na bázi znalostí popsané v kapitole 4. Ze dvou možných popsaných v podkapitole 3.2.3 způsobů provádění konzultace byl zvolen způsob, kdy jsou všechny odpovědi zaslány najednou. Tento způsob návrhu umožňuje uživateli na otázky odpovídat, či měnit odpovědi v libovolném pořadí.    
 Jako výsledek konzultace jsou získány jednotlivé výsledky hypotéz, na základě kterých budou následně telefony filtrovány.  

%\par Po proběhnutí konzultace a získání výsledků hypotéz bude volána další funkce, sloužící pro vyfiltrování produktů. Tato funkce má jako parametr kritéria pro výběr telefonu. Na základě těchto kritérií se sestaví filtr pro dotaz na databázi. Ten z databáze vybírá na základě hodnot popsaných v kapitole 4.2. Po sestavení filtru bude filtr aplikován a dotaz proveden.
\smallskip
\smallskip
\par Ze získaných informací jsou následně vybrány informace, které se zobrazí na stránce s výsledky, a ty se poté vrátí jako návratová hodnota této funkce. 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%kapitola o filtrovací aplikaci
\section{Filtrovací aplikace}
%nove
%neco co by se tam dalo dat
Filtrovací aplikace se skládá ze dvou souborů: ze samotného filtru a z nastavovacího souboru typu \emph{yaml}. \\ \\
\bigskip
\textbf{Filtrovací funkce}
\par Funkce má jako vstupní parametr hodnoty hypotéz získané jako návratové hodnoty zaslaných dotazů na NPS. Tyto hodnoty jsou následně převedeny na číslo a uloženy do pole. Vlastní filtr je realizovaný jako smyčka, která postupně prochází pole s hodnotami hypotéz. Ke každé hypotéze je v nastavovacím souboru příslušná část s hodnotami, dle kterých je sestaven dílčí dotaz na databázi. Ve smyčce je nejprve určeno jaký typ na mapování hypotézy bude vybrán. Filtr obsahuje tři typy mapování.
\bigskip
\begin{enumerate}[label=\textbf{\alph*$)$}]
	\item \textbf{Mapování na určitý spojitý rozsah} - v nastavovacím souboru jsou stanoveny horní a dolní mez pro hodnoty hypotézy. Pokud je hodnota vyšší než horní mez intervalu, tak jsou vybírány z databáze hodnoty vyšší než nastavená hranice sloupce v databázi. Při hodnotě nižší než dolní mez jsou naopak vybírány hodnoty nižší než hranice. Pokud se hodnota hypotézy nachází v intervalu, tak není filtrováno. 
	\smallskip  
	\item \textbf{Logické mapování} - v nastavovacím souboru je stanovena hranice hodnoty hypotézy. Pokud je hodnota vyšší než tato hranice, tak je dle této hypotézy filtrováno, v opačném případě se nefiltruje.
	\smallskip
	\item \textbf{Filtrování se dvěma intervaly} - pokud je hodnota nad horní nebo pod dolní mezí pro hodnoty hypotézy, tak funguje stejně jako Mapování na určitý spojitý rozsah. Pokud se hodnoty hypotézy nachází v intervalu, tak bude filtrováno dle hodnot v nastavovacím souboru.  
\end{enumerate} 
\bigskip
\par Po sestavení všech dílčích dotazů jsou všechny dílčí dotazy spojeny logickou funkcí AND, tím je sestaven dotaz na databázi, který se provede. Z navrácených výsledků jsou vybrána data, jež se zobrazí na kartě telefonu, tedy značka, model, cena, velikost vnitřní paměti, cesta k obrázku s telefonem a jeho krátký popis. Tato data pro každý telefon vyhovující požadavkům jsou uložena do slovníku(dictionary) a slouží jako návratová hodnota funkce.\\ \\
%
\bigskip
\textbf{Nastavovací soubor}
\par Nastavovací soubor ke každé hypotéze obsahuje hodnoty, dle kterých se nastaví filtr. Obsahuje proměnnou \emph{filter\_type}, která slouží k výběru, jakým stylem se dané hodnoty hypotéz budou mapovat. Tato proměnná může nabývat čtyř hodnot:
\bigskip
\begin{enumerate}[label=\alph*$)$]
	\item  no\_filter - filtr bude ignorován. 
	\item  continuous\_range - mapování na určitý spojitý rozsah.
	\item  logical\_mapping - logické mapování, nad určitou hranicí se bude filtrovat, pod ní ne. 
	\item  two\_intervals - mapování na určitý spojitý rozsah s tím, že se filtruje i uvnitř intervalu.   
\end{enumerate}
\bigskip 
\par Dále nastavovací soubor obsahuje proměnné \emph{criteria}, tyto hodnoty jsou porovnávány s hodnotami získaných hypotéz a následně se určí, jaký dotaz na databázi se sestaví. Dotaz na databázi se skládá z proměnných \emph{name}, \emph{operator} a \emph{threshold}. \emph{Name} je jméno sloupce v databázi, ze kterého se bude filtrovat, \emph{threshold} určuje hranici hodnot sloupce databáze a \emph{operator} pomocí operátorů porovnání určí jaké hodnoty sloupce se mají vybrat. Filtr podporuje operátory <, >, <=, >=, ==, !=, ale také operátory like, in, any. Ve výpise 6.2 je ukázka nastavovacího souboru pro hypotézu velikost displeje
\bigskip
\begin{lstlisting}[language=python,caption={Ukázka nastavovacího souboru pro velikost displeje telefonu},label=lst:nastavovaci.soubor.displej,basicstyle=\ttfamily\small, keywordstyle=\color{black}\bfseries]
	- name: displej
  	  filter_type: continuous_range 
  	  threshold_top: 6.2
  	  threshold_bottom: 6.2
  	  criteria_top: 0.6
  	  criteria_bottom: 0.4
  	  criteria_middle_top: 0
  	  criteria_middle_bottom: 0
      operator_top: ">"
  	  operator_mid: "=="
  	  operator_bottom: "<"
\end{lstlisting}  
\bigskip
\section{Databáze s produkty}
Aby bylo možné otestovat funkčnost webového modulu, bylo nutné vytvořit databázi obsahující produkty, ze kterých aplikace bude vybírat. K tvorbě a obsluze databáze je použita knihovna SQLAlchemy, která umožňuje práci s různými druhy databází. Vytvořená databáze využívá SQLite, které nepotřebuje databázový server spuštěný jako samostatný proces. Díky použití SQLAlchemy je možné připojit kteroukoliv podporovanou databázi.
\smallskip
\smallskip
\par Pro každý produkt je v databázi vytvořen jeden řádek, kde jsou uloženy hodnoty pro daný produkt, jako je např. velikost displeje, které slouží k nastavení filtrovací aplikace a také hodnoty, které se posílají zpět na klientskou část aplikace jako je například, jeho cena,popis a obrázek. V databázi je místo samotného obrázku uložena relativní cesta k obrázku v adresářové struktuře aplikace.
\smallskip
\smallskip
\par Databáze aktuálně obsahuje 70 telefonů od několika značek a v různých cenových a výkonových kategoriích a to levné telefony, které jsou dostačující pro nenáročné uživatele, kteří telefon používají na telefonování a využívání sociálních sítí. V prostřední kategorii jsou přístroje nabízející výkon na hraní i náročnějších her a některé technologie, které se již staly standartem a uživatelé je vyžadují.  
Poslední kategorií jsou drahé telefony. Ty nabízejí nejvyšší výkon a poslední a nejlepší technologie, které jsou dostupné.      
\section{Testování aplikace}
Během vývoje byly všechny části webového modulu ručně testovány a to jak jednotlivé části samostatně s napodobeninami reálných dat, tak i celý modul jako celek. Jedním vstupem, na který byl modul testován, byly odpovědi uživatele, který chce sledovat videa a hrát hry, dále požaduje velkou výdrž baterie a paměť dostačující pro běžné použití. Uživatel tedy zvolil u požadovaných parametrů nejvíce kladné odpovědi na otázky a na otázku ohledně paměti telefonu zvolil odpověď „Pro běžné použití“. Na ostatní otázky odpověděl záporně, jelikož neplánuje s přístrojem pořizovat fotografie, nebude s ním sportovat, nepožaduje zvýšenou odolnost a nevyužívá více SIM karet. Uživatel také nepreferuje žádnou značku, a proto u poslední otázky ponechá možnost „Nemám preference“. Po kliknutí na tlačítko Odeslat mu byly vygenerovány tyto telefony:
\smallskip
\smallskip
\begin{itemize}
	\item Motorola MOTO G9 Plus,
	\item Xiaomi POCO X3,
	\item Realme 6 Pro,
	\item Xiaomi Redmi Note 8 Pro,
	\item OnePlus Nord N10.
\end{itemize} 
\smallskip
\smallskip
\par  Tyto telefony byly vybrány, jelikož disponují displejem větším než 6,2", výkonem dostatečně velkým i pro náročnější hry a velkou baterií. Velký cenový rozdíl mezi jednotlivými produkty je způsobem cenovou politikou značky, ale také přidanými technologiemi, kdy například z tohoto výběru nejdražší OnePlus N10, na rozdíl od nejlevnější Motoroly, disponuje také podporou 5G připojení.   





