erstellung einer mobilen anwendung für das intranet des...

48
Bachelorarbeit im Rahmen des Studiengangs Scientific Programming Fachhochschule Aachen, Campus Jülich Fachbereich 9 - Medizintechnik und Technomathematik Erstellung einer mobilen Anwendung für das Intranet des Forschungszentrums Jülich Jülich, 25. August 2011 Robert Georg Erasmus Elles Peter Grünberg Institut und Jülich Centre for Neutron Science Technische und Administrative Infrastruktur Wissenschaftliche IT-Systeme Diese Arbeit wurde betreut von: Prof. Ulrich Stegelmann Josef Heinen

Upload: others

Post on 18-Oct-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Bachelorarbeit im Rahmen des Studiengangs

Scientific Programming

Fachhochschule Aachen, Campus Jülich

Fachbereich 9 - Medizintechnik und Technomathematik

Erstellung einer mobilen Anwendung für das

Intranet des Forschungszentrums Jülich

Jülich, 25. August 2011

Robert Georg Erasmus Elles

Peter Grünberg Institut und

Jülich Centre for Neutron Science

Technische und Administrative Infrastruktur

Wissenschaftliche IT-Systeme

Diese Arbeit wurde betreut von:

Prof. Ulrich Stegelmann

Josef Heinen

Page 2: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der
Page 3: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Hiermit versichere ich, dass ich die vorliegende Arbeit selbstständig verfasst und nur die angege-

benen Quellen und Hilfsmittel benutzt habe.

Jülich, den............................................................

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

Diese Arbeit wurde betreut von:

1. Prüfer: Prof. Ulrich Stegelmann (Fachhochschule Aachen, Campus Jülich)

2. Prüfer: Josef Heinen (PGI / JCNS - TA, Forschungszentrum Jülich GmbH)

Diese Arbeit wurde im Peter Grünberg Institut - Jülich Centre for Neutron Science - Techni-

sche und Administrative Infrastruktur der Forschungszentrum Jülich GmbH angefertigt.

Page 4: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der
Page 5: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Mobile Anwendungen auf Smartphones eröffnen neue und komfortable Wege der Kommunikation

mit Netzwerken und Diensten in Unternehmen. Auch im Forschungszentrum Jülich sind in jüngster

Zeit Anforderungen entstanden, welche den Einstieg in die Entwicklung solcher Anwendungen

erfordern. Nachrichtenticker, Schlagzeilen, Wikis oder Blogs sind nur einige typische Beispiele, die

sich aus dem zunehmenden Informations- und Kollaborationsbedarf der Nutzer ergeben.

Den Schwerpunkt dieser Arbeit bildet die Erstellung einer mobilen Anwendung für das Intra-

net des Forschungszentrums. Neben der Darstellung allgemein zugänglicher Informationen soll

auch eine Mitarbeitersuche bereitgestellt werden, welche mit entsprechendem Kartenmaterial

den mobilen Benutzer bei der Suche nach Personen und Gebäuden auf dem Campus unterstützt.

Aus sicherheitstechnischen Erwägungen ist hier eine Hybrid-Struktur (nativ, Web-basiert) vorzu-

sehen, um eine strikte Trennung der Verzeichnisinformationen von den öffentlich erreichbaren

Informationsquellen zu gewährleisten. Die Kommunikation zwischen mobilem Endgerät und

Verzeichnisdienst ist entsprechend zu schützen.

Die Anwendung ist auf der Basis des iOS Betriebssystems der Firma Apple zu entwickeln

und soll als In-house App bereitgestellt werden können. Die Inhalte sind entsprechend den iOS-

Schnittstellen-Richtlinien (iOS Human Interface Guidelines) und unter Ausnutzung von Multi-

Touch Gesten aufzubereiten.

Page 6: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der
Page 7: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Inhaltsverzeichnis

1. WebApp vs. iOS App 21.1. Dashcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.1.1. Datasources, Bindings & Value Transformer . . . . . . . . . . . . . . . . . . . 5

1.1.2. Datasources über HTTPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2. Xcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.2.1. Views & View Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.2.2. Delegation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.2.3. Application Delegate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1.3. Hybrid-Anwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1.3.1. UiWebView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1.3.1.1. Laden von Web-Inhalten in das WebView . . . . . . . . . . . . . . . 10

1.3.1.2. Kommunikation iOS App zur WebApp - Objective-C to Javascript . 11

1.3.1.3. Kommunikation WebApp zur iOS App - Javascript to Objective-C . 11

2. Die FZ-Jülich App 132.1. Die News-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.2. Die Mitarbeitersuche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2.1. E-Mail- und Kurzwahltaste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2.2. Zugriff auf Mitarbeiterdaten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2.3. Der Einsatz von Datasources . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3. Die Kartenfunktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.3.1. Touchgesten implementieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.3.2. Die Merkator-Projektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.3.3. Von GPS-Koordinaten zur Position in der Karte . . . . . . . . . . . . . . . . . 25

2.3.4. Softwaredesign der Kartenfunktion . . . . . . . . . . . . . . . . . . . . . . . . 26

3. Sicherheitsaspekte 283.1. Erkennen von zugelassenen Geräten . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2. Verbindungsverschlüsselung über HTTPS . . . . . . . . . . . . . . . . . . . . . . . . 29

i

Page 8: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

3.2.1. Self-signed Zertifikate akzeptieren . . . . . . . . . . . . . . . . . . . . . . . . . 29

4. Ausblick 324.1. FZViewController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2. Weitere Ergänzungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Abbildungsverzeichnis I

Index III

Literaturverzeichnis III

A. UiWebView-Inhalte mit NSURLConnection laden V

B. Suchanfragen zu Mitarbeiterdaten an den LDAP-Server mittels Python VII

Page 9: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

KAPITEL 1

WebApp vs. iOS App

Das Betriebssystem iOS für mobile Geräte der Firma Apple unterstützt zweierlei Arten von

Software1, zum einen sogenannte WebApps, zum anderen native Applikationen, genannt iOS

Apps. Beide Arten unterscheiden sich in ihrem Entwicklungsaufwand und der damit verbundenen

Einarbeitungszeit. Grund hierfür sind die unterschiedlich hohen Abstraktionslevel auf denen der

Entwickler die Software erstellt.

Der Programmcode der WebApps besteht aus HTML, CSS und Javascript und setzt somit auf

Standards des World Wide Web Consortiums (W3C) auf. Diese Standards wurden von Apple

um einige Komponenten ergänzt, die nur der hauseigene Webbrowser (Safari) unterstützt2. Zur

Interpretation und Ausführung einer WebApp wird Webkit eingesetzt. Webkit ist eine quelloffene

Programmbibliothek, die in Safari und Mobile Safari zur Darstellung von Webseiten verwendet

wird. Mobile Safari ist der Webbrowser von iOS.

Native Programme werden in Objective-C geschrieben und basieren auf Apple-eigenen

Softwarebibliotheken, dem iOS SDK (Software-Development-Kit). iOS Applikationen haben

den vollen Zugriff auf die Hardware, Webanwendungen hingegen können nur eingeschränkt auf

das zugrunde liegende System zugreifen. Nach den Sicherheitsbeschränkungen von Webpro-

grammen müssen dynamisch nachgeladene Daten immer aus der selben Domain stammen wie

die App.

Im Unterschied zu nativen Programmen, welche vor der Verwendung erst auf dem Gerät

installiert werden müssen, liegen WebApps auf einem Webserver und werden bei Bedarf von

dort heruntergeladen. Die Verteilung solcher Applikationen an die Endgeräte und das Einspielen

von Updates ist damit nicht erforderlich. Die Möglichkeiten von Webkit stehen auch nativen

Applikationen zur Verfügung. So können zum Beispiel Hybrid-Programme erstellt werden, die aus

einem nativen und einem webbasierten Teil bestehen. Der native Part wird dabei so gering wie

1Two Types of Software Run in iOS: iOS Human Interface Guidelines [2] - Seite 172Siehe Safari DOM Additions Reference [10]

2

Page 10: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

möglich gehalten. Die Entwicklung von Web-Anwendungen ist aufgrund der höheren Abstraktion

wesentlich einfacher und schneller.

3

Page 11: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 1: WebApp vs. iOS App

1.1. Dashcode

Dashcode [7] ist eine Software, die von Apple zur Entwicklung von Web-Applikationen für Safari

und Mobile Safari bereitgestellt wird. Es beinhaltet eine Entwicklungsumgebung mit Texteditor

und Debugger, einen Gui-Builder, mit dem über Drag & Drop die Programmoberfläche erstellt

werden kann, sowie ein Javascript-Framework. Das Javascript-Framework stellt einige Klassen zur

Verfügung, die bei der schnellen Entwicklung von WebApps helfen sollen. Es ist zu finden im Ord-

ner Parts in der Dateiansicht von Dashcode. Bisher besteht die einzige und dazu unvollständige

API-Dokumentation zu diesem Framework aus den Kommentaren im Sourcecode.

Dashcode ist angelehnt an das Modell-View-Controller-Modell3 (MVC) und hat mit Version 3.0

die Konzepte Datasources und Bindings eingeführt. Durch Datasources und Bindings muss der

Entwickler nahezu keinen Code mehr schreiben um den Datenaustausch zwischen Modell und

View zu gewährleisten. Der einzige Fall, in dem noch Code geschrieben werden muss ist der, wenn

sich die Daten in der View und im Modell in ihrem Format unterscheiden und entsprechend

umgewandelt werden müssen. Die zur Umwandlung verwendeten Funktionen werden als Value

Transformer bezeichnet.

Jede Anwendungsentwicklung startet in Dashcode mit einer Vorlage. Vorlagen bieten ein

Grundgerüst, welches der Entwickler nur noch um seinen eigenen Code erweitern muss.

Abbildung 1.1.: Auswahl einer Vorlage in Dashcode

Über die Schaltfläche Run startet der iPhone-Simulator mit Webbrowser. Hierüber kann der

