Webtechnologien

Server und REST-Schnittstellen

🎯 Lernziele

Nach dieser Einheit sind Sie in der Lage dazu - die Funktionsweise eines Webservers zu beschreiben - die Antworten eines REST-Webservice zu interpretieren

🧠 Client-Server-Architektur

Client sendet Anfangen
Server: Bearbeitet Anfragen und sendet Antworten
es gibt verschiedene Server für Anwendungsfälle
- Echo-Server
- Email-Server
- Datenbank-Server
- Web-Server

bg right width:400

Anwendungsschicht

In der Anwendungsschicht laufen Dienste (Prozesse)
Diese werden neben der IP über eine Portnummer gekennzeichnet
z.B. Port 80 für die Bereitstellung einer Website als HTML
Dieser wird mit: an die IP angehängt
z.B. läuft die Facebook-Website auf: 31.13.84.36:80
Liste der standardisierten Ports

Webserver

Spezieller Server, der Dienste oder Dateien über das Internet bereitstellt, welche meist im Browser des Client angezeigt werden
Viele Webserver sind unix-basiert, es gibt aber auch andere Betriebssysteme (Apache HTTP & Tomcat, nginx)
Der Webserver wird über sein IP-Adresse erreicht

bg right:30% width:400

Websites

PC mit Browser als Client startet Anfrage
Spezielle Webserver geben Websites als Antwort auf einen GET-Befehl
Antwort ist eine HTML-Datei (spezielle Zeichenkette vergleichbar JSON)

height:400

HTTP (HyperText Transport Protocol)

Protokoll auf Anwendungsschicht mit dem Webserver und Browser kommunizieren
Immer die gleiche Abfolge
- Request dann Response

# Paket mit dem Python wie ein Browser agieren kann
import requests

# Request an Server mit MCI-Website
response = requests.get('https://www.mci.edu/de/')

# HTML Status
print(response.status_code) # 200 - heiß alles OK

print(response.headers['content-type']) # text/html; charset=utf-8 # Also ein HTML-Dokument

print(response.text) # <!doctype html> <html lang="de" class="no-js">   <head> ...

HTTP (HyperText Transport Protocol) mit Port

import requests
import socket

# Specify the URL and port
url = 'https://www.mci.edu'
port = 443  # Default HTTPS port

# Resolve the IP address of the URL
ip_address = socket.gethostbyname('www.mci.edu')
print(f"IP Address of {url}: {ip_address}")

# Make a request to the server on the specified port
response = requests.get(f'{url}:{port}/de/')

# HTML Status
print(response.status_code)  # 200 - everything OK

print(response.headers['content-type'])  # text/html; charset=utf-8 - HTML document

print(response.text)  # HTML content

Schnittstellenansprache über URL

Ansprache einer bestimmten Schnittstelle über die URL
https:<ip/domain>:<port>/<name_der_schnittstelle>?<daten_an_die_schnittstelle>
Wie Funktionen geben Schnittstellen (meist) etwas zurück und stellen einen von außen erreichbaren Service bereit
Uniform Resource Identifier (URI): Überbegriff für einzigartige Bezeichner, z.B. auch ISBN bei Büchern

Adressierung über Uniform Resource Locator (URL)

Uniform Resource Locator
identifiziert und lokalisiert eine Ressource, beispielsweise eine Webseite, über die zu verwendende Zugriffsmethode (zum Beispiel das verwendete Netzwerkprotokoll wie HTTP oder FTP)

<scheme>:<scheme-specific-part>

      |-------------------- Schema-spezifischer Teil ----------------------|
      |                                                                    |
https://maxmuster:geheim@www.example.com:8080/index.html?p1=A&p2=B#ressource
\___/   \_______/ \____/ \_____________/ \__/\_________/ \_______/ \_______/
  |         |       |           |         |       |          |         |
Schema Benutzer Kennwort      Host      Port    Pfad      Query    Fragment

Quelle

GET

Fordert die angegebene Ressource vom Server an
GET weist keine Nebeneffekte auf. Der Zustand am Server wird nicht verändert, weshalb GET als sicher bezeichnet wird.
Rückgabe kann eine JSON sein

