Vedení projektu mobilních aplikací WebCAD a mobilní aplikace pro ios

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Diplomová práce

Vedení projektu mobilních aplikací WebCAD a mobilní aplikace pro iOS Bc. Lucie Steinocherová

Vedoucí práce: Ing. Josef Gattermayer

24. června 2013

Poděkování Ráda bych poděkovala vedoucímu mé diplomové práce Ing. Josefu Gattermayerovi za odborné vedení.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl 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ů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.

V Praze dne 24. června 2013

.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2013 Lucie Steinocherová. 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 Steinocherová, Lucie. Vedení projektu mobilních aplikací WebCAD a mobilní aplikace pro iOS. Diplomová práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2013.

Abstract The thesis objective is to design and develop a mobile application for displaying 2D data from the WebCAD project. Theoretical part of thesis covers the creation of application wireframes for Android and iOS operating systems and analyses the features of existing iOS graphical frameworks to select the most suitable one for further implementation. An outcome of the following in–depth SWOT analysis summarizes both advantages and disadvantages of mobile and web interfaces of WebCAD project. Finally, the implementation part describes the process of implementation of iOS–based mobile application. Keywords WebCAD, iOS, Android, OpenGL ES, Core Graphics, wireframe

ix

Abstrakt Tato diplomová práce si klade za cíl návrh a implementaci mobilní aplikace zobrazující 2D CAD data z projektu WebCAD. V teoretické části se práce zabývá návrhem wireframu aplikací pro iOS a Android. Z analýzy dostupných grafických frameworků pro platformu iOS byl vybrán vhodný pro implementaci vykreslování grafických dat. Důkladná SWOT analýza odhalila hlavně silné a slabé stránky mobilní a webové části aplikace WebCAD. Praktická část je věnována implementaci iOS aplikace, která zobrazuje 2D CAD data ze serveru. Klíčová slova WebCAD, iOS, Android, OpenGL ES, Core Graphics, wireframe

x

Obsah Úvod

1

1 Metodika vedení projektu mobilních zařízení

3

2 Návrh aplikace 2.1 Rešerše existujících řešení . . . . . . . . . . 2.2 Návrh uživatelského rozhraní . . . . . . . . . 2.3 Navržené wireframy . . . . . . . . . . . . . . 2.4 Analýza dostupných grafických frameworků . 2.5 SWOT analýza . . . . . . . . . . . . . . . . 3 Analýza iOS aplikace 3.1 Funkční požadavky . 3.2 Nefunkční požadavky 3.3 Případy užití . . . . 3.4 Diagram tříd . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

4 Realizace 4.1 Použité technologie . . . . . . . . . . . 4.2 Přihlášení . . . . . . . . . . . . . . . . 4.3 Grafická primitiva . . . . . . . . . . . . 4.4 Použité externí knihovny . . . . . . . . 4.5 Návrhový vzor Model–View–Controller 4.6 Screenshoty aplikace . . . . . . . . . . 4.7 Testování . . . . . . . . . . . . . . . . 4.8 Budoucí vývoj . . . . . . . . . . . . . . xi

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

. . . .

. . . . . . . .

. . . . .

5 5 11 29 42 61

. . . .

69 69 70 70 71

. . . . . . . .

75 75 75 76 78 79 81 86 87

Závěr

89

Literatura

91

A Seznam použitých zkratek

95

B Obsah přiloženého CD

97

xii

Seznam obrázků 1.1

Přehled prodeje mobilních operačních systémů . . . . . . . . . .

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 2.14 2.15 2.16 2.17 2.18 2.19 2.20 2.21 2.22 2.23 2.24 2.25

Orientace obrazovky . . . . . . . . . . . . . . . . . . . . . . Stavový řádek . . . . . . . . . . . . . . . . . . . . . . . . . . Špatné tlačítko „Zpět“ . . . . . . . . . . . . . . . . . . . . . Navigační lišta . . . . . . . . . . . . . . . . . . . . . . . . . Disclosure indicator . . . . . . . . . . . . . . . . . . . . . . . Refresh Control . . . . . . . . . . . . . . . . . . . . . . . . . Tlačítko . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Textové pole s nápovědou . . . . . . . . . . . . . . . . . . . Upozornění s jedním tlačítkem . . . . . . . . . . . . . . . . . Action Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . Aktivity indikátor s popiskem . . . . . . . . . . . . . . . . . Popisek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Funkčnost skrytá v menu . . . . . . . . . . . . . . . . . . . . Hustota Android . . . . . . . . . . . . . . . . . . . . . . . . Tlačítka Android . . . . . . . . . . . . . . . . . . . . . . . . Chování tlačítek Android . . . . . . . . . . . . . . . . . . . . Main action bar . . . . . . . . . . . . . . . . . . . . . . . . . Styly tlačítek Android . . . . . . . . . . . . . . . . . . . . . Tlačítko bez okrajů integrované do tabulky . . . . . . . . . . Aktivity bar . . . . . . . . . . . . . . . . . . . . . . . . . . . Aktivity indikátor . . . . . . . . . . . . . . . . . . . . . . . . Upozornění bez titulku . . . . . . . . . . . . . . . . . . . . . Popisky u upozornění . . . . . . . . . . . . . . . . . . . . . . Android dialer s tabem v Action bar vs. Bottom tabs v iOS Android action bar s tlačítkem up vs. iOS tlačítko „Zpět“ . xiii

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

4 13 13 14 14 15 16 16 17 18 19 19 19 20 21 21 23 23 24 24 25 25 26 26 27 28

2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.35 2.36 2.37 2.38 2.39 2.40 2.41 2.42 2.43 2.44 2.45 2.46 2.47 2.48 2.49 2.50 2.51 2.52

Porovnání obrazovky Nastavení v Androidu a iOS Obrazovka „Login“ (iOS) . . . . . . . . . . . . . Upozornění při přihlášení (iOS) . . . . . . . . . . Obrazovka „Projekty“ (iOS) . . . . . . . . . . . . Upozornění při aktualizaci tabulky (iOS) . . . . . Obrazovka „Detail“ (iOS) . . . . . . . . . . . . . Upozornění při aktualizaci scény (iOS) . . . . . . Obrazovka „Nastavení“ (iOS) . . . . . . . . . . . Obrazovka s Action Sheet (iOS) . . . . . . . . . . Obrazovka „Login“ (Android) . . . . . . . . . . . Obrazovka „Projekty“ (Android) . . . . . . . . . Upozornění při odhlášení (Android) . . . . . . . . Obrazovka „Detail“ (Android) . . . . . . . . . . Obrazovka „Nastavení“ (Android) . . . . . . . . Upozornění žádné připojení (Android) . . . . . . Malířův model . . . . . . . . . . . . . . . . . . . Systém souřadnic . . . . . . . . . . . . . . . . . . Logo OpenGL ES . . . . . . . . . . . . . . . . . . Model Klient–server . . . . . . . . . . . . . . . . Nástroj Activity monitor . . . . . . . . . . . . . . Okno „Track pane“ . . . . . . . . . . . . . . . . . Nastavení . . . . . . . . . . . . . . . . . . . . . . Graf zatížení CPU . . . . . . . . . . . . . . . . . Graf využití paměti . . . . . . . . . . . . . . . . . Graf celkového zatížení . . . . . . . . . . . . . . . Matice SWOT webová část . . . . . . . . . . . . Matice SWOT mobilní část . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

29 30 31 32 32 33 34 35 36 37 38 39 40 41 41 43 46 47 50 51 52 53 58 59 60 67 68

3.1 3.2 3.3

Use Case model . . . . . . . . . . . . . . . . . . . . . . . . . . . Diagram tříd „Classes“ . . . . . . . . . . . . . . . . . . . . . . . Diagram tříd „Shapes“ . . . . . . . . . . . . . . . . . . . . . . .

71 72 74

4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9

GL_POINTS . . . . . . . . . . . . . GL_LINES . . . . . . . . . . . . . . GL_LINE_STRIP . . . . . . . . . . GL_LINE_LOOP . . . . . . . . . . GL_TRIANGLES . . . . . . . . . . GL_TRIANGLE_STRIP . . . . . . GL_TRIANGLE_FAN . . . . . . . Architektura Model–View–Controller Screenshoty „Login“ obrazovka . . .

76 76 77 77 77 78 78 80 81

xiv

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

4.10 4.11 4.12 4.13 4.14

Screenshot „Login“ obrazovka – není připojení k síti Screenshot obrazovka „Projekty“ . . . . . . . . . . . Gesto pinch . . . . . . . . . . . . . . . . . . . . . . . Screenshot obrazovky „Detail“ – vykresluje scénu . . Screenshot obrazovka „Nastavení“ . . . . . . . . . .

xv

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

82 83 84 85 86

Seznam tabulek 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 2.14 2.15 2.16 2.17 2.18 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27

Základní informace AutoQ3D CAD . . . . . . . . . . . Základní informace AutoCAD 360 . . . . . . . . . . . . Základní informace Autodesk 360 . . . . . . . . . . . . Základní informace CAD View 3D MFC . . . . . . . . Základní informace CADView . . . . . . . . . . . . . . Základní informace TurboViewer X . . . . . . . . . . . Porovnání existujících řešení . . . . . . . . . . . . . . . Výsledky pro 80 vykreslených primitiv (CG) . . . . . . Výsledky pro 1600 vykreslených primitiv (CG) . . . . . Výsledky pro 4000 vykreslených primitiv (CG) . . . . . Výsledky pro 8000 vykreslených primitiv (CG) . . . . . Výsledky pro 80 vykreslených primitiv (OpenGL ES) . Výsledky pro 1600 vykreslených primitiv (OpenGL ES) Výsledky pro 4000 vykreslených primitiv (OpenGL ES) Výsledky pro 8000 vykreslených primitiv (OpenGL ES) Výsledná tabulka Core Graphics . . . . . . . . . . . . . Výsledná tabulka OpenGL ES 2.0 . . . . . . . . . . . . Seznam slabých stránek webové části . . . . . . . . . . Seznam silných stránek webové části . . . . . . . . . . Seznam slabých stránek mobilní části . . . . . . . . . . Seznam silných stránek mobilní části . . . . . . . . . . Hodnocení dopadu hrozeb . . . . . . . . . . . . . . . . Hodnocení dopadu příležitosti . . . . . . . . . . . . . . Hodnocení pravděpodobnosti vzniku hrozby/příležitosti Seznam hrozeb webové části . . . . . . . . . . . . . . . Seznam příležitostí webové části . . . . . . . . . . . . . Seznam hrozeb mobilní části . . . . . . . . . . . . . . . xvii

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

6 7 8 9 10 10 11 54 54 54 55 55 55 56 56 57 57 61 62 62 63 63 64 64 64 65 65

Seznam tabulek 2.28 Seznam příležitostí mobilní části . . . . . . . . . . . . . . . . . .

xviii

66

Úvod Od představení prvního takzvaného chytrého telefonu uběhlo již pár let a pro řadu z nás se stal nepostradatelným zařízením. Každým rokem stoupá jejich prodej na celém světě. Není tedy překvapením, že jakákoliv aplikace má většinou i svoji mobilní podobu. Společnosti vyrábějící tato zařízení se předhánějí ve výkonnosti, kvalitě a dalších parametrech. Chytrý telefon má svůj vlastní operační systém a díky tomu je možné instalovat různé aplikace. Telefony tak umožňují od zábavných funkcí jako je hrát hry, přehrávat video/hudbu, brouzdat na internetu, fotografovat a mnoho dalších až po pracovní záležitosti jako je prohlížet si různé dokumenty, kreslit výkresy, přístup do bankovního účtu, nebo videokonference. Uživatel si může vybrat z mnoha aplikací s různými funkcemi. Na projektu WebCAD pracuje několik studentů v rámci bakalářských a diplomových prací. Jedná se o ucelený ekosystém, který bude umožňovat vytvářet CAD (zkratka z anglického Computer aided design) výkresy pomocí webového prohlížeče a zobrazovat je na mobilních zařízeních. Veškerá data budou uložena na serveru, se kterým budou aplikace komunikovat. Každý uživatel má svůj účet, ke kterému se přihlašuje. Cílem této práce je připravit mobilní část celého projektu pro platformy iOS1 a AndroidTM2 . Mobilní aplikaci pro Android bude implementovat studentka v rámci bakalářské práce. V úvodu bude popsáno, proč byly vybrány právě tyto dva mobilní operační systémy. Dále následuje kapitola zabývající se návrhem aplikace. V první části budou nejdříve uvedeny rešerše existujících řešení. V druhé části následuje návrh uživatelského rozhraní pro obě platformy (iOS a Android). Budou popsána obecná pravidla návrhu uživa1 2

http://www.apple.com/cz/ios/what-is/ Android je ochranná známka Google Inc. (http://www.android.com/)

1

Úvod telského rozhraní, poté detailněji rozebráno jak používat samotné grafické elementy a na závěr zásadní rozdíly mezi návrhy iOS a Android. Protože grafických prvků je velké množství a tato práce není primárně zaměřena na pravidla návrhu uživatelského rozhraní, budou zohledněny pouze prvky použité v návrhu aplikací. V další podkapitole jsou představeny samotné návrhy uživatelského rozhraní. Ve třetí části následuje analýza dostupných frameworků, které lze použít pro implementaci vykreslování. Analýza zahrnuje referenční aplikace a jejich zátěžové testy. V poslední části bude popsána provedená SWOT analýza pro webovou a mobilní aplikaci. Následující kapitola se zabývá samotnou implementací aplikace pro telefony s operačním systémem iOS, která bude zobrazovat data ve 2D formátu. Uživatel si ve webovém rozhraní vytvoří výkres, který si může poté kdykoliv prohlédnout ve svém mobilním zařízení. Popsány budou požadavky na aplikaci, případy užití, použité technologie, screenshoty aplikace a další informace. Na závěr bude stručně zhodnocen výhled do budoucnosti aplikace a jejího dalšího vývoje.

2

Kapitola

Metodika vedení projektu mobilních zařízení V první řadě bylo důležité rozhodnout, pro jaké mobilní zařízení bude aplikace určena. Na trhu se vyskytují telefony od různých společností s opeR

račními systémy iOS, Android, Windows Phone3 , Symbian a dalšími. Podle analýzy společnosti Gartner [24] se v roce 2012 prodalo 1,75 miliardy mobilních zařízení koncovým zákazníkům. Velký podíl na trhu mají chytré telefony takzvané smartphony, jenom za poslední čtvrtletí stoupl jejich prodej o 38 % na 207,7 milionu kusů. Z analýzy společnosti Gartner nás nejvíce zajímala poslední část, která byla zaměřena na zastoupení operačních systémů v prodaných mobilních zařízeních. Největší podíl 69,7 % na trhu zabírá operační systém Android a s větším odstupem je na druhém místě operační systém iOS společnosti Apple4 se 20,9 %. Další operační systémy mají na trhu malý podíl (obrázek 1.1), a proto bylo rozhodnuto vyvinout aplikace pro systém Android a iOS. Dále bylo potřeba určit minimální verzi operačního systému, pro který bude aplikace určena. Ohledně iOS nebylo rozhodování těžké, protože majitelé těchto telefonů skoro vždy aktualizují své operační systémy na nejnovější verzi, pokud jim to jejich model telefonu dovolí. Společnost Apple ve svém tiskovém prohlášení uvedla, že do konce ledna 2013 se prodalo téměř 300 miliónů zařízení (iPhone, iPad a iPod touch)5 , které běží na nové verzi iOS 6, což je zhruba 60 % ze všech prodaných. [19] Vyvíjená aplikace bude 3

