Projektseminar
Mobile Anwendungen
1 Projektmanagement
Projekt
relative Neuartigkeit mit hohem Schwierigkeitsgrad und Risiko
erfordert enge fachübergreifende Zusammenarbeit aller Beteiligten
Produkt
Erzeugnis / Ergebnis des Vorhabens
Projektmanagement
Planung, Steuerung und Überwachung eines Projektes
Nutzen
für Unternehmen
Riiskominderung für Nicht-Erreichung der Ziele
Probleme und Auswirkungen frühzeitig erkennbar
Projektinteressen durch Projektleitung bestmöglich vertreten
für Mitarbeiter
Aufgaben klar definiert + leichter überschaubar
Beteilung an Projektplanung -> Gesamtzusammenhänge verstehen
magisches Dreieck
Qualität / Funktion
Behebung eines Fehlers: Kosten verzehnfachen sich pro Phase
erfüllen Anforderungen, fehlerfrei, solide, lesbar und veränderungsfreundlich implementiert
Kosten
Endtermin
Phasen
Definition
Ziele, Rahmen, Voraussetzungen klären
Planung
Aufgaben / Aktivitäten koordinieren & zeitlich planen
Verantwortlichkeiten / Rollen im Projektteam festlegen
Risiken identifizieren und präventiv begegnen
Durchführung
Abschluss
Auswertung
Agiles Vorgehen
Konzeption, Implementierung und Evaluation im Zyklus
Projektdurchführung
Zeitüberwachung
frühzeitiges Erkennen von kritischen Pfaden und notwendigen Terminverschiebungen
Meilensteine
definierte Zeitpunkte: Präsentation Zwischen- / Endergebnis
wichtige Voraussetzungen für Fortgang müssen erfüllt sein
-> Sollbruchstelle
Meetings
1 Modellierung
Gründe
Analyse von Sachverhalten
Betrachtung von verschiedenen Standpunkten
Zusammenhänge verständlich machen
Fokus auf wesentliche Faktoren, Vereinfachung des Systems
UML
UML (Unified Modeling Language) entwickelt von OMG
13 Standarddiagramme
Use-Case-Diagramm, Klassenmodell, Objektmodell, Kollaborationsdiagramm, Zustandsmodell, Aktivitätsmodell, Sequenzmodell, Interaktionsmodell, Komponentenmodell, Verteilungsmodell
Anwendungsfallmodell (Use-Case)
Modellierung von außen sichtbarer Anforderungen, repräsentiert verschiedene Anwendungsfälle
Voraussetzung: Anforderungen (formale Beschreibungen, Berichte)
Klassenmodell
Identifizierung von Klassen (mit Attributen + Operationen)
-> Beschreibung Anwendungsgebiet der Applikation
Voraussetzung: Anforderungskatalog/Use-Case-Diagramm und Geschäftsprozessmodell/EPK
Beziehungen
nicht ausgefüllter Pfeil: Unterklasse von
schwarz ausgefülltes Karo: m:1 Beziehung zu
Aktivitätsmodell
Modellierung von Aktivitätsflüssen
(Operations- / Workflowmodellierung)
Voraussetzung: Klassenmethoden, Geschäftsprozesse
Interaktionsmodell
Modellierung von von Objekten ausgetauschten Nachrichten
Voraussetzung: Verhalten der Objekte
Komponentenmodell
Schnittstellen / Komponenten und Beziehungen
Voraussetzung: statisches / dynamisches Modell der Applikation
2 Muster und Frameworks
Entwurfsmuster
wiederverwendbare Vorlage zur Problemlösung
Anforderungen
Problem(e) lösen und ein erprobtes Konzept bieten
Benutzer in den Entwurfsprozess einbinden
Kategorien
nach Abstraktionsniveau
Architekturmuster, Entwurfsmuster, Idiome
nach Zielsetzung
Erzeugungsmuster
Strukturmuster
Verhaltensmuster
Model-View-Controller
generisches Entwurfsmuster
Ziel: Entkopplung von Bildschirmrepräsentation, Anwendungsobjekt und Ablaufsteuerung
-> höhere Flexibilität, Wiederverwendbarkeit
Kombination aus mehreren Entwurfsmustern
Objekte können sich auf andere auswirken, ohne dass das geänderte Objekt die anderen genauer kennen muss (Observer)
Ablaufsteuerungen durch Austausch von Controller wechselbar (Strategy)
Komponenten
Model (PHP-Objektklassen)
Objekte zur Darstellung von Elementen der Realität
Schnittstellen: Anlegen, Auslesen, Manipulieren von Datenobjekten
View (Smarty-Templates)
grafische Darstellung
beinhaltet ggf. Präsentationslogik und interaktive Elemente
Controller (PHP-Skripte)
Ablaufsteuerung (Reaktion auf Benutzeraktionen)
jeder Zugriff geht über Controller
Frameworks
vollständiges Teilsystem für bestimmte technische Dienste
-> Unterbau
Wiederverwendung der Framework-Bausteine zur weitgehenden Entwicklung einer Anwendung eines bestimmten Anwendungsbereiches -> komponieren
Vorteile
Wettbewerbsfähigkeit (schnelle Bereitstellung von Anwendungen)
Qualitätssteigerung / -sicherung (Frameworks häufig getestet)
Kostenvorteile (mittelfristige Entwicklungskosten)
Nachteile
Abhängigkeit und Sprachgebundenheit
Änderungen bei Basisklassen können erbende Klassen beeinflussen
Entwurfsmuster vs. Frameworks
abstrakter (Frameworks können als Code dargestellt werden)
kleiner (Framework enthält mehrere Entwurfsmuster)
4 HTML 5
Geschichte
stetige Verbesserung / Aktualisierung
verzahnt mit Implementierung durch Browser-Hersteller
Abwärtskompatibilität, Offenheit, Transparenz
Neuerungen HTML5
Multimedia ohne Flash (<audio>, <video>)
<audio src="datei.ogg" controls preload loop> Nicht unterstützt.</audio>
<video width.. height.. poster="platzhalter.jpg" controls loop autoplay>
<source src.. type="video/mp4" />
<source src.. type="video/ogg" />
<track kind="subtitles" src="de.vtt" srclang="de" label="Deutsch" />
Nicht unterstützt. </video>
Vorteil
keine zusätzliche Software / Codecs notwendig, breite Plattformunterstützung, offener Standard
Geolocation-API
JavaScript ermittelt Position des Besuchers (GPS, Funkzelle, IP)
navigator.geolocation Objekt
Drag-and-Drop-API
Element aus Browser herausziehen, als Datei auf Desktop legen
<img> und <a> standardmäßig draggable
ansonsten Attribut draggable="true" und Attribut dropzone
Zeichnungsfläche <canvas>
Abbildungen dynamisch mit JavaScript erstellen
2D-Drawing-Primitives: fillRect für gefülltes Rechteck
3D mittels WebGL
neue Features für Formulare
Inhaltstyp möglich (z.B. E-Mail oder Datum)
Eingabehilfen (z.B. Date-Picker) vom Browser
Pflichtfelder (müssen ausgefüllt werden)
Attribute autofocus und placeholder (Hinweistext)
Attribut pattern (Eingabevalidierung mit Regular Expressions)
Offline-Anwendungen (clientseitige DB / Offline-Speicher)
besonders relevant für mobile Anwendungen
Web Storage ( = DOM Storage)
localStorage mit unbegrenzter Lebensdauer
(Highscores, Kontaktdaten..)
sessionStorage für Browsersitzung (Spielstand..)
JavaScript-Zugriff auf lokale Datenbank (auch ohne Internet)
Speicherung in assoziativem Array
kein direkter Zugriff durch Serverseite (anders als Cookies)
neue Dokumentenstrukturierung, neue semantische Elemente
header, footer, nav, section, article, aside
Browser kann bestimmte Bereiche besser unterstützen
Dokumentenstruktur besser (such-)maschinenlesbar
Websocket API, Web Workers, Server-sent events
WebSocket API: bidirektionale Client-Server-Kommunikation
Web Workers: Threading für JavaScript (Skripts im Hintergrund ausführen)
Server-sent events: Server kann Nachrichten an Client senden (Push)
<device> für herstellerübergreifenden Zugriff auf z.B. Kamera
Ersatz für gerätespezifische API und Flash
Mobile Web Apps ermöglichen:
<meta name="mobile-web-app-capable" content="yes">
2 XML, HTML, CSS
XML
Metasprache zur Spezifikation von Dokumentstrukturen
XHTML: in XML definierte Sprache mit definierter Menge an Elementen
XML beschreibt eher semantische Strukturen eines Dokuments
-> automatische Weiterverarbeitung
(Datenaustausch, entfernter Methodenaufruf..)
Grundkomponenten
Prolog (version, encoding, DOCTYPE, stylesheet)
Tags (Starttag und Endtag)
Element (Tags + Inhalt)
Struktur: Elemente in einer Hierarchie -> Tree View
Attribute (Attributname + Attributwert)
spezifizieren ein Element näher (z.B. waehrung="EUR")
Schreibweise
Groß- / Kleinschreibung wird beachtet
well-formed / wohlgeformtes XML
zulässiger Prolog
besitzt mindestens ein Element
ist mit Tags hierarchisch gegliedert
(passendes End-Tag zu jedem Start-Tag)
valid / gültiges XML
Dokument ist wohlgeformt
zugehörige DTD/XSD existiert
hält sich an die Regeln der DTD/XSD
DTD
Document Type Definition
spezifiziert Menge der zulässigen Elemente, zulässigen Attribute und zulässige hierarchische Anordnung der Elemente
kann innerhalb des XML oder in eigener Datei definiert werden
Beispiel: <!ELEMENT firma (#PCDATA)>
enthält andere Elemente:
<!ELEMENT anschrift (strasse, plz, ort)>
Wiederholungstypen:
<!ELEMENT positionen (position+)>
+ 1-n
* 0-n
? 0-1
Definition von Attributen - Beispiel
<!ELEMENT betrag (#PCDATA)>
<!ATTLIST betrag waehrung (EUR | JPY) #IMPLIED>
betrag = Element
waehrung = Attribut
(EUR | JPY) = zugelassene Werte
#IMPLIED = Optionen
beliebige Werte:
waehrung CDATA
Attribut muss Standardwert haben
<!ATTLIST betrag waehrung (EUR | JPY) EUR>
EUR, falls Attribut im Dokument nicht vorhanden
#IMPLIED
kein Standardwert, Attribut ist optional
#REQUIRED
kein Standardwert, Attribut muss angegeben werden
#FIXED EUR
EUR ist vorgegeben, kann nicht geändert werden
Nachteile
eigene Syntax: neuer Lernaufwand, neue Parser
mangelnde Funktionalität für datenorientierte XML-Dateien
z.B. exakte Zeichenlänge nicht möglich
XSD
erweitert DTDs
einfache Datentypen (Ganzzahl, Datum..)
Vererbungskonzept
genügen selbst XML-Format
aufwändigere Erstellung, länger und unübersischtlicher
Stylesheets
CSS
Cascading Stylesheets
Zuordnung typographischer Eigenschaften zu Elementen
Grenzen
Auswertung von Attributen nicht möglich
Veränderung Dokumentstruktur nicht möglich
Stärke: relativ leicht erlernbar
SCSS
Sassy Cascading Style Sheets
ermöglicht Integration von Variablen, Schleifen..
Grenzen
erfordert weiteren Schritt im Entwicklungsprozess
Stärke: vereinfacht Erstellung großer Stylesheets
XLST
Extensible Stylesheet Language - Transformations
Übertragung von XML-Dokumenten von ursprünglicher Struktur in eine andere
Grenzen
relativ schwierig, schlecht wartbar
Stärke: vergleichsweise mächtig
XLS-FO
Extensible Stylesheet Language - Formatting Objects
Übersetzung von XML in Layout-orientiertes Format
Einsatz in der Druckvorstufe
Grenzen
relativ schwierig, geringe Verbreitung
Stärke: vergleichsweise mächtig
Typische Anwendungsgebiete
dokumentorientierte Anwendungen
(Cross-Media-Publishing, technische Dokumentation..)
XML durch verschiedene Stylesheets in verschiedene Ausgabeformate (Print, Web, CD..)
datenorientierte Anwendungen
(EDI / zwischenbetrieblicher Datenaustausch, Integration von AS..)
Entwicklungswerkzeuge
Editoren
XML-Viewer (Wiedergabe von XML)
XML-Parser und XSL-Prozessoren
validieren und transformieren XML-Dokumente
Datenbanken
Datenmodelle
XML-enabled Datenbanksysteme (datenorientiert)
native XML Datenbanksysteme (dokumentorientiert)
Funktionalität
Verwaltung XML-Dokumente
Integritätssicherung, Transaktionsmanagement, Sicherheit
Webapplikationen
Historie
Web 1.0: statisches und dynamisches Web
Web 2.0: soziales Web
Web 3.0: semantisches Web
clientseitige Applikationen
clientseitiges Skripting, ausführbarer Code
serverseitige Applikationen
serverseitiges Skripting, Applikationsserver
XHTML
Auszeichnungssprache mit festgelegtem Satz an Elementen
Absätze, Listen, Tabellen, Links..
gute Wissensquelle: selfhtml
Tags zeichnen Inhalte aus (Tag-Namen immer klein)
keine Kommandos für Programmlogik
stattdessen clientseitiges Skripting (JavaScript), serverseitiges Skripting (PHP, Perl) oder serverseitige Anwendungen / Applikationsserver
Umlaute und Zeichen (<, >, ", &) haben in XHTML eine Bedeutung und eigene Darstellung (z.B. ")
Grundstruktur
nicht möglich: <tag1><tag2> .. </tag1></tag2>
XML-Prolog <?xml version=... ?><!DOCTYPE ...XHTML...>
Beginn / Ende: <html xmlns= .. /xhtml"></html>
von Suchmaschinen analysisert: <head></head>
Titel, von Suchmaschinen interpretiert: <title></title>
Textkörper: <body></body>
Kommentar: <!-- ... -->
Formatierung-Tags
<h1> bis <h6> für Überschriften
<p> Absatz
<br /> Zeilenumbruch
<div> Division / Bereich, der gemeinsam behandelt wird
<hr /> Querlinie
<ul><li>.. Aufzählungen
früher <font color="..">
Tabellen
beliebig verschachtelbar (Tabellen in Tabellen)
<table width="600" border="1"></table>
600 Pixel breit, sichtbar mit Gitterlinie
<tr> Tabellenzeile
<th> Zelle der Kopfzeile, meist hervorgehoben dargestellt
<td> Zelle für Daten
Links
<a href="ziel" target="öffnungsart">..</a>
a = anchor
Ziel: relativ (index.html), absolut (http://..) oder Anker im Dokument (#sprung)
Öffnungsart
"zielframe" im Frame zielframe
"_blank" im neuen Fenster
"_self" im selben Fenster
"_parent" beendet aktuelles Frameset
Image Maps (verweis-sensitive Grafiken)
<map..><area shape=.." coords=".." href="..">
shape: Rechteck (rect), Kreis (circle), Polygon (poly)
Formulare
Interaktivität -> User-Daten können erhoben werden
Textfelder, Passwortfelder, Radiobuttons, Checkboxen, Dropdown
<form action="suche.php" target="_blank" id="name" class=".." method="post"> ... </form>
Daten werden an Skript suche.php geschickt (in neuem Fenster)
nutzt HTTP-Post und kann über "name" adressiert werden
Textfeld
<input name="suche" size.. maxlength.. />
size und maxlength optional
Meta-Tags
Seitenbeschreibung
<meta name="description" content=".." />
analog für Stichwörter (keywords) und Autor (author)
Suchroboteranweisungen
<meta name="robots" content=".." />
index, follow, noindex, nofollow
als Alternative zu HTTP-Kopfdaten
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML (Hypertext Markup Language)
Unterschiede zu XHTML
Ziele
inhaltliche / grafische Strukturierung von Internetseiten, Textformatierung
Basis: SGML (Standard Generalized Markup Language)
XHTML: Basis XML (SGML-Teilmenge)
Groß-/Kleinschreibbung egal
XHTML immer klein
Elemente ohne Inhalt möglich z.B. <br>
XHTML: entweder leeres Element-Tag <br /> oder mit End-Tag <br></br>
Attributwert in Anführungszeichen optional
XHTML: immer
boolesche Attribute
<input type="radio" checked>
XHTML: als Attributwert
<input type="radio" checked="checked" />
CSS
XHTML-Mittel: exakte Platzierung von Layout im Browser schwierig / aufwendig
schwierige Wiederverwendung von Elementen
Ziele
präzise Kontrolle über Erscheinungsbild, auch bei unterschiedlichen Browsern
single point of change, Reduzierung überflüssigen Codes
Trennung Inhalt und optische Darstellung
Styleinformationen über
fester Bestandteil der XHTML-Seite (innerhalb head)
durch Link auf externe CSS
über Import-Direktiven
als Inline-Styles (nur für jeweiliges Element)
Beispiel:
h1 { font-size: 10pt; color: #FF0000; font-style: italic; }
p { font-size: 8pt; letter-spacing: 0.2mm; word-spacing: 0.8mm; }
Selektoren
Elementselektoren: h1, h2, p
kontextsensitive Selektoren: li b
Klassenselektoren: .wichtig
ID-Selektoren: #start
Pseudo-Klassen / Pseudo-Element-Selektoren:
a:visited, p:first-letter
Werte
Längenmaße
absolut (in, cm, mm)
relativ (px)
Prozentwerte width: 50%;
Farben: #RRGGBB, #RGB, rgb(rrr,ggg,bbb), Schlüsselwörter (black, green, olive, red)
Box-Modell: margin -> border -> padding -> Inhalt mit height/width
Hintergrund
background-color:
background-image:
background-attachment: scroll | fixed;
background-position: prozent | top | left | ..;
background-repeat: repeat | repeat-x | no-repeat;
Link-Status
a:link
a:active
a:visited
a.navigation:link (Subklassen)
Schriftanpassung
Schriftgröße (font-size), Farbe (color), Schriftart (font-family), Schriftfamilie (font-family)
Text-Transformation
text-transform: capitalize | uppercase | lowercase;
Text-Dekoration
text-decoration: underline | overline | line-thourgh | blink;
Text-Ausrichtung
text-align: left | right | center | justify;
Ausblenden
display: none;
3 Anwendungsentwicklung mit PHP
Grundlagen
aktuell PHP 7
verbesserte Objektorientierung (Überladung, Kapselung)
Clientseitiges Skripting
Skripte in XHTML-Seite eingebettet
definierte Funktionen durch objektbezogene Ereignisse aktiviert -> manipulieren wiederum Objekte
serverseitige Open Source-Skriptsprache
serverseitiger Skriptcode auf Server geladen
bei jedem Aufruf geparsed / interpretiert
für Webeinsatz ausgelegt (im Gegensatz zu Perl)
Beispiele: Wikipedia, Typo3, Wordpress, Facebook
Vorteile
einfach erlernbar, geringer Entwicklungsaufwand
gute Tool-Unterstützung (VS Code, Eclipse) und weit verbreitet
freie Software -> keine Lizenzkosten
Nachteile
historisch inkonsistent gewachsen (z.B. OOP erst später aufgenommen)
-> uneinheitliche Programme und Syntax
Robustheit (z.B. schwache Typisierung problematisch)
unsaubere Programmierweisen, unsichere Serverkonfiguration -> Servereinbrüche
Interpretation -> Performancenachteile
weniger skalierbar (als z.B. Java)
Funktionen
Beispielfunktion mit Übergabewerten
function quadrat($num) {
return $num * $num;
}
echo quadrat(4);
späte Bindung: Funktionen können an beliebiger Stelle definiert werden
Datentypen
skalar (Boolean, Integer, Float, String)
zusammengesetzt (Array, Object)
müssen nicht explizit angegeben werden
If-Bedingung
<?php if($var1==$var2) {
$var3=0;
} else {
$var3=1;
}
?>
Schleife
<?php
$count = 0;
$zahl = 5;
while ($count < $zahl)
{
echo $count,", ";
$count++;
}
?>
<?php
for ($count = 0; $count < $zahl; $count++) {
echo $count,", ";
}
?>
Arrays
$array = array("eins", "zwei", "drei");
Zugriff: echo $array[2];
assoziative Arrays
$array = array("Eins"=>"A", "Zwei"=>"B", "Drei"=>"C");
echo $array["Eins"];
Ausgabe aller Elemente
foreach ($array as $key => $element) {
echo $array[$key];
echo "<br>";
}
oder echo $element;
weitere Funktionen
count($array), in_array($array, $element),
array_push($array, $element), array_pop($array, $element)
Sortieren nach Schlüsseln:
ksort($array), krsort($array)
Sortieren nach Werten:
asort($array), arsort($array)
E-Mail Versand
mail($empfaenger, $betreff, $text, "From: $sender");
Datenbankzugriff
$pdo = new PDO('host', 'iser', 'pw');
$abfrage = "SELECT * FROM verein";
$result = $pdo->query($abfrage);
foreach($result as $row) {{
echo $row['name'] ... $row['date'];
}
Model-View-Controler:
Laravel Framework
Client ruft Controller ruft Model und View auf
Model stellt View Daten bereit, View zurück an Client
frei verfügbares MVC Framework (MIT-Lizenz)
umfangreiches Ökosystem,
seit 2011 kontinuierlich weiterentwickelt
Vorteile
vordefinierte Struktur
Designer können ohne Kontakt mit Code Aussehen verändern
Nachteile
umfangreiches Softwarepaket
Vorgehen
Webserver mit PHP installieren -> Composer installieren -> Laravel installieren -> Anwendung mit Laravel entwickeln
4 Datenbanken
Datenbanken
Daten: zur Verarbeitung zusammengefasste Zeichen
Datenqualität: Güte der Daten
-> präzise und verlässliche Aussagen
mangelhafte Datenqualität
-> geringere Güte von Informationen
-> Gefahr von Fehlentscheidungen
-> auch Zulieferer / Abnehmer betroffen
Glaubwürdigkeit, Nützlichkeit, Interpretierbarkeit, Schlüsselintegrität
Informationen: handlungsbestimmtes Wissen über Zustände / Vorgänge in der Wirklichkeit -> Reduktion von Ungewissheit
Datenbanksystem
Zugriff:
Programme -> logische Datei -> DBS -> DB mit physischen Dateien
Gründe
Daten müssen persistent gespeichert werden
Datenbanken bieten standardisierte Konzepte (SQL, ERM..)
Hohe Performance
Vorteile DBMS
Redundanzabbau
Datenunabhängigkeit
Datenkonsistenz
Datenintegrität
Datensicherheit
Arten
relational (MySQL..)
objektorientiert (DB4O..)
dokumentenorientiert (CouchDB..)
Key-Value (Google BigTable..)
Graphendatenbanken
Aufbau DBMS
Speichermeiden (greifen auf internes Modell zu)
Internes Modell
DSDL (Data Storage Description Language)
konzeptionelles Modell
DDL (Data Definition Language)
externes Modell A, B..
DQL (Data Query), DML (Data Manipulation Language)
Benutzer / Programme (greifen auf externes Modell zu)
SQL
Structured Query Language
Abfrage- / Manipulationssprache für relationale Datenbanken
Tabellen anlegen / löschen
CREATE TABLE
ALTER TABLE
DROP TABLE
Datenbankabfragen
Erweiterte Selektion (Filterung mit Suchbedingung):
SELECT spalte FROM tabelle WHERE suchbedingung
Suchbedingungen kombinieren:
WHERE bed1 AND bed2
In Liste:
WHERE spalte IN (wert1, wert2..)
Regular Expression (Platzhalter):
WHERE spalte LIKE '%' oder '_'
Sonderfunktionen
Aggregatsfunktionen
Durchschnitt AVG(), Zählen COUNT(), MAX(), MIN()
skalare Funktionen
Groß-/Kleinbuchstaben UCASE(), LCASE()
mathematische Operationen
Division DIV(), Wurzel SQRT(), Modulo MOD()
GROUP BY: Zeilen mit übereinstimmenden Werten in einer Spalte gruppieren
HAVING: Filterung von Gruppen
(Aggregatsfunktionen wie COUNT hier möglich)
Reihenfolge:
SELECT .. FROM .. WHERE .. GROUP BY .. HAVING ..
JOIN: Ausgabe zusammenhänger Datensätze aus unterschiedlichen Tabellen
standardmäßig INNER JOIN: nur Datensätze, die in allen Tabellen vorkommen
OUTER JOIN: alle Datensätze werden ausgegeben
SELECT .. FROM tab1 JOIN tab2 ON tab1.pk=tab2.pk WHERE ..
Datenbankmanipulationen
Datensätze löschen / ändern / einfügen
DELETE FROM tab WHERE bedingung
UPDATE tab1 SET spalte1 = wert1, spalte2= wert2 WHERE bedingung (z.B. Tupel-ID)
INSERT INTO tab [(spalte1, spalte2)] VALUES (wert1, wert2)
mit Subquery:
INSERT INTO tab1
SELECT spalte3, spalte4
FROM tab2
Benutzer- / Rechteverwaltung
JDBC (Java Database Connectivity)
JPA (Java Persistence API)
5 Kommunikation
Verteilte Anwendungen
Beispiel
Middleware API: Anwendung greift auf Middleware zu
Socket API: Middleware, Standarddienste im Internet oder Anwendung greifen auf TCP / UDP über IP zu
Middleware
Konzept
einheitliche Schnittstelle zwischen einzelnen Komponenten verteilter Systeme
Verbindungsschicht und Basis für Nachrichtenaustausch
Einsatz: Client-Server-Architekturen, Peer-to-Peer,
Integration alter in neuer Systeme
Arten
Datenzugang
Datenbank-Middleware
Datenbankschnittstellen
offene, standardisierte Schnittstelle
-> ermöglicht Zugriff auf heterogene Datenbanken
Datenbanktreiber übersetzen Abfrage in spezifische Abfragesprache / Protokolle des DBMS
Beispiele:
Open Database Connectivity (ODBC)
Integrated Database Application Programming Interface (IDAPI)
Distributed Relational Database Architecture (DRDA)
liefert nur kleinsten gemeinsamen Nenner an Funktionalität
Datenbankgateways
herstellerabhängige Schnittstelle:
Kommunikationszentrale für Datenbankzugrif
Funktionalitäten
Datenbankzugang
Abfrage-Optimierung / - Übersetzung
Datentyp-Konvertierung
Fehlerbehandlung, Sicherheitsfunnktionalitäten
höhere Funktionalität ggü. Datenbankschnittstellen
Funktionszugang
Zugangsschaffende Middleware
Screenscraper
extrahiert Daten aus bestehender Ausgabe
Vorteil
Anpassung der Client-Oberfläche an Weiterentwicklung
keine Änderung am Serverprogramm nötig
Wrapper
Verknüpfung von objektorientierter und prozeduraler Programme
Überführung prozeduraler Funktionen in objektorientierte Methoden
Simulation einer objektorientierten Anwendungskomponente
Vorteil
problemlose Eingliederung in objektorientierte AS
Wiederverwendbarkeit prozeduraler Anwendungen
Zugreifende Middleware
RPC: Remote Procedure Call
Aufruf auf entfernten Computern befindlicher Prozeduren
Methodenaufruf nahezu transparent
-> Aufruf einer entfernten Methode ähnelt Aufruf einer lokalen Methode
Systemschnittstelle, die es Programmierer erlaubt, netzwerkspezifischen Code aus Applikationslogik auszblenden
Konzept
Clientseite: Stubs
Serverseite: Skeleton
Arten
synchroner Remote Procedure Call
aufrufender Prozess übergibt entfernter Methode Parameter
-> aufrufende Methode bearbeitet Anfrage
-> aufgerufene Methode schickt Ergebniswerte zurück
asynchroner Remote Procedure Call
Asynchronität -> höhere Flexibilität / Effektivität
gepufferter asynchroner Remote Procedure Call
RMI: Remote Method Invocation
Methodenaufruf eines entfernten Java-Objekts
-> Java-Implementierung von RPC
MOM: Message Oriented Middleware
Kommunikation auf Basis von Nachrichten
keine Beschränkung hinsichtlich Nachrichteninhalt
übermittelte Informationen
Methodenaufruf und notwendige Parameter
weitere optionale: Dateninformationen, Kontrollinformationen
vorzugsweise bei asynchroner Kommunikation eingesetzt
ORB: Object Request Broker
übernimmt Kommunikation und Interaktion der Objekte
Grundlage für CORBA:
Common Object Request Broker Architecture
Objekte erhalten eine systemweit eindeutige Referenz
IOR: Interoperable Object Reference
ermöglicht Aufruf des Objekts unter Nutzung des ORB
von OMG standardisiert, von Sun und IBM entwickelt,
ORBs angeboten von IBM, BEA, Weblogic Server..
Architektur
Interoperabilität zwischen 30 Plattformen
Programmiersprachen für Realisierung: C++, Java, Eiffel
Schnittstellendefinition auf Basis von IDL:
Interface Definition Language
nicht programmiersprachenspezifisch:
eigene Schnittstellenbeschreibungssprache von COBRA
anschließend Übersetzung in gewünschte Sprache
Stub: Kodierung der Nachricht
Skeleton: Dekodierung der Nachricht
Kernproblem: Übermittlung der IOR
direkt zwischen Client-Server oder über Broker
SOA: Service Oriented Architecture
Webservices
Definition
"Software application identified by a URI.
Interfaces and bindings are capable of being defined, described and discovered as XML artifacts.
Supports direct interactions with other software using XML based messages exchanged via internet-based protocols."
WDSL: describe
UDDI: advertise and syndicate
SOAP: communicate
Eigenschaften
Umsetzung der SOA: Service-Oriented-Architecture
Dienst wird über Schnittstellen beschrieben
Dienst wird über Netzwerk angesprochen
grobere Granularität als herkömmliche Objekte
bieten anwendungsorientierte Dienste (Business Services)
Kapselung und Modularität
in sich abgeschlossene Einheiten (Module)
kapseln eine bestimmte fest definierte Funktionalität
Ablauflogik im Modul bleibt Nutzer verborgen (Black Box)
fördert Mehrfachverwendung
lose Kopplung
flexibler Austausch der Servicekomponenten möglich
Prozessorientierung und Komposition
Erstellung von AS auf Basis von Web Services
Erstellung sogenannter Web-Service-Ketten
dynamische Integration
dynamische Lokalisierung / Einbindung zur Laufzeit
Rollenmodell
Anbieter: Web Service entwickeln -> beschreiben -> veröffentlichen -> verwalten ( -> zurückziehen)
Nachfrager: Web service suchen -> einbinden -> nutzen
Schichtenmodell
UDDI: Auffinden
WSDL: Beschreibung
SOAP, XML-RPC: XML-Nachrichtenmodell
HTTP: Transport
SOAP: Simple Object Access Protocol
XML-Kommunikationsprotokoll zum Informationsaustausch zwischen zwei Anwendungskomponenten
Ziele: Einfachheit, Erweiterbarkeit
unabhängig von Programmiersprache, Plattform, Transportprotokoll
dokumentenorientierte Übertragung beliebig komplexer XML-Strukturen
Unterstützung diverser Nachrichtenmuster,
Internationalisierungsmöglichkeiten
WSDL: Web Service Description Language
Metainformationen über Funktionalität und Schnittstellen sowie Einbindung von Diensten
abstrakte Beschreibungssprache,
unabhängig von Plattform / Programmiersprache
UDDI: Universal Description, Discovery and Integration
globales Verzeichnis mit Web Services und Beschreibungen durch Anbieter
Spezifikation:
Definition des Aufbaus, Beschreibung der XML-basierten Daten, Beschreibung der API
Umsetzung:
UDDI-Business-Registry, Zugriff über Betreiberseiten
Datenklassifikation
weiße Seiten
allgemeine Informationen über Unternehmen
(Name, Adresse, Ansprechpartner..)
gelbe Seiten
Klassifizierung Unternehmen und angebotene Dienste
(Branche, Produkte etc.)
grüne Seiten
technische Informationen über den Dienst
(Verweise auf technische Spezifikation, z.B. WSDL)
Bewertung
Vorteile
plattform- / sprachenunabhängig
basiert auf etablierten Internettechnoilogien
lose Kopplung
Flexibilität:
Wiederverwendbarkeit, Erweiterbarkeit, Skalierbarkeit
Modularität der Dienste
breite Unterstützung aus Industrie, niedrige Einstiegsbarrieren
Nachteile
Verwendung von XML -> großer Overhead
evtl. schlechte Performance
wichtige Mechanismen fehlen noch
-> Sicherheit, Transaktionalität, Abrechnung
direkte Netzwerkprogrammierung vs. Middleware
direkte Netzwerkprogrammierung
direkte Kontrolle aller Parameter
Flexibilität bei Entwicklung neuer Protokolle
evtl. bessere Performance
Problem: Datenrepräsentation
Middleware
gute Eignung für Anwendungsentwicklung:
Datenrepräsentation, Objektlokalisation..
Problem: viel Overhead bei Übertragung
5 Native Entwicklung mit Android
Android
freies Betriebssystem, Open-Source-Projekt auf Linux
entwickelt durch Open Handset Alliance (Leitung Google)
Mitglieder aus:
Netzbetreiber (T-Mobile..)
Gerätehersteller (LG..)
Halbleiterindustrie (Intel..)
Softwareindustrie (eBay..)
Lösungsanbieter (accenture..)
Funktionen
GUI für mobile Endgeräte
Konnektivität: WLAN, Bluetooth, GSM..
Organizer (Addressbuch, Kalender) und Chrome-Browser
Java Virtual Machine -> Java-Apps
Multimedia-Unterstützung inkl. Kamera
Integration von Google-Diensten
Software-Distribution über App-Store oder alternative Anbieter
Sicherheit bei App-Ausführung
für jede App ein separater Benutzer und Gruppe
über AndroidManifest.xml kann eine App notwendige Berechtigungen anfordern
Komponenten
Activity
repräsentiert Screen, interagiert i.d.R. mit Benutzer
Fragment: Teil des UI innerhalb einer Activity mit eigenem Lifecycle
View und ViewGroup
Oberklasse für Steuerelemente (z.B. Buttons)
ViewGroup fasst zusammengehörige View-Elemente zusammen
Intent
"abstract description of an operation to be performed"
Starten einer Activity, Senden zu BroadcastReceiver oder Kommunizieren mit einem Service im Hintergrund
explicit intent: bestimmte Komponente direkt ansprechen
implicit intent: Android ermitteln lassen, welche Komponente für Intent zuständig ist
Widget
UI Elemente (Mini-Programm) auf Homescreen
muss nicht gestartet werden, wird direkt sichtbar ausgeführt
Service
Hintergrundverarbeitung ohne Benutzerschnittstelle
(länger laufende Operation ohne Interaktion mit Nutzer)
kein eigener Prozess, kein separater Thread
ContentProvider
Datenzugriff, Kapselung, Mechanismen für Datensicherheit
Zugriff auf entsprechenden ContentProvider anderer Apps
(z. B. Kalender)
BroadcastReceiver
empfängt mit sendBroadcast() gesendete intents
bei Ereignis (z.B. Anruf, SMS..) wird ein Rundruf abgesetzt, um alle Interessierten darüber zu informieren
Vorteile
umfassende Integration ins System, alle APIs benutzbar
Leistungsumfang der Hardware ausschöpfen
-> Performance
Distribution über Google Play
keine Internetverbindung notwendig, lokale Datenspeicherung
6 Webbasierte und hybride Entwicklung
Entwicklung mit UI-Frameworks
Motivation
Heterogenität mobiler Betriebssysteme
-> Plattformunabhängigkeit
keine Installation notwendig -> schnelle Updates
einfaches Erstellen mit bekannten Technologien
Zeit- / Kostenersparnis
bewährte Komponenten -> praxiserprobt
leichter Einbezug fremden Knowhows / Best Practices
viele Ressourcen verfügbar -> schnelle Einarbeitung
Umwandlung in hybrid möglich
jQuery Mobile
großes Open Source Projekt (MIT und GPL Lizenz)
kompatibel zu allen bedeutenden Plattformen
nutzt HTML5: weniger Scripting
AJAX-basiertes Navigationssystem
Einbindung aus jQuery-CDN oder auf eigenem Server
Elemente mit data-role definieren
data-role:
page, header, content, listview
Beispiel Auswahlliste:
<ul data-role="listview" data-inset="true" data-filter="true">
<li>...</li> <li>..</li> </ul>
Theme-Zuordnungen mit data-theme,
Animation mit data-transition,
zurück mit data-rel="back"
Formulare
Formular: <div data-role="fieldcontain">
Radiobuttons: <input type="radio" .. />
Slider: <input type="range" .. />
Checkbox: <input type="checkbox .. />
Flip Toggle: <select data-role="slider" ...>
<option value="off">Nein</option>
<option value="on">Ja</option>
ThemeRoller
Rapid Prototyping -> Oberfläche bequem zusammenklicken
automatisiert als HTML exportieren
Bootstrap
Framework zum Entwickeln von webbasierten Oberflächen
-> HTML, CSS und JavaScript
vorgefertigtes anpassbares Layout (CSS)
Vielzahl an Themes
Klassen für Buttons:
btn-default, btn-primary, btn-danger, btn-success..
Klassen für Tables:
table-striped, table-bordered, table-hover, table-condensed
Klassen für Bilder:
img-rounded, img-circle, img-thumbnail, img-responsive
Klassen für Dropdown:
<ul class="dropdown-menu" aria-labelledby="buttonId">
Klassen für Navigationsbar:
<ul class="nav nav-tabs|nav-pills nav-justified">
Klassen für Alerts:
alert-success alert-info alert-warning alert-danger
Klassen für Panels:
panel-primary panel-success panel-info panel-warning panel-danger
Klassen für Fortschrittsbalken:
progress-bar-success progress-bar-info progress-bar-danger progress-bar-striped
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style=width:80%"
responsives Layout
-> automatische Anpassung an Gerätebreite
Grid System:
Layout durch Zeilen und Spalten
maximal 12 Spalten, die zusammengefasst werden können
4 Grid Klassen: xs, sm, md, lg
responsive Elemente z.B.:
class="col-xs-6 col-md-4"
AJAX: Asynchronous JavaScript and XML
Nachladen von Daten im Hintergrund:
XMLHttpRequest-Klasse
JavaScript-Klasse, einfach zu nutzendes Interface
Motivation
Look/Feel von Desktopanwendungen
erhöht Usability von Webapplikation
kein ständiger vollständiger Reload mehr notwendig
weniger Wartezeiten
Einsatz z.B.: Google Maps / Mail, Facebook, Office 365
Kommunikation mit AJAX
Webbrowser:
Benutzeroberfläche schickt JavaScript an AJAX-Engine
-> AJAX-Engine schickt HTTP-Anfrage an Webserver
-> Webserver schickt XML, JSON, HTML/CSS an AJAX-Engine
-> AJAX-Engine schickt HTML/CSS zurück an Oberfläche
keine Auslieferung der vollständigen Seite,
sondern nur von Seitenfragmenten oder Daten
asynchron: Benutzer muss nach Anfrage nicht mehr warten, während Server Anfrage bearbeitet
Antworten auf Anfragen können in anderer Reihenfolge zurückkommen
Komponenten
serverseitiges Scripting
Datenbankzugriff und Datenaufbereitung
clientseitiges Scripting
JavaScript Manipulation und Events
Skripte sind in XHTML-Seite eingebettet
definierte Funktionen durch objektbezogene Ereignisse aktiviert, manipulieren wiederum Objekte
XHTML & CSS
Darstellung
XML & DOM oder JSON
Datentransfer und Adressierung/Änderung
Codebeispiel
direkt in DOM einfügen:
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$("#load_basic").click(function() {
$("#load_target").html(load_bild).load(loadUrl);
</script>
<a id="load_basic">Daten nachladen</a>
<div id="load_target" />
beim Klick auf Link wird URL in div geladen
Serverseitiges Skript, php:
<?php
header('Content-Type: text/plain');
sleep(rand(3, 12));
print 'ok';
?>
Herausforderungen
hohe Serverlast
Zurück-Button, Bookmarking
neue Sicherheitsprobleme
Debugging
Hybride Entwicklung: Cordova
Cross-Compiler-Bridge: zwischen webbasiertem Code und nativer Anwendung auf Endgerät
Wrapper Frameworks
nativer Ansatz:
native Anwendung mit Systembibliotheken auf Endgerät
hybrider Ansatz: Webanwendung als WebView in nativer Anwendung (mit Systembibliotheken auf Endgerät)
weitere Module & APIs in nativer Anwendung
webbasierter Ansatz: Webanwendung (HTML, CSS, JS) im Webbrowser (mit Systembibliotheken auf Endgerät)
Apache Cordova:
Webapplikationen als App deployen
-> Vertrieb über App-Store möglich
Multi-Platform-Deployment:
iOS, Android, Windows, macOS, Chromium Engine
geräteangepasste Bibiliothek für jede Plattform
kostenlos & Open Source
Zugriff auf Geräte-APIs und -Features mit JS
z.B. Beschleunigungssensor, Kamera, Kompass, Geolocation, Offline-Storage, Benachrichtigungen..
meisten Features allein mit JS nicht zugänglich
Einbindung im Header (als erste Datei):
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
Einbindung in z.B. Android: .jar im Projektordner libs
Codebeispiel: Zugriff auf Hardware-Infos
document.addEventListener("deviceready", deviceInfo, true);
Infos aufrufbar unter:
device.platform; device.version; device.name; screen.width; ..