Entwickler seine Anwendung in einem virtuellen iPhone testen. Zum endgültigen Ausliefern oder

dem Testen auf einem physischen iOS-Gerät wird über den Menüpunkt Ablage/Bereitstellen die

WebApp im Ordner Websites des Home-Ordners bereitgestellt.

3Muster zur Strukturierung von Software. Klassen und Objekte werden logisch getrennt in die Repräsentation von

Daten (Model), der Darstellung von Daten (View) und den Vermittlern dazwischen (Controller).

4

Page 12: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

1.1. Dashcode

1.1.1. Datasources, Bindings & Value Transformer

Datasources stellen auf eine einfache und komfortable Weise Informationen für eine Anwendung

bereit. Bei Bedarf laden und parsen sie Daten, die in einer XML- oder JSON4-Struktur vorlie-

gen. Der Bezugspfad wird über eine URL5-Adresse definiert. Dashcode stellt anschließend die

Struktur der Daten anschaulich dar. In dieser Darstellung können die Daten mit den Elementen

aus der grafischen Benutzerfläche verbunden werden6. Dies entspricht dem Binding-Konzept

und bewirkt, dass sich Änderungen der Daten auf der einen Seite direkt auch auf der anderen

Seite auswirken. So kann ein Textfeld mit einem Eintrag in einer Datasource verknüpft werden.

Ändert sich der Textinhalt des Eintrags, weil beispielsweise neue Daten von einem Server geladen

wurden, so wird das Textfeld mit dem neuen Text aktualisiert und umgekehrt. Ist das Textfeld

editierbar und gibt der Benutzer einen neuen Text ein, wird der Text auch in der Datasource

eingetragen. Häufig sollen die Daten aber nicht 1:1 übernommen werden, zum Beispiel wenn

Benutzereingaben erst überprüft werden müssen oder in einem falschen Format vorliegen. Die

Überprüfung von Benutzereingaben ist auch ein wichtiger Sicherheitsaspekt. Hier kommen Value

Transformer zum Einsatz. Ein Value Transformer ist eine Klasse die zwei Funktionen definiert,

die für die Umwandlung der Daten in jeweils eine Richtung zuständig sind. Diese Funktionen

müssen vom Entwickler implementiert werden.

1.1.2. Datasources über HTTPS

Dashcodes Datasourcen können keine Daten über HTTPS7 beziehen. Durch einen Trick kann

dies aber umgangen werden. Um Dashcode das Datenformat bekannt zu machen und Bindings

erstellen zu können, speichert man eine lokale Repräsentation der XML- oder JSON-Struktur

auf dem Rechner. Den lokalen Speicherpfad gibt man dann als Bezugsquelle an. Nachdem

die WebApp über den Menüpunkt Bereitstellen exportiert wurde, muss die URL des lokalen

Bezugspfades in der Datei parts.js im Unterordner mobile/Parts/ des Ordners der WebApp auf die

HTTPS-URL des remote Datenpfades geändert werden. Die entsprechende Stelle im Sourcecode

findet man über die Suchfunktion des Editors. Ein erneutes Bereitstellen überschreibt die URL

wieder mit dem lokalen Pfad.

4JavaScript Object Notation - kompaktes Datenformat, das gleichzeitig gültiges JavaSkript ist und mit eval() ausge-

wertet werden kann5URL - Uniform Resource Locator. Schema zum Spezifizieren von Ressourcen in Computernetzwerken. Bezeichnet

häufig Web-Adressen.6Create Bindings for the Safari Web Application: Dashcode User Guide - Seite 37.7HTTPS - Hypertext Transfer Protocol Secure. Definiert in den Abstraktionsebenen des Internetprotokolls als weitere

Schicht auf Transportebene zwischen TCP (Transmission Control Protocol) und HTTP das SSL/TLS-Protokoll

(Secure Socket Layer/Transport Layer Security). Alle Daten des HTML-Bodys werden dadurch verschlüsselt über-

tragen und sind nur für die Endteilnehmer lesbar.

5

Page 13: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 1: WebApp vs. iOS App

Abbildung 1.2.: Die Abbildung zeigt die Erstellung eines Bindings in Dashcode. Im unteren Teil istdie XML-Datenstruktur dargestellt, die über den im URL-Feld spezifizierten Pfadgeladen wurde. Darüber sieht man die Repräsentation der View.

6

Page 14: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

1.2. Xcode

1.2. Xcode

iOS Applikationen werden mit Xcode erstellt. Xcode ist eine integrierte Entwicklungsumgebung

(IDE) der Firma Apple mit Tools und Softwarebibliotheken für die Programmentwicklung für Mac

OS X und iOS. Eine Komponente ist das iOS SDK (Software-Development-Kit). Es enthält eine

Sammlung von Objective-C-Klassen, auf denen jede iOS-Anwendung basiert. Darüber hinaus

bietet es Zugriff auf die Programmumgebung. Jede Anwendung wird in einem speziellen Kontext

ausgeführt, der iOS Runtime Environment. Dieses Runtimesystem ermöglicht abstrahierten

Zugang zur Hardware und implementiert ein Sicherheitsmodell, das vor der Manipulation von

anderen Applikationen schützt. Ferner steuert es den Ablauf der Software, indem es sie über das

Eintreten gewisser Ereignisse (Events) benachrichtigt.

Abbildung 1.3.: Die Abbildung zeigt die Xcode-IDE mit geöffnetem Interface Builder. Im rechten,unteren Abschnitt lassen sich verschiedene, für iOS typische Grafikelemente einerProgrammoberfläche auswählen. Diese können mit der Maus auf der Repräsentationder Programmoberfläche in der Mitte platziert werden.

Zu den Xcode-Tools gehören unter anderem der iPhone-Simulator, ein Debugger, das Code-

Analysetool Instruments und der Interface Builder. Auch Dashcode ist Teil des Xcode-Pakets. Mit

dem Interface Builder wird die grafische Benutzeroberfläche entworfen, ohne dass programmiert

werden muss.

7

Page 15: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 1: WebApp vs. iOS App

1.2.1. Views & View Controller

Die Entwicklung einer iOS-Anwendung startet mit einer Vorlage. Diese ist soweit konfiguriert,

dass nach kurzer Zeit eine lauffähige Anwendung erstellt werden kann. Die wesentliche Aufga-

be des Programmierers besteht darin, mit dem Interface Builder die unterschiedlichen Views

zu entwerfen, sowie den Code für die zugehörigen ViewController zu implementieren. Views

sind definiert als rechteckige sichtbare Bereiche auf dem Bildschirmz, zum Beispiel Buttons,

Textfelder, Rahmen usw.. Innerhalb eines Views können weitere Views platziert werden. Der

Interface Builder enthält eine ganze Reihe vorgefertigter Views. Diese werden in der Regel in so-

genannten nib8-Dateien definiert (Dateiendung .xib). Nib-Dateien werden bei der Initalisierung

von Views geladen, also erst während der Programmausführung. In der Xcode-IDE zeigen sie

nur ihre grafische Repräsentation, wie sie auch auf einem iOS-Gerät aussehen würde. Die iOS

Human Interface Guidelines empfehlen, möglichst auf die vorgefertigten Elemente des Interface

Builder zurückzugreifen, denn ein Anwender ist mit diesen vertraut und weiß sie zu bedienen.

Anpassungen im Aussehen der Views können direkt im Interface Builder vorgenommen wer-

den. Der eigene Programmcode wird in View Controllern definiert. View Controller bilden die

Verbindung zwischen den Anwendungsdaten und ihrer Präsentation in den Views. Aufgrund

von Benutzereingaben oder Nachrichten des Runtimesystems verändern View Controller die

View-Hierarchie sowie die Darstellung der Daten bzw. die Daten selber [6].

(a) Switch (b) Slider (c) Picker View

(d) Toolbar mit Bar Button Items

Abbildung 1.4.: Auswahl einiger View-Elemente des Interface Builders

1.2.2. Delegation

Die Idee bei der iOS-Entwicklung ist es, alle Standard-Elemente und typischen Eigenschaften

einer Applikation dem Entwickler fertig bereitzustellen und deren Details und Komplexität zu

verbergen. Lediglich, was nicht vorkonfiguriert werden kann und das, was das Individuelle

8nib - NeXT Interface Builder: Enthalten die mit dem Interface Builder erstellten Views

8

Page 16: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

1.2. Xcode

einer App ausmacht, wird an Objekte delegiert, die der Entwickler implementieren muss. Das

zugrundeliegende Software-Entwurfsmuster heißt Delegation. Objekte der Programmbibliothek

werden nicht verändert, sondern sie delegieren Aufgaben an Objekte des Entwicklers. Ein Objekt

das als Delegate für gewisse Aufgaben fungieren will, muss die entsprechenden Schnittstellen

bereitstellen. Alle Schnittstellen, die ein Objekt an seinem Delegate erwartet, werden zu einem

Protokoll zusammengefasst. Delegate-Objekte implementieren immer vollständige Protokolle

und garantieren damit, dass alle Schnittstellen vorhanden sind.

object (at some level of the composite structure) to change its behavior or appearance. The model object,in turn, notifies all objects who have registered as observers when its state changes; if the observer is a viewobject, it may update its appearance accordingly.

Figure 4-6 Traditional version of MVC as a compound pattern

User action

Update

Get changed state

Update

StrategyController

CompositeView

Notify

Observer

Model

The Cocoa version of MVC as a compound pattern has some similarities to the traditional version, and in factit is quite possible to construct a working application based on the diagram in Figure 4-6. By using thebindings technology, you can easily create a Cocoa MVC application whose views directly observe modelobjects to receive notifications of state changes. However, there is a theoretical problem with this design.View objects and model objects should be the most reusable objects in an application. View objects representthe "look and feel" of an operating system and the applications that system supports; consistency in appearanceand behavior is essential, and that requires highly reusable objects. Model objects by definition encapsulatethe data associated with a problem domain and perform operations on that data. Design-wise, it's best tokeep model and view objects separate from each other, because that enhances their reusability.