Windows Phone je registrovaná ochranná známka Microsoft Corporation v USA a ostatních zemích. 4 Apple je ochranná známka Apple Inc., registrované v USA a ostatních zemích. 5 iPhone, iPad, iPod touch jsou ochranné známky Apple Inc., registrované v USA a ostatních zemích.

3

1

1. Metodika vedení projektu mobilních zařízení

Obrázek 1.1: Přehled prodeje mobilních operačních systémů [24]

spustitelná pro operační systém iOS minimální verze 5.1 a novější verze 6+. iOS 5.1 je podporován pro iPhone 3GS a novější zařízení. Společnost Google Inc. analyzuje zařízení, která navštívila v předchozích 14 dnech Google PlayTM6 . Sleduje jejich verzi operačního systému nebo také velikost obrazovky. Ze statistiky, která skončila 1. května 2013 vyplývá, že 27,5 % uživatelů má v telefonu verzi 4.0.3–4.0.4 (označení Ice Cream Sandwich) a 26,1 % využívá verzi 4.1.x (označení Jelly Bean). Jedná se o dvě předposlední verze operačního systému Android, poslední nejnovější verzi 4.2.x využívá zatím jen 2,3 % (dostupné verze ke květnu 2013). [4] Při porovnání se staršími výsledky je patrné, že uživatelé aktualizují své operační systémy, nebo nakupují novější telefony, než tomu bylo dříve. Proto vyvíjená aplikace pro Android bude podporována pro verzi 4.0.3–4.0.4 a vyšší. Další krok bude navrhnout uživatelské rozhraní aplikací. Pro správnost návrhů budou nastudovány doporučené návody a pravidla pro iOS a Android. Poté budou vytvořeny návrhy uživatelského rozhraní. V iOS existují dva grafické frameworky. U obou frameworků bude provedena analýza a následně vybrán vhodnější pro implementaci grafické části aplikace. V poslední částí budou diskutovány požadavky na aplikaci a samotná realizace aplikace. Dalším krokům jsou věnovány samostatné kapitoly.

6

Google Play je online obchod pro mobilní zařízení se systémem Android, kde může uživatel nakupovat hudbu, aplikace, videa, knihy a jiné.

4

Kapitola

Návrh aplikace 2.1

Rešerše existujících řešení

Aplikace byly vyhledávány v obchodě Apple Store pro iOS a Google Play pro Android. Klíčová slova pro vyhledávání byla „Auto CAD“, „CAD View“ a „CAD“. Byly vybrány aplikace, které umožňují prohlížení výkresů, ale i jejich kreslení, protože některé oblíbené aplikace mají obě dvě funkce.

2.1.1

AutoQ3D CAD

AutoQ3D CAD7 umožňuje kreslit 2D a 3D modely. Pro 3D modely nabízí několik přednastavených ortogonálních a izometrických pohledů. Pohledy jsou horní, dolní, levý, pravý, přední, zadní a izometrický. Dále můžete svoje výkresy přibližovat/oddalovat, posouvat a otáčet. Uživatel může kreslit základní útvary jako je úsečka, kruh, obdélník, oblouk, trojúhelník, polygon, text, kouli, kvádr nebo vytvářet z 2D objektů objekty 3D. Dále nabízí řadu nástrojů pro modifikaci nakreslených objektů. Pro přesnější kreslení umožňuje přichytávání k určitým bodům (střed, koncový bod atd.). Pro manipulaci s více objekty najednou umožňuje jejich seskupování pomocí různých funkcí. Podporuje 3D formáty jako je STL, OBJ, DXF a nativní 3DQ s texturami.

7

http://www.autoq3d.com/

5

2

2. Návrh aplikace

Minimální podpora Aktuální verze Cena

iOS 3GS, iOS 6.1+ 2.2.1 26,99 Euro

Android 2.1 a vyšší 2.2.0 591,36 Kč (i demo verze)

Tabulka 2.1: Základní informace AutoQ3D CAD

Dostupné Google Play: https://play.google.com/store/apps/details?id=pkg.AutoQ3D Dostupné iTunes8 : https://itunes.apple.com/us/app/autoq3d-cad/id526622305

2.1.2

AutoCAD 360

Společnost AutoDesk9 vytvořila řadu mobilních, webových a desktopových AutoCAD nástrojů. Mobilní aplikace známá pod názvem AutoCAD WS byla v květnu 2013 přejmenovaná na AutoCAD 360 a dostala řadu vylepšení. Umožňuje navrhovat, kreslit, zobrazovat a sdílet AutoCAD výkresy. Základní aplikace je zadarmo, existuje ale i verze Pro, která rozšiřuje funkčnost a přináší další možnosti. Základní verze umí zobrazit 2D a 3D modely formátu DWG. Na výkresu lze pracovat v režimu offline a provedené změny uložit až při dostupnosti sítě. Kreslení a úprava tvarů je s velkou přesností a velmi jednoduché. S objekty lze pohybovat, rotovat a měnit jejich velikost. Kreslit lze základní útvary a jakékoliv objekty pomocí takzvaného chytrého pera, lze také přidávat poznámky, fotografie a další prvky. Umožňuje měřit vzdálenost mezi objekty. Přepínání mezi 2D a 3D pohledem. Úprava výkresu je možná ve 2D režimu. Uživatel si může vybrat z palety barev a přidat do výkresu i svoji GPS lokaci. Výkresy lze tisknout na dálku přímo z mobilního zařízení a také sdílet přes email ve formátu PDF nebo DWG. Bezplatné služby a aplikace podléhají podmínkám použití společnosti AutoDesk. Byla vyzkoušena bezplatná verze pro platformu iOS. Práce s aplikací je intuitivní, rychlá a uživatel se s ní naučí pracovat bez problémů. Při kreslení oceňuji také funkce undo a redo. Tato aplikace je velmi oblíbená, o čemž svědčí i její nadprůměrný rating 4,3 (hodnotilo 22 698 uživatelů) na Google Play. Placená verze PRO přináší: 8 9

6

iTunes je ochranná známka Apple Inc., registrované v USA a ostatních zemích. http://www.autodesk.cz/

2.1. Rešerše existujících řešení • Vytvářet nové výkresy. • Podpora souborů s větší velikostí. • Propojení s úložišti jako je DrobBox10 , Box11 a dalšími. • Pokročilá správa vrstev. • Vlastnosti a atributy • Uspořádávat knihovny • Kreslení souřadnic • Větší prostor pro ukládání výkresů • Podpora aplikace • Mnohem více možností a funkcí


iOS Android iOS 5.0+ 2.2 a vyšší 2.0 2.0 AutoCAD Pro 360 – 4,99 dolarů za měsíc AutoCAD 360 Pro – 49,99 dolarů za rok AutoCAD 360 Pro Plus – 99,99 dolarů za rok

Tabulka 2.2: Základní informace AutoCAD 360 Dostupné Google Play: https://play.google.com/store/apps/details?id=com.autodesk.autocadws Dostupné iTunes: https://itunes.apple.com/us/app/autocad-360/id393149734

2.1.3

Autodesk 360

Jak již název napovídá, patří do skupiny programů od společnosti AutoDesk. Umožňuje prohlížení výkresů, které nakreslíte pomocí ostatních nástrojů jako je například AutoCAD 360 nebo webová řešení. Každý, kdo chce aplikace využívat, se zaregistruje a vytvoří si účet. Výkresy jsou uloženy v cloudu12 (5GB pro bezplatnou verzi). Aplikace je zadarmo, ale je 10

http://www.dropbox.com http://www.box.com 12 http://www.cloud.cz/ 11

7

2. Návrh aplikace možné využívat i placené služby. Zobrazuje 2D a 3D modely ve formátu DWG a DWF. Aplikace byla vyzkoušena pro platformu iOS. Uživatel má po přihlášení ke svému účtu možnost zobrazit si aktivitu na serveru. Ta ukazuje, kdy byla nová verze projektu poslána do úložiště, komentáře nebo souhrnné informace o výkresu. Zaznamenala jsem menší problémy při zobrazení výkresu. I po několikátém obnovení a pokusu o načtení dat z úložiště nebylo možné si ho zobrazit. V nápovědě k aplikaci je uvedeno, že odesílání dokumentu může trvat delší dobu a mezitím se zobrazuje obecná ikonka, náhled není k dispozici. Pod ikonkou je napsáno „Probíhá převod dat“ a soubor je ve stavu „Překládání“. Převod dat trval poměrně dlouho a i po úspěšném převodu nešla data zobrazit. Po několika pokusech se data podařilo zobrazit. Výkres lze poté celkem rychle zvětšovat a zmenšovat, posunovat, vrátit do základního pohledu, komentovat nebo sdílet.


iOS iPhone 3GS, iOS 4.3+ 3.0.1 zdarma

Android 2.3 a vyšší 3.0.1

Tabulka 2.3: Základní informace Autodesk 360 Dostupné Google Play: https://play.google.com/store/apps/details?id=com.autodesk.ADRViewer Dostupné iTunes: https://itunes.apple.com/us/app/autodesk-360-mobile/id459112753

2.1.4

CAD View 3D MFC

Aplikace společnosti Afanche Technologies13 umožňuje prohlížet CAD soubory ve standardních formátech (STL, DXF a JT). Zobrazuje 3D data a umožňuje standardní funkce jako je posun výkresu, jeho přiblížení a oddálení nebo rotovat podél os. Aplikace také poskytuje funkci umožňující udělat 3D snímek modelu a sdílet ho pomocí emailu. Kromě prohlížení 3D dat můžete také spravovat a třídit projekty. Uživatel tak má možnost třídit je podle jména nebo data vytvoření a rychle tak najít model, který potřebuje. Projekty lze ukládat i do složek, které můžeme vytvářet, odstraňovat, nebo přesouvat soubory mezi složkami. Aplikace také poskytuje kompresi (dekompresi) souborů ve složce. Podporuje dokumenty v různém formátu jako 13

8

http://www.afanche.com/

2.1. Rešerše existujících řešení R

R

R

je Microsoft word 14 , Microsoft Excel , Microsoft Power Point , Pages15 , R

Numbers, Keynote, Adobe PDF16 a také multimediální soubory (.jpg, .png) a video (.mov, .mp4, .3gp). Uživatel si tak může prohlížet i jiné soubory než jen 3D výkresy. Podporuje zobrazení mnoha grafických prvků jako je úsečka, text, obdélník, kruh, elipsa a další. Také umožňuje funkce undo a redo.


iOS iOS 4.2+ V2.8 3,59 Euro Pro 8,99 Euro

Android 2.2 a vyšší 4.1 75,98 Kč

Tabulka 2.4: Základní informace CAD View 3D MFC

Dostupné Google Play: https://play.google.com/store/apps/details?id=com.afanche.android. ATViewCADMFC Dostupné iTunes (pouze iPad): https://itunes.apple.com/us/app/cad-view-3d/id528938325

2.1.5

CADView

Umožňuje prohlížet a tisknout CAD výkresy vytvořené v programech společnosti Evolution Computing17 . Jedná se o desktopové aplikace FastCAD a EasyCAD. Aplikace je zdarma a pouze pro platformu iOS. Po spuštění jsou k dispozici tři testovací výkresy. Výkres lze přibližovat, oddalovat a posouvat prakticky bez prodlevy, pouze u větších komplexních výkresů je znatelné malé zpoždění. Dvojitým poklepáním se výkres vrátí do původní velikosti. Lze ho také vytisknout, vypínat a zapínat vrstvy, prezentovat na externím monitoru. Soubory lze sdílet přes iTunes, email nebo nahrát na web. Aplikace je jednoduchá a přehledná. Dostupné iTunes: https://itunes.apple.com/us/app/cadview/id429764495 14

http://www.microsoft.com/cze/office/domu/produkty.aspx Pages, Numbers a Keynote jsou ochranná známka Apple Inc., registrované v USA a ostatních zemích. (http://www.apple.com/cz/iwork/) 16 http://www.adobe.com/cz/ 17 http://fastcad.com/ 15

9

2. Návrh aplikace


iOS iOS 5.1+ 1.2 zadarmo

Android -

Tabulka 2.5: Základní informace CADView

2.1.6

TurboViewer X

Aplikace pro iOS se zařadila do Top 5 podle Macworld/iWorld18 . Výrobce IMSI/Design, LLC19 uvádí, že se jedná o první a jediný nativní DWG prohlížeč, který podporuje 2D i 3D CAD DWG a DXF soubory pro iOS i Android. Opět umožňuje základní pohyby a gesta, podporuje zobrazení vrstev a různých pohledů. Zobrazí výkresy z emailu, stažením z internetu, FTP, podporuje i externí úložiště (např. Dropbox). Výrobce uvádí, že jeho aplikace je optimalizovaná a může být nejrychlejší 2D a 3D prohlížeč ze všech. Existuje i bezplatná a Pro verze aplikace.


iOS iOS 4.3+ 2.1.1 zdarma X – 5,99 Euro Pro – 17,99 Euro

Android 2.2 a vyšší 1.2.1 zdarma 137,41 Kč 392,96 Kč

Tabulka 2.6: Základní informace TurboViewer X Dostupné Google Play: https://play.google.com/store/apps/details?id=com.imsi.TurboViewer.X Dostupné iTunes: https://itunes.apple.com/us/app/turboviewer-x/id463052720

18 19

10

http://www.macworldiworld.com/ http://imsidesign.com/

2.2. Návrh uživatelského rozhraní

2.1.7

Výsledné porovnání

AutoQ3D CAD AutoCAD 360 Autodesk 360 CAD View 3D MFC CADView TurboViewer X

2D ano ano ano ano ano ano

3D ano ano ano ano ano ano

Podpora kreslení ano ano ne ne ne ne

Android ano ano ano ano ne ano

iOS ano ano ano ano ano ano

Tabulka 2.7: Porovnání existujících řešení

2.2

Návrh uživatelského rozhraní

Správně navržené uživatelské rozhraní (zkratka UI z anglického slova User Interface) je jedna z nejdůležitějších částí aplikace. Je to první věc, kterou uživatel vidí a hodnotí. Pokud bude Vaše aplikace uživatelsky nepřívětivá tzn., že se bude uživateli špatně ovládat, bude nepřehledná a nebo stylově nepříjemná, nepomůže ani dobrá funkčnost. Společnosti Apple i Google poskytují designérovi základní rady, jak správně a dle jejich pravidel uživatelské rozhraní navrhovat. Tato kapitola bude věnována správnému návrhu uživatelského rozhraní. Zaměříme se na obecná pravidla a budou také popsány detailněji pravidla pro samotné UI elementy. Grafických elementů je velké množství a proto budou popsány pouze ty, které jsou použity v návrhu uživatelského rozhraní aplikací. V poslední části bude prezentováno samotné navržené uživatelské rozhraní pro oba operační systémy.

