Bachelorarbeit. Portierung einer HTML5-Webanwendung zu einer Hybrid-App am Beispiel posty-soft

Größe: px
Ab Seite anzeigen:

Download "Bachelorarbeit. Portierung einer HTML5-Webanwendung zu einer Hybrid-App am Beispiel posty-soft"

Transkript

1 Bachelorarbeit Portierung einer HTML5-Webanwendung zu einer Hybrid-App am Beispiel posty-soft Vorgelegt im: Wintersemester 2014/2015 Vorgelegt von: Benjamin Heller Erstkorrektor: Prof. Dr. Martin Deubler Zweitkorrektor: Prof. Dr. Beneken

2 ERKLÄRUNG Ich versichere, dass ich diese Arbeit selbständig angefertigt, nicht anderweitig für Prüfungszwecke vorgelegt, keine anderen als die angegebenen Quellen oder Hilfsmittel benützt, sowie wörtliche und sinngemäße Zitate als solche gekennzeichnet habe. Rosenheim den, Benjamin Heller

3 Kurzfassung Die essentielle Rolle der Smartphones und Tablets in der heutigen Zeit fordert eine optimale Anpassung der mobilen Anwendungen an die aktuellen Gegebenheiten. Diese Entwicklung führt dazu, dass ein jeder immer und überall, mobil und flexibel auf dieses Angebot zugreifen möchte. Einrichtungen, Dienstleister und Firmen sind gezwungen dieser Forderung nachzugehen und ihre Produkte auf mobilen Plattformen anzubieten. Die Umsetzung in Form einer entsprechenden Portierung stellt sich jedoch zumeist als nicht trivial dar. Verschiedenste Endgeräte und deren Betriebssysteme (Android, WindowsPhone, ios, etc.) treiben den Entwicklungs-, Zeit- und Kostenaufwand drastisch in die Höhe. Cross-Plattform- Development ist das entscheidende Stichwort, welches diese Faktoren sinken lässt. Die vorliegende Arbeit beschäftigt sich mit dem Thema der Portierung einer bestehenden JavaScript-Webanwendung zu einer mobilen Applikation in Form einer Hybrid-App. Diese Arten von Anwendungen machen es möglich, die Vorteile nativer Applikationen, sowie Web- Applikationen zusammenzufassen und auf möglichst allen gängigen Systemen bedienbar zu machen. Ziel ist exakt diese Plattformunabhängigkeit. Ausgehend von den in diesem Rahmen wichtigsten Grundlagen, werden die gebräuchlichsten Methoden zur Entwicklung mobiler Applikationen beleuchtet. Die Anforderungen an das System werden bestmöglich in einem Designkonzept umgesetzt und bestehende Schnittstellen, sowie Komponenten optimal integriert. Zur Herstellung der Praxisnähe wird auf einzelne Implementierungsdetails und genauere Funktionalitäten der Portierungssoftware näher eingegangen. Anhand der gewonnenen Analyse und der Verwendung passender Frameworks, Extensions und eigens implementierter Module konnte ein Prototyp erstellt werden, mit dem sich die Handhabung der Webanwendung optimal auf mobile Geräte übertragen hat. Dieser Prototyp ist bereits auf Android (v ) getestet und kann problemlos mit geringem Aufwand auf andere Plattformen generiert werden. Schlagworte: posty-soft, JavaScript, CSS3, HTML5, AngularJS, Ionic, RestAngular, RequireJS I

4 Inhalt 1 Einleitung Motivation Open-Source Software posty-soft Webanwendung posty_webui Ziel der Arbeit Gliederung der Arbeit Grundlagen: Mobile Applikationen Native Apps Allgemeines Vor- und Nachteile Web-Apps Allgemeines Vor- und Nachteile Hybrid-Apps Allgemeines Vor- und Nachteile Vergleich der Methoden Technische Grundlagen Model-View-Controller Model-View-ViewModel AngularJS Ionic Cordova Restangular RequireJS Spezifikation Use-Cases Anforderungen Funktionale Anforderungen Nicht-Funktionale Anforderungen Technologieauswahl II

5 4.3.1 App-Typ Verwendete Frameworks Vorhandene Schnittstellen Konzeption Architektur Datenmodell Struktur der Anwendung UI-Konzept Home-Ansicht Seitenmenü Beispielszenario: Domains Implementierung Entwicklungsumgebung Struktur Gesamte Ordnerstruktur Resource-Dateien JavaScript-Dateien HTML-Dateien Hervorzuhebende Verfahren Routing View Controller Model Schlussworte Bewertung Ausblick Fazit Anhang Abkürzungsverzeichnis Abbildungsverzeichnis Tabellenverzeichnis Code-Listings-Verzeichnis Literaturverzeichnis III

6 IV

7 1 Einleitung 1.1 Motivation Mobile Anwendungen gewinnen immer mehr an Bedeutung und sind aus dem Alltag kaum mehr wegzudenken. Egal ob im Berufsleben, zu Hause oder unterwegs diese Arten von Anwendungen machen eine Bedienung von jederzeit und von überall möglich. Viele Einrichtungen und Firmen wollen demnach ihre Produkte auch auf mobilen Plattformen anbieten. Das freie Software-Werkzeug posty-soft stellt derzeit noch keine portable Applikation zur Verfügung und begründet somit den Einstieg in den mobilen Markt. In diesem Kapitel werden Grundlage, Umgebung, sowie Zielsetzung und Aufbau dieser Bachelorarbeit dargelegt. 1.2 Open-Source Software posty-soft posty-soft kurz posty ist eine Open-Source Softwarelösung und stellt eine Administrationslösung für Postfix-/Dovecot-Mailserver zur Verfügung. Durch das Zusammenspiel des posty-software-stacks bietet es große Flexibilität für eine - Konten-Verwaltung, unabhängig davon ob 10 oder Konten administriert werden müssen. posty deckt bereits einen Großteil der Features bekannter Postfix-Systeme ab. Es können Domains, Domain-Aliasse, -Adressen, -Aliasse, sowie deren Transports zur Weiterleitung an einen anderen Server verwaltet werden. Das Softwarepaket besteht aus drei Komponenten: Die posty_api, das Herzstück von posty, bietet eine REST 1 -basierte Schnittstelle zur nahtlosen Integration in bestehende Anwendungslandschaften an. Auf diese API 2 setzen die beiden Komponenten posty_client und posty_webui auf. Der posty_client bietet die Möglichkeit Mailserver mittels Kommandozeile zu administrieren. Die posty_webui ist die grafische Benutzeroberfläche in Form eines Webclients und wird im nächsten Abschnitt genauer beschrieben. 1.3 Webanwendung posty_webui [1] [2] Wie im vorherigen Punkt genannt, stellt die posty_webui ein einfaches und intuitiv bedienbares Webinterface zur Verwaltung von Mailservern dar. Dabei stehen alle Funktionalitäten der posty_api zur Verfügung. Der Webclient bietet für Systemadministratoren ohne Kommandozeilen-Kenntnisse ein ideales Werkzeug zur Verwaltung eines Mailservers. Entwickelt wurde die Anwendung im Jahr 2013 im Zuge eines Projektes im Studienfach Software Engineering 2 und wird durch die Open-Source- Community ständig weiterentwickelt. Im Zusammenhang mit dieser Arbeit ist sie auch der 1 REST (Representional State Transfer) repräsentiert ein Architekturmodell im World Wide Web und zeigt den fundamentalen Zusammenhang der Komponenten und Daten. [1] 2 Eine API (Application Programming Interface) ist eine Programmierschnittstelle der von einem Softwaresystem anderen Applikationen zur Anbindung an das System bereitgestellt wird. [2] 1

8 Ausgangspunkt für die Implementierung der mobilen Applikation posty_mobile, welche auf die Kernfunktionalität der Webanwendung aufsetzt. 1.4 Ziel der Arbeit Das Ziel von posty_mobile besteht darin, ein portables Administrationswerkzeug zur Verwaltung von Postfix-/Dovecot-Mailservern umzusetzen. Alle gängigen Funktionen der posty-clients (posty_cli und posty_webui) sollen somit auch auf mobilen Endgeräten bedienbar sein. Die Portierung erfolgt in Form einer Hybridapplikation. Im Rahmen dieser Bachelorarbeit soll ein lauffähiger Prototyp entstehen, der vorhandene Schnittstellen integriert und bestehende Komponenten wiederverwendet. Durch die Anwendung des hybriden Ansatzes soll die Möglichkeit bestehen den Prototypen auf möglichst alle gängigen, mobilen Systeme zu übertragen. Abschließend soll eine übersichtliche und einfache Bedienung, angelehnt an die posty_webui, gewährleistet werden. 1.5 Gliederung der Arbeit Strukturell und inhaltlich ist diese Arbeit zum Thema Portierung einer HTML5- Webanwendung zu einer Hybrid-App am Beispiel posty-soft nach folgendem Konzept aufgebaut: In diesem Kapitel wurden bereits die Problemstellung, das Umfeld und die Ziele dieser Arbeit vorgestellt. Abschnitt 2 Grundlagen: Mobile Applikationen stellt die gängigsten Methoden der mobilen Softwareentwicklung gegenüber und bewertet diese. Abschnitt 3 Technische Grundlagen gibt einen Überblick über die wichtigsten Begrifflichkeiten, sowie eingesetzte Technologien, Programmiersprachen und Frameworks. Abschnitt 4 Spezifikation beschreibt die Analyse der Anforderungen, die an das System gestellt werden. Darauffolgend wird die ausgewählte Technologie vorgestellt. Der ausgewählte App-Typ wird begründet und das Zusammenspiel der verwendeten Frameworks und Schnittstellen näher erläutert. Abschnitt 5 Konzeption stellt das Interface- und Designkonzept der Software dar. Die wesentlichen Funktionen und das Aussehen des Prototyps werden spezifiziert dargestellt, sowie beispielhafte Abläufe für die Nutzung der Software beschrieben. Abschnitt 6 Implementierung beschreibt, aufbauend auf den in der Konzeption beschriebenen Entwürfen, die eigentliche Programmierung der Applikation. Benötigte Klassen, Datenmodelle und Ansichten werden ausführlich erläutert. Abschnitt 7 Schlussworte zieht abschließend ein Fazit über den Verlauf und Abschluss der Arbeit. Ein kurzer Ausblick auf mögliche Erweiterungen, sowie Verbesserungsmöglichkeiten werden vorgestellt. 2

9 2 Grundlagen: Mobile Applikationen Dieses Kapitel stellt die aktuellen Methoden zur Entwicklung einer mobilen Anwendung vor und untersucht diese. Abschließend sollen die einzelnen Möglichkeiten miteinander verglichen werden. 2.1 Native Apps [3] Die "echten" Apps mit Vollzugriff [3] Abbildung 2-1: Aufbau Native Apps Allgemeines Native Apps sind Anwendungen, die auf einem Gerät installiert sind und direkt auf Betriebssystem-Ebene fungieren. Dadurch, dass die Anwendung über dem Plattform-Layer sitzt, kann auf alle APIs und Gerätefeatures, die ein mobiles System und dessen Hardware anzubieten hat, zugegriffen werden. Die Verwendung eingebauter Sensoren, wie zum Beispiel GPS oder Kamera, werden dem Entwickler mit dieser API leicht gemacht. Die Programmierung erfolgt in der von der Plattform vorgegebenen Sprache und die Distribution der App erfolgt meist über eine zentrale Stelle (z. B. Apple AppStore, Google Market). [4] Vor- und Nachteile Das native Modell ist von Vorteil, wenn bei der Kommunikation Module wie GPS, die Kamera oder das Mikrofon für Funktionen einer mobilen Applikation genutzt werden. Dieser direkte Zugriff auf die Hardware der Endgeräte wirkt sich positiv auf die Nutzerfreundlichkeit der nativen Apps aus, die zudem auch offline funktionieren. Des Weiteren ist die native Lösung hinsichtlich der Performance nicht zu übertreffen. Auf der anderen Seite steht jedoch der erhebliche Nachteil, dass der für eine Plattform geschriebene Code fast unmöglich auf eine andere Plattform portiert werden kann. Wer auf mehreren Endgeräten mit verschiedenen Betriebssystemen präsent sein möchte, muss an erhebliche Mehrkosten denken, da pro Plattform eine eigenständige App gefordert ist. 3