In most Cocoa applications, notifications of state changes in model objects are communicated to view objectsthrough controller objects. Figure 4-7 shows this different configuration, which appears much cleaner despitethe involvement of two more basic design patterns.

Figure 4-7 Cocoa version of MVC as a compound design pattern

User action

Update

Update

Notify

MediatorStrategyController

ModelViewCommandComposite

Observer

The controller object in this compound design pattern incorporates the Mediator pattern as well as theStrategy pattern; it mediates the flow of data between model and view objects in both directions. Changesin model state are communicated to view objects through the controller objects of an application. In addition,view objects incorporate the Command pattern through their implementation of the target-action mechanism.

164 The Model-View-Controller Design Pattern2010-12-13 | © 2010 Apple Inc. All Rights Reserved.

CHAPTER 4

Cocoa Design Patterns

Abbildung 1.5.: Das im iOS-SDK verwendete MVC-Design Pattern

1.2.3. Application Delegate

Ein zentrales Delegate, welches bei jeder Applikation implementiert werden muss, ist das Ap-

plication Delegate9. Dieses erhält von der Ausführungsumgebung Nachrichten, die über das

Eintreten von Ereignissen informieren. Drückt der Benutzer zum Beispiel den Homebutton wäh-

rend eine Anwendung noch läuft, erzeugt dies eine Nachricht, die die Anwendung auffordert

in den Hintergrund zu wechseln. Das System informiert auch darüber, wann eine Applikation

gestartet wurde, mit der Aufforderung, sich und ihre Views zu initialisieren. Außerdem sendet es

Nachrichten, wenn eine Anwendung Ausführungszeit bekommt, sie pausiert oder ganz beendet

werden soll. Programme, die ihre Ressourcen nicht oder nicht zeitig genug freigeben, werden aus

dem Hauptspeicher entfernt. Für alle diese Nachrichten stellt das Application Delegate Funktio-

nen bereit, die bei Eintreten der entsprechenden Ereignisse aufgerufen werden. Ein Objekt wird

zum Application Delegate, wenn es das UIApplicationDelegate Protokoll implementiert.

9The Application Delegate: iOS Application Programming Guide [4] - Seite 29

9

Page 17: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 1: WebApp vs. iOS App

1.3. Hybrid-Anwendungen

Bei Hybrid-Anwendungen wird aufgrund der Vorteile die eigentliche Anwendung als WebApp

umgesetzt. Der native Part sollte so klein wie möglich gehalten werden. Die Kombination von

WebApp und iOS-Applikation wird verwendet, wenn Daten sowieso schon als HTML-Dokumente

vorliegen oder eine Vorschaufunktion von diversen Dokumenten implementiert werden soll.

Häufig möchte man sich auch die umfangreichen Möglichkeiten von HTML und CSS zu Nutze ma-

chen, um das Aussehen und die Platzierung von Inhalten wie Texten und Bildern zu bestimmen.

Die Schnittstelle zum Webkit-Framework bildet im iOS-SDK die Klasse UiWebView.

1.3.1. UiWebView

UiWebView ist eine Klasse, die HTML-Dokumente darstellen kann. Sie erweitert UiView und lässt

sich damit wie alle anderen View-Elemente innerhalb von UiWindow oder anderer UiViews und

deren Unterklassen platzieren. Darüber hinaus kann UiWebView nicht nur HTML-Dokumente

verarbeiten, sondern auch die Dokumente von Adobes PDF-Format, Apples iWork- und Mi-

crosofts Office Programmen. Hierfür konvertiert es die Dokumente in HTML und übergibt sie

anschließend an Webkit.

1.3.1.1. Laden von Web-Inhalten in das WebView

Nachfolgender Code erstellt eine HTTP-Anfrage und übergibt sie an das UiWebView-Objekt. Die-

ses lädt die Daten von der angegebenen URL und gegebenenfalls auch alle weiteren Resourcen,

die in dem geladenen HTML-Dokument definiert sind.

MyViewController.m

1 − ( void ) viewDidLoad

{

[ super viewDidLoad ] ;

NSURLRequest * httpRequest = [ NSURLRequest requestWithURL : [NSURL URLWithString :

@"URL−zum−Web−Content" ] ] ] ;

6 [ uiWebView loadRequest : httpRequest ] ;

}

MyViewController.m ist die Implementierungsdatei der von der Klasse UiViewController abgelei-

teten Klasse MyViewController. Da MyViewController das Delegate eines Views ist, implementiert

es die viewDidLoad-Methode. Der Aufruf dieser Methode ist die Nachricht des Systems, dass

die Standard-Viewelemente fertig geladen wurden. Im Rumpf der Funktion können jetzt eigene

Anpassungen vorgenommen werden, bevor die eigentliche Programmausführung beginnt.

10

Page 18: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

1.3. Hybrid-Anwendungen

1.3.1.2. Kommunikation iOS App zur WebApp - Objective-C to Javascript

Zur Kommunikation zwischen nativer Applikation und WebApp, zum Beispiel um Daten zu

übergeben, die nur über native Funktionen abgerufen werden können, kann in UiWebView die

stringByEvaluatingJavaScriptFromString:-Methode genutzt werden. Diese bekommt einen String

übergeben der Javascript-Code enthält. Dieser Code wird von der WebApp ausgeführt und hat

somit Zugriff auf den gesamten DOM-Baum10. Besteht der Javascript-Code aus einer Funktion,

die einen Wert zurück gibt, dann liefert obige Methode diesen als NSString zurück.

NSString * returnValue = [ webView stringByEvaluatingJavaScriptFromString : @"some−j s−code" ]

1.3.1.3. Kommunikation WebApp zur iOS App - Javascript to Objective-C

Um Nachrichten der WebApp zu empfangen und gegebenenfalls in Funktionsaufrufe umzuset-

zen, muss der entsprechende ViewController des iOS-Programmteils das UIWebViewDelegate-

Protokoll implementieren. Dies wird in dem Header file des ViewControllers definiert:

MyViewController.h

@interface FirstViewControl ler : UIViewController <UIWebViewDelegate> { . . . }

Das Protokoll spezifiziert die webView:shouldStartLoadWithRequest:navigationType:-Methode,

die vor jedem Laden von Web-Inhalten aufgerufen wird. Hierüber hat das Delegate die Mög-

lichkeit, die Anfrage zu kontrollieren und gegebenenfalls auch zu verweigern. Dabei wird im

Request-Objekt die zu ladende URL-Adresse mit übergeben. Innerhalb der URL lässt sich die

aufzurufende native Funktion definieren. Neue Inhalte werden im WebView über die Javascript-

Anweisung window.location geladen:

window . location = " http : / / my_javascript /my_command" ;

Der ViewController implementiert die webView:shouldStartLoadWithRequest:navigationType:-

Methode und überprüft die URL auf bekannte Schlüsselwörter. Diese lösen den Aufruf von

Objective-C Code aus:

MyViewController.m

− (BOOL) webView : ( UIWebView * ) webView shouldStartLoadWithRequest : ( NSURLRequest * ) request

navigationType : ( UIWebViewNavigationType ) navigationType {

4 NSString * host = request .URL. host ;

i f ( [ host isEqualToString :@" my_javascript " ] ) {

NSString *command = request .URL. path . lastPathComponent ;

i f ( [command isEqualToString :@"makeAlert" ] ) {

UIAlertView * a l e r t = [ [ UIAlertView a l l o c ] i n i t W i t h T i t l e :@" Hello World"

10DOM - Document Object Model: HTML-Elemente einer Webseite werden in einer hierarchischen Baumstruktur

organisiert.

11

Page 19: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 1: WebApp vs. iOS App

9 message :@"Send from J a v a s c r i p t " delegate : n i l cancelButtonTitle :@"OK"

otherButtonTitles : n i l ] ;

[ a l e r t show ] ;

[ a l e r t release ] ;

}

14 return NO;

}

return YES ;

}

In obigem Code ist das erste Schlüsselwort my_javascript (Zeile 5). Dies teilt dem iOS-Programm

mit, dass die WebApp versucht nativen Code aufzurufen. In der URL wurde dabei my_javascript

als Host definiert. Der letzte Teil des URL-Pfades definiert den Objective-C Code. Die URL

http://my_javascript/makeAlert würde ein Dialog-Fenster öffnen mit der Nachricht Hello World

und einem OK-Button zum Schließen.

Abbildung 1.6.: Die Kommunikation zwischen UiWebViewDelegate (links) und UiWebView (rechts).Die Symbole entsprechen denen aus dem Interface Builder.

Bei der Verwendung von UiWebView gilt es eine Sache zu beachten. Bevor das WebView re-

leased 11 wird, muss sein Delegate auf nil gesetzt werden. Der Grund ist, dass Anfragen zum

Laden von HTML-Dokumenten in das WebView asynchron durchgeführt werden. Dazu wird ein

Thread gestartet, der auf das Ende der Datenübertragung wartet und dann das Delegate über

den Erfolg bzw. Misserfolg des Ladevorgangs informiert. Ist das Delegate ungleich nil, versucht

der Thread die Daten an das WebView zu übergeben. Wurde in der Zwischenzeit das WebView

released, würde der Thread auf einen ungültigen Speicherbereich zugreifen.

Abbildung 1.7.: Life Cycle von UiWebView

11Gibt den Speicherbereich eines Objektes frei

12

Page 20: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

KAPITEL 2

Die FZ-Jülich App

Im Rahmen dieser Bachelorarbeit wurde eine Hybrid-Anwendung geschrieben, die WebApp und

native Applikation vereint. Der plattformspezifische Teil der Software dient dazu, die Beschrän-

kungen der Web-Anwendung zu umgehen und den Zugriff auf Informationen des Forschungs-

zentrums zu schützen. Die Software implementiert drei wesentliche Funktionalitäten:

• Eine News-Funktion, die aktuelle Nachrichten zum Forschungszentrum zeigt, ähnlich zu