2.2.1

iOS

Okno aplikace se skládá z několika UI elementů, které můžeme volně zobrazovat, nebo je schovávat či úplně vynechat. Společnost Apple rozsáhle popisuje veškeré možné elementy uživatelského rozhraní, jejich vlastnosti a povolené změny. Designér musí tyto instrukce následovat, protože Apple si zakládá na jednotném vzhledu a zažitém chování grafických prvků. Pro uživatele je tak prostředí a funkce aplikace známé. Samozřejmě pokud vyvíjíte například hru, můžete si je upravit podle svého designu. Všechny 11

2. Návrh aplikace grafické prvky implementuje Framework UIKit20 . Tento framework poskytuje přístup k prvkům jako je tlačítko, popisek a další, také zajišťuje obsluhu interakce s uživatelem. [8] 2.2.1.1

Základní principy[15]

• 44 x 44 bodů je minimální velikost prvků, které jsou dotykové. • Nemíchat různé styly dohromady – Například pokud není průhledná navigační lišta, neimplementujeme průhledný ani panel nástrojů. • Používejte systémové ikonky – je doporučeno nevytvářet svoje tlačítka pro funkci, pro kterou je známé tlačítko systémové. Uživatel iPhone jej zná a očekává stejnou funkčnost. Proto je také důležité používat systémová tlačítka pro funkci, pro kterou jsou určena a ne pro jinou. • Uživatelská nápověda na obrazovce má být minimální. • Dotykové elementy by měly být stylovány různými konturami a přechody, aby byly na první pohled rozpoznatelné. • Pravidlo 80–20 – největší procento uživatelů, obvykle nejméně 80 %, používá omezený počet funkcí v aplikaci, zatímco jen malé procento, zřídka více než 20 % využívá všechny funkce. Většina iOS aplikací nemusí poskytovat všechny funkce, které potřebují jen pokročilí uživatelé. • Pokud se Vaše aplikace načítá delší dobu, použijte startovací obrazovku. Jinak nepoužívejte žádnou úvodní obrazovku ani takzvané okno „O nás“. • Výchozí orientace aplikace je na výšku, ale pokud má být defaultní orientace aplikace na šířku, spustíme ji v tomto módu. Orientace u některých aplikací může být pouze na šířku. Potom by měla podporovat obě varianty s „Home“ tlačítkem nalevo nebo napravo. „Home“ tlačítko se nachází v dolní části telefonu pod obrazovkou, uprostřed. Pokud uživatel drží fyzicky telefon v poloze na šířku a spustí ve stejné poloze aplikaci, měla by se spustit také na šířku. Orientace „Upside Down“ (jako druhá na obrázku 2.1) není doporučováno používat, protože uživatel by pak mohl hledat tlačítko „Home“. 20

http://developer.apple.com/library/ios/#documentation/uikit/ reference/UIKit_Framework/

12

2.2. Návrh uživatelského rozhraní To se v této orientaci nachází nahoře, protože telefon je otočený obráceně a to by mohlo uživatele zmást.

Obrázek 2.1: Existují 4 orientace obrazovky Veškeré doporučení pro designéry a programátory jak navrhovat uživatelské rozhraní pro zařízení s iOS je popsáno v dokumentu iOS Human Interface Guidelines [15]. 2.2.1.2

Použité grafické prvky

V této podkapitole bude detailněji analyzováno, jak správně navrhovat samotné grafické prvky. Těchto prvků nabízí systém iOS mnoho a proto budou popsány pouze ty, které byly použity v aplikaci. Vyvíjená aplikace bude podporovat zařízení iPhone nebo iPod Touch, ne tablet iPad. Stavový řádek (Status bar) – zobrazuje se vždy na horním okraji obrazovky roztáhlý přes celou její šířku. Obsahuje informace jako je síla signálu, hodiny, výdrž baterie telefonu a jiné. • Není dovoleno vytvářet svůj vlastní status bar, avšak pokud ho potřebujete v aplikace schovat je to možné (například ve hře).

Obrázek 2.2: Stavový řádek [15] Navigační lišta (Navigation bar) – umožňuje v aplikaci navigaci a může také spravovat obsah obrazovky. Nachází se pod stavovým řádkem. • Uprostřed navigační lišty musí být text, tedy název aktuálního view. View je takzvané plátno, které zobrazuje například tlačítka, obrázky a ostatní prvky a také se na něj dá přímo kreslit. 13

2. Návrh aplikace • Musí obsahovat tlačítko „Zpět“, které vrátí uživatele na předchozí obrazovku. Toto tlačítko se nachází vlevo a obsahuje popisek názvu předchozí obrazovky. Uživatel tak ví, kam se vrací. • Není vhodné na navigační lištu umisťovat více tlačítek. Doporučené je tlačítko „Zpět“ a jedno další. • Nedoporučuje se vytvářet více segmentové tlačítko „Zpět“ (obrázek 2.3), protože přináší mnoho problémů.

Obrázek 2.3: Špatné tlačítko „Zpět“[15]

Obrázek 2.4: Navigační lišta Tabulka (Table view) – zobrazuje data v jednosloupcovém seznamu s více řádky. Existují dva styly tabulky: • plain styl – řádky jsou zobrazeny přes celou šířku obrazovky. Může být zobrazen index na pravé straně obrazovky. Může být i zobrazeno záhlaví (před první položkou seznamu) a zápatí (za poslední položkou seznamu). • group styl – tabulka je uspořádána do skupin. Musí obsahovat minimálně jednu skupinu a každá skupina minimálně jednu položku. Může být u každé skupiny zobrazeno záhlaví a zápatí avšak není dovolen index. iOS obsahuje některé tabulkové elementy, které mohou rozšířit funkčnost tabulky a řádek. Pokud není uvedeno jinak, jsou tyto prvky vhodné pro použití pouze v tabulce. Jsou definovány 4 styly řádků tabulky, které jsou vhodné buď pro plain nebo group styl. Podrobnější informace naleznete v dokumentu Human Interface Guidelines [15]. 14


Obrázek 2.5: Jeden z elementů „Disclosure indicator“

• Pokud používáte index, vyhněte se zobrazování výše zmíněných elementů v tabulce (jako je „Disclosure indicator“), kteří se zobrazují na pravé straně řádky, protože tyto prvky interferují s indexem. • Při poklepání na řádek by se měl krátce zvýraznit. Není podporováno, aby zůstala řádka zvýrazněná stále. Tuto vlastnost byste například využili, při zobrazování další informace k řádku ve stejném view, ale je velmi složité zobrazit informace společně. • Pokud se v řádku zobrazuje více dat, zobrazte nejdříve alespoň text a poté další prvky (například obrázky). Je důležité, aby se nikdy nezobrazila prázdná řádka. • Pečlivě volte délku textu v řádkách, aby nedocházelo k jeho zkrácení. Případné zalamování textu může způsobit mnoho problémů a je náročné. • Je možné vytvořit si svůj vlastní vzhled tabulky i řádků. Refresh Control – slouží k obnovení tabulky. Tento prvek je dostupný od verze iOS 6. Obnovení se spouští tažením tabulky z horní části obrazovky směrem dolů. • Je důležité si uvědomit, že uživatelé nemusí tento prvek znát a proto je vhodné zajistit obnovení buď automaticky nebo uživatele na tuto možnost upozornit.

15

2. Návrh aplikace

Obrázek 2.6: Refresh Control [15] Oblé obdélníkové tlačítko (Rounded Rectangle Button) – tlačítko spouští různé činnosti a akce, ve výchozím tvaru má zaoblené rohy. • Popisek tlačítka začíná velkým prvním písmenem. • Příliš dlouhý popisek bude zkrácen. • Je možné vložit místo textu obrázek.

Obrázek 2.7: Tlačítko Textové pole (TextField) – Přijímá pouze jeden řádek uživatelského vstupu. • Má fixní výšku a oblé rohy. Pokud klikne uživatel do textového pole zobrazí se klávesnice. • Můžeme zobrazit vlastní obrázky na levé nebo pravé straně textového pole, nebo přidat systémově poskytované tlačítko (například Záložky). • Obecně platí, že byste měli používat levý konec textového pole pro svůj účel a pravý konec k označení přítomnosti dalších funkcí. • Uvnitř textového pole je možné zobrazit tlačítko „Clear“ a také zástupný text neboli nápovědu, aby uživatel pochopil jaké informace do pole zadat. Nápověda je zobrazena pouze pokud neni v textovém poli jiný text. 16


Obrázek 2.8: Textové pole s nápovědou

Alerts a Action Sheet – dočasná zobrazení, která se zobrazí pokud potřebujeme upozornit uživatele nebo mu nabízíme více možností nějaké funkčnosti. Pokud je zobrazení v popředí nemůže uživatel interagovat s aplikací. Upozornění (Alerts) – zobrazuje uživateli důležité informace, které se týkají aplikace. Zobrazuje se ve středu obrazovky a má alespoň jedno tlačítko, které upozornění zavře. Dále zobrazuje titulek, text zprávy nebo také může očekávat vstup uživatele pomocí textového pole. • Je zbytečné vytvářet upozornění které: pouze zvyšují viditelnost informace, která je pro aplikaci standardní. Zobrazují aktualizace činnosti, které postupují dle očekávání. Očekávají potvrzení zahájení nějaké akce. Informují uživatele o chybách nebo problémech, se kterými nemůže nic dělat. • Text upozornění je vždy zarovnán na střed a vzhled upozornění nelze měnit. • Každé slovo titulku má velké první písmeno pokud se nejedná o spojku nebo předložku, která má 4 nebo méně písmen a není první slovo. Toto platí hlavně pro cizí jazyky, v češtině se nepoužívá. Titulek by se měl vejít na jednu řádku. • Je vhodné vyhnout se jednoslovnému titulku jako je „Chyba“ nebo „Upozornění“. • Vyhněte se použití slov „Vy“, „Vaše“, „mě“ a „moje“. Někdy může být text, který označuje lidi přímo nejednoznačný a nebo může dokonce být vykládán jako urážka. • Pokud je titulek část věty nebo jedna věta (ne otázka) nevkládejte nakonec interpunkční znaménko. • Je vhodné vytvářet kratší zprávu, pokud je příliš dlouhá zobrazí se skrolovací prvek a zpráva je tak nepřehledná a pro uživatele moc dlouhá. • Popisek tlačítka nedávejte do uvozovek. Jeho první písmeno je velké. 17

2. Návrh aplikace • Je vhodné používat upozornění s jedním nebo dvěmi tlačítky. Pokud potřebujete zobrazit více tlačítek, je vhodné použít jiný grafický prvek. • Dvě tlačítka – tlačítko na levé straně je vždy tmavší a na pravé světlejší barvy. Jedno tlačítko je vždy světlé barvy. • Pokud jedno ze dvou tlačítek nabízí potencionálně riskatní akci, tak druhé tlačítko, které tuto akci ruší je na pravé straně a má světlou barvu. Pokud upozornění nabízí uživateli akci, kterou pravděpodobně bude chtít vykonat, mělo by být tlačítko, které tuto akci ruší na levé straně a tmavé barvy.

Obrázek 2.9: Upozornění s jedním tlačítkem Action Sheet – zobrazuje více možností akcí uživatele. Zobrazuje se vždy ze spodní části obrazovky a nedovoluje interakci uživatele s aplikací. • Koordinujte vzhled pozadí action sheetu s navigační lištou nebo panelem nástrojů. Použijte buď průsvitné černé pozadí, pokud jsou černé barvy. Nebo použijte výchozí modré pozadí. • Je vždy zobrazeno tlačítko „Storno“, které je ve spodní části prvku. • Zvolte barvu pozadí tlačítka červenou, pokud vyvolá potencionálně destruktivní akci. Umístěte ho nad všechny další tlačítka v action sheetu. • Nezobrazujte příliš mnoho tlačítek, pokud by musel uživatel mezi tlačítky skrolovat, může se snadno stát, že omylem nějaké tlačítko stiskne.

18


Obrázek 2.10: Action Sheet Indikátor aktivity – informuje uživatele, že probíhá nějaký proces. Pokud je proces dokončen indikátor je zastaven a zmizí. Uživatel s ním nemůže nijak interagovat. • Není vhodné zobrazovat, kdy se akce dokončí. • Indikátor aktivity se vždy točí, pokud by byl statický uživatel by si myslel, že došlo k zablokování aplikace.

Obrázek 2.11: Aktivity indikátor s popiskem Popisek (Label) – zobrazuje libovolně dlouhý statický text, vhodně dlouhé délky bez nápadných barev.

Obrázek 2.12: Popisek

2.2.2

Android

Společnost Google dává designérovi více volnosti ohledně návrhu UI elementů a obrazovek. Ovšem zařízení se systémem Android mají různé velikosti a také hustotu obrazovky. V některých grafických prvcích nebo jejich 19

2. Návrh aplikace vlastnostech se platforma Android zásadně odlišuje od platformy iOS a tyto odlišnosti musí designér respektovat. 2.2.2.1

Základní principy[5]

• Dotykové UI elementy mají velikost 48 dp21 . Fyzicky tato velikost odpovídá 9 mm. Doporučené velikosti jsou minimálně 7 – 10 mm. • Mezery mezi UI elementy mají být 8 dp. • Uživatel si může nastavovat aplikaci dle svého vkusu, například pozadí obrazovky a jiné. • Používejte jednoduché krátké věty nebo slova a raději obrázky, které mohou být výstižnější než slova. • Implementujte tlačítko „Zpět“. • Pamatujte si předchozí volby uživatele. Například při vyhledávání. • Nastavení, které není potřeba, je vhodné skrýt do menu (obrázek 2.13).

Obrázek 2.13: Funkčnost skrytá v menu [5]

• Pokud něco vypadá stejně, mělo by se to chovat stejně. Oddělujte vizuálně různé funkce. Vyvarujte se elementům, které vypadají podobně, ale mají jinou funkci v závislosti na vstupu. 21

Density–independent pixel – virtuální jednotka pixelu, kterou používáme při navržení UI layoutu. Dp odpovídá 1 fyzickému pixelu na obrazovce o hustotě 260 dpi. Převod dp na pixely je dle vzorečku px = dp * (dpi / 160).

20

2.2. Návrh uživatelského rozhraní • Nejdůležitější akce v aplikaci prezentujte jednoduchým ovládáním (například větší a dobře viditelné tlačítko, které umožní vyfotografovat fotografii). • Používejte triky, které fungují všude. Udělejte svoji aplikaci jednoduší a naučte ji vizuální šablony a motoriku. Například gesta pomocí prstů. Je vhodné vytvářet flexibilní layout, protože zařízení Android se velmi liší ve velikosti obrazovky. Vyvíjená aplikace bude pouze pro mobilní zařízení, takže se nebudeme zaměřovat na tablety. Zařízení se liší i v hustotě obrazovky (DPI – dots per inch). DPI je množství pixelů v rámci obrazovky. Android definuje 4 základní hustoty obrazovky. [5] Tyto rozdílnosti můžete řešit například tak, že budete pracovat se střední hustotou (základní) a měnit měřítko elementů podle potřeby. Druhý postup je, psát aplikaci pro extra velkou hustotu a dle potřeby UI komponenty zmenšovat. Lze také pro každou možnost implementovat samostatný layout.