# Paket mit dem Python wie ein Browser agieren kann
import requests

# Request an Server mit Citybike-API
response = requests.get(url = 'http://api.citybik.es/v2/networks/stadtrad-innsbruck')
# > {"network":{"company":["Nextbike GmbH"],"href":"/v2/networks/stadtrad-innsbruck","id":"stadtrad-innsbruck"," <...>

POST

Fügt eine neue (Sub-)Ressource unterhalb der angegebenen Ressource ein. Da die neue Ressource noch keinen URI besitzt, adressiert der URI die übergeordnete Ressource. Als Ergebnis wird der neue Ressourcenlink dem Client zurückgegeben.

# Übermittlung und Speichern des Response-Objekts
response = requests.post(url='https://3d3m9.mocklab.io/v1/contacts', data=my_data)

# Überprüfen des Statuscodes und Ausgabe der neuen Adresse
if response.status_code == 201:  # 201 Created
    print("Neue Ressource erstellt unter:", response.headers.get('Location'))
else:
    print("Fehler:", response.status_code, response.text)

Response Object

text/json: Antwort auf die Anfrage z.B. HTML-Datei
status_code: Erfolgsbestätigung oder Fehlernummer
encoding: Codierung der Antwort (UTF, ASCII, ...)

Quelle

✍️ Freiwillige Übungs-Aufgabe

Wie viele freie Räder gibt es in der Höttinger Au /West?
Colab REST

Sprachen des Internets

🎯 Lernziele

Nach dieser Einheit sind Sie in der Lage dazu - die Unterschiede zwischen verschiedenen Web-Sprachen zu beschreiben - einfache HTML-Dateien zu interpretieren

🧠 Websites

Spezielle Webserver geben Websites als Antwort auf einen GET-Befehl
Antwort ist eine HTML-Datei

height:500

🧠 HTML-Datei (Hypertext Markup Language)

HTML legt fest, was auf der Seite stehen soll (struktureller Aufbau einer Webseite)
CSS legt fest, wie es dargestellt werden soll (Formatierung & Gestaltung)
JavaScript legt fest, was passieren soll. (interaktive Elemente)

bg right:33% width:400

Quelle

🧠 Grundgerüst einer HTML-Datei

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibung der Seite</title>
  </head>
  <body>
    <p>Inhalt der Seite</p>
  </body>
</html>

Struktur einer HTML Datei

height:400

Strukturierung

Verschiedene Elemente sind in HTML von Start <tag> und End-Tags </tag> umgeben
Entspricht einer XML-Datei
Es sind verschiedene Tags z.B. für Überschriften und Text vordefiniert

<body>
<h1>Überschrift der Seite</h1>
<p>Text auf der Seite</p>
<li> Liste </li>
<h2>Überschrift der Seite</h2>
<body>

Übernehmen Sie den Code hierher

Einfaches Beispiel HTML

Quelle

Übernehmen Sie den Code hierher

🤓 Eine komplexere Website

<header>
    <p>Herzlich willkommen!</p>
</header>
<body>
  <h1>Überschrift der Seite</h1>
    <p> Hier steht ein Text </p>
  <h2>Überschrift der Seite</h2>
     <li> Hier steht eine Liste </li> 

  <footer>
     <a href="www.mci.edu">Kontakt</a>
     <p>© 2022 by me</p>
     <img src="https://www.mci.edu/templates/mci/images/logo.svg" alt="logo">
  </footer>
</body>

Komplexeres Beispiel HTML

Cascading Style Sheets

Auszeichnungssprache für die Beschreibung der Darstellung
Bei Webseiten wird es der Style damit in einer extra Datei angegeben
Selektoren entsprechen den Tags im HTML-File

🧠 Beispiel CSS

Hier wird die Hintergrundfarbe für den Body grau gesetzt
Die Hintergrundfarbe für die beiden Überschriften (h1,h2) und die Rundung derer Box
Zudem die Schriftfarbe von h1

body {
  background: grey;
}

h1 {
  color: red;
}
h1, h2 {
  background-color: white;
  border-radius: 5px;
}

Beispiel HTML mit CSS

Dynamische Websites mit JavaScript

