Eine neue App für das Ulmer Museum

Wir haben im Auftrag des Ulmer Museums eine innovative App entwickelt, die dem Besucher eine neuartige und interaktive Form der Führung durch das Museum ermöglicht. Die App ist ab Januar 2015 für Besucher verfügbar. Sie bietet eine informative Tour durch die verschiedenen Ausstellungsräume: Zu 16 Werken aus Archäologie, Mittelalter und Moderne wird der Besucher geleitet. Ausgangspunkt ist ein Gemälde des Ulmer Münsters von 1845; insgesamt reicht die Palette vom Löwenmenschen bis hin zu einem Flugobjekt des belgischen Künstlers Panamarenko.

Inhaltlich und didaktisch stellt diese App einen enormen Mehrwert dar:  Durch die intelligente Navigation, die in Hinblick auf die historischen Räumlichkeiten besonders berücksichtigt werden musste, wird der Besucher vom Eingang bis zum Schluss der Führung an die Hand genommen. Die gesprochenen Texte können auf dem Gerät mitgelesen werden. Bilder und Videos ergänzen multimedial und ansprechend die textuellen Inhalte.

„Mit einer solch interaktiven Lösung machen wir einen riesen Schritt in Richtung Modernisierung“, freut sich Dr. Gabriele Holthuis, Direktorin des Ulmer Museums. „Wir wollten für das Ulmer Museum keine Standardlösung, sondern etwas Innovatives, das auch auf die Bedürfnisse des Hauses und seiner Besucher abgestimmt ist.“

Neben kostenlosen Leihgeräten an der Museumskasse können die Besitzer von iPhones die App auch aus dem AppStore laden:

„Ein positiver Nebeneffekt der Möglichkeit zum Download ist, dass wir das multimediale Erlebnis mit dem eigenen Gerät ermöglichen“, betont Andreas Buchenscheit, Gründer und Geschäftsführer der Cortex Media GmbH.

Die technische Besonderheit und Herausforderung für unser Team war der Einsatz der modernen Beacon-Technologie. Mithilfe dieser kleinen Sender erkennt die App automatisch die Position des Besuchers, um passende Inhalte zur Verfügung zu stellen. Die von uns eingesetzten Beacons sind erst seit Oktober 2014 auf dem Markt erhältlich und bringen das Ulmer Museum somit in eine absolute Vorreiterstellung.

Unser interdisziplinäres Team hat sich den Herausforderungen gestellt und hat die Erwartungen der Sponsoren des Museums sogar übertroffen. „Wir haben erwartet, dass es gut wird, aber mit sowas Tollem haben wir nicht gerechnet“, begeistert sich Volker Jescheck, ehemaliger Präsident des Rotary Clubs Ulm-Donaubrücke, einem der Sponsoren der App .

Weitere Informationen unter mu-app.de

 

Was sagt die Presse?

In Unsere Projekte veröffentlicht

Mehrsprachigkeit mit PHP und Smarty

In vielen unserer Projekte ist für den Kunden Mehrsprachigkeit ein sehr wichtiges Thema. Sei es bei einer App, die in verschiedensprachigen AppStores veröffentlicht werden soll, bei einer Intranet Anwendung, die für Zweigstellen in verschiedenen Ländern bereitgestellt wird oder bei der neuen Firmenhomepage, die in mehreren Sprachen abrufbar sein soll.

Während manche unserer eingesetzten Frameworks & CMS-Systeme von Haus aus eine sehr gute Unterstützung von Mehrsprachigkeit mitbringen (z.B. die App-Entwicklungsumgebungen von Android und iOS), gilt es bei nativen PHP Projekten selbst für eine sinnvolle Integration verschiedener Sprachen zu Sorgen.
 Diese Integration von Mehrsprachigkeit in einem Software-Projekt erfordert eine gute Planung und konsequente Umsetzung des Features von Beginn an. Nur so lässt sich vermeiden, dass man am Ende der Entwicklung eine Codebasis steht, bei der die Mehrsprachigkeit unwartbar und tief im Code versteckt ist.
Am Beispiel unseres oft eingesetzten hauseigenen PHP Frameworks möchte ich vorstellen, wie wir die Mehrsprachigkeit sinnvoll in das bestehende System integriert haben.

Mehrsprachigkeit mit PHP

