HTML-Prototypen als native App speichern
Für den Usertest einer iPhone-App habe ich nach einer Lösung zur Anzeige des Prototypen gesucht, die folgende Eigenschaften erfüllt:
– lokal auf dem iPhone gespeichert, für ideale Performance und Unabhängigkeit vom Netz (Test vor Ort)
– Fullscreen-Modus ohne fremde UI-Elemente und Interaktionen (z.B. Gesten oder versteckte Buttons) um Irritationen beim Test zu vermeiden
– Erstellung des Prototypen mit Axure RP (= HTML-Output)
Mit PhoneGap Build
Nach einigen unbefriedigenden Versuchen mit Kiosk- und Browser-Apps kam die Idee auf, dass es ideal wäre, eine App zu haben, die nichts weiter macht, als eine lokal gespeicherte Website im Fullscreen-Webview darzustellen. Schon vor einigen Monaten habe ich Anselm Hannemann um Rat gefragt und er verwies mich auf PhoneGap Build.
PhoneGap Build (mittlerweile von Adobe gekauft) ist ein Online-Dienst, der aus einem Paket von HTML-, CSS- und JS-Dateien native Apps für verschiedene mobile Plattformen kompiliert. Folgendes Vorgehen habe ich ausprobiert:
– HTML-Prototyp aus Axure RP exportieren
– Prototyp zu PhoneGap Build hochladen
– iOS-App herunterladen und auf dem iPhone installieren
Das hat soweit geklappt und es läuft schnell, stabil und wie erwartet ohne Einschränkungen, welche die Testperson verunsichern könnten. Cool!
Man benötigt dazu:
1) HTML-Prototyp
2) Account bei PhoneGap Build
3) Apple-Developer-Account für iOS (80 Euro)
4) iPhone-Konfigurationsprogramm
zu 1) HTML-Prototyp
Ich exportiere den HTML-Prototyp aus Axure RP. Dabei heißt die erste Seite „index“, so dass später eine index.html generiert wird. Diese wird dann von PhoneGap Build als Startseite erkannt. Außerdem lege ich in den Prototyp-Einstellungen verschiedene Parameter für mobile Geräte fest, z.B. den Viewport. Der fertige HTML-Prototyp wird nun gezippt, um ihn als einzelne Datei auf PhoneGap Build hochladen zu können.
zu 2) PhoneGap Build
Bei PhoneGap Build muss ein Account angelegt werden, mit dem eine private App kostenlos erstellt werden kann. Wer mehr Apps generieren will, muss bezahlen. Nach dem Hochladen der Zip-Datei wird automatisch mit der Kompilierung (Erstellung) der App für mehrere Mobil-Plattformen (iOS, Android, Windows, …) begonnen. Bei iOS erscheint sogleich eine Fehlermeldung aufgrund des fehlenden Entwicklerzertifikats und Provisioning-Profils. Die .ipa-Datei (iOS-App) kann so noch nicht erstellt werden.
zu 3) Apple-Developer-Account
Hierfür ist ein Apple-Developer-Account für iOS nötig, der 80 Euro jährlich kostet. Drei Dinge sind zu tun, welche durch einen Wizard im Entwickler-Portal von Apple angeleitet werden.
– UDIDs (einzigartige Gerätenummern) der iPhones und iPads müssen angegeben werden, auf denen die Test-App laufen soll.
– Ein Entwickler-Zertifikat muss erstellt werden. Dieses wird im Anschluss mit dem OS X-Programm Schlüsselbundverwaltung als .p12-Datei exportiert und mit einem Passwort versehen.
– Ein Provisioning-Profil muss erstellt werden (Datei mit der Endung .mobileprovisioning).
Auf PhoneGap Build müssen dann das Provisioning-Profil und das Zertifikat samt Passwort als „Signing Key“ hochgeladen werden. Einige Momente später steht die .ipa-Datei zum Download zu Verfügung.
(Dieser Nerd-Stuff hat mich mehrere Versuche gekostet und ist wohl der schwierigste Teil des Setups!)
zu 4) iPhone-Konfigurationsprogramm
Eigentlich kann die App nun auch mit iTunes auf das Gerät übertragen werden (.ipa auf Mediathek ziehen). Ich empfehle jedoch Apples iPhone-Konfigurationsprogramm (auch für iPad), da es besser klarkommt, wenn man neue Versionen der App erstellen und alte Versionen überschreiben will. Mehrmaliges Updaten der App ist so mühelos möglich.
Fertig!
Für mich ist so ein gangbarer Weg gefunden, Prototypen ohne Internetverbindung mit guter Performance für User-Tests oder Kundenpräsentationen zur Verfügung zu stellen. Cool!