Obrázek 2.14: Extra velká, velká, střední a nízká hustota [5] Android má oproti iOS dvě možnosti navigace mezi obrazovkami. Jedna je klasické tlačítko „Zpět“ a druhá možnost je takzvané tlačítko „Up“.

Obrázek 2.15: Tlačítko „Zpět“ a tlačítko „Up“ [5]

1. Tlačítko „Zpět“ používají starší verze Androidu do verze 2.3 a slouží k navigaci, v obráceném chronologickém pořadí, historií obrazovek, 21

2. Návrh aplikace které uživatel nedávno zobrazil. To je obecně založeno na časových vztazích mezi obrazovkami, spíše než na hierarchii aplikace. Pokud je předchozí zobrazená obrazovka v hierarchii obrazovek rodič aktuální obrazovky stisknutí tlačítka „Zpět“ má stejný výsledek jako stisknutí tlačítka „Up“. Rozdíl je v tom, že tlačítko „Up“ zajišťuje, že stále zůstanu ve své aplikaci. Kdežto tlačítko „Zpět“ může uživatele vrátit na domovskou obrazovku telefonu nebo dokonce do jiné aplikace. Tlačítko „Zpět“ podporuje chování, které není přímo vázáno na navigaci obrazovka–k–obrazovce, a proto je jeho použití v určitých případech zakázáno: • Zakázáno u plovoucích oken (dialogy, vyskakovací okna). • Zakázáno u kontextových Action barů a při odstraňování vybraných položek. • Skryje klávesnici na obrazovce. 2. Tlačítko „Up“ bylo zavedeno s novým UI elementem Action bar, který je od verze 3.0 a slouží k navigaci v rámci aplikace založené na hierarchických vztazích mezi obrazovkami. Například, pokud se na obrazovce zobrazí seznam položek, a výběrem položky vede na obrazovku B (které zobrazuje tuto položku podrobněji), pak obrazovka B by měla nabídnout tlačítko „Up“, které nás vrátí na obrazovku A. Pokud se naše aplikace skládá pouze z jedné obrazovky, nebo jsme na první obrazovce, tlačítko „Up“ se nezobrazuje. Na obrázku2.16 je znázorněno chování tlačítka „Zpět“ (červenou barvou), kdy jeho použití na první obrazovce aplikace uživatele vrátí na domovskou stránku telefonu. Žlutě zvýrazněné tlačítko „Up“ se na první obrazovce aplikace nenachází a je zobrazeno až na další obrazovce po kliknutí na vybraný řádek tabulky. Existují i situace, které jsou výjimečné a chování obou tlačítek je podrobně popsáno v Android příručce pro developery [5].

22


Obrázek 2.16: Chování tlačítek „Zpět“ a „Up“ [5]

2.2.2.2

Použité grafické prvky

Main action bar – main action bar je součástí aplikace v horní části obrazovky a je perzistentní přes celou aplikaci. Dělí se na 4 funkční oblasti.

Obrázek 2.17: Main action bar [5]

1. ikonka + tlačítko „Up“ 2. View control – umožňuje přepínat obrazovky. Pokud aplikace neumožňuje přepínání mezi obrazovkami, zobrazí se pouze neinteraktivní obsah (titulek a další prvky). 3. Tlačítka akce – obsahuje ikonky akcí, které uživatel používá nejčastěji. Pokud daná akce není v aktuálním kontextu dostupná, nezobrazujeme ji (ani jako deaktivovanou). Pro stanovení priorit akcí použijeme FIT systém: 23

2. Návrh aplikace • F (Frequent) – akce se bude používat alespoň 7 krát z 10 navštívení obrazovky. • I (Important) – akce je důležitá a všichni uživatelé by ji měli znát. • T (Typical) – je typicky používaná jako hlavní akce v jiných aplikacích. 4. Action overflow – obsahuje ikonky ostatních akcí, které se nevešly do hlavního Action bar. Tlačítko – tlačítko může obsahovat text nebo obrázek nebo obojí dohromady. Android podporuje dva různé typy tlačítek: základní tlačítka a tlačítka bez okrajů. Oba mohou obsahovat textové popisky a / nebo obrázky. • Základní tlačítko – obsahuje okraje a pozadí. Může mít výchozí nebo malý styl. Výchozí tlačítka mají o něco větší velikost písma a jsou optimalizovány pro zobrazení mimo obsah formuláře. Malá tlačítka jsou menší a jsou určena pro zobrazení vedle dalšího obsahu.

Obrázek 2.18: Vlevo výchozí tlačítka, vpravo malá tlačítka s různými styly [5]

• Tlačítka bez okrajů – nemají okraje a pozadí. Spadají do stejného stylu jako element, do kterého patří.

Obrázek 2.19: Tlačítko bez okrajů integrované do tabulky [5]

24

2.2. Návrh uživatelského rozhraní Textové pole – umožňuje zadávat jednořádkový nebo víceřádkový text. Umožňuje také vyhledávání s automatickým dokončováním slov a další funkce vybraného textu. • Jednořádkové pole automaticky zarovná text na levou stranu, pokud kurzor dosáhne pravého okraje textového pole. • Textové pole může být různého typu, zobrazuje například zprávy nebo emailovou adresu. Typ určuje, jaké znaky jsou povoleny uvnitř pole, a může zobrazit virtuální klávesnici, která je optimalizovaná pro daný typ. Aktivity indikátor – má stejnou funkci jako pro iOS a může být buď ve tvaru rotujícího kolečka, nebo aktivity bar. Pro každý probíhající proces je možné vybrat si pouze jeden indikátor. 1. Aktivity bar – Po započetí procesu se transformuje aktivity bar.

Obrázek 2.20: Aktivity bar [5]

2. Aktivity kolečko – nezobrazuje se text, který by uživateli řekl jaká činnost je prováděna.

Obrázek 2.21: Vlevo špatně navržený aktivity indikátor, vpravo správně [5]

Upozornění – informují uživatele o situaci, která vyžaduje jejich potvrzení nebo potvrzení před pokračováním. Tlačítko, které akci ruší je vždy na levé straně. 1. Upozornění bez titulku – většinou zobrazuje pouze stručnou informaci, která se dá shrnout do jedné nebo dvou vět. Jedná se buď o otázku, nebo jasnou oznamovací větu. 25

2. Návrh aplikace

Obrázek 2.22: Upozornění bez titulku [5]

2. Upozornění s titulkem – používá se střídměji. Použijeme ho, pokud se jedná o potencionálně nebezpečnou akci (ztráta dat a jiné). Popisek by měl být jasný, krátký a vystihnout požadovanou akci.

Obrázek 2.23: Popisky u upozornění [5]

26


2.2.3

Zásadní rozdíly mezi UI Androidu a iOS

Android ve svých doporučených postupech upozorňuje, aby se programátoři nesnažili přizpůsobit uživatelské rozhraní vzhledu jiných platforem. Ve svých příkladech popisuje hlavní rozdíly mezi iOS a Android. 1. Nepoužívejte Bottom tab bar – některé platformy používají Bottom tab bar k přepínaní obrazovek, Android používá Action bar.

Obrázek 2.24: Android dialer s tabem v Action bar vs. Bottom tabs v iOS [5]

27

2. Návrh aplikace 2. Nepoužívejte tlačítko „Zpět“ v elementu Action bar, které má popisek. Android používá k navigaci v hierarchii aplikace v Main action bar tlačítko „Up“ s ikonou aplikace a v navigační liště tlačítko „Zpět“.

Obrázek 2.25: Android action bar s tlačítkem up vs. iOS tlačítko „Zpět“ [5]

28

2.3. Navržené wireframy 3. Nepoužívejte šipečku na pravé straně položky v seznamu.

Obrázek 2.26: Porovnání obrazovky Nastavení v Androidu a iOS [5]

2.3

Navržené wireframy

Počáteční návrhy wireframů byly nejdříve rozvrženy pomocí obyčejné tužky a papíru s předtištěnými předlohami telefonů. Skici byly poté překresleny pomocí programu Balsamiq mockup22 . Wireframe je návrh uživatelského rozhraní pomocí čar a textu, neobsahuje žádnou grafiku ani design a používání barev je také pouze za účelem odlišení. Dává zákazníkovi, programátorovi a dalším spolupracovníkům prvotní pohled na obsah návrhu, rozložení grafických prvků a jejich popisků.

2.3.1

iOS

Jak již bylo napsáno v předešlé kapitole, Apple má vyšší nároky na preciznost návrhu UI. Designér by měl dodržovat, alespoň pokud je to možné, pravidla a nesnažit se měnit zažitý styl a funkčnost prvků. Vyvíjená aplikace WebCAD se bude skládat ze čtyř obrazovek. Úvodní obrazovka (obrázek 2.27) bude sloužit k přihlašování uživatele. Jednoduše navržený layout obsahuje dvě textová pole pro zadání uživatelského jména a hesla a tlačítko pro přihlášení. V horní části obrazovky se nachází místo pro logo či úvodní obrázek aplikace. Pokud uživatel klikne do 22

http://www.balsamiq.com/

29

2. Návrh aplikace textového pole, zobrazí se mu příslušná klávesnice pro zadávání znaků. Pokud není dostupné připojení k internetu, tlačítko k přihlášení bude zašedlé a uživatel bude informován upozorněním (obrázek 2.28).

Obrázek 2.27: Obrazovka „Login“ (iOS)

30

2.3. Navržené wireframy

Obrázek 2.28: Upozornění při přihlášení (iOS)

Druhá obrazovka obsahuje tabulku s projekty (obrázek 2.29), které patří uživateli. Každá řádka obsahuje malý obrázek (náhled či ikonku), název scény projektu a datum, kdy byla scéna naposledy změněna. Ikonka „ozubené kolečko“ nacházející se nalevo v navigační liště zobrazí obrazovku „Nastavení“ (obrázek 2.33). Druhá ikonka nacházející se na pravé straně lišty bude zajišťovat aktualizaci všech projektů/scén uživatele. Pro aktualizaci je nutné mít dostupné připojení k internetu, pokud není dostupné, uživatele informuje upozornění (obrázek 2.30).

31

2. Návrh aplikace

Obrázek 2.29: Obrazovka „Projekty“ (iOS)

Obrázek 2.30: Upozornění při aktualizaci tabulky (iOS)

32

2.3. Navržené wireframy Další obrazovka vykreslí vybranou scénu (obrázek 2.31). Ikonka aktualizace na pravé straně v navigační liště slouží k aktualizaci vykreslené scény a ta je následně překreslena novými daty. Pokud není dostupné připojení k internetu, je uživatel informován upozorněním (obrázek 2.32). Tlačítko „Zpět“ s titulkem „Projekty“ vrátí uživatele na předchozí obrazovku s tabulkou vypsaných scén (obrázek 2.29).

Obrázek 2.31: Obrazovka „Detail“ (iOS)

33

2. Návrh aplikace

Obrázek 2.32: Upozornění při aktualizaci scény (iOS)

Obrazovka „Nastavení“ (obrázek 2.33) obsahuje jednoduchou tabulku group stylu, která má jednu sekci s jedním řádkem. Zobrazuje jméno, příjmení, uživatelské jméno a fotku uživatele či defaultní obrázek. Pomocí tlačítka „Odhlásit se“ je vyvolán Action Sheet (obrázek 2.34).

34


Obrázek 2.33: Obrazovka „Nastavení“ (iOS)

Action Sheet (obrázek 2.34) obsahuje pouze dvě tlačítka, první tlačítko „Storno“ ruší akci a uživatel zůstává na stejné obrazovce. Druhé tlačítko „Odhlásit se“ odhlásí uživatele z aplikace a přesměruje ho na úvodní obrazovku „Login“ (obrázek 2.27).

35

2. Návrh aplikace

Obrázek 2.34: Obrazovka s Action Sheet (iOS)

2.3.2

Android

Designér má při navrhování uživatelského rozhraní pro Android více volnosti. Důležité je nepřizpůsobovat vzhled UI jiným platformám jako je například iOS nebo Windows Phone23 .

23

36

http://www.windowsphone.com/cs-cz

2.3. Navržené wireframy Úvodní obrazovka (obrázek 2.35) je skoro stejná jako v návrhu pro iOS. Rozdílná je horní část obrazovky, kde pro Android nebyl zvolen žádný bar.

Obrázek 2.35: Obrazovka „Login“ (Android)

37

2. Návrh aplikace Po úspěšném přihlášení se uživateli opět zobrazí tabulka s řádky (obrázek 2.36), které obsahují obrázek, jméno projektu a kdy byl naposledy změněn. Všimněte si, že na konci řádky není dle pravidel návrhu šipečka. V horní části obrazovky je Main action bar, který obsahuje ikonku aplikace, název obrazovky a na pravé straně dvě tlačítka. První slouží pro obnovu celé tabulky. Další tlačítko se nazývá Action overflow a ukrývá funkci odhlášení (obrázek 2.37) a zobrazení obrazovky „Nastavení“ (obrázek 2.39).

Obrázek 2.36: Obrazovka „Projekty“ (Android)

38


Obrázek 2.37: Upozornění při odhlášení (Android)

Obrazovka „Detail“ (obrázek 2.38) má stejnou funkčnost jako v iOS. V Main action baru je navíc tlačítko „Up“, které uživatele vrátí na předchozí obrazovku „Projekty“ (obrázek 2.36). Tlačítko na pravé straně opět aktualizuje aktuální scénu.

39

2. Návrh aplikace

Obrázek 2.38: Obrazovka „Detail“ (Android)

Obrazovka „Nastavení“ (obrázek 2.39) obsahuje stejné informace jako návrh pro iOS tedy jméno a příjmení aktuálního uživatele, uživatelské jméno a obrázek. Není zde tlačítko na odhlášení, protože tato funkčnost je zahrnuta do tlačítka Action overflow v Main action bar na obrazovce „Projekty“ (obrázek 2.36). Nesmí chybět tlačítko „Up“, které vrátí uživatele na předchozí obrazovku. Pokud uživatel bude chtít aktualizovat data či aktuální scénu a nebudou k dispozici mobilní data ani WiFi, bude zobrazeno upozornění (obrázek 2.40). 40


Obrázek 2.39: Obrazovka „Nastavení“ (Android)

Obrázek 2.40: Upozornění žádné připojení (Android)

41

2. Návrh aplikace

2.4

Analýza dostupných grafických frameworků