denen, wie sie im Newsletter zu finden sind.

• Eine Mitarbeitersuche, die über diverse Suchkriterien wie Name, Telefonnummer oder

E-Mail-Adresse Informationen zu einem Mitarbeiter anzeigt und Buttons anbietet, um den

Mitarbeiter anzurufen oder ihm eine E-Mail zu senden.

• Eine Kartenfunktion, die das Gelände des Forschungszentrums zeigt. Befindet sich der

Benutzer innerhalb des Geländes, kann sein Standort sowie der Standort des Gebäudes zu

einem mit der Mitarbeitersuche gefundenen Mitarbeiter angezeigt werden. Der Ausschnitt

der Karte ist über Multitouchgesten veränderbar.

Die drei Kernfunktionen der Software wurden als eigenständige WebApps mit Dashcode 3.0

entwickelt. Der native Teil übernimmt das Laden der WebApps und stellt eine TabBar zur Ver-

fügung, über die zwischen den Funktionen gewechselt werden kann. Außerdem werden die

Beschränkungen von WebApps, die keinen Zugriff auf die Hardware haben, mit dem nativen Teil

umgangen. Für die Erstellung dieses Programmteils wurde Xcode 4.0 verwendet. Insgesamt fand

die Entwicklung auf einem iMac Intel Core 2 Duo mit 2,4 GHz und 2 GB Arbeitsspeicher statt.

Das verwendete Betriebssystem ist Mac OS X 10.6 (Snow Leopard). Während dieser Arbeit wurde

das Xcode-Paket auch mit der neusten Version von Mac OS X (Lion) getestet. Trotz Update auf

Xcode 4.1 stürzte Dashcode ab, wenn man ein Projekt nicht über den Öffnen-Dialog, unter dem

Menüpunkt Ablage, zu öffnen versuchte. Ansonsten ließen sich bei Dashcode unter Lion keine

weiteren Fehler entdecken.

13

Page 21: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

2.1. Die News-Funktion

Die Presseabteilung des Forschungszentrums Jülich stellt einen öffentlichen RSS-Newsfeed bereit.

Dieser enthält Informationen zu Publikationen, Nachrichten und aktuellen Themen rund ums

Forschungszentrum Jülich. Ein RSS-Feed ist eine standardisierte XML-Struktur. In der News-

WebApp wird die Browser-Vorlage von Dashcode verwendet und mit der URL des Rss-Feeds eine

Datasource erzeugt.

Abbildung 2.1.: Der RSS-Feed des Forschungszentrums Jülich als Datasource in Dashcode

Über die in Abschnitt 1.1.1 vorgestellten Bindings wurden die Elemente wie title (Titel der Nach-

richt) und pubDate (Veröffentlichungsdatum) aus der Datasource mit den View-Elementen

verbunden. Die Vorlage erkennt automatisch alle Nachrichteneinträge (item-Elemente) und

erzeugt für jede Nachricht einen Listenpunkt (Abb. 2.2(a)). Die Detailansicht (Abb. 2.2(b)) soll zu

einer ausgewählten Nachricht zusätzlich Informationen anzeigen: einen kurzen Text (description-

Element) sowie einen Button mit dem man zu der Originalnachricht gelangt. Um die Views über

Bindings mit den Inhalten zu versorgen, erstellt Dashcode automatisch eine weitere spezielle

Datasource namens list. Diese enthält das ausgewählte Listenenlement. Klicken auf den Read

More-Button ruft die Funktion moreClicked auf, die das Laden der Originalnachricht bewirkt:

function moreClicked ( event ) {

l i n k = document . getElementById ( ’ l i s t ’ ) . object . selectedObjects ( ) [ 0 ] . valueForKey ( ’ l i n k ’ ) ;

3 i f ( l i n k ) {

window . location = l i n k ;

}

}

14

Page 22: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.1. Die News-Funktion

(a) Liste alle Nachrichten (b) Details zu einer Nachricht

Abbildung 2.2.: Listen- und Detailansicht der Newsfunktion

15

Page 23: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

2.2. Die Mitarbeitersuche

Die Mitarbeitersuche stellt ein Formular mit Eingabefeldern bereit, um Mitarbeiter über ihren

Namen, Vornamen, das Gebäude, die Telefonnummer oder die Email-Adresse zu finden. Alle

gefundenen Einträge werden in einer Listenansicht angezeigt. Wird ein Eintrag ausgewählt,

gelangt man zu einer Detailansicht, die verschiedene Informationen zu diesem Mitarbeiter

anzeigt. Über Buttons kann der Benutzer den Mitarbeiter anrufen oder ihm eine Email schreiben.

Dazu werden Standardprogramme für Telefonate und Email benutzt. Ein dritter Button wechselt

zu der Kartenfunktion. In der Karte wird dann der Standort des Gebäudes, wo der Mitarbeiter

seinen Arbeitsplatz hat, angezeigt.

(a) Suchformular (b) Gefundene Einträge (c) Detailansicht

Abbildung 2.3.: Die verschiedenen Ebenen der Mitarbeitersuche im iPhone-Simulator

Für die Umsetzung wurde die Browser-Vorlage von Dashcode verwendet. In der Vorlage werden

verschiedene Inhaltsebenen in einem Stapel organisiert. Dabei wird in dem Stapel der Reihe

nach von einer Ansicht zur nächsten navigiert. Mit der Navigationsleiste am oberen Rand gelangt

man immer zurück zur nächst höheren Ansicht im Stapel. Das Dashcode-Javascript-Framework

implementiert ein Browser-Objekt, das Methoden zum Wechseln zwischen den Ebenen anbietet.

2.2.1. E-Mail- und Kurzwahltaste

Die Dashcode Library stellt besondere Tasten bereit, über die Funktionen der iOS-Standardpro-

gramme aufgerufen werden können. Zum Beispiel kann die Mail-Anwendung mit dem Interface

16

Page 24: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.2. Die Mitarbeitersuche

zum Verfassen einer neuen Mail und bereits eingetragenem Adressaten gestartet werden. Der

Aufruf erfolgt über spezielle URLs. Die Funktionen werden dabei im Schema-Teil der URL-

Definition angegeben. Im Beispiel der Mail-Funktion sähe eine URL wie folgt aus:

mailto : hans . beispiel@fz−j u e l i c h . de? subject=undefined

In einer Hybrid-App bewirkt eine solche URL-Anfrage den Aufruf der aus Abschnitt 1.3.1.3 auf

Seite 11 bekannten Delegate-Methode: webView:shouldStartLoadWithRequest:navigationType:.

Um die E-Mail- und Kurzwahltaste funktionsfähig zu machen, wird die Methode um folgenden

Code ergänzt:

NSString *scheme = [ [ request URL] scheme ] ;

i f ( [ scheme isEqualToString :@" mailto " ] | | [ scheme isEqualToString :@" t e l " ] ) {

[ [ UIApplication sharedApplication ] openURL : [ request URL ] ] ;

4 return NO;

}

2.2.2. Zugriff auf Mitarbeiterdaten

Die Mitarbeiterdaten der Listen- und Detailansicht werden über einen Verzeichnisdienst bezo-

gen. Ein Verzeichnisdienst stellt die Daten einer zentralen hierarchischen Datenbank in einem

Netzwerk zur Verfügung. Im Forschungszentrum Jülich wird ein zentraler Verzeichnisdienst mit

Daten zu allen Mitarbeitern betrieben. Dieser wird unter anderem von den E-Mail-Programmen

als Adressbuch benutzt. So kann zu einem Namen die zugehörige E-Mail-Adresse oder umge-

kehrt zu einer E-Mail-Adresse der zugehörige Name erfragt werden. Das verwendete Anwen-

dungsprotokoll ist LDAP (Lightweight Directory Access Protocol). LDAP spezifiziert zum einen

die Kommunikation zwischen dem LDAP-Client und dem Verzeichnis-(Directory-)Server, zum

anderen die Struktur der im Verzeichnis organisierten Daten. Die LDAP-Struktur fast logisch

zusammengehörige Daten zu Objekten zusammen, wobei die Daten als die Attribute eines Ob-

jekts bezeichnet werden. Attribute haben einen bestimmten Typ. Die Definitionen von Objekten

werden in Schemas beschrieben. Objekte, die einem Schema entsprechen, gehören zur selben

Klasse. Jedes Objekt lässt sich über einen eindeutigen Bezeichner, den Distinguished Name (DN),

referenzieren. DNs sind aus Relative Distinguished Names (RDN) zusammengesetzt.

Die iOS Softwarebibliotheken bieten keine Implementierungen, um auf einen LDAP-Server

zuzugreifen. Der Verzeichnisdienst des Forschungszentrums ist nur über Exchange Web Services

(EWS) von extern erreichbar. Dazu gibt es im iOS-SDK jedoch keine APIs. Daher können Geräte,

die im Internet benutzt werden, vom Forschungszentrum nur auf einen Webserver zugreifen. Aus

diesen Gründen wurde in der Programmiersprache Python ein Serverskript1 geschrieben, das

die Anfragen der Mitarbeitersuche entgegennimmt und eine entsprechende Suchanfrage an den

1Referiert zu dem Begriff Server-Side Skripting, eine Technik mit der eine Webseite speziell zu Benutzeranfragen

angepasst generiert werden kann

17

Page 25: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

LDAP-Server formuliert. Die Ergebnisse liefert es in einer XML-Struktur an das iOS-Gerät zurück.

Der verwendete Webserver ist der Apache httpd. Dieser unterstützt die Programmiersprache

Python durch das Modul2 mod_python. Die Eingaben des Suchformulars (Abbildung 2.3(a))

werden als URL-Parameter an das Skript auf dem Server übergeben (siehe Abschnitt 2.2.3).

Innerhalb des Skripts bekommt jede Funktion ein request-Objekt übergeben. Hierüber erhält

man mit

value = request . form . g e t f i r s t ( ’ parameter name ’ )

