Protokoll
Die Evaluation von jQTouch beginnt mit dem Download der aktuellsten veröffentlichten Version 1.0 beta 2 von der jQTouch-Webseite. Die Inhalte werden entpackt und in einem Verzeichnis abgelegt. Um jQTouch zu nutzen, muss, wie in Quellcode 6.1 gezeigt, eine Datei index.html angelegt werden, in die ein Gerüst einer Webseite eingefügt wird. Darin wird jQuery und jQTouch eingebunden und initialisiert.
<html>
<head>
<title>gloveler</title>
<style type="text/css">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css">@import "themes/apple/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min" type="…"></script>
<script src="jqtouch/jqtouch.min.js" type="…"></script>
<script type="text/javascript">var jQT = new $.jQTouch({});</script>
</head>
<body></body>
</html>
Quellcode 6.1: Gerüst zur Anwendung von jQTouch
Im Body-Bereich wird ein <div> mit der ID „suche“ angelegt, um die Inhalte des ersten Bildschirms aufzunehmen. Der iPhone-typische Toolbar-Header wird ebenso mit HTML eingebunden (vgl. Quellcode 6.2).
<div id="suche"> <div class="toolbar"><h1>…</h1></div> </div>
Quellcode 6.2: iPhone-typischer Toolbar-Header mit jQTouch
Auch die weiteren geplanten Bildschirme werden auf dieselbe Art und Weise eingebunden. Um diese vom Startbildschirm erreichen zu können, wird dort eine ungeordnete Liste mit Links zu den IDs der Bildschirme entsprechenden Anker eingebaut. Zurück zur Startseite kommt der Nutzer über einen Klick auf einen mit der Klasse button back formatierten Link in der Toolbar der Zielseite.
Die Überprüfung der Entwicklungsergebnisse ist dank der schon erwähnten Testbarkeit von Web-Anwendungen in WebKit-Browsern sehr einfach und äußerst praktisch. Wenn die Größe des Browserfensters entsprechend angepasst wird, vermittelt der Desktop-Browser sogar ein recht gutes Gefühl, wie die Anwendung auf dem kleinen Bildschirm eines Smartphones wirken wird.
Der Einbau der Tabbar (vgl. Abbildung 6.1, unterer grauer Balken mit Tabs) stellt das erste Problem bei der Implementierung dar. jQTouch stellt kein entsprechendes Interface-Element bereit, da die mobilen Browser eine statische Positionierung der Tabbar nicht zulassen. Ein Scrollen der Inhalte wäre unmöglich, weshalb die Funktionalität nicht angeboten wird. Daher wird von den Mockups abgewichen und die Tabbar wird durch eine Liste auf dem Startbildschirm ersetzt.
Anschließend wird das Suchformular eingebunden und beim Absenden des Formulars eine Anfrage an das API von gloveler gesendet, um die Ergebnisse zum Suchbegriff abzurufen. Auch hier treten wieder Probleme auf. Die Anfrage wird vom Sicherheitsmodell des Browsers gegen Cross-Domain-Abfragen verändert, da Webseiten wegen Sicherheitsbedenken keine Daten von fremden Domains abrufen dürfen. Dadurch kommt die Antwort von gloveler nicht in der Anwendung an.
Um das Cross-Domain-Problem zu umgehen, wird das komplette Projekt auf einen Webserver hochgeladen. Dort befindet sich eine Datei, die Anfragen dynamisch als Proxy an das API von gloveler weiterleiten kann. Dadurch kann die mobile Anwendung die Suchergebnisse von gloveler laden und schließlich in einer Liste einzelne Daten davon anzeigen (Name der Unterkunft, Preis).
Die Kartenansicht der Suchergebnisse wird mit dem Google-Maps-API realisiert. So muss im Header der HTML-Datei nur eine JavaScript-Datei eingebunden werden um alle Kartenfunktionalität zu realisieren. Ruft der Nutzer die Kartenansicht auf, wird dynamisch eine Karte eingebunden und von den Google-Servern abgerufen.
Leider ist die Einbindung von Google Maps in Kombination mit jQTouch sehr fehleranfällig, Scrollen und Zoomen funktioniert selten und es werden nur Teile der Karte angezeigt. Nach einer Recherche im jQTouch-Forum kann das Problem durch den Einbau einiger CSS-Regeln (vgl. Quellcode 6.3) in das Dokument behoben werden:
body { -webkit-perspective: 0; -webkit-transform-style: flat; }
body > * { -webkit-backface-visibility: visible; }
body > .current { -webkit-transform: none !important; }
Quellcode 6.3: Workaround für Google-Maps-Probleme mit jQTouch
Aus den Suchergebnissen lassen sich die Koordinaten der gesuchten Stadt auslesen, so dass die eingebundene Karte auf einen passenden Ausschnitt zentriert werden kann. Auch die ersten fünf Unterkünfte der Ergebnisliste werden auf der Karte als Pin-Marker angezeigt.
Um die Details einer Unterkunft anzeigen zu können wird sowohl auf die Ergebnisliste als auch auf die Marker in der Kartenansicht ein Click-Eventhandler platziert, der weitere Daten der Unterkunft lädt und diese in der Detailansicht zeigt. In der Liste funktioniert das Anklicken von Ergebnissen recht zuverlässig; bei der Karte gibt es jedoch erneut kleinere Probleme durch das Zusammenspiel von Google Maps und jQTouch. Das Problem lässt sich nicht lösen, verhindert eine Nutzung jedoch nicht und wird deshalb ignoriert.
Auf der Detailansicht wird, wie schon für den Zurück-Button, ein Link mit der CSS-Klasse button platziert. Beim Anklicken wird die aktuell betrachtete Unterkunft in die sogenannte localStorage des Browsers geschrieben. Die vom Startbildschirm aufrufbare Favoritenliste liest diese Daten aus und zeigt sie an. Hierfür kann der Quellcode der Ergebnisliste wiederverwendet werden.
Zuletzt fehlt nur noch die Funktionalität zur Umkreissuche. Hier lässt sich wieder eine Funktion des Browser direkt verwenden, um die aktuellen Koordinaten des Nutzers heraus zu finden: navigator.geolocation.getCurrentPosition(). Diese liefert ein Koordinatenpaar, das statt des Suchbegriffs an das gloveler-API übergeben werden kann.
Nachdem die für den Prototyp gewünschte Funktionalität soweit möglich implementiert ist, wird das Aussehen der Anwendung noch verbessert. Es müssen nur wenige Grafiken verändert werden um das iPhone-Blau durch gloveler-Orange zu ersetzen und die Anwendung sehr angepasst erscheinen zu lassen.
Um Icon- und Lagegrafik für iOS zu ersetzen sind lediglich zwei Zeilen in der Initialisierung von jQTouch und das Hinterlegen der entsprechenden Grafiken nötig. Wird auf dem iPhone ein Lesezeichen für die Web-Anwendung angelegt, wird automatisch das Icon auf dem Home-Bildschirm und während des Ladevorgangs die Grafik angezeigt.
Beim Testen der Anwendung auf den Geräten fällt auf, dass die Suchergebnisse auf iOS nicht angezeigt werden können. Nach kurzer Internetrecherche wird klar, dass die vom API gelieferten JSON-Daten in der vorliegenden iOS-Version 3.1.3 nicht in JavaScript-Objekte geparst werden können, da die Funktion JSON.stringify() nicht vorhanden ist. Um das Problem zu umgehen wird eine Library in die Seite eingebunden, die diese Funktionalität für iOS-Geräte nachrüstet.
Damit ist der Prototyp fast vollständig implementiert, lediglich einige Gerätefunktionen lassen sich aus dem Browser nicht nutzen.
Bewertung
Die Beurteilung aus Abschnitt 5.1.1 wurde weitgehend bestätigt. Aussehen und Usability der erstellten Anwendung sind grundsätzlich sehr gut, den Ladezeiten und Animationen ist aber klar anzumerken, dass es sich nicht um eine native Anwendung handelt.
Dafür ist die Plattformunterstützung beispielhaft: Die gloveler-Anwendung sieht auf allen drei getesteten Geräten exakt gleich aus und verhält sich identisch. Schade waren hier die fehlenden Interface-Elemente wie die Tabbar, welche die Anwendung doch hätten besser aussehen lassen.
Die technische Funktionalität ist, wie erwartet, eher dürftig, da nur die vom WebKit-Browser bereitgestellte Positionierung verwendet werden kann.
Die Community von jQTouch stellte sich bei der Programmierung als wahre Hilfe heraus. Wenn Probleme auftraten, waren diese durch eine Google-Suche und dem Anklicken des jQTouch-Group-Ergebnis meist direkt lösbar.