Der naive Implementierungsansatz ist es, die verschiedenen Sprachen per switch oder if-else Konstrukte direkt bei der jeweiligen Codestelle abzufragen und entsprechend auszugeben:

 if($config::getCurrentLanguage() == Config::ENGLISH) {
     echo "Hello";
 } if($config::getCurrentLanguage() == Config::SPANISH) 
     echo "Ola";
 } else {
     echo "Hallo";
 }

Dieser Ansatz hat aber einige gravierende Nachteile:

  • Keine zentrale Stelle zum Editieren des Texts
  • Hinzufügen einer neuen Sprache erfordert, dass alle Stellen im Code gefunden und angefasst werden
  • Die Programmlogik wird durch eine große Menge von „unnötigen“ if-else Konstrukten aufgebläht und der Code wird immer schwerer wartbar

Das grundlegende Ziel der Implementierung der Mehrsprachigkeit sollte deshalb eine gekonnte Trennung der Codebasis und der tatsächlichen Übersetzung sein. PHP bringt mit der Unterstützung von GNU gettext schon eine relativ elegante Möglichkeit mit, diese Trennung vorzunehmen.

Um gettext zu benutzen, werden alle Textausgaben innerhalb des Quellcodes in einen gettext Aufruf gekapselt:

    echo "Das ist ein toller Tag!";

wird zu

    echo gettext("Das ist ein toller Tag!");

    /*Alternativ kann auch _ statt gettext verwendet werden*/
    echo _("Das ist ein toller Tag!");

Beim Aufruf schaut gettext nun in den bereitgestellten Übersetzungsdateien nach, ob eine entsprechende Übersetzung vorhanden ist. Falls ja, wird der übersetzte Text ausgegeben, ansonsten der Original-String.

Die Übersetzungsdateien sind sogenannte .po (Portable Object) Dateien, welche folgendermaßen aufgebaut sind:

 msgid "Das ist ein toller Tag!"
 msgstr "It's a wonderful day!"

msgid ist dabei der eindeutige Identifikator des zu übersetzenden Strings (Es werden statt der sprechenden Standardübersetzung auch gern abstrakte Identifier wie WELCOME_TO_PAGE_GOOD_DAY verwendet. Der Programmierer muss selbst entscheiden, ob es sinnvoller ist, dass diese abstrakten Identifier oder der Text in der Ursprungssprache zurück gegeben werden, sollte keine Übersetzung gefunden werden.).

Hinter dem Schlüsselwort msgstr folgt nun die jeweilige Übersetzung für die unterstützten Sprachen. Es muss für jede unterstützte Sprache ein eigene solche .po angelegt werden. Diese Dateien werden danach mit dem Konsolenkommando msgfmt in binäre .mo (Machine Objekt) Dateien umgewandelt.

PHP entscheidet dann auf Basis der gesetzten Locale welche Übersetzung gebraucht wird und versucht das passende .mo zu finden und den entsprechenden String auszulesen.

Unterstützung der Template Engine Smarty

Unser selbstentwickeltes PHP-Framework setzt auf eine konsequente Trennung von Darstellung und Logik. Wir setzen deshalb die Template Engine Smarty ein, um diese Trennung zu erreichen. Smarty benutzt dabei zur Darstellung Template Dateien (HTML angereichert um Steuerungsanweisungen), welche durch eine korrespondiere PHP Datei befüllt werden.

 
 /*Beispiel eines Smarty Templates, Steuerungsanweisungen werden durch { } geskapselt*/
 <table>
 {foreach $persons as $person}
     <tr>
         <td>{$person->getName()}</td>
     <tr>
 </table>

Da der Text nun in diesem Template File und nicht mehr in PHP selbst stehen, müssen wir auf ein Smarty Plugin zurückgreifen, welches die gettext-Abfragen übernimmt. Nach intensiver Suchen und ausführlichen Tests hat sich das Plugin smarty3-i18n als beste Alternative heraus kristallisiert.

Eine einfache gettext-Anweisung sieht mit diesem Plugin in Smarty wie folgt aus:

 {t}Bitte geben Sie Ihren Namen ein:{/t}

Übergabe von Variablen

Oft ist der Text bei Anwendungen nicht komplett statisch, sondern abhängig vom aktuellen Zustand der Anwendung. Ein einfaches Beispiel dafür ist eine Willkommensnachricht für den User nach dem Login, bei dem der Benutzer mit seinem Namen begrüßt wird. Es ist dabei nötig, den Text in den Übersetzungsdateien mit dem Namen des Users aus der Datenbank anzureichern.