10 Selbiges gilt für den Testaufwand: Tests sind somit für jede einzelne Plattform zu implementiert. 2.2 Web-Apps Die Website im App-Gewand [3] Abbildung 2-2: Aufbau Web-Apps Allgemeines Web-Apps sind mobile Internetanwendung, die basierend auf modernen Web-Technologien wie HTML5, CSS3 und JavaScript entwickelt werden. Mit diesen Technologien ist es nicht nur möglich Seiten zu beschreiben, sondern richtige Software-Applikationen zu entwickeln, die im Webbrowser ausführbar sind. Einbettung von Animationen, Ortsfunktionen, Videos sowie Sounds und weitere Möglichkeiten steigern die Plattform-Integration enorm. Auch im Vergleich zur herkömmlichen Web-Entwicklung, die auf Desktopebene stattfindet, gibt es auf mobiler Ebene einen weiteren entscheidenden Vorteil: In der Desktop-Welt sind einem Entwickler die verschiedenen Engines der Browser bekannt, was einen einheitlichen, browserübergreifenden Funktions- und Gestaltungsumfang erschwert. Auf der mobilen Seite sieht das anders aus: Alle dort verbreiteten Browser setzen derzeit auf der Browser-Engine WebKit 3 auf, die sich zu einer Art Standard entwickelt hat. Plattformübergreifende, mobile Entwicklung wird dadurch deutlich erleichtert. [5] Vor- und Nachteile [6] Die günstige Entwicklung, die der große Vorteil der Web-Apps ist, geht einher mit dem Updatemechanismus. Diese werden, wie bei Webentwicklern verbreitet, einfach auf den Webserver gespielt und sind ab diesem Zeitpunkt für jeden Anwender verfügbar. Diese Punkte fördern eine hohe Aktualität und Pflegbarkeit. Die Optik kommt, durch den neuen Web-Standard, mit einer Vielzahl an Funktionen und Styles einer nativen App sehr nahe. 3 WebKit ist eine freie Rendering Engine, die es ermöglicht Webseiten in Webbrowsern darzustellen. [6] 4

11 Manche Web-Apps gehen sogar so weit, dass sie optisch und bei der Bedienung kaum mehr zu unterscheiden sind. All diese Vorteile haben dennoch ihren Preis: Jede Web-App, ist sie noch so gut getarnt, läuft immer im Rahmen einer fremden nativen App - dem Webbrowser. Aus diesem Korsett heraus gibt es nur eingeschränkten Zugriff auf APIs: Viele Funktionen der Hardware sind nur teilweise, langsamer oder überhaupt nicht implementiert. 2.3 Hybrid-Apps [3] Das Beste aus zwei Welten [3] Abbildung 2-3: Aufbau Hybrid-Apps Allgemeines Der hybride Ansatz stützt sich, wie die Web-Apps, auf die gängigen Methoden der Web- Technologien und ermöglicht die Entwicklung plattformunabhängiger Apps, die für den Anwender nicht von der nativen Variante zu unterscheiden sind. Vereinfacht bietet ein Hybrid-Framework einen Container für eine Web-App, wobei bestimmte plattformspezifische Funktionen für den Entwickler bereitgestellt werden. Im Gegensatz zu den Web-Apps ermöglicht dies beispielsweise den Zugriff auf die Kontakte, sowie das Auslösen einer Vibration des Endgeräts. Ein, in die Anwendung eingebetteter Browser - ein sogenannter WebView, übernimmt die Darstellung der Applikation. Abschließend werden diese zu nativen Paketen kompiliert und können über die Verkaufsportale der Betriebssystemhersteller verteilt werden. [7], [8] Vor- und Nachteile Die Vorteile der Web-Apps können im Allgemeinen auch auf die Hybrid-Apps projiziert werden. Optik, Plattformunabhängigkeit und Updateszenario verhalten sich hier ähnlich. Gleichzeitig haben sie Zugriff auf Hard- und Softwarekomponenten der mobilen Endgeräte und bieten Zugang zu den nativen Märkten. 5

12 Ähnlich wie bei Java-Applikationen in der Desktop-Umgebung kann der Nachteil der Hybriden Applikationen in der Performance gesucht werden. Die Plattformnähe, welche beispielsweise durch die nativen Apps gegeben ist, kann leider nicht ganz erzielt werden, da die Apps immer mit der Zwischenschicht des Browsers agieren. 2.4 Vergleich der Methoden Abbildung 2-4: Vergleich der drei Methoden Die Entscheidung über eine gute, langfristig tragfähige Entwicklungstechnik für mobile Anwendungen ist in der Regel nicht einfach zu treffen. Eine Vielzahl teilweise miteinander konkurrierender Faktoren beeinflusst die Auswahl erheblich und die naheliegende Wahl ist nicht immer die beste. Vor allem gilt es verstärkt betriebswirtschaftliche Faktoren in die Entscheidungsfindung miteinzubeziehen. Die nachfolgende Tabelle (vgl. Tabelle 2-1) soll die größten Unterschiede unter Betrachtung verschiedener Gesichtspunkte aufzeigen: App Typ Vorteile Nachteile Native Apps Zugriff auf Sensorik nicht plattformunabhängig Vertrieb über App-Store höchst mögliche Performance Web-Apps plattformunabhängig unabhängig vom App-Store (eigener Updatemechanismus) dauerhafte Online-Verbindung erforderlich Performanceeinbußen wenig Zugriff auf Hard- und Softwareschnittstellen des Hybrid-Apps plattformunabhängig Zugriff auf Sensorik Vertrieb über App-Store Tabelle 2-1: Vor- und Nachteile der Arten mobiler Entwicklung, Quellen ( [9], [3]) Hostsystems Performanceeinbußen 6

13 3 Technische Grundlagen Für ein besseres Verständnis aller folgenden Abläufe und Beschreibungen wird in diesem Kapitel erläutert, welche Techniken und Muster bei der Ausarbeitung dieser Arbeit zum Einsatz kamen. Die einzelnen Erläuterungen sollen einen Überblick vermitteln und stellen keine vollständige Erklärung aller technischen Details dar. 3.1 Model-View-Controller Wichtige Aspekte der Programmierung GUI 4 -basierender Programme sind Flexibilität und Wiederverwendbarkeit. Das Programmierparadigma Model-View-Controller (kurz MVC) bietet in diesem Fall einen optimalen Strukturierungsentwurf, der eine klare Trennung der Softwareschichten des Datenmodells (= Model), der Präsentation (= View) und der Programmsteuerung (= Controller) vorschreibt. Das Model implementiert die reine Logik zur Datenhaltung beziehungsweise -veränderung. Die View ist die visuelle Abbildung der benötigten Daten des Models. Der Controller repräsentiert das direkte Steuerungsorgan zwischen visueller Darstellung und Programmlogik. [10] 3.2 Model-View-ViewModel Model-View-ViewModel (MVVM) ist eine spezielle Variante des MVC-Musters und wird in dem im nächsten Punkt beschriebenen JavaScript-Framework AngularJS (vgl. 3.3) verwendet. Es nutzt die funktionale Trennung und Datenbindung des MVCs, um eine lose Kopplung zu erreichen. Um den Zustand und das Verhalten der View auszulagern, wird ein separates UI- Model (bzw. ViewModel) eingeführt, das als Bindeglied zwischen View und Model fungiert. [11] 3.3 AngularJS AngularJS ist ein von Google entwickeltes JavaScript Open-Source-Framework. Es wurde mit dem Ziel entworfen HTML leistungsfähiger für Webanwendungen zu machen. Mit AngularJS wird HTML dynamischer und kann in begrenztem Umfang direkt auf Benutzereingaben reagieren. Durch die Realisierung der posty_webui mit AngularJS ist der Leitfaden für die Entwicklung der mobilen Applikation posty_mobile bereits gegeben ist. [12] 3.4 Ionic [13] Ionic ist ein Open Source Frontend-Framework zur Erstellung mobiler Web-Apps auf der Basis von HTML5, JavaScript und CSS3. Ionic nutzt AngularJS, um die Struktur der erstellten App vorzugeben und fokussiert dabei das Look & Feel, sowie die User Experience (UX). Zusätzlich legt es Wert auf Performance, was dazu führt, dass es lediglich auf neuen Geräten (Software-Version ab ios6 und Android 4.1) schnell läuft. Weiterhin nutzt Ionic Cordova (vgl 3.5), um die Apps zu erzeugen und zu testen. [14] 4 Das GUI (Graphical User Interface) bezeichnet eine grafische Benutzerschnittstelle, welche die Steuerung eines Computers mithilfe eines Zeigergerätes oder durch Fingerbewegung direkt auf einem Touchscreen ermöglicht. [13] 7

14 3.5 Cordova Cordova ermöglicht es, anstelle von gerätespezifischen Programmiersprachen wie Objective- C oder Java, Anwendungssoftware für mobile Endgeräte mit JavaScript, HTML5 und CSS3 zu schreiben. Die dabei resultierenden Applikationen sind hybrid (vgl. 2.3) und können die APIs der Geräte direkt ansprechen. [15] 3.6 Restangular Restangular ist ein spezielles Softwaremodul für AngularJS um auf RESTful APIs zuzugreifen. Es vereinfacht die gängigen GET-, POST-, PUT- und DELETE-HTTP 5 -Requests auf ein Minimum von Client-Code. [16] 3.7 RequireJS RequireJS ist eine freie Software-Implementierung zur Schaffung asynchroner Moduldefinitionen in der Programmiersprache JavaScript. Es dient dazu die einzelnen Quelldateien nicht beim Öffnen einer Webseite, sondern erst bei deren Verwendung nachzuladen, was der Performance der Website erheblich zu Gute kommt. [17], [18] Es ist eine ungültige Quelle angegeben. 5 Das Hypertext Transfer Protocol (kurz HTTP) ist ein weit verbreitetes, offenes Protokoll zur Datenübertragung im Netzwerk. [18] 8

15 4 Spezifikation Nachdem bereits ein Überblick über mobile und technische Grundlagen gegeben wurde, beschäftigt sich dieses Kapitel mit der genaueren Spezifikation des zu entwickelnden Systems. 4.1 Use-Cases In folgender Abbildung (vgl. Abbildung 4-1) werden die Use-Cases vorgestellt, aus denen sich die Anwendungsfunktionen ableiten. Die genaueren Beschreibungen der einzelnen Anwendungsfälle lassen sich aus der Tabelle 4-1 der Funktionale Anforderungen entnehmen. Abbildung 4-1: Use-Cases 4.2 Anforderungen Wie bei jedem neu zu entwickelnden System in der Informatik stellt eine Anforderungsanalyse die wichtigste Grundlage zur Konstruktion dar. Die folgenden Abschnitte (vgl , 4.2.2) beschreiben die von einem System erwarteten Dienste, als auch die Gegebenheiten unter welchen entwickelt wird Funktionale Anforderungen In diesem Kapitel werden alle Funktionalen Anforderungen, die für die Entwicklung der mobilen Applikation wichtig sind, genauer erläutert und spezifiziert (vgl. Tabelle 4-1). 9

16 ID Titel Kurzbeschreibung FR_1 FR_2 API wechseln API Authentifizierung anlegen API verwalten Es soll möglich sein zwischen einzelnen APIs zu wechseln. Es soll möglich sein neue API-Keys und URLs anzulegen, um sich gegen eine gegebene API zu authentifizieren. Domains verwalten FR_3 Domains anlegen Es soll möglich sein einzelne Domains mit dem Attribut Domain-Name anzulegen. FR_4 Domains bearbeiten Es soll möglich sein vorhandene Domains zu bearbeiten. Der Domain-Name kann geändert werden. FR_5 Domains löschen Es soll möglich sein einzelne Domains zu löschen. FR_6 Domain-Aliasse anlegen Es soll möglich sein einer vorhandenen Domain Aliasse hinzuzufügen. FR_7 Domain-Aliasse löschen Es soll möglich sein vorhandene Domain-Aliasse zu löschen User verwalten FR_8 User anlegen Es soll möglich sein einer vorhandenen Domain User hinzuzufügen. Attribute wie Name, Passwort und Quota (Anteil an Serverspeicherplatz) sollen angelegt werden. Es soll möglich sein vorhandene User zu FR_9 User bearbeiten bearbeiten. Name, sowie Passwort und Quota müssen geändert werden können. FR_10 User löschen Es soll möglich sein einzelne User zu löschen. FR_11 User-Aliasse anlegen Es soll möglich sein einem vorhandenen User Aliasse hinzuzufügen. FR_12 User-Aliasse löschen Es soll möglich sein vorhandene User-Aliasse zu löschen. FR_14 FR_15 FR_16 FR_17 Transports anlegen Transports bearbeiten Transports löschen Summary Transports verwalten Es soll möglich sein einzelne Transports mit den Attributen Transport-Name und Destination anzulegen. Es soll möglich sein vorhandene Transports zu bearbeiten. Name, sowie Destination müssen geändert werden können. Es soll möglich sein einzelne Transports zu löschen. Summary ausgeben Es soll möglich sein die Anzahl der Domains, User und deren jeweilige Aliasse in einem Diagramm darzustellen. API-Keys verwalten FR_18 API-Keys anlegen Es soll möglich sein einzelne API-Keys anzulegen. FR_19 API-Keys bearbeiten Es soll möglich sein, vorhandene API-Keys zu 10