den Wert eines URL-Parameters. Mit den Werten als Auswahlkriterien wird anschließend eine

LDAP-Suche formuliert. Das Modul python-ldap bietet eine Python-Schnittstelle zu der API3 der

freien C-Bibliothek OpenLDAP. Eine LDAP Suchanfrage benötigt vier Angaben [19]: die base DN,

den scope, den Suchfilter und die Attributsliste. Die base DN gibt das Objekt an, ab dem in der

hierarchischen Struktur der Daten abwärts gesucht werden soll. Die Tiefe der Suche wird über

scope definiert. In dieser Arbeit werden ab der base DN alle untergeordneten Objekte durchsucht

(ldap.SCOPE_SUBTREE). Ein Suchfilter definiert, welche Objektklassen berücksichtigt werden

und welche Attributtypen welche Ausprägung haben dürfen. Es werden alle Klassen berücksich-

tigt, da es nur eine Personenklasse gibt. Die URL-Parameter bestimmen die Attribute. Dabei gibt

der Name den Attributtyp und der Wert die Ausprägung an. Wurde ein URL-Parameter nicht ange-

geben, so wird sein Wert für die Suche auf * gesetzt. Dies bedeutet, dass bei dem entsprechenden

Objekt-Attribut alle Ausprägungen das Suchkriterium erfüllen. Häufig sucht der Benutzer nur

nach einem Kriterium, zum Beispiel nach dem Nachnamen. Da immer alle Parameter durch eine

und-Verknüpfung mit in die Suche eingehen, werden die undefinierten Werte auf * gesetzt.

f i l t e r = ’ (&(sn=%s ) ( givenName=%s ) ( physicalDeliveryOfficeName=%s ) ( telephoneNumber=%s )

( mail=%s ) ) ’ % (name, vorname , gebaeude , telefon , mail )

Bevor allerdings ein Wert mit in die Suche eingeht, muss die Zeichenkette auf Funktionszeichen

überprüft und diese gegebenenfalls maskiert werden. Funktionszeichen werden von dem Skript-

Interpreter nicht als reine Textzeichen sondern als Ausführungsanweisungen gewertet. Diese

müssen daher maskiert werden, da dies sonst ein Sicherheitsrisiko gegenüber Code-Injektion-

Angriffen4 darstellen würde. Folgende Funktion übernimmt die Maskierung:

value = f i l t e r . escape_f i l ter_chars ( value )

Das letzte Argument der LDAP-Suche, die Attributsliste, bestimmt, welche Attribute von einem

passenden Objekt zurückgegeben werden. Die gewählten Attribute entsprechen den Informatio-

nen aus der Detailansicht (Abbildung 2.3(c)).

Nachdem die Argumente definiert sind, muss als erstes eine Verbindung mit der URL zum

LDAP-Server initialisiert werden. Dies erzeugt ein LDAP-Objekt über das dem LDAP-Protokoll

2Module sind bei Bedarf nachladbare Programmeinheiten3API - Application Programming Interface: Schnittstelle zur Anbindung eines Softwaresystem an ein anderes4Ein Angreifer fügt einem Programm z.B. über ein Eingabefeld eigenen Code hinzu

18

Page 26: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.2. Die Mitarbeitersuche

Abbildung 2.4.: Die Kommunikationsstruktur der Mitarbeitersuche

entsprechende Operationen ausgeführt werden können. Im nächsten Schritt wird durch das

Binding die eigentliche Verbindung zum Verzeichnisdienst aufgebaut. Hier können eine DN für

den Benutzer sowie das entsprechende Passwort angegeben werden. Ohne die Angaben wird

der anonyme Account verwendet. Nach dem Binding kann die Suchanfrage mit den vier Argu-

menten durchgeführt werden. Die Suchoperation liefert eine Liste von Tupeln zurück, wobei pro

passendem Verzeichnisobjekt ein Tupel mit den Attributwerten enthalten ist. Die Attributwerte

aus den Tupeln werden in eine XML-Struktur überführt und als Antwort des Servers verschickt.

Wurden keine passenden oder zu viele Einträge gefunden wird eine, bis auf das Element message,

leere XML-Struktur zurück gegeben. Das message-Element gibt Auskunft über den Erfolg oder

Misserfolg der Suche. Anhang B listet die vollständige Funktion.

2.2.3. Der Einsatz von Datasources

Im folgenden wird die Umsetzung des Konzepts der Dashcode Datasources in der Implemen-

tierung der Mitarbeitersuche vorgestellt. Die Texteingabefelder des Suchformulars (Abbildung

2.3(a)) sind alle jeweils mit Feldern der Datasource formData über die im Abschnitt 1.1.1 vorge-

stellten Bindings verbunden. So werden Eingaben in den Textfeldern direkt in formData gespei-

chert. Klickt der Benutzer auf den Suchen-Button wird die searchForStaff -Funktion aufgerufen.

In der Funktion werden die Eingaben aus formData über:

var eingabe = formData . valueForKeyPath ( ’ content . eingabefeld ’ ) ;

ausgelesen und mittels:

searchResults . setValueForKeyPath (name, ’ parameters .name ’ ) ;

als URL-Parameter der Datasource searchResults gesetzt. Im Anschluss wird mit:

browser . goForward (document . getElementById ( ’ searchResults ’ ) , ’Found Entries ’ ) ;

19

Page 27: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

die Listenansicht der gefundenen Einträge (Abbildung 2.3(b)) aufgerufen. Die Listenansicht ist

mit der Datasources searchResults verbunden. Daher, sobald die Elemente der View gezeichnet

werden sollen, fordern sie die Daten der Datasources an. Die Datasources aktualisiert sich dann

zuerst mit den Daten der bei ihrer Definition angegebenen URL, ergänzt um die zuvor gesetzten

Parameter. Die Bindings bewirken anschließend wiederum, dass, sobald die Daten fertig geladen

wurden, die View-Elemente aktualisiert werden.

20

Page 28: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.3. Die Kartenfunktion

2.3. Die Kartenfunktion

Die Kartenfunktion soll es dem Nutzer erleichtern, sich auf dem Gelände des Forschungszentrums

zurecht zu finden. Das Interface zeigt einen Ausschnitt einer Karte des Forschungszentrums mit

eingezeichneten Wegen und Gebäuden und blendet die Position des Nutzer sowie gegebenenfalls

die Position eines gesuchten Gebäudes ein. Bewegt sich der Benutzer innerhalb des Geländes,

wird seine angezeigte Position laufend aktualisiert. Der Kartenausschnitt ist über Touchgesten

veränderbar. Die gesamte Anzeige wird von einem HTML55-Canvas-Element ausgefüllt. In die-

ses Canvas wird der Ausschnitt der Karte gezeichnet. Dazu definiert der HTML-Standard eine

Javascript-API, die Funktionen zum Zeichnen von grafischen Primitiven und Bildern bereitstellt.

2.3.1. Touchgesten implementieren

Fingereingaben auf dem Bildschirm lösen Ereignisse (Events) aus. Um auf diese reagieren zu

können, müssen für verschiedene Events Funktionen (Event-Handler) angemeldet werden. Diese

Funktionen werden dann bei Fingereingaben aufgerufen und bekommen ein Event-Objekt

übergeben. In diesem Objekt stehen alle Informationen zu einer Eingabe. Welche dies sind, wird

in der Safari DOM Additions Reference [10] beschrieben.

canvas . addEventListener ( " touchstart " , t h i s . _touchStart , f a l s e ) ;

canvas . addEventListener ( "touchmove" , t h i s . _touchMove , f a l s e ) ;

canvas . addEventListener ( "touchend" , t h i s . _touchEnd , f a l s e ) ;

Mit obigen Codezeilen werden für die Ereignisse Touchanfang, Touchbewegung und Touchende

Beobachterfunktionen registriert. Statt einer Funktion kann auch ein Objekt übergeben werden,

das die handleEvent(event)-Funktion implementiert. Über diese Funktionen werden nun folgende

Fingergesten realisiert:

• Scrollen: verschieben des Kartenausschnitt mit einem oder mit zwei Fingern.

• Pinch To Zoom: den Ausschnitt vergrößern oder verkleinern (Skalieren), indem zwei Finger

aufeinander zu oder voneinander weg bewegt werden.

Dabei soll nicht über die Karte hinaus gescrollt werden. Herauszoomen soll jedoch soweit möglich

sein, dass die gesamte Karte sichtbar wird. Da die Karte nicht im gleichen Seitenverhältnis wie

das Canvas Element sein muss, können beim Hinauszoomen weiße Ränder entstehen (Abbildung

2.5).

Damit keine Verzerrungen der Kartendarstellung auftreten, soll der angezeigte Ausschnitt

immer im gleichen Seitenverhältnis bleiben. Aus diesem Grund werden die Höhe und Breite

mit dem gleichen Faktor vergrößert oder verkleinert, allerdings sollte nicht der Wert von touchE-

vent.scale verwendet werden. Dieser Wert ist der Quotient aus dem Abstand der beiden Finger

5HTML5 ist der sich in Arbeit befindende Entwurf des W3Cs für die nächste Generation der Auszeichnungssprache

HTML. Dabei erhielt der Entwurf im Mai 2011 den Status eines für die Freigabe vorgesehenen Kandidaten.

21

Page 29: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

(a) Ein Ausschnitt der Karte (b) Die gesamte Karte mit Rand

Abbildung 2.5.: Verschiedene Zoomstufen, das Seitenverhältnis bleibt gleich. Die WebApp wurdehierbei im Browser Safari getestet.

zum aktuellen Zeitpunkt und dem Abstand zu Beginn der Touchgeste. Angenommen die Finger

sind zu Beginn relativ nah zusammen und werden nur ein kleines Stück auseinander bewegt,

dann könnte sich der Abstand trotzdem um ein vielfaches vergrößert haben. Besser ist es, die Wei-

te der Bewegung beider Finger durch die Diagonale des Canvas zu teilen und 1 zu addieren. Dann