Dazu ist es möglich, Ersetzungsvariablen innerhalb der Übersetzungen zu definieren. Im unseren einfachen Beispiel würde das so aussehen:

  /*Die po-Datei*/
 msgid "Willkommen auf der Webseite, %1 %2"
 msgstr "Welcome to the website, %1 %2"
   /*Smarty Template, die Variable $user wird aus PHP gefüllt*/
   {t firstname=$user->getFirstname() lastname=$user->getLastname()}Willkommen auf der Webseite, %1 %2{/t} 

Bei der Ausgabe des Smarty Templates wird dann automatisch der Text um den Namen des Benutzers ergänzt und ausgegeben. Die Bezeichnung der Variablen ist dabei egal, es zählt bei der späteren Ersetzung nur die Reihenfolge mit der die Variablen übergeben werden.

In Unsere Projekte veröffentlicht

Cortex Tickets – Online-Ticketvorverkauf für jedermann

Als die Cortex Media GmbH startete, war ein großes Ziel von uns, neben dem Anbieten von individuellen Lösungen im Bereich Webentwicklung, Server und Internetapplikationen auch der Vertrieb von eigenen Produkten. Wir begannen deshalb relativ zügig mit einigen Brainstormings, was denn dieses erste eigene Produkte sein könnte. Auf Grund von persönlichen Erfahrungen beim Veranstalten von kleinen und größeren Theater-, Musical- und Konzertveranstaltung war die Idee schnell geboren:

Wir wollten einen kostengünstigen Online-Ticketverkauf als Alternative für kleine und mittelgroße Veranstalter schaffen, denen die Konditionen und Preise großer Anbieter nicht zusagen und die von der oftmals unnötigen Komplexität abgeschreckt sind. Auch ein Name war schnell geboren und so starteten wir im Februar 2010 mit der Entwicklung unseres eigenen Online-Ticketverkauf-Portals cortex-tickets.de.

Die Startseite unseres Portals www.cortex-tickets.de

Die Startseite unseres Portals www.cortex-tickets.de

Oberste Maxime bei der Entwicklung waren natürlich die Grundsätze, die wir auch bei all unseren Kundenprojekten anlegen: Hohe Sicherheit, ausgezeichnete Performance, Hochverfügbarkeit, Mobilität, Innovation und die Einbeziehung neuster Technologien. Außerdem war uns ein besonderes Anliegen, eine faire Preisstruktur und eine sehr einfache und intuitive Bedienoberfläche zu schaffen.

Neben der Webentwicklung des Portals bot das Projekt noch weitere spannende Herausforderungen, die viele der Themenbereiche abdecken, in denen die Cortex Media GmbH auch als Dienstleister Auftritt:

  • Der Benutzer druckt die gekauften Tickets in unserem System selbst bei sich zu Hause aus. Dafür wurde ein Modul entwickelt, das eine beliebige Anzahl von Tickets mit Bar- und QR-Codes als PDF generiert und diese dem Benutzer per E-Mail schickt bzw. zum Download bereitstellt.
  • Die Webplattform speichert Kundendaten und Bezahlinformationen. Diese Daten sind natürlich sensibler als die meisten Daten, die gewöhnliche Webseiten speichern. Wir haben deshalb hier besonderen Augenmerk auf Datenschutz und Datensicherheit gelegt.
  • Natürlich müssen auch zahlreiche Bezahlsysteme sinnvoll und sicher in die Webseite integriert werden. Cortex Tickets unterstützt inzwischen die reibungslose Zahlung mit Visa & Mastercard, Giropay und per Vorkasse.
  • Um den Arbeitsaufwand für unsere Mitarbeiter möglichst gering zu halten, mussten auch viele automatisierte Prozesse entwickelt werden, zum Beispiel die Auszahlung an den Veranstalter oder die Abgleichung der Vorkassenzahlungen. Cortex Tickets ist in der Lage viele dieser Prozesse völlig ohne menschliches Eingreifen automatisiert durchführen.
Die Verkaufsseite eines Beispielevents

Die Verkaufsseite eines Beispielevents

Ein besonders Augenmerk wollten wir auch auf möglichst einfache Einlasskontrollen legen, denn was nützt einem Veranstalter der beste Onlinevorverkauf, wenn später am Einlass Chaos entsteht. Wir haben dieses Problem durch eine Kombination aus klassischer Einfachheit und moderner Innovation gelöst:

