Web Application Engineering & Content Management VU 2.0

Transkript

1 Web Application Engineering & Content Management VU 2.0 Vortragsunterlagen zur Vorlesung an der Technischen Universität Wien Wintersemester 2013/2014 Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

2 Blockvorschau / Status Organisatorisches Web Application Engineering Web Application Management Basis-Technologien, Konzepte, WAS Modelle des Web Application Engineerings Kategorisierung, Spezifika Vorgehensmodelle, XP Architektur und Performance Web Content Management CMS Theorie, Einsatzbereich, Nutzen, Spezifika Web Commerce Sicherheitserweiterungen, moderne Technologien Web 2.0/AJAX 2

3 Organisation An folgenden Tagen werden Veranstaltungen zum Thema Web Application Engineering & Content Management angeboten: Vorlesung von bis Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 Mittwoch VO 17:30 19:00 3

4 Organisation An folgenden Tagen werden Veranstaltungen zum Thema Web Application Engineering & Content Management angeboten: Übungen von bis Dienstag LU 13:00 18:00 Freitag LU 10:00 17:30 Prüfung Mittwoch von Prfg 17:30 4 bis 19:45

5 Unterlagen zur LVA Powerpoint Vorlagen am Web

6 Agenda Web Application Engineering Grundlagen Rückblick Realisierung von Web Applikationen Klassifizierung von Web Applikationen Problematiken des Web Application Engineerings Dynamische Contents und adequate Technologien Modelle der Web-Umsetzung Framework-Lösungen, Web Application Server Konzepte und Technologien 6

7 Motivation Def.: Eine Web-Anwendung ist ein Softwaresystem, das auf Spezifikationen des World Wide Web Consortium (W3C) beruht und Web-spezifische Ressourcen wie Inhalte und Dienste bereitstellt, die über eine Benutzerschnittstelle, den Web-Browser, verwendet werden. Software-Aspektd.h. statische Seiten alleine stellen keine Web-Anwendung dar Benutzerschnittstellen-Aspekt d.h. Web Services alleine stellen keine Web-Anwendung dar 7

8 Motivation Definition Web Engineering Web Engineering ist die Anwendung systematischer und quantifizierbarer Ansätze(Konzepte, Methoden, Techniken, Werkzeuge), um Anforderungsbeschreibung, Entwurf, Implementierung, Test, Betrieb und Wartung qualitativ hochwertiger Web-Anwendungen kosteneffektiv durchführen zu können Web Engineering bedeutet auch die wissenschaftliche Disziplin, die sich mit der Erforschung dieser Ansätze beschäftigt Kategorisierung von Web Applikationen 8

9 Motivation Grundprinzipien des Web (Application) Engineering Klar definierte Ziele und Anforderungen Systematische Entwicklung einer WebAnwendung in klar definierten Phasen Sorgfältige Ausgestaltung dieser Phasen Kontinuierliche Überwachung des gesamten Entwicklungsprozesses 9

10 Semantic Web Kategorien von Web-Applikationen Komplexität Recommender Systeme Syndication Wissensmanagement Ubiquitäres Web Personalisierung Portalorientiert Geo-Info-Dienste Multi-Plattform-Services Nachrichtenportale Online E-Commerce Malls Unternehmensportale Community-Portals/Auktionen Kollaborativ E-Education Virtuelle Arbeitsräume Workflow-basiert E-Government Chatrooms Patienten-Workflow Kunden-Prozessorientierung Transaktional Interaktiv Online-Banking Shop-Lösungen Buchungs-/Reservierungssysteme Online Museum News-Seiten Fahrplanauskunft Dokumentzentriert Statische Homepage Firmenpräsentation Produkt/Projekt-Beschreibung Entwicklungshistorie 10

11 Web Application Engineering & Content Management VU 2.0 Basistechnologien des Web Application Engineerings Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

12 Das Internet Das Internet ist ein loser Verbund kooperierender Computer-Netzwerke ohne zentrale Kontrolle Grundlegende Protokolle (IP) für die weltweite Datenkommunikation Medium/Plattform für eine Vielzahl von verfügbaren Diensten Zugriff auf entfernte Ressourcen, Datentransfer , Usenet News ( Newsgroups ) World-Wide Web, etc. 12