wird der Ausschnitt der Karte maximal verdoppelt (Skalierungsfaktor = 2, die Finger wurden von

schräg gegenüber liegenden Eckpunkten bis ganz zur Mitte zusammengeführt) beziehungsweise

halbiert (Skalierungsfaktor = 0.5, Bewegung entgegengesetzt). Die Punkte unter den Fingern auf

der Karte sollen sich mit den Fingern mitbewegen. Dies wird erreicht, indem auf den Mittelpunkt

zwischen den beiden Fingern (ZoomPoint) skaliert wird. Dazu wird erst der Kartenausschnitt

skaliert und anschließend wieder so verschoben (Translation), dass ZoomPoint wieder an seiner

ursprünglichen Position in der Karte liegt. Die Skalierung ist eine Form der Koordinatentrans-

22

Page 30: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.3. Die Kartenfunktion

formation, bei der die Zahlenwerte der Achsen mit konstanten Faktoren multipliziert werden:

x ′i = λi ∗ xi . Bei der hier verwendeten Transformation sind alle Faktoren gleich. Dies wird als

Maßstabsänderung bezeichnet: λi =λ. Die Translation ist eine Verschiebung eines Objektes in x-

und in y-Richtung: x⃗ ′ = x⃗ − p⃗ mit p⃗ = (xy

).

(a) Skalierung um den Faktor 2. Der Skalie-

rungspunkt wird um den Vektor P verscho-

ben.

(b) Translation um den Vektor -P

Abbildung 2.6.: Pinch To Zoom wird durch zwei Koordinatentransformationen realisiert. Erst Ska-lierung, danach Verschiebung. Der Skalierungspunkt auf der Karte ist anschließendwieder an der gleichen Position im Canvas.

Die drawImage-Methode des Canvas-Zei-

Abbildung 2.7.: Das Source-Rechteck wird vondrawImage passend auf die Größedes Destination-Rechtecks skaliert.

chenkontextes zeichnet den Ausschnitt der

Karte in das Canvas und bekommt die in

Abbildung 2.7 eingezeichneten Parameter

übergeben. Liegt der Ausschnittsbereich in-

nerhalb der Karte (Abbildung 2.8(a)), dann

ist dw gleich der Canvasbreite und dh gleich

der Canvashöhe, dx und dy sind null. Wur-

de aber soweit herausskaliert, dass der Aus-

schnitt die gesamte Karte enthält (Abbil-

dung 2.8(b)), dann sind sx und sy gleich

null, sw gleich der Bildbreite, sh gleich der

Bildhöhe und dx, dy, dw und dh müssen so

gesetzt werden, dass das Seitenverhältnis

bestehen bleibt und die Karte mittig plat-

ziert ist.

23

Page 31: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

(a) Ausschnitt kleiner als die Karte (b) Der Ausschnitt enthält die gesamte Karte

Abbildung 2.8.: Verschieden große Kartenausschnitte, abgebildet auf das Canvas

2.3.2. Die Merkator-Projektion

Anbieter von Kartenmaterial, wie zum Beispiel Google Maps, Microsoft Virtual Earth, Yahoo Maps

und Open Street Map [21], benutzen die Merkator-Projektion um die dreidimensionale Kugelform

der Erde auf die zweidimensionale rechteckige Fläche einer Karte abzubilden. Anschaulich

gesehen wird dabei ein Zylinder um die Erde gelegt und jeder Punkt auf dem Globus auf eine

senkrechte Linie des Zylinders projiziert. So spricht man auch von einer Zylinderprojektion.

Eigentlich ist die Erde ein Geoid, das heißt sie ist an den Polen abgeflacht, doch wird sie bei der

verwendeten Abbildung als perfekte Kugel angesehen (Spherical Mercator).

(a) Zylinder um den Globus (b) Die Erdkugel wurde auf ein Quadrat abge-

bildet

Abbildung 2.9.: Die Merkatorprojektion

Die Merkator-Projektion ist winkeltreu; das bedeutet: sucht man sich auf einer Karte den Winkel

für eine Richtung heraus, so entspricht dieser auch der Realität (wichtig in der Navigation). Bei

24

Page 32: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.3. Die Kartenfunktion

Flächen verhält sich dies anders, hier treten Verzerrungen auf. Die Tissotsche Indikatrix6 ist ein

Hilfsmittel zur Untersuchung der Verzerrungseigenschaft von Projektionen. Die Abbildungen

2.10 veranschaulichen die Regional unterschiedlichen Flächenverzerrungen.

(a) Tissotsche Indikatrix (b) Tissotsche Indikatrix bei der Merkatorpro-

jektion

Abbildung 2.10.: Die vorher überall gleich großen Kreisflächen wurden durch die Merkatorprojektionzu regional unterschiedlich großen Ellipsen.

Eines veranschaulichen die Abbildungen zur Tissotschen Indikatrix darüber hinaus: sehr re-

gional gesehen wirken sich die Verzerrungen nur geringfügig aus. Daher sollte bei der relativ

geringen Flächengröße des Gelände des Forschungszentrums die Flächenverzerrung bei der

Positionsbestimmung vernachlässigbar sein.

2.3.3. Von GPS-Koordinaten zur Position in der Karte

Die laufend aktuelle Position des Nutzers erhält man mit:

var watchId = navigator . geolocation . watchPosition ( positionReceived ) ;

positionReceived ist eine Funktion, die aufgerufen wird, sobald eine Position ermittelt wurde

(Callback-Function). Ihr wird ein Position-Objekt übergeben, welches über

l a t i t u d e = position . coords . l a t i t u d e ;

longitude = position . coords . longitude ;

die geographische Länge (Longitude) und Breite (Latitude) liefert. Diese GPS-Koordinaten müs-

sen nun in die Pixel-Koordinaten des verwendeten Kartenbildes umgerechnet werden. Dazu

muss über das Kartenbild folgendes bekannt sein:

Die geographische Länge von x = 0 (minLong) und von x = Bildbreite (maxLong) sowie die

geographische Breite von y = 0 (minLat) und y = Bildhöhe (maxLat). Mit diesen Angaben lassen

sich dann GPS-Koordinaten in Bild-Koordinaten (Pixel) umrechen:

6Ein Verfahren, welches mittels Ellipsen die Verzerrungseigenschaften von Kartennetzentwürfen untersucht

25

Page 33: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 2: Die FZ-Jülich App

bildX = ( gpsLong − minLong) / (maxLong − minLong) * mapImage . width ;

bildY = ( gpsLat − minLat ) / ( maxLat − minLat ) * mapImage . height ;

2.3.4. Softwaredesign der Kartenfunktion

Um die Komplexität zu verringern und und die Wiederverwendbarkeit zu erhöhen, wurde die

Kartenfunktion objektorientiert umgesetzt. So werden die Klassen (Abbildung 2.11) auch in der

WebApp der Mitarbeitersuche verwendet um den Standort eines Gebäudes anzeigen zu lassen.

Abbildung 2.11.: UML-Klassendiagramm der Kartenfunktion

Durch die Aufteilung der Software in Klassen wurden die einzelnen Aufgabenbereiche getrennt.

MapRegion definiert die Grenzen des angezeigten Kartenausschnitts und verhindert das Setzen

von Bereichen, die über die Karte hinausgehen (entspricht dem Source-Rechteck von Abbil-

dung 2.7). Ansonsten käme es später zu einem Fehler in der drawImage-Methode. ViewableArea

repräsentiert den gesamten sichtbaren Bereich. Dies beinhaltet den Kartenausschnitt, sowie

gegebenenfalls einen Rand. Es implementiert Methoden zum Verschieben (scroll) und Skalieren

(zoom) des Kartenausschnitts. Dazu verwaltet es Attribute die den Rand angeben sowie die ge-

samte Höhe und Breite und setzt entsprechend die neuen Werte der MapRegion. Die Werte, die

26

Page 34: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

2.3. Die Kartenfunktion

angeben um wie viel gezoomt und gescrollt werden soll, bekommt ViewableArea von MapNaviga-

tionHandler. Diese Klasse registriert die Touchgesten des Benutzers und errechnet daraus die

Werte zum Verschieben und Skalieren der Karte. Map speichert das Kartenbild und stellt eine

Methode zum Umrechnen von GPS- zu Bildkoordinaten zur Verfügung.

Abbildung 2.12.: Logische Repräsentation der Klassen Map, MapRegion und ViewableArea

27

Page 35: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

KAPITEL 3

Sicherheitsaspekte

Da die FZ Jülich Anwendung Daten abruft, die nur Mitarbeitern des Forschungszentrums zu-

gänglich sein dürfen, muss der Zugang auf diese Datenbestände geschützt sein. Nur freigegebene

iOS-Geräte des Forschungszentrums dürfen Zugriff erhalten. Außerdem muss die Kommuni-

kation zwischen den Endgeräten und dem Datenserver verschlüsselt werden, da die Nutzung

der Applikation auch außerhalb des Intranets1 des Forschungszentrum möglich sein soll. Die

verschlüsselte Verbindung erfolgt über HTTPS.

3.1. Erkennen von zugelassenen Geräten

Zugelassene Geräte werden durch ihre eindeutige Gerätenummer identifiziert. Dazu ist diese

in einer Datenbank auf dem Datenserver hinterlegt. Bei jeder Anfrage der Applikation an den

Server wird die Gerätenummer in der HTTP-Anfrage als POST-Parameter mit übertragen. Die

Übertragung von POST-Parametern ist eine Möglichkeit des HTTP-Protokolls, Informationen an

eine Webseite zu übergeben. Dabei stehen die Daten im HTML-Body, im Gegensatz zu HTTP-

GET, das die Daten in der URL kodiert. Bei der Verwendung von HTTPS wird der HTML-Body

verschlüsselt übertragen, hingegen ist die URL immer im Klartext auch für Dritte lesbar. Der

Server überprüft die HTTP-Parameter auf die Gerätenummer, nur wenn sie in der Datenbank

vorhanden ist, sendet er die angeforderten Informationen.