Frameworků určených ke kreslení grafiky je k dispozici několik a proto je potřeba zvolit takový, který bude splňovat veškeré grafické požadavky aplikace. V této kapitole budou podrobněji rozebrány nejdůležitější vlastnosti frameworků pro platformu iOS. Nejdříve je vhodné zmínit se o frameworcích UIKit a GLKit. UIKit poskytuje prvky uživatelského rozhraní a jeden z nich je kreslící plátno, které je implementováno ve třídě UIView. Plátno zobrazuje jednoduché grafické prvky vložené programátorem ve vývojovém prostředí, nebo ho implementujeme jako prostor pro kreslení. Ostatní grafické prvky jsou například tlačítko (třída UIButton), popisek (třída UILabel), vstupní pole (třída UITextField) a další, které najdeme v prostředí XCode v podokně Library. [10] Logiku kreslení nám poté umožňují jiné frameworky. Pro platformu iOS máme na výběr z Core Graphics, OpenGL ES a Core Animation. Poslední zmíněný framework slouží pro pokročilou animaci, kterou v aplikaci nevyužijeme, a proto se jím nebudeme více zabývat. Pro OpenGL ES 2.0 je od verze iOS 5 k dispozici framework GLKit, který usnadňuje práci s OpenGL ES. Zahrnuje funkce a třídy pro načítání textur, poskytuje matematické knihovny pro vektory, maticové operace a další. Nabízí lehčí přechod ze starší verze OpenGL ES 1.1 a zapouzdřuje například stínování či osvětlení modelu. Pro vykreslování poskytuje třídu GLKView, která podporuje základní implementaci a snižuje tak objem napsaného kódu. [7]

2.4.1

Core Graphics

Framework Core Graphics je API založené na jazyce C a jeho součástí je také grafický engine Quartz 2D. Často se můžeme setkat, že je Quartz 2D označován jako Core Graphics (v textu bude dále uváděný pod zkratkou CG). CG je specifické rozhraní definované samotnou společností Apple. Není tedy multiplatformní jako druhý zmíněný framework OpenGL ES. Quartz 2D je sada funkcí, datových typů a objektů navržených ke kreslení přímo do view (plátna) nebo na obrázek v paměti. Poskytuje velmi přesný 2D rendering, který je nezávislý na vlastnostech rozlišení a typu zobrazovacího zařízení. Může pracovat s dalšími grafickými technologiemi, jako jsou Core Animation, UIKit a OpenGL ES. Vhodný pro: 1. Kreslení 2D grafiky (kreslení založené na cestě, průhledné vrstvy, offscreen a anti-aliased rendering). 42

2.4. Analýza dostupných grafických frameworků 2. Schopnost editovat grafiku v aplikaci. 3. Vytvářet a zobrazovat rastrové obrázky. 4. Práce s dokumenty PDF (vytváření, parsování a zobrazování). Přehled Quartz 2D: 1. Stránka (The Page) – Quartz 2D používá pro zobrazení nakreslených prvků takzvaný malířův model. Každá nová malba vytváří novou vrstvu, která se aplikuje na view, také nazývané jako stránka. Malbu na stránce tak můžeme snadno modifikovat přidáním další nové malby. Na obrázku níže (obrázek 2.41) je zobrazeno, jak tento model funguje. V prvním případě nakreslíme nejdřív modrý objekt nalevo a poté plný červený napravo. Výsledný obraz je složen z těchto dvou primitiv a to tak, že plný červený překryl modrý a jsou vidět pouze modré okraje. V druhém případě jsou tyto grafická primitiva nakreslena v obráceném pořadí. Malířův model se tedy chová úplně stejně, jako bychom kreslily tyto obrazce na fyzické malířské plátno. Nejdůležitější je tedy pořadí v kreslení.

Obrázek 2.41: Malířův model [9]

43

2. Návrh aplikace Stránka může být obyčejný papír, pokud je výstupním zařízením malby tiskárna, dokument PDF nebo bitmapový obrázek. 2. Grafický kontext – je to datový typ, který zapouzdřuje informace potřebné ke kreslení (parametry grafických primitiv a specifikaci zařízení zobrazující malbu), které využívá framework Quartz 2D. Kontext poskytuje aktuální plátno, na které kreslíme, nezávisle na zobrazovacím zařízení. Existují různé druhy kontextů, jako je například PDF kontext, bitmapový kontext nebo obrazovkový kontext. Můžeme nakreslit stejný obraz na rozdílná zařízení jednoduše tak, že poskytnete odlišný grafický kontext ve stejném pořadí vykreslování. Nemusíme provádět specifické výpočty pro každé zařízení, Quartz 2D to udělá za nás. Grafické kontexty v iOS: a) Bitmapový – vykresluje bitmapu v barvách RGB nebo CMYK a také ve stupních šedi. Každý pixel v bitmapě odpovídá pixelu v obrázku. b) PDF – slouží k vytváření PDF souborů. V PDF souboru je kresba uchována jako posloupnost příkazů. Důležité rozdíly mezi PDF a bitmapou: • PDF soubor, na rozdíl od bitmapy, může obsahovat více než jednu stránku. • Při kreslení stránky z PDF na rozdílné zařízení je obraz optimalizovaný podle vlastností tohoto zařízení. • PDF soubory jsou nezávislé na vlastnostech rozlišení. Velikost, ve které jsou vypracované lze zvyšovat nebo snižovat beze ztráty detailů. Kvalita uživatelovo vnímání bitmapy je vázána na rozlišení, ve kterém má být bitmapa zobrazena. c) Layer kontext (CGLayerRef) – kresba mimo obrazovku asociovaná s jiným kontextem. Je navržen pro optimální výkon při kreslení vrstvy do grafického kontextu, který ji vytvořil. Layer kontext je mnohem lepší volba při kreslení mimo obrazovku než bitmapový kontext. 3. Neprůhledné datové typy24 (Opaque Data Types) – jsou definovány jako dodatek ke grafickým kontextům. Quartz 2D vytváří 24

Tento datový typ není plně nadefinovaný v rozhraní a tak je jeho konkrétní reprezentace pro uživatele skrytá. Jeho hodnoty mohou být měněny pouze voláním subrutin, které ke skrytým informacím mají přístup.

44

2.4. Analýza dostupných grafických frameworků z těchto datových typů objekty. Vytvořením objektu stránky PDF můžeme zobrazovat a rotovat tyto PDF stránky a vykreslovat je do aktuálního kontextu. Dále můžeme kreslit různé patterny vytvořením patternového objektu a také vytvářet stínování. 4. Grafické stavy – mění výsledek kreslení podle parametrů uložených v grafickém stavu. Tyto parametry jsou základní argumenty spojené s kreslením. Například pokud zavolám funkci pro nastavení barvy výplně, měním hodnotu uloženou v aktuálním grafickém stavu. Mezi další běžné prvky grafického stavu patří šířka úsečky, aktuální poloha a velikost písma. Při vytvoření nového grafického kontextu je zásobník stavů prázdný a poté se postupně zaplňuje. 5. Souřadnicový systém – každý grafický kontext má systém souřadnic. Aktuální souřadnicový systém (dvojdimenzionální mřížku) nám definuje transformační matice. Grafické frameworky v iOS vytváří grafický kontext pro kreslení na specifické cíle jako je obrazovka, bitmapy, soubor PDF a tyto grafické kontexty stanoví počáteční souřadný systém pro každý jiný. Tento počáteční souřadnicový systém je známý jako systém výchozí souřadnic. Existují dva obecné druhy: a) Počátek kreslení je v levém horním rohu a souřadnice X a Y se zvětšují směrem dolu a doprava. Zkratka ULO – Upper Left Origin, počátek v levém horním rohu. Používají ho UIKit a Core Animation. b) Počátek kreslení je v dolním levém rohu a souřadnice X a Y se zvětšují směrem doprava a nahoru. Zkratka LLO – Lower left origin, počátek v dolním levém rohu. Používá ho Core Graphics.

45

2. Návrh aplikace

Obrázek 2.42: Systém souřadnic [9]

Nejběžnější souřadnicový systém je ULO. Použije se tedy při kreslení na objekt třídy UIView, který je součástí frameworku UIKit, Quartz2D tak obdrží odlišný souřadnicový systém, se kterým si ale umí poradit.

2.4.2

OpenGL ES

Zkratka OpenGL znamená The Open Graphics Library a OpenGL ES znamená OpenGL for Embedded Systems. Z názvu tedy vyplývá, že OpenGL je univerzální grafická knihovna, která je dostupná pro každého vývojáře. OpenGL/ES je vyvíjeno skupinou Khronos25 , která sdružuje mnoho společností a zabývá se vývojem otevřených standardů.

25

46

http://www.khronos.org/

2.4. Analýza dostupných grafických frameworků

Obrázek 2.43: Logo OpenGL ES Verze OpenGL ES je tedy dostupná pro embedded systémy, jako jsou mobilní telefony, herní konzole, osobní navigace, přehrávače hudby, settop boxy, automobilové systémy a další. OpenGL ES vychází z OpenGL, používá stejné příkazy, funkce, ale některé funkce byly z této embedded verze vyňaty hlavně kvůli jejich náročnosti na výkon zařízení. Poskytuje rozhraní (API) mezi softwarovými aplikacemi a HW nebo softwarem grafických enginů. Existují tři verze OpenGL ES – verze 1.X, 2.X a 3.X. Společnost Apple podporuje ve svých zařízeních verze 1.1 a 2.0. Na rozdíl od OpenGL, kdy je vždy nová verze zpětně kompatibilní se starší verzí, OpenGL ES se zaměřuje hlavně na výkon a nová verze nepodporuje starou. V nové verzi jsou tedy přepracované různé funkce, které jsou efektivnější a lepší a tak je stará funkčnost nežádoucí. 1. OpenGL ES 1.1 (odvozeno z OpenGL 1.5) – podporuje implementaci fixního pipelinu (fixní vykreslovací řetězec). Zlepšuje hardwarovou akceleraci pomocí API. Poskytuje rozšíření funkcí, lepší kvalitu obrazu a optimalizuje zvýšení výkonu a snížení používání paměti pro úsporu baterie (energie). Existuje také rozšíření, které snižuje variabilitu aplikací (jejich snadné portování) a další funkčnost jako je například cube mapování, frame buffer objekty, větší matice palet, zlepšuje texturování a šablony. 2. OpenGL ES 2.0 (odvozeno z OpenGL 2.0) – přebírá mnoho funkcí z předchozí verze OpenGL ES 1.1, ale úplně odstraňuje fixní pipeline. Zavádí takzvaný programovatelný pipeline s možností vytvářet shadery26 a programové objekty. Má schopnost popsat vertex a fragmenty shaderu v OpenGL ES Shading Language. Ty nám umožňují být autorem vlastních vertexů a fragment funkcí, které jsou vykonávány přímo na grafickém hardwaru. Aplikace se tak stává přesnější 26