13 Das World Wide Web Globales Informationssystem am Internet Was ist Hypertext? Hypertext Markup Language (HTML) HTML legt nur die Struktur fest Darstellung ist abhängig vom Browser, CSS Hypertext Transfer Protocol Uniform Resource Locator/Identifier (URL/URI) Clients/Browser <-> Server 13

14 HTTP Das Hypertext Transfer Protokoll; Diskussion von Protokollspezifika für das Web Engineering Einfaches und schnelles Protokoll, geeignet für ein verteiltes Hypermedia-Informationssystem Client/Server Ansatz Zustandslos (stateless) Meta-Information 14

15 Status Codes in HTTP Statuscode 200 (ok) Anzeige des Dokuments intern vs. extern (mime-type) Statuscode 302 (redirect) Nocheinmal bei neuer Adresse versuchen trailing / s Statuscode 4xx (error) ==> Fehlermeldung 401 ==> access denied, authenticate 403 ==> Zugriff verweigert, Filerechte Statuscode 5xx (internal error) 501 internal server error 15

16 Basic Authentication Benutzer versucht Dokument zu holen Server verweigert es mit dem Hinweis auf "realm" Client veranlasst Benutzer sich in diesem realm zu authentifizieren......und wiederholt dieselbe Abfrage nochmals Password kommt in base64 mehr dazu im Block Web Security 16

17 Einsatz Basistechnologien im Web Engineering Moderne Softwaresysteme / Applikationen am WWW befolgen die Regeln der Basistechnologie implizit (z.b. Entwicklungssystem sieht es so vor, ASP, servlets, Ruby, Python, Mason, etc.) explizit (SW-Entwicklung muss Regelwerk explizit einhalten, z.b. CGI-Programmierung) Administration meist eine Ebene höher komponenten-orientierte Systeme Content Management Systems 17

18 Web Application Engineering & Content Management VU 2.0 Realisierung/Umsetzung von Web Applikationen Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

19 Web Service Engineering: Das Problem Umsetzung und Management von komplexen WWW Sites spezielle Anforderungen, Management eines lokalen Hyperlink Modells, Integration von statischen und dynamischen Seiten,... Bestehende Systeme für Implementierung, manche für Design, kaum welche für den gesamten Lebenszyklus Web Datenformate sind endformatiert (überwiegend) Keine Wiederverwendung von Gemeinsamkeiten, schlechte Verwaltbarkeit / Wartbarkeit Einerseits Systeme zur reinen Content & Design-Verwaltung Andererseits Programmieraufwand für (serverseitige) Applikation(en/-slogik) Designer und Programmierer können kaum Überschneidungen der Aufgabenbereiche nutzen 19

20 Verschiedene Ansätze der Realisierung HTML Programmierung Seiten-basierende Editoren Netscape Composer, HotMetal, Dreamweaver,... Script-basierende Seitenerzeugung Interpreter, Site-basierende Editoren MS Prozessoren, ASP, PHP Frontpage, NetObjects Fusion, WebObjects, CMS Object-orientierte Site Engineering Werkzeuge W3Objects, JESSICA, Mason 20

21 Verschiedene Ansätze der Realisierung Jeder Ansatz führt zum selben Ergebnis: Der Benutzer sieht HTMLDokumente mit Hilfe seines Browsers Wie findet man den richtigen Ansatz Anforderungen der Site überprüfen Systemabhängigkeiten überprüfen Infrastrukturelle Vorgaben beachten Ressourcen (Personal, Erfahrung, Finanzen, Zeit) beachten Bei Fremdentwicklung oft Paketlösungen Auswahl ohne technisches Verständis oft schwer, da die Ansätze nicht direkt vergleichbar sind Vorgehensweise etwa analog SW-Engineering (Modelle) 21