Die WebApp der Mitarbeitersuche muss die Gerätenummer bestimmen, um eine Suchanfra-

ge durchführen zu können. Dazu wird auf den nativen Anwendungsteil zurückgegriffen. Dies

geschieht durch die in Abschnitt 1.3 vorgestellten Kommunikationswege. Die WebApp ruft fol-

genden Javascript-Code auf:

window . location = " http : / / j a v a s c r i p t / getDeviceId " ;

Der entsprechende native Code sieht wie folgt aus:

1Im Gegensatz zum Internet nicht öffentliches firmeneigenes Rechnernetz

28

Page 36: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

3.2. Verbindungsverschlüsselung über HTTPS

i f ( [command isEqualToString :@" getDeviceId " ] ) {

UIDevice *myDevice = [ UIDevice currentDevice ] ;

NSString *deviceUDID = [ myDevice uniqueIdentif ier ] ;

4 [ webView stringByEvaluatingJavaScriptFromString : [ NSString stringWithFormat :

@"document . HiddenForm . deviceId . value = ’%@ ’ ; " , deviceUDID ] ] ;

}

Über document.HiddenForm.deviceId.value = deviceUDID wird die Gerätenummer (DeviceId) in

einem nicht sichtbaren Formularfeld innerhalb der WebApp gespeichert.

3.2. Verbindungsverschlüsselung über HTTPS

HTTPS ist HTTP über das TSL2-Verschlüsselungsprotokoll. Damit ein Webserver HTTPS bereit-

stellen kann, muss er Zugriff auf eine SSL-Bibliothek haben. Der Apache Webserver implemen-

tiert über das Modul mod_ssl die OpenSSL Bibliothek. Außerdem muss sich der Server über ein

digitales Zertifikat authentifizieren können. Zertifikate werden von einer autorisierten Zertifi-

zierungsstelle ausgestellt und signiert, wodurch ihre Echtheit bestätigt wird. Es ist aber auch

möglich, selbst signierte Zertifikate, sogenannte self-signed Zertifikate, zu erstellen. UiWebView

akzeptiert standardmäßig nur die Zertifikate der autorisierten Aussteller. Soll die Anwendung

selbst signierte Zertifikate akzeptieren, muss der Entwickler an den entsprechenden Stellen des

Verbindungsaufbaus eingreifen.

3.2.1. Self-signed Zertifikate akzeptieren

Beim Verbindungsaufbau über HTTPS versucht der Server, sich über ein Zertifikat zu au-

thentifizieren. Damit ein Zertifikat von einer unbekannten Zertifizierungsstelle verifiziert wer-

den kann, muss der Entwickler eigenen Programmcode bereitstellen. Das NSURLConnection-

Delegate-Protokoll bietet hierzu die entsprechenden Einstiegspunkte3. Die Klasse NSURL-

Connection vereinfacht das Laden von HTTP-Anfragen (URL-Requests) und informiert sein

Delegate-Objekt über die verschiedenen Zustände der Verbindung. Über die Methode connecti-

on:didReceiveAuthenticationChallenge: überprüft ein NSURLConnection-Objekt ob sein Delegate

Authentifizierungsversuche behandeln kann. Die entsprechende Implementierung im Delegate

mit der auf „Server vertrauen?”-Anfragen reagiert wird, sieht wie folgt aus:

2Im allgemeinen bekannt unter der vorherigen Bezeichnung SSL3Siehe NSURLConnectionDelegate Protocol Reference in der Mac OS X Developer Library

29

Page 37: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Kapitel 3: Sicherheitsaspekte

− (BOOL) connection : ( NSURLConnection * ) connection canAuthenticateAgainstProtectionSpace :

( NSURLProtectionSpace * ) protectionSpace {

4 NSString * challenge = [ protectionSpace authenticationMethod ] ;

i f ( [ challenge isEqualToString : NSURLAuthenticationMethodServerTrust ] ) {

return YES ;

}

return NO;

9 }

Mit protectionSpace wird der Server beziehungsweise derjenige Teilbereich des Servers referen-

ziert, der einer Authentifizierung bedarf.

Das NSURLConnection-Objekt führt mit der Delegate-Methode connection:didReceiveAuthen-

ticationChallenge: die eigentliche Authentifizierung durch. Auf dem Endgerät ist dazu im nativen

Programmteil das selbst signierte Zertifikat hinterlegt (zum Beispiel in einer .der-Datei). Dieses

wird mit dem Zertifikat des Servers verglichen. Gibt es eine Übereinstimmung, so wird der

aufrufenden Instantz der Delegate-Methode mitgeteilt, zur Vorbereitung einer verschlüsselten

Verbindung das Zertifikat für die Authentifizierung im SSL Handshake Protocol zu verwenden.

1 − ( void ) connection : ( NSURLConnection * ) conn didReceiveAuthenticationChallenge :

( NSURLAuthenticationChallenge * ) challenge {

NSURLCredential * credential = n i l ;

NSURLProtectionSpace * protectionSpace ;

6 SecTrustRef t r u s t ;

int err ;

protectionSpace = [ challenge protectionSpace ] ;

t r u s t = [ protectionSpace serverTrust ] ;

11

NSArray * c e r t s = [ [ NSArray a l l o c ] initWithObjects : ( id ) myCert , n i l ] ;

credential = [ NSURLCredential credentialForTrust : t r u s t ] ;

err = SecTrustSetAnchorCertif icates ( trust , ( CFArrayRef ) c e r t s ) ;

16 SecTrustResultType t r u s t R e s u l t = 0 ;

i f ( err == noErr ) {

err = SecTrustEvaluate ( trust , &t r u s t R e s u l t ) ;

}

21 [ c e r t s release ] ;

BOOL trusted = ( err == noErr ) && ( ( t r u s t R e s u l t == kSecTrustResultProceed ) | |

( t r u s t R e s u l t == kSecTrustResultUnspecified ) ) ;

26 i f ( trusted ) {

[ [ challenge sender ] useCredential : credential forAuthenticationChallenge : challenge ] ;

30

Page 38: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

3.2. Verbindungsverschlüsselung über HTTPS

} else {

[ [ challenge sender ] cancelAuthenticationChallenge : challenge ] ;

}

31

}

Weitere Erläuterungen zu den einzelnen Funktionen finden sich in der Certificate, Key, and Trust

Services Reference [14].

Abbildung 3.1.: Der zeitliche Ablauf der Authentifizierung des Servers mit selbst signierten Zertifi-katen

In Anhang A dargestellte Listings zeigen, wie mit einer NSURLConnection nach der Authen-

tifizierung des Servers die Daten geladen und anschließend zur Darstellung an das WebView

übergeben werden.

31

Page 39: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

KAPITEL 4

Ausblick

4.1. FZViewController

Alle drei ViewController der TabBar implementieren zum Teil die gleichen Attribute und Funk-

tionen. Deshalb bietet es sich an, einen allgemeinen FZViewController zu erstellen, der diese

Gemeinsamkeiten in einer Klasse zusammenfasst. Die drei ViewController werden dann von

dieser Klasse abgeleitet.

Abbildung 4.1.: UML-Klassendiagramm des FZViewControllers

4.2. Weitere Ergänzungen

Im Folgenden noch einige mögliche Erweiterungen:

• Unterstützung der Landscape-Orientierung. Der Bildschirminhalt könnte an die Ausrich-

tung des Gerätes angepasst werden.

• Ein RSS-Feed, der wichtige Termine zu Veranstaltungen im Forschungszentrum enthielte.

Darüber hinaus ließen sich Termine in die Kalender-App übertragen.

32

Page 40: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

4.2. Weitere Ergänzungen

• Die über die Mitarbeitersuche gefundenen Kontakte könnten sich in das Adressbuch

übernehmen lassen.

• Eine iPad-Version. Die größere verfügbare Anzeigefläche könnte zum Beispiel so genutzt

werden, dass neben der Liste der Nachrichtentitel schon der erste Artikel angezeigt wür-

de. Daneben würde zusätzlich die Karte eingeblendet. Sie würde dann zu der Nachricht

oder dem Termin das entsprechende Institut anzeigen. Weiterhin könnten in der Mitar-

beitersuche ab den ersten drei eingegebenen Buchstaben Suchvorschläge eingeblendet

werden.

• Weitere Touchgesten wie der Double Tap. Durch zweimaliges schnelles Antippen des Touch-

screens mit dem Finger auf den Touchscreen könnte in der Karte zwischen zwei unterschied-

lichen Skalierungsstufen umgeschaltet werden.

33

Page 41: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Abbildungsverzeichnis

1.1. Dashcode - Auswahl einer Vorlage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.2. Dashcode - Erstellen eines Bindings zwischen Model und View . . . . . . . . . . . . 6

1.3. Xcode, Interface Builder - TabBarView . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.4. Xcode, Interface Builder - Beispiele für View-Elemente . . . . . . . . . . . . . . . . . 8

1.5. Cocoa - Model View Design Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1.6. Ablaufdiagramm der Kommunikation zwischen WebView und Delegate . . . . . . 12

1.7. Life Cycle von UiWebView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.1. Dashcode, Datasource-Übersicht - Der RSS-Feed des Forschungszentrums . . . . 14

2.2. Xcode, iPhone Simulator - Listen- und Detailansicht der Newsfunktion . . . . . . . 15

2.3. Xcode, iPhone Simulator - Die Ansichten derMitarbeitersuche . . . . . . . . . . . . 16

2.4. Kommunikationsstruktur der Mitarbeitersuche: Client - Webserver - LDAP-Server 19

2.5. Xcode, iPhone Simulator - Verschiedene Zoomstufen der Kartenansicht . . . . . . 22

2.6. Koordinatentransformationen: Skalierung und Transformation durch Touchgesten 23

2.7. Die Parameter der drawImage-Methode . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.8. Verschieden große Kartenausschnitte, abgebildet auf das Canvas . . . . . . . . . . . 24

2.9. Wikipedia August 2011, Merkatorprojektion - Die Projektion auf eine Zylinderfläche 24