Ganz klassisch kann der Veranstalter sich bei uns eine Gästeliste ausdrucken und die einzelnen Besucher abhaken. Er hat jedoch auch die Möglichkeit über den auf dem Ticket integrierten Barcode eine Einlasskontrolle mit einem Barcode-Scanner und unserer modernen Multiplattform-Software durchzuführen.

Als besondere Innovation bietet Cortex Tickets auch die Einlasskontrolle per iPhone und Android an. Hier benötigt der Veranstalter nur die kostenlose Cortex Tickets App und kann mit der integrierten Kamera des eigenen Smartphones die Kontrolle vornehmen.

Einlasskontrolle per Barcodescanner und Cortex Tickets Software

Einlasskontrolle per Barcodescanner und Cortex Tickets Software

Einlasskontrolle per iPad

Einlasskontrolle per iPad

Heute ist Cortex Tickets mit einem Jahresumsatz von über 100.000 € und mehreren hundert Events pro Woche eine etablierte und beliebte Ticketplattform, die sich mit den fairen und günstigen Preisen hinter keinem Konkurrenten verstecken muss.

In Unsere Projekte veröffentlicht

X-Sendfile zur Sicherung von Userinhalten

Für viele unserer Kunden ist die Datensicherheit ihr höchstes Gut: Dabei geht es aber nicht nur um den Schutz ihrer Daten vor fremdem Zugriff von außen, sondern auch um die Sicherheit der Daten einzelner User untereinander. Seien es hochgeladene Texte, Profilbilder oder gar Lebensläufe, es muss garantiert werden, dass nur berechtigte User diese Daten sehen dürfen.

Leider ist dies bei vielen Webseiten nicht der Fall. Zumeist liegen alle hochgeladenen Dateien öffentlich zugänglich in einem Unterordner des htdocs-Verzeichnisses und der einzige Schutz, der vor einem unerlaubten Zugriff existiert ist die Tatsache, dass die Dateinamen dem Aufrufer unbekannt sind.
Dies ist natürlich nur ein marginaler Schutz, insbesondere weil man sich aus eigenem Interesse bemühen sollte, die Dateien sinnvoll und ordentlich zu benennen.

Die einfachste Lösungsmöglichkeit für dieses Problem ist es nun, die Dateien außerhalb des htdocs-Verzeichnisses zu speichern und dann mit Hilfe einer Skriptsprache wie PHP als Stream auszuliefern. Das folgende Skript demonstriert dies beispielhaft:

<?php
    //Achtung, im Produktiveinsatz sollte hier noch überprüft werden ob der Benutzer berechtigt ist
    //die Datei abzurufen
    if(!empty($_GET['file'])){
        //$config ist z.B. ein Objekt welches die Konfiguration der Seite gespeichert hält
        $file = $config->getFilePath().$_GET['file'];
        if(file_exists($file)){
            header ('Content-Type: application/octet-stream');
            header ('Content-Length: '.filesize($file));
            readfile($file);
        }
     }
?>

Diese Methode hat jedoch drei große Nachteile:

  1. Die Methode wirkt sich negativ auf die Performance aus, da die Datei nicht direkt vom Webserver übertragen wird, sondern ein Prozess der Skriptsprache solange läuft, bis die Datei komplett gestreamt wurde. Gerade bei hochfrequentierten Seiten kann die Ausführung dieser vielen einzelnen Skript-Prozesse die Performance der Seite sehr belasten, da die Prozesse von solchen Skripten einen unnötigen Speicherbedarf erzeugen.
  2. Viele Webserver beschränken (sinnvollerweise) die Ausführungszeit der Aufrufe von Skripten (z.B. auf 60 Sekunden). Bei größeren Dateien würde dies unweigerlich zum Abbruch des Downloads führen.
  3. Im Normalfall werden vom Webserver Skriptaufrufe nicht gecacht, da es sich ja um dynamische Inhalte handelt. Bei der Auslieferung von Dateien wollen wir aber natürlich den Vorteil des Cachings nur ungern verlieren, wie z.B. über E-Tags oder conditional GETs.

Übertragung mit X-Sendfile – Die bessere Variante