22 Web Service Engineering Daten Organisation WWW Service Architektur Management der Relationen Requirements Analysis Design Daten Identification WWW-Service Spezifikation Implementation & Testing Deployment Datentransfer Service Implementierung Hyperlinks Life Cycle einer WWW Site Web Modell vs. Verzeichnis Modell Web Server Management 22 Maintenance Informationsänderungen Änderungen im Web Modell Optimierungen

23 Extreme Programming (XP) Vorschau moderne Methoden: Viele kleinere Iterationen, mehrere Releases 23

24 Extreme Programming (XP) Vorschau moderne Methoden: Begriffe, Techniken und Werkzeuge 24

25 Weitere Herausforderungen komplexer Web-Applikationen Sicherheit und Zuverlässigkeit Eigener Block hierfür Leistungsfähigkeit und Performanz Architektur, Redundanz N-tier Architekturen, Proxying, Reverse Proxying, Server Farmen, Cluster Datenbankcluster, persistente Verbindungen und Caching Management und Wartung Wie pflegt man professionell komplexe Applikatonen, SW-Wartung, Planung, Kontrolle 25

26 Web Application Engineering & Content Management VU 2.0 Web-Applikationsspezifika in der Umsetzung Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

27 Umsetzung statischer vs. dynamischer Inhalte Umsetzung von relativ statischer Information am World Wide Web Private Homepages Kleine Informationssites (5 pages) Abbildungen von gedruckter Information im WWW Umsetzung durch HTML-Editoren Site Editoren Historischer Blick auf Frontpage 27

28 Historisch: Frontpage Page Editor (simples Proof of Concept, Basisanforderung) Mit dem Page Editor Konnten bereits einzelne Seiten WYSIWYG erstellt werden 28

29 Frontpage Navigation Editor Mit dem Navigation Editor können hierarchische Navigationsstrukturen umgesetzt und veranschaulicht werden 29

30 Frontpage Theme Editor Mit dem Theme Editor können verschiedene Stile für das Layout der Site ausgewählt werden 30

31 Integration und Umsetzung dynamischer Inhalte Umsetzung von Informationen, die zur Zugriffszeit generiert werden Aktuelle Informationsdienste (Wetterbericht, Verkehrsaufkommen, Tagesgeschehen, Börsenkurse, ) Dynamische Informationsquellen (Datenbanken, Programme) Integration der bestehenden Anwendungen über Schnittstellen an den WWW Server Script-Editoren Programmiersprachen Template-Systeme Redaktionssysteme 31

32 Integration und Umsetzung dynamischer Inhalte Dynamische Inhalte aus Legacy Applications Eine Applikation, die relevante Informationen liefert, welche als solche in das WWW eingebunden werden soll (Lagerbestandssystem, Katalog, Bibliothekssystem, Telefonbuch, ) Moderne Datenbanken Die Organisation besitzt bereits eine Datenbank und will deren Inhalte über das Web anbinden Managementsysteme Teure Systeme, die die Steuerung eines ganzen Großbetriebes übernehmen sollen direkt über WWW erreichbar sein (SAP) Anbindung über vorhandene oder zu programmierende Schnittstellen 32

33 Integration und Umsetzung dynamischer Inhalte Lösungen haben eine 3+-tier Architecture Browser Server 33 Legacy Application

34 CGI - Common Gateway Interface Das Common Gateway Interface ist eine Schnittstellendefinition, die eine Datenkommunikation zwischen Browser, Server und Legacy Application zur dynamischen Dokumenterstellung ermöglicht. HTML Formulare CGI vs Server API Submit mit POST oder GET application/x-www-form-urlencoded Umgebungsvariablen 34

35 CGI ENV

36 CGI Zustände Das HTTP Protokoll ist zustandslos, d.h. der Server sieht verschiedene Zugriffe auf ihn als vollkommen unabhängig an. Mit CGI können Zustände festgehalten werden. in URLs abspeichern in HIDDEN FIELDS abspeichern Cookies verwenden Einsatz in kommerziellen Anwendungen 36

37 CGI Software Perl CGI.pm use CGI; $query = new CGI;... print $query->header; $query->param(feldname) C Uniform Library of Common Code (CERN) Java,JSP,JSF PHP,Python,Ruby,Mason,ASP 37

