České vysoké učení technické v Praze Fakulta informačních technologií Katedra Softwarového Inženýrství
Diplomová práce
HTML 5 pro uživatelské rozhraní automobilu Bc. Jan Václavík
Vedoucí práce: Ing. Martin Půlpitel
6. května 2014
Poděkování Na tomto místě bych rád poděkoval všem, kdo mi s diplomovou prací pomohli. Poděkování patří především mým rodičům za jejich bezmeznou podporu při studiu a mnohé korektury práce. Velmi cenné pro mě byly rady Ing. Miloše Purkerta a Ing. Martina Půlpitla. Rád bych také poděkoval Zuzaně Vonkové a Bc. Oskaru Hollmannovi za jejich pomoc při hledání chyb a správné formulaci textu.
Prohlášení Prohlašuji, že jsem předloženou práci vypracoval(a) samostatně a že jsem uvedl(a) veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů. V souladu s ust. § 46 odst. 6 tohoto zákona tímto uděluji nevýhradní oprávnění (licenci) k užití této mojí práce, a to včetně všech počítačových programů, jež jsou její součástí či přílohou a veškeré jejich dokumentace (dále souhrnně jen „Dílo“), a to všem osobám, které si přejí Dílo užít. Tyto osoby jsou oprávněny Dílo užít jakýmkoli způsobem, který nesnižuje hodnotu Díla a za jakýmkoli účelem (včetně užití k výdělečným účelům). Toto oprávnění je časově, teritoriálně i množstevně neomezené. Každá osoba, která využije výše uvedenou licenci, se však zavazuje udělit ke každému dílu, které vznikne (byť jen zčásti) na základě Díla, úpravou Díla, spojením Díla s jiným dílem, zařazením Díla do díla souborného či zpracováním Díla (včetně překladu), licenci alespoň ve výše uvedeném rozsahu a zároveň zpřístupnit zdrojový kód takového díla alespoň srovnatelným způsobem a ve srovnatelném rozsahu, jako je zpřístupněn zdrojový kód Díla.
V Praze dne 6. května 2014
.....................
České vysoké učení technické v Praze Fakulta informačních technologií c 2014 Jan Václavík. Všechna práva vyhrazena.
Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.
Odkaz na tuto práci Václavík, Jan. HTML 5 pro uživatelské rozhraní automobilu. Diplomová práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2014.
Abstract This master thesis deals with the issues of usability and the development of applications for onboard computers in cars based on the web technologies. The included demo will demonstrate the user interface between the Tuner and Media controls, which will communicate with the main computer of a car. The Media control provides the choice of playing music from storage and the Tuner controls allows the user to choose the frequency of the radio. Part of this thesis is also the analysis of JavaScript frameworks and web browsers for deployment in onboard computers. An essential part of this thesis is also the introduction of the issues of user interface in cars, of distribution of applications, and of their limitations and functionality. Keywords User interface, onboard computer in car, HTML 5, JavaScript
Abstrakt Tato práce popisuje problematiku použitelnosti a vývoje aplikací pro palubní počítače automobilů za pomoci stávajících webových technologií. Jako ukázka realizace budou implementována uživatelská rozhraní Tuneru a Médií, která komunikují s funkční jednotkou automobilu. Média umožňují výběr a přehrávání hudby z úložiště, zatímco Tuner slouží k výběru frekvence rádia. Součástí ix
práce je také analýza javascriptových knihoven a webových prohlížečů pro nasazení v palubním počítači. Podstatnou část analýzy zabírá také uvedení do problematiky uživatelského rozhraní aplikací v automobilech, návrh fungování distribuce aplikací, jejich omezení a funkcionalita. Klíčová slova 5, JavaScript
Uživatelské rozhraní, palubní počítač v automobilu, HTML
Tržby Škoda Auto, a.s. v letech 1998-2013 . . . . . . . . . . . . . Počet zaměstnanců Škoda Auto, a.s. v letech 1998-2013 . . . . . . Dodávky zákazníkům Škoda Auto, a.s. v letech 1998-2013 . . . . .
2.1
Srovnání délky životního cyklu mezi generacemi automobilů Bayerische Motoren Werke (BMW) a telefonů Apple . . . . . . . . . . . . . . 11
3.1 3.2 3.3 3.4 3.5 3.6
Ukázka rozhraní QNX v automobilu . . . . . . Ukázka rozhraní CarPlay v automobilu . . . . Ukázka rozhraní Connected Car v automobilu . Schéma funkcionality Two-Way Data Binding . Podpora HTML 5 standardů a specifikací mezi hlížeči . . . . . . . . . . . . . . . . . . . . . . . Stavový diagram aplikace . . . . . . . . . . . .
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11
Často opakující se elementy – tlačítka . . . . . . . . . Často opakující se elementy – seznam položek . . . . . Schéma komunikace . . . . . . . . . . . . . . . . . . . Ukázka rozpoznávání řeči . . . . . . . . . . . . . . . . Ukázka možností změn vzhledu při přehrávání hudby . Ukázka možností změn vzhledu úvodní obrazovky . . Struktura souborů klientské aplikace . . . . . . . . . . Ukázka zobrazení seznamu adresáře v aplikaci . . . . . Ukázka zobrazení úvodní obrazovky Tuneru v aplikaci Ukázka zobrazení manuálního ladění Tuneru v aplikaci Ukázka zobrazení počasí v aplikaci . . . . . . . . . . .
Úvod Škoda Auto, a.s. (dále jen Škoda) zkoumá možnosti tvorby uživatelského rozhraní pro palubní počítače svých automobilů. Současné řešení, které je dodáváno externími firmami, není zcela vyhovující. Obtížně se v něm například provádějí uživatelská testování a společné prvky implementace jsou vytvořeny duplicitně každým dodavatelem zvlášť. Z těchto důvodů by Škoda chtěla vylepšit proces vývoje uživatelského rozhraní. V budoucnu by pak mohla vytvářet uživatelská rozhraní sama. Webové technologie jsou dobře zdokumentované a existuje okolo nich velká komunita vývojářů. Díky tomu zde vzniká konkurenční prostředí a lze předpokládat, že vývoj založený na této platformě bude výrazně levnější, než při použití jiných, méně rozvinutých technologií. V první části práce bude shrnuto několik klíčových informací o zadavatelské firmě Škoda, podrobně vysvětlím cíle, kterých chci dosáhnout a důvody, jež vedly k vytvoření této práce. Na stránkách další kapitoly bude popsána analytická část, kde čtenáře uvedu do obecné problematiky vývoje aplikací pro automobily. Popíši zde charakteristiky uživatelského rozhraní palubního počítače a srovnám je s dalšími zařízeními. Následovat bude analýza javascriptových knihoven potřebných pro vývoj implementační části práce a vyběr vhodného webového prohlížeče, jenž bude doporučen k nasazení na cílové platformě. V implementační části budou vytvořeny tři moduly webové aplikace: • Média – přehrávač hudebních souborů • Tuner – ladění a streamování rádia • Počasí – získání informací o aktuálním počasí na základě geolokace Uživatelská rozhraní těchto modulů budou vycházet z reálné předlohy, kterou představuje palubní počítač Škoda. Budou zde také implementovány další dvě varianty uživatelského rozhraní, na nichž budou ukázány možnosti změn vzhledu výsledné aplikace, při zachování stejné struktury šablon. 1
Úvod Jelikož cílovou platformou pro budoucí aplikaci má být automobil, zaměřím se také na implementaci alternativních způsobů ovládání s důrazem na co nejmenší odpoutávání pozornosti během řízení automobilu. Součástí práce bude také server obsluhující požadavky přicházející z klientské části. Ten bude simulovat získávání dat z funkční jednotky automobilu za účelem jejich poskytování uživatelskému rozhraní.
2
Kapitola
O Škoda Auto, a.s. Škoda Auto, a.s. se sídlem v Mladé Boleslavi v České republice patří k nejstarším automobilkám na světě [4]. Počátky společnosti sahají do roku 1895, kdy Václav Laurin a Václav Klement vytvořili podnik, který spolu se společností Tatra položil základy více než stoleté tradice výroby českých automobilů. V roce 1991 se Škoda připojila ke koncernu Volkswagen a od té doby se jí podařilo trojnásobně navýšit produkci automobilů [47]. V současné době Škoda vyrábí 7 modelů: Citigo, Fabia, Rapid, Octavia, Superb, Roomster a Yeti.
1.1
Hospodaření firmy
Škoda je největším českým výrobcem automobilů a od roku 2010 je také největší firmou České republiky dle tržeb [39]. V roce 2012 měla Škoda Auto, a.s. tržby 268,5 mil. Kč. Zaměstnávala po celém světě 26 400 lidí a podílela se 7,3 % na celkovém exportu ČR1 . [47] Škoda operuje ve světě na 104 trzích a vyrábí se mimo Českou republiku také na Slovensku, Ukrajině, v Rusku, Indii, Číně nebo v Kazachstánu. Firma exportuje z České republiky 89 % své produkce. [47] V roce 2012 Škoda prodala svým zákazníkům 939 202 automobilů. Nejvíce vozů (235 674) se v roce 2012 prodalo v Číně, na druhém místě je Německo (132 580) a poté Rusko (99 062). Česká republika byla čtvrtým nejdůležitějším trhem firmy s prodejem 59 674 vozů. Nejvýznamnější nárůst prodeje oproti roku 2011 byl zaznamenán v Rusku, kde se prodeje zvýšily o 33,7 % (změna o 24 988 vozů). Největší propad nastal v Nizozemí, kde klesly prodeje o 21,2 % (změna o 4 424 vozů). Největším trhem firmy je region západní Evropy. V růstové strategii firmy však hrají zásadní roli regiony Číny a Indie, kde trh ještě není tak nasycen jako v Evropě a poptávka po vozech stále roste. [49] 1
V České republice Škoda zaměstnává 3 % pracovních sil země.
3
1
1. O Škoda Auto, a.s.
Obrázek 1.1: Tržby Škoda Auto, a.s. v letech 1998-2013 [50]
Obrázek 1.2: Počet zaměstnanců Škoda Auto, a.s. v letech 1998-2013 [50]
V roce 2012 se ve světě vyrobilo přes 60 milionů osobních automobilů [12][44]. Z celkového pohledu světové produkce Škoda vyrobila cca 1,5 % všech osobních automobilů. Veškerá světová produkce automobilů (včetně nákladních) v roce 2012 činila 84 141 209 kusů. V té Škoda představuje podíl 1,12 %. Především díky Škodě a dále také díky Toyota Peugeot Citroën Automobile (TPCA) a Hyundai Motor Manufacturing Czech (HMMC) je Česká republika 15. největším výrobcem motorových automobilů na světě. [36] V České republice měla Škoda v roce 2013 podíl na trhu 30,33 %, ve střední 4
1.2. Úspěchy firmy
Obrázek 1.3: Dodávky zákazníkům Škoda Auto, a.s. v letech 1998-2013 [50]
Evropě2 19 % a v celé Evropě pak 3,2 %.
1.2
Úspěchy firmy
V roce 2009 byl vůz Škoda Superb vyhlášen prestižním Top Gear Magazinem titulem „Luxury Car of the Year“ (Luxusní auto roku) a Škoda Yeti titulem „Family Car of the Year“ (Rodinné auto roku). [43] Škoda získala v roce 2011 ocenění (již po 11.) ve švýcarském časopise „Auto Illustrierte“ pro nejlepší automobil v kategorii cena/kvalita a v německém časopise „Auto Motor und Sport“ získal Superb první místo v anketě nejlepších automobilů 2012 s více než 22 % hlasů v kategorii dovezených automobilů. [43] V roce 2013 při srovnání pěti set firem s největším obratem ve střední Evropě3 , podle žebříčku Delloite, byla vyhlášena Škoda největší výrobní firmou. V celkovém pořadí pak skončila na třetím místě. [8]
2
Podle Škody zahrnuje střední Evropu: Česká republika, Slovensko, Polsko, Maďarsko, Slovinsko a Chorvatsko [48]. 3 Podle Delloite zahrnuje střední Evropa státy: Polsko, Maďarsko, Česká republika, Ukrajina, Slovensko, Litva, Rumunsko, Bulharsko, Chorvatsko, Slovinsko, Srbsko, Lotyšsko, Estonsko, Bosna a Hercegovina, Makedonie.
5
Kapitola
Cíle práce Tato práce si klade za cíl analyzovat a popsat použitelnost webových technologií při vývoji uživatelského rozhraní v palubním počítači automobilu. Základním kamenem pro analýzu je úvod do problematiky vývoje aplikací v automobilech. Tato platforma má jistá specifika, jimiž se liší od používání ostatních zařízení. Součástí analýzy je také zhodnocení javascriptových knihoven a webových prohlížečů, použitelných pro palubní počítače automobilu. Práce bude demonstrovat realizaci vývoje uživatelského rozhraní pro moduly Médií, Tuneru a Počasí za použití „Client-server“ architektury4 . Modul Média umožňuje přehrávání hudby z úložiště, Tuner slouží k výběru frekvence rádia a modul Počasí demonstruje načítání obsahu z webového Application Programming Interface (API). V práci bude provedena analýza možností změn uživatelského rozhraní pro tyto funkcionality při zachování stejné struktury. Použití jazyků HyperText Markup Language (HTML) 5, Cascading Style Sheets (CSS) 3 a JavaScript pro vývoj Human Machine Interface (HMI) zjednodušuje testovatelnost uživatelského rozhraní. Současné řešení je outsourcováno do zahraničí a při každém požadavku na změnu uživatelského rozhraní je potřeba vytvořit požadavek a počkat na nové vydání aplikace, které probíhá ve čtrnáctidenních cyklech. Posledním cílem práce je definice rozhraní pro komunikaci mezi funkcemi palubního počítače (server) a uživatelským rozhraním (klient). Výstup diplomové práce je realizován jako simulace na stolním počítači, jehož klientská část je zobrazena ve webovém prohlížeči a komunikuje se serverem simulujícím funkční jednotku automobilu. Do budoucna má Škoda v plánu vytvořit platformu, která bude umožňovat provoz webové aplikace a její serverová část bude přímo součástí funkční 4
Jedná se o typ síťové architektury, kde je aplikace rozdělena do dvou částí, které spolu komunikují přes počítačovou síť. V případě této aplikace je klientskou částí uživatelské rozhraní. Serverová část slouží jako simulace, která dokáže poskytovat data z funkční jednotky automobilu.
7
2
2. Cíle práce jednotky automobilu.
2.1
Motivace
S příchodem dotykového telefonu iPhone v roce 2008 se začal měnit způsob, jakým lidé nahlížejí na ovládání mobilního telefonu a také se uskutečnila změna distribuce digitálního obsahu do těchto zařízení. Výrobce telefonu Apple si uchoval plnou kontrolu nad prodejem digitálního obsahu5 a navíc dokázal tento proces výrazně zjednodušit. Už bylo například snazší koupit si mobilní aplikaci, než pořizovat její nelegální kopii, jak tomu bývalo dříve. S postupem času se ukázalo, že tento způsob distribuce je velmi efektivní – přináší řadu výhod, maximalizuje zisk a také kontrolu nad aplikacemi. Díky tomu se tento způsob rozmohl mimo operační systém iOS, prakticky na všechny dnes používané mobilní platformy – Android, Windows Phone a BlackBerry. Mimo telefony a tablety už se tento způsob rozšířil z části i do počítačů nebo „chytrých“ televizí. Trendy v oblasti rozvoje palubních počítačů v automobilech se pravděpodobně budou ubírat podobným směrem jako zmíněné mobilní platformy. Výrobce auta bude poskytovat své API pro přístup k povoleným funkcím automobilu a bude možno pro palubní počítač vyvíjet aplikace třetích stran. V případě automobilů bude nutné důsledně kontrolovat aplikace a mít dohled nad jejich distribucí. Proto se jeví výše popsaný způsob distribuce jako vhodný i v případě výrobců automobilů. U velkých koncernů, které vyrábějí více značek automobilů6 , by bylo možné používat jednu platformu aplikací pro všechny značky v koncernu. To je pro výrobce velmi výhodné z důvodu, že počet aplikací bude narůstat výrazně více, než pokud by byly platformy roztříštěné. Dalším důvodem je také to, že pokud člověk nakoupil aplikace k jedné platformě, má větší motivaci zůstat věrný stejné značce (respektive koncernu). Pro Škodu je důležité v této době získat povědomí o možnostech realizace aplikací pro automobily, zjistit jaká platforma je vhodná pro vývoj a udržet krok s ostatními automobilkami nebo ještě lépe, začít v tomto oboru inovovat.
2.2
Webové technologie v palubním počítači auta
Cílem této práce je především prozkoumat použití již existujících webových technologií k realizaci aplikací pro automobily a vytvořit demonstrativní aplikaci. Použití webových technologií v tomto odvětví je výhodné z několika důvodů: 5
Digitálním obsahem může být hudba, video, software nebo hry. Jako například Volkswagen Group, do jehož koncernu patří například: Škoda, Volkswagen, Audi, Porsche, Bentley, Seat, Lamborghini, Bugatti, MAN, Scania a několik dalších automobilek. 6
8
2.2. Webové technologie v palubním počítači auta • Jedná se o univerzální a dobře popsané technologie Webové technologie jsou úspěšně používány v řadě jiných oborů, které nemusejí plně souviset s jejich původním záměrem. Příkladem budiž například propojení dat na Internetu do uspořádané struktury pomocí Linked Data anebo vývoj aplikací na bázi HTML 5 a JavaScriptu, například pro mobilní operační systém Firefox OS7 . • Vývoj je řízený World Wide Web Consortium (W3C) W3C je mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web. [42] W3C publikuje mimo jiné seznam doporučení pro automobilový průmysl ve spojitosti s nasazením platformy na bázi webových technologií (Web and Automotive). Cílem této skupiny je vytvoření jednotných standardů pro automobilová API. V současné době je v této skupině zapojena řada významných firem. Z automobilových výrobců je to například BMW nebo Toyota. Mimo automobilové výrobce se o tento obor zajímá řada dalších technologických firem, jako například Intel, Samsung nebo Vodafone. Při psaní této diplomové práce jsem vycházel mimo jiné i z poznatků skupiny W3C Web and Automotive. Více informací o skupině lze nalézt na jejich oficiálních stránkách8 . • Rozsáhlé možnosti technologií HTML 5 nabízí mnoho zajímavých API, které lze využívat. Zajímavé z hlediska využití v automobilech může být API pro rozpoznávání hlasu nebo geolokaci. Webové technologie také nepředepisují jasnou architekturu a je na vývojářích, který způsob zvolí. • Snadná změna vzhledu aplikace pomocí CSS Tato vlastnost je velmi důležitá především kvůli tomu, aby bylo možné vytvořit aplikace, kde půjde snadno změnit uživatelské rozhraní pouze za pomoci CSS, bez nutnosti zasahovat do dalších součástí aplikace. To se může hodit například v případě, kdy jsou vyvíjeny aplikace v rámci jednoho koncernu s důrazem na personalizaci pro každou značku. Struktura i veškerá aplikační logika zůstává stejná, ale pro každého automobilového výrobce v koncernu se mění CSS, aby se odlišil vzhled. V případě Volkswagen Group, kde se nachází více než 12 automobilových výrobců, by tento faktor mohl být velmi důležitým kritériem pro výběr technologie. • Řada existujících vývojových prostředí pro webové aplikace V dnešní době je dostupná celá řada nástrojů pro vývoj webových aplikací, navíc s mnoha pluginy, jež dokáží vývoj ještě více usnadnit. 7
HTML aplikace lze překládat do nativních mobilních platforem například i pomocí nástroje Phonegap (http://phonegap.com). 8 http://www.w3.org/wiki/Web_and_Automotive
9
2. Cíle práce Z používaných Integrated Development Environment (IDE) pro webové technologie lze zmínit například NetBeans, Eclipse nebo PhpStorm. Vyvíjet je ale možno de facto v jakémkoliv textovém editoru. • Snadná optimalizace při použití více rozlišení displejů CSS ve verzi 3 podporuje tzv. „Media queries“. Díky nim lze snadno přizpůsobovat zobrazení stránky v závislosti na velikosti obrazovky. Stránka pak může být optimalizovaná pro malé i velké displeje. • Mnoho knihoven pro aplikace Pro tvorbu aplikační logiky nebo dynamických prvků uživatelského rozhraní bývá potřeba řada rozšiřujících nástrojů. V případě webových technologií se často pro tvorbu aplikační logiky používá jazyk JavaScript. Ten je podle Githubu nejrychleji se rozvíjejícím jazykem, co se knihoven týče [25][1]. Je často výhodné při vývoji použít již existující knihovny, namísto vytvoření vlastní implementace. • Velká základna programátorů a firem se zkušenostmi v oboru Komunita programátorů okolo webových technologií je velmi rozsáhlá a díky velké konkurenci je v tomto oboru relativně levný vývoj, při srovnání s jinými technologiemi. • Možnost snadnější konverze již existujících webových aplikací do aplikací pro automobil a naopak • Stálost a podpora webových technologií Vzhledem k rozmanitosti a velkému rozsahu používání webových technologií budou pravděpodobně současné technologie podporovány ještě po dlouhou dobu v relativně ustálené podobě. Životní cyklus aplikací zpravidla nebývá stejně dlouhý jako životní cyklus auta. Spotřební elektronika, jako například telefony, mají kratší životní cyklus než automobily, ale zároveň je tento cyklus delší, než vývoj jednotlivých verzí aplikace. To je důvod, proč musí být technologie pro vývoj aplikací v automobilech dostatečně stabilní a bez velkých změn mezi generacemi. Řešení, kdy se implementuje HMI za použití webových technologií má i své nevýhody. Velkou nevýhodou je vyšší náročnost na hardware než při implementaci pomocí méně abstraktních jazyků (například C/C++). HTML 5 bylo například použito k vývoji multiplatformní aplikace pro Facebook. Podle jeho zakladatele, Marka Zuckerberga, bylo použití HTML jednou z největších chyb při vývoji jejich mobilní aplikace pro telefony [24].
2.3
Současné řešení
Současné řešení uživatelského rozhraní, které používá Škoda, je dodáváno mnoha firmami ze zahraničí. Jejich software je vyvíjen jako uzavřený software a každý z dodavatelů díky tomu používá pro stejné komponenty HMI 10
2.3. Současné řešení
Obrázek 2.1: Srovnání délky životního cyklu mezi generacemi automobilů BMW a telefonů Apple [7]
vlastní implementaci. Například klasický seznam položek, který se používá v seznamu skladeb v Médiích, nebo v seznamu rádií u Tuneru, nemusí být implementován jako stejná komponenta. Nevýhodou je, že jakékoliv požadované změny musejí být realizované přes externího dodavatele. Kvůli tomu například není možné testovat malé změny uživatelského rozhraní přímo ve Škodě. V případě, kdy by HMI dodávala rovnou Škoda, se nemusí platit jeho vývoj v rámci každé komponenty zvlášť a implementace pak bude jednotná. Externí firmy potom mohou dodávat Hardware (HW), Software (SW), Operation System (OS), ovladače, funkční část a rozhraní pro výměnu dat.
11
Kapitola
Analýza a návrh 3.1
Předpoklady pro vývoj aplikací v automobilech
Segment aplikací v automobilu má několik odlišných vlastností na rozdíl od aplikací v mobilních telefonech nebo osobních počítačích.
3.1.1
Jednoduché uživatelské rozhraní
Všechny prvky v autě mají jedno společné – snaží se uživatele co nejméně rušit. Kvůli tomu je v autě vše zjednodušeno, například oproti práci se stolním počítačem, který klade mnohem vyšší požadavky na poutání pozornosti. Je potřeba uživatele co nejméně zahlcovat informacemi, nenutit ho cokoliv číst a nevyrušovat.
3.1.2
Intuitivní ovládání
Podobně jako v předchozím bodě, hlavním účelem je uživatele co nejméně vyrušovat od řízení automobilu. Proto je potřeba klást důraz na co možná nejsnazší ovládání, co nejméně náročnou interakci s řidičem a navrhnout ovládací prvky v odpovídající velikosti, aby se do nich uživatel bez problémů trefil prstem i na dotykovém displeji. Inspiraci lze hledat například v ovládání dotykového displeje telefonu. Na co je zvyklý z tohoto zařízení mu může pomoci při ovládání palubního počítače.
3.1.3
Důraz na bezpečnost
Při analýze tvorby automobilové aplikace je naprosto zásadní klást hlavní důraz na bezpečnost. Aplikace by neměly vyžadovat soustředění a měly by řidiči pomáhat zvýšit koncentraci na jízdu, pokud to jen bude možné. 13
3
3. Analýza a návrh Aplikace provozované v palubním počítači automobilu budou muset dodržovat určitá omezení. Jinak by mohlo být velmi nebezpečné je používat. Proto je nutné nastavit určitá pravidla. Mnoho lidí za jízdy ovládá nástroje, které je přímo ovlivňují a poutají jejich pozornost. Lidé často například zadávají text v navigaci, i přes to, že při spuštění navigace potvrdili, že ji při řízení nebudou používat. Bohužel, v takových případech slovní zákazy příliš nefungují a lidé si svoji chybu uvědomí až v případě nehody. Některé aplikace by nemělo být možné ovládat9 za jízdy. Jako příklad může sloužit zákaz přehrávání videa, pokud auto nestojí na místě. Při vývoji aplikací se kromě bezpečnosti při interakci s uživatelem musí řešit také bezpečnost aplikací. Aplikace nesmí mít přístup k ovládacím prvkům auta. Bylo by pak velmi jednoduché napsat aplikaci, která by mohla tyto funkce zneužít a způsobit nehodu. Jako rozumné řešení je umožnění pouze jednosměrné komunikace, kdy automobil bude poskytovat své API aplikacím, ale aplikace nemohou posílat svá data zpět automobilu. Pomocí API bude možno načíst jen omezené množství informací, které dovolí výrobce. Také je nutné mít dohled nad aplikacemi, které lze instalovat do automobilu. Zde vzniká nebezpečí, kdy aplikace může například klamat uživatele o stavu jízdy, pokud by se podařilo vývojářům software obejít omezení a pravidla nastavená od výrobce. Do budoucna může HMI napomáhat při řízení automobilu. Minimálně může zobrazovat, který asistent je aktivní, zobrazení kamer nebo informace z jednotlivých radarů v automobilu.
3.1.4
Propojení mobilního zařízení s automobilem
Důležitou součástí automobilových aplikací je personalizace uživatele a synchronizace jeho dat. Dnešní automobily dost často dokáží využívat propojení s telefonem přes technologii Bluetooth. Hlavní výhoda tohoto propojení je v tom, že se řidič nemusí soustředit na ovládání telefonu, protože ovládání je přizpůsobené pro řízení automobilu. V případě Škody lze využít spojení telefonu a automobilu například při telefonování – seznam kontaktů je vidět na kontrolním displeji auta10 , na volantu jsou ovládací prvky a při telefonování se vypne hudba, protože se do reproduktorů přepne právě probíhající hovor. Zároveň není nutné mít vloženou Subscriber Identity Module (SIM) kartu přímo v automobilu. Další možné využití je načtení multimediálního obsahu z telefonu do přehrávače v automobilu. Synchronizace by měla být možná se všemi zařízeními, které řidič využívá. Podobně jako s telefonem by mělo být možné automobil propojit s tabletem nebo notebookem. 9 10
14
Nebo spouštět. Přímo na palubní desce, vedle tachometru.
3.1. Předpoklady pro vývoj aplikací v automobilech
3.1.5
Přihlášení k uživatelskému profilu
Vzhledem k případům, kdy s automobilem nejezdí pouze jeden řidič, by mělo být možné měnit uživatelské profily v systému. Jejich přepínání by mělo být zabezpečené, aby nešlo zneužít profil někoho jiného. Zároveň je možné vytvořit hierarchii práv, kde administrátor bude moci povolovat ostatním uživatelům jen některé činnosti. Při rozpoznávání uživatele automobilu se nemusíme omezit jen na činnosti, které snižují zneužitelnost automobilu, ale lze zde také implementovat prvky zaměřené na bezpečnost. Mezi takové například patří zamezení řízení, pokud uživatel požil alkohol, návykové látky a podobně. 3.1.5.1
Zabezpečení heslem
Toto řešení není příliš vhodné, protože je nutné psát heslo na palubním počítači, kam je velmi dobře vidět z celého automobilu. Může tedy snadno dojít k odhalení hesla jinými uživateli. 3.1.5.2
Spojení automobilu s telefonem
Mnohem lepší variantou je spojení telefonu přes Bluetooth. Pokud se telefon spáruje, automaticky se přihlásí k profilu, který je pro telefon nastavený. Může však nastat problém při ztrátě telefonu – proto je nutné myslet na mezní případy a umožňovat přihlášení i pomocí hesla. 3.1.5.3
Rozpoznávání hlasu
Metoda rozpoznávání hlasu je relativně dobrou volbou, ale mohou nastat případy, kdy uživatel nebude rozpoznán, například z důvodu nemoci nebo ztráty hlasu. Proto by určitě tato metoda měla být zkombinována s jinou (například se zadáním hesla), pro mezní případy, kdy se nepodaří rozpoznat hlas řidiče. 3.1.5.4
Otisk prstu
Otisk prstu je další relativně spolehlivou metodou pro rozpoznání uživatele. Mohou nastat případy, kdy si uživatel poškodí otisk prstu, ale těch je naprosté minimum.
3.1.6
Trh automobilových aplikací
Jak již bylo zmíněno v předchozích kapitolách, obchodní příležitosti automobilů jsou pro výrobce velmi atraktivní a je na tomto poli očekáván podobný vývoj situace jako v oblasti mobilních telefonů a aplikací. V posledních letech se osvědčil model, kdy se výrobce softwarové platformy stává i hlavním distributorem aplikací. 15
3. Analýza a návrh Díky tomu je výrobce schopen lépe ochránit uživatele aplikací před zneužitím od neověřených výrobců. V oboru mobilních aplikací musí proběhnout proces schvalování aplikace v obchodě, kdy se zkoumá vliv aplikace a chyby. U mobilní platformy Android, kde jsou aplikace nahrávány na Google Play, tento proces trvá několik hodin. V případě systému iOS, kde jsou aplikace nahrávány na App Store, trvá proces schvalování v řádu jednoho týdne. Další velkou výhodou vytvoření tohoto modelu je potenciální zisk. Pokud se výrobce rozhodne aplikaci zpoplatnit, lze vybírat procentuální podíl na zisku. Zároveň díky tomuto řešení automobilka získává přehled o tom, co uživatelé využívají. Potom lze například užitečné aplikace implementovat přímo do tovární paměti auta nebo vytvářet statistiky aplikací, které uživatelé používají. 3.1.6.1
Zisky z on-line obchodů
Je zajímavé podívat se na procentuální zisk z prodeje aplikací v on-line obchodech u firem, zabývajících se vývojem operačních systémů pro mobilní platformy, kde je tento způsob distribuce nejvíce rozšířen. V případě firmy Microsoft, tvoří zisk z Windows Store, Windows Phone Store, Xbox game and services a Bing reklamy 8 % z celkového zisku firmy. U Apple se prodej softwaru a služeb z iTunes na zisku podílí 9 %, což je stejný podíl jako v případě Googlu a jeho distribučního obchodu Google Play. [46]
3.2
Jak se liší ovládání palubního počítače od ostatních zařízení
Před realizací aplikace pro nějakou platformu je nutné uvědomit si její specifické vlastnosti, a to především v oblasti použitelnosti a ovládání. V této kapitole popisuji základní rozdíly mezi třemi typy zařízení – telefonem, stolním a palubním počítačem. Ačkoliv to nemusí být na první pohled zcela zřejmé, například telefon má s palubním počítačem mnoho společného. Ale také samozřejmě mnoho odlišného. V České republice je zakázáno používat při řízení mobilní telefony. Je však dovoleno používat palubní počítač v autě, i přes to, že odvádí řidičovu pozornost podobným způsobem jako telefon.
3.2.1 3.2.1.1
Telefon Malý displej
Velikost displejů u chytrých telefonů se v dnešní době pohybuje mezi 3"(7,62 cm) a 6"(15,24 cm). Za posledních několik let stále pokračuje trend zvětšování displejů. Co se týče velikosti displeje, některé telefony se tím již dostávají na 16
3.2. Jak se liší ovládání palubního počítače od ostatních zařízení hranici tabletu11 . Takovým telefonům se říká phablety. I tak displej těchto zařízení zpravidla nedosahuje velikosti displejů u stolních počítačů nebo notebooků. Je nutné přizpůsobit této velikosti také uživatelské rozhraní – nemělo by obsahovat prvky, které nejspíše uživatel nebude využívat a nemuselo by na ně být na malém displeji místo. 3.2.1.2
Použití prstů
Od zmizení stylusu před několika lety se člověk musí spoléhat při ovládání dotykového displeje na své prsty. Sice v nich má jemný cit, dokáže s nimi být velmi přesný, ale i tak, pokud jsou tlačítka příliš malá, těžko se dají prstem trefit. Oči totiž nevidí, kam přesně prst míří. Z tohoto důvodu je nutné dodržovat určitá pravidla, týkající se jednoduchosti uživatelského rozhraní a také velikosti ovládacích prvků. Velikost ovládacích prvků musí být mnohem větší než například u počítače, který je ovládán za pomoci myši. Paradoxně člověk, který používá počítač, má menší problém trefit se do menšího ovládacího prvku myší, než svými prsty12 . 3.2.1.3
Lidé jsou rušeni
Lidé jsou při ovládání telefonu rušeni. Často odtrhnou zrak od displeje telefonu, protože se potřebují soustředit na jiné věci. Potřebují vyhledávat aktuální informace nárazově a nemají čas zaobírat se informacemi dopodrobna. Opět je nutné tomu uzpůsobit uživatelské rozhraní a patřičně jej zjednodušit pro lidi, kteří nemají čas nad ním příliš přemýšlet. 3.2.1.4
Malá výdrž baterie
Dnešní chytré telefony, kde většinu plochy zaujímá podsvícený displej a zařízení je neustále připojeno k Internetu, spotřebovávají velké množství energie, a proto je uživatelé musejí často nabíjet. Vývojáři aplikací i uživatelé telefonu musí myslet na to, aby příliš s energií neplýtvali. 3.2.1.5
Práce s telefonem kdekoliv
Lidé dnes dokáží používat telefon prakticky kdekoliv. Někteří jej používají při chůzi, kde musejí při jeho ovládání zároveň vnímat mnoho okolních podnětů. Zpravidla lze použití telefonů rozdělit do tří situací: • Hledání rozptýlení 11
Tato hranice nemá přesnou definici. V případě myši se používá zaměřování pomocí bodu, zatímco v případě dotyku se zaměřuje člověk plochou prstu. 12
17
3. Analýza a návrh Uživatelé se potřebují zabavit v době, kdy na něco čekají. Například při jízdě v autobuse, nebo v čekárně u doktora. Mohou si zahrát nějakou hru, poslouchat hudbu nebo se podívat na film. • Hledání informací Uživatelé se pohybují mimo stolní počítač a potřebují nalézt nějaké informace. Například zjistit otevírací dobu obchodu, jízdní řády a podobně. K těmto účelům se často využívá připojení k Internetu. • Čas na úkoly Uživatelé mají čas na vyřízení e-mailu, telefonního hovoru nebo napsání zprávy.
3.2.1.6
Pomalé připojení k Internetu
Mobilní telefony bývají používány uvnitř budov, ale i venku – tedy v místech, která nebývají pokryta lokální vysokorychlostní sítí. Veškeré služby v telefonu, které jsou závislé na připojení k Internetu, mohou být nepoužitelné, pokud není dobrý signál. Pro podobné případy je rozumné snažit se vytvořit aplikaci nezávislou na Internetu. Samozřejmě, ne vždy je to možné. V takovém případě je vhodné, snažit se minimalizovat objem dat nutných k přenesení po Internetu.
3.2.1.7
Senzory
Na rozdíl od počítačů, telefony zpravidla obsahují senzory pro detekci některých fyzikálních (technických) veličin – například gyroskop, akcelerometr, kompas nebo barometr.
3.2.2 3.2.2.1
Stolní počítač (notebook) Velký displej
Počítače zpravidla mají velké monitory ve srovnání s mobilními zařízeními. Pohybují se většinou mezi 11"(27,94 cm) a 23"(58,42 cm). Zajímavé je, že i přes větší velikost obrazovky zůstává rozlišení mnohdy podobné jako na telefonech13 . Způsob používání displeje u počítače funguje na bázi multitaskingu, kdy jsme schopni spustit více aplikací a používat je zároveň. Možnost spuštění více aplikací najednou je sice i v telefonu, ale je zde zásadní rozdíl v tom, že většinou není možné mít na displeji zobrazeno více aplikací zároveň, kvůli menší velikosti displeje. 13
18
A v mnoha případech je i menší.
3.2. Jak se liší ovládání palubního počítače od ostatních zařízení 3.2.2.2
Přesná myš / touchpad
I přes to, že v dnešní době se masově rozvíjí dotykové ovládání, tak stále ještě je dotyk velmi nepřesný a pomalý ve srovnání s myší. Jediné v čem je dotykový displej lepší je intuitivnost ovládání. Rychlost učení pro ovládání dotykového displeje pomocí prstů je vyšší než u ovládání myší nebo touchpadem [17]. 3.2.2.3
Vyžaduje soustředění
Lidé, pracující s počítačem, se zpravidla zajímají o informace více do hloubky než uživatelé jiných zařízení. Mají více času na získání povědomí o dané problematice, protože se počítač používá v jiných situacích. Uživatelé většinou s počítači nepracují na veřejnosti, ale spíše je užívají v kancelářích a jiných uzavřených místnostech. Uživatel pak není rušen vnějšími vlivy a dokáže se mnohem lépe koncentrovat na ovládání počítače. Naproti tomu, například tablet se využívá z velké části k zábavě nebo pro prezentace, či čtení. U telefonu je nejdůležitější náplní především komunikace. 3.2.2.4
Plnohodnotná klávesnice
Klávesnice je stále něco, co dotykové displeje nedokázaly efektivně nahradit. Prsty člověka potřebují cítit jasný stisk na to, aby člověk měl jistotu, že se mu podařilo zmáčknout klávesu správně. Při tréninku je možné na hardwarové klávesnici psát i bez použití zraku. To je na dotykových displejích velmi obtížné, ba skoro nemožné. 3.2.2.5
Uživatel sedí
Vzhledem k umístění počítače na stole, uživatel většinou sedí na židli a nepotřebuje se soustředit na věci, dějící se okolo něj. Díky tomu dokáže mnohem přesněji ovládat počítač, než kdyby se například snažil ovládat zařízení za chůze. 3.2.2.6
Rychlé připojení
Počítače se většinou používají v budovách, které často bývají pokryté dobrým signálem pro připojení k Internetu za pomoci bezdrátové Wireless Fidelity (Wi-Fi) sítě anebo LAN kabelem. 3.2.2.7
Složitější ovládání
Na počítači uživatel tráví mnoho času v kuse a dokáže se naučit ovládat složitější funkce počítače mnohem snáze, než u jiných zařízení, které používá nárazově. 19
3. Analýza a návrh
3.2.3
Palubní počítač
Ačkoliv je lexikálně slovo „palubní počítač“ více podobné slovu „stolní počítač“, způsob jejich používání se zásadně liší. Palubní počítač má mnohem více společného s mobilním telefonem, než se stolním počítačem. 3.2.3.1
Velký displej
Palubní počítač má větší displej než telefon, ale menší než počítač. Například v případě automobilů Škoda se dnes používá nejčastěji 6,5"displej (16,51 cm). 3.2.3.2
Jednoduché uživatelské rozhraní
Podobně jako u mobilního telefonu je zde kladen důraz na maximálně jednoduché a intuitivní uživatelské rozhraní. Toto zjednodušení neplatí pouze pro stránku ovládání, ale také pro obsah. Nemělo by tam být příliš mnoho prvků vyžadujících náročné soustředění. 3.2.3.3
Uživatel se nesoustředí
Soustředěnost řidiče musí být co možná nejvíce zaměřena na ovládání automobilu a okolní provoz. Jakékoliv odpoutání pozornosti kvůli palubnímu počítači je špatné. Palubní počítač je jen doplňkem automobilu a není zásadní pro jeho fungování. Uživatel jej používá jen proto, že mu usnadňuje nějakou činnost (například navigaci), nebo se chce při řízení zabavit (například přehráváním hudby). Případy užití palubního počítače jsou tedy podobné jako u telefonů – uživatel se potřebuje zabavit, nebo hledá nějaké informace. Dalším problémem je umístění palubního počítače. Zpravidla se nachází ve středovém panelu, kam se uživatel musí při jeho ovládání podívat. Mimo přeostření zraku je tedy pro řidiče nutné také pohnout hlavou, což je další čas navíc, o který je uživatel ochuzen při řízení. Toto může být v některých situacích zásadní. Z tohoto důvodu se v některých autech implementuje tzv. „head-up displej“, který dokáže promítat informace z palubního počítače (například navigace) nebo tachometru (například informace o rychlosti) přímo do zorného pole řidiče14 . Pozornost řidiče se pak soustřeďuje stále na vozovku a oči se neunavují přeostřováním. 3.2.3.4
Použití prstů
Uživatel používá prsty pro ovládání palubního počítače. Jeho displej nemá žádné výstupky a pro uživatele je prakticky nemožné ovládat dotykem počítač bez nutnosti podívat se na jeho obsah. 14
20
Informace bývají promítány do ohniska nad kapotu.
3.3. Příklady konkurenčních prostředí Tato situace je velmi rušivá a je potřeba snažit se ji minimalizovat. Proto je vhodné náležitě upravit uživatelské rozhraní. Ovládací prvky musí být zvýrazněné a dostatečně veliké. Texty musí být dostatečně velké, aby nebyl problém s jejich čtením. Zároveň je nutné klást důraz na jejich délku – čím kratší texty jsou, tím lépe. Nesmí to ale být na úkor jejich srozumitelnosti.
3.2.3.5
Důraz na hlasové služby a ovládání hlasem
V poslední době se stále více rozšiřují alternativní způsoby ovládání v čele s hlasovým ovládáním, které je dnes relativně spolehlivé. Jeho zásadní nevýhodou je ale rychlost. V případě, kdy například chceme pustit nějakou skladbu při přehrávání Médií, ale neznáme konkrétní název, musíme po jednom poslouchat názvy předchozích skladeb, dokud nenarazíme na nějakou, kterou chceme přehrát, což může být velmi zdlouhavé. Silnou stránkou hlasového ovládání je naopak zadávání textů. Psaní prsty na dotykovém displeji v autě je z hlediska bezpečnosti krajně nebezpečné. Problémem bývá, že mnoho lidí píše na palubním počítači za jízdy. Nové modely Škoda mají již vestavěné hlasové ovládání, které lze jednoduše aktivovat speciálním hardwarovým tlačítkem.
3.2.3.6
Nestálé připojení k Internetu
U automobilů je tato situace ještě komplikovanější než u telefonů. Automobil se zpravidla nepoužívá v dosahu lokálních sítí a je odkázán jen na síťové pokrytí operátora (a to jen v případě, kdy má SIM kartu a může přijímat datové přenosy). Navíc se rychle pohybuje, což může způsobovat výpadky nebo nestálost rychlosti připojení.
3.3
Příklady konkurenčních prostředí
V dnešní době už existují automobily, které mají uživatelské rozhraní založené na bázi HTML 5. Většina z nich je však stále ve fázi prototypu. Mezi nejznámější inovátory v této oblasti patří automobilka Porsche se svým modelem 918 Spyder, který bude prodáván v roce 2015 a obsahuje vestavěný systém založený na HTML 5. [10] Velká část automobilových výrobců používá svůj vlastní systém pro palubní počítače, který vyvíjí buď sama nebo v rámci koncernu. Existují také případy, kdy bývá použit v palubním počítači software třetích stran. Mnoho automobilek například používá operační systém QNX15 . 15
QNX CAR je na Unixu založený operační systém, který byl přizpůsoben pro využití v automobilu a je používán od roku 2004. V polovině roku 2011 používalo platformu QNX již více než 20 milionů automobilů. Rozhraní podporuje vývoj HMI na bázi Qt nebo HTML 5.
Obrázek 3.1: Ukázka rozhraní QNX v automobilu [9]
3.3.2
CarPlay
S příchodem mobilního operačního systému iOS verze 7.1 přibyla podpora funkce CarPlay. Jedná se o speciální úpravu mobilního operačního systému pro potřeby automobilu. Apple demonstroval systém CarPlay jako uživatelské rozhraní iOS, běžící na jádře operačního systému QNX. [38] Tento systém zatím podporují jen nové modely aut značek Ferrari, Honda, Hyundai, Mercedes-Benz a Volvo. V budoucnu by měly přibýt ještě například Ford, BMW, Kia, Toyota a mnoho dalších. Nejedná se o klasický operační systém pro automobil. K fungování tohoto systému je totiž potřeba vlastnit iPhone 5 nebo novější. Bez propojení s telefonem tento systém nebude fungovat. [5] V případě funkce CarPlay funkčnost systému vychází z operačního systému iOS. Pokud je s autem spárovaný telefon, lze v autě telefonovat, psát zprávy, 22
3.3. Příklady konkurenčních prostředí přehrávat hudbu nebo načítat mapy. Ovládání je řešeno jednak dotykově na displeji, ale také hlasově nebo pomocí speciálních hardwarových tlačítek.
Obrázek 3.2: Ukázka rozhraní CarPlay v automobilu [6]
3.3.3
Connected Car
Společnost Microsoft se na trhu automobilových operačních systémů pohybuje už velmi dlouho, i když v tomto odvětví nezaznamenala významné úspěchy jako v jiných oblastech. Nicméně, v současné době automobilové systémy společnosti Microsoft používají některé modely od automobilek BMW, Fiat, Ford, Kia nebo Nissan. [18] Již v roce 1998 Microsoft vydal AutoPC (společně s Clarionem), v roce 2002 Windows Embedded a v roce 2010 pak Windows Embedded Automotive. [41] Na začátku dubna 2014 se objevily zprávy o novém systému Connected Car, který bude umět spojit telefon nebo jiné zařízení, postavené na systému Windows s automobilem, podobně jako v případě CarPlay. Connected Car přinese integraci obvyklých funkcí jako je možnost telefonování, navigace, hudby, rádií, ale také podporu aplikací třetích stran. Pro možnost použití aplikace při jízdě bude nutné ji mít schválenou od Microsoftu. Ostatní bude možno používat, pokud bude automobil stát na místě. Vše by mělo být ovladatelné i pomocí hlasové asistentky Cortany16 . [18] 16
Microsoft Cortana je hlasová asistentka, využívající prvky umělé inteligence, která je
23
3. Analýza a návrh Connected Car je zatím ve fázi prototypu, nicméně, společně s CarPlay naznačuje, jakým směrem se pravděpodobně bude vyvíjet způsob propojení automobilu a mobilních zařízení.
Obrázek 3.3: Ukázka rozhraní Connected Car v automobilu [22]
3.4
Data získávaná přes API
Příležitostí k vývoji aplikací pro automobil je mnoho. Uvádím zde některá data, která by mohly aplikace získat z funkční jednotky automobilu přes API, pokud to výrobce automobilu povolí. • Rychlost jízdy – Zrychlení – Zpomalení – Zastavení • Indikace při jízdě – – – – – –
Směr jízdy Změna pruhů Pozice na vozovce Kvalita cesty Značky v okolí Okolní doprava
součástí operačního systému Windows Phone 8.1.
24
3.4. Data získávaná přes API – Lidé – Informace o aktuální lokaci – Počasí • Indikace nebezpečí – – – –
Namrzlá vozovka Špatné počasí Příliš rychlá jízda Stav intenzity venkovního světla
• Stav automobilu • Stav motoru • Klimatizace • Připojení jiného zařízení 3.4.0.1
Příklady aplikací
V případě, kdy v autě bude možno instalovat aplikace, vzniká nový trh automobilových aplikací, který přináší řadu příležitostí a také nové výzvy pro návrháře uživatelských rozhraní. Uvádím několik příkladů aplikací, které by mohly být realizovatelné. Některé z nich mohou kopírovat funkcionalitu současných palubních počítačů. • Mapy a navigace – Tipy v okolí – Vyhledávání míst • Ovládání klimatizace • Přehrávání hudby/videí V případě videa je problém, že pokud bude video přehráváno na displeji středového panelu, tak tato akce může poutat řidičovu pozornost. Proto je vhodné akci za jízdy povolit například jen pro displeje, které jsou viditelné ze zadních sedaček. • Správa aplikací V případě používání více aplikací najednou je potřeba vytvořit způsob, jakým je lze přepínat. Jako jedna z možností se nabízí využití dotykových gest. • Počasí • E-mail • Kalendář • Telefon 25
3. Analýza a návrh • Kancelářský balík • Kontakty • Hlášení o dopravní situaci • Hlášení o únavě řidiče V dnešní době se již běžně vyrábějí automobily, které dokáží monitorovat únavu řidiče. Po nastartování motoru sledují řidičovy reakce, kterými vyrovnává například protipohyby volantu. Pokud se jeho prodlevy neúměrně zvýší, může se například na displeji zobrazit upozornění. • Synchronizace s mobilním zařízením • Servisní údaje – Stav benzínu, oleje a dalších provozních náplní – Stav jednotlivých agregátů automobilu (brzdy, řízení, motor, převodovka) – Připomínky výměn a servisu • Statistické údaje – – – –
3.4.0.2
Kolik auto najelo Délka svícení světel Spotřeba Jak jezdí řidič Lze sledovat rychlost, dodržování odstupu – možnost gamifikace17 za účelem motivace ke správné a ekologické jízdě. Minimalizace hardwarových tlačítek
Díky univerzálnosti vyvíjených aplikací lze také zjednodušit středový panel v autě. Některá méně často používaná hardwarová tlačítka mohou být nahrazena specializovanou aplikací v palubním počítači. Tím se uvolní místo pro jiné prvky (například pro větší Liquid-Crystal Display (LCD) displej) a více se sjednotí ovládání. Toto sjednocení ale naopak může přinést řadu dalších problémů, pokud bude původní funkcionalita špatně dostupná. 3.4.0.3
Reklama
V dnešním světě, kde reklama hraje významnou roli při prodeji výrobků a služeb, je naivní si myslet, že reklama nezasáhne i do aplikací, které jsou v automobilech. Ačkoliv může být její nasazení v automobilech nebezpečné, je třeba si uvědomit, že billboardy okolo silnic poutají pozornost řidiče podobně 17
Gamifikace označuje užívání herních prvků v neherních prostředích. Využívá se pro ovlivňování chování cílové skupiny lidí k dosažení zamýšleného výsledku pomocí pozitivního ohodnocování specifické interakce. [33]
26
3.5. Konfigurace cílového stroje nebezpečným způsobem a často zakázané nejsou. Obchod s aplikacemi v rukou výrobce automobilu dává výrobci možnost regulovat reklamu v aplikacích. V případě automobilů pravděpodobně bude reklama součástí externích aplikací, které nebudou distribuovány výrobcem automobilu. Reklama totiž může působit na lidi negativně a není v zájmu automobilových výrobců s ní příliš obtěžovat své zákazníky. Formou reklamy v autě může být zobrazení na displeji nebo například hlasová reklama, podobně jako v rádiu. Obojí sice řidiče může obtěžovat, ale v případě hlasové reklamy se jedná o méně nebezpečný prvek než u reklamy animující se na středovém displeji18 . V případě displejů pro zadní sedadla už není problém se zobrazením reklamy na displeji, protože osoby sedící na zadních sedadlech nejsou zodpovědné za řízení automobilu.
3.5
Konfigurace cílového stroje
Konfigurace stroje, na kterém má v budoucnu běžet webová aplikace, jenž je obsahem této práce, zatím není známa. Jasné je pouze to, že v prototypu bude displej s rozlišením 800 x 480 pixelů, který je dnes používaný jako de facto standard v koncernu Volkswagen Group. Velikost displeje může být až 8". Pravděpodobným adeptem na Central Processing Unit (CPU) v palubním počítači bude i.MX6, postavený na Advanced RISC Machine (ARM) architektuře. Výběr hardwaru pro cílový stroj bude ještě podrobněji specifikován v další fázi vývoje a bude přizpůsoben podle požadavků platformy. V koncernu jsou palubní počítače rozděleny do tří úrovní, podle použití. Palubní počítač s nejvyšší výbavou spravuje společnost AUDI Aktiengesellschaft (AG), střední výbavu spravuje Volkswagen AG a základní výbavu má ve své kompetenci Škoda.
3.6
Analýza javascriptových knihoven
Vývoj aplikací na bázi HTML 5 úzce spolupracuje s JavaScriptem. Použití tohoto jazyka ale bývá v některých případech zbytečně komplikované nebo omezené. JavaScript sám o sobě například neřeší architekturu aplikace a práce s uživatelským rozhraním aplikace nebývá zcela jednoduchá. S použitím vhodných knihoven se dají tyto problémy minimalizovat. Navíc při použití specializovaných knihoven bývá psaní kódu výrazně efektivnější. 18 Na rozdíl od zobrazení reklamy na displeji, hlasová reklama nepoutá oči řidiče, ale jeho mozek.
27
3. Analýza a návrh
3.6.1
Výběr javascriptových knihoven k testování
Na základě konzultací jsem rozpracoval analýzu tří odlišných knihoven, u kterých budu analyzovat vhodnost pro použití v palubním počítači automobilu. Zvolil jsem následující kritéria pro výběr knihovny: • Účel Důležitým faktorem je účel, k jakému knihovna slouží. Existují knihovny uzpůsobené pro vývoj uživatelského rozhraní, pro implementaci zvolené architektury, pro práci s Document Object Model (DOM), pro optimalizaci mezi prohlížeči nebo například pro tvorbu grafiky. Z tohoto hlediska nás zajímá především knihovna pro tvorbu uživatelského rozhraní a Model, View, Controller (MVC) architektury. [30] • Rozvinutá komunita U rozvinuté komunity, která knihovnu aktivně využívá, zpravidla existuje mnoho rozšíření, které dokáží rozšiřovat její funkčnost. Také zde bývá snazší řešit problémy, které mohou vzniknout při používání knihovny. • Kvalitní dokumentace Důležitým prvkem je kvalitní a obsáhlá dokumentace s příklady, kde se nevyskytují chyby nebo neaktuální informace. • Aktivní vývoj knihovny Knihovna by měla být stále v pokračujícím vývoji, aby mohla reagovat na vývoj nových standardů, technologií a opravovat nalezené chyby. • Snadnost použití Rychlost učení a jednoduchost práce s knihovnou je důležitým prvkem při výběru. Čím rychleji se lze knihovnu naučit, tím lépe. • Snadná čitelnost kódu Snadná čitelnost kódu pro vývojáře a oddělení jednotlivých vrstev v JavaScriptu je velmi důležité. • Délka kódu Čím kratší implementace je, tím lépe. • Open source licence Pro případy, kdy je nutné knihovnu upravit a znovu použít, je vhodné vybrat knihovnu s open source licencí.
3.6.2
JQuery
JQuery patří mezi nejoblíbenější javascriptové knihovny vůbec. Bylo představeno Johnem Resignem 26. sprna 2006. Ač je jQuery jednou z nejpoužívanějších javascriptových knihoven, nejedná se o knihovnu, vymezující jasnou architekturu aplikace. 28
3.6. Analýza javascriptových knihoven Tato knihovna se snaží oddělit chování aplikace od struktury HTML a zjednodušit používání JavaScriptu. Například místo specifikace on–click přímo v HTML kódu by stránka řízená jQuery napřed našla vhodný element tlačítka a potom změnila jeho manipulátor události [35]. 3.6.2.1
Výhody knihovny
Jednoduchost použití JQuery je velkým usnadněním pro vývoj v jazyce JavaScript. Psát syntaxi je výrazně jednodušší a rychlejší než u klasického JavaScriptu. Asi největší usnadnění přinášejí zjednodušené selektory pro výběr elementu v DOM a snadnou obsluhu událostí. Velká komunita Právě díky své jednoduchosti použití se stalo jQuery tak oblíbené, jak v současné době je. V roce 2012 používalo tuto knihovnu více než 58,8 % stránek mezi 10 000 nejpopulárnějšími weby [29]. Vynikající dokumentace S rozsáhlou komunitou souvisí také to, že knihovna má velmi obsáhlou a dobře popsanou dokumentaci, a to včetně mnoha ukázkových příkladů. Velké množství pluginů Komunita okolo jQuery nabízí k používání několik tisíc pluginů. Většina z nich je shromážděna na webu19 pod open source licencí. Kompatibilita mezi prohlížeči V případě běžné implementace JavaScriptu je nutné brát v potaz rozdíly mezi prohlížeči, které JavaScript interpretují rozdílně. Při používání jQuery je tento problém výrazně menší. Pro použití v palubním počítači automobilu pro nás toto kritérium není klíčové. Podpora technologie Asynchronous JavaScript and XML (AJAX) JavaScript umožňuje používat objekt XMLHttpRequest, který umožňuje jednoduše zasílat asynchronní požadavky na server. Před příchodem jQuery se musel řešit rozdíl implementace mezi jednotlivými prohlížeči. Jen samotná inicializace objektu bez použití jQuery byla složitější než samotný požadavek: var xmlhttp; if(window.XMLHttpRequest) { // Inicializace objektu pro IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // Inicializace objektu pro IE6, IE5 xmlhttp=new ActiveXObject(’Microsoft.XMLHTTP’); }
V jQuery je celý proces zaslání požadavku na server mnohem jednodušší: 19
http://plugins.jquery.com
29
3. Analýza a návrh var request = $.ajax({ url: "script.php", type: "POST", data: { id : menuId }, dataType: "html" });
Efekty a animace Implementace animací v běžném JavaScriptu není vůbec jednoduchá. S pomocí jQuery je zde práce programátora velmi zjednodušena: $( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { // Funkce, ktera je zavolana po provedeni animace });
jQuery UI JQuery nabízí mimo mnoha externích pluginů také hotovou knihovnu uživatelského rozhraní k webovým aplikacím. Na webu lze vygenerovat kompletní balík se speciálními widgety, interakcemi nebo efekty. K tomu je navíc přibalena sada ikon a stylů, které lze na webu snadno nakonfigurovat tak, aby graficky seděly ke zbytku aplikace. DOM selektory na bázi XPath Jedna z nejčastěji používaných věci v JavaScriptu je selekce DOM elementů. V klasickém JavaScriptu byl tento výběr dost nepřehledný díky dlouhým a omezeným funkcím pro výběr elementu: var logo = document.getElementsByClassName(’logo’); var table = document.getElementById("table"); var cells = table.getElementsByTagName("td");
V jQuery je tento výběr značně jednodušší a univerzálnější: var logo = $(".logo"); var table = $("#table"); var cells = table.find("td");
Navíc jQuery umožňuje na rozdíl od běžného JavaScriptu používat snadno další selektory inspirované jazykem XML Path Language (XPath) a CSS selektory: // Znaci prvni td prvek primeho potomka tr v~elementu s~id table var firstItemInTable = $("#table tr > td:first-child"); // Vybere sude radky v~tabulce s~id table var evenRows = $("table#table tr:even"); // Odkazy, kde atribut target nema hodnotu "_blank" var linksWithoutNewWindow = $("a[target!=’_blank’]");
30
3.6. Analýza javascriptových knihoven Události V klasickém JavaScriptu je u událostí opět nutné řešit rozdílnou implementaci mezi prohlížeči. var table = document.getElementById("table"); if (table.addEventListener) { // Prohlizece podporujici DOM Level 2 table.addEventListener(eventType, handler, false); } else if (table.attachEvent) { // IE <= 8 table.attachEvent(’on’ + eventType, handler); } else { // Stare prohlizece table[’on’ + eventType] = handler; }
Implementace událostí v jQuery je výrazně snazší: $( "#table" ).click(function() { // Kod, ktery se provede po kliknuti na prvek s~id table });
Open source jQuery je šířeno pod svobodnou Massachusetts Institute of Technology (MIT) licencí. Je možno jej používat v jakýchkoliv projektech (včetně těch komerčních), pokud zůstane zachována hlavička s copyrightem v jQuery knihovně. 3.6.2.2
Nevýhody knihovny
Složité debugování Pokud skripty kooperují mezi sebou, bývá velmi těžké v nich najít chyby. Neexistuje na to žádný univerzální nástroj. Zpětná nekompatibilita JQuery ve verzi 2.0 upouští od zachovávání kompatibility se staršími prohlížeči20 a také se staršími verzemi jQuery. Skripty napsané pro starší verzi jQuery tedy nemusí fungovat ve verzi nové. Toto přináší mnoho problémů při použití pluginů, které nejsou aktualizovány pro novější verze jQuery. Nepřehlednost JQuery nemá žádnou jasně definovanou architekturu. U větších aplikací může snadno docházet k problémům se závislostmi a nepřehledností. 3.6.2.3
Shrnutí
JQuery je velmi univerzální knihovnou, která dostačuje na drtivou většinu problémů, u nichž není vyžadována příliš rozsáhlá interakce s JavaScriptem. 20 V tomto případě to není zajímavé, protože aplikace bude provozována na jednom konkrétním prohlížeči.
31
3. Analýza a návrh Knihovna dobře řeší obvyklé problémy s nekompatibilitou, zjednodušuje používání JavaScriptu a zaměřuje se na oddělení JavaScriptu od struktury dokumentu. JQuery není vyvíjeno s důrazem na složitější architekturu aplikace (jako například MVC). V případě potřeby použití MVC architektury, je vhodné zvolit nějakou specializovanější knihovnu. Základem této knihovny jsou pluginy – jsou jeho největší výhodou, ale i nevýhodou. Existuje jich obrovské množství, ale při nadbytečném používání se kód aplikace stává nepřehledným a nekonzistentním. Mnoho z nich je také navázáno na konkrétní verze jQuery a příchodem novějších přestávají fungovat. Nejnovější verze jQuery tedy nejsou zcela kompatibilní se staršími. Velké usnadnění knihovna přináší také při využívání rozšířených prvků pro uživatelské rozhraní, za pomoci jQuery UI.
3.6.3
AngularJS
AngularJS je open source javascriptová knihovna, která je spravována společností Google. Jeho hlavním cílem je rozšíření JavaScriptu o architekturu MVC ve webových aplikacích a zmenšení velikosti javascriptového kódu. 3.6.3.1
Výhody knihovny
Knihovna vycházející z MVC V případě MVC se jedná o softwarovou techniku, která rozděluje datový model aplikace, uživatelské rozhraní a řídící logiku do tří nezávislých komponent, kde změna jedné z nich bude mít jen minimální vliv na ostatní. [37] Single page aplikace Jednou z velkých předností AngularJS je specializace na tzv. „Single page aplikace“. Jedná se o aplikace, které jsou napsané v JavaScriptu, který obsahuje veškerou jejich funkční logiku a nenačítají se formou přepínání HTML stránek. Pro uživatele je pak načítání stránek výrazně příjemnější a plynulejší než tomu bývá obvykle – nedochází totiž k překreslování celých stránek. Aplikace se kompletně načte při prvním otevření a pak už komunikuje se serverem pomocí AJAXu. Single page aplikace mají velkou výhodu, že při nich dochází jen k minimální zátěži na serveru ve srovnání s obyčejnými aplikacemi. Veškerá aplikační logika je napsána pomocí JavaScriptu, který je zpracováván na straně webového prohlížeče u klienta. Two-Way Data Binding AngularJS dokáže automaticky řešit synchronizaci stavů mezi modelem a view (pohledem). Jelikož se jedná o často používanou funkci, Two-Way Data Binding dokáže výrazně snížit objem kódu potřebného pro manuální synchronizaci dat mezi modelem a view. Jednoduchý příklad Two-Way Data Binding může vypadat takto: 32
AngularJS tento kód zpracuje tak, že pokud do textového pole cokoliv napíšeme, tak se automaticky provede aktualizace pozdravu v tagu h1. Realizace v AngularJS probíhá tak, že v tagu html nastavíme atribut ng-app, kterým říkáme, že na této stránce má být knihovna využívána. Nastavením atributu ng-model="name" v tagu získáváme do modelu hodnotu textového pole. Tu můžeme jednoduše zobrazovat pomocí {{name}}. V případě úpravy textového pole se automaticky synchronizuje model, aniž bychom se o to museli starat. [3] V případě, kdy realizujeme synchronizaci pomocí jQuery, je tento problém složitější. Ve struktuře musíme vše označit pomocí id atributů: <script src="http://code.jquery.com/jquery-1.11.0.min.js"> <script src="script.js">
Hello <span id="name-placeholder">!
Mimo definované struktury musíme ještě vytvořit ovládací skript v JavaScriptu (script.js) pro synchronizaci textového prvku se span elementem. $(document).ready(function(){ $(’#name’).change(function(){ $(’#name-placeholder’).val($(this).val()); }); });
33
3. Analýza a návrh
Obrázek 3.4: Schéma funkcionality Two-Way Data Binding
V případě, kdy bychom chtěli vypsat obsah pole na více místech, bychom museli pro každou změnu neustále upravovat obsah funkce. Tím výrazně narůstá složitost, nepřehlednost a délka kódu. Velikost kódu Oboustranná synchronizace je u větších javascriptových knihoven velmi častá. I pro jednoduchý příklad, který je vidět výše, už bylo díky Angularu ušetřeno několik řádek kódu. Proto se také uvádí, že AngularJS dokáže snížit množství kódu i na 10 % z původního množství. Tak tomu bylo v případě několika interních Google aplikací. Například v aplikaci Feedback se díky AngularJS snížil počet řádek z původních 16 000 napsaných v Javě Google Web Toolkit (GWT) na 1000 řádků v JavaScriptu a AngularJS. [20] Dependency injection [20] Dependency injection je návrhový vzor, který řeší závislost mezi jednotlivými komponentami programu. AngularJS obsahuje systém, který umožňuje vždy přesně specifikovat, jaké další komponenty jsou uvnitř konkrétní komponenty používané. function PagesShowCtrl($scope, $routeParams, $location, page) { // Controller }
34
3.6. Analýza javascriptových knihoven Do controlleru se při vytvoření předávají 4 parametry, přes které se předávají závislosti. Z žádnými jinými závislostmi se uvnitř controlleru nepracuje. Díky tomu lze aplikace lépe testovat. • $scope – řeší kontext dat a je důležitý pro koncept data bindingu, kdy se synchronizují data • $routeParams – pracuje s parametry v Uniform Resource Locator (URL) • $location – umožňuje práci s URL • page – služba, kterou jsme si vytvořili a která slouží k dotazování na Representational State Transfer (REST) API stránek aplikace Direktivy [45] Direktivy v AngularJS jsou označovány jako tzv. „kotvy“ na pozadí, které spojují HTML s pluginy, izolovanými od aplikace. Jsou navrženy tak, aby neměnily logiku controlleru nebo modelu, ale aby pomáhaly s konstrukcí webové stránky. Jsou ideální pro pluginy, validace nebo pro překlady textů a podobné služby. angular.directive(’myDirective’,function($compile) { return { // Obsah sablony muze byt stahnut a vytvoren v~elementu templateUrl : ’/path/to/some/template.html’, // Maji se nahradit vnorena data v~elementu? replace : true, // Samotna logika direktivy link : function($scope, $element, attributes) { // Ukazka prirazeni do promenne $scope, na ktere probiha TwoWay Data Binding $scope.title = ’...’; } }; });
Pokud AngularJS narazí na HTML tag který obsahuje jako atribut data-my-directive (na hodnotě nezáleží), stáhne šablonu a vykoná linkovací funkci. Možnost kombinace s jinými knihovnami [45] AngularJS nemá problémy při spolupráci s jinými knihovnami. Je optimalizován především pro součinnost s jQuery, kde stačí pouze vložit jako první knihovnu jQuery a až poté teprve AngularJS. AngularJS používá JQLite k ovládání DOM a nezáleží plně na jQuery. Pokud bude jako první knihovna vložena jQuery, pak AngularJS bude používat selekci z jQuery namísto JQLite. AngularJS je vyvíjen firmou Google a díky tomu je optimalizován také pro použití knihovny Google Closure. 35
3. Analýza a návrh V případě další populární knihovny MooTools je problém s přístupem k elementům. Je nutné vložit MooTools knihovnu do webové aplikace až po AngularJS a zároveň je třeba nastavit vlastní implementaci selektoru: var $moo = function(element) { if(typeOf(element) != ’element’ && element.length >= 1) { element = element[0]; }; if(element) { return document.id(element); } };
3.6.3.2
Nevýhody knihovny
Složitost indexace obsahu V případě použití knihovny AngularJS pro vytvoření single page aplikace se vyskytuje zásadní problém při indexaci obsahu webových stránek. Vyhledávací roboti mají problém s načítáním javascriptového obsahu. Google používá JavaScript pouze pro zjištění, zda nebyl po načtení stránky skryt nějaký text. AJAX volání Google neprovádí. V případě, kdy chceme indexovat stránky, je tedy důležité vytvořit mapu stránek (sitemap.xml), napsat do ní jednotlivá URL, a na nich potom poskytovat obsah. Tlačítko zpět je nutné simulovat Prohlížeče často nedokáží rozlišit přechod mezi stránkami, protože se nemění celé, ale jen jejich části. V případě potřeby je potom nutné simulovat načítání historie v prohlížeči nějakým jiným způsobem. Často se pro to využívají již vytvořené knihovny, jako například History.js21 . 3.6.3.3
Shrnutí
V případě vytvoření uživatelského rozhraní aplikace v palubním počítači automobilu je Angular vynikající volbou. Umožňuje snadné vytváření „single page aplikací“, kdy potřebujeme veškerou funkční logiku vytvářet přímo v klientovi. Navíc zde lze snadno využít návrhový vzor MVC, který zlepšuje čitelnost zdrojového kódu a odděluje logicky související vrstvy aplikace. Existuje však řada problémů, které se často nedají řešit lepším způsobem než s pomocí single page aplikací. Jedním z takových problémů je například kontinuální přehrávání hudby při načítání obsahu stránek bez přerušení. Právě tento případ je nutné zohlednit v automobilovém využití, protože se jedná o standardní případ užití palubního počítače. Velmi podobným příkladem single page aplikace je Google Play, kde můžeme přehrávat hudbu a zároveň načítat obsah nebo filtrovat interprety. 21
36
http://balupton.github.io/history.js
3.6. Analýza javascriptových knihoven
3.6.4 3.6.4.1
React.js Výhody knihovny
Navržen pro tvorbu uživatelských rozhraní velkých aplikací React je méně známou knihovnou pro tvorbu uživatelského rozhraní, za jehož vývojem stojí Facebook. Je používán pro tvorbu uživatelských rozhraní na Facebooku nebo Instagramu. Spolupráce s ostatními knihovnami Velmi kladně je hodnocena spolupráce s ostatními knihovnami. Jako ideální kombinace s React.js se podle některých zdrojů jeví využití s další knihovnou – Backbone.js, nicméně React.js dokáže bez problémů spolupracovat i s AngularJS. Vše je komponenta Všechny prvky v React.js jsou komponentou. Tato komponenta může mít stav. Tento přístup je výrazně zjednodušený například při srovnání s AngularJS, kde se využívají moduly, controllery, direktivy, scope, templaty a linkovací funkce. Díky tomu by měl React.js být snadnější pro naučení než například AngularJS. Rychlost renderování V testech této knihovny bývá velmi vyzdvihována rychlost renderování. Knihovna totiž implementuje vlastní způsob pro úpravu DOM a vyhodnocuje, který způsob úpravy je nejvýhodnější. 3.6.4.2
Nevýhody knihovny
Malá komunita I přes to, že React.js už se používá několik let, stále nemá zdaleka tak velkou komunitu jako jQuery nebo AngularJS. Jedním z důvodů je i to, že jeho vývoj byl dlouhou dobu uzavřený. Nyní už tomu tak ale není. Kvůli absenci větší komunity existuje problém v podobě menšího množství tutoriálů, dokumentace a řešení známých problémů. Šablona je svázána s logikou V React.js bohužel neplatí, že šablona je oddělena od logické vrstvy. Pro lepší pochopení uvádím příklad: var HelloMessage = React.createClass({ render: function() { return
{’Hello ’ + this.props.name}
; } }); React.renderComponent(, mountNode);
Jak je vidět z příkladu, přímo v renderovací funkci je vrácena také část šablony. 37
3. Analýza a návrh Není MVC knihovnou React.js nezastupuje tedy například použití AngularJS, Knockout a dalších MVC knihoven. Jeho využití spočívá hlavně pro použití v šablonách. 3.6.4.3
Shrnutí
React.js je zajímavou knihovnou, která je specializována pro tvorbu uživatelských rozhraní ve velkých aplikacích. Jeho silnou stránkou je snadnost použití a také to, že za ním stojí Facebook, což je zárukou, že práce na knihovně bude pokračovat i v budoucnu. Bohužel React.js není MVC knihovnou a kombinuje používání šablon s JavaScriptem, což znepřehledňuje kód. Největším nedostatkem je malá komunita a špatná dohledatelnost některých problémů na Internetu.
3.6.5
Vyhodnocení
AngularJS je zaměřením zcela odlišnou knihovnou od jQuery. AngularJS se soustředí převážně na strukturu aplikace, návrhový vzor MVC, zatímco jQuery je výjimečné především na poli různorodnosti pluginů pro přizpůsobení uživatelského rozhraní nebo animací. Proto se nijak nevylučuje použití těchto dvou knihoven zároveň. V kombinaci s jQuery a AngularJS by se dal využít i React.js. Jeho přínos by však byl zřejmě nejmenší a kombinace tří knihoven by v tomto případě byla už zbytečná. Proto jsem se rozhodl pro implementaci využít jen jQuery a AngularJS.
3.7
Analýza webových prohlížečů
V dnešní době je situace na poli prohlížečů výrazně odlišná, než jak tomu bývalo dříve, kdy většina lidí používala Internet Explorer a ostatní prohlížeče patřily spíše mezi minoritu. V dnešní době nemá ani jeden z prohlížečů jasnou většinu. Díky této situaci se projevují prvky konkurenčního prostředí, kdy se jednotlivé prohlížeče snaží rapidně inovovat, zavádět nové standardy a zrychlovat provádění skriptů dříve než konkurence. Z hlediska použití prohlížečů pro spuštění HTML 5 aplikací v palubním počítači automobilů je potřeba klást důraz na několik kritérií: • Rychlost provádění JavaScriptu • Podpora HTML 5 API a nových standardů • Podpora CSS 3 • Hardwarová náročnost • Kontinuální vývoj do budoucna 38
3.7. Analýza webových prohlížečů Pro srovnání jsem vybral nejnovější verze prohlížečů: Google Chrome (Chromium), Firefox, Opera a Midori. Vybral jsem multiplatformní prohlížeče, které splňují všechny ACID testy22 na plný počet bodů a jsou stále vyvíjené.
3.7.1
Renderovací jádra
Jedná se o software, který načítá zdrojový kód stránky a stará se o zobrazení naformátovaného obsahu v okně prohlížeče23 . Drtivá většina dnešních prohlížečů je založena na některém ze třech renderovacích jader: • WebKit (Blink) WebKit (respektive jeho větev Blink) patří dnes mezi nejpoužívanější renderovací jádra webových prohlížečů [23][40]. Část WebKitu vznikla v rámci projektu KDE jako renderovací jádro KHTML. Protože bylo toto jádro vybaveno licencí GNU General Public License (GPL) použila jej firma Apple jako renderovací jádro pro svůj prohlížeč Safari. S ohledem na licenci KHTML vzniklo jádro WebKit jako open source. Vývoj WebKitu provádí mnoho společností. Mezi nejznámější patří Apple, Google, Adobe, Samsung, KDE a další. Původně byl WebKit určen pouze pro Mac OS X, ale nakonec se dostal na všechny více, či méně používané platformy jako Microsoft Windows, Linux, Android, iOS, BlackBerry a další. Google v roce 2013 oznámil, že vytvoří svoji vlastní větev (fork) WebKitu s názvem „Blink“, který bude nadále vyvíjet a používat pro prohlížeč Chrome. Na toto jádro později přešla také Opera. Mezi nejznámější prohlížeče, založené na jádrech WebKit (Blink) patří Google Chrome, Safari, Opera, Amazon Kindle, Konqueror a Midori. • Gecko Multiplatformní jádro Gecko, které vyvíjí Mozilla Corporation a Mozilla Foundation je používané především v prohlížeči Firefox. Jeho vývoj začal už v roce 1997 v Netscape. Během roku 1998 bylo Gecko uvolněno jako open source. Gecko klade důraz na dobrou podporu internetových standardů a zároveň obsahuje tzv. „quirks mód“, který dokáže emulovat nestandardní prvky starých prohlížečů. Gecko kromě Firefoxu používají ještě například prohlížeče SeaMonkey nebo Flock. • Trident Renderovací jádro, které používá Internet Explorer a je dostupné pouze na platformách Windows a Windows Phone. V minulosti mu bylo vytýkáno především nedodržování W3C standardů. V novějších verzích už je tato situace výrazně lepší než tomu bývalo. 22 23
http://www.acidtests.org A také řeší zobrazení stránky pro tisk.
39
3. Analýza a návrh Nejpoužívanějším prohlížečem je dnes Google Chrome (s 45% podílem), dále Internet Explorer (21 %), Firefox (19 %), Safari (10 %) a Opera (1 %) [23].
3.7.2
Midori
Midori je zástupcem minimalistických prohlížečů. Je známý nízkou náročností na HW, a to i za cenu některých kompromisů. Prohlížeč je založen na renderovacím jádře WebKit a je distribuován jako open source pod licencí LGPL. 3.7.2.1
Silné stránky
Nízké HW nároky Největší předností prohlížeče Midori je jeho nenáročnost. Byl vytvořen pro zařízení se slabým HW. Je standardně používán například na minimalistickém počítači Rapsberry Pi. WebKit Midori je založeno na jádře WebKit, což zaručuje dobré vykreslovací schopnosti a solidní podporu webových standardů. Podpora standardů pro video a hudbu Midori podporuje formáty H.264 pro kompresi videa a MP3, AAC pro kompresi hudebních souborů. Podpora Kiosk módu Tento mód umožňuje používat Midori jako kiosek s rozličným nastavením pro účely nasazení například jako obrazovka promítající reklamy. 3.7.2.2
Slabé stránky
Chybí podpora důležitých HTML 5 API HTML 5 přináší mnoho nových rozhraní pro získávání dat, které výrazně posunují možnosti tvorby webových aplikací. Bohužel Midori mnoho z nich nepodporuje. Chybí zde například Web Audio API, Geolocation API, getUserMedia API, Web Notifications API nebo Device Orientation API. Chybí podpora syntézy a rozpoznávání řeči Při tvorbě aplikací pro automobily je důležitá možnost hlasového ovládání a syntéza řeči24 . Podpora těchto funkcí v Midori chybí. Špatná podpora Canvasu Midori nepodporuje některé důležité grafické prvky v tagu