Die Apache2 Mod X-Sendfile bietet eine elegantere Möglichkeit, das obige Konzept der Auslagerung der Dateien außerhalb des htdocs-Verzeichnisses umzusetzen. Die Idee dieser Mod ist einfach: Anstatt dem Server nur die Inhalte des fertig ausgelieferten Skripts zu übergeben, wird dem Skript ermöglicht mit dem Webserver zu „kommunizieren“. Das geschieht, indem Apache die Skriptdatei nach dem gesetzen X-Sendfile Header durchsucht. Sollte dieser gefunden werden, wird statt dem Skript die im X-Sendfile Header angegebene Datei übertragen. Das folgende Skript demonstriert die obige Dateiauslieferung, diesmal mit X-Sendfile umgesetzt:

<?php
    //Achtung, im Produktiveinsatz sollte hier noch überprüft werden ob der Benutzer berechtigt ist
    //die Datei abzurufen
    if(!empty($_GET['file'])){
        //$config ist z.B. ein Objekt welches die Konfiguration der Seite gespeichert hält
        $file = $config->getFilePath().$_GET['file'];
        if(file_exists($file)){
            header('X-Sendfile: '.$file);
            header ('Content-Type: application/octet-stream');
            header ('Content-Disposition: attachment; filename='.$file );
            exit;
        }
     }
?>

Zugangsschutz mit X-Sendfile

Nachdem wir nun eine Möglichkeit gefunden haben, unsere Dateien vor einem direkten Zugriff über den Dateinamen zu schützen, können wir unsere Dateien effektiv vor einem Fremdzugriff sichern. Als ein einfaches Beispiel nehmen wir an, dass unsere Webseite die Lebensläufe ihrer User ausliefern soll und zwar nur an den Besitzer des Lebenslaufs selbst oder an eine Firma bei der sich der User beworben hat. Wir haben die Lebensläufe schon außerhalb des htdocs-Ordners gespeichert und wollen diese nun über die Datei get_cv.php ausliefern.

Unser HTML Link würde folgendermaßen aussehen:

<html>
    ...
    <body>
        ...
        <p>
             <a href="get_cv.php?userid=10">Lebenslauf herunterladen</a>
        </p>
    </body>
</html>

Die PHP Datei selbst überprüft nun zunächst ob der Benutzer der Besitzer des Lebenslaufs ist, oder ob er sich bei der Firma, die den Link aufruft, beworben hat. Aus Gründen der Übersichtlichkeit gehen wir davon aus, dass einige Objekte und Methoden an anderer Stelle implementiert wurden.

<?php
    if(!empty($_GET['userid'])){
         //Der Usermanager verwaltet alle User unseres Portals
         $user = $usermanager->getUser(intval($_GET['userid']));
         $loggedInUser = $usermanager->getCurrentLoggedInUser();

         //Der Lebenslauf gehört uns selbst, wir dürfen ihn downloaden
         if($user->getId() == $loggedInUser->getId()){
            header('X-Sendfile: '.$loggedInUser->getCV());
            header ('Content-Type: application/octet-stream');
            header ('Content-Disposition: attachment; filename='.$loggedInUser->getCV() );          
         }
         //Der Besitzer des Lebenslaufs hat sich bei der Firma die im Moment eingeloggt ist beworben
         else if($loggedInUser->isCompany() && $loggedInUser->userAppliedForJob($user)){
            header('X-Sendfile: '.$loggedInUser->getCV());
            header ('Content-Type: application/octet-stream');
            header ('Content-Disposition: attachment; filename='.$loggedInUser->getCV() );
         }else{
              die("Es wurde keine User-ID übergeben.");
         }
    }else{
        die("Es wurde keine User-ID übergeben.");
    }
?>

Mit diesem einfachen Skript haben wir unsere Dateien vor unbefugtem Zugriff geschützt und können uns beliebig komplexe Zugriffsregeln ausdenken und in PHP umsetzen. Natürlich bieten sich einem auch noch viele weitere Möglichkeiten durch die Vorschaltung eines PHP Skripts, exemplarisch seien hier genannt:

  • Abrufen von Informationen aus der Datenbank, z.B. um den Dateiennamen anzupassen
  • Speichern von Daten beim Aufruf, z.B. ein Downloadzähler
  • Bezahlung der Inhalte vor dem Ausliefern der Dateien

Sicherheitsbedenken

Zum Abschluss möchte ich noch auf eine Gefahr hinweisen, die durch dein Einsatz von X-Sendfile enstehen kann. Da der Webserver jede Datei, die im X-Sendfile Header angegeben wird und auf die er lesend zugreifen darf, auch ausliefert, muss der Programmierer sehr genau aufpassen, dass er keine große Sicherheitslücke in seinem Server öffnet.