mit HTML und CSS können statische Webseiten gebaut werden
Möchte man der Nutzer:in nur eine Interaktion ermöglichen, müsste die Website immer neu geladen werden (neue REST-Abfrage)
Mittels JavaScript können interaktive Elemente in die Website eingebaut werden

bg right:33% width:400

Quelle

Beispiel HTML mit JavaScript

<!DOCTYPE html>
<html>
<body>
  <button onclick="changeBackground()">Change Background</button>
</body>
</html>

var color = "white";
function changeBackground() {
    if (color === "white") {
      color = "red";
    } else {
      color = "white";
    }
    document.body.style.backgroundColor = color;
}

✍️ Freiwillige Übungs-Aufgabe

Gestalten Sie eine Website für ein Sport-Diagnostisches Labor
passen Sie dazu die HTML und CSS-Datei an
Übernehmen Sie den Code hierher

bg right:66% h:700

<header>
    <h1>Sports Lab!</h1>
</header>
<body>

    <img src="https://www.fitforfun.de/files/images/201301/0/leistungsdiagnostik,40281_m_n.jpg" alt="logo">

 <p> Herzlich Willkommen  </p>
  <h2>Angebote</h2>
     <li> Stufentest </li> 
     <li> Rampentest </li> 
  <h2>Mitarbeitende</h2>
     <li> Julian Huber </li> 
     <li> Person 2 </li>      


  <footer>
     <a href="www.mci.edu">Kontakt mit Link zur MCI Website</a>
     <p>© 2022 by me</p>

  </footer>
</body>

body {
  background: black;
}


h1, h2, li,p {
  color: white;
  border-radius: 5px;
  font-family: Arial, Verdana
}

🎯 Lernfortschritt

Nach dieser Einheit sind Sie in der Lage dazu - die Unterschiede zwischen verschiedenen Web-Sprachen zu beschreiben - einfache HTML-Dateien zu interpretieren

🏆 Sakai-Aufgabe 8: Objektorientierung

Nutzen Sie das bestehende Repository für Ihre Entwicklung (zu zweit, geben sie beide das Selbe ab)
Starten Sie den Webserver entsprechend der Anleitung in der README.md
Passen Sie den Code der Sakai-Aufgabe 6.2 wie folgt an:
Die die Klasse Person verfügt über eine Methode post() welche basierend auf einem bestehenden Person-Objekt eine neue Person auf dem Webserver anlegt. Die können dazu den Code von tests/post_api.py in die Methode post() übernehmen.
Dazu müssen Sie die Person als JSON-Objekt serialisieren und an den Webserver senden. Wichtig ist, dass die Person ein Attribut id hat. Sie können auf die tests/classes.py aufbauen
Laden Sie ein Screenshot hoch, der das von Ihnen erstellen Person-Objekt auf der Webseite zeigt.
Comittem Sie Ihre Anpassungen im Branch main und mit der Nachricht Aufgabe 8

Appendix

UML-Sequenzdiagramm

Stellt den Prozess der Interaktion zwischen Objekten (Komponenten) mittels Austausch von Nachrichten (Pfeilen) und Lebenslinien (Balken) dar
mermaid.live ermöglicht solche Diagramme mit einer Markup-Language zu bauen

bg right height:600

Quelle

Elemente eines UML-Sequenzdiagramm

Für einen Use Case sollte das Hauptszenario (und weitere wichtige) als UML-Sequenzdiagramm dargestellt werden
Systeme sind Blackboxen
Fokus auf die Interaktion und
Wichtige Elemente
- Externe Rollen/Komponenten
- Nachrichten zwischen den Rolle
- Antworten auf die Nachrichten
- Schleifen, Iterationen, Alternativen

🤓 HTTP Status Codes

Fehlercode		Beispiel
1xx	Informationen	102 - Zeitintensive Anfrage läuft
2xx	Erfolgreiche Operation	200 - OK
3xx	Umleitung	308 - Permanente Umleitung
4xx	Client-Fehler	404 - Anfrage nicht gefunden
5xx	Server-Fehler	503 - Überlastung
9xx	Proprietäre Fehler

Vollständige Liste mit Codes