Shader je program, který řídí jednotlivé části programovatelného vykreslovacího řetězce. (http://www.opengl.org/wiki/Rendering_Pipeline_Overview)

47

2. Návrh aplikace a jasněji přizpůsobuje vstupy do pipelinu a výpočty, které se provádějí na každém vrcholu (vertexu) a fragmentu. Umožňuje tedy plně programovat 3D grafiku. Vlastnosti OpenGL ES: 1. Je založené na jazyce C a platformou nezávislé. Je to procedurální jazyk. Jako API v jazyce C se hladce integruje s aplikacemi v Objective– C založeném na Cocoa Touch. Specifikace OpenGL ES nedefinuje vrstvu okna (windowing), místo toho hostující operační systém vytváří rendering kontext, který přijímá příkazy a framebuffer, kde jsou zapsány výsledky vykreslování. 2. Aplikace, které běží na pozadí, nemohou volat funkce OpenGL ES. Pokud by chtěla aplikace přistupovat ke GPU a běží právě na pozadí systém iOS ji okamžitě ukončí. 3. OpenGL ES také omezuje některé funkce vícevláknového zpracování. Pokud chce aplikace podporovat a pracovat ve vícevláknovém běhu, je nutné zajistit, aby nepřistupovala do stejného kontextu ze dvou různých vláken najednou. 4. Je integrováno do Core Animation. Pokud vytvoříme aplikaci v OpenGL ES je poté tento kód poskytnutý speciální vrstvě Core Animation známé pod jménem CAEAGLLayer. Pomocí OpenGL ES se vykreslují obrazy, které Core Animation skládá a posílá je do ostatních vrstev, kde vytváří výsledný obraz a ten se vykresluje na obrazovku. 5. Funkcionalita se může lišit na různých zařízeních. Starší verze iPhonu a iOS podporují pouze verzi OpenGL ES 1.1. Rozdíly se mohou vyskytnout i u zařízení, které podporují stejnou verzi OpenGL ES, ale mají jinou verzi systému iOS a nebo jiný základní grafický hardware. Je vždy nutné otestovat podporu dané verze a popřípadě nepodporované funkce vypnout. 6. Framebuffer objekty – iOS používá pouze typ framebufferů jako cíl vykreslování, který je založený na zobrazování mimo obrazovku. Existují systémové framebuffery, které jsou alokované API, ty určí hostitelský OS a zaručují spojení s obrazovkou nebo jiným zobrazovacím zařízením. Protože je zbytečné vytvářet nový oddělený systémový framebuffer bylo rozšířeno API OpenGL ES. Je tak možné vytvořit framebuffer objekt a jeho vlastnosti sdílet s Core Animation. 48

2.4. Analýza dostupných grafických frameworků 7. Každý rok jsou revidovány specifikace OpenGL ES. Pokud má být nová implementace označena jako vyhovující musí projít sadou testů. Tyto testy jsou zaneseny v samostatné části OpenGL ES dokumentace. 8. Příkazy mohou být prováděny asynchronně – funkce OpenGL ES může vrátit řízení zpět aplikaci a to i přesto, že požadovaná operace nebyla ještě dokončena. V druhém případě čeká OpenGL ES na dokončení všech funkcí a CPU a GPU tak pracují synchronně. Na platformě iOS je odkládání vykonávání grafických příkazů docela běžné. Pokud je to možné je vhodné vyvarovat se v aplikaci synchronního běhu CPU a GPU (alias klienta a serveru). Dva způsoby, jak si představit fungování OpenGL ES: 1. Grafický pipeline – po vytvoření grafického pipelinu se provede jeden nebo více příkazů ke kreslení. Grafické příkazy pošlou vertex data dále dolu pipelinem, kde dochází k jejich zpracování a spojení do grafických primitiv a jsou rastrovány do fragmentů. Každý fragment vypočte svoji barvu a hloubku a tyto hodnoty jsou nashromážděny do framebufferu. V aplikace napsané ve verzi OpenGL ES 2.0 implementujeme přizpůsobené shader programy k ovládání vertexů a fragmentů. Říkáme, že se jedná o programovatelné pipeliny. Ve starší verzi 1.1 můžeme modifikovat stavový stroj, který řídí fixní pipeline. Výhoda pipelinu je, že lze počítat různé fáze nezávisle, ale zároveň současně. Aplikace může například vytvářet nová primitiva a zároveň na grafickém hardwaru počítat vertex a fragment výpočty. 2. Klient–server architektura – veškeré změny stavů, textury, vertex data a grafické příkazy jsou posílány z aplikace do OpenGL ES klienta. Klient zpracuje tyto informace, přetransformuje je do formátu, kterému rozumí grafický hardware a odešle je do GPU.

49

2. Návrh aplikace

Obrázek 2.44: Model Klient–server [14]

2.4.3

Referenční aplikace

V předcházející kapitole byly popsány vlastnosti a výhody obou frameworků pro iOS. Obecně panují názory, že OpenGL ES je oproti Core Graphics výkonnější a rychlejší při vykreslování. Proto jsem implementovala dvě totožné referenční aplikace, které se liší akorát v použitém frameworku. První využívá ke kreslení Core Graphics a druhá OpenGL ES. Obě tyto aplikace jsou vloženy na přiložené CD jako příloha. K měření výsledků byla použita aplikace Instruments. Ta je dostupná v developerském nástroji XCode od verze 3.0 a Mac OS X 10.5. [12] Nabízí nástroje pro analýzu, testování, výkonnostní testy aplikací a také pro dynamické sledování a profilování kódu v iOS. Jedná se o flexibilní a výkonný nástroj, který nám umožňuje sledovat jeden nebo více procesů a analyzovat nashromážděná data. [12] K analýze byly použity Instruments verze 4.6. Konkrétně byl vybrán nástroj Activity Monitor. Tento nástroj sleduje celkovou aktivitu systému a statistiky včetně CPU, paměti, disku a sítě. Zachycuje informace o zatížení systému měřené na velikosti virtuální paměti. Také monitoruje všechny existující procesy, které mohou být dále sledovány novými nástroji pro každý proces. Poskytuje 4 grafy pro rychlou vizuální reprezentaci získaných dat. Pro naši potřebu postačí detailní graf pro aktuální spuštěnou a nahrávanou aplikaci, který se nachází v okně „Track pane“ (obrázek 2.46). Ostatní grafy poskytují informace o 5 procesech v telefonu, které nejvíce využívají paměť, či CPU. [13]

50


Obrázek 2.45: Nástroj Activity monitor

Ve výchozím nastavení se promítají do grafu 4 vlastnosti: • VM Size – Celková velikost virtuální paměti. • Total load (%) – Procento celkového zatížení na zařízení během vzorku. • User load (%) – Procento zatížení způsobené uživatelem během vzorku. • Systém load (%) – Procento zatížení působící na operační systém.

51

2. Návrh aplikace

Obrázek 2.46: Okno „Track pane“

2.4.3.1

Metodika měření

Měření bylo provedeno pro frameworky Core Graphics a OpenGL ES 2.0. Aplikace byla testována na telefonu iPhone 3GS s iOS 5.1.1 (9B206), CPU ARM Cortex–A8 600 MHz, GPU PowerVR SGX535, paměť 256 MB RAM [21] a analyzována pomocí softwaru Instruments nástrojem Activity monitor. V konfiguračním dialogu v okně inspektora (obrázek 2.47) byla nastavena cílová analyzovaná aplikace, vzorkování (jak často se mají sbírat data), systémová statistika, jak jsou informace zobrazeny podle stylu, typu a zvětšení. Vysvětlivky měřených hodnot (systémová statistika): • % CPU – Procento z CPU používané procesem. • Fyzické použití paměti (Physical Memory Used) – Celkové množství paměti, která byla použita ve vzorku. • % Celkové zatížení (Total Load) – Procento celkového zatížení na zařízení během vzorku.

52


Obrázek 2.47: Nastavení Hlavní bylo analyzovat zatížení telefonu při vykreslování grafických primitiv. Implementované aplikace vykreslovaly šachovnici 8x10 políček. Tato šachovnice byla postupně vykreslena 1 krát, 20 krát, 50 krát a 100 krát. Bylo tedy vykresleno 80, 1600, 4000 a 8000 čtverečků. Pro každý případ byla aplikace spuštěna pětkrát. Sledovány byly různé hodnoty, ale ke statistice byly vybrány pouze hodnoty vypovídající o zatížení CPU a paměti. Z každého vzorku byly vybrány maximální hodnoty, které byly zprůměrovány a zaneseny do výsledné tabulky. Všechny naměřené výsledky (i nezahrnuté do statistiky) a grafy v aplikaci Instruments byly vloženy na přiložené CD. 2.4.3.2

Aplikace v Core Graphics

V tabulkách jsou uvedeny naměřené výsledky pro framework Core Graphics. Pro každý případ byla aplikace spuštěna pětkrát a zajímala nás nejvyšší hodnota ze sledovaných statistik. Nejvyšší proto, že vykreslování postupně zvyšuje svoje nároky na systém až dosáhne maxima a poté nároky klesají. Poslední řádek v tabulce reprezentuje průměr naměřených hodnot v tabulce.

53

2. Návrh aplikace % CPU 6,85 6,92 7,71 6,92 6,62 7

Fyzické použití paměti (MB) 138,26 137,38 137,35 137,57 137,45 137,60

% Celkové zatížení 25,93 25,23 26,17 24,07 24,77 25,23

Tabulka 2.8: Výsledky pro 80 vykreslených primitiv (CG)

% CPU 40,32 44,90 40,55 45 44,24 43


% Celkové zatížení 50 62,86 49,53 60 56,07 55,69


% CPU 71,60 66,66 53,87 55,15 57,18 60,89




54

2.4. Analýza dostupných grafických frameworků % CPU 95,25 95,13 83,47 95,29 95,57 92,94


% Celkové zatížení 100 100 100 100 100 100


2.4.3.3

Aplikace v OpenGL ES 2.0

V tabulkách jsou uvedeny naměřené výsledky pro framework OpenGL ES verze 2.0. % CPU 13,78 14,62 14,32 14,08 14,72 14,30



Tabulka 2.12: Výsledky pro 80 vykreslených primitiv (OpenGL ES)

% CPU 21,13 20,87 21,61 21,29 20,58 21,10




55

2. Návrh aplikace % CPU 16,01 27,51 25,18 23,34 29,23 24,25




% CPU 39,04 39,57 33,82 39,60 36,78 37,76




2.4.3.4

Výsledky

V tabulkách jsou shrnuty výsledné naměřené a vypočtené hodnoty. Framework CG dosahuje malého zatížení na CPU pouze při vykreslování malého množství primitiv. Již při kreslení 1600 grafických primitiv je průměrné zatížení na procesor 43 %. Se zvyšujícím se počtem vykreslených objektů je CPU zatěžováno neúnosně a celkově zatěžuje celý systém průměrně ke 100 %. Nároky na paměť zůstávají prakticky stejné v rozmezí 137 – 140 MB. OpenGL ES 2.0 více využívá procesor při malém množství vykreslovaných primitiv než CG. Avšak zvyšující se počet vykreslených útvarů zatěžuje výrazně méně procesor i celkově celý systém než CG. Při vykreslení 8 tisíc primitv je procesor průměrně zatížený na necelých 38 %, což je oproti necelým 98 % u CG výrazně lepší výsledek. OpenGL ES 2.0 má o něco vyšší nároky na paměť. Jedná se zhruba o navýšení o 10 MB oproti CG. Protože má framework OpenGL ES 2.0 menší nároky na zatížení procesoru i celého systému, jak bylo zjištěno při testech, byl vybrán pro implementaci grafické části v aplikaci.

56

2.4. Analýza dostupných grafických frameworků Počet vykreslených 80 1600 4000 8000

% CPU 7 43 60,89 92,94

Fyzické použití paměti (MB) 137,6 139,21 140,11 140,20

% Celkové zatížení 25,23 55,69 74,10 100

Tabulka 2.16: Výsledná tabulka Core Graphics

Počet vykreslených 80 1600 4000 8000

% CPU 14,30 21,10 24,25 37,76

Fyzické použití paměti (MB) 149,40 149,44 150,32 152,25

% Celkové zatížení 34,43 42,48 36,75 52,42

Tabulka 2.17: Výsledná tabulka OpenGL ES 2.0

57

2. Návrh aplikace

Obrázek 2.48: Graf zatížení CPU

58


Obrázek 2.49: Graf využití paměti

59

2. Návrh aplikace

Obrázek 2.50: Graf celkového zatížení

60

2.5. SWOT analýza

2.5

SWOT analýza

SWOT analýza vychází z anglických slov Strenghts (silné stránky), Weaknesses (slabé stánky), Opportunities (příležitosti) a Threats (hrozby). Silné a slabé stránky představují vnitřní stav organizace, který mohou ohrožovat příležitosti a hrozby z vnějšího okolí. Tato analýza slouží k převážně stanovení alternativních strategií organizace, definování rizik a výstupem je takzvaná SWOT matice. Důležité je nejdříve stanovit, za jakým účelem je analýza prováděna, definovat oblasti a poté definovat silné/slabé stránky a příležitosti a hrozby. SWOT analýza byla provedena pro webovou a mobilní část aplikace.

2.5.1

Identifikace slabých a silných stránek

Identifikovat silné a slabé stránky lze z různých studií, výročních zpráv nebo analýz, také různými poradami s ostatními zaměstnanci. Důležité je popsat, proč je tato slabá stránka považována za slabou a poté ohodnotit jejich důležitost. Poslední sloupeček (P) v tabulce představuje prioritu (důležitost) slabé a silné stránky. Hodnocení je od 1 do 5, kdy 1 je nejnižší priorita a 5 nejvyšší. Webová část Seznam slabých stránek Proč? Internet je nutný pro komunikaci Závislost na připojení se serverem, kde jsou uloženy k internetu. projekty uživatele. 3D zobrazení je v dnešní době Nepodporuje 3D. standard pro technické výkresy. U větších výkresů, které se skládají Problémy s vykreslováním z mnoha prvků, může docházet větších výkresů k velmi pomalému vykreslování (přes milión prvků). nebo se nevykreslí vůbec. Aplikace podporuje 3 známé Běh aplikace není zaručen webové prohlížeče (Mozilla ve všech prohlížečích. Firefox, Google Chrome, Opera). Umožňuje vykreslovat Aplikace zatím podporuje méně zatím málo CAD prvků. grafických prvků.

P 2 3

2

4

4

Tabulka 2.18: Seznam slabých stránek webové části

61

2. Návrh aplikace Webová část Seznam silných stránek Proč? Uživatel si nemusí instalovat Nevyžaduje instalaci softwaru. žádný dodatečný software. Přenositelnost na více Aplikace je spustitelná platforem. na jakémkoliv operačním systému. Pokud nejsou výkresy extrémně Rychlost vykreslování. objemné, vykreslují se rychle. Kreslit lze také pomocí psaní Podpora konzole. příkazů do konzole. Aplikace podporuje anglický Podpora dvou jazyků. a český jazyk.

P 4 4 5 3 2

Tabulka 2.19: Seznam silných stránek webové části

Mobilní část Proč? Pokud bude vydaná nová verze Omezenost pro určitou verzi operačního systému mobilního mobilního operačního systému. zařízení, nemusí aplikace fungovat korektně. 3D zobrazení je v dnešní době Nepodporuje 3D. standard pro technické výkresy. Pro přihlášení a aktualizaci projektů je nutné připojení Závislost na připojení k internetu. k internetu pro komunikaci se serverem. Není podpora angličtiny. Podporuje pouze český jazyk. Problém s vykreslením Vykreslení velkých výkresů u velkých výkresů. může trvat delší dobu. Seznam slabých stránek

Tabulka 2.20: Seznam slabých stránek mobilní části

62

P 2

3

2 3 4

2.5. SWOT analýza Mobilní část Seznam silných stránek Proč? Uživatel si může prohlídnout Dostupnost výkresů odkudkoliv. své výkresy téměř kdekoliv a kdykoliv. Díky použité technologii Rychlost vykreslování. OpenGL ES 2.0 je vykreslování rychlejší. Výkres je uložený ve formátu Uložený výkres tak v telefonu JSON. zabírá málo místa. Po přihlášení uživatele Data dostupná offline. a stažení projektů jsou data dostupná offline. Aktualizace jedné scény. Vykreslená scéna lze aktualizovat přímo.

P 4

4 2 3 3

Tabulka 2.21: Seznam silných stránek mobilní části

2.5.2

Identifikace hrozeb a příležitostí

Identifikovat hrozby a příležitosti lze ze vstupních podkladů a formou porady čí řízené diskuze. Opět je vhodné u každé hrozby/příležitosti uvést, proč je za hrozbu či příležitost považována. Poté dochází k ohodnocení, u hrozeb to je zvážení dopadu hrozby a její pravděpodobnost vzniku. U příležitosti hodnotíme závažnost dopadu a pravděpodobnost vzniku příležitosti. Obě tyto hodnoty sečteme a získáme tak prioritu hrozby či příležitosti. 1 2 3 4 5

zanedbatelná málo významná významná velmi významná nepřijatelná

Tabulka 2.22: Hodnocení dopadu hrozeb [20]

63

2. Návrh aplikace 1 2 3 4 5

zanedbatelná málo významná významná velmi významná zásadně významná

Tabulka 2.23: Hodnocení dopadu příležitosti [20]

1 2 3 4 5

téměř nemožná (1 – 20 %) výjimečná (21 – 40 %) běžná (41 – 60 %) vysoce pravděpodobná (61 – 80 %) prakticky jistá (81 – 100 %)

Tabulka 2.24: Hodnocení pravděpodobnosti vzniku hrozby/příležitosti [20] V tabulkách ve sloupečku P je první číslo dopad a druhé pravděpodobnost vzniku. Webová část Proč? Hrozí zahlcení serveru, krádež citlivých dat uživatelů a další Útok hackerů na server. problémy spojené s různými útoky. Odchytnutí nebo prolomení Uživatelské účty mohou být hesla. zneužity. Uživatel Nestandardní chování uživatele. Výpadek elektrické energie. – Seznam hrozeb

Tabulka 2.25: Seznam hrozeb webové části

64

P 5+4 4+3 2+1 1+1

2.5. SWOT analýza Webová část Seznam příležitostí Proč? Modernizace a vylepšení projektu Nová technologie novou technologií. Aplikace by mohla podporovat Podpora jiných webových například prohlížeč Safari prohlížečů. rozšířený na OS X. Implementace dalších složitějších Podpora dalších funkcí. funkcí typických pro CADové programy.

P 2+2 4+4

4+5

Tabulka 2.26: Seznam příležitostí webové části

Mobilní část Seznam hrozeb Proč? Hrozí zahlcení serveru, krádež citlivých dat uživatelů a další Útok hackerů na server. problémy spojené s různými útoky. Škodlivý program může ohrozit Škodlivý software Vaše zařízení. Odchytnutí nebo Uživatelské účty mohou být prolomení hesla. zneužity. Aplikace může rychleji Omezená kapacita baterie. spotřebovávat baterii mobilního telefonu.

P 5+4 2+3 4+3 1+1

Tabulka 2.27: Seznam hrozeb mobilní části

65

2. Návrh aplikace

Seznam příležitostí Nová technologie Podpora dalších OS.

Sdílení výkresů. Podpora tabletů. Vytvoření obrázku.

Mobilní část Proč? Modernizace a vylepšení projektu novou technologií. Aplikace bude podporovat více mobilních OS. Například Windows Phone. Uživatelé by měli možnost sdílet své výkresy mezi sebou. Například přes email. Rozšíření aplikace i na tablety. Aplikace udělá z výkresu obrázek ve standardním formátu (png, jpg, atd.).

Tabulka 2.28: Seznam příležitostí mobilní části

66

P 2+2 3+3

5+5 5+5 4+4

2.5. SWOT analýza

2.5.3

Matice SWOT

V maticích jsou seřazeny informace podle priority sestupně.

Obrázek 2.51: Matice SWOT webová část

67

2. Návrh aplikace

Obrázek 2.52: Matice SWOT mobilní část

68

Kapitola

Analýza iOS aplikace Aplikace bude zobrazovat 2D CAD data z WebCAD serveru. Pro aktualizaci údajů je nutné připojení k internetu. Pokud se bude uživatel snažit aktualizovat data bez internetového připojení, bude upozorněn. Po neúspěšné aktualizaci zůstanou platná data stažená a uložená v minulosti. Pokud se tedy uživatel úspěšně přihlásí, bude možno zobrazovat 2D data i offline. Ze serveru budou data konkrétního uživatele získávána pomocí REST27 služby, která vrátí příslušné scény podle ID přihlášeného uživatele. Data jsou uchovávána v dokumentu formátu JSON (více v kapitole 4 Realizace). Všechny stažené soubory se scénami budou v telefonu perzistentně uloženy v dočasné složce, protože není zálohována do iTunes28 . Pokud se uživatel odhlásí, budou tyto soubory smazány.

3.1

Funkční požadavky

• Aplikace bude zobrazovat 2D data. • Přihlášení povoleno pouze autentizovaným uživatelům. • Zobrazení scén pro přihlášeného uživatele. • Aktualizace dat. • Aktualizace pouze zobrazené scény. 27

Representational State Transfer http://www.ics.uci.edu/˜fielding/pubs/dissertation/rest_arch_style.htm 28 iTunes je aplikace, která shromažďuje a zálohuje Vaše data z telefonu jako je hudba, videa, fotografie, aplikace. Umožňuje i nákup na AppStore (obchod pro uživatele Apple zařízení). http://www.apple.com/cz/itunes/what–is/.

69

3

3. Analýza iOS aplikace

3.2

Nefunkční požadavky

• Minimálně podporovaný telefon je iPhone 3GS. • Vykreslování pomocí OpenGL ES 2.0. • Aplikace bude vyvíjená pro iOS 5.1 a 5.1.1, iOS 6.x. • Komunikace se vzdáleným serverem pomocí REST. • Zpracování JSON formátu. • Podpora gest zoom a pohyb do stran. • Offline režim. • Podpora orientace na šířku (Landscape) a výšku (Portrait).

3.3

Případy užití

Model případů užití je vytvořený softwarem Enterprise Architect29 . V aplikaci vznikají tři aktérské role. První je nepřihlášený uživatel, který nemá přístup do aplikace, dokud není autentizován se serverem. Druhá role je přihlášený uživatel, který má plný přístup k aplikaci. Při jeho přihlášení se automaticky naváže spojení se serverem a načtou se data podle ID uživatele. Pokud má uživatel vytvořené nějaké grafické scény, jsou zobrazeny jejich názvy v seznamu. Tento seznam scén je možné aktualizovat, opět se naváže spojení se serverem a aplikace obdrží nová data. Při označení řádku s názvem scény ze seznamu je uživatel přesměrován na obrazovku, kde je mu scéna vykreslena. Aktuální zobrazenou scénu lze také aktualizovat, automaticky se opět naváže spojení se serverem a stáhnou se nová data. Scéna je po úspěšné aktualizaci překreslena. Pokud jakákoliv aktualizace dat selže, zůstávají v aplikaci přístupná stará data. Třetí role je již zmiňovaný server, který uchovává data a zajišťuje autentifikaci uživatele.

29

70

http://www.sparxsystems.com/

3.4. Diagram tříd

Obrázek 3.1: Use Case model

3.4

Diagram tříd

Obrázek 3.2 je diagram tříd znázorňující několik vztahů mezi třídami. První je mezi uživatelem (třída „User“) a jeho scénami (třída „Scene“). Jeden uživatel může mít libovolný počet vytvořených scén nebo také žádnou. Třída „Shapes“ reprezentuje vykreslované objekty (každý objekt má svoji třídu viz. obrázek 3.3). V jedné scéně je opět libovolný počet vykreslených objektů (nemusí být žádný a scéna tak bude prázdná). Některé objekty se skládají z jiných menších objektů. Například lomená čára (třída „Polyline“) 71

3. Analýza iOS aplikace se skládá z pole úseček (třída „Line“) a proto je v diagramu tento vztah také naznačen.

Obrázek 3.2: Diagram tříd „Classes“

72

3.4. Diagram tříd

3.4.1

Objekty ve scéně

Budou popsány vykreslované objekty, tak jak jsou reprezentovány v dokumentu na serveru. • Bod – jednoduchý prvek jedna souřadnice na ose x a y. • Úsečka – skládá se z počátečního a koncového bodu. • Obdélník – reprezentován bodem vlevo nahoře a šířkou a výškou. • Kruh – obsahuje středový bod a poloměr. • Elipsa – středový bod a poloměr malé a velké poloosy. • Oblouk – středový bod, poloměr a počáteční a koncový úhel. • Polyline – složena z pole úseček. • Text – obyčejný text s nějakým fontem, velikostí, stylem. • Kóta – skládá se z textu a 3 úseček. • Leader – skládá se ze dvou úseček a polygonu, dohromady tvoří šipku. Na konci je kruh s textem. • Ray – Přímka, která jde z počátečního bodu přes další bod do nekonečna. • Infinite line – Přímka, která jde na obou stranách přes body do nekonečna Obrázek 3.3 reprezentuje třídy vykreslovaných objektů a vztahů mezi nimi. Do diagramu jsou zahrnuté také dvě třídy, „Style“ a „Color“. Třída „Style“ určuje styl objektů, jejich barvu, šířku čáry, transformační matici a další. Diagram se nachází pro svoji robustnost také na přiloženém CD, kde je možné si ho detailněji prohlédnout.

73

3. Analýza iOS aplikace

Obrázek 3.3: Diagram tříd „Shapes“ 74

Kapitola

Realizace 4.1

Použité technologie

Aplikace byla implementována v programovacím jazyce Objective–C 2.0. Tento jazyk je implementovaný jako rozšíření jazyka C o objektově orientovaný přístup. Objective–C je nativní, primární jazyk pro vývoj Cocoa a Cocoa Touch aplikací. Framework Cocoa Touch slouží k vývoji iOS aplikací a zahrnuje základní frameworky Foundation a UIKit (samotný Cocoa je pro OS X). Framework Foundation implementuje kořenovou třídu NSObject, která definuje základní objektové chování. [11] Developerský nástroj pro iOS aplikace se nazývá XCode. Byla použita aktuální verze 4.6.2 a dále iOS simulátor verze 6.0, který je součástí XCode. Server tedy bude posílat data ve formátu JSON30 (JavaScript Object Notation). Tento formát je textový, jazykově nezávislý, člověkem i strojem snadno čitelný. Používá konvence rodiny jazyků C. [1]

4.2

Přihlášení

Uživatel zadává své uživatelské jméno a heslo pro přihlášení k serveru. Pokud je úspěšně autorizován obdrží takzvaný autorizační token. Platnost tohoto tokenu je půl hodiny. Pokud tedy bude uživatel v nečinnosti, token po uplynutí doby vyprší a je potřeba se znovu přihlásit. Tento autorizační token bude uložen do centrálního zašifrovaného uložiště Keychain. Každá aplikace tak má přístup pouze k položkám, které ji patří a nemůže tak přistupovat k citlivým datům jiných aplikací. [6] 30

www.json.org

75

4

4. Realizace

4.3

Grafická primitiva

Vybraný framework pro grafickou část aplikace byl OpenGL ES. OpenGL vykresluje veškeré objekty pomocí grafických primitiv. Pokud tedy kreslíme obdélník, bude se skládat z grafického primitiva GL_TRIANGLE_FAN, který představuje pás trojúhelníků. Pro samotnou implementaci vykreslování byl použit již zmiňovaný framework GLKit, který poskytuje třídu GLKView, která slouží ke kreslení pomocí OpenGL ES. 1. GL_POINTS – samostatné body

Obrázek 4.1: GL_POINTS [2]

2. GL_LINES – úsečka

Obrázek 4.2: GL_LINES [2]

76

4.3. Grafická primitiva 3. GL_LINE_STRIP – kontinuální soubor úseček, mezi prvním a posledním vrcholem není úsečka.

Obrázek 4.3: GL_LINE_STRIP [2]

4. GL_LINE_LOOP – stejné jako GL_LINE_STRIP, ale mezi prvním a posledním vrcholem je úsečka. Vzniká tedy smyčka. V aplikaci kreslíme nevybarvený kruh nebo elipsu.

Obrázek 4.4: GL_LINE_LOOP [2]

5. GL_TRIANGLES – samotný trojúhelník.

Obrázek 4.5: GL_TRIANGLES [2]

77

4. Realizace 6. GL_TRIANGLE_STRIP – Kromě prvního (a posledního) vrcholu je každý následující použit znovu pro vytvoření dalšího trojúhelníka. Začínáme ve v0, v1, v2 pak v1, v2, v3 a pak v2, v3, v4 a poslední v3, v4 a v5. V aplikaci použijeme pro kreslení například oblouku.

Obrázek 4.6: GL_TRIANGLE_STRIP [2]

7. GL_TRIANGLE_FAN – vzniká pás trojúhelníků, který se používá k vykreslování kuželovitých tvarů. K jejich vytvoření se použije první vrchol v0 a předcházející vrchol. Začínáme ve v0, v1, v2 pak v0, v2, v3 pak v0, v3, v4 a poslední v0, v4, v5. Použito pro obdélník.

Obrázek 4.7: GL_TRIANGLE_FAN [2]

4.4 4.4.1

Použité externí knihovny AFNetworking

AFNetworking31 je síťová knihovna pro iOS, která používá technologie frameworku Foundation (nejdůležitějšími jsou NSURLConnection, NSOperation nebo NSURLRequest). Autoři jsou Mattt Thompson a Scott Raymond. Kompatibilní s iOS 5.0 a vyšší. V projektu byla použita implemen31

78

http://afnetworking.com/

4.5. Návrhový vzor Model–View–Controller tace třídy AFJSONRequestOperation pro získání dokumentu ve formátu JSON z URL.

4.4.2

Reachability

Jedná se o jednu třídu s názvem Reachability32 , která se jednoduše použije pro zjištění statusu síťového připojení (WiFi, 3G, EDGE, CDMA). Jejím autorem je Tony Million. Umožňuje také notifikovat aplikaci, zda je síťové připojení k dispozici a udělat aktualizaci automaticky. Používá nejnovější metody vícevláknového zpracování.

4.4.3

SVProgressHUD

Umožňuje jednoduše sdělit uživateli, že aplikace pracuje a je zaneprázdněna. Obrázek 4.11 zobrazuje HUD, který se skládá z popisku a aktivity indikátoru, vše je zobrazeno na UIView. Autorem je Sam Vermette. Protože je vytvořen jako singleton, nemusí být alokován a tak můžeme standardním způsobem volat rovnou metodu pro zobrazení.33

4.5

Návrhový vzor Model–View–Controller

Tento návrhový vzor rozděluje objekty v aplikaci do tří rolí: Model, View a Controller. Tímto způsobem je rozdělena i komunikaci mezi nimi. Všechny aplikace pro iOS na tomto vzoru stojí a používají ho. Komponenta Model reprezentuje veškerá perzistentní data a logiku aplikace. Pokud se změní objekt Modelu (např. obdrží nová data) oznámí tuto skutečnost objektu Controller a ten se postará o aktualizaci dat v objektu View. Komponenta View prezentuje uživateli data z objektu Model a ten je vidí na obrazovce. Může reagovat na uživatelské akce a představuje grafické prostředí. Data dostává od objektu Controller a ten také informuje o započaté uživatelské akci. Contoller je prostředník mezi komponentami View a Model. View ho informuje o uživatelské akci, on jí provede a vyžádaná data od Modelu předá zpět do View, který je zobrazí. V aplikacích iOS je časté, že dochází ke spojení komponent View a Controller do objektu s názvem ViewController. Pro implementaci těchto 32 33

Dostupné z https://github.com/tonymillion/Reachability. Dostupné z https://github.com/samvermette/SVProgressHUD.

79

4. Realizace tříd je možné dědit od rodičovské třídy ViewController, která je připravená přímo od developerů společnosti Apple. Pro některé prvky jsou třídy rovnou předpřipraveny, jako například pro tabulku TableViewController, UIViewController a další. Méně časté je také spojení Model a Controller do ModelController objektu. [17]

Obrázek 4.8: Architektura Model–View–Controller [16]

80

4.6. Screenshoty aplikace

4.6

Screenshoty aplikace

Pokud není uživatel přihlášen, jako první obrazovka po spuštění aplikace je „Login“ obrazovka (obrázek 4.9). Pokud jsou textová pole prázdná, jsou předvyplněná nápovědou (tzv. placeholder) pro zadání přihlašovacích údajů. Pokud uživatel klikne do textového pole, zobrazí se klávesnice. Jakékoliv kliknutí mimo textové pole klávesnici schová. Tlačítko „Přihlásit se“ má vlastní design.

Obrázek 4.9: Screenshoty „Login“ obrazovka

81

4. Realizace Pokud není při spuštění aplikace uživatel přihlášen a není ani dostupné připojení k síti, je zobrazena zpráva (AlertView) a tlačítko „Přihlásit se“ je šedivé a nereaguje na uživatelovo kliknutí (obrázek 4.10).

Obrázek 4.10: Screenshot „Login“ obrazovka – není připojení k síti

82

4.6. Screenshoty aplikace Po úspěšném přihlášení je zahájena komunikace se serverem a staženy příslušné scény (JSON soubory) podle uživatelovo ID a ID scén. V řádkách tabulky (obrázek 4.11) jsou zobrazeny jednotlivé scény, jejich název a kdy byly naposledy změněny (ve webovém prostředí WebCAD). Malé obrázky v tabulce jsou načítány na pozadí, protože je důležité, aby uživatel viděl nejdříve text a mohl s tabulkou pracovat. Pokud by tedy byly obrázky velkého objemu dat, nevznikne problém prázdných řádků v tabulce, který by mohl nastat při čekání na načítání obrázku.

Obrázek 4.11: Screenshot obrazovka „Projekty“

83

4. Realizace Obrazovka „Detail“ (obrázek 4.13) vykreslí pomocí OpenGL ES veškerá data, která se předpřipraví před vykreslením. Výkres lze přibližovat a oddalovat pomocí gesta pinch a posouvat ve všech směrech. Scénu lze překreslit, a pokud není dostupné připojení k síti, je opět zobrazena zpráva.

Obrázek 4.12: Gesto pinch

84

4.6. Screenshoty aplikace

Obrázek 4.13: Screenshot obrazovky „Detail“ – vykresluje scénu

85

4. Realizace Obrazovka „Nastavení“ (obrázek 4.14) je opět jako tabulka ve stylu Group s jednou sekcí. Prozatím umožňuje pouze odhlášení uživatele a ten je přesměrován na úvodní obrazovku „Login“ (obrázek 4.9).

Obrázek 4.14: Screenshot obrazovka „Nastavení“

4.7

Testování

Každý developer, který chce vyvíjet aplikace pro zařízení společnosti Apple, se musí zaregistrovat do developer programu34 . Pro jedince stojí tato licence 99 dolarů za rok. V rámci univerzitního projektu lze využít možnosti univerzitního developer programu. Tento program je zdarma. Student tak 34

86

https://developer.apple.com/programs/which-program/

4.8. Budoucí vývoj může vyvíjet aplikace, testovat je na reálném zařízení a sdílet mezi ostatními studenty v programu. Jediné co nemůže je distribuovat aplikaci na App Store. K testování bylo vybráno několik studentů, kteří byli ve stejném univerzitním developer programu. K distribuci aplikace byl použit program TestFlight35 , který umožňuje instalovat testerům aplikaci bez vložení developerského profilu (nazývá se Provisioning Profile) do jejich zařízení. Tester tak může aplikaci nainstalovat na své zařízení, ale nemůže nijak pracovat s developer programem. Toto je vhodné, pokud nechceme, aby tester mohl zneužít účet pro svoje potřeby vývoje. Aplikace byla testována na iPhone 3GS iOS 5.1.1, iPhone 5 iOS 6.1.4 a iPhone 5 iOS 6.1.2. Testování bylo zaměřeno hlavně na vzhled designu aplikace a také na správnost vykreslování výkresů pomocí OpenGL ES. Zátěžové testy technologie OpenGL ES byly provedeny v předešlé podkapitole 2.4.3.3.

4.8

Budoucí vývoj

Vývoj na aplikaci WebCAD bude pokračovat i po odevzdání diplomové práce. Stále je potřeba doimplementovat některé funkce a dále modernizovat aplikaci a rozšířit ji o novou funkčnost. V první řadě je ale důležité zaměřit se na dodělání některých implementačních částí aplikace. Protože není zatím připraven server pro backend, implementace přihlašování uživatelů byla odložena. Je také potřeba doimplementovat uzavřený vybarvený konkávní (nekonvexní) polygon. Takový polygon má jeden nebo více úhlů větších než 180 stupňů. Při vykreslování je potřeba udělat teselaci polygonu pomocí triangulace. Jedná se o vytvoření trojúhelníkové sítě uvnitř polygonu. Dále je potřeba optimalizovat implementaci OpenGL ES. Tato technologie je složitá a při implementaci nebyl použit žádný externí framework. Bylo by vhodné implementovat funkci sdílení výkresů mezi uživateli. Uživatel bude moci poslat přes email odkaz na službu WebCAD nebo bude možné vytvořit z výkresu obrázek ve standardním formátu a poslat ho přes email. Vhodné by také bylo umožnit vzdálený tisk výkresů přes službu AirPrint36 , kdy se telefon připojí k tiskárně bezdrátově pomocí WiFi. Aplikace zatím podporuje pouze český jazyk, proto je jako další možnost lokalizovat ji do anglického jazyka. 35 36

https://testflightapp.com/ http://support.apple.com/kb/ht4356

87

4. Realizace Jako čerstvá novinka byl 10.6.2013 představen na developerské konferenci WWDC37 nový iOS 7. Systém je již přístupný developerům pro vývoj aplikací a veřejnosti bude uvolněn během podzimu. Proto je vhodné zamyslet se nad úpravou aplikace pro tuto nejnovější verzi iOS. Složitější funkce, která zahrnuje komplexní práci na celém projektu WebCAD je podpora 3D zobrazení. 3D pohled je pro CAD výkresy velmi důležitý a pro další vývoj projektu nenahraditelný. Všechny podobné aplikace, které byly zkoumány v podkapitole 2.1 podporují tuto funkci. Jelikož webové rozhraní podporuje zatím pouze kreslení ve 2D pohledu je tato funkce zatím jen na seznamu dlouhodobějších cílů.

37

88

https://developer.apple.com/wwdc/

Závěr Cílem diplomové práce bylo připravit projekt mobilních aplikací pro celý systém WebCAD. To zahrnovalo provést rešerše existujících řešení, navrhnout wireframy pro platformu Android i iOS a provést SWOT analýzu. Také provést analýzu grafických frameworků Core Graphics a OpenGL ES a vybrat vhodnější pro implementaci. V druhé praktické části byla naimplementovaná mobilní aplikace pro systém iOS, která zobrazuje 2D data z WebCAD serveru. Uživatelské rozhraní (wireframy) obou aplikací bylo navrženo po pečlivém přečtení doporučených postupů a pravidel. Android má spíše obecnější pravidla a vývojáři je ponechán větší prostor pro jeho kreativitu. Společnost Apple má tento dokument obsáhlý a striktně popisuje každý grafický prvek. Je důležité dodržovat tyto pravidla, aby zůstal jednotný styl a hlavně funkčnost, na kterou je uživatel zvyklý. Platforma iOS nabízí dva základní grafické frameworky a to Core Graphics a OpenGL ES. CG je framework vyvíjený společností Apple a je tak použitelný pouze pro zařízení s operačním systémem iOS. OpenGL ES je technologie, která je platformově nezávislá a podporuje 2D i 3D kreslení. CG podporuje pouze 2D kreslení, ale je nezávislý na vlastnostech grafického zařízení. Vyvíjená aplikace bude zobrazovat 2D data a bude pro zařízení iPhone, takže tyto rozdíly nebyly důležité. Primárně byla zaměřena pozornost na zátěž zařízení během vykreslování. Proto byly implementovány dvě jednoduché aplikace, jedna s Core Graphics a druhá s OpenGL ES. Bylo vykresleno postupně 80, 1600, 4000 a 8000 čtverců. Při menším počtu vykreslovaných objektů dosahuje lepších výsledků Core Graphics. Ovšem již při vykreslení 1600 objektů zatěžuje OpenGL ES procesor o průměrně 10 % méně. S rostoucím počtem objektů má OpenGL ES průměrně o necelých 50 % menší nároky na procesor a celkové zatížení systému. Protože tech89

Závěr nický výkres se může skládat z velkého počtu grafických prvků, byl zvolen, vzhledem k naměřeným výsledkům, OpenGL ES framework. Aplikace tak bude také připravena pro budoucí implementaci podpory 3D dat. V praktické části byla implementována aplikace pro systém iOS minimální verze 5.1. Je podporována orientace telefonu na šířku (landscape) i na výšku (portrait). Po spuštění aplikace se uživatel musí přihlásit ke svému účtu, který bude mít založen na serveru. Po úspěšné autentifikaci se načtou a stáhnou data o jeho projektech. Musí být dostupné připojení k internetu. Tyto scény se uloží perzistentně v paměti telefonu, dokud se uživatel neodhlásí. Pokud uživatel změní, odebere či vytvoří výkres přes webové rozhraní WebCAD může si jednoduše aktualizovat všechny scény i ve svém mobilním zařízení. Je možné aktualizovat a překreslit přímo již vykreslenou scénu. Byla také implementována základní gesta pinch a tap. Gesto pinch umožňuje přibližovat a oddalovat výkres a rychlým poklepáním, 2x za sebou (gesto tap), se výkres vrátí do původní velikosti. Výkres lze také libovolně posouvat do všech směrů. Ve SWOT analýze byly zjištěny silné a slabé stránky ve vztahu k hrozbám a příležitostem webové a mobilní části aplikace. Webová část, kterou implementoval student jako svoji bakalářskou práci, je nezávislá na platformě operačního systému a nemusí se instalovat žádný software. Slabá stránka je, že aplikace zatím podporuje méně objektů a funkcí ohledně kreslení. S implementací se počítá v dalším vývoji. Mobilní část umožňuje prohlížet výkresy téměř kdykoliv a kdekoliv. Hrozbou u obou částí je zneužití aplikací, odchycení hesla a získání neoprávněného přístupu k datům. V budoucnosti se aplikace musí přizpůsobit rozvoji technologiím a modernizovat se. Určitě by neměla chybět podpora pro tablety. Detailní popis a ohodnocení jednotlivých faktorů je popsáno v podkapitole 2.5. Tato diplomová práce pro mě byla velkým přínosem. Vybrala jsem si ji proto, že mě zajímá odvětví mobilních technologií. Již ve své bakalářské práci jsem se tomuto tématu věnovala. Programování pro platformu iOS a technologie OpenGL byly pro mě nové a nasbírala jsem mnoho cenných informací a zkušeností.

90

Literatura [1] Úvod do JSON. [online], 2000, [cit. 2013-05-05]. Dostupné z: http: //www.json.org/json-cz.html [2] IPhone Software Development: OpenGL ES for iPhone: A Simple Tutorial Part 1. [online], 2009, [cit. 2013-06-02]. Dostupné z: http://iphonesdkdev.blogspot.cz/2009/04/opengl-es-foriphone-simple-tutorial.html [3] Allesi, P.: Vývoj her pro iPhone a iPad: programování pro iOS. Vyd. 1. Brno: Zoner Press, 2012, ISBN 978-80-7413-199-8. [4] Android: Dashboards: Platform Versions. [online], 2013, [cit. 2013-05-09]. Dostupné z: http://developer.android.com/about/ dashboards/index.html [5] Android: User Interface Guidelines. [online], 2013, [cit. 2013-05-15]. Dostupné z: http://developer.android.com/design/index.html [6] Apple: Keychain Services Programming Guide: Keychain Services Concepts. [online], 11.6.2012, [cit. 2013-06-06]. Dostupné z: https: //developer.apple.com/library/mac/#documentation/security/ conceptual/keychainServConcepts/02concepts/concepts.html [7] Apple: GLKit Framework Reference. [online], 17.7.2012, [cit. 201305-20]. Dostupné z: http://developer.apple.com/library/ ios/documentation/GLkit/Reference/GLKit_Collection/ GLKit_Collection.pdf

91

Literatura [8] Apple: IOS Technology Overview. [online], 19.9.2012, [cit. 2013-05-12]. Dostupné z: http://developer.apple.com/ library/ios/documentation/Miscellaneous/Conceptual/ iPhoneOSTechOverview/iPhoneOSTechOverview.pdf [9] Apple: Quartz 2D Programming Guide. [online], 19.9.2012, [cit. 2013-05-16]. Dostupné z: https://developer.apple.com/ library/mac/#documentation/GraphicsImaging/Conceptual/ drawingwithquartz2d/Introduction/Introduction.html [10] Apple: UIView Class Reference. [online], 19.9.2012, [cit. 201305-17]. Dostupné z: http://developer.apple.com/library/ ios/#documentation/uikit/reference/UIView_Class/UIView/ UIView.html#//apple_ref/doc/uid/TP40006816 [11] Apple: Cocoa Core Competencies. [online], 2013, [cit. 2013-0517]. Dostupné z: http://developer.apple.com/library/ios/ #documentation/general/conceptual/DevPedia-CocoaCore/ Cocoa.html [12] Apple: Instruments User Guide. [online], 23.4.2013, [cit. 2013-05-19]. Dostupné z: http://developer.apple.com/ library/mac/#documentation/DeveloperTools/Conceptual/ InstrumentsUserGuide/Introduction/Introduction.html [13] Apple: Instruments User Reference: Activity Monitor Instrument. [online], 23.4.2013, [cit. 2013-05-19]. Dostupné z: http://developer.apple.com/library/mac/#documentation/ AnalysisTools/Reference/Instruments_User_Reference/ ActivityMonitorInstrument/ActivityMonitorInstrument.html [14] Apple: OpenGL ES Programming Guide for iOS. [online], 23.4.2013, [cit. 2013-05-16]. Dostupné z: http://developer.apple.com/ library/ios/#documentation/3DDrawing/Conceptual/ OpenGLES_ProgrammingGuide/Introduction/Introduction.html [15] Apple: IOS Human Interface Guidelines. [online], 5.1.2013, [cit. 2013-05-17]. Dostupné z: http://developer.apple.com/library/ ios/documentation/UserExperience/Conceptual/MobileHIG/ Introduction/Introduction.html

92

Literatura [16] Apple: Cocoa Core Competencies: Model–View–Controller. [online], 5.4.2013, [cit. 2013-05-24]. Dostupné z: http://developer.apple.com/ library/mac/#documentation/General/Conceptual/DevPediaCocoaCore/MVC.html [17] Apple: Concepts in Objective–C Programming: Model–View– Controller. [online], 9.1.2012, [cit. 2013-05-24]. Dostupné z: https: //developer.apple.com/library/mac/#documentation/General/ Conceptual/CocoaEncyclopedia/Model-View-Controller/ModelView-Controller.html#//apple_ref/doc/uid/TP40010810-CH14 [18] Buck, E. M.: Learning OpenGL ES for iOS: a hands–on guide to modern 3D graphics programming. USA: Addison-Wesley, 2012, ISBN 03217-4183-8. [19] Golson, J.: Nearly 300 Million Devices Running iOS 6, 60 % of All iOS Devices Ever. [online], 28.1.2013, [cit. 2013-05-09]. Dostupné z: http://www.macrumors.com/2013/01/28/nearly-300million-devices-running-ios-6-60-of-all-ios-devices-ever/ [20] Grasseová, M.; Dubec, R.; Řehák, D.: Analýza podniku v rukou manažera: 33 nejpoužívanějších metod strategického řízení. Computer Press a.s. Brno, 2010, ISBN 978-80-251-2621-9, s. 295 – 322. [21] GSMARENA: Apple iPhone 3GS: Full phone specifications. [online], 2009, [cit. 2013-05-22]. Dostupné z: http://www.gsmarena.com/ apple_iphone_3gs-2826.php [22] Kochan, S. G.: Objective–C 2.0: výukový kurz programování pro Mac OS X a iPhone. Computer Press, Brno, 2011, ISBN 978-80-251-2654-7. [23] Mark, D.; Lamarche, J.: IPhone SDK: průvodce vývojem aplikací pro iPhone a iPod touch. Vyd. 1. Brno: Computer Press, 2010, ISBN 97880-251-2820-6. [24] van der Meulen, R.; Rivera, J.: Gartner Says Worldwide Mobile Phone Sales Declined 1.7 Percent in 2012. [online], 13.2.2013, [cit. 2013-05-09]. Dostupné z: http://www.gartner.com/newsroom/id/2335616

93

Příloha

Seznam použitých zkratek CAD Computer Aided Design SWOT Strengths, Weaknesses, Opportunities, Threats STL STereoLithography DXF Drawing Exchange Format DWG DraWinG DWF Design Web Format GPS Global Positioning System PDF Portable Document Format FTP File Transfer Protocol UI User Interface dp Density Pixel dpi Dots per Inch Wifi Wireless Fidelity OpengGL ES Open Graphics Library for Embedded Systems CG Core Graphics ULO Upper Left Origin LLO Lower Left Origin 95

A

A. Seznam použitých zkratek API Application Programming Interface CPU Central Processing Unit GPU Graphic Processing Unit OS Operating System JSON JavaScript Object Notation REST Representational State Transfer URL Uniform Resource Locator EDGE Enhanced Data Rates for GSM Evolution CDMA Code Division Multiple Access HUD Head–up Display

96

Příloha

Obsah přiloženého CD

diagramy ........................... veškeré diagramy použité v práci mereni grafy..............................výstup z aplikace Instruments namereno.xls ............................. souhr naměřených dat src.....................................zdrojové kódy implementace referencni_aplikace ......... zdrojové kódy referenčních aplikací thesis....................zdrojová forma práce ve formátu LATEX webCAD...........................zdrojové kódy aplikace WebCad text.....................................................text práce thesis.pdf...........................text práce ve formátu PDF 97

B

Vedení projektu mobilních aplikací WebCAD a mobilní aplikace pro ios

Recommend Documents