Dies ist insbesondere dann der Fall, wenn der Benutzer die gewünschte Datei z.B. über einen GET-Parameter an das PHP Skript übergibt. In diesem Fall kann der Angreifer über dein Einsatz des ..-Operators auch auf tiefere Verzeichnisse des Dateisystems zugreifen.

Es ist also zu empfehlen entweder dem Benutzer nicht direkt die Möglichkeit zu geben, den Dateinamen anzugeben, oder zumindest den übergebenen Dateinamen so zu bereinigen, dass kein Schaden enstehen kann. Dies ist zum Beispiel sehr einfach mit str_replace möglich:

<?php
    str_replace("..","",$filename);
?>

Wenn X-Sendfile jedoch richtig und sicher eingesetzt wird, erhöht es sowohl die Sicherheit wie auch Performance eines Webportals um ein Vielfaches.

In Technischer Hintergrund veröffentlicht | Getaggt: , , , ,

Fortschrittliches Testing von iPhone Apps mit UIAutomation

Das gründliche Testen von iPhone Apps kann eine große Herausforderung sein. Besonders durch den kurzen Update Zyklus, sowohl von Entwicklerseite (regelmäßige Updates der eigenen App) wie auch von Apple (Veröffentlichung neuer iOS Versionen mit teils großen Änderungen an der UI) werden notwendige Tests oft zu einer sehr mühsamen und repetitiven Aufgabe.

Mit UIAutomation hat Apple deshalb ab iOS 4.0 eine Möglichkeit geschaffen, automatisierte Tests durchzuführen und dem Entwickler somit viel Arbeit zu sparen. Der Grundgedanke von UIAutomation ist dabei, bei den Tests tatsächlich die UI der App anzusprechen (d.h. es werden tatsächliche Touches simuliert), und nicht wie in klassischen Testverfahren Methoden zu schreiben, welche nur den Sourcode der App ansprechen. Es gibt somit keinen Bruch zwischen den Testfällen und der späteren tatsächlichen Bedienung durch den Benutzer.

UIAutomation ist Teil des Instruments Sets von XCode und kann sowohl Apps auf dem iPhone, iPad aber auch im iPhone Simulator automatisch bedienen. Die Tests selbst werden dabei in Javascript geschrieben und greifen auf die Accessibility Eigenschaften der UI Elemente der App zu.

Im Folgenden werden wir anhand eines kleines Testprogramms eine kurze Einführung in UIAutomation geben und demonstrieren, warum wir bei fast allen unseren Apps im Testing darauf bauen.

Erstes Beispiel in UIAutomation anhand einer Beispiel App

Erster TableViewControllerZweiter TableViewController

Für unser Beispiel haben wir eine rudimentäre Fussballverwaltungs-App implementiert. Sie besteht aus zwei TableViewController, welche einmal die angelegten Vereine und einmal die angelegten Spieler darstellen. Zwischen den Controllern kann über eine TabBar gewechselt werden. Außerdem kann man in der App einen Verein hinzufügen und Spieler löschen.

Erstellen eines neuen Skripts in Instruments

Erstellen eines neuen Skripts in Instruments

Als erstes wollen wir automatisch in das Tab „Spieler“ wechseln und dort an eine bestimmte Position scrollen. Dazu erstellen wir ein neues Skript (siehe Screenshot) und geben folgenden Code ein:

//Um Tipparbeit zu sparen, definieren wir uns hier zwei Hilfsvariablen
var target = UIATarget.localTarget();
var app = target.frontMostApp();

/*
* Es ist zu empfehlen, einzelne Tests in Funktionen auszulagern. 
* Dies steigert die Übersichtlichkeit und ermöglicht es einzelne Tests seperat durchzuführen
*/
function scrollToPlayer(){
    app.tabBar().buttons()["Spieler"].tap();
    app.mainWindow().tableViews()[0].scrollToElementWithPredicate("name beginswith 'Oliver Baumann'");
}

//An dieser Stellen rufen wir unsere definierte Testfunktion auf
scrollToPlayer();

Jedes UIKit Element der App wird in Javascript durch ein zugehöriges UIAElement repräsentiert und findet sich, je nach Position in der jeweiligen View, auf einer gewissen Position in der View Hierarchie wieder. Wenn auf ein bestimmtes Element zugegriffen werden soll, muss in der View Hierarchie zum entsprechenden Element hin abgestiegen werden. In unserem Beispiel greifen wir zum Beispiel auf die TabBar unser App zu, holen uns aus der View Hierarchie alle Schaltflächen der TabBar und weisen UIAutomation an, auf den Button mit der Bezeichnung „Spieler“ zu klicken.