38 CGI Databankanbindung API verwenden Oracle API ODBC Language Modules (z.b.: MySQL.pm) Database Connectors W3-mSQL JDBC Apache::DBI 38

39 Alternativen zu CGI CGI ist nicht die einzige Option, um dynamisch Web-Inhalte zu erzeugen: SSI (Server Side Include) NSAPI, ISAPI Befehle, eingebettet in HTML-Kommentare, werden on-the-fly ausgeführt Application Programming Interfaces für proprietäre Lösungen ASP, PHP Interpreter, die in HTML eingebettete Befehle umsetzen Servlets, FastCGI Ähnlich wie CGI, aber der Interpreter ist Teil des Servers, d.h. bessere Performance, schnelleres Antwortzeitverhalten 39

40 Web Service Engineering Konzepte zur Web Service Umsetzung Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

41 Realisierung Gibt es Werkzeuge, die sowohl die Umsetzung von Design, statischen Informationsseiten und die Einbindung dynamischer Inhalte unterstützen? Wie können Spezifikationen der Architektur realisiert werden? MS Visual Studio und Nachfolger (späte 90er) HTML++/Jessica ( ) Moderne Templating Engines (aktuell) 41

42 JESSICA Basiskonzept: Forschungsprojekt JESSICA Design, Implementierung und Wartung von komplexen Web Applikationen Management von Layout und Inhalten Corporate Identities Integration von statischer und dynamischer Information Integration of external data sources, DBs Isolation und Reuse der Daten Verfügbarkeit der Daten auf unterschiedlichen Medien 42

43

44 Objecte in JESSICA JESSICA beschreibt Information als abstrakte und konkrete Objekte Documente werden durch die beschriebene Kombination der Objekte erzeugt Templating Schema wird eingesetzt 44

45 Document Composition Templates werden als Vorlagen für Dokumente verwendet: 45

46 A simple code example <J:PACKAGE NAME= events > <J:OBJECT NAME= event-layout > <HTML> <HEAD><TITLE>Vienna Festival - <J:VAR NAME= eventtitle /></TITLE></HEAD> <BODY><IMG SRC= headerimage.gif > <J:VAR NAME= description > <J:OBJECT NAME= eventpage-trailer SRC= this.page-trailer /> </BODY> </HTML> </J:OBJECT> <J:OBJECT NAME= beuys SRC= this.event-layout > <J:PACKAGE> <J:OBJECT DST= this.beuys.title >Beuys</J:OBJECT> <J:OBJECT DST= this.beuys.description > </J:OBJECT> </J:PACKAGE> </J:OBJECT> </J:PACKAGE> 46

47 Der Jessica Compiler JAVA-basierter Prozessor Auflösung der Jessica Objecte Abarbeitung Iterativer Prozess Abschluss des geparsten Objektbaumes auf Basis einer Fixpunkt-Strategie Methoden des Übersetzerbaus JLex (scanner) und JavaCup (parser) im Einsatz 47

48 Processor Architecture Jessica Documents Pragma1 Jessica Processor 48 Pragma2 Hypermedia Service or XML Documents or...

49 Visualizing the object approach UML-basierter -Editor Templates sind Muster für viele Objekte (Generalisierung) Objekte enthalten andere (Aggregation) Dokument-Objecte stehen über Hyperlinks in Beziehung (Association) Objekte können mit Kommentaren versehen sein (Annotation) 49

50 Beuys in Jazz 50

51 Web Service Engineering Umsetzung komplexer Web-Applikationen Univ.-Lektor Dipl.-Ing. Dr. Markus Schranz staatlich befugter und beeideter Ingenieurkonsulent für Informatik Service Architect pressetext.austria, culturall

52 Web Application Engineering Umsetzung komplexer Web-Applikationen Inhaltliches und technisches Management von Web-Applikationen Funktionale Anforderungen ähnlich der allgemeinen Softwareentwicklung Charakteristika aus Web-Charakteristiken und Web-Architekturen bekannt Programmentwicklung wie SW-Projekt Konzentration of Web-Applikations-Management Einsatz moderner Konzepte und Methoden (XP) 52