17 bearbeiten. Der jeweilige Key kann deaktiviert und das Ablaufdatum kann neu gesetzt werden. FR_20 API-Keys löschen Es soll möglich sein einzelne API-Keys zu löschen. Tabelle 4-1: Funktionale Anforderungen Nicht-Funktionale Anforderungen Die ISO-Norm ISO/IEC 9126 bereitet verschiedene Qualitätsmerkmale als Nicht-Funktionale Anforderungen auf. Die vorliegende Tabelle (vgl. Tabelle 4-2) erläutert die für diese Arbeit relevanten Merkmale und weist auf den genaueren Bezug zur Anwendung hin. ID NFR_1 NFR_2 NFR_3 NFR_4 NFR_5 NFR_6 NFR_7 Qualitätsmerkmal Interoperabilität Sicherheit Bedienbarkeit Verständlichkeit Fortsetzbarkeit Wartbarkeit / Änderbarkeit / Erweiterbarkeit Übertragbarkeit Kurzbeschreibung Fähigkeit mit bereits vorhandenen Systemen zusammenzuwirken Fähigkeit unberechtigten Zugriff zu verhindern Aufwand für den Anwender die Anwendung zu bedienen Aufwand für den Anwender das Konzept der Anwendung zu verstehen Fähigkeit der Erleichterung des Wiedereinstieges nach Unterbrechung Aufwand zur Durchführung von Korrekturen, Änderungen, Erweiterungen von Anforderungen und der funktionalen Spezifikation Fähigkeit die Software in eine andere Bezug zur Anwendung posty_mobile muss mit der vorhanden posty_api kommunizieren und deren Daten erhalten. Komponenten der posty_webui sollen weitgehend in die mobile Version integriert werden. Die Applikation kann nur mit einer zuverlässigen Authentifizierung in Form eines Authentifizierungs- Tokens funktionieren. Das Userinterface der Anwendung soll an die mobilen Anforderungen angepasst werden. Dazu gehören: Einfachheit, schnelle Navigation zum Ziel, haptische Interaktion, entsprechende Größe der Elemente und flüssige User-Experience. Die Informationen müssen für den Benutzer leicht verständlich zugänglich gemacht werden. Die Nutzung bekannter Designelemente im mobilen Bereich ist vorzuziehen. Dem Nutzer sollte nach einer Unterbrechung der Wiedereinstieg erleichtert werden. Nach Wiederaufnahme sollte er sich nicht wieder einloggen müssen. Änderungen oder Erweiterungen der Applikation dürfen die bisherige Funktionsweise nicht beeinträchtigen. Die Plattformunabhängigkeit unter den verschiedenen Herstellern ist 11

18 NFR_8 Funktionalität Umgebung zu übertragen Tabelle 4-2: Nicht-Funktionale Anforderungen Einhaltung der geforderten Funktionen von wesentlicher Bedeutung. Eine einfache Portierung zu den verschiedenen Endgeräten soll unterstützt werden. Alle Kriterien der Funktionalen Anforderungen (vgl. Tabelle 4-1), müssen in der Endanwendung enthalten sein. 4.3 Technologieauswahl Dieses Unterkapitel stellt den ausgewählten App-Typen mit den eingesetzten Frameworks und Tools vor. Zugleich wird auf bereits vorhandene Komponenten und Schnittstellen eingegangen App-Typ Die Forderungen an die App sind so klar definiert, dass die Art der Implementierung daraus resultiert: Die App soll grundlegende Funktionalitäten der posty_webui übernehmen. Auch eine Verwendung des bisherigen Programmiercodes ist möglich. Daher bietet sich eine Realisierung als Web-App an. Des Weiteren soll es möglich sein diese, auch über die plattformspezifischen Marktplätze, anzubieten. Dies spricht zusätzlich für eine Hybrid-App. Um der Anforderung nach einer gemeinsamen Code-Base nachzugehen, muss die App auf dem Quelltext der Web-App basieren und diese in einem nativen Container bereitstellen Verwendete Frameworks Um auf Komponenten der bisherigen Webimplementierung aufzusetzen und eine Wiederverwendbarkeit zu erhöhen, wird das Web-Application-Framework Ionic eingesetzt. Es basiert auf AngularJS, das in der posty_webui eingesetzte HTML-/JavaScript-Framework, welches die Struktur der einzelnen Komponenten vorgibt. Ionic stellt, neben zahlreichen vorgefertigten CSS-Layout-Komponenten, vor allem auch JavaScript-basierte Komponenten bereit, die das Erstellen und Konfigurieren eines klassischen Mobile-App-Interfaces vereinfachen. Für den Datenabgleich mit der gegebenen API steht das AngularJS-basierende REST-Softwaremodul Restangular zur Verfügung. Das abschließende Packaging der fertigen App zur Verbreitung auf den plattformspezifischen Marktplätzen übernimmt das Hybridframework Cordova. 12

