Univerzita Hradec Králové Fakulta informatiky a managementu KIKM
Implementace webového prohlížeče pro podporu vzdělání a komunikace mezi studenty Bakalářská práce
Autor: Jan Hladík Studijní obor: Aplikovaná informatika
Vedoucí práce: doc. Ing. Filip Malý, Ph.D
Hradec Králové
duben 2015
Prohlášení: Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a s použitím uvedené literatury.
V Hradci Králové dne 22.4.2015
Jan Hladík
Poděkování: Děkuji vedoucímu bakalářské práce doc. Ing. Filipovi Malému, Ph.D za metodické vedení práce, cenné rady a připomínky při jejím zpracování.
Anotace Tato práce se zabývá problematikou komplexního řešení webového prohlížeče především určeného pro studenty Univerzity Hradec Králové. Teoretická část práce se zabývá možnostmi, respektive technologiemi, jakými je možné dosáhnout cíle a základním uvedením do tématu umělé inteligence. Jsou zde prezentovány právě ty možnosti, které pomohou při tvorbě aplikace, ale také ty, které nám pomohou lépe porozumět celému problému. Praktická část popisuje možnost propojení
a
implementaci
různých
technologií,
konkrétně
jazyk
C#
s technologiemi, jako jsou Facebook API, Google Speech API a Microsoft Speech Recognition.
Annotation Title: Implementation of a Web browser to support education and communication between students This thesis is following problematics around complex solution of web browser designated specially for students of University Hradec Králové. Theoretical part of thesis is dealing with options, respectively with technologies, which are capable of reaching the goal and basically provide introduction to subject of artificial intelligence. There are presented such options that will help to create application but also others that will help us understands the whole problem. Practical part describe opportunity of connect and implement various technologies, particularly C# language with technologies such as Facebook API, Google Speech API and Microsoft Speech Recognition.
Seznam obrázků Obr. 1 Základní vývojový diagram detekce klíčových slov. Zdroj: [3, s. 39] ................. 5 Obr. 2 Nejdůležitější parametry systému pro rozpoznávání řeči. Zdroj: [4]. ............... 6 Obr. 3 Model hlavních komponent systému rozpoznávání řeči. Zdroj: [4]. .................. 6 Obr. 4 První webový prohlížeč WorldWideWeb/Nexus. Zdroj: [5]. ................................ 7 Obr. 5 Erwise v dubnu 1992. Zdroj: [6]. ...................................................................................... 8 Obr. 6 Hodnocení prohlížečů podle TTR. Zdroj: [10]. ..........................................................11 Obr. 7 OSI model vs TCP/IP model. Zdroj: [16]......................................................................12 Obr. 8 Různé způsoby úprav komponenty MDI Tab Control. Zdroj: [20]. ...................15 Obr. 9 Vizuální zpracování LoginChat.cs komponenty. Zdroj: Vlastní zpracování ...26 Obr. 10 Vizuální zpracování Chat.cs komponenty. Zdroj: Vlastní zpracování ...........29 Obr. 11 Vykreslení aktivního formuláře pomocí DwmExtendFrameIntoClientArea. Zdroj: Vlastní zpracování .............................................................................................................32 Obr. 12 Ukázka vizuální podoby karty. Zdroj: Vlastní zpracování ................................33 Obr. 13 Vizuální podoba vývojářské verze formuláře Browser.
Zdroj: Vlastní
zpracování ............................................................................................................................................34 Obr. 14 Vizuální podoba uživatelské verze formuláře Browser.
Zdroj: Vlastní
zpracování ............................................................................................................................................35 Obr. 15 Automaticky vložený mikrofon do stránky uhk.cz.
Zdroj: Vlastní
zpracování ............................................................................................................................................38 Obr. 16 Ukázka funkce Preview. Zdroj: Vlastní zpracování ............................................39 Obr. 17 Podoba History.cs formuláře. Zdroj: Vlastní zpracování ..................................40 Obr. 18 Podoba dialogového okna pro vytváření nových záložek. Zdroj: Vlastní zpracování ............................................................................................................................................40 Obr. 19 Vizuální podoba kalkulačky. Zdroj: Vlastní zpracování .....................................43 Obr. 20 Vizuální podoba Editoru poznámek (Word.cs). Zdroj: Vlastní zpracování 46 Obr. 21 Podoba panelu pro sdílení příspěvků na uživatelovu zeď Zdroj: Vlastní zpracování ............................................................................................................................................47
1 Úvod V oblasti webových prohlížečů existují různé produkty zabývající se touto problematikou. Mezi nejrozšířenější aplikace patří Internet Explorer, Google Chrome, Mozilla Firefox a Opera. Všechny tyto prohlížeče jsou velmi kvalitní, ale ani jeden z nich není přímo zaměřený pro studenty. I přes podporu různých doplňků do každého z prohlížečů, nemusí studentům vždy vyhovovat jejich užití. Pokud studentům nevyhovuje ani jedno z dostupných řešení, nezbývá jim než vyhledat řešení, které jim usnadní a urychlí práci pomocí jednoduchého vzhledu a okamžitě dostupných funkcí.
1
2 Cíl práce Cílem teto prace je vytvorení komplexního weboveho prohlízece zamereneho predevsím na studenty Univerzity Hradec Kralove. Cely program by se mel predevsím zabyvat zjednodusením prace studentum. Student bude mít k dispozici webovy prohlízec zalozeny na jadru WebKit. Funkce typu hlasoveho rozpoznavaní reci, kalkulacka, chat, textove a obrazkove poznamky, moznost sdílet príspevky na Facebook. Aplikace bude psana v jazyce C# a bude implementovat ruzne knihovny a API sluzby pro dosazení pozadovanych funkcí. Dale se bude porovnavat vlastní implementace s existujícími reseními.
2
3 Metodika zpracování První část práce se zabývá pouze teoretickým základem. Nejprve obsahuje obecný úvod do problematiky hlasového rozpoznávání řeči, síťové komunikace a webových prohlížečů. Poté následuje kapitola o umělé inteligenci a softwaru, který se považuje za první software s umělou inteligencí. Od umělé inteligence se přejde ke kapitole popisující princip rozpoznávání řeči. V další kapitole se popisuje co je to webový prohlížeč se zmínkou o historii vzniku prohlížečů. V navazujících podkapitolách se přejde k popisu jednotlivých aktuálně využívajících jader prohlížečů až na konec k porovnání všech prohlížečů dohromady. Nadcházející kapitola se zabývá popisem síťové komunikace a rozdíly mezi protokoly TCP/IP a UDP. Poslední kapitola této části se zabývá užívanými technologiemi přímo v aplikaci, jako jsou MdiTabControl, JSON, XML, Facebook API Google Speech API, Microsoft Speech Recognition a sám samotný jazyk C# a jeho Framework.
Druhá část práce je čistě praktická. Zabývá se popisem vlastní implementace softwaru Krajta. V každé kapitole je samostatně popsán grafický vzhled a implementace dané části. Následuje zhodnocení implementace Krajty.
3
4 Teoretická část Hlasove rozpoznavaní reci, síťova komunikace, webove prohlízece jsou v dnesní dobe v oblasti informatiky predmetem velkeho zajmu. Predevsím v oblasti umele inteligence je mozne vsechna tato temata spojit. Zepta-li se v dnesní dobe (2014) nekdo co je to umela inteligence? Obecne se dostaví odpoveď, ze jde o mechanismus (stroj), ktery oplyva svojí inteligencí, tedy dokaze se sam rozhodovat v dany okamzik na danou situaci. Jako jedním z prvních mechanismu pripomínajících umelou inteligenci byl program ELIZA (Weizenbaum 1966). Jako dalsí obor vyuzívající tyto technologie (zejmena hlasove rozpoznavaní reci) je zdravotnictví.
4.1 Umělá inteligence „Umělá inteligence je empirická věda, která se zabývá zkoumáním a chápáním inteligentních projevů. Nástrojem bádání je abstrakce a modelování inteligentních projevů mimo medium lidské mysle (zpravidla pomocí počítače). Inteligentními projevy podle (Feigenbauma) rozumíme např.: učení, řešení problémů, porozumění jazyku, uvažování. Marvin Minsky, jehož definice je považována za tu nejobecnější a nejuznávanější, definuje umělou inteligenci jako vědu, která se zabývá tím jak přinutit stroje, aby exhibovaly chování takové, které by v případě člověka vykazovalo potřebu inteligence. Umělá inteligence je jako součást poznávacích věd (cog-sci) chápána většinou jako hraniční věda, která do sebe zahrnuje aspecty: kognitivní psychologie, neurologie, filosofie ducha, ethologie, logiky, evolučních věd, sociologie a jiných. Umělá inteligence jako název není zdaleka ideálním pojmem, ale zastřešuje diserfikované pojmenování
jako
je
strojová
inteligence,
výpočetní
psychologie
nebo
automatizované uvažování.“ [1]
4.1.1 Eliza V roce 1966 Joseph Weizenbaum, pocítacovy vedec na MIT, vytvoril program zvany ELIZA v jazyce MAD-Slip. Byl to první konverzacní pocítacovy program, ktery se choval jako doktor (psychiatr) a dokazal pomocí textoveho zadavaní komunikovat se „svetem“. Richard E. Lee ve sve publikaci [2, s. 123] tento program popisuje jako
4
jednoduchy textovy procesor naprogramovany s pravidly pro gramatickou transformaci vet se sadou znamych klícovych slov, ktere by mohly vyvolat specialní odpoveď.
Obr. 1 Základní vývojový diagram detekce klíčových slov. Zdroj: [3, s. 39]
Na obrazku císlo 1 je videt jak „jednoduse“ funguje detekce klícovych slov v programu ELIZA. Oettinger G. A [3, s. 39] to vysvetluje jako: „Hodnota klíčového slova musí být spojena s klíčovým slovem. Musí se proto objevit na konstrukci seznamu klíčových slov. Klíčové slovo může být nalezeno (pokud vůbec), jen v přední části seznamu transformačních pravidel spojených s klíčovým slovem. Tedy napíše-li se slovo “MY“ a transformační pravidlo zní (MY = YOUR 5), tak kdykoliv bude vepsáno slovo “MY“ bude vždy nahrazeno slovem “YOUR“ s hodnotou 5.“
5
4.2 Hlasové rozpoznávání řeči Serveru ogi.edu [4] uvadí, ze rozpoznavaní reci je proces prevodu akustickeho signalu zachyceneho mikrofonem nebo telefonem na sadu slov. Rozpoznana slova mohou byt konecnymi vysledky, pokud jde o aplikace, ve kterych jsou tato slova pouzita jako príkazy nebo kontrola, datovy vstup a tak podobne. Dale mohou byt pouzity jako vstup pro dalsí jazykove zpracovaní za ucelem dosazení porozumení reci. System rozpoznavaní reci muze byt charakterizovan podle mnoha parametru, par z tech nejdulezitejsích jsou vypsany na obrazku císlo 2.
Obr. 2 Nejdůležitější parametry systému pro rozpoznávání řeči. Zdroj: [4].
Rozpoznávání řeči je obtížný problém, hlavně z důvodu velké podobnosti signálů podobných slov. Dále z toho důvodu, že každý člověk má jinak položený hlas a právě díky tomu se může jevit počítači vyslovené slovo jako jiné.
Obr. 3 Model hlavních komponent systému rozpoznávání řeči. Zdroj: [4].
Obrazek císlo 3 znazornuje hlavní komponenty typickeho systemu rozpoznavaní reci. Digitalizovany signal je nejprve preveden do souboru uzitecnych merení nebo
6
funkcí s pevnou sazbou (obvykle jednou za 10 az 20ms). S vyuzitím omezení ulozenych modelu: akustickych, lexikalních a jazykovych jsou tato merení pak pouzita k hledaní nejpravdepodobnejsího kandidata. Testovací data se pouzívají k urcení hodnot parametru modelu.
4.3 Webový prohlížeč Webovy prohlízec je softwarova aplikace pro vyhledavaní, prezentaci a krízení informacních zdroju na World Wide Web. Informacní zdroj je identifikovan pomocí Uniform Resource Identifier (URI) a muze to byt webova stranka, obrazek, video nebo jina cast obsahu. Tim Berners-Lee [5] roku 1990 vytvoril první webovy prohlízec zvany WorldWideWeb. O spoustu let pozdeji byl tento prohlízec prejmenovan na Nexus a to z duvodu zachovaní jasnosti mezi programem a World Wide Web. Na obrazku císlo 4 je videt jak vypadal první webovy prohlízec na trhu v roce 1990. Ve srovnaní s novodobymi prohlízeci se tento prohlízec muze jevit jako chaoticky, ale pro obcany v te dobe to byl jediny program, pomocí ktereho se mohli podívat na internet.
Obr. 4 První webový prohlížeč WorldWideWeb/Nexus. Zdroj: [5].
7
O dva roky pozdeji byl vytvoren prukopnicky webovy prohlízec Erwise. Byl dílem finskych studentu z Helsinky University of Technology: Kim Nyberg, Teemu Rantanen, Kati Suominen a Kari Sydanmaanlakka [6]. Byl to vubec první bezne dostupny webovy prohlízec s grafickym uzivatelskym rozhraním. Jeho soucastí byly klikací hypertextove odkazy, textove vyhledavaní a moznost nacíst nekolik stranek soucasne. Na obrazku císlo 5 je videt jak moc pokrocil vyvoj v odvetví webovych prohlízecu.
Obr. 5 Erwise v dubnu 1992. Zdroj: [6].
4.3.1 Funkce webového prohlížeče Primarní ucel weboveho prohlízece je prinest uzivateli informacní zdroje (“vyhledavaní“, “nacítaní“), coz mu umoznuje zobrazit informace (“zobrazení“, “vykreslení“) a pote prístup k dalsím informacím (“navigace“, “nasledující odkazy“). Cely proces zacína prave ve chvíli, kdyz uzivatel vlozí do sveho prohlízece Uniform Resource Locator (URL), napríklad http://www.uhk.cz/. Prave prefix URL (HTTP,
8
HTTPS, FTP, FILE,…), tedy pomocí URI urcí, jak bude URL interpretovana. Prefixy, ktere sam prohlízec nezvlada, jsou velmi casto poslany do vedlejsích aplikací, ktere ma sam uzivatel konkretne definovane. Pro predstavu, dostane-li prohlízec prefix “mailto“, uzivateli se otevre jeho vychozí emailovy klient, pomocí ktereho dale komunikuje. Dostane-li prefix ''http'', ''https'' prvne se nacte HTML soubor a jejich související obsah (obrazky, videa, audia, css styly, …). Vse se dale posle do renderovacího jadra prohlízece a v nem se prevedou veskere znacky na interaktivní stranku.
4.3.2 Trident Jedním z nejznámějších, nejdéle trvajících renderovacích jader, je Trident, také znám jako MSHTML. Společnost Microsoft ho prvně prezentovala v roce 1997 v aplikaci Internet Explorer (IE). Od začátku se Microsoft snažil, aby tento produkt co nejpřesněji podporoval pravidla společnosti W3C (společnost, která udává, jak má být co stylizováno), díky čemuž se stal nejpoužívanějším webovým prohlížečem. V lednu roku 2002 pokrýval až 85.8% trhu [7]. Z důvodu méně častých aktualizací oproti konkurentům se IE pomalu dostával na nižší příčky v žebříčku webových prohlížečů. I přes to je stále jedním z 5 nejpoužívanějších prohlížečů. V lednu 2014 zastával 10.2% trhu [7]. Microsoft dovoluje využívat jeho jádro v projektech ostatních vývojářů. Mohl by být použit i v tomto projektu, ale použit nebude z důvodu možnosti si vyzkoušet práci s jiným webovým jádrem.
4.3.3 Gecko Gecko je nazev pro renderovací jadro vyvíjeno spolecností Mozilla Project. Funkcí Gecka je precíst webovy obsah, jako je HTML, CSS, XUL, JavaScript a vyrenderovat ho uzivateli na obrazovku. Gecko je zdarma a take open source. Vyvoj jadra zapocal v roce 1997 spolecností Netscape. Ze zacatku bylo pomale a neprílis dobre podporovalo W3C standardy. Vzhledem k temto nedostatkum se spolecnost rozhodla vyvíjet nove renderovací jadro soubezne s tím starym, ktere by pote brala jako jejich hlavní. V roce 1998 spolecnost Mozilla Project vydala toto nove jadro, pojmenovane jako Raptor pod open source licencí. Nazev musel byt zmenen a tak dostalo jmeno NGLayout (next generation layout), kvuli ochranne znamce muselo
9
byt opet zmeneno. Bylo prejmenovano na Gecko. V dnesní dobe (2014) Gecko není vyuzívano pouze pro vykreslovaní webovych stranek, ale take pro vykreslovaní grafickeho rozhraní (XUL), ktere je pouzito napríklad v aplikaci Firefox nebo Thunderbird.
4.3.4 Presto Zdroje swmag [8], neowin [9] popisují Presto jako proprietarní renderovací jadro pouzívane pro vykreslovaní stranek webovym prohlízecem Opera od firmy Opera Software. Poprve bylo predstaveno v roce 2003 ve verzi Opera 7.0. Presto patrí mezi jadra s privatní licencí a nahradilo stare renderovací jadro jmenem Elektra, ktere bylo vyuzívano do verze Opera 6. Nazev vznikl ze stejneho slova uzívaneho v hudbe, ktere oznacuje velkou rychlost nebo ''jako mavnutím kouzelneho proutku''. Toto jadro se v dnesní dobe (2014) jiz nevyvíjí.
4.3.5 WebKit WebKit je vykreslovací jádro a framework komponenta pro renderování webových stránek ve webových prohlížečích. Část kódu zabývající se HTML a JavaScriptem, vychází z knihoven KHTML a KJS, které se vyvíjí v rámci KDE již od roku 1998. Vývoj jádra započal v roce 2001 společností Apple pod vedením Don Meltona. V roce 2002 převzali KHTML a KJS jádra, která přejmenovali na WebCore a JavaScriptCore. Poprvé tyto změny byly prezentovány na Macworld Expo v roce 2003 s vydáním webového prohlížeče Safari. Po dvou letech bylo jádro WebKit uvolněno jako open-source. V dnešní době (2014) staví na WebKitu mnoho firem jako jsou například Google, Adobe a Opera.
10
4.3.6 Porovnání webových prohlížečů Při porovnávání webových prohlížečů budou hodnoceny: HTML5, CSS3, podpora, zabezpečení, využití RAM. Jako zdroj informací budou použity TopTenReviews (TTR) [10], w3school [11], wikipedia [12] nebo rgaucher [13]. Použité údaje ze zdrojů budou vztaženy ke dni 25. 8. 2014. Na základě svého výzkumu TTR [10] tvrdí, že nejlepším webovým prohlížečem je Mozilla Firefox od společnosti Mozilla Foundation viz Obrázek číslo 6. Údaje v ostatních zdrojích jsou velmi podobné.
Obr. 6 Hodnocení prohlížečů podle TTR. Zdroj: [10].
Bez ohledu na vyzkumy si v praxi kazdy uzivatel vybere webovy prohlízec podle svych pozadavku.
4.3.7 World Wide Web Vangie Beal [14] popisuje World Wide Web (WWW) jako: „systém Internetových serverů, které podporují speciálně formátované dokumenty. Dokumenty jsou formátovány v HTML, který podporuje odkazy do ostatních dokumentů, jakou jsou obrázky, audio, video. To znamená, že je možné přeskakovat z jednoho dokumentu na další jednoduše kliknutím na hypertextový odkaz. Ne všechny internetové servery jsou částí WWW.“ Je dobre vedet, ze WWW není synonymem pro Internet.
4.4 Síťová komunikace Tato kapitola se bude zabývat jednotlivým rozborem protokolů TCP/IP a UDP a poté budou tyto protokoly navzájem porovnány.
11
4.4.1 TCP/IP „Protokolova architektura TCP/IP samozrejme nezahrnuje pouze dva protokoly, ktere ma ve zkratkach ve svem nazvu. Na rozdíl od sedmivrstvoveho referencního modelu OSI vsak protokolovou architekturu TCP/IP tvorí jen ctyri vrstvy, od nejnizsí po nejvyssí: vrstva rozhraní síte (network interface), vrstva mezisíťova (internet layer), transportní vrstva (transport layer), aplikacní vrstva (application layer)“ [15]
Obr. 7 OSI model vs TCP/IP model. Zdroj: [16].
„Přestože architektura TCP/IP nemůže odpovídat rozvrstvení podle referenčního modelu OSI, neboť vznikla před jeho oficiálním přijetím (v roce 1969), z hlediska komunikačních funkcí a hranic mezi nimi modelu vcelku odpovídá. Nejnižší vrstva, vrstva rozhraní sítě, svými funkcemi odpovídá dvěma nejnižším vrstvám podle OSI, fyzické a spojové. Druhá nejnižší vrstva, vrstva mezi síťová, přesně odpovídá funkcemi, službami i rozhraními vrstvě síťové podle referenčního modelu OSI. Podobně je tomu u následující vrstvy, transportní, která plní transportní funkce definované v referenčním modelu OSI. Nejvyšší vrstva architektury TCP/IP, aplikační, v sobě zahrnuje funkce tří nejvyšších vrstev podle OSI, prezentační, relační a aplikační.“ [15]
12
4.4.1.1 TCP „Protokol TCP (Transmision Control Protocol) je dnes asi nejpoužívanější. Jedná se o tak zvanou spojovou službu. Znamená to, že před samotnou komunikací se naváže spojení. Všechna odeslaná data se potvrzují a na konec je nutné spojení ukončit (uzavřít). TCP paket obsahuje svou hlavičku a samotná data, která přenáší. TCP paket bude vložen do IP datagramu (jako data IP datagramu) a odeslán. (Ve skutečnosti IP datagram bude vložen jinam a tak dále až dojdeme k nejnižší vrstvě.) Součástí TCP hlavičky je tak zvaný port. Jedná se o 2 byte-ové číslo. Každá aplikace, která komunikuje pomocí TCP má přidělen svůj v rámci počítače jednoznačný port. Zjednodušeně lze říci, že zatímco IP protokol zajišťuje komunikaci dvou počítačů, tak TCP protokol zajišťuje komunikaci dvou aplikací na těchto počítačích. TCP port lze tedy považovat za jednoznačnou "adresu" aplikace na počítači.“ [15]
4.4.1.2 IP „IP (Internet protocol) je protokol síťové vrstvy. Obhospodařuje adresování, a to tak, aby pakety mohly být směrovány nejen přes řadu uzlů, ale dokonce i přes řadu sítí pracujících s různými komunikačními protokoly - nejen s původním ARPANETovským NCP standardem, ale i s jinými protokoly, jako jsou např. Ethernet, FDDI nebo X. 25.“ [17]
4.4.2 UDP „UDP je nespojovaný (connectionless) protokol, nepřináší vlastnosti spolehlivosti přenosu, řízení toku nebo funkcí opravy chyb. Jde o jednoduchý interface mezi protokoly vyšší vrstvy a IP protokolem
hlavička protokolu UDP obsahu menší množství informací než hlavička TCP a tím má tento protokol menší režii;
protože UDP nemá žádné mechanismy pro dorozumívání se obou komunikujících stran je přenos rychlejší než v případě TCP.“ [18]
13
Tabulka 1 Hlavička UDP protokolu.
Source port
Destination port
Length
Checksum Data octets
Zdroj: [18]
4.4.3 TCP/IP x UDP Tabulka 2 Porovnání protokolů UDP TCP.
UDP
TCP
Nespojovaná služba, mezi hostiteli není Služba orientovaná na připojení, mezi třeba vytvořit relaci.
hostiteli se vytváří relace.
Protokol UDP nezaručuje doručení dat, Protokol zaručuje dodání paketů s nezajišťuje potvrzování ani správné využitím potvrzování a sekvenčního pořadí dat
přenosu dat.
Programy, které používají protokol UDP, Programům, které používají protokol musí
samy
zajistit
potřebnou k přenosu dat.
spolehlivost TCP, je zaručena spolehlivost přenosu dat.
Protokol UDP je rychlý, s malými Protokol TCP je pomalejší, má vyšší požadavky na objem provozních dat, a nároky na objem provozních dat a podporuje dvoustrannou komunikaci i podporuje
pouze
dvoustrannou
komunikaci jednoho hostitele s více komunikaci. hostiteli. Zdroj: [19]
4.5 Technologie Tato kapitola se bude zabývat technologiemi využívanými v aplikaci projektu. Budou popsány jejich možnosti, využitelnost, výhody, nevýhody a jiné.
4.5.1 MDI Tab Control MDI tab control [20] je komponenta napsána Eduardem Oliveiraem (Eduardo Oliveira) v jazyce Visual Basic sloužící k vytvoření aplikace s mnoha „kartami“.
14
Tuto komponentu vytvořil z důvodu jednodušší manipulace a editování grafické podoby. Sám Microsoft v jeho prostředí Microsoft Visual Studio poskytuje téměř totožnou komponentu pod názvem Forms.TabControl, avšak editace grafické podoby není tak snadná. Oliveira do své implementace vložit i několik nadstandardních funkcí, kterými Forms.TabControl neoplývají. Funkce jako jsou: tlačítko pro vypnutí karty, jednoduché překreslení, schopnost přeorganizovávat karty pomocí úchopu myši aj. Na obrázku číslo 8 je vidět pár možných „úprav“ jednotlivých karet
4.5.2 C Sharp (C#) Server net-tutrials.com [21] píse: „C# je navržen tak, aby byl jednoduchý, moderní, pro všeobecné účely, objektově orientovaný programovací jazyk půjčující si klíčové koncepty z několika ostatních jazyků (především Java). C# by teoreticky mohl být kompilován do strojového kódu, ale ve skutečnosti je vždy použita kombinace s .NET framework. C# nenabízí globalní proměnné nebo funkce. Vše je zabalené ve třídách, dokonce i jednoduché typy jako jsou ''int'' nebo ''string''.“ Jako vetsina jazyku i tento
15
je mozne psat v jakemkoliv textovem editoru (notepad). Vysledek je pak treba zkompilovat pomocí programu C# Command line compiler (csc.exe). Tento kompilator se nainstaluje pri instalaci. NET frameworku. Pro více narocne uzivatele je k dispozici IDE (Integrated Development Environment). Nejbezneji je vyuzívano Visual Studio od spolecnosti Microsoft.
4.5.2.1 .Net Framework .Net Framework je platforma (prostredí) od spolecnosti Microsoft potrebna pro beh aplikací a nabízející jak spoustecí, tak potrebne knihovny. Dalo by se ríci, ze tato platforma je vrstvou mezi aplikací a operacním systemem. Software napsany pro tuto platformu se nejprve zkompiluje do tzv. mezikodu MSIL (Microsoft Intermediate Language). Ten je ulozen do exe ci dll souboru. Kdyz je takovy exe soubor spusten na klientskem pocítaci, .Net Framework MSIL kod zkompiluje do nativního kodu a aplikaci spustí. Pro tuto platformu je mozne psat v mnoha jazycích (C++, VB.NET, J#, F#, atd.). Korunním jazykem se stal C#, coz je, podle slov vyvojaru z Microsoftu, dalsí clen do rodiny C jazyku. V konecnem vysledku vubec nezalezí na tom v jakem jazyce je aplikace napsana, kompilatory ji vzdy prelozí do stejneho MSIL jazyka.
4.5.3 Microsoft Windows Speech Recognition (Microsoft Speech API) Microsoft Speech API je technologie od společnosti Microsoft, která umožňuje vývojářům převádět libovolný text na mluvené slovo nebo mluvené slovo na text. Jedinečnou výhodou, kterou tato technologie oplývá je, že se defaultně nachází ve všech operačních systémech od společnosti Microsoft. Tato výhoda má i jedinečnou nevýhodu. Microsoft Speech API nepodporuje všechny jazyky a pro použití je nutné mít nastavený jazyk Operačního Systému na jeden z podporovaných, například Anglicky, Japonsky, Tradiční Čínština aj.
4.5.4 Google Speech API Google Speech API je totozna technologie jako Microsoft Speech API, ale od spolecnosti Google. Tato technologie je take poskytovana pro vyvojare, ale pro její pouzití je uz nutne splnit nekolik podmínek, ktere Google udava, napríklad
16
obstaraní identifikacního klíce. Tato technologie je dostupna temer v kazdem jazyce.
4.5.4.1 XML Stránky W3C [22] definují eXtensabile Markup Language (XML) jako jednoduchý, velmi flexibilní textový formát odvozený z SGML (univerzální značkovací jazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny, avšak pro svoji složitost je těžce rozšiřitelný). Původně byl navržen tak, aby vyřešil problémy s rozsáhlou elektronickou publikací. W3School [23] doplňuje, že XML je podobný značkovací jazyk jako HTML, ale oproti HTML není navržený k zobrazování dat, ale k popisu dat. Dále, že tagy nejsou předdefinované (uživatel si je definuje sám) a je navržen, tak aby byl “samo popisovatelný“. <note> Tove Jani Reminder Don’t forget me this weekend!
4.5.4.2 JSON Server json.org [24], definuje JSON (JavaScript Object Notation), jako: „Odlehčený formát pro výměnu dat. Je jednoduše čitelný i zapisovatelný člověkem a snadno analyzovatelný i generovatelný strojově.“ Dále dodává: „Je založen na podmnožině Programovacího jazyka JavaScript, Standard ECMA-262 3rd Edition - December 1999. JSON je textový, na jazyce zcela nezávislý formát, využívající však konvence dobře známé programátorům jazyků rodiny C (C, C++, C#, Java, JavaScript, Perl, Python a dalších). Díky tomu je JSON pro výměnu dat opravdu ideálním jazykem.“ Také uvádí, že JSON je založen na dvou strukturách: 1. „Kolekce párů název/hodnota. Ta bývá v rozličných jazycích realizována jako objekt, záznam (record), struktura (struct), slovník (dictionary), hash tabulka, klíčový seznam (keyed list) nebo asociativní pole.
17
2. Seřazený seznam hodnot. Ten je ve většině jazyků realizován jako pole, vektor, seznam (list) nebo posloupnost (sequence).“ Vzhledem k tomu, že velikost JSON souborů bývá přibližně o 40 – 50% menší než XML, vyplatí se využívat JSON technologii.
18
5 Praktická část Tato kapitola se zabývá samotnou implementací jednotlivých částí aplikace. Celou aplikaci je možné rozdělit na čtyři velké části a to na část rozpoznávání řeči, samotný prohlížeč, síťovou komunikaci a dodatkové funkce.
5.1 Rozpoznávání řeči Tato část se skládá ze dvou speciálních tříd. Talk.cs, Flac.cs a zabývá se rozborem implementace hlasového rozpoznávání řeči pomocí technologií Google Speech API a Microsoft Speech Recognition.
5.1.1 Hlavní třída Tato trída ma za ukol predevsím nadefinovat zakladní pozadavky pro funkcnost rozpoznavaní reci za pomocí jednotlivych TextBoxu, ComboBoxu a Buttonu. Z duvodu
nedostatecne
podpory
jazyku
u
technologie
(Microsoft
Speech
Recognition) od spolecnosti Microsoft tato trída oplyva i mozností vyuzití technologie (Google Speech API) od spolecnosti Google. Pro vyuzití Microsoft Speech Recognition je nutne pouzít knihovnu System.Speech. Pro spravnou funkcnost je zapotrebí naimplementovat tzv. Motor (SpeechRecognitionEngine), slovník (Grammar) a metody pro obstaraní vysledku. Motor urcuje v jakem jazyce se ma poslouchat a slovník definuje, ktera slova ma znat. V ramci spravne implementace teto technologie je nutne jako první vytvorit tzv. Motor celeho rozpoznavaní, SpeechRecognitionEngine, ktery nastaví, v jakem jazyce se bude poslouchat. SpeechRecognitionEngine speechRecognitionEngine = createSpeechEngine(“en-US“)
Kde metoda createSpeechEngine()
prochazí veskere nainstalovane “motory“
hlasoveho rozpoznavaní a v prípade nenalezení uzivatelem pozadovaneho motoru se nastaví vychozí. Za vychozí motor se povazuje takovy motor, ktery odpovída jazyku operacního systemu.
19
foreach(RecognizerInfo config in SpeechRecognitionEngine.InsalledRecognizers()) { if(config.Culture.ToString() == preferredCulture) { speechRecognitionEngine = new SpeechRecognitionEngine(config); break; } }
Jako dalsí krok se nastaví udalosti pro uroven zvuku a pro samotne rozpoznaní reci. speechRecognitionEngine.AudioLEvelUpdated += new EventHandler(engine_AudioLevelUpdated); speechRecognitionEngine.SpeechRecognized += new EventHandler<SpeechRecognizedEventArgs>(engine_engine_SpeechRecognized);
Aby technologie Microsoft Speech Recognition vubec rozumela co clovek ríka, je zapotrebí nastavit tzv. slovník slov, kterym bude aplikace rozumet. Pro utvorení slovníku je nejprve nutne vytvorit tzv. Choices, ktere predstavují jednotliva slova. choices.Add(“slovo“)
Po vlození veskerych slov se vytvorí Grammar, do ktereho se vlozí jiz prichystane Choices. Na zaver se Grammar nacte do rozpoznavacího motoru. speechRecognitionEngine.LoadGrammar(grammar);
V rámci této práce má uživatel k dispozici pár předdefinovaných slov, které nemůže měnit, ale též má možnost si přidat svá vlastní slova, kterým chce, aby aplikace rozuměla. Slova je možné přidávat pomocí formuláře Words.cs.
Po vytvorení slovníku se jeste nastaví mikrofon: speechRecognitionEngine.SetInputToDefaultAudioDevice();
20
Pro spuštění rozpoznávání se zde nachází metoda RecognizeAsync(), do které je možné vložit parametr, jak bude celé rozpoznávání fungovat. Tímto je myšleno, zda se rozpoznávání ukončí hned po prvním rozpoznaném slově nebo bude neustále rozpoznávat, dokud ho uživatel neukončí. speechRecognitionEngine.RecognizeAsync(RecognizeMode.Multiple);
Ukázka říká, že po rozpoznání slova se nemá ukončit. speechRecognitionEngine.RecognizeAsync(RecognizeMode.Single);
Ukázka říká, že po rozpoznání slova se vše ukončí.
Pro vizualní cast teto technologie je pouzito pouze jedno tlacítko (Button), ProgressBar a Label nebo TextBox. Tlacítko spoustí a vypína hlasove rozpoznavaní. ProgressBar ukazuje hladinu zvuku, kterou je do mikrofonu mluveno. Toto pomaha pri zjisťovaní, zda dana funkce funguje nebo zda není okolo prílis velky hluk. Label nebo TextBox slouzí pro zobrazení rozpoznaneho slova. Vyhodou teto technologie je, ze pro vyuzití není treba byt pripojen k internetu.
Pro implementaci Google Speech API je nutné jako první si obstarat klíč, pomocí kterého je možné komunikovat se servery Googlu, a ty pak uskuteční celé rozpoznávání řeči. Jelikož tato technologie pracuje na principu odesílání zvuku a přijímání řečeného slova v textové formě, je nutné zprvu vytvořit audio záznam ve formatu wav nebo flac a pote pomocí technologie JSON odeslat na Google servery. Jako odpoveď prichazí textove pole obsahující nekolik moznych vysledku. Pro zachycení audio zaznamu ve formatu wav je v teto tríde pouzita knihovna AudioLib.dll. Trída Recorder pochazející z knihovny AudioLib.dll obstarava cely zaznam audia. Pro získaní audio zaznamu pomocí teto trídy je nutne nastavit format wav souboru (rychlost, pocet bitu a pocet kanalu), vybrat jaky mikrofon se bude pouzívat a urcit velikost bufferu. WavFormat format = new WaveFormat(16000, 16, 1)
21
Hodnota 16000 znací rychlost zaznamu, hodnota 16 pocet bitu a císlo 1 pocet kanalu. Recorder recorder = new Recorder(wavFileName, format, 1, 4096)
WavFileName značí cestu, kam se má soubor uložit, format udává formát wav souboru, číslo 1 odkazuje na mikrofon s identifikačním číslem 1 a číslo 4096 značí velikost bufferu.
Poté pro spuštění nahrávání stačí zavolat metodu Record() a pro zastavení metodu Stop(). Recorder.Record(); Recorder.Stop();
Pro vytvoření vizuální části postačuje jeden Button, Label nebo TextBox a kvůli možnosti konvertování audio záznamu wav do flac i CheckBox. Button zde obstarává jak spuštění, tak zastavení celého procesu (volání metod pro vytvoření audio záznamu, odeslání na rozpoznání, práce s výsledkem, a tak dále). Label nebo TextBox opět slouží pro zobrazení rozpoznaného výsledku. CheckBox má za úkol zasílat flac audio formát místo wav formátu. Tento proces obstarává třída Flac.cs.
Hlavní třída také obsahuje kód pro výběr mikrofonu. Informace o připojených mikrofonech se získávají pomocí knihovny Microsoft.DirectX.DirectSound. Pro výběr mikrofonu, který chce uživatel využívat, slouží v projektu metoda defineMic().
V té se nejprve definují veškeré “zachytávací“ zařízení a poté pomocí
cyklu se zapíší do uživatelsky přívětivého ComboBoxu (cmbMic). private void defineMic() { var cap = new DirectX.Capture; var cdc = new DirectX.CaptureDevicesCollection(); for (int i = 0; i < cdc.Count; i++) {
5.1.2 Flac.cs Tato třída slouží pro získání flac formátu z formátu wav. Princip je obdobný jako u technologie Google Speech API. Vezme se audio ve formátu wav a pomocí API od serveru online-convert.com se záznam odešle na jejich server. Server poté umožní stáhnout převedený audio záznam. Hlavními metodami této třídy jsou convert2Flac(), download(), getStatus(), getServer().
Metoda convert2Flac()
je hlavní metodou celé třídy, která obstarává celé konvertování. Pro možnost konvertování pomocí serveru onlinu-convert.com je nutné se nejprve registrovat. Díky čemuž se získá API klíč, pomocí kterého bude umožněno komunikovat s jejich servery. Jelikož server umožňuje konvertovat nejen audio záznamy, musí se pomocí XML struktury definovat, co se konvertuje a do čeho se konvertuje. Samozřejmostí je zadání API klíče, aby server s aplikací vůbec komunikoval. nějaký API klíč audio convert-to-flac false
Ještě před přímým zadáním, do čeho se bude konvertovat, je nutno získat server, se kterým se bude komunikovat, metoda getServer(). V této metodě se vytvoří HttpWebRequset na adresu http://api.online-convert.com/get-queue. Zašle se XML obsahující typ zasílaného souboru jako parametr na danou adresu a nazpátek přijdou informace o serveru, který bude aplikace využívat. nějaký API klíč
23
audio
Po
získání
serveru
a
definování
typu
konvertování
se
vytvoří
nový
HttpWebRequest, který bude v obsahovat již předpřipravený wav záznam. Tento request se odešle (nahraje) na daný server. Po odeslání audio záznamu se pomocí metody getStatus(), bude neustále aplikace dotazovat, zda je již možné zkonvertovaný soubor stáhnout. V okamžiku, kdy bude možné soubor stáhnout, server zašle odkaz, ze kterého se bude moci stáhnout již převedený audio záznam. K této
operaci
slouží
HttpWebRequest-u,
metoda
WebResponse,
download(). Stream-u,
V této
FileStremu
metodě
se
pomocí
a nakonec pomocí
BinaryWriter-u získá (stáhne) audio záznam ve formátu flac.
5.1.3 Talk.cs Třída Talk.cs je nejdůležitější třídou pro využití Google Speech API. Obstarává celou komunikaci se servery Googlu a převádí získaný výsledek do požadované formy. Hlavní metodou, kterou tato třída oplývá je metoda StT (Speech to Text), která má za úkol pomocí HttpWebRequestů, FileStreamu a StreamReadru vzít audio záznam, odeslat ho na server a poté převést získaný text z JSON formátu do použitelné formy. V této práci se Google Speech API využívá následujícím způsobem.
Jako
první
se
vytvoří
HttpWebRequest
na
adresu
https://www.google.com/speech.api/v2/recognize. Do této adresy se vloží též parametry, jako jsou:
output o V jakém formátu je požadován výsledek
output=json
lang o V jakém jazyce se rozpoznává
lang=cs-CZ
key
24
o API klíč získaný registrací na https://developers.google.com, který umožní aplikaci komunikovat se servery Googlu.
client o Značí jméno klienta, kterým se aplikace připojuje. Jelikož je aplikace vytvořena na jádře WebKit je použito jméno klienta chromium
client=chromium
maxresults o
Udává maximální počet možných výsledků. Ne vždy Google Speech API přesně rozumí tomu, co člověk řekl a tak nabízí možné alternativy.
maxresults=6
pfilter o Označuje zabezpečení vůči vulgárním slovům.
pfilter=2
Po vytvoření URL daného Requestu se musí ještě doplnit dodatečné údaje, jako jsou:
ContentType o Definuje jaký formát audio záznamu je odesílán
request.ContentType
= “audio/l16; rate=16000“
UserAgent o Přesná specifikace používaného clienta
request.UserAgent = "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36
(KHTML,
like
Gecko)
Chrome/36.0.1985.125 Safari/537.36";
Method o Definuje metodu odesílání, buď POST, nebo GET
Requset.Method = “POST“
Po dokončení tohoto nastavení se vezme vytvořený HttpWebRequest a předem připravený audio záznam a pomocí RequestStreamu se odešle na Google server. Vzápětí přijde odpověď ve formátu JSON, ze kterého se vybere jeden či více možných výsledků. Záleží na uživatelském nastavení.
25
5.2 Chat Tato část se zabývá rozborem implementace chatové podaplikace běžící na UDP protokolu. Samotná podaplikace je rozdělena na tři části, přihlašovací část (LoginChat.cs), samotný chat (Chat.cs) a server obstarávající komunikaci (ChatServer). LoginChat.cs a Chat.cs jsou vytvořeny jako uživatelské komponenty (UserControl), díky čemuž je možné je lehce implementovat v rámci celého projektu a ChatServer je vytvořen jako konzolová aplikace.
5.2.1 LoginChat.cs Na obrázku číslo 9 je vidět vizuální podoba komponenty LoginChat.cs. Jak je z obrázku zřejmé celé se to skládá z 2 Buttonů, 2 Labelů a jednoho textového pole.
Obr. 9 Vizuální zpracování LoginChat.cs komponenty. Zdroj: Vlastní zpracování
Do textového pole se vkládá uživatelská přezdívka a po kliknutí na Button s názvem Login se odešle na ChatServer požadavek o list všech aktuálně připojených uživatelů. V případě neobsazené přezdívky se pošle na server zpráva o připojení do “místnosti“ a následné upozornění všech uživatelů o připojení nového uživatele. V opačném případě se uživateli objeví hláška, že jim zvolená přezdívka je již obsazena a uživatel je nucen zvolit jinou přezdívku.
Komunikace mezi klientem a serverem funguje na principu UDP, kde se jako první vytvoří klientský socket (Socket), definuje se IP adresa serveru a nastaví se koncový bod obsahující danou IP adresu a číslo portu, na kterém server poslouchá. Socket clientSocket = new Socket(AddressFamily.InterNetwork, SocketType.Dgram, ProtocolType.Udp); IPAddress ipAddress = IPAddress.Parse(ip); IPEndPoint ipEndPoint = new IPEndPoint(ipAddress, GlobalSetting.port);
26
Jelikož celá komunikace probíhá způsobem vzájemným posíláním packetů, je nutné takový packet z námi požadované zprávy vytvořit. Pro tyto účely je vytvořena vnořená třída Data. Tato třída má za úkol převést Bytovou zprávu do předem daného datového formátu anebo naopak převést zprávu do Bytů. Ukázka převodu zprávy do Bytů, metoda ToByte() se nachází níže. public byte[] ToByte() { List result = new List(); result.AddRange(BitConverter.GetBytes((int)cmdCommand)); if (strName != null) result.AddRange(BitConverter.GetBytes(strName.Length)); else result.AddRange(BitConverter.GetBytes(0)); if (strMessage != null) result.AddRange(BitConverter.GetBytes(strMessage.Length)); else result.AddRange(BitConverter.GetBytes(0)); if (strName != null) result.AddRange(Encoding.UTF8.GetBytes(strName)); if (strMessage != null) result.AddRange(Encoding.UTF8.GetBytes(strMessage)); return result.ToArray(); }
Aby bylo možné jednotlivé zprávy nějak identifikovat, například, zda příchozí zpráva je typu přihlášení, odhlášení, soukromá zpráva, a jiné, je v aplikaci vytvořen výčtový datový typ enum (enum Command), dle kterého je velmi snadné určit, o jaký typ zprávy se jedná. Enum Command obsahuje hodnoty:
Login o Hodnota označující nové přihlášení klienta na server.
Logout o Hodnota označující odhlášení klienta ze serveru.
Message o Hodnota obsahující zprávu pro všechny klienty.
List
27
o Hodnota, která odesílá seznam všech připojených klientů na klienta(y).
Whisp o Hodnota značící soukromou zprávu, posílá se vždy pouze jednomu žádanému uživateli.
Null o Nulová hodnota.
O odesílání zprávy na server se stará metoda Socketu BeginSendTo() clientSocket.BeginSendTo(byteData, 0, byteData.Length, SocketFlags.None, epServer, new AsyncCallback(OnSend), null);
Kde OnSend() značí metodu obsluhující ukončení komunikace. Tato metoda je zde z důvodu nepotřebné další komunikace se serverem v této části klienta.
5.2.2 Chat.cs Chat.cs je v podstatě takové obslužné okno, které umožňuje uživateli přijímat, posílat soukromé nebo veřejné zprávy s možností doplnění zprávy o emotiky. Dále zobrazuje seznam veškerých připojených uživatelů. Tento seznam je možné kdykoliv zneviditelnit nebo zobrazit. Celá podoba komponenty Chat.cs je vidět na obrázku číslo 10.
Tato část aplikace funguje stejně jako LoginChat.cs. Také využívá vnořenou třídu Data a výčtové typy enum Command. V rámci uvědomění uživatele o nově příchozí zprávě je vytvořena metoda playSound(), která vždy po příchodu zprávy přehraje předem definovaný zvuk. Tento proces je vytvořen za pomocí knihovny System.Media, která umožňuje jednoduše přehrát audio záznam ve formátu wav. using (var soundPlayer = new SoundPlayer(Properties.Resources.wet)) { soundPlayer.PlaySync(); }
28
Obr. 10 Vizuální zpracování Chat.cs komponenty. Zdroj: Vlastní zpracování
Jelikož Chat.cs využívá komponentu richTextBox pro zobrazování zpráv, je možné po přijetí zprávy měnit text na jednotlivé obrázky. Tato vlastnost dovoluje po krátké implementaci uživateli odesílat text typu “:-)“ a po odeslání se jak u příjemce, tak u odesílatele automaticky změní daný text na požadovaný obrázek. Pro jednoduché identifikování jednotlivých emotik je použita Hashovací tabulka, která umožňuje vybírat data pomocí uživatelem definovaných identifikátorů. Hashtable emotions; emotions.Add(":-)", Properties.Resources.smile);
Pro záměnu textu za emotiky slouží metoda addEmmotions(), která vždy po přijetí nové zprávy projde richTextBox a při najití jakékoliv z definovaných emotik vybere všechny shody a nahradí je požadovaným obrázkem.
Pro odesílání soukromých zpráv zde existují tři cesty. První možností je pravým tlačítkem myši vybrat požadovaného uživatele a vybrat možnost odeslat soukromou zprávu. Po takovéto činnosti se v textovém poli pro zprávu objeví text /w [uživatel] což aplikaci říká, že se jedná pouze o soukromou zprávu a tedy není možné, aby byla zobrazena všem aktuálním uživatelům. Druhou možností je
29
rovnou napsat již zmíněný text a třetí možností je obdobou té druhé, ale je využit text /r, který, funguje na principu rychlého odpovídání. Přišla-li uživateli již soukromá zpráva, stačí napsat /r a bude mu automaticky doplněno uživatelovo jméno. Jedná se tedy o takové zrychlení odpovídání na soukromé zprávy.
5.2.3 ChatServer ChatServer je vytvořen jako konzolová aplikace obsluhující celý chatový systém. Jakákoliv zpráva nebo požadavek jde skrze něj. ChatServer funguje opět podobně jako klientské části aplikace až na rozdíl, že si uchovává veškeré klienty v databázi. Databází je zde myšlen ArrayList. Pro snadné uchovávání klientů v databázi je vytvořena struktura ClientInfo, která uchovává informace o klientovi, jako jsou jméno a klientův socket (IP adresa a port). struct ClientInfo { public EndPoint endpoint; public string strName; }
5.3 Webový prohlížeč Tato část se zabývá rozborem implementace webového prohlížeče. Přesněji se jedná o implementaci komponent MDI TabControl, OpenWebKitSharp, umožnění vykreslování do tzv. neklientské oblasti (non-client area) a různých pod mechanismů, jako jsou historie prohlížeče, záložky či celkové nastavení.
5.3.1 Non-Client area Jelikož je dnešním standardem, že každý webový prohlížeč vykresluje veškeré otevřené karty (taby) do neklientské oblasti, tedy do horní části ohraničení aplikace, bylo nutné vytvořit v aplikaci podobné chování. Pro tyto účely byly využity třídy WinApi.cs a Dwm.cs. Dále bylo nutné implementovat událost WndProc()
v hlavním formuláři aplikace. WndProc() umožňuje téměř jakkoliv měnit,
upravovat, pracovat s formulářem dané aplikace. Pro docílení požadovaného chování bylo nutné čekat na zprávu typu WM_NCCALCSIZE a WParametru na hodnotě true.
30
Zpráva typu WM_NCCALCSIZE je volána kdykoliv se velikost nebo pozice klientské oblasti změní. Při odchycení této zprávy je možné klientskou oblast zmenšit, zvětšit či vůbec nevykreslit. Další možností je též vykreslit takovou pseudo klientskou oblast, která bude vypadat jako normální klientská oblast, ale její vlastnosti jako je rozšiřování a posouvání formuláře budou funkční pouze na uživatelem definovaných místech. Vše se odehrává za pomocí již zmíněných dvou tříd.
5.3.1.1 WinApi.cs Třída
WinApi.cs
je
veřejně
dostupná,
sestavitelná
třída
ze
stránek
msdn.microsoft.com. Tato třída funguje jako jakési Api pro práci nejen s formuláři. V aplikaci tato třída obsahuje veškeré výčtové datové typy enum Win32Messages. Tedy typy zpráv, které se mohou do události WndProc() dostat. Dále obsahuje sktrukturu RECT a NCCALCSIZE_PARAMS. Struktura RECT vlastní pouze veřejné datové typy integer Left, Top, Right a Bottom. public struct { public public public public }
RECT int int int int
Left; Top; Right; Bottom;
Struktura NCCALCSIZE_PARAMS obsahuje informace, které může aplikace použít při zpracovávání zprávy WM_NCCALCSIZE, jako je vypočítání velikosti, pozice a validity obsahu klientské oblasti okna. public struct NCCALCSIZE_PARAMS { public RECT rect0, rect1, rect2; public IntPtr lppos; }
5.3.1.2 Dwm.cs Třída Dwm.cs je také veřejně dostupná, sestavitelná třída ze stránek msdn.microsoft.com. Tato třída sama o sobě implementuje spousty struktur,
31
výčtových datových typů, ale také importuje metody z knihovny dwmapi.dll, které jsou potřeba pro vlastní nastavení klientské oblasti. [DllImport("dwmapi.dll")] public static extern int DwmDefWindowProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, out IntPtr result); [DllImport("dwmapi.dll")] public static extern int DwmExtendFrameIntoClientArea(IntPtr hdc, ref MARGINS marInset);
Metoda
DwmDefWindowProc
minimalizaci,
obstarává
maximalizaci,
DwmExtendFrameIntoClientArea
vykreslení
zavření
funkčních
formuláře
tlačítek a
pro
metoda
obstarává vykreslení “barev“ aktivního formuláře.
Na obrázku číslo 11 je vidět, co se pomocí této metody způsobí. Tato metoda se musí volat vždy při aktivování formuláře, událost OnActivated().
Obr. 11 Vykreslení aktivního formuláře pomocí DwmExtendFrameIntoClientArea. Zdroj: Vlastní zpracování
Jednou z nejdůležitějších struktur, která je obsažená v této třídě je struktura MARGINS.
Díky níž, se nastavuje požadovaná velikost okrajů formuláře (neklientské
oblasti) public struct MARGINS { public int cxLeftWidth; public int cxRightWidth; public int cyTopHeight; public int cyBottomHeight; public MARGINS(int Left, int Right, int Top, int Bottom) { this.cxLeftWidth = Left; this.cxRightWidth = Right; this.cyTopHeight = Top; this.cyBottomHeight = Bottom; } }
5.3.2 MDI TabControl I přestože implementace komponenty MDI TabControl je velmi jednoduchá, tedy stačí naimportovat knihovnu MdiTabCotntrol.dll, vložit komponentu do formuláře
32
a poté už jen vkládat do komponenty nové formuláře, byla implementace nesnadná. Bohužel autor komponenty neočekával, že jí někdo bude chtít vykreslovat do neklientské oblasti a tudíž při takovémto užití se vyskytuje velký problém, problém s pozadím komponenty. I po nastavení pozadí na barvu Transparentní se v neklientské oblasti místo barvy pozadí komponenty vykreslovalo pozadí formuláře. Díky možnosti jakkoliv tuto komponentu modifikovat se povedlo docílit požadované vlastnosti a to tím, že se pro určité části komponenty nastavil jejich vlastník na jiného majitele, v rámci aplikace se jednalo o Panel(y). Dalším nedostatkem bylo statické nastavování ToolTipu každé nově přidané kartě (ToolTip byl přidělen pouze při vytvoření formuláře). Jelikož aplikace tuto komponentu využívá v rámci prohlížeče, bylo nezbytné, aby se ToolTip
měnil při každé změně stránky. Tohoto bylo dosaženo tak, že se při změně
textu formuláře zavolá událost TabContent_TextChanged() a nastaví se nový text ToolTipu. Je-li preferován jiný styl karet, než je standardně nastavený, tak díky univerzálnosti
této
komponenty
tabControlBrowser_GetTabRegion().
postačí
vytvořit
událost
Do této události se vkládají pouze body, které
značí hranice dané karty. Ukázka kódu, která je níže, znázorňuje, jak je možné vytvořit podobný styl karet, jako využívá prohlížeč Google Chrome. Obrázek číslo 12, zobrazuje grafický výsledek kódu. private void tabControlBrowser_GetTabRegion(object sender, MdiTabControl.TabControl.GetTabRegionEventArgs e) { e.Points = new Point[8]; e.Points[0] = new Point(0, 35); e.Points[1] = new Point(7, 5); e.Points[2] = new Point(10, 2); e.Points[3] = new Point(13, 0); e.Points[4] = new Point(e.TabWidth - 13, 0); e.Points[5] = new Point(e.TabWidth - 10, 2); e.Points[6] = new Point(e.TabWidth - 7, 5); e.Points[7] = new Point(e.TabWidth, 35); } Obr. 12 Ukázka vizuální podoby karty. Zdroj: Vlastní zpracování
33
5.3.3 OpenWebKitSharp OpenWebKitSharp je projekt, který zastřešuje projekt “The WebKit Open Source project“ a tím umožňuje využívat toto jádro (WebKit) v programovacím jazyce C#. OpenWebKitSharp vyvíjí skupina GT WebSoftware [25]. Chce-li člověk využít jejich řešení, musí pro první spuštění splnit čtyři kroky. 1. Stáhnout si požadovanou verzi z jejich webových stránek 2. Spustit OpenWebKitSharp.csproj projekt, jít do vlastností projektu, změnit tam Build cestu na požadované místo (“buildovací“ místo uživatelského projektu). A vytvořit (Build) projekt. 3. Ve
svém
projektu
naimportovat
knihovny
OpenWebKitShrp.dll
a
WebKit.Interop.dll 4. V poslední řadě ve svém projektu v toolboxu přidat OpenWebkitSharp mezi ostatní komponenty: Toolbox -> Choose Items V rámci aplikace je komponenta OpenWebKitSharp vložena do speciálního formuláře pojmenovaného Browser. Na obrázku číslo 13 je ukázán formulář Browser ve vývojářské podobě a na obrázku číslo 14 je ukázán v uživatelském pohledu.
Obr. 13 Vizuální podoba vývojářské verze formuláře Browser. Zdroj: Vlastní zpracování
34
Obr. 14 Vizuální podoba uživatelské verze formuláře Browser. Zdroj: Vlastní zpracování
Tento formulář slouží primárně pro obsluhu veškerých událostí komponenty OpenWebKitSharp. Jak je vidět z obrázků číslo 13 a 14, v horní části se nachází tzv. Url panel obstarávající volání metod, událostí komponenty. O kousek níže se nachází tzv. panel záložek, usnadňující uživateli jednoduché přecházení mezi často navštěvovanými stránkami pomocí jednoho kliku myší. Od panelu záložek dolů je už pouze samotná OpenWebKitSharp komponenta vykreslující obsah stránek. Panel v pravé části je tzv. panel nabídek, umožňující uživateli spouštět ostatní podaplikace, otvírat nová okna, měnit velikost stránky (zoom), a tak podobně.
Jelikož je tato komponenta do formuláře vkládána programově, je uvnitř formuláře vytvořena metoda addEvent(), vytvářející a nastavující veškeré události do komponenty, které byli autorem toho projektu implementovány. browser.DocumentTitleChanged += new EventHandler(wkB_DocumentTitleChanged)
Událost objevující se při změně titulku stránky browser.NewWindowCreated += wkB_NewWindowCreated;
35
Událost volající při vytvoření nového okna skrze link stránky browser.FaviconAvailable += wkB_FaviconAvailable;
Událost objevující se při dostupnosti favicon stránky. browser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(wkB_DocumentCompleted);
Událost objevující se při dokončení načítání stránky. browser.StatusTextChanged += new StatusTextChanged(wkB_StatusTextChanged);
Událost objevující se při změně statusu stránky. browser.SourceSiteDetected += browser_SourceSiteDetected;
Událost objevující se při žádosti o zdrojové kódy stránky. browser.CanGoBackChanged += new CanGoBackChanged(wkB_CanGoBackChanged);
Událost objevující se při změně stavu metody jít zpět. browser.CanGoForwardChanged += new CanGoForwardChanged(wkB_CanGoForwardChanged);
Událost objevující se při změně stavu metody jít vpřed. browser.ShowJavaScriptAlertPanel += new ShowJavaScriptAlertPanelEventHandler(wkB_ShowJavaScriptAlertPanel);
Událost objevující se při požadavku na zobrazení JavaScript Alert. browser.ShowJavaScriptConfirmPanel += new ShowJavaScriptConfirmPanelEventHandler(wkB_ShowJavaScriptConfirmPanel)
Událost objevující se při požadavku o zobrazení potvrzovacího okna. browser.ShowJavaScriptPromptBeforeUnload += new ShowJavaScriptPromptBeforeUnloadEventHandler(wkB_ShowJavaScriptP romptBeforeUnload);
Událost objevující se při JavaScript požadavku na prompt panel, skrze prompt() funkci, při uzavírání rámce. browser.ShowJavaScriptPromptPanel += new ShowJavaScriptPromptPanelEventHandler(wkB_ShowJavaScriptPromptPanel);
Událost objevující se při JavaScript požadavku na prompt panel, skrze prompt() funkci. browser.Navigating += new WebKitBrowserNavigatingEventHandler(wkB_Navigating);
Událost objevující se při průběhu navigování na stránku. browser.ProgressChanged += new WebKit.ProgressChangedEventHandler(wkB_ProgressChanged);
Událost objevující se při změně progresu při načítání (nejen) stránky.
36
browser.GeolocationPositionRequest += new GeolocationRequest(wkB_GeolocationPositionRequest);
Událost objevující se při požadavku o Geolokaci. browser.PopupCreated += new NewWindowCreatedEventHandler(wkB_PopupCreated);
Událost objevující se při požadavku o vytvoření nového vyskakovacího okna. browser.CloseWindowRequest += new EventHandler(wkB_CloseWindowRequest);
Událost objevující se při požadavku na uzavření okna. browser.DangerousSiteDetected += new EventHandler(wkB_DangerousSiteDetected);
Událost objevující se při najetí na stránku definovanou jako nebezpečnou. Dále je díky tomuto vytvořena veřejná metoda WebKitBrowser wkB, vracející vždy instanci OpenWebKitBrowser komponenty. Tato metoda je vytvořena i z důvodu jednoduchého přístupu k této instanci z jiného, především hlavního formuláře (Main.cs).
Pro propojení OpenWebKitSharp komponenty s hlasovým rozpoznáváním a umožnění uživateli vkládat informace do textových polí pomocí svého hlasu, bylo v události wkB_DocumentCompleted vytvořeno pomocí JavaScriptu automatické vkládání ikonek mikrofonu vedle všech textových polí (), které po kliknutí spustí hlasové rozpoznávání a následně vloží textovou podobu řeči do textového pole. JavaScriptový kód je ukázán níže.
var inputElements = document.getElementsByTagName('input'); var pocet = inputElements.length; for(var i = 0; i < pocet; i++){ if(inputElements[i].type == "text"){ inputElements[i].style.textIndent = '20px'; var pos = inputElements[i].getBoundingClientRect(); var al = 'voice:' + i; var all = 'voice:' + i; inputElements[i].classList.add(al);
37
var
div
=
float:left;'>
"
style='z-index:
1000;
onClick='alert("
+
cursor: all
pointer; +
");'
src='http://janhladik.cz/bp/microphone.png' width='20' class='voice:" + i +"' />
"; inputElements[i].outerHTML+= div; } }
Pro
provedení
skriptu
v rámci
stránky
je
potřeba
zavolat
metodu
wkB.GetScriptManager.EvaluateScript(myscript);
Na obrázku číslo 15 je vidět výsledek JavaScript kódu.
Obr. 15 Automaticky vložený mikrofon do stránky uhk.cz. Zdroj: Vlastní zpracování
Pro možnost ukládat cookies, zaznamenávat cache soubory, povolit či zakázat JavaScript jsou v OpenWebKitSharp připraveny vlastnosti:
AllowCookies
o Povolení nebo zakázání Cookies.
UseJavaScript
o Povolení nebo zakázání JavaScriptu.
UseCache
o Používání nebo nepoužívání Cache paměti. Pro spuštění tzv. Soukromého režimu postačí využít vlastnost PrivateBrowsing a nastavit ji na true. Po zapnutí tohoto režimu se přestane zaznamenávat historie, přestanou zapisovat Cache soubory, atp.
Má-li uživatel zapnuto více karet je možné, že přestane být orientace mezi nimi přehledná a právě proto byla vytvořena funkce nazvaná Preview. Tato funkce po najetí na jakoukoliv kartu po uplynutí intervalu jedné vteřiny zobrazí miniaturu právě zobrazené stránky. Obrázek číslo 16 zobrazuje podobu Preview v apliakci.
38
Obr. 16 Ukázka funkce Preview. Zdroj: Vlastní zpracování
5.3.4 History.cs History.cs je formulář obstarávající celou historii prohlížeče. Při zobrazení formuláře se vždy načtou veškeré záznamy uložené v souboru history.txt, který je uložený ve skrytém adresáři AppData pod adresářem pojmenovaným jako aplikace Krajta. Veškeré záznamy ze souboru se vkládají do tabulky (dataGridView). Obrázek číslo 17 ukazuje podobu History.cs formuláře. Historie prohlížeče je zaznamenávána
v komponentě
OpenWebKitSharp,
v události
DocumentTitleChanged(). Pro jednodušší záznam a práci se záznamy je historie zaznamenávána prvně pomocí třídy Dictionary a až poté se záznam zapíše do textového souboru history.txt. Dictionary<string, string> history = new Dictionary<string, string>();
Do prvního parametru se vkládá titulek stránky a do druhého Url adresa stránky.
39
Obr. 17 Podoba History.cs formuláře. Zdroj: Vlastní zpracování
5.3.5 Záložky Pro práci se záložkami není vytvořen žádný speciální formulář. Pouze při vytváření nové záložky vyskočí dialogové okno, viz obrázek číslo 18, do kterého se vepíše nadpis záložky a Url adresa, na kterou má odkazovat, a po přidání se záložka automaticky zobrazí v panelu záložek, který je vidět například na obrázku číslo 16.
Obr. 18 Podoba dialogového okna pro vytváření nových záložek. Zdroj: Vlastní zpracování
Pro záznam záložek se opět využívá třída Dictionary, akorát navíc ještě se strukturou ValuePair, která v sobě místo jedné hodnoty uchovává dvě.
40
struct ValuePair { public string imgUrl; public string url; } Dictionary<string, ValuePair> book = new Dictionary<string, ValuePair>();
Pokud by se uživatel rozhodl, že by nově přidanou záložku chtěl mít jako první v panelu záložek, může toho docílit jednoduchým přetáhnutím požadované záložky na určité místo. Právě kvůli tomuto byla naimplementována událost DragDrop, DragEnter a GiveFeedBack.
Událost DragEnter slouží pouze k utvoření pohybového efektu. Událost DragDrop jednoduše přemísťuje záložky mezi sebou. Vždy se vybere prvek, za nebo před který se má záložka umístit a pomocí indexace se potomci panelu záložek podle potřeby přemístí. Aby bylo možné určit, jaký potomek se má přemístit, je pro každého potomka přidána událost MouseMove, ve které se zneviditelní kurzor, z důvodu lepší přehlednosti, vezme se požadovaná záložka a zavolá se v panelu záložek DoDragDrop(). Control source = (Control)e.Data.GetData(dragtype); Control target = this.pnlBookMarks.GetChildAtPoint(this.pnlBookMarks.PointToClient(new Point(e.X, e.Y))); if (target != null) { int ix = this.pnlBookMarks.Controls.GetChildIndex(target); this.pnlBookMarks.Controls.SetChildIndex(source, ix); }
Událost GiveFeedback už pouze nastavuje kurzor do výchozího stavu.
5.3.6 Nastavení O nastavení celé aplikace se stará formulář Setting.cs. Tento formulář je rozdělen do šesti karet (oken): 1. General a. Zde se nastavuje domácí stránka, funkčnost stahování, případně kam se má stahovat.
41
2. Tab a. Natavení karet prohlížeče. 3. Privacy a. Karta umožňující vymazat Cookies, historii, Cache paměť a též nastavení, zda se má zaznamenávat historie. 4. Voice Recognition a. Zde se nastavují veškeré uživatelské požadavky ohledně práce s hlasovým rozpoznáváním. Je zde výběr jazyka, mikrofonu, jaké rozpoznávání se má využívat a také tu je možnost přidávat znalost slov pro technologii Microsoft Speech Recognition. 5. Security a. Karta zabývající se zabezpečením prohlížeče. Nastavení Cookies, Cache paměti, detekování nebezpečných stránek, atp. 6. Chat a. Karta nastavující IP adresu a Port pro lokaci serveru Chatu. Nastavení aplikace se ukládá do souboru config.conf, který se nachází opět v adresáři Krajta, schovaném v adresáři AppData.
5.4 Ostatní funkce Tato část se zabývá popisem dodatečných funkcí (miniaplikací) umožňující uživateli psát rychlé poznámky či dlouhé texty s obrázky, počítat základní výpočty a rychlé sdílení příspěvků s přáteli pomocí vkládání na zeď uživatelova Facebooku.
5.4.1 Kalkulačka Miniaplikace Kalkulačka funguje stejně jako základní kalkulačka od společnosti Microsoft. Kalkulačka pracuje se dvěma Labely, přičemž první Label je pouze informativní a slouží k zachování historie výpočtů, tedy zaznamenává typy výpočtů, násobení, dělení, Mod, odmocnění, atp. Druhý Label slouží k zobrazování aktuálního výsledku a zápisu čísel. Ukázka kódu níže ukazuje funkci odmocnění hodnoty.
Pokud uživatel odmocňuje odmocněné číslo, vepíše se do informačního Labelu znovu text sqrt(…), pokud ne, pouze se přidá text sqrt(…) a poté se hodnota odmocní a výsledek se vloží do zobrazovacího Labelu. Clear = 4 znamená, že se do informačního labelu odebere posledně zadaný text. Na obrázku číslo 19 je vidět podoba miniaplikace Kalkulačky.
Obr. 19 Vizuální podoba kalkulačky. Zdroj: Vlastní zpracování
5.4.2 Poznámky Miniaplikace poznámky slouží k rychlému zaznamenávání informací, či vytváření dlouhých textů bez potřeby velké stylizace. Myšlenka při vytváření této miniaplikace byla usnadnit uživateli zápis jakéhokoliv textu, aniž by musel zbytečně spouštět další aplikace. Tento editor oplývá základními funkcemi, jako
43
využívá program Microsoft Office Word. Uživatel může různě zarovnávat text, využívat v systému nainstalované fonty, vytvářet odrážkový text, využívat funkce zpět i vpřed, nastavovat stránku, zobrazit si náhled pro tisk a též tisknout text. Dále je možné vkládat obrázky přímo do textu a ukládat do RTF formátu. Uživatel má také umožněno vyhledávat text a také při vyhledávání automaticky zaměňovat požadovaný text. V rámci aplikace se tento editor nalezne ve formuláři pod jménem
Word.cs.
Pro
záznam
textu
i
obrázků
se
využívá
knihovna
ExtendedRichTextBox.dll, která rozšiřuje existující richTextBox o různé funkce, například o funkci tisku. Chce-li uživatel měnit barvu textu, zavolá se vždy ColorDialog
a ten umožní výběr všech dostupných barev. Pro editaci Fontů se volá
FontDialog.
Díky jednoduché práci s ExtendedRichTexboxem se editace textů dělá
poměrně snadno, pro obarvení vybraného textu plně stačí využít vlastnost SelectionColor
a nastavit požadovanou barvu. Za pomocí ColorDialog tato funkce
Pro využití kurzívy, podtrženého či tučného textu je kód obdobný, ale využívá se vlastnost SelectionFont. V ukázce kódu se prvně zaznamená aktuální Font z důvodu předání vlastností, jako je velikost, styl, druh a poté se nastaví požadovaná vlastnost, FontStyle.
Pro vkládání obrázků skrze funkci Insert Image se nejprve otevře OpenFileDialog, okno pro výběr obrázku. Poté se pomocí cesty k obrázku vytvoří Image, ten se vloží do Clibboardu a má-li formát, který je možné do ExtendeRichTextBoxu vložit, vloží se do textu pomocí metody Paste(). OpenFileDialog1.Title = "RTE - Insert Image File"; OpenFileDialog1.DefaultExt = "rtf"; OpenFileDialog1.Filter = "Bitmap Files|*.bmp|JPEG Files|*.jpg|GIF Files|*.gif"; OpenFileDialog1.FilterIndex = 1; OpenFileDialog1.ShowDialog(); if (OpenFileDialog1.FileName == "") { return; } string strImagePath = OpenFileDialog1.FileName; Image img; img = Image.FromFile(strImagePath); Clipboard.SetDataObject(img); DataFormats.Format df; df = DataFormats.GetFormat(DataFormats.Bitmap); if (this.rtbDoc.CanPaste(df)) { this.rtbDoc.Paste(df); }
Pro zachování textu i v případě, když uživatel zapomene uložit svůj text, se při vytváření nové stránky či uzavírání dokumentu vždy objeví hláška, že dokument nebyl uložen a zde se má uložit. Obrázek číslo 20 zobrazuje podobu Editoru.
45
Obr. 20 Vizuální podoba Editoru poznámek (Word.cs). Zdroj: Vlastní zpracování
5.4.3 Facebook Wall Facebook Wall je miniaplikace, která umožňuje uživateli pod svým účtem na stránkách facebook.com, přispívat na svoji zeď příspěvky. Uživatel tak může jednoduše a velmi rychle oznamovat své zajímavosti svým přátelům aniž by musel chodit na další zařízení nebo stránky. Facebook Wall využívá knihovnu facebook.dll, kterou vytvořila skupina Outercurve Foundation [26]. Tato knihovna je produktem třetí strany, ale již je zaznamenána samotnou společností Facebook. Chce-li vývojář využívat API Facebooku musí se prvně zaregistrovat na stránkách Facebooku jako vývojář a tím obdrží kód, díky němuž budou jeho požadavky zpracovány. Miniapliakce je rozdělena na dvě části. Přihlašovací část a část pro sdílení příspěvků na zeď.
Přihlašovací část využívá komponentu WebBrowser od společnosti Microsoft, která je využívána pro přihlášení uživatele na Facebook, přičemž se získá jeho
46
přístupový token. Tento token je využit pro přidávání příspěvků na uživatelovu zeď. O přihlášení na Facebook se stará formulář pojmenovaný fcbLogin.cs. Pro přihlášení
skrze
WebBrowser
komponentu
https://www.facebook.com/dialog/oauth
je
nutné
přejít
na
adresu
a přidat parametry, jako jsou:
Client_id
o Client_id je kód, který vývojář obdržel při registraci jako vývojář.
Redirect_uri
o Představuje adresu, na kterou se má prohlížeč přesměrovat po přihlášení. o Na dané adrese se dozví, zda se přihlásil úspěšně, či neúspěšně.
Po úspešném přihlášení se formulář frmLogin.cs uzavře a přejde se do formuláře Main.cs, ve kterém se objeví panel s uživatelovým profilovým obrázkem a možností sdílet příspěvky, odkazy a obrázky se svými přáteli. Obrázek číslo 21 znázorňuje, jak takový panel vypadá.
Obr. 21 Podoba panelu pro sdílení příspěvků na uživatelovu zeď Zdroj: Vlastní zpracování
47
Pro získávání údajů skrze Facebook Api je vytvořena pomocná třída FBClass.cs, Třída v sobě obsahuje metody:
GetUserID
GetUserName
o Metoda pro získání uživatelova ID. o Metoda pro získání uživatelova jména.
Post
o Metoda pro sdílení textových příspěvků či příspěvků s odkazem.
PostImage
o Metoda pro sdílení textových příspěvků s obrázky. Těla metod: public static string GetUserID(string AccessToken) { FacebookClient fb = new FacebookClient(AccessToken); dynamic MyData = fb.Get("/me"); return MyData.id; } public static string GetUserName(string AccessToken) { FacebookClient fb = new FacebookClient(AccessToken); dynamic MyData = fb.Get("/me"); return MyData.name; } public static bool Post(string AccessToken, string Status, string Link = "") { try { FacebookClient fb = new FacebookClient(AccessToken); Dictionary<string, object> PostArgs = new Dictionary<string, object>(); PostArgs["message"] = Status; if (Link != "") { PostArgs["link"] = Link; } fb.Post("/me/feed", PostArgs); return true; } catch (Exception ex) { System.Windows.Forms.MessageBox.Show(ex.Message); return false; } }
48
public static bool PostImage(string AccessToken, string Status, string ImagePath) { try { FacebookClient fb = new FacebookClient(AccessToken); var imgStream = File.OpenRead(ImagePath); dynamic res = fb.Post("/me/photos", new { message = Status, file = new FacebookMediaStream { ContentType = "image/jpg", FileName = Path.GetFileName(ImagePath) }.SetValue(imgStream) }); return true; } catch (Exception ex) { System.Windows.Forms.MessageBox.Show(ex.Message); return false; } }
Princip všech metod je takový, že se pomocí třídy FacebookClient a přístupového tokenu dostane k uživatelovým datům a pak se provede požadovaná akce, Get/Post. Get pro získání informací. Post pro sdílení příspěvků.
49
6 Zhodnocení vlastního řešení Software Krajta je plně funkční aplikace. Svojí funkcionalitou plně odpovídá na začátku vytyčeným požadavkům.
Mezi výhody patří intuitivní uživatelské prostředí, které dovoluje uživateli pracovat se všemi funkcemi pomocí jednoho až dvou kliků. Výhodou je též možnost vytvářet rozsáhlé poznámky s podporou obrázků. Za další výhodu je možné považovat možnost komunikace uživatelů právě využívajících tuto aplikaci a možnost sdílet příspěvky skrze službu Facebook. Jelikož vzhled celé aplikace se podobá vzhledům konkurenčních produktů, uživatel si nemusí zvykat na nové prostředí a rovnou může přejít k práci.
Značnou nevýhodou bude při otevření mnoha oken aplikace její menší rychlost načítání a přepočítávání velikosti všech obsažených komponent.
Díky rozdělení částí projektu do jednotlivých adresářů je možné při případném rozšiřování funkcionality projektu, upravovat pouze ty věci, které se nachází přímo v daném adresáři. V případě změny vzhledu je nutné pamatovat na to, že téměř každá komponenta se při změně velikosti formuláře přemístí nebo změní velikost.
50
7 Shrnutí výsledků V práci se úspěšně povedlo propojit veškeré použité technologie. Dále se povedlo zprovoznit všechna API rozhraní k dosažení požadovaných funkcí.
Výsledný software Krajta podporuje pouze Anglickou lokalizaci a je plně funkční na platformě Windows. U některých funkcí lze lokalizaci změnit. I přes potíže při vykreslování do neklientské oblasti se podařilo vytvořit podobně profesionální vzhled, jako mají konkurenční aplikace. Dále bylo vytvořeno plně funkční rozpoznávání hlasu za pomocí dvou technologií.
V rámci miniaplikací vznikly aplikace, které usnadňují a urychlují práci uživatelům. Vzhled miniaplikací odkazuje také na obdobné konkurenční aplikace.
Výsledky této práce přinesly cenné znalosti v jazyce C# a jeho principů. Dále výrazně rozšířily znalosti o způsobu vytváření vlastních komponent a způsobu využívání Setting souborů. Díky velkému využívání různých API rozhraní bylo možné si prakticky vyzkoušet mnoho přístupů k jednotlivým rozhraním.
51
8 Závěry a doporučení Po zhodnocení vlastního vývoje softwaru Krajta, z hlediska použití, dostupných funkcí, uživatelské přívětivosti a porovnání těchto výsledků s existujícími softwary jsem dospěl k následujícím závěrům.
Z hlediska funkcionalit, jako jsou renderování stránek, vytváření nových oken, náhled stránek, vyhledávání na stránce aj., vyšlo vlastní řešení Krajta na srovnatelné úrovni s ostatními produkty. Slabším místem Krajty je nemožnost centrální práce s Cookies, Cache a také slabší možnost zabezpečení. I když pro potřeby studentů při studijní práci se jeví zabezpečení dostatečné.
K zachování přehlednosti a rychlosti celé aplikace se doporučuje studentům při studijní práci mít aktuálně otevřeno do dvaceti karet. Při vyšším počtu otevřených karet se chod prohlížeče zpomalí, což v důsledku znehodnotí komfort práce.
Z hlediska funkcionality rozpoznávání hlasu se doporučuje využívat technologie od společnosti Google, především z důvodu, že je možné hned od začátku užívat jakákoliv slova. Naopak technologie od společnosti Microsoft se musí prvně naučit požadovaná slova a až poté je možné plně využívat jejich technologii.
Poznámkový editor se dá využívat jak pro krátké jednoduché poznámky, tak i pro dlouhé, formátované texty s obrázky. I přes počet naimplementovaných možností práce textem by pro náročnější formátování bylo lepší využít produkt třetích stran, například Microsoft Office Word.
Miniaplikace kalkulačka obsahuje pouze základní funkce, jakou jsou násobení, dělení, odečítání, odmocnění, 1/x, atp. Pro využívání logických funkcí kalkulačky je nutné opět využít produkt třetích stran. Do budoucna je však možné bez problémů doimplementovat tyto logické funkce.
52
9 Seznam použité literatury [1] Pěchouček, Michal. Úvod do filosofie umělé inteligence [online]. [cit. 201423-08]. Dostupné na www: [2] Richard E. Lee. Questioning Nineteenth-Century Assumptions about Knowledge, III: Dualism. United States of America, State University of New York Press, Albany, 2010, 204 s. ISBN: 978-1-4384-3408-7 [3] Oettinger, G. A, Communcations of the ACM. Svazek 9. Vydání 1. ACM New York, Leden 1966. 45. ISSN:0001-0782 [4] Speech Recognition [online]. [cit. 2015-29-1]. Dostupné
na
www:
[5] Tim Berners-Lee. The WorldWideWeb browser. [online]. [cit. 2014-23-8]. Dostupné na www: [6] Juha-Pekka Tikka.The Greatest Internet Pioneers You Never Heard Of: The Story of Erwise and Four Finns Who Showed the Way to the Web Browser [online]. Xconomy, Inc, 3.3.2009, [cit. 2014-23-8]. Dostupné na www: [7]
W3Schools. Browser Statics and Trends [online]. [cit. 2014-24-8]. Dostupné na www:
[8] SWMAG. Internetové prohlížeče a renderovací jádra – Historie a srovnání. [online]. [cit. 2015-27-1]. Dostupné na www: [9] Steven. Opera 7 – Beta 1. [online]. [cit. 2015-27-1]. Dostupné na www: [10] Internet Browser Software Revies: Reviews and comparsion [online]. [cit. 2014-24-8]. Dostupné na www: [11] W3Schools. CSS3 Browser support. [online]. [cit. Dostupné na
2014-24-8]. www:
[12] Wikipedia. Comparsion of layout engines (HTML5). [online]. [cit. 2014-24-8]. Dostupné na www:
53
[13] Gaucher Romain. HTML 5 converage. [online]. [cit. 2014-24-8]. Dostupné na www: [14] Beal Vangie.World Wide Web. [online]. [cit. 2014-25-8]. Dostupné na www: [15] Základní informace o TCP protokolu [online]. [cit. 2015-30-1]. Dostupné na www: [16] Síťové modely [online]. [cit. 2015-30-1].
Dostupné
na
www:
[17] Protokol TCP/IP (Transmission Control Protocol/InternetProtocol) [online]. [cit. 2015-30-1]. Dostupné na www: [18] UDP protokol [online]. [cit. 2015-30-1]. Dostupné
na
www:
[19] Protokol UDP (User Datagram Protocol) [online]. [cit. 2015-30-1]. Dostupné na www: [20] Oliveira. A Highly configurable MDI tab control from scratch [online]. [cit. 2015-30-1]. Dostupné na www: [21] Csharp.net-tutorials. Inorduction. [online]. [cit. 2014-25-8]. Dostupné na www: [22] W3C. Extensible Markup Language (XML). [online]. [cit. 2014-25-8]. Dostupné na www: [23] W3Schools. Introduction to XML. [online]. [cit. 2014-25-8]. Dostupné na www: [24] Úvod do JSON. [online]. [cit. 2015-22-4]. Dostupné na: [25] open-webkit-sharp [online]. [cit. 2015-15-04].
Dostupné
na
www:
[26] Facebook SDK for .NET [online]. [cit. 2015-17-04]. Dostupné na www:
54
10 Přílohy 1) DVD – obsahuje aplikaci Krajta, zdrojové kódy a výtisk bakalářské práce.
