AKADEMIA GÓRNICZO-HUTNICZA IM. STANISŁAWA STASZICA W KRAKOWIE Wydział Inżynierii Metali i Informatyki Przemysłowej PRACA DYPLOMOWA MAGISTERSKA pt. „Opracowanie własnej strony i przeglądarki dla iPhone” Imię i nazwisko dyplomanta: Mirosław Suchy Kierunek studiów: Informatyka Stosowana Specjalność: Systemy Informatyki Przemysłowej Nr albumu: 204653 Promotor: dr Magdalena Kopernik Recenzent: dr hab. inż. Krzysztof Banaś, prof. AGH Podpis dyplomanta: Podpis promotora: Kraków 2012
88
Embed
PRACA DYPLOMOWA MAGISTERSKA - Strona główna AGHhome.agh.edu.pl/~kopernik/resource_PMiIDP/Suchy_M.pdf · Część II ... oraz śledzenia ich ruchu niezależnie od siebie, ... aparat
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
AKADEMIA GÓRNICZO-HUTNICZA IM. STANISŁAWA STASZICA W KRAKOWIE
Wydział Inżynierii Metali i Informatyki Przemysłowej
PRACA DYPLOMOWA MAGISTERSKA
pt.
„Opracowanie własnej strony i przeglądarki dla iPhone”
Imię i nazwisko dyplomanta: Mirosław Suchy
Kierunek studiów: Informatyka Stosowana
Specjalność: Systemy Informatyki Przemysłowej
Nr albumu: 204653
Promotor: dr Magdalena Kopernik
Recenzent: dr hab. inż. Krzysztof Banaś, prof. AGH
Podpis dyplomanta: Podpis promotora:
Kraków 2012
Oświadczam, świadomy(-a) odpowiedzialności karnej za poświadczenie nieprawdy, że niniejszą pracę dyplomową wykonałem(-am) osobiście i samodzielnie i że nie korzystałem(-am) ze źródeł innych niż wymienione w pracy.
Kraków, dnia …… Podpis dyplomanta…………….
2
Spis treści Część I.................................................................................................................... 5
Poprzez Xcode często określa się zestaw kilku narzędzi, programów do wytwarzania
oprogramowania na platformę iOS.
• Xcode
• Interface Builder
• iOS Simulator
• Instruments
7.2.1. Xcode
Xcode to zintegrowane środowisko programistyczne (IDE - Integrated Development
Environment) zawierające narzędzia opracowane przez Apple do tworzenia oprogramowania
dla OS X oraz iOS. Program zawiera narzędzia do tworzenia kodu źródłowego, usuwania z
niego błędów, kompilacji aplikacji oraz poprawiania wydajności już utworzonych aplikacji
(Rysunek 18).
Najnowsze wersje środowiska (3.2 i nowsze) korzystają z kompilatora LLCV z Clang
jako front-end, w starszych występuję zmodyfikowana wersja GCC. Xcode posiada wsparcie
dla takich języków jak: C, C++, Objective-C, Objective-C++, Java, AppleScript, Python,
Ruby oraz poprzez dodatki dla GNU Pascal, Free Pascal, Ada, C#, Perl i D [19].
Rysunek 18. Okno programu Xcode 3 (zrzut ekranu).
38
7.2.2. Interface Builder
Interface Builder jest niezależną częścią Xcode przeznaczoną do tworzenia graficznego
interfejsu aplikacji.
Program Interface Builder stworzony w języku programowania Lisp, po raz pierwszy
ukazał się w roku 1986. Przez lata był wykorzystywany podczas tworzenia aplikacji dla
systemów NeXTSTEP, OpenSTEP, Mac OS X, a obecnie dla urządzeń korzystających z
systemu iOS. Interface Builder obsługuję dwa typy plików:
• .nib - starszy format, skrót od NeXT Interface Builder
• .xib - nowszy format
Obecnie wszystkie szablony projektów używają nowego formatu .xib, ale do niedawna
wszystkie tworzone przez Interface Builder pliki miały rozszerzenie .nib. Z tego powodu
większość programistów nadal nazywa pliki Interface Builder plikami nib, wynika to również
z łatwości wypowiedzenia „nib file” w przeciwieństwie do „xib file” [5].
Rysunek 19. Okna programu Interface Builder (zrzut ekranu z widocznymi oknami: biblioteka, widok, właściwości oraz okno główne pliku „HelloWorldViewConroller.xib”) [2].
39
7.2.3. iOS Simulator
Napisaną aplikacje trzeba będzie kiedyś przetestować i sprawdzić czy uzyskany rezultat
jest zgodny z oczekiwaniami programisty. Tutaj może pojawić się kolejne rozczarowanie.
Bezpłatne konto na iOS Dev Center [18] nie pozwala na umieszczenie aplikacji w
rzeczywistym urządzeniu, np. iPhone. Nie mamy też możliwości umieszczenia aplikacji w
sklepie App Store. Taką możliwość daje nam konto płatne:
• Program Standard - koszt 99 USD rocznie, przeznaczony dla programistów, firm,
organizacji, itd.
• Program Enterprise - koszt 299 USD rocznie, przeznaczony dla firm, itd., z
nastawieniem na większe projekty.
Częściowym rozwiązaniem problemu jest iOS Simulator (Rysunek 20), który pozwala na
zbudowanie i uruchomienie na komputerze aplikacji przeznaczonej dla platformy iOS.
Symulator ma pewne ograniczenia, nie oferuje wszystkich funkcji prawdziwego urządzenia
m. in. brak dostępu do kamery, wibracji, GPS, akcelerometru, żyroskopu, gesty ograniczone
do symulacji potrząsania telefonem. Ponadto symulator korzysta z zasobów dostępnych na
komputerze, to oznacza lepszy procesor i więcej pamięci RAM niż prawdziwe urządzenie.
Rysunek 20. Okno programu iOS Simulator (zrzut ekranu).
40
7.2.4. Instruments
Program Instruments [20] jest analizatorem wydajności aplikacji z graficzną prezentacją
wyników wchodzący w skład Xcode 3.0 oraz nowszych wersji programu Xcode. Instruments
jest zbudowany w oparciu o framework DTrace systemu OpenSolaris i przystosowany do
działania na Mac OS X.
Instruments prezentuję linię czasu wyświetlając wszystkie zdarzenia występujące w
aplikacji, takie jak: zmiana aktywności procesora, przydział pamięci, aktywność sieciową
oraz aktywność plików, dodatkowo prezentując wykresy oraz statystyki. Grupa zdarzeń jest
monitorowana poprzez konfigurowalne „instrumenty” (Rysunek 21), które mają możliwość
nagrywania wygenerowanych zdarzeń oraz ich odtworzenia (zasymulowania) tyle razy ile
będzie trzeba. Programista może zobaczyć efekt zmian w kodzie nie wykonując powtórnie
zdarzeń. Interface Builder posiada możliwość tworzenia niestandardowych instrumentów
analitycznych.
Rysunek 21. Widok części dostępnych instrumentów (zrzut ekranu).
41
Wykrywanie wycieków pamięci
Podczas pisania aplikacji tworzy się dużą ilość zmiennych, obiektów, tworzone są
odwołani do obiektów, obiekty są przetrzymywane. Każda z tych operacji wymaga
wywołania metody zwalniającej pamięć, gdy instancja nie jest już dłużej potrzebna.
Większość metod posiada własne zmienne lokalne, wykorzystywane tylko w ramach jej bloku
danych. Metody zaś w większości przypadków są wykonywane wielokrotnie. Wystarczy
zapomnieć o wywołaniu metody zwalniającej pamięć tylko dla jednej zmiennej lokalnej, żeby
doszło od wycieku pamięci.
Opisany poniżej przypadek miał miejsce podczas tworzenia aplikacji opisanej w drugiej
części pracy.
Po zakończeniu pisania części aplikacji związanej z tworzeniem historii odwiedzanych
stron oraz weryfikacji poprawności logiki aplikacji, program została sprawdzony pod
względem ewentualnych wycieków pamięci. Po uruchomieniu aplikacji Instruments z
instrumentem „Leaks” okazało się, że występują wycieki pamięci (Rysunek 22).
Program Instruments pozwala na wyświetlanie bardzo szczegółowych informacji o
śledzonej aplikacji. Dzięki temu można sprawdzić, które adresy w pamięci w dalszym ciągu
są zajęte, tzn. mają ustawioną wartość retain count różną od zera, ale aplikacja nie posiada
już do nich odwołania.
Sposób wykorzystania programu.
Po włączeniu należy uruchomić aplikację, która ma być analizowana, oraz wybrać ją z
listy działających programów Target (Rysunek 24). Następnie włączyć nagrywanie –
czerwona kropka w lewym górnym rogu (Rysunek 22) Record (Rysunek 24). Pojawią się
dwie linie czasu, odpowiednio dla wykrywania (Rysunek 22):
a) alokacji pamięci (fioletowa linia czasu),
b) wycieków pamięci (szara linia czasu).
Gdy włączone jest śledzenie, należy przetestować działanie aplikacji. Fioletowa linia czasu
Allocations pokazuję, kiedy obszar w pamięci jest zajmowany, szara linia czasu Leaks
pokazuje ewentualne wycieki pamięci. Na załączonym zrzucie ekranu (Rysunek 22) oraz
(Rysunek 25), na linii czasu Leaks widać kreski oznaczające wyciek pamięci.
Rozwijając drzewo obiektu widoku głównego, WebView (Rysunek 23), można
prześledzić stos wykonywanych operacji.
42
Rysunek 22. Widok programu Instruments podczas śledzenia/nagrywania działania aplikacji Web (zrzut ekranu).
Rysunek 23. Widok drzewa śledzonych obiektów w programie Instruments (zrzut ekranu).
43
Rysunek 24. Przyciski Record (nagrywanie) oraz Target (cel) programu Instruments (fragment zrzutu ekranu).
Rysunek 25. Widoczny wyciek pamięci (fragment zrzutu ekranu).
Program Instruments jest w stanie wykryć w kodzie programu miejsce, w którym zaczyna się
problem z zarządzaniem pamięcią (Rysunek 26).
Rysunek 26. Instruments z zaznaczonym fragmentem kotu, gdzie powstał problem (zrzut ekranu).
44
Zaznaczony linia kodu (Rysunek 26) jest odpowiedzialna za wykonanie metody
addHistory, odpowiedzialnej za zapisywanie historii odwiedzanych stron. Po przejściu do
kodu metody addHistory, Instruments zaznacza, które obiekty są przyczyną wycieku
(Rysunek 27).
Rysunek 27. Fragment kodu z zaznaczonymi zmiennymi odpowiedzialnymi za wyciek pamięci (zrzut ekranu).
Przyczyną okazało się pominięcie wykonania metody release na zmiennych lokalnych,
w efekcie, za każdym razem, gdy była odwiedzana strona WWW i metoda zapisująca historię
była wykonywana, tworzone były nowe obiekty, ale nie były one zwalniane.
Rozwiązaniem problemu są dwie linie kodu zwalniające pamięć, na końcu metody:
[dateFormatter release];
[plLocale release];
7.3. PODSUMOWANIE
Przedstawione narzędzia pozwalają zarówno na stworzenie aplikacji, jak również na
przetestowanie poprawności jej działania. Pomimo, że są to cztery oddzielne programy, ich
znacznie jest równie ważne podczas całego cyklu tworzenia aplikacji na iOS.
45
8. ARCHITEKTURA MODEL-VIEW-CONTROLLER
Projektanci platformy Cocoa Touch zastosowali architektoniczny wzorzec projektowy o
nazwie MVC (Model-View-Controller, czyli Model-Widok-Kontroler), który stanowi
logiczny sposób tworzenia aplikacji, organizowania struktury w aplikacji posiadającej
interfejs graficzny.
Model-View-Controller został zaprojektowany w 1979 roku przez norweskiego
programistę Trygve Reenskaug pracującego wtedy nad językiem Smalltalk w laboratoriach
Xerox i początkowo nosił nazwę Model-View-Editor [21].
Architekturę MVC pod względem funkcjonalności można podzielić na trzy oddzielne
kategorie (Rysunek 28):
• Model (model) - są to klasy przechowujące dane aplikacji;
• View (widok) - to kod odpowiedzialny za okna, kontrolki i inne elementy widoczne
dla użytkownika, z którymi można prowadzić interakcję;
• Controller (kontroler) - łączy w aplikacji model i widok; stanowi logikę aplikacji i
decyduję, w jaki sposób obsłużyć dane wejściowe pochodzące od użytkownika.
Rysunek 28. Schemat modelu MVC wersja dla Cocoa [22].
Model hermetyzuje dane specyficzne dla aplikacji oraz definiuje logikę i sposób
manipulacji oraz przetwarzania danych. Model może reprezentować postać w grze lub
kontakt w książce adresowej. Obiekt modelu może posiadać relacje do jednego lub do wielu
innych obiektów modelu.
Widok jest najprostszy do zdefiniowania. Jest to element aplikacji, który użytkownik
może zobaczyć. Widok wie, w jaki sposób ma się zaprezentować i może odpowiadać na akcję
wykonywane przez użytkownika. Głównym celem widoku jest prezentacja danych modelu
46
aplikacji oraz umożliwienie edycji tych danych. Obiekty widoku są oddzielone od obiektów
modelu w aplikacji MVC.
Kontroler działa jako pośrednik pomiędzy jednym lub wieloma widokami i jednym lub
wieloma obiektami modelu. Kontroler jest medium, przez które widok dowiaduję się o
zmianach w obiektach modelu i odwrotnie. Akcje wykonywane przez użytkownika w
warstwie widoku w celu stworzenia lub modyfikacji danych są przesyłane przez obiekty
kontrolera, w wyniku czego obiekty modelu są tworzone lub modyfikowane. Analogicznie,
gdy zmianie ulegną dane modelu, obiekt kontrolera wychwytuje je, co powoduje odpowiednią
zmianę obiektów widoku. Warstwa kontrolera może również dokonywać zmian ustawień i
koordynować zadaniami aplikacji oraz zarządzać cyklami życia innych obiektów
(Rysunek 29).
Rysunek 29. Model warstwowy wzorca MVC w iOS [22].
Sposób tworzenia aplikacji dla iOS wymusza na programiście podejście wykorzystujące
wzorzec MVC. Dla każdego widoku stworzonego za pomocą Interface Builder’a trzeba
stworzyć kontroler widoku, oraz model określający jakie dane i w jaki sposób muszą zostać
zmodyfikowane w wyniku reakcji na działania użytkownika w warstwie widoku.
47
9. PROJEKTOWANIE STRONY INTERNETOWEJ DLA IPHONE
Świat urządzeń mobilnych to zupełnie nowe medium. Gdy pojawiały się pierwsze
telefony z możliwością przeglądania stron WWW, nie istniały żadne wytyczne mówiące w
jaki sposób tradycyjna strona ma się zachować na tak nietypowym urządzeniu. Najlepsze
praktyki znane z tradycyjnych witryn, po prostu nie zdają egzaminu na urządzeniach
mobilnych. Unikatowa charakterystyka urządzeń, nietypowy system, a przede wszystkim
nowe, niespotykane wcześniej wymagania użytkowników, wymagają nowego podejścia do
projektowania i wytwarzania mobilnych witryn internetowych.
Współczesne urządzenia mobilne oferują swoim użytkownikom przeglądarki
opracowane zgodnie z pewnymi standardami, ale nie zawsze w pełni je spełniają.
Przeglądarki dostępne na tych urządzeniach umożliwiają prezentowanie treści stron
stworzonych w jednym z kilku mobilnych języków znaczników. Do najpopularniejszych
należą [3]:
• XHTML
• XHTML-MP
• HTML
• CHTML
• WML
Mobilne witryny internetowe tworzone wyłącznie z myślą o smartfonach, mogą
korzystać z pełnej specyfikacji języka HTML oraz XHTML. Większość smartfonów posiada
zainstalowane mobilne wersje przeglądarek internetowych opartych o te same silniki
wyświetlania stron, co standardowe przeglądarki na komputerach PC.
Oprócz języków znaczników, unowocześnieniu uległy również mobilne języki
skryptowe. Do niedawna przetwarzanie skryptów po stronie przeglądarek było domeną tylko
najbardziej zaawansowanych smartfonów. Obecnie dostępna jest mobilna wersja JavaScript w
formie standardu ECMAScript-MP [3].
Forma prezentacji CSS również ma swoją mobilną odmianę w postaci dwóch
standardów:
• Wireless CSS
• CSS Mobile Profile
W dalszej części rozdziału opisano technologie, które zostały wykorzystane do
stworzenia mobilnej strony internetowej dla iPhone.
48
9.1. HTML
HTML (ang. HyperText Markup Language), czyli hipertekstowy język znaczników jest
wykorzystywany do tworzenia stron internetowych. Nie jest zaliczany do języków
programowania, ze względu na brak wyrażeń obliczeniowych, instrukcji warunkowych czy
iteracyjnych. Początki języka sięgają lat osiemdziesiątych ubiegłego wieku, kiedy to w
ośrodku naukowo-badawczym CERN powstał prototyp hipertekstowego systemu
informacyjnego ENQUIRE, służącego go udostępniania dokumentów związanych z
prowadzonymi badaniami naukowymi. HTML jest niezależny do systemu operacyjnego oraz
wykorzystywanego sprzętu, co przyczyniło się do jego popularności w początkowych latach,
aktualnie jest to powszechnie uznawany standard.
Język posiada kilka specyfikacji rozumianych jako kolejne wersje oraz kilka projektów
niezależnych bazujących na HTML. Najbardziej znanym jest XHTML, którego drugi
wydanie XHTML 2.0 miało w całości zastąpić specyfikacje HTML. Ze względu na brak
kompatybilności z wersjami wcześniejszymi projekt został porzucony na rzecz HTML 5.
Aktualnie trwają niezależne od siebie prace nad XHTML 1.1 będącym następcą XHTML 1.0,
oraz HTML 5 jako następca HTML 4 oraz XHTML 1.0 [23].
Standard HTML 5 pomimo ciągle trwających prac już udostępnia swoją specyfikację i
jest coraz powszechniej stosowany. Do coraz większej popularności tego standardu
przyczynia się fakt dodania nowych znaczników, tagów odpowiedzialnych za semantykę
dokumentu. Strony projektowane w starszych standardach do organizacji struktury
dokumentu wykorzystywały element <div> (Tabela 2). Aktualnie traci on na znaczeniu na
rzecz nowych elementów takich jak (Tabela 3):
• header
• footer
• section
• article
• aside
• nav
49
Tabela 2. Przykładowy kod strony w HTML 4 oraz sposób prezentacji w przeglądarce Safari [24].
HTML jest używany do tworzenia struktury dokumentu (Rysunek 30), podzielenia go
na logiczne struktury. Część związana z formatowaniem treści np. kolor tekstu, rozmiar i
rodzaj czcionki, parametry tła strony została odseparowana do oddzielnego pliku lub do
osobnego elementu struktury dokumentu niebędącego prezentowanym podczas wyświetlania
treści dokumentu. Nie zaleca się stosowania elementów formy prezentacyjnej bezpośrednio
we właściwościach tagów, chyba że ma to logiczne uzasadnienie i nie jest możliwe uzyskanie
wymaganego efektu poprzez inne metody [23].
Rysunek 30. Widok struktury podzielonej na sekcje z nagłówkami.
9.2. CSS
CSS (ang. Cascading Style Sheets), czyli kaskadowe arkusze stylów jest to język
służący do opisu semantyki prezentacji dokumentu napisanego w języku znaczników.
Najpowszechniej wykorzystywany jest do formatu stylu prezentacji dokumentów napisanych
w HTML i XHTML (Rysunek 31). Język ten został stworzony w celu odseparowania
struktury dokumentu od formy jego prezentacji.
Dostępne są trzy standardy CSS: CSS 1, CSS 2 oraz CSS 3, ale tylko pierwsze dwa są
zatwierdzone przez W3C. CSS 3 jest w trakcie prac, niemniej podobnie jak HTML 5, jest już
stosowany.
Część właściwości CSS 3 określanych jako w fazie eksperymentalnej jest opatrzona
prefiksem odpowiednim dla przeglądarki lub wykorzystywanego przez nią silnika np.
-moz-border-radius dla Gecko, -webkit-border-radius dla WebKit. Spora cześć właściwości
jest dostępna tylko dla jednego silnika i nie ma swojego odpowiednika dla pozostałych lub
posiada unikatowe wartości [25].
51
Rysunek 31. Widok strony HTML bez wykorzystania CSS.
9.3. PHP
PHP [26] jest językiem skryptów ogólnego przeznaczenia po stronie serwera,
zaprojektowanym w celu tworzenie dynamicznych stron internetowych. Jest jednym
z pierwszy języków skryptowych wykonywanych po stronie serwera, który umożliwia
osadzenie go bezpośrednio w dokumentach HTML zamiast wywoływania zewnętrznych
plików w celu przetworzenia danych. Kod jest interpretowany przez serwer WWW
z zainstalowanym modułem PHP, którego wynikiem jest wygenerowana strona internetowa.
9.4. JAVASCRIPT
JavaScript [27] to prototypowy język skryptowy o dynamicznym, słabym typowaniu,
najczęściej wykorzystywany w celu zwiększenia funkcjonalności tworzonych stron
52
internetowych. Skrypty są wykonywane po stronie klienta (w rzadkich przypadkach po
stronie serwera) do dynamicznego reagowania na zdarzenia generowane przez użytkownika.
9.5. MYSQL
MySQL [28] to system zarządzania bazami danych udostępniany na zasadach licencji
GPL. Aktualnie jest własnością firmy Oracle, wcześniej Sun Microsystems, który został przez
Oracle kupiony w 2008 roku. Najważniejszymi cechami MySQL jest jej szybkość oraz
dostępność na wielu platformach systemowych m. in. Linux, Windows, Mac OS X, FreeBSD,
Solaris, AIX.
Sporą popularność zdobył dzięki narzędziu phpMyAdmin, sprawiającemu że
administracja bazą stała się bardzo prosta.
phpMyAdmin
Darmowe, otwarte narzędzie napisane w PHP, służące do łatwego zarządzania oraz
administrowania bazą danych MySQL z poziomu przeglądarki internetowej (Rysunek 32)
[29].
Rysunek 32. Okno główne aplikacji phpMyAdmin.
53
9.6. WEBKIT
WebKit [30] to silnik wyświetlania (renderowania) stron internetowych
wykorzystywany głównie przez przeglądarki internetowe. Rozwijany na zasadach wolnego
(otwartego) oprogramowania. Jest odpowiedzialny za przetwarzanie kodu strony (HTML,
XHTML, skrypty, grafika) oraz elementów formatujących (CSS, XSL) i renderowanie
wyniku. WebKit jest najbardziej znany z wykorzystania w przeglądarkach Safari, Google
Chrome oraz Maxthon. W roku 2012 posiadał największy udział w rynku z pośród wszystkich
silników przeglądarek internetowych.
Silnik ten zawiera dwa najważniejsze komponenty, WebCore oraz JavaScriptCore
dostępne w ramach licencji GNU LGPL, zaczerpnięte z projektu rozwijanego przez KDE.
Pozostałe elementy silnika są dostępne na licencji BSD.
WebCore jest aplikacją szkieletową, którą stanowią biblioteki renderowania, DOM
(Document Object Model) i struktury HTML oraz SVG rozwijane w ramach otwartego
projektu WebKit.
JavaScriptCore jest aplikacją szkieletową dostarczającą silnik JavaScript, umożliwiając
obsługę tego języka w aplikacjach wykorzystujących silnik WebKit.
Framework WebKit zawiera WebCore i JavaScriptCore zapewniając Objective-C
interfejs programowania aplikacji (API) do silnika renderującego WebCore oraz silnika
skryptów JavaScriptCore stworzonych w języku C++, umożliwiając łatwe tworzenie aplikacji
opartych na Cocoa API [31].
9.7. SAFARI
Safari [32] to przeglądarka internetowa stworzona przez firmę Apple. Jest domyślną
przeglądarką stron WWW systemu operacyjnego Mac OS X (Rysunek 33) oraz iOS
(Rysunek 34). Od 2007 roku dostępna również na systemach Windows XP, Windows Vista
oraz Windows 7. Safari jest stworzona w oparciu o silnik wyświetlania stron WebKit. Zgodnie
z danymi pochodzącymi ze strony Wikipedia.org, 15,87% odwiedzających stronę
Wikipedia.org w sierpniu 2012 roku, korzystało z przeglądarki Safari.
Safari w pełni obsługuję najnowsze standardy internetowe, m. in. XHTML, HTML 4,
DOM, XML oraz posiada zaawansowaną obsługę CSS 1 i 2. Dodatkowo posiada wsparcie dla
dużej części specyfikacji HTML 5 [32].
54
Rysunek 33. Safari na Mac OS X (zrzut ekranu).
Rysunek 34. Safari na iOS/iOS Simulator (zrzut ekranu).
55
9.8. PROJEKTOWANIE WITRYN INTERNETOWYCH DLA URZĄDZEŃ MOBILNYCH
Projektowanie stron internetowych dla urządzeń mobilnych jakim jest iPhone, znacząco
różni się od standardowego projektowania witryn. Wynika to przede wszystkim z
nietypowego charakteru urządzenia, jego parametrów fizycznych oraz z okoliczności w jakich
korzystamy z Internetu. W Polsce większość internautów to użytkownicy Internetu
stacjonarnego, korzystający z niego ponad dwie godziny dziennie w domu, pracy lub szkole,
uczelni. Z Internetu mobilnego korzystają głównie ludzie młodzi, studenci w celu zdobycia
konkretnych informacji lub do kontaktowania się ze znajomymi [33,34].
Większość stron internetowych nie jest przystosowana do wyświetlania na urządzeniach
mobilnych. Powoduje to kłopoty podczas odwiedzania takich stron. Większość z nich nie
mieści się na ekranie urządzenia lub jest prezentowana w pomniejszonej formie, co sprawia
że korzystanie ze strony jest niemożliwe lub bardzo niewygodne. Ilość prezentowanego,
przesyłanego materiału powoduje, że wzrasta transfer danych co pociąga za sobą zwiększenie
kosztu połączenia. Takie strony zniechęcają potencjalnych użytkowników do ponownego
odwiedzania.
Wraz ze wzrostem popularności Internetu mobilnego projektanci stron internetowych
zaczynają stosować praktyki tworzenia stron użytecznych na urządzeniach mobilnych. Do
takich praktyk można zaliczyć m. in. [33]:
• uproszczony styl strony,
• brak zbędnych grafik,
• optymalizacja pod względem przepustowości,
• stosowanie większej, czytelnej czcionki,
• elementy nawigacyjne powinny być dostosowywane do rozmiarów urządzania,
odpowiednio duże przyciski, pola typu input i inne elementy formularzy,
• tylko niezbędna funkcjonalność,
• liniowy układ strony (Rysunek 35) [35].
56
Rysunek 35. Zalecana struktura strony mobilnej [33].
Elementy struktury strony powinny mieć stałą wielkość lub ich wymiary powinny
zmieniać się w wyniku odpowiedzi na zdarzenia wygenerowane przez użytkownika. Jedną ze
złych praktyk jest stosowanie dynamicznych elementów o różnych rozmiarach. W efekcie
strona zaczyna skakać w odpowiedzi na cykliczne zwiększanie i zmniejszanie się wielkości
jednego z jej elementów (Rysunek 36).
Rysunek 36. Strona wp.pl z elementem dynamicznie zmieniającym rozmiar.
57
10.CEL PRACY
Celem niniejszej pracy jest zapoznanie z systemem iOS, zintegrowanym środowiskiem
programistycznym Xcode oraz językiem programowania Objective-C, następnie w oparciu o
już posiadaną wiedzę napisanie aplikacji na iPhone, tj. przeglądarki internetowej z
wykorzystaniem dostępnych w Xcode frameworków.
Przeglądarka powinna spełniać podstawowe zadanie, jakim jest wyświetlanie treści
stron internetowych. Dodatkowo, zgodnie z aktualnymi standardami, przeglądarka powinna
pozwalać na zapisywanie adresów ulubionych stron, oraz stron ostatnio odwiedzanych.
Dalsza część pracy obejmuje utworzenie strony internetowej dla iPhone, w oparciu o
technologie przedstawione w części teoretycznej. Głównymi celami stawianym przed stroną
WWW, to jej mobilność oraz wygodny interfejs. Przedstawiona witryna internetowa będzie
formą prezentacji, jak może wyglądać mobilna wersja strony WWW, która już istniejącej, ale
nie jest przystosowana do działania na urządzeniach mobilnych.
58
Część II
11.PROJEKT APLIKACJI
W ramach pracy dyplomowej, na podstawie stanu wiedzy przedstawionego w części
teoretycznej, powstała aplikacja na iPhone: przeglądarka internetowa (Rysunek 37).
Rysunek 37. Zrzut ekranu prezentujący kilka widoków napisanej aplikacji: a) opcje aplikacji Ustawienia związane z przeglądarką; b) ostrzeżenie przed wykonaniem czynności usuwania; c) widok ustawień; d) widok główny aplikacji; e) zakładka ulubione; f) zakładka historia; g) wyszukiwanie.
59
11.1. OPIS OGÓLNY
Powstała aplikacja, jest prostą wersją przeglądarki internetowej. Zawiera okno główne
(Rysunek 38), w którym wyświetlana jest strona WWW, paski narzędzi oraz kilka widoków
pomocniczych (Rysunek 37).
Rysunek 38. Widok główny.
Przeglądarka zawiera takie elementy jak:
• pasek adresu, który pozwala również na wyszukiwanie w przeglądarce Google,
• przyciski:
o wstecz,
o dalej,
o odśwież stronę,
o wyszukiwanie/pasek adresu,
o strona domowa (drugi pasek narzędzi),
o ustawienia/opcje (drugi pasek narzędzi),
o zapisz w ulubionych (drugi pasek narzędzi),
o pokaż w Safari (drugi pasek narzędzi),
60
o pokaż inny pasek narzędzia,
• widoki:
o główny,
o wyszukiwania,
o zakładek,
o ustawień.
Aplikacja składa się z sześciu klas (Rysunek 39):
• WebAppDelegate,
• WebViewController,
• BookmarksRootViewController,
• FavoritesTabViewController,
• HistoryTabViewController,
• PreferencesModalViewController.
Pliki pomocnicze (Rysunek 39):
• ModalViewDelegate.h - protokół,
• Utilities.h – stałe, deklaracja metoda położenia pliku,
• Utilities.m – definicja metody.
Pliki nib Interface Builder (Rysunek 39):
• MainWindow.xib
• WebViewController.xib
• HistoryTabViewController.xib
• FavoritesTabViewController.xib
• PreferencesModalViewController.xib
Przeglądarka pozwala na wyświetlanie stron internetowych, których dokładny adres
URL został wpisany w pasku adresu. Jeśli użytkownik nie poda adresu strony, tylko wpisze
inny wyraz w pasku adresu, to zostanie poinformowany o możliwości wyszukania słowa w
wyszukiwarce google.pl. Aplikacja pozwala na dodawanie ulubionych stron do listy zakładek,
oraz na zapisywanie historii odwiedzanych stron. Dodatkowo istnieje możliwość ustawienia
strony domowej, sprawdzenia stanu ustawień domyślnych używanej aplikacji oraz
przełączenia aktualnie wyświetlanej strony do przeglądarki Safari.
61
Rysunek 39. Lista elementów aplikacji.
11.2. WIDOK
Element aplikacji utworzony w większości za pomocą programu Interface Builder
(7.2.2). Część widoku aplikacji związanej z wyświetleniem zakładek, ze względu na duży
stopień skomplikowania został utworzony programowo.
62
11.2.1. Opis elementów widoku głównego
Widok główny (Rysunek 40) zawiera najwięcej elementów typu przyciski, paski
narzędzi (Rysunek 45). Pierwszy pasek narzędzi, zawiera przyciski odpowiedzialne za
podstawową nawigację podczas przeglądania Internetu tj. wstecz, dalej, odśwież
(Rysunek 41). Dodatkowo zawiera przycisk pokazujący drugi pasek narzędzi oraz przycisk
pokazujący podwidok (Rysunek 42) z paskiem adresu, wirtualną klawiaturę oraz przycisk
pokazywania widoku zakładek (Rysunek 44).
Rysunek 40. Okno programu Interface Builder z widocznymi elementami widoku głównego.
Rysunek 41. Pierwszy pasek narzędzi/nawigacji.
Widok główny posiada drugi pasek narzędzi utworzony w celu zwiększenie funkcjonalności
przeglądarki, nie zwiększając przestrzeni potrzebnej do umieszczenia przycisków na ekranie
(Rysunek 43). Drugi pasek narzędzi w widoku głównym zawiera przyciski: strona domowa,
przycisk ustawienia/opcje, zapisz w ulubionych, przycisk powrotu do paska pierwszego oraz
przycisk przekierowujący aktualnie wyświetlaną stronę do przeglądarki Safari.
63
Rysunek 42. Podwidok widoku głównego.
Rysunek 43. Drugi pasek narzędzi.
Rysunek 44. Pasek adresu z widocznymi: nagłówkiem wyświetljącym tytuł aktualnie przeglądanej strony, przyciskiem zakładek, paskiem adresu wraz z przyciskiem czyszczącym jego zawartość, przyciskiem chowającym widok – Zamknij.
64
Rysunek 45. Lista elementów widoku głównego.
Widoki modalne
Oprócz widoku głównego i podwidoku wyszukiwania, w aplikacji są jeszcze dwa
widoki określane jako modalne. Widoki takie charakteryzują się tym, że podczas ich
wyświetlania musi zostać podjęta pewna decyzja, efektem której jest schowanie widoku
modalnego.
11.2.2. Widok ustawień
Pierwszy widok modalny został zastosowany do wyświetlania informacji
o ustawieniach oraz przyciski czyszczenia historii przeglądanych stron i ulubione
(Rysunek 46).
Widok ten wyświetla informacje ustawione w preferencjach aplikacji, dostępne poprzez
aplikacje systemu iOS o nazwie Ustawienia (ang. Settings). Dodatkowo pozwala na
wyczyszczenie danych zawartych w plikach modelu danych, będące treścią drugiego widoku
65
modalnego związanego z wyświetlaniem informacji o historii przeglądanych stron oraz
zapisanych zakładkach ulubionych.
Rysunek 46. Widok modany prezentujący ustawienia oraz możliwość usuwania zapisanych stron.
Rysunek 47. Aplikacja Ustawienia.
66
Ustawienia
Aplikacja Ustawienia (Rysunek 47) pozwala na wprowadzanie i zmianę preferencji
każdej aplikacji, która posiada element Settings Bundle. Element ten to grupa wbudowanych
plików w aplikacji, która informuje aplikację Ustawienia, które preferencje powinny zostać
ustawione/wprowadzone przez użytkownika. Aplikacja Ustawiania działa jako graficzny
interfejs użytkownika dla mechanizmu domyślnych ustawień użytkownika w iOS (ang. iOS
User Defaults).
11.2.3. Widok zakładek
Drugi widok modalny związany z wyświetlaniem zapisanych stron jest bardziej złożony
i w dużej części został utworzony programowo (Rysunek 48).
Rysunek 48. Diagram widoku zakładek.
Widok ten prezentuje zapisane odwołania do stron ulubionych oraz historię
przeglądanych stron w postaci widoku tabeli (UITableView). Przełączanie pomiędzy
widokiem stron ulubionych a historią odbywa się dzięki zakładkom elementu Tab Bar
Controller (UITabBarController).
67
Rysunek 49. Widok zakładek.
Zakładka Ulubione (Rysunek 49) może być edytowana, w tym celu należy kliknąć
przycisk Edytuj. Tryb edycji pozwala na usuwanie elementów tablicy (znak zakazu) lub ich
przenoszenie (znak trzech kresek) (Rysunek 50) (Rysunek 52). Usuwać wpisy można również
bez wchodzenia w tryb edycji, poprzez gest szybkiego przesunięcia palcem w bok na
wybranym wpisie (Rysunek 51). Dodatkowo można usunąć cała zawartość zakładki Ulubione
poprzez widok ustawień (Rysunek 46).
Rysunek 50. Usuwanie wpisu.
Rysunek 51. Usuwanie wpisu bez wchodzenia w tryb edycji.
68
Rysunek 52. Przenoszenie wpisu.
Zakładka Historią (Rysunek 49) nie pozwala na edycję, istnieje tylko możliwość
usunięcia wszystkich danych i określenie ilości wpisów, odbywa się to poprzez odpowiedni
widok ustawień (Rysunek 46) oraz poprzez Ustawienia (Rysunek 47).
11.2.4. Diagram widoku
Diagram widoku (Rysunek 53), prezentuje zależności pomiędzy widokami stworzonej
aplikacji. Pozwala także prześledzić jakie kontrolery są odpowiedzialne za prawidłowe
działanie widoków.
Rysunek 53. Diagram elementów struktury widoku.
69
11.3. MODEL I KONTROLER
Model i kontroler są to elementy architektury aplikacji, które przeplatają się w niemal
wszystkich stworzonych klasach.
W napisanej aplikacji elementy modelu i kontrolera można podzielić na trzy instancje:
• settings bundle,
• zakładki,
• cykl życia aplikacji.
Settings Bundle
Ustawienia preferencji aplikacji określane są w aplikacji iOS - Ustawienia
(Rysunek 47). Użytkownik ustawia/wprowadza odpowiednie dane w aplikacji Ustawienia,
które później są pobierane do aplikacji właściwej. Na podstawie tych danych kontroler
aktualizuję odpowiednie elementy widoku.
Zakładki
Informacje wyświetlane w tabelach zakładek są zapisywanie w plikach .plist czyli
plikach typu property list (Rysunek 54). Pliki te mogą być używane do przechowywania kilku
typów obiektów:
• NSArray,
• MSMutableArray,
• NSDictionary,
• NSMutableDictionary,
• NSData,
• NSMutableData,
• NSString,
• NSMutableString,
• NSNumber,
• NSDate.
70
Rysunek 54. Plik history.plist otwarty w programie Property List Editor.
Kontroler odbiera od widoku informacje o modyfikacji danych – usuwaniu,
przenoszeniu lub dodawaniu i przesyła je do elementów modelu. Obiekty modelu dokonują
odpowiednich zmian, efektem których jest modyfikacja property list oraz informacja zwrotna
wychwytywana przez kontroler, skierowana do widoku o konieczności zaktualizowania
odpowiednich elementów widoku.
Cała operacja jest o tyle skomplikowana, że odbywa się to z wykorzystaniem operacji
delegacji wykonania zadania. Powyższa metoda usuwa z lokalnej zmiennej self.dataList
zaznaczoną wartość (rekord) i przekazuję informacje, który wiersz powinien zostać usunięty z
property list do widoku głównego, który jest delegatem dla tej metody. Wykonanie
faktycznego usuwania jest oddelegowane do innego kontrolera. Przekazywanie delegacji
odbywa się poprzez wszystkie kontrolery pośrednie, aż do samej góry (Rysunek 55).
71
Rysunek 55. Diagram z zaznaczonymi na czerwono liniami przekazywania delegacji wykonania metody.
Cykl życia aplikacji
Podczas pracy aplikacji kontroler steruje przepływem danych pomiędzy elementami
modelu i widoku, aby wiedział jakie elementy są ze sobą połączone w Cocoa Touch, w tym
celu dostępne są odpowiednie słowa kluczowe:
a) IBOutlet – jest to słowo kluczowe nie mające dla kompilatora żadnego znaczenia, jest
za to informacją dla Interface Buildera (IB), że dany element instancji jest połączony z
Rysunek 38. Widok główny............................................................................................................................ 60
Rysunek 39. Lista elementów aplikacji.......................................................................................................... 62
Rysunek 40. Okno programu Interface Builder z widocznymi elementami widoku głównego.....................63
Rysunek 41. Pierwszy pasek narzędzi/nawigacji............................................................................................63