2.10.Wikipedia August 2011, Tissotsche Indikatrix - Die Flächenverzerrungen bei der

Merkatorprojektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2.11.UML-Klassendiagramme der Kartenfunktion . . . . . . . . . . . . . . . . . . . . . . 26

2.12.Logsiche Repräsentationen der Klassen Map, MapRegion und ViewableArea . . . . 27

3.1. Zeitlicher Ablauf der Authentifizierung des Servers mit selbst signierten Zertifikaten 31

4.1. UML-Klassendiagramm des FZViewControllers . . . . . . . . . . . . . . . . . . . . . 32

I

Page 42: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Abbildungsverzeichnis

II

Page 43: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Literaturverzeichnis

[1] Apple Developer Library, http://developer.apple.com/library/ios, 22. Juli 2011

[2] Apple Inc. - iOS Human Interface Guidelines, 14. Juli 2011

[3] Apple Inc. - Your First iOS Application, 18. Juli 2011

[4] Apple Inc. - iOS Application Programming Guide, 19. Juli 2011

[5] Apple Inc. - The Objective-C Programming Language, 19. Juli 2011

[6] Apple Inc. - View Controller Programming Guide for iOS, 21. Juli 2011

[7] Apple Inc. - Dashcode User Guide, 12. Juli 2011

[8] Apple Inc. - Safari Web Content Guide, 14. Juli 2011

[9] Apple Inc. - TouchEvent Class Reference, 16. Juli 2011

[10] Apple Inc. - Safari DOM Additions Reference, 25. Juli 2011

[11] Apple Inc. - Video: Displaying Web Content in iPhone Applications, 19. Juli 2011

[12] Apple Inc. - Video: Creating Safari Web Applications in Dashcode, 11. Juli 2011

[13] Apple Inc. - NSURLConnection Class Reference & NSURLConnectionDelegate Protocol

Reference, 10. August 2011

[14] Apple Inc. - Certificate, Key, and Trust Services Reference, 11. August 2011

[15] Berin’s Infosec Blog: Wings of Hermes - iPhone SSL based NSURLConnection with your

own root cert

http://blog.wingsofhermes.org/?p=58

11. August 2011

[16] Fasty’s Coding Blog - Inhalt in UIWebView laden mit Fortschrittsanzeige

http://www.fasty.de/2011/03/inhalt-in-uiwebview-laden-mit-fortschrittsanzeige-

uiprogressview/

12. August 2011

III

Page 44: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Literaturverzeichnis

[17] Wikipedia - Lightweight Directory Access Protocol, 01. August 2011

[18] Packt Publishing Technical & IT Book and eBook Store - Python LDAP Applications: Part 1 -

Installing and Configuring the Python-LDAP Library and Binding to an LDAP Directory

http://www.packtpub.com/article/installing-and-configuring-the-python-ldap-library-

and-binding-to-an-ldap-directory

01. August 2011

[19] Packt Publishing Technical & IT Book and eBook Store - Python LDAP Applications: Part 2 -

LDAP Opearations |

http://www.packtpub.com/article/python-ldap-applications-ldap-opearations

02. August 2011

[20] MSDN - Search Filter Syntax

http://msdn.microsoft.com/en-us/library/aa746475(v=vs.85).aspx

02. August 2011

[21] OpenLayers - Spherical Mercator

http://docs.openlayers.org/library/spherical_mercator.html

17. August 2011

[22] Wikipedia - Mercator-Projektion, 12. August 2011

[23] Wikipedia - Tissotsche Indikatrix, 17. August 2011

[24] W3C - HTML Canvas 2D Context

http://www.w3.org/TR/2dcontext/

26. Juli 2011

[25] modpython.org - Mod_python Manual

http://www.modpython.org/live/current/doc-html/

05. August 2011

[26] Wenz, Christian: JavaScript und AJAX.

Galileo Press GmbH, Bonn, 7. aktualisierte Auflage, 2007,

ISBN 3-89842-859-1.

http://openbook.galileocomputing.de/JavaScript_ajax/

(Zugriff: Dezember 2010)

IV

Page 45: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

ANHANG A

UiWebView-Inhalte mit NSURLConnection laden

MyViewController.h:

@interface MyViewController : UIViewController {

UIWebView *webView ;

3 NSMutableData * responseData ;

NSString *mimeType, * textEncoding ;

NSURLConnection * urlConnection ;

}

@property ( nonatomic , retain ) IBOutlet UIWebView *webView ;

8 @property ( nonatomic , retain ) NSURLConnection * urlConnection ;

MyViewController.m

/ / In der viewDidLoad−Methode :

2 / / NSURLConnection e r s t e l l e n

NSURL * url = [NSURL URLWithString :@" https : / /www. Domain−Zum−Web−Inhalt . de" ] ;

NSMutableURLRequest * request = [ NSMutableURLRequest requestWithURL : ur l ] ;

urlConnection = [ [ NSURLConnection a l l o c ] initWithRequest : request delegate : s e l f ] ;

−(void ) connection : ( NSURLConnection * ) connection didReceiveResponse : ( NSURLResponse * )

response {

responseData = [ [ NSMutableData a l l o c ] i n i t ] ;

mimeType = [ [ response MIMEType] retain ] ;

5 textEncoding = [ [ response textEncodingName ] retain ] ;

}

− ( void ) connection : ( NSURLConnection * ) connection didReceiveData : ( NSData * ) data {

[ responseData appendData : data ] ;

}

V

Page 46: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Anhang A: UiWebView-Inhalte mit NSURLConnection laden

− ( void ) connectionDidFinishLoading : ( NSURLConnection * ) connection {

2 i f ( s e l f . urlConnection ! = n i l ) {

[ s e l f . urlConnection cancel ] ;

s e l f . urlConnection = n i l ;

}

[ s e l f . webView loadData : responseData

7 MIMEType: mimeType

textEncodingName : textEncoding

baseURL : [NSURL URLWithString :

@" https : / /www. Domain−Zum−Web−Inhalt . de" ] ] ;

}

VI

Page 47: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

ANHANG B

Suchanfragen zu Mitarbeiterdaten an denLDAP-Server mittels Python

LdapHandler.py:

import ldap

import cgi

from ldap import f i l t e r

4

ldap . set_option ( ldap .OPT_DEREF, ldap .DEREF_SEARCHING)

def _getSearchString ( req , paramName, expression ) :

value = req . form . g e t f i r s t (paramName)

9 i f value == None :

value = ’ * ’

else :

value = expression % f i l t e r . escape_f i l ter_chars ( value ) #or maybe f i l t e r _ f o r m a t ( )

return value

14

def search ( req ) :

name = _getSearchString ( req , ’name ’ , ’%s * ’ )

vorname = _getSearchString ( req , ’vorname ’ , ’%s * ’ )

gebaeude = _getSearchString ( req , ’ gebaeude ’ , ’%s * ’ )

19 te lefon = _getSearchString ( req , ’ te lefon ’ , ’*%s * ’ )

mail = _getSearchString ( req , ’ mail ’ , ’%s * ’ )

req . content_type = ’ t e x t / plain ; charset=UTF8 ’

req . write ( ’< re s u l ts > ’ )

i f name != ’ * ’ or vorname ! = ’ * ’ or gebaeude ! = ’ * ’ or te lefon != ’ * ’ or mail != ’ * ’ :

24 base_dn = ’ dc=ad , dc=fz−juel ich , dc=de ’

f i l t e r = ’ (&(sn=%s ) ( givenName=%s ) ( physicalDeliveryOfficeName=%s ) ( telephoneNumber=%s )

( mail=%s ) ) ’ % (name, vorname , gebaeude , telefon , mail )

a t t r s = [ ’ sn ’ , ’givenName ’ , ’ department ’ , ’ physicalDeliveryOfficeName ’ , ’ telephoneNumber ’ ,

’ facsimileTelephoneNumber ’ , ’ mail ’ , ’wWWHomePage’ ]

29 ldapConnection = ldap . i n i t i a l i z e ( ’ ldap : / / ldap . fz−j u e l i c h . de ’ )

VII

Page 48: Erstellung einer mobilen Anwendung für das Intranet des ...juser.fz-juelich.de/record/837258/files/Bachelorarbeit_RobertElles.pdf · Zu den Xcode-Tools gehören unter anderem der

Anhang B: Suchanfragen zu Mitarbeiterdaten an den LDAP-Server mittels Python

ldapConnection . simple_bind_s ( )

searchResults = ldapConnection . search_s ( base_dn , ldap .SCOPE_SUBTREE, f i l t e r , a t t r s )

ldapConnection . unbind ( )

i f len ( searchResults ) > 4 and len ( searchResults ) < 50:

34 req . write ( ’<message>ok</message> ’ )

for tuple in searchResults [ 0 : −4 ] :

req . write ( ’<result > ’ )

for elem in tuple [ 1 ] :

req . write ( ’<%s>%s</%s> ’ % ( elem , tuple [ 1 ] [ elem ] [ 0 ] , elem ) )

39 req . write ( ’ </ result > ’ )

req . write ( ’ </ re s u l ts > ’ )

return

req . write ( ’<message>tooManyOrNoResults</message> ’ )

req . write ( ’<result ><telephoneNumber></telephoneNumber><wWWHomePage></wWWHomePage>

44 <physicalDeliveryOfficeName ></physicalDeliveryOfficeName ><facsimileTelephoneNumber>

</facsimileTelephoneNumber><sn></sn><department></department><mail ></mail><givenName>

</givenName></ result > ’ )

req . write ( ’<result ><telephoneNumber></telephoneNumber><wWWHomePage></wWWHomePage>

<physicalDeliveryOfficeName ></physicalDeliveryOfficeName ><facsimileTelephoneNumber>

49 </facsimileTelephoneNumber><sn></sn><department></department><mail ></mail><givenName>

</givenName></ result > ’ )

req . write ( ’ </ re s u lt s > ’ )

return

VIII