53 Web Applikationsmanagement Web Service Management Web Application Services Inhaltliche Wartung Performance und Zuverlässigkeit sind kritisch Web Content Management Redaktionssysteme, Content Content Management Systeme Syndication Applications 53

54 Web Applikationsmanagement Web Application Server Application Server [Forrester Research:] An application server is a software server product that supports thin clients with an integrated suite of distributed computing capabilities. Application servers manage client sessions, host business logic, and connect to back-end computing resources, including data, transaction, and content Web Application Server: Wenn die Server-Komponente (ausschließlich) per Web-Server aufgerufen wird. Java Application Servers, z.b.: Servlet Engines Perl Application Servers, z.b.: Mason 54

55 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Mason Web Application Server moderne Konzepte zum technischen Web Service Management Lösungen für typische Site Development und Management Probleme Wartbarkeit, Performance, Zuverlässigkeit caching, debugging, templating, staging,... über CGI, stand-alone, aber am besten mit Apache::mod_perl 55

56 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Basic Features Simple embedded perl syntax modulare Seiten mit Komponenten Parameter handling über normale Variable Templates (autohandler hierarchy) Objekt-orientierte Techniken eigene Methoden und Attribute per Komponente, verfügbar in den Templates und anderen Komponenten Persistente Verbindungen (DB, Cache) 56

57 Mason Perl-basierter Web Application Server 57

58 Mason Perl-basierter Web Application Server 58

59 Mason Perl-basierter Web Application Server 59

60 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Server Side Caching Einzeldaten, komplexe Datenstrukturen und ganze Komponenten können gecached werden Entsprechende Steurungsparameter entscheiden, ob der Inhalt über den Webserver oder aus dem Mason Cache erzeugt generiert werden soll (individuelle Timeouts, keys, concurrency) sinnvoller Einsatz bei ressourcenintensiven Services (z.b.: Datenbank-Queries, statistics.mc) 60

61 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Mason Templating Mason folgt in der Ablauforganisation dem hierarchischen Aufbau der Verzeichnisse des apache Servers entsprechend der Einstellungen im config-file wird ausgehend vom document root Verzeichnis der template Baum abgearbeitet ( autohandler ) templates haben Zugriff auf Attribute und Methoden von Mason Komponenten 61

62 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Mason Staging Bei hochverfügbaren Services ist oft eine Trennung zwischen Entwicklungs- und Produktionsebene gefragt Der Mason Application Server verbindet beide Leistungen innerhalb eines Webservers, trennt die Bereich logisch sauber voneinander Komponenten können einzeln in die StagingUmgebung kopiert werden, dort bearbeitet und nach gefallen wieder zurückkopiert werden verbundene Dokumente werden von Mason automatisch im richtigen Bereich gefunden 62

63 Web Applikationsmanagement Mason: ein PERL-basierter Web Application Server Mason Debugging und Error Handling Fehler im mason code werden detailliert berichtet und als Fehlerbericht angezeigt Alternativ kann ein default-file geschalten werden (sinnvoll für die Produktionsebene) Fehlerprotokolle werden für die Mason Objekte erstellt, nicht für die Code-Files im Webserver Verzeichnisbaum 63

64 Web Application Engineering Nächste Lehrveranstaltung(en) Einblick in geeignete Architekturen für Web Applikationen Geeignete Konzepte wie extreme Programming Techniken, Werkzeuge und Erfahrungen zur ingenieurmäßigen Entwicklung von WebAnwendungen Konkretes zu CMS, Mason und dem praktischen Übungsbeispiel Security im Web 64

65 Organisation Übungsanmeldung Seit vo2 unter Anmeldung in Gruppen zu 2-3 Personen Gruppennummer relevant für den ersten Übungstermin 12. Nov (DSLab; Zeiteinteilung auch am Web bekanntgegeben, z.b.) : Übungs-KickOff am Nächste VO am