19 4.3.3 Vorhandene Schnittstellen Das bisherige Web-Front-End posty_webui und das Kommandozeileninterface posty_cli setzen auf die RESTful-API des posty-software-stacks auf. Diese API lässt sich (ohne Anpassungen) auch für die mobile Version nutzen. Sämtliche Anfragen werden via HTTP an eine bestimmte URL gesendet (z.b. Die gesamte API- Schnittstellen-Beschreibung geht aus dem Anhang (vgl. Anhang 1) hervor. 13

20 5 Konzeption Die aus der Spezifikation gewonnenen Daten werden nun zu einem Konzept ausgearbeitet. Sämtliche in diesem Abschnitt befindlichen Abbildungen stellen Designvorschläge für die spätere Entwicklung dar. 5.1 Architektur In folgendem vereinfachten Komponentendiagramm (vgl. Abbildung 5-1) ist eine Aufteilung der einzelnen Komponenten des posty-software-stacks, die für das Zusammenspiel des Datenhandlings verantwortlich sind, illustriert. Neue Komponenten werden mit der Farbe Grün hervorgehoben. Der Vollständigkeit halber wurde das Kommandozeileninterface posty_cli in die Illustration mit aufgenommen (ausgegraut, da es nicht direkt mit der mobilen Applikation in Verbindung steht). Abbildung 5-1: Komponentendiagramm posty-software-stack 14

21 Durch die klare Strukturierung ist eine hohe Skalierbarkeit und Flexibilität gegeben. Der Aufbau sieht vor, dass auf dem zu verwaltenden Mailserver ausschließlich die posty_api installiert werden muss. Die CLI, webui und die neue mobile Version können auf einem beliebigen anderen Client betrieben werden. Um duplizierten Code zu vermeiden, wurde die Zwischenschicht posty_webmodel eingeführt. Sie repräsentiert die JavaScript API, die in der jeweiligen webui oder Mobile App eingebunden wird. Alle Operationen werden hier auf simplen JavaScript-Objekten aufgerufen, wobei die API wiederum eine REST-Schnittstelle liefert, die mit JSON 6 Dateien arbeitet. 5.2 Datenmodell [19] Das vereinfachte Klassendiagramm (vgl. Abbildung 5-2) veranschaulicht die Beziehungen zwischen den einzelnen Klassen und gibt einen allgemeinen Überblick über das Datenmodell der Anwendung. Abbildung 5-2: Klassendiagramm App 6 JSON-Dokumente dienen zum Datenaustausch zwischen Anwendungen in einem sowohl für Menschen, als auch Maschinen leicht lesbaren Format [19] 15

22 Jede, der in Abbildung 5-2 dargestellten Klassen, erhält eine Identifikationsnummer. Diese wird bei Such- und Filterungsoperationen, als auch für Kommunikation mit der API verwendet um den jeweiligen Datensatz eindeutig zu bestimmen. Die Eigenschaften createdat und updatedat geben in der jeweiligen Klasse Auskunft über das Erstellungsbzw. das Änderungsdatum. Die Klasse Domain mit dem eindeutigen Attribut name ist ein zusammenhängender Teilbereich des Domain Name Systems (DNS) und wird auf serverebene zur Zuweisung der einzelnen Postfächer verwendet. Einer Domain können mehrere Domain-Aliasse zugewiesen werden. Ein Alias ist in diesem Fall nichts anderes als ein zusätzlich erfasster Domainname. Beispielsweise nutzen Einzelhandelsunternehmen unterschiedliche Domains für zwei verschiedene Produktgruppen und möchten, dass seine Angestellten s versenden können, unabhängig davon, welche Domain die -Adressen aufweisen. Des Weiteren können einer Domain mehrere User zugeordnet werden. Ein User besitzt einen eindeutigen Namen name, ein Passwort password und einen maximalen Anteil an Server- Speicher in MegaByte quota. Ähnlich wie bei den Domains, können Usern auch mehrere Aliasse hinzugefügt werden. Hierbei handelt es sich ebenfalls um einen zusätzlich erfassten Namen des jeweiligen Users. Zur Erfassung der API Schlüssel steht die Klasse APIKey zur Verfügung. Sie speichert den jeweiligen Zugriffshashwert accesstoken und das Ablaufdatum expiresat. Zur Aktivierung bzw. Deaktivierung steht das Feld active zur Verfügung. In der Klasse Transport wird der Umschlag des Domainnamens name auf die bestimmte IP- Adresse gespeichert. Zwischen Transport und Domain wurde explizit eine schwache Bindung gewählt, da es auch möglich sein soll nicht erfasste Domains einzutragen. Zur Übersicht und Ausgabe eines Diagramms über die Anzahl an Domains, Usern und deren Aliasse wurde die Klasse Summary angelegt. Ein eindeutiger Name name, Anzeigename name und der prozentuale Wert value geben Auskunft über die jeweiligen Daten. Die Klasse Server ermöglicht es schließlich zwischen mehreren API-Servern zu wechseln. Die URL url, der jeweilige API-Key key und der Anzeigename caption gehören zu den Eigenschaften eines Servers. 16

23 5.3 Struktur der Anwendung [20] Durch die in der Anforderungsanalyse charakterisierten Kriterien ergibt sich folgende Struktur der mobilen Applikation: Abbildung 5-3: Aktivitätsdiagramm App Das in Abbildung 5-3 abgebildete, vereinfachte Aktivitätsdiagramm soll lediglich eine Verständnisbasis für den Aufbau der Applikation liefern. Bei Programmstart ist es notwendig sich gegen eine gewünschte API zu authentifizieren. Ist diese erfolgreich, wird der Benutzer automatisch zur Home-Ansicht weitergeleitet. Der Home-Bereich ist der zentrale Navigationspunkt der Anwendung und kann von jeder Ansicht wieder erreicht werden. Außerdem ist es möglich zu den einzelnen Stammdaten-Anzeigen (Domain, User, Transport, Summary und API-Key) zu navigieren. Der genauere Aufbau der einzelnen Stammdaten-Views wird im nächsten Abschnitt (vgl ) anhand eines Beispiels in Form von Mock-Ups 7 genauer beschrieben. Ein ebenfalls von jeder Ansicht aus 7 Mock-Ups sind skizzenähnliche Beschreibungen der Benutzeroberfläche. [20] 17

24 erreichbarer Menüpunkt ist das Seitenmenü. Dieses bietet die Möglichkeit der Navigation zu den Settings, sowie der API- bzw. About-Ansicht. In den Settings lassen sich allgemeine Applikationseinstellungen treffen. Um die API zu wechseln, oder sich bei einer weiteren zu authentifizieren, steht die API-Ansicht zur Verfügung. Schlussendlich kann sich der Anwender Informationen zur Applikation (zum Beispiel Versionsnummer, Entwickler, etc.) im Dialog About-Ansicht anzeigen lassen. 5.4 UI-Konzept In den nachfolgenden Punkten wird die grundlegende Funktionsweise der Applikation anhand von Mock-Up-Abbildungen beschrieben, um einen Einblick auf das Design des User Interfaces zu bekommen. Abbildung 5-4: Entwurf Benutzeroberfläche Die vorliegende Abbildung (vgl. Abbildung 5-4) zeigt den Standard-Entwurf der Benutzeroberfläche. Hier und in allen weiteren Views wird deutlich, dass das User-Interface aus drei Teilen besteht: Der Header enthält die Basis-Funktionen zu jeder View. Je nach Art der Anzeige ändert sich dieser (Base- /Listview- /Search-Header). Er bietet Zugang zum Seitenmenü, in dem grundlegende Einstellungen getroffen werden können und ermöglicht zu jederzeit die Navigation zur Home-Ansicht. In Ansichten mit einer Liste ist es möglich neue Datensätze hinzuzufügen und nach bestimmten Mustern zu suchen. Der Content gibt die für den Nutzer jeweils wichtigen Informationen aus. Diese View ändert sich mit jeder Navigation. Der Footer zeigt zur Abrundung des Designs das Pimp my Postfix -Logo. 18

25 Die folgenden Gliederungspunkte sollen einen Überblick der einzelnen Views geben. Eine Gegenüberstellung mit den entsprechenden Browseransichten der posty_webui soll die Portierung der Applikation veranschaulichen Home-Ansicht Abbildung 5-5: Home-View Der zentrale Navigationsbereich der mobilen Applikation ist die Home-View (vgl. Abbildung 5-5). Diese lässt sich jeder Zeit per Touch auf das posty-logo oder über das Seitenmenü erreichen. Von hier aus ist es einerseits möglich mailserverbezogene Daten zu verwalten. Domains, User und Transports können angelegt, bearbeitet oder gelöscht werden. Andererseits können serverbezogene Daten administrieren werden. Der Menüpunkt Summary gibt eine kurze Statistik über die Domains, User und deren Aliasse. Über die Schaltfläche API-Key navigiert der Benutzer zur Verwaltung der API Schlüssel. 19

26 5.4.2 Seitenmenü Abbildung 5-6: Seitenmenü-View Abbildung 5-6 zeigt das Seitenmenü der Applikation. Von dort aus besteht die Möglichkeit von jeder Seite aus zurück zur Home-View zu navigieren. Allgemeine Applikationseinstellungen (Settings), sowie das Wechseln der aktuell ausgewählten API lassen sich so erreichen. Informationen zur Applikation und zu posty lassen sich durch Berührung der About-Schaltfläche anzeigen. 20

27 5.4.3 Beispielszenario: Domains Die nachfolgenden Abschnitte zeigen die Portierung der domainbezogenen Daten der posty_webui zur mobilen Applikation. Die aufgeführten Punkte beschreiben die Standardverwendung der Applikation. Jeder Menüpunkt der Stammdaten (Domains, User, Transports und API-Key) besitzt eine analoge Funktionsweise zur Auflistung, Suche, Erzeugung, Bearbeitung und Löschung von Datensätzen. Das genauere Zusammenspiel der einzelnen Ansichten ist im Anhang 2 ersichtlich Domains auflisten Abbildung 5-7: Domain-List-View Der Menüpunkt Domains (vgl. Abbildung 5-7) listet alle vorhandenen Domains der Applikation nach Namen auf. Identisch zur posty_webui kann der Benutzer neue Domains anlegen, vorhandene bearbeiten und diese auch löschen. Eine weitere Funktion ist die Filterung nach bestimmten Domains (vgl ). 21

28 Domains filtern Abbildung 5-8: Domain-Filter-View Mit Hilfe der Such-Schaltfläche der Header-Bar (vgl. Abbildung 5-8) lassen sich bestimmte Domains nach Namen filtern. Diese werden in der Liste des Content-Bereiches entsprechend angezeigt Domains anlegen Abbildung 5-9: Domain-Create-View Bei Berühren der Plusschaltfläche des Headers im Menüpunkt Domains (vgl. Abbildung 5-7) ist es nun möglich neue Domains anzulegen (vgl. Abbildung 5-9). Anders als bei der posty_webui lassen sich zugehörige Aliasse hier bereits bei der Erzeugung der Domains hinzufügen. Es muss jedoch ein gültiger Domainname eingetragen werden. 22

29 Domains editieren Abbildung 5-10: Domain-Edit-View Nach der Auswahl einer bestimmten Domain kann diese editiert werden (vgl. Abbildung 5-10). Es ist möglich den Namen anzupassen, sowie einzelne Aliasse hinzuzufügen oder zu löschen Domains löschen Abbildung 5-11: Domain-Delete-View Falls bestimmte Domains nicht mehr benötigt werden, können diese durch Berühren des Trash-Symbols im Menüpunkt Domains (vgl. Abbildung 5-7) komfortabel gelöscht werden. Diese Aktion muss jedoch, analog zur posty_webui, mit Hilfe eines Modal-Dialoges bestätigt werden (vgl. Abbildung 5-11). 23

30 6 Implementierung Die folgenden Abschnitte behandeln die praktische Umsetzung der posty_mobile Applikation. Dabei werden die Voraussetzungen für die Entwicklung auf verschiedenen Plattformen erläutert, das Designkonzept vorgestellt und Beispiele für die konkrete Umsetzung einzelner Komponenten dargelegt. Aufgrund des Umfangs der Applikation kann nicht auf alle Einzelheiten der Programmierung eingegangen werden. Die Beispiele und Visualisierungen verschaffen jedoch einen allgemeinen Überblick über die Funktionen, Komponenten und Module der Applikation. 6.1 Entwicklungsumgebung Zur Erstellung und Bearbeitung der Datenmodelle, sowie der HTML-Templates wurde die Entwicklungsumgebung IntelliJ IDEA verwendet. Um einen lokalen Webserver zu realisieren wurde auf die JavaScript-Laufzeitumgebung NodeJS zurückgegriffen. Damit die Applikation nicht bei jeder Änderung neu erzeugt werden musste und um Änderungen schnell zu visualisieren, schaffte der Ripple Emulator des Chrome Browsers Abhilfe. Die verwendete posty_api (http://posty-api-development.herokuapp.com/api/v1) lieferte die nötigen Testdaten. 24

31 6.2 Struktur Dieser Gliederungspunkt beschreibt die Strukturierung der Module und Packages der Applikation. Daraus resultiert ein allgemeiner Überblick über den Aufbau der wichtigsten Komponenten Gesamte Ordnerstruktur Abbildung 6-1: Ordnerstruktur gesamt Das Schaubild (vgl. Abbildung 6-1) zeigt die gesamte Ordnerstruktur der Anwendung. Die Komponenten lassen sich wie folgt gliedern: Im Ordner hooks befinden sich Skripte, die in Zusammenhang mit Cordova-Events ausgelöst werden. So werden beispielsweise before_compile, after_compile oder before_run, after_run, wie im jeweiligen Namen ersichtlich, vor beziehungsweise nach der Kompilierung und Ausführung gestartet. Der Ordner merges enthält Dateien, die sich von der jeweiligen Plattform unterscheiden. Weiterhin können auch Dateien hinzugefügt werden. Beispielsweise lässt sich hier eine CSS- Datei einbinden, welche die Schriftgröße der Android Applikation ändert. Folgendes wurde angepasst: Hinzufügen eines Links auf die dementsprechende CSS-Datei in der index.html: <link rel="stylesheet" type="text/css" href="css/overrides.css" /> 25

32 Hinzufügen des Unterordners merges/android/css mit der Datei override.css, welche folgendes beinhaltet: body { font-size:14px; } Somit beträgt bei Neuerzeugung der Android Applikation die Schriftgröße 14 Pixel. Plattformen, die durch Cordova hinzugefügt wurden, werden im Ordner plattforms gespeichert und können mit folgendem Kommando hinzugefügt werden: cordova platform add <<plattformname>> Bereits in Abbildung 6-1 zu sehen, sind die Plattformen Android, ios und Windows- Phone beigefügt. Um Erweiterungen hinzuzufügen, steht der Ordner plugins zur Verfügung. Folgendes Kommando fügt zum Beispiel die Splashscreen-Erweiterung hinzu, was das Anzeigen und Verbergen des Begrüßungsbildschirmes ermöglicht: cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-pluginsplashscreen.git Der Ordner www beinhaltet die Webseite der Applikation. Er unterteilt sich wie folgt: Die für die Applikation notwendigen JavaScript-Bibliotheken befinden sich im Ordner components. RequireJS, Ionic, AngularJS, das posty_webmodel-package und Weitere sind hier gespeichert. Das Stylesheet der Applikation befindet sich im Ordner css mit der einzigen CSS-Datei app.css. Die Ordner res, js und templates werden nachfolgendend (vgl , 6.2.3, 6.2.4) genauer beschrieben. Die config.xml Datei steht zur Verfügung um Anpassungen an den Features und Plugins der Cordova API zu treffen. Des Weiteren können auch plattformspezifische Einstellungen getroffen werden. Das nachfolgende Codelisting (vgl. Code-Listing 6-1) zeigt einen kurzen Auszug der Datei. Die Kommentare beschreiben die jeweilige Einstellung. 26

33 ... <widget id="com.posty.mobile" version="0.0.1"> <!-- name of the application --> <name>posty Mobile</name> <!-- description of the application --> <description> Posty Mobile Administration Tool </description> <!-- author of the application --> <author href="http://posty-soft.org" Benjamin Heller </author> <!-- location for the initial file --> <content src="index.html" /> <!-- allows access to all external resource --> <access origin="*" /> <!-- default means both landscape and portrait are enabled --> <preference name="orientation" value="default" /> <!-- possible values handset, tablet, or universal --> <preference name="target-device" value="universal" /> <!-- hides the status bar at the top of the screen --> <preference name="fullscreen" value="false" />... </widget> Code-Listing 6-1: config.xml Wie jede Webapplikation hat auch eine Hybrid-App eine Startdatei, die index.html. Sie wurde in der config.xml (vgl. Code-Listing 6-1) mit dem <content>-element bestimmt Resource-Dateien Abbildung 6-2: Ordnerstruktur res Wie Abbildung 6-2 zeigt, beinhaltet der res Ordner alle Ressourcen der Applikation. Icons, Splashscreen-Bilder und sonstige Images werden hier gespeichert. Da die verschiedenen Endgeräte unter verschiedenen Auflösungen betrieben werden, ist es möglich, die jeweiligen Images, wie in der unter merges (vgl ) beschriebenen Vorgehensweise, anzulegen. 27

34 6.2.3 JavaScript-Dateien [21] Abbildung 6-3: Ordnerstruktur js Abbildung 6-3 visualisiert die Unterteilung der einzelnen JavaScript Module der posty_mobile Applikation. Jeder Unterordner von js repräsentiert ein eigenes Modul. Diese lassen sich wie folgt untergliedern: Das controller-modul repräsentiert das Herz der Dynamik. Wie es im nächsten Abschnitt (vgl ) zu erkennen ist, gibt es zu jeder View einen einzelnen Controller. Hier in Abbildung 6-3 am Beispiel der Domain existiert für das Auflisten die domain-index-ctrl.js- Controller-Datei und für das Erzeugen beziehungsweise das Bearbeiten die domain-newctrl.js- und domain-edit-ctrl.js-datei. Sie kümmern sich um das Abfangen von Benutzer- Events und das Weitergeben der Daten in das dementsprechende Model für die Datenübergabe an die eingestellte posty_api. Das direktives-modul enthält speziell gekapselte HTML-Komponenten, die mithilfe des AngularJS-Compilers den DOM 8 -Baum bzw. einzelne DOM-Elemente verändern können. Hilfs-Klassen und Funktionen sowie wichtige globale Konstanten werden im Modul utils gespeichert. In der Datei app.js werden die für die gesamte Applikation abhängigen Bibliotheken und Module geladen. Um grundlegende Applikationskonfigurationen zu treffen steht die config.js zur Verfügung. Alle Routen, die es in der Anwendung geben soll, werden in der routes.js definiert. 8 Das Document Object Model (kurz DOM) ist eine Schnittstellenbeschreibung für den Zugriff auf die einzelnen Elemente eines HTML- oder XML-Dokuments. [21] 28

35 Die Datei main.js repräsentiert das Initialisierungs-Script für RequireJS. Es werden Pfade aller benötigten Bibliotheken und wiederum deren Abhängigkeiten angegeben HTML-Dateien Abbildung 6-4: Ordnerstruktur html Anzeigeelemente werden in AngularJS in einzelne HTML-Templates ausgelagert. Wie auch im vorherigen Abschnitt beschrieben, enthält eine View je einen Controller. Infolgedessen gibt es für jede Ansicht eine entsprechende HTML-Datei und einen zugehörigen Controller in einer JavaScript-Datei. Am Beispiel der Domains in Abbildung 6-4 wurde die domainindex.html-datei für das Auflisten der gesamten Domains, die domain-new.html-datei für das Erzeugen einer Einzelnen und die domain-edit.html für das Bearbeiten einer vorhandenen Domain erstellt. Äquivalent sind diese Dateien bei Users, Transports und den weiteren Stammdaten vorhanden. 29

36 6.3 Hervorzuhebende Verfahren In diesem Abschnitt soll detaillierter auf einzelne Verfahren eingegangen werden. Die Funktionsweise des Routing, wie auch die Umsetzung des MVVM-Konzepts des Ionic- Frameworks, werden vorgestellt Routing Abbildung 6-5: Routing Wie im Abschnitt erwähnt, werden sämtliche Routen, die es innerhalb der Anwendung geben soll, in der Datei routes.js definiert. Abbildung 6-5 zeigt die möglichen Routen der Applikation. Jede Route ist mit einer bestimmten Aktion verbunden, die beim Aufruf aufgelöst und ausgehend davon die benötigten Controller und Views lädt. Um die einzelnen Routen zu bestimmen wird der Service $stateprovider benötigt. Am Beispiel der Auflistung aller Domains (vgl. Code-Listing 6-2: routes.js) ist folgende Route registriert: $stateprovider.state('domain-index', { url: '/domain', templateurl: 'templates/domain-index.html', controller: 'DomainIndexCtrl' }); Code-Listing 6-2: routes.js Durch die Angabe eines Links mit Namen '#/domain' (href='#/domain') wird in diesem Fall das View-Template domain-index.html mit ihrem zugehörigen Controller DomainIndexCtrl geladen View In der laufenden Anwendung werden, abhängig von der aktuellen Route, Teile der Benutzeroberfläche dynamisch gerendert. Dabei wird ein Bereich vollständig aus dem DOM- Baum entfernt bzw. wieder eingefügt. Diese Bereiche stellen die View der Applikation dar. Um einen Eindruck einer Ionic-View zu erhalten, dient das folgende Beispiel (vgl. Code- Listing 6-3 und Abbildung 6-6) der Domain-View, die es ermöglicht alle Domains aufzulisten: 30

37 <ion-view title="domains" ng-init="init()"> <ion-content> <ion-list> <ion-item class="item item-icon text-center" ng-show="isloading()"> <i class="icon ion-loading-c"></i> </ion-item> <ion-item class="item item-icon-right" ng-show="!isloading()" ng-repeat="domain in getdomains()" ng-href="#/domain/{{domain.id}}"> {{domain.name}} <button class="button button-icon icon ion-trash-b" ng-click="remove(domain)"></button> </ion-item> </ion-list> </ion-content> </ion-view> Code-Listing 6-3: domain-index.html Abbildung 6-6: Domain-List-View Die erste Zeile erzeugt einen eigenen Scope (<ion-view>), einen Bereich, der für alle Unterelemente gilt. Dieser Scope definiert den Titel Domains (title="domains") und eine Initialisierungsfunktion (ng-init="init()"), die infolge des Rendering-Prozesses aufgerufen wird. Der Inhaltsbereich der View (<ion-content>) umfasst in diesem Fall eine Liste (<ion-list>) mit einzelnen Elementen (<ion-item>). Im ersten Augenblick scheint es so, als hätte die Liste lediglich zwei Elemente - Dies ist nur bedingt richtig: die Elemente werden abhängig von der isloading()-funktion mit Hilfe der ng-show -Eigenschaft angezeigt. Ist diese wahr, wird das Element samt eigener Unterelemente in den DOM-Baum eingefügt. Infolge dessen wird beim Laden der Seite ein Loading-Icon gezeigt. Ist dies abgeschlossen, werden die einzelnen Domains gelistet. Die Auflistung funktioniert wie folgt: Durch die ng-repeat-direktive wird das gesamte <ion-item>-element als Template für jede Domain verwendet und immer wieder geklont. Dabei erhält jedes dieser Objekte seinen eigenen Scope. Zum Verständnis der zusätzlichen Attribute: ng-href repräsentiert im Wesentlichen nichts anderes als einen bekannten href-link, jedoch mit dem Zusatz AngularJS-Expressions (in diesem Beispiel {{domain.id}}), aufzulösen. Eine weitere oft verwendete Direktive ist das ngclick. Hierbei wird eine Funktion remove() mit dem angefügten Parameter domain im zugehörigen Controller aufgerufen. Um das Beispiel fortzuführen, werden im folgenden Abschnitt Ausschnitte des zugehörigen Controllers gezeigt. 31

38 6.3.3 Controller [22] Das folgende Code-Listing 6-4 beschreibt den Aufbau eines Controllers in der posty_mobile Applikation. var ctrls = angular.module('postymobile.controllers', ['postymobile.services']); ctrls.controller('domainindexctrl', function($scope, $ionicpopup, Domains,...) { }); var isloading = true; $scope.init = function() {... Domains.refresh().then(function () { }).catch(function(response) { }).finally(function() { isloading = false; }); } $scope.getdomains = function() { return Domains.all(); } $scope.remove = function (domain) { var confirmpopup = $ionicpopup.confirm({ title: 'Delete Domain', template: 'Are you sure you want to delete the domain?' }); confirmpopup.then(function(res) { if(res) { isloading = true; Domains.remove(domain).then(function () { }).catch(function(response) { }).finally(function() { isloading = false; }); } }); } $scope.isloading = function() { return isloading; }... Code-Listing 6-4: domain-index-ctrl.js In der ersten Zeile wird das posty_mobile-controller-modul mit seiner Abhängigkeit zu den Services geladen. Im nächsten Schritt wird für dieses Modul ein Controller namens DomainIndexCtrl registriert. Bei den Parametern ($scope, $ionicpopup, Domains) in der darauffolgenden Funktion handelt es sich um Services, die mittels Dependency Injection 9 (DI) überwiegend in Controllern verwendet werden. Die Verwendung von DI hat hier den Vorteil, dass sich das darunterliegende Subsystem von Angular um die Erstellung der Objekte und der Auflösung deren Abhängigkeiten kümmert. Der auf diese Weise injizierte $scope-service dient dazu, der View Zugriff zu den Werten des Controllers zu geben. Die im vorherigen Beispiel gezeigten Funktionen wie $scope.init(), $scope.getdomains(), $scope.isloading() und $scope.remove() werden somit der View bereitgestellt. 9 DI (Dependency Injection) ist ein Entwurfsmuster welches sich um die Auflösung von Abhängigkeiten zwischen Objekten zur Laufzeit kümmert. [22] 32

39 Mit Hilfe des $ionicpopup-services ist es möglich Popups anzuzeigen. Die Scope-Funktion $scope.remove() gibt ein Beispiel dafür, wie Domains mit Hilfe eines Bestätigen-Popups gelöscht werden können. Der wohl wichtigste Service für diesen Controller ist das zugehörige Model Domains. Auf die grundlegendsten Funktionen dieses Services wird im nächsten Abschnitt (vgl ) eingegangen. Die Variable isloading signalisiert der View, ob sie sich im Ladezustand befindet, beziehungsweise gerade auf Ressourcen zugegriffen wird. Dies ist vor der Initialisierung der Fall. Nach Aufruf der Domains.refresh()-Funktion und Abarbeitung einer sogenannten Promise wird diese Variable auf den Wert false gesetzt und die View listet die geladenen Domains auf. Promises vereinfachen asynchrone Aufrufe und entkoppeln die zugehörigen Events. Drei Funktionen werden bereitgestellt: Die then()-funktion wird bei Erfüllung der Promise aufgerufen, catch() bei Fehlschlag und in beiden Fällen die finally()-funktion Model Abbildung 6-7: Domain-Model Der Datenaustausch, verbunden mit der registrierten posty_api, wird über die einzelnen Modelklassen vorgenommen. Abbildung 6-7 zeigt dieses Model am Beispiel der Domains. Jede dieser Modelklassen verfügt über eine List-Variable (domainlist), in der die zugehörigen Datensätze der Datenklassen (Domain) abgelegt werden. Grundlegende Funktionen zur Erzeugung (create()), Bearbeitung (edit()) und Löschung (remove()), sowie die Auflistung (all()) von Domains stehen zur Verfügung. Um die Liste mit den Server-Daten abzugleichen, wird die refresh()-funktion bereitgestellt. Anhand der create()-funktion in folgender Abbildung (vgl. Abbildung 6-8) wird gezeigt, wie die Kommunikation zur REST-API stattfindet: 33

40 Abbildung 6-8: REST-Kommunikation Die Kommunikationspartner sind hierbei auf der einen Seite die RESTful posty_api und auf der anderen Seite die posty_mobile-app mit dem eingebundenen posty-web-model.js-modul. Die Kommunikation findet mit Hilfe des HTTP-Protokolls statt. Der Client, genau genommen die mobile App, versendet Anfragen an die API im JSON-Format ( application/json ). Der Server, somit die posty_api, empfängt die Anfrage und antwortet im gleichen Format. Der auf der Client Seite befindliche Codeausschnitt der create()-funktion zeigt die prinzipielle Funktionsweise von Restangular. Im ersten Schritt wird mit Hilfe der statischen Funktion Restangular.all('domains') die Ressource aufgelöst und als eine Art Data-Access-Object 10 (kurz DAO) zurückgeliefert. Mit Hilfe von Promises können die durch das DAO-Objekt bereitgestellten Daten asynchron verarbeitet werden. dao.post(domain) schickt dementsprechend das domain-objekt aus dem Übergabeparameter via HTTP an die posty_api. Bei Erfolg des Speicherns der Domain wird die then()-funktion der Domain aufgerufen, bei Misserfolg die catch()-funktion. Der in Abbildung 6-8 nicht abgebildete Response-Handler kümmert sich nachfolgend um die Verarbeitung der jeweiligen Antwort der posty_api. Es ist eine ungültige Quelle angegeben. 10 Das Data-Access-Object ist ein Entwurfsmuster zur Gestaltung von Programmierschnittstellen welches den Zugriff auf verschiedene Datenquellen (z.b. Datenbanken, Dateisysteme oder APIs) kapselt. [23] 34

41 7 Schlussworte 7.1 Bewertung Der konkrete Status dieser Bachelorarbeit zum Zeitpunkt der Abgabe (Mitte Oktober 2014) ist folgender: Der Prototyp wurde weitestgehend fertiggestellt und befindet sich in der ersten Testphase. Die in Kapitel festgelegten Anforderungen werden zum Vergleich herangezogen, um die erfolgreiche Abwicklung des Projektes zu prüfen: ID Titel Status FR_1 API wechseln FR_2 API Authentifizierung anlegen FR_3 Domains anlegen FR_4 Domains bearbeiten FR_5 Domains löschen FR_6 Domain-Aliasse anlegen FR_7 Domain-Aliasse löschen FR_8 User anlegen FR_9 User bearbeiten FR_10 User löschen FR_11 User-Aliasse anlegen FR_12 User-Aliasse löschen FR_14 Transports anlegen FR_15 Transports bearbeiten FR_16 Transports löschen FR_17 Summary FR_18 API-Keys anlegen FR_19 API-Keys bearbeiten FR_20 API-Keys löschen Tabelle 7-1: Bewertung Anforderungen erledigt teilweise erledigt Aus Tabelle 7-1 wird ersichtlich, dass (mit Ausnahme der Anforderung FR_17) alle Anforderungen erfüllt wurden. Die Ausnahme äußert sich in der Diagrammdarstellung der einzelnen Domain-, User- und deren Alias-Anzahl. Aufgrund des schmalen Bildschirms des Testgerätes (HTC One mini mit Android v ) wird das Diagramm nicht richtig dargestellt. Diese Diagrammdarstellung trifft voraussichtlich bei allen Smartphones mit schmalem Bildschirm zu. Dies wird jedoch in der Produktivversion überarbeitet werden können. 35

42 7.2 Ausblick Nach der Bewertung werden in diesem Abschnitt mögliche, zukünftige Erweiterungen und Verbesserungen für die Anwendung vorgestellt: Ein wichtiger Aspekt für die nahe Zukunft der posty_mobile-app, sowie der posty_webui-webapplikation ist das Caching der Daten. Derzeit wird bei jedem Routenwechsel die dementsprechende Datenliste mit der API synchronisiert, auch wenn der Nutzer schnell zwischen Seiten navigiert. Um den Datentraffic zu reduzieren und die Usability zu steigern sollen in Zukunft die Daten zwischengespeichert und erst nach einem gewissen Zeitabstand mit dem Server abgeglichen werden. Sollte der User trotz dieser Neuerung einen Refresh benötigen, wird dies weiterhin möglich sein. Ein weiterer Punkt, der in Zukunft behandelt werden sollte, ist die Wiederherstellung der Standardeinstellungen. Daten der Applikation, die persistent gespeichert werden (z.b. APIs), können nur mit Hilfe des im Betriebssystem verfügbaren Taskmanagers gelöscht werden. Durch die Einführung der Funktion Standard wiederherstellen soll dies auch von der App aus möglich sein. Nach Abschluss der Testphase des mobilen Betriebssystems Android (v ) werden auch weitere Endgeräte getestet. Für die folgenden Testzwecke soll das iphone 5S verwendet werden. Ist diese Phase abgeschlossen, soll die App auf den jeweiligen Marktplätzen (GooglePlayStore, AppleStore, WindowsStore) publiziert werden. Die genutzten Methoden zur plattformübergreifenden Programmierung von mobilen Applikationen befinden sich immer noch in der Entwicklungsphase. Cordova, sowie Ionic und AngularJS werden stetig weiter entwickelt und verbessern sich von Tag zu Tag. Auch der Web-Standard HTML5 ist kein endgültiger Standard und bietet in Zukunft eventuell bessere Möglichkeiten zur App-Entwicklung. 36

43 7.3 Fazit Mit der ausgearbeiteten posty_mobile-app gelingt die mobile Übersetzung einer HTML5 Webapplikation in Form einer Hybrid-App für aktuelle Smartphones und Tablets. Zu diesem Zweck wurden zunächst die derzeitigen Methoden zur Entwicklung mobiler Apps gegenübergestellt. Darauf aufbauend wurden, nach Klärung der technologischen Grundlagen, die Anforderungen spezifiziert. Das daraus ausgearbeitete Konzept wurde anschließend auf den resultierenden Prototypen angewendet. Vorhandene Schnittstellen und bestehende Komponenten wurden analysiert, optimiert und bestmöglich integriert. Durch den hybriden Aspekt kann die App mit geringem Aufwand auf andere Endgeräte portiert werden und schafft somit eine enorme Plattformunabhängigkeit. Das bestehende schlichte Design der posty_webui wurde übernommen und durch grafische Elemente zeitgemäß übertragen. Dies gewährleistet eine besonders intuitive und benutzerfreundliche Bedienung. Die Mobile App schafft eine Anpassung des posty-software-stacks an die heutige Gesellschaft. Mobil und flexibel hilft posty dem Benutzer schnell und überall seine Ziele zu erreichen. 37

44 Anhang HTTP- Methode URL Domains 38 Beschreibung GET Alle Domains abrufen GET Domain mit {name} abrufen POST Domains erstellen Parameter: name PUT Domain mit {name} editieren Parameter: name DELETE Domain mit {name} löschen GET GET POST PUT DELETE Domain-Aliasses Users Alle Aliasse für Domain {domain} abrufen Alias für Domain {domain} mit {name} abrufen Alias erstellen Parameter: name Alias mit {name} editieren Parameter: name Alias mit {name} löschen GET Alle User abrufen GET User mit {name} abrufen POST User erstellen Parameter: name, password, quota PUT User mit {name} editieren Parameter: name, password, quota DELETE User mit {name} löschen User-Aliasses GET Alle Aliasse für User URL>>/domains/{domain}/users/{user}/aliases {user} abrufen GET Alias für User {user} URL>>/domains/{domain}/users/{user}/aliases/{name} mit {name} abrufen POST Alias erstellen URL>>/domains/{domain}/users/{user}/aliases Parameter: name PUT Alias mit {name}

45 DELETE GET GET POST PUT DELETE GET URL>>/domains/{domain}/users/{user}/aliases/{name} URL>>/domains/{domain}/users/{user}/aliases/{name} Transports Summary API-Keys editieren Parameter: name Alias mit {name} löschen Alle Transports abrufen Transport mit {name} abrufen Transport erstellen Parameter: name, destination Transport mit {name} editieren Parameter: name, destination Transport mit {name} löschen Anzahl von Domains, Domainaliasse, User und Useraliasse abrufen GET Alle API-Keys abrufen GET API-Key mit {token} abrufen POST API-Key erstellen Parameter: expires_at PUT API-Key mit { token } editieren Parameter: active, expires_at DELETE API-Key mit { token } löschen Anhang 1: REST-Schnittstellenbeschreibung 39

46 Anhang 2: View Szenario 40

Entwicklung und Integration mobiler Anwendungen. Oracle Deutschland B.V. & Co. KG

Entwicklung und Integration mobiler Anwendungen. <Speaker> Oracle Deutschland B.V. & Co. KG Entwicklung und Integration mobiler Anwendungen Oracle Deutschland B.V. & Co. KG Global Users (Millions) Der Trend ist eindeutig. Trend zu mobilen Endgeräten Wachstum des mobilen Datenverkehrs

Mehr

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Proseminar Objektorientiertes Programmieren mit.net und C# Florian Schulz Institut für Informatik Software & Systems Engineering Einführung Was hat Cross-Plattform

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

Appery.io Mobile Apps schnell und einfach entwickeln

Appery.io Mobile Apps schnell und einfach entwickeln Appery.io Mobile Apps schnell und einfach entwickeln Cloud-basierte Entwicklungsumgebung, keine lokale Installation von Entwicklungsumgebung nötig. Technologie: HTML5. JQuery Mobile, Apache Cordova. Plattformen:

Mehr

CloudMatic V1.0. Inhalt

CloudMatic V1.0. Inhalt CloudMatic V1.0 Inhalt Einleitung... 2 CCUs hinzufügen... 3 meine-homematic.de... 4 Eigenes VPN... 4 View Editor... 5 Übersicht... 5 Allgemeine Einstellungen... 6 Kanäle hinzufügen... 6 Spezielle Kanäle...

Mehr

ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC. - Björn Wilmsmann -

ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC. - Björn Wilmsmann - ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC - Björn Wilmsmann - ZenQuery Enterprise Backend as a Service Unternehmen horten Daten in Silos ZenQuery

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel XDK

Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK vertraut. Es wird Schritt für Schritt die erste eigene Hybrid-App entwickelt

Mehr

Architekturen mobiler Multi Plattform Apps

Architekturen mobiler Multi Plattform Apps Architekturen mobiler Multi Plattform Apps Wolfgang Maison & Felix Willnecker 06. Dezember 2011 1 Warum Multi- Plattform- Architekturen? Markt. Apps für Smartphones gehören zum Standardinventar jeder guten

Mehr

NEWpixi* API und die Umstellung auf REST. Freitag, 3. Mai 13

NEWpixi* API und die Umstellung auf REST. Freitag, 3. Mai 13 NEWpixi* API und die Umstellung auf REST Fakten NEWpixi* API Technik REST-basierend.NET Webservice IIS Webserver Release 31. August 2013, zusammen mit dem NEWpixi* ELI Release Legacy API und erste NEWpixi*

Mehr

Programmierung mobiler Geräte

Programmierung mobiler Geräte Programmierung mobiler Geräte SoSe 2015 Hybride Apps Markus Berg Hochschule Wismar Fakultät für Ingenieurwissenschaften Bereich Elektrotechnik und Informatik http://mmberg.net 2 Letzte Woche: Webapps Nativ

Mehr

Präsentation. homevisu Familie. Peter Beck. Juni 2011. www.p-b-e.de. 2011 p b e Peter Beck 1

Präsentation. homevisu Familie. Peter Beck. Juni 2011. www.p-b-e.de. 2011 p b e Peter Beck 1 Präsentation homevisu Familie Peter Beck Juni 2011 2011 p b e Peter Beck 1 Funktionensumfang Der Funktionsumfang das provisu Framework. Modular und durch Plug-In erweiterbar / anpassbar. Plug-In Schnittstelle

Mehr

Benutzerdokumentation Web-Portal

Benutzerdokumentation Web-Portal GRUPP: SWT0822 Benutzerdokumentation Web-Portal Yet Another Reversi Game Martin Gielow, Stephan Mennicke, Daniel Moos, Christine Schröder, Christine Stüve, Christian Sura 05. Mai 2009 Inhalt 1. Einleitung...3

Mehr

TM1 mobile intelligence

TM1 mobile intelligence TM1 mobile intelligence TM1mobile ist eine hochportable, mobile Plattform State of the Art, realisiert als Mobile BI-Plug-In für IBM Cognos TM1 und konzipiert als Framework für die Realisierung anspruchsvoller

Mehr

Mobile Application Development

Mobile Application Development Mobile Application Development Android: Einführung Jürg Luthiger University of Applied Sciences Northwestern Switzerland Institute for Mobile and Distributed Systems Lernziele Der/die Kursbesucher/in kann

Mehr

Das Interceptor Muster

Das Interceptor Muster Das Interceptor Muster Implementierung des Interceptor Musters basierend auf OSGi and Friends Benjamin Friedrich Hochschule für Technik und Wirtschaft des Saarlandes Praktische Informatik - Entwurfsmuster

Mehr

Mobile Kartenanwendungen im Web oder als App?

Mobile Kartenanwendungen im Web oder als App? Mobile Kartenanwendungen im Web oder als App? Agenda Anforderungen an eine mobile Kartenanwendung Warum mobile Anwendungen? Mobil ist nicht genug! Knackpunkte bei der Entwicklung mobiler Kartenanwendungen

Mehr

Mobile: Die Königsfrage

Mobile: Die Königsfrage Mobile: Die Königsfrage - Native App,Mobile Website oder doch Responsive Design? - Native App oder Mobile Website? Wer am Boom der mobilen Anwendungen teilhaben möchte, hat im Prinzip zwei Möglichkeiten:

Mehr

App Entwicklung mit Hilfe von Phonegap. Web Advanced II - SS 2012 Jennifer Beckmann

App Entwicklung mit Hilfe von Phonegap. Web Advanced II - SS 2012 Jennifer Beckmann App Entwicklung mit Hilfe von Phonegap Web Advanced II - SS 2012 Jennifer Beckmann http://www.focus.de/digital/internet/netzoekonomie-blog/smartphone-googles-android-laeuft-konkurrenz-in-deutschland-davon_aid_723544.html

Mehr

Smartphone Entwicklung mit Android und Java

Smartphone Entwicklung mit Android und Java Smartphone Entwicklung mit Android und Java predic8 GmbH Moltkestr. 40 53173 Bonn Tel: (0228)5552576-0 www.predic8.de info@predic8.de Was ist Android Offene Plattform für mobile Geräte Software Kompletter

Mehr

Eine App, viele Plattformen

Eine App, viele Plattformen Eine App, viele Plattformen Anwendungsentwicklung für Mobile Heiko Lewandowski 23.04.2013 EINLEITUNG Festlegung App-Strategie: Welche Ziele möchte ich erreichen? Die Vielzahl der Plattformen und Geräte(hersteller)

Mehr

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe«

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe« 201 PhoneGap bringt einen standardisierten Hardwarezugriff für Smartphones mit. Aber was passiert, wenn Sie mehr wollen: Wenn Sie eine Hardware per Bluetooth ansprechen wollen oder Features der jeweiligen

Mehr

Installation des edu- sharing Plug- Ins für Moodle

Installation des edu- sharing Plug- Ins für Moodle Installation des edu- sharing Plug- Ins für Moodle [edu-sharing Team] [Dieses Dokument beschreibt die Installation und Konfiguration des edu-sharing Plug-Ins für das LMS Moodle.] edu- sharing / metaventis

Mehr

Erweiterung für Premium Auszeichnung

Erweiterung für Premium Auszeichnung Anforderungen Beliebige Inhalte sollen im System als Premium Inhalt gekennzeichnet werden können Premium Inhalte sollen weiterhin für unberechtigte Benutzer sichtbar sein, allerdings nur ein bestimmter

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012

WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012 WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012 AGENDA 1. Native versus webbasierte Apps 2. HTML5 & CSS3 1. Media Queries 2. Geolocation

Mehr

3 Anwendungsarchitektur und Entwicklungsumgebung

3 Anwendungsarchitektur und Entwicklungsumgebung 21 3 Anwendungsarchitektur und Bei den Entwicklern von Web-basierten Dialogsystemen hat sich im Laufe der Zeit eine Vorgehensweise im Design von Anwendungen entwickelt, dies es ermöglicht, flexible Web-Dialoge

Mehr

Netzwerk Technologien in LabVIEW

Netzwerk Technologien in LabVIEW Netzwerk Technologien in LabVIEW von Dirk Wieprecht NI Germany Hier sind wir: Agenda Agenda Bedeutung des Ethernet für die Messtechnik Ethernet-basierende Technologien in LabVIEW Low Level- TCP/IP Objekt

Mehr

3.9 Grundelemente einer Benutzeroberfläche

3.9 Grundelemente einer Benutzeroberfläche 92 3 Grundlagen einer ios-anwendung 3.8.4 Target-Actions Einer der häufigsten Anwendungsfälle bei einer Oberfläche ist das Betätigen einer Schaltfläche durch einen Anwender, woraufhin eine bestimmte Aktion

Mehr

1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten,

1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten, OUTDOOR webservices 1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten, Kostenstellen oder Kostenträgern... 2

Mehr

Agenda. Clients aus drei verschiedenen Perspektiven: Was ist ein Dialog? Komponentenarchitektur innerhalb eines Dialoges

Agenda. Clients aus drei verschiedenen Perspektiven: Was ist ein Dialog? Komponentenarchitektur innerhalb eines Dialoges Komponentenbasierte Client-Architektur Hamburg, 16.11.2007 Bernd Olleck IT-Beratung Olleck Agenda Clients aus drei verschiedenen Perspektiven: Technische Infrastruktur Fachliche Sicht Aufgaben eines Clients

Mehr

Ruby on Rails. Florian Ferrano Ralf Heller Markus Nagel

Ruby on Rails. Florian Ferrano Ralf Heller Markus Nagel Ruby on Rails Florian Ferrano Ralf Heller Markus Nagel Überblick Ruby on Rails Ruby Rails Geschichte MVC allgemein MVC in Rails Scaffolding Webserver Installation Beispiele Wo wird Rails verwendet? Ausblick

Mehr

IAWWeb PDFManager. - Kurzanleitung -

IAWWeb PDFManager. - Kurzanleitung - IAWWeb PDFManager - Kurzanleitung - 1. Einleitung Dieses Dokument beschreibt kurz die grundlegenden Funktionen des PDFManager. Der PDF Manager dient zur Pflege des Dokumentenbestandes. Er kann über die

Mehr

JavaScript Frameworks für Mobile

JavaScript Frameworks für Mobile JavaScript Frameworks für Mobile MoBI Expertenrunde Usability, 1. März 2012 doctima GmbH JavaScript Frameworks für Mobile MoBI 1.3.2012 Edgar Hellfritsch Inhalt Native App-Entwicklung Klassische Web-Entwicklung

Mehr

Allgemeines. Architektur der Anwendung. Server starten. Anmeldung

Allgemeines. Architektur der Anwendung. Server starten. Anmeldung Allgemeines Architektur der Anwendung Grundsätzlich führen viele Wege nach Rom bzw. es gibt nicht den einen Weg, wie die gestellte Aufgabe mit Magnolia gelöst werden muss. Es wäre problemlos möglich, eine

Mehr

Auffrischung jquery. jquery Mobile. Marco Francke I 24.02.2011

Auffrischung jquery. jquery Mobile. Marco Francke I 24.02.2011 Auffrischung jquery jquery Mobile Marco Francke I 24.02.2011 Mayflower GmbH 2010 write less do more Marco Francke 24. Februar 2011 24.02.11 Mayflower GmbH 2 Mayflower GmbH 2010 Was ist jquery und was kann

Mehr

Mobile Applications. Adrian Nägeli, CTO bitforge AG

Mobile Applications. Adrian Nägeli, CTO bitforge AG Mobile Applications Adrian Nägeli, CTO bitforge AG Inhalt Vorstellung Marktübersicht Entwicklung Adrian Nägeli Dipl. Inf.-Ing FH Seit 2005 bei bitforge bitforge AG Standort Rapperswil-Jona Gründung 2004

Mehr

Remote Communications

Remote Communications HELP.BCFESDEI Release 4.6C SAP AG Copyright Copyright 2001 SAP AG. Alle Rechte vorbehalten. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher

Mehr

AJAX SSL- Wizard Referenz

AJAX SSL- Wizard Referenz AJAX SSL- Wizard Referenz Version 1.0.2+ - 04.04.2011 Präambel Die vorliegende Dokumentation beschreibt den AJAX basierten SSL- Wizard der CertCenter AG. Der SSL- Wizard kann mit wenigen Handgriffen nahtlos

Mehr

Eine Taxonomie und Bewertung von Cloud Computing Diensten aus Entwicklersicht

Eine Taxonomie und Bewertung von Cloud Computing Diensten aus Entwicklersicht Eine Taxonomie und Bewertung von Cloud Computing Diensten aus Entwicklersicht Universität der Bundeswehr München Mario Golling und Michael Kretzschmar Fakultät für Informatik E-Mail: mario.golling@unibw.de

Mehr

Übungen zur Android Entwicklung

Übungen zur Android Entwicklung Übungen zur Android Entwicklung Aufgabe 1 Hello World Entwickeln Sie eine Hello World Android Applikation und laden diese auf den Emulator. Leiten Sie hierfür die Klasse android.app.activity ab und entwerfen

Mehr

Falko Braune Präsentation - Hauptseminar Web Engineering Professur Verteilte und selbstorganisierende Rechnersysteme Technische Universität Chemnitz

Falko Braune Präsentation - Hauptseminar Web Engineering Professur Verteilte und selbstorganisierende Rechnersysteme Technische Universität Chemnitz Falko Braune Präsentation - Hauptseminar Web Engineering Professur Verteilte und selbstorganisierende Rechnersysteme Technische Universität Chemnitz - 19.12.2012 1. Einleitung 2. Technologie 3. Bewertung

Mehr

White Paper. Embedded Treiberframework. Einführung

White Paper. Embedded Treiberframework. Einführung Embedded Treiberframework Einführung White Paper Dieses White Paper beschreibt die Architektur einer Laufzeitumgebung für Gerätetreiber im embedded Umfeld. Dieses Treiberframework ist dabei auf jede embedded

Mehr

Ein Auszug aus... Studie. Content Management Systeme im Vergleich. Empfehlungen und Entscheidungshilfen für Unternehmensbereiche

Ein Auszug aus... Studie. Content Management Systeme im Vergleich. Empfehlungen und Entscheidungshilfen für Unternehmensbereiche Ein Auszug aus... Studie Content Management Systeme im Vergleich Empfehlungen und Entscheidungshilfen für Unternehmensbereiche Die komplette Studie ist bei amazon.de käuflich zu erwerben. Inhaltsverzeichnis

Mehr

Einführung in Android. 9. Dezember 2014

Einführung in Android. 9. Dezember 2014 Einführung in Android 9. Dezember 2014 Was ist Android? Software für mobile Geräte: Betriebssystem Middleware Kernanwendungen Android SDK: Tools und APIs zur Entwicklung von Anwendungen auf der Android-Plattform

Mehr

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 Projektbezeichnung Projektleiter Verantwortlich - Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 MSP-13 - Integration eines Semantischen Tagging Systems in Microsoft Sharepoint Martin

Mehr

Migrationsanleitung von 2.0 auf 2.1

Migrationsanleitung von 2.0 auf 2.1 Die wichtigste Neuerung von 2.0 auf 2.1 aus Sicht der Anwendungs- Migration ist die Verwendung von Maven. Mit Maven holt sich die Anwendung alle notwendigen Bibliotheken in den jeweils angegebenen Versionen

Mehr

Neue Funktionen CAS genesisworld x6

Neue Funktionen CAS genesisworld x6 Neue Funktionen CAS genesisworld x6 xrm und CRM für den Mittelstand 1 CAS genesisworld x6: Unverzichtbarer Helfer auf dem Weg zu Customer Centricity CAS genesisworld x6 unterstützt Unternehmen beim nachhaltigen

Mehr

CRM2GO. Erste Schritte

CRM2GO. Erste Schritte CRM2GO Erste Schritte 1. Loggen Sie sich in CRM2GO ein... 3 2. Systemanforderungen... 3 3. Benutzeroberfläche und Grundfunktionen... 4 4. Filtern... 5 5. Funktionen... 6 5.1 Kontaktmanagement...6 5.2 Vertrieb...7

Mehr

PDF FormServer Quickstart

PDF FormServer Quickstart PDF FormServer Quickstart 1. Voraussetzungen Der PDF FormServer benötigt als Basis einen Computer mit den Betriebssystemen Windows 98SE, Windows NT, Windows 2000, Windows XP Pro, Windows 2000 Server oder

Mehr

Integration mobiler Endgeräte in Medizinprodukte und Medizintechnik-nahe Produkte

Integration mobiler Endgeräte in Medizinprodukte und Medizintechnik-nahe Produkte Integration mobiler Endgeräte in Medizinprodukte und Medizintechnik-nahe Produkte Agenda Problemstellung Medizinprodukt App Grundlagen Szenarien (Problemstellungen und Lösungsansätze) 03.06.2013 2 Innovationen

Mehr

Userhandbuch. Version B-1-0-2 M

Userhandbuch. Version B-1-0-2 M Userhandbuch Version B-1-0-2 M Inhaltsverzeichnis 1.0 Was bietet mir SERVRACK?... 3 1.1 Anmeldung... 3 1.2 Passwort vergessen?... 3 1.3 Einstellungen werden in Realtime übernommen... 4 2.0 Die SERVRACK

Mehr

Auf einen Blick. Elementare Anwendungsbausteine. Telefonfunktionen nutzen. Dateien und Datenbanken. Organizer und Multimedia

Auf einen Blick. Elementare Anwendungsbausteine. Telefonfunktionen nutzen. Dateien und Datenbanken. Organizer und Multimedia Auf einen Blick Auf einen Blick TEIL I Grundlagen 1 Android eine offene, mobile Plattform... 21 2 Hallo Android!... 43 3 Von der Idee zur Veröffentlichung... 73 TEIL II Elementare Anwendungsbausteine 4

Mehr

Apps entwickeln mit HTML und Javascript

Apps entwickeln mit HTML und Javascript Apps entwickeln mit HTML und Javascript Framework "PhoneGap" (Apache Cordova) Apps für diverse Mobil-Plattformen (Android, ios, etc.) Apps als Web-Anwendung Vor- und Nachteile zu nativen Apps. Frank Bartels

Mehr

Responsive Design & ecommerce

Responsive Design & ecommerce Responsive Design & ecommerce Kassel, 15.02.2014 web n sale GmbH Jan Philipp Peter Was bisher geschah Was bisher geschah oder: Die mobile Evolution früher : - Lokale Nutzung - Zuhause oder im Büro - Wenige

Mehr

Value Added Services (VAS) Mobile. Kundenprojekte

Value Added Services (VAS) Mobile. Kundenprojekte Value Added Services (VAS) Mobile Kundenprojekte Live Reply arbeitet bereits seit 10 Jahren an mobilen en. en und Anwendungsfälle reichen von Widgets bis hin zu ausgeklügelten Symbian- oder Android-en

Mehr

Offline Apps mit HTML5

Offline Apps mit HTML5 1 Offline Apps mit HTML5 Entwicklung vollständig offline-tauglicher Webanwendungen W3L AG info@w3l.de 2014 2 Agenda Motivation Situation unter HTML 4.01 Neuerungen durch HTML5 Technologie Offline-Technologien

Mehr

App-Entwicklung mit Titanium

App-Entwicklung mit Titanium App-Entwicklung mit Titanium Masterstudienarbeit von Betreuung Prof. Dr. M. von Schwerin App-Entwicklung mit Titanium 1 Gliederung 1.Titanium Eine Einführung 2.Programmierschnittstelle (API) 3.Module 4.App

Mehr

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler Programmieren für mobile Endgeräte SS 2013/2014 Programmieren für mobile Endgeräte 2 Organisatorisches Anmelden im Web: ZIV Lehre Anmelden Anwesenheitsliste Anwesenheitsschein bei 75% Anwesenheit Allgemeine

Mehr

Moderne Benutzeroberflächen für SAP Anwendungen

Moderne Benutzeroberflächen für SAP Anwendungen Seite 1 objective partner für SAP Erfahrungen mit dem UI-Development Kit für HTML5 (SAPUI5) - 19.06.2012 Seite 2 Quick Facts objective partner AG Die objective partner AG 1995 gegründet mit Hauptsitz in

Mehr

Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems. Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete

Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems. Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete Allgemeines 2 Produktübersicht 2 Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems 3 Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete Account-Verwaltung 5 Freund-Funktionen

Mehr

Einführung in die OPC-Technik

Einführung in die OPC-Technik Einführung in die OPC-Technik Was ist OPC? OPC, als Standartschnittstelle der Zukunft, steht für OLE for Process Control,und basiert auf dem Komponentenmodel der Firma Microsoft,dem Hersteller des Betriebssystems

Mehr

Ein mobiler Electronic Program Guide für Android

Ein mobiler Electronic Program Guide für Android Whitepaper Telekommunikation Ein mobiler Electronic Program Guide für Android Prototyp für Android Apps 2011 SYRACOM AG 1 Einleitung Apps Anwendungen für mobile Geräte sind derzeit in aller Munde. Durch

Mehr

1. Software-Plattform Android Android. Was ist Android? Bibliotheken, Laufzeitumgebung, Application Framework

1. Software-Plattform Android Android. Was ist Android? Bibliotheken, Laufzeitumgebung, Application Framework 1. Software-Plattform Android Android Was ist Android? Plattform und Betriebssystem für mobile Geräte (Smartphones, Mobiltelefone, Netbooks), Open-Source Linux-Kernel 2.6 Managed Code, Angepasste Java

Mehr

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011 Workshop I Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation 7. Juni 2011 Übersicht è Native Apps è Web-Apps è Mobile Websites è Responsive Design Mobile Kommunikation

Mehr

Der schnelle Weg zu Ihrer eigenen App

Der schnelle Weg zu Ihrer eigenen App Der schnelle Weg zu Ihrer eigenen App Meine 123App Mobile Erreichbarkeit liegt voll im Trend. Heute hat fast jeder Zweite in der Schweiz ein Smartphone und damit jeder Zweite Ihrer potentiellen Kunden.

Mehr

Kurzanleitung Indiware online Stundenplan online Vertretungsplan online Indiware mobil

Kurzanleitung Indiware online Stundenplan online Vertretungsplan online Indiware mobil Kurzanleitung Indiware online Stundenplan online Vertretungsplan online Indiware mobil Stand: 26.11.2014 Kannenberg Software GmbH Nonnenbergstraße 23 99974 Mühlhausen Telefon: 03601/426121 Fax: 03601/426122

Mehr

Projekt AGB-10 Fremdprojektanalyse

Projekt AGB-10 Fremdprojektanalyse Projekt AGB-10 Fremdprojektanalyse 17. Mai 2010 1 Inhaltsverzeichnis 1 Allgemeines 3 2 Produktübersicht 3 3 Grundsätzliche Struktur und Entwurfsprinzipien für das Gesamtsystem 3 3.1 Die Prefuse Library...............................

Mehr

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten Aktuelle Themen der Wirtschaftsinformatik Zusammenfassung 09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten 1 Serverseitige Webprogrammierung

Mehr

Visendo SMTP Extender

Visendo SMTP Extender Inhalt Einleitung... 2 1. Aktivieren und Konfigurieren des IIS SMTP Servers... 2 2. Installation des SMTP Extenders... 6 3. Konfiguration... 7 3.1 Konten... 7 3.2 Dienst... 9 3.3 Erweitert... 11 3.4 Lizenzierung

Mehr

Mobile Anwendungen im SAP-Umfeld

Mobile Anwendungen im SAP-Umfeld Erstes Symposium für neue IT in Leipzig 27. September 2013 Michael Rentzsch Informatik DV GmbH michael.rentzsch@informatik-dv.com +49.341.462586920 IT-Trend: Mobile Mobile might be one of the most interesting

Mehr

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1 HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1 AGENDA Einführung Apps - Einführung Apps Architektur SharePoint-Hosted Apps Cloud-Hosted Apps Ausblick 11.09.2012 IOZ AG 2 ÜBER

Mehr

Mobile Agenten am Beispiel JADE (Java Agent DEvelopment Framework) Vorstellung in der Übung zu Konzepte Verteilter Systeme

Mobile Agenten am Beispiel JADE (Java Agent DEvelopment Framework) Vorstellung in der Übung zu Konzepte Verteilter Systeme Mobile Agenten am Beispiel JADE (Java Agent DEvelopment Framework) Vorstellung in der Übung zu Konzepte Verteilter Systeme Agenda Mobile Agenten allgemein JADE - Java Agent DEvelopment Framework Anwendungsfall

Mehr

Programmieren im Web 2.x

Programmieren im Web 2.x Programmieren im Web 2.x Ein Überblick über die Webentwicklung im Jahre 2011 Johannes Leers 26. März 2012 1 Motivation 2 Web-Frameworks 3 Mobile Computing 4 WebGL 5 Cloud Computing 6 Fazit Native Programme

Mehr

Präsentation Von Laura Baake und Janina Schwemer

Präsentation Von Laura Baake und Janina Schwemer Präsentation Von Laura Baake und Janina Schwemer Gliederung Einleitung Verschiedene Betriebssysteme Was ist ein Framework? App-Entwicklung App-Arten Möglichkeiten und Einschränkungen der App-Entwicklung

Mehr

2. Einloggen bei PROJEKTE2GO... 3. 3. Systemanforderungen... 3. 4. Benutzeroberfläche... 3. 5. Funktionen... 6

2. Einloggen bei PROJEKTE2GO... 3. 3. Systemanforderungen... 3. 4. Benutzeroberfläche... 3. 5. Funktionen... 6 PROJEKTE2GO Inhalt 1. Ihr mobiles Projektmanagement für unterwegs... 3 2. Einloggen bei PROJEKTE2GO... 3 3. Systemanforderungen... 3 4. Benutzeroberfläche... 3 5. Funktionen... 6 5.1 Zeiterfassung...6

Mehr

Installation und Benutzung AD.NAV.ZipTools

Installation und Benutzung AD.NAV.ZipTools Installation und Benutzung AD.NAV.ZipTools Version 1.0.0.0 ALTENBRAND Datentechnik GmbH Am Gelicht 5 35279 Neustadt (Hessen) Tel: 06692/202 290 Fax: 06692/204 741 email: support@altenbrand.de Die Komponente

Mehr

Proseminar Website-Management-Systeme ZOPE/CMF. Andreas M. Weiner

Proseminar Website-Management-Systeme ZOPE/CMF. Andreas M. Weiner Proseminar Website-Management-Systeme ZOPE/CMF Andreas M. Weiner Technische Universität Kaiserslautern Fachbereich Informatik Arbeitsgruppe Softwaretechnik Betreuer: Dipl. Inf. Christian Stenzel Überblick

Mehr

4D Server v12 64-bit Version BETA VERSION

4D Server v12 64-bit Version BETA VERSION 4D Server v12 64-bit Version BETA VERSION 4D Server v12 unterstützt jetzt das Windows 64-bit Betriebssystem. Hauptvorteil der 64-bit Technologie ist die rundum verbesserte Performance der Anwendungen und

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

1 Einleitung. 1.1 Caching von Webanwendungen. 1.1.1 Clientseites Caching

1 Einleitung. 1.1 Caching von Webanwendungen. 1.1.1 Clientseites Caching 1.1 Caching von Webanwendungen In den vergangenen Jahren hat sich das Webumfeld sehr verändert. Nicht nur eine zunehmend größere Zahl an Benutzern sondern auch die Anforderungen in Bezug auf dynamischere

Mehr

eclipse - Entwicklungsumgebung und mehr ETIS SS05

eclipse - Entwicklungsumgebung und mehr ETIS SS05 eclipse - Entwicklungsumgebung und mehr ETIS SS05 Gliederung Motivation Geschichte Architektur Platform Runtime Eclipse Platform Java Development Tools (JDE) Plugin Development Environment (PDE) Zusammenfassung

Mehr

INFOnline SZM Integration Guide Alternativlösung Messung hybrider APPs

INFOnline SZM Integration Guide Alternativlösung Messung hybrider APPs INFOnline SZM Mobile Applications INFOnline SZM Integration Guide Alternativlösung Messung hybrider APPs INFOnline GmbH Forum Bonn Nord Brühler Str. 9 53119 Bonn Tel.: +49 (0) 228 / 410 29-77 Fax: +49

Mehr

SMARTE WEB-TECHNOLOGIE FÜR HMIS DER GENERATION 4.0

SMARTE WEB-TECHNOLOGIE FÜR HMIS DER GENERATION 4.0 SMARTE WEB-TECHNOLOGIE FÜR HMIS DER GENERATION 4.0 PORTABEL INDIVIDUELL EFFIZIENT www.smart-hmi.de WebIQ Features List Das Framework WebIQ ist die ganzheitliche Lösung für die Erstellung von HMIs der Generation

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee

Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee Schnelle Winkel 10x schnellere Webapps mit AngularJS und Jee Lernplattform mit sozialer Komponente Portal & CMS JEE-Basis Wir fangen dann schon mal an! Portal? Forum? Social? CMS? Da gibts doch schon was?!

Mehr

Datenhaltung für Android. Model First

Datenhaltung für Android. Model First Datenhaltung für Android Model First Frederik Götz, Johannes Tysiak 26.05.2011 Unser Ziel! 26.05.2011 Datenhaltung in Android - Model First» Frederik Götz, Johannes Tysiak 2 Agenda Android Quickstart Datenhaltung

Mehr

Man liest sich: POP3/IMAP

Man liest sich: POP3/IMAP Man liest sich: POP3/IMAP Gliederung 1. Einführung 1.1 Allgemeiner Nachrichtenfluss beim Versenden von E-Mails 1.2 Client und Server 1.2.1 Client 1.2.2 Server 2. POP3 2.1 Definition 2.2 Geschichte und

Mehr

MEHR FUNKTIONEN, MEHR E-COMMERCE:

MEHR FUNKTIONEN, MEHR E-COMMERCE: MEHR FUNKTIONEN, MEHR E-COMMERCE: XT:COMMERCE PLUGIN BB CAMPAIGN MONITOR XT:COMMERCE PLUGIN BB CAMPAIGN MONITOR Das xt:commerce Modul BB Campaign Monitor erlaubt es Ihren Shop-Kunden, sich komfortabel

Mehr

1 Websites mit Frames

1 Websites mit Frames 1 Websites mit Frames Mehrere Seiten in einer einzelnen Seite anzeigen - Was sind Frames und wie funktionieren sie? - Was sind die Vor- und Nachteile von Frames? - Wie erstellt man eine Frames- Webseite?

Mehr

Praktikum Internetprotokolle - POP3

Praktikum Internetprotokolle - POP3 Technische Universität Ilmenau Fakultät für Informatik und Automatisierung Institut für Praktische Informatik und Medieninformatik Fachgebiet Telematik/Rechnernetze 19. Mai 2008 1 Aufgabenstellung Praktikum

Mehr

CaseWare Monitor. ProduktNEWS CaseWare Monitor. Version 4.3. Mehr Informationen zu CaseWare Monitor und unseren anderen Produkten & Dienstleistungen

CaseWare Monitor. ProduktNEWS CaseWare Monitor. Version 4.3. Mehr Informationen zu CaseWare Monitor und unseren anderen Produkten & Dienstleistungen Mit der aktuellen Version hält eine komplett neu konzipierte webbasierte Anwendung Einzug, die sich neben innovativer Technik auch durch ein modernes Design und eine intuitive Bedienung auszeichnet. Angefangen

Mehr

Neue Funktionen CAS genesisworld x6

Neue Funktionen CAS genesisworld x6 Neue Funktionen CAS genesisworld x6 xrm und CRM für den Mittelstand 3 CAS genesisworld x6: Unverzichtbarer Helfer auf dem Weg zu Customer Centricity CAS genesisworld x6 unterstützt Unternehmen beim nachhaltigen

Mehr

Bring Your Own Device in der Industrie

Bring Your Own Device in der Industrie Bring Your Own Device in der Industrie Geht das wirklich? 27.05.2014 Thomas Sorg BERNER & MATTNER Überblick BERNER & MATTNER Systemtechnik GmbH ASSYSTEM Founded: 1979 Employees: 450 Headquarters: Munich,

Mehr

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 1. Benötigte Software Zur Erstellung des Installers wird folgende Software benötigt. Es wird sich in dieser Dokumentation

Mehr

Datenbank-basierte Webserver

Datenbank-basierte Webserver Datenbank-basierte Webserver Datenbank-Funktion steht im Vordergrund Web-Schnittstelle für Eingabe, Wartung oder Ausgabe von Daten Datenbank läuft im Hintergrund und liefert Daten für bestimmte Seiten

Mehr

Anleitung zu Projekte

Anleitung zu Projekte Web Site Engineering GmbH Anleitung zu Projekte Projekte im WPS Version 4.3 Seite 1 Projekte verwalten...1 2 Projekt hinzufügen...4 3 Projekt löschen...9 4 Projekt ändern...9 5 Projektdaten drucken und

Mehr

Managed VPSv3 Was ist neu?

Managed VPSv3 Was ist neu? Managed VPSv3 Was ist neu? Copyright 2006 VERIO Europe Seite 1 1 EINFÜHRUNG 3 1.1 Inhalt 3 2 WAS IST NEU? 4 2.1 Speicherplatz 4 2.2 Betriebssystem 4 2.3 Dateisystem 4 2.4 Wichtige Services 5 2.5 Programme

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

VDLUFA-Schriftenreihe 1

VDLUFA-Schriftenreihe 1 VDLUFA-Schriftenreihe 1 Wie viele Apps sind ein LIMS? J. Flekna Pragmatis GmbH, Neufahrn 1. Einleitung Seitdem mobile Endgeräte massentauglich sind, ist die Bezeichnung App fester Bestandteil unseres zeitgeistigen

Mehr

AJAX DRUPAL 7 AJAX FRAMEWORK. Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks.

AJAX DRUPAL 7 AJAX FRAMEWORK. Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks. DRUPAL 7 AJAX FRAMEWORK Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks AJAX Beispiele Fragen: Gibt es jemanden der noch gar keine Erfahrungen

Mehr