Beispielhafte View-Hierarchie

Beispielhafte View-Hierarchie

Genauso selektieren wir die erste (und in diesem Fall einzige) TableView unserer View Hierarchie und weisen UIAutomation an, zu einer bestimmten Zelle dieser Tabelle zu scrollen. Wir können diese Zelle mit einem einfachen Predicate auswählen oder auch direkt bestimmen, zu welcher Zelle gescrollt werden soll.

Sinnvolles Logging und das Definieren von Testfällen

In unserem bisherigen Beispiel musste der Benutzer selbst am Handy überprüfen, ob das Gerät die gegebenen Anweisungen richtig ausgeführt. Dies natürlich nicht die Idee von automatischen Tests. Stattdessen wollen wir nun im nächsten Schritt Testfälle definieren, Logging-Ausgaben einführen und automatisch Screenshots anfertigen.

Als unseren Testfall möchten wir dazu einen neuen Verein zur Liste hinzufügen. Dazu klicken wir zunächst auf den + Knopf in der Vereinsübersicht, tragen dann den Namen des neuen Vereins in das Textfeld ein, klicken auf Speichern und überprüfen danach ob die neue Zelle in der Tabelle vorhanden ist.

In diesem Bildschirm kann ein Verein hinzugefügt werden.

In diesem Bildschirm kann ein Verein hinzugefügt werden.

Im automatisierten Javascript-Code sieht das folgendermaßen aus:

var target = UIATarget.localTarget();
var app = target.frontMostApp();

function addClub(clubName){
    //Hiermit wird ein neuer Testfall angelegt und benannt
    UIALogger.logStart("Anlegen eines neues Vereins: "+clubName);

    //Wir navigieren auf die Anlege-Seite und füllen das Formular aus
    app.navigationBar().buttons()["Add"].tap();
    app.mainWindow().textFields()[0].setValue(clubName);
    app.mainWindow().buttons()["Speichern"].tap();

    //Wir loggen das erfolgreichen Ausfüllen des Formulars
    UIALogger.logMessage("Formular erfolgreich ausgefüllt");

    //Wir selektieren die (hoffentlich) neu angelegte Zelle
    var cell = app.mainWindow().tableViews()[0].cells().firstWithPredicate("name beginswith '"+clubName+"'");

    //Wir warten kurz bis die Übergangsanimation zwischen den Screenshots beendet ist
    target.delay(1);

    //Wir machen einen Screenshot der TableView um zu sehen ob unser unteres Ergebnis auch stimmt
    target.captureScreenWithName("Tabelle nach Anlegen");

    //Eine Zelle ist dann valid, wenn Sie in der TableView exisiert und somit wurde auch unser Test bestanden
    if(cell.isValid()){
        UIALogger.logPass("Anlegen eines neues Vereins: "+clubName);
    }else{
        UIALogger.logFail("Anlegen eines neues Vereins: "+clubName);	
    }
}

addClub("SC Freiburg");

Wir haben nun also einen Testfall definiert und können beim Ausführen des Skripts in Instruments den Test verfolgen und sehen, ob der Test erfolgreich war. Zu dem können wir uns im Nachhinein alle Testfälle mit Log-Ausgaben und Screenshots anschauen und so etwaige Fehler untersuchen.

Erfolgreiche Tests können in Instruments nachvollzogen werden.

Erfolgreiche Tests können in Instruments nachvollzogen werden.

Mit diesen Instrumenten ist uns nun möglich ein Set von Tests zu definieren, welche alle erfolgreich durchlaufen werden müssen, bevor wir ein Update der App freigeben. Ein Testen der App auch nach kleinen Änderungen ist somit ohne weiteren Aufwand möglich.

Kompliziertere Aktionen

Natürlich haben wir in unseren bisherigen Beispielen nur an der Oberfläche der Fähigkeiten von UIAutomation gekratzt. Einige besondere Eigenschaften und Fähigkeiten möchten ich an dieser Stelle noch hervorheben, da in diesen Fällen nochmals die Überlegenheit von UIAutomation zu handgeschriebenen Tests klar wird:

Behandlung von Alerts
Ein großes Problem bei händischen bzw. automatischen Tests ohne UIAutomation sind zufällig auftretende Alerts (z.B. weil das Handy einen Anruf oder eine SMS empfängt). UIAutomation kann diese Alerts automatisch schließen und fährt danach an der richtige Stelle mit dem Test fort. Der Test ist also nicht automatisch unbrauchbar, nur weil ein Alert aufgetreten ist. Dies ist besonders für zeitintensive automatische Tests sehr praktisch.

UIATarget.onAlert = function onAlert(alert){
    UIALogger.logWarning("Der Alert '" + alert.name() + "' hat die Ausführung unterbrochen!");
    return false; // use default handler
}

Zu dem können eigene Alert Handler programmiert werden, um mit auftretenden Alerts umzugehen. Zum Beispiel wenn ein Verein doppelt in die Liste eingetragen wird, könnte ein Alert von der App gefeuert werden und UIAutomation in einem solchen Alert-Handler dieses Verhalten behandeln.

Multitasking Tests
Mit der Einführung des Multitaskings und dem damit möglichen Wechsel zwischen den Apps sind einige Herausforderungen beim Testen hinzugekommen, da gestestet werden muss, ob die App auch den jeweiligen Screen bzw. die jeweilige Funktion nach dem kurzzeitigen Wechseln zwischen den Apps noch richtig ausführt. UIAutomation bietet hier eine einfache Möglichkeit Multitasking durch den Benutzer zu simulieren:

UIATarget.localTarget().deactivateAppForDuration(5);

Diese Zeile schickt die App für 5 Sekunden in den Hintergrund und fährt danach mit den Tests des programmierten Skripts fort.

Ändern der App-Orientation
UIAutomation kann auch die Rotation des iPhones simulieren und somit z.B. zwischen Landscape und Portrait Modus hin- und herschalten. Zu beachten ist dabei jedoch, dass die Bewegungssensoren des iPhones dabei nicht angesteuert werden, sondern das Drehen nur simuliert ist. Wenn man also auf Bewegungssensordaten angewiesen ist, reicht diese Methode für einen Test nicht aus.

var target = UIATarget.localTarget();
var app = target.frontMostApp();

target.setDeviceOrientation(UIA_DEVICE_ORIENTATION_LANDSCAPELEFT);
UIALogger.logMessage("Das Telefon befindet sich im " + app.interfaceOrientation() + "Modus.");
target.setDeviceOrientation(UIA_DEVICE_ORIENTATION_PORTRAIT);

Multi-Touch
Bis jetzt haben wir nur einfach Taps auf dem Display ausgeführt. Viele Apps benutzen aber auch komplizierte Multi-Touch gesten zur Bedienung, und sei nur ein Swipe um einen Tabelleneintrag zu löschen. Natürlich bietet UIAutomation auch die Möglichkeit diese komplizierteren Gesten zu simulieren.
Zum Beispiel ist möglich die zwei Finger Zoom-Geste (sog. Pinch-Geste) über folgenden Aufruf durchzuführen:

UIATarget.localTarget().pinchOpenFromToForDuration({x:20, y:200}, {x:300, y:200},2);

Und eine Flick-Geste (zum Beispiel um ein Swip-To-Delete aufzurufen) wird folgendermaßen ausgeführt:

UIATarget.localTarget().flickFromTo({x:160, y:200}, {x:160, y:400});

Delay – Wenn’s mal länger dauert
Ein häufiges Problem beim Einsatz von UIAutomation ist die Einbeziehung von Wartezeiten, typischerweise weil eine Animation beendet werden soll oder gewartet werden muss, bis Daten aus dem Internet heruntergeladen worden sind. Ein einfach Hilfsmittel ist es hier, den Test einfach kurz warten zu lassen:

var target = UIATarget.localTarget();
target.delay(1);

Der Test wartet nun eine Sekunde, bevor er mit der weiteren Ausführung fortfährt.

Zusammenfassung und weiterführende Links

UIAutomation ist ein sehr mächtiges Werkzeug, welches das Testen von iPhone Apps unglaublich vereinfacht und auf eine neue Ebene gehoben hat. Es ist für jede halbwegs komplexe App zu Empfehlen Testfälle zu definieren und die Tests vor jedem Update durchlaufen zu lassen. Mit den Logging und Screenshot Funktionen ist auch eine Fehlersuche relativ intuitiv möglich.

Mehr über das UIAutomation findet man zum Einen natürlich bei Apple:

Aber auch in in einigen empfehlenswerten Blogs:

In Unsere Projekte veröffentlicht | Getaggt: , , , , ,