1

3 TIER ARCHITEKTUR
->Darstellungs- und Eingabeschicht (Client) -> Präsentationsschicht
->Applikationsschicht (Server) -> Logikschicht
->Daten (Datenbank) -> Datenschicht

Frontend: unkompiliert -> React

ServiceLayer: Flask RestX -> API Klassen

BusinessLogicLayer: Applikationslogik ->

Administration, Business Objects

Datenbank: MySQL Server -> Mapper Klassen

Bei 5 Tier: zusätzlich Datenzugriffschicht

Client will Infos -> frägt bei Service Layer an -> dieser frägt bei Business Logic Layer nach -> dieser
veranlasst Mapper auf die DB zuzugreifen -> DB gibt angefragte Objekte dann in die andere Richtung über
die Schichten zurück

Unterschied Präsentationsschicht und Service Layer und Business Logic Layer:

->Trennung, damit Anwendung modular und wiederverwendbar und einfacher wartbar
->Skalierbarkeit, Verfügbarkeit und Sicherheit einzelner Dienste besser planen

Presentation Layer Interaktion mit dem Benutzer -> Verarbeitung von Nutzereingaben und
Anzeige von Informationen
Service Layer -> API Anfragen des Presentation Layer verarbeiten -> Ressourcen bereitstellen
Business Logic Layer Ausführung von Geschäftslogik und Verarbeitung von Daten

->Service Layer ruft Algorithmen des Business Layers auf, um Anfragen der Präsentationsschicht zu
verarbeiten
 2

FRONTEND
->React Webseite (Node Server)
->alles, was der User sehen kann
->Darstellungs- und Eingabeschicht (Client)
->unkompiliert: Quellcode (Programmiersprache), dieser muss später in Maschinensprache übersetzt
werden, damit er ausgeführt werden kann
-unkompiliert = noch nicht von Compiler wie Babel übersetzt

Begriff Erklärung

React -JavaScript Bibliothek zur Erstellung von Webanwendungen

Server: Localhost 3000
Sprache: JSX
-Verwendung eines virtuellen DOMs
-Komponentenbasiert: logisch trennbare Einheiten
-alles in einer JavaScript Datei ohne HTML-Dateien
-Reconciliation Algorithmus: optimiert Rendern (Geschwindigkeit der
Webapp)
-verzichtet auf Konzepte für Datenbindung, Routing und Dependency Injection
-> leichtgewichtiger (Single Page Application!)
-Nachteile: muss mit anderen Modulen kombiniert und integriert werden

Reconciliation Algorithmus -entscheidet, wie virtual DOM mit tatsächlichem DOM synchronisiert wird
-entscheidet, welche Änderungen am tatsächlichen DOM vorgenommen
werden müssen, damit der virtual DOM mit dem tatsächlichen übereinstimmt

Vorteil React gegenüber JS

1. Virtual DOM: verbessert Leistung bei Anzeige von
Benutzeroberflächen (reduzierte Anzahl an DOM Änderungen da
Vergleich von vorherigem Zustand mit aktuellem Zustand)
2. Komponentenbasiert: einfacher wartbar
3. Einfache Integration: leicht in bestehende Anwendungen integrierbar,
andere JS Bibliotheken und Werkzeuge nutzbar
JSX: ermöglicht HTML ähnliche Syntax innerhalb von JS-Code
React App starten Cd frontend -> npm start
Bibliothek Sammlung von Klassen und Funktionen, Zugriff über API
Framework Spezielle Form der Bib, wiederverwendbare Struktur für Anwendungen
->Entwickler binden es in ihre eigenen Anwendungen ein und erweitern es
->ruft vorgesehene Funktionen selbständig auf

Unterschied Framework und

Bibliothek -Framework: Tools und Vorgaben, bestimmt Architektur einer Anwendung ->
bietet Entwicklern eine strukturierte Methode zur Erstellung von Anwendungen

-Bibliothek: Sammlung von Funktionen und Methoden -> stehen Entwicklern

zur Verfügung, schreibt keine Strukturen oder Regeln vor, keine vorgegebene
Architektur, soll lediglich Aufgaben in Anwendungen vereinfachen

-Frameworks: Flask, Angular

-Bibliotheken: React, Pandas, NumPy
Dependencies Externe Frameworks oder Bibs aus denen Code verwendet wird
Virtueller DOM -Kann mit hoher Performance bearbeitet werden -> erst nach Abschluss aller
Anpassungen wird er mit dem echten DOM synchronisiert
-in-memory Repräsentation der tatsächlichen DOM-Struktur
-wird neu berechnet, wenn sich state oder props einer Komponente ändern
 3
Begriff Erklärung
DOM - document object model -Programmierschnittstelle
-stellt HTML als Baumstruktur dar
-Knoten = Objekte (Teil des Baums)
-plattform- und programmiersprachenunabhängig
-Struktur und Layout eines Dokuments kann verändert werden
->kann auf HTML-Elemente zugreifen und diese manipulieren
->DOM stellt Dokument als hierarchische Struktur dar
->jedes Element (HTML-Tag) im Dokument wird als Objekt dargestellt
->ermöglicht Ändern der Benutzeroberfläche ohne gesamte Seite neu zu laden
DOM-Manipulation Analyse des aktuellen DOM-Baums
->Auffinden der Stelle an der etwas passieren soll
->neue Daten an dieser Stelle einfügen/entfernen
-Elemente werden angesteuert über document.getElementById oder
document.querySelector(name des tags)
-hinzufügen/löschen: appendChild, removeChild
Rendern Komponenten werden in das DOM übersetzt
->Browser muss Anordnung der HTML-Elemente neu berechnen
->bei Verändern des States oder props oder bei Aufruf der render()
Im index.js: root von HTML
->render() ist eine Methode des react-dom packages
Index.js -Einstiegspunkt einer React-Anwendung
-hier wird das root Element der Anwendung in das DOM eingefügt
->root Component wird gerendert (meistens <App>)
->wenn das Root Component gerendert wird, werden auch seine Kinder
gerendert
->Inhalt der Anwendung wird angezeigt
JSX Eigene Sprache von React (Erweiterung von JS)
->beschreibt wie die Benutzerfläche aussehen soll
->erzeugt React Elemente
->kann XML als zusätzlichen Datentyp verarbeiten -> JS, CSS und HTML in
einer Datei
->erstellt React Elemente
->JavaScript in einem JSX Element: { }
JSON - JavaScript Object Notation -Textformat, das für den Austausch von Daten in Anwendungen verwendet
wird
-basiert auf JS-Objekten, besteht aus Key-Value-Paaren
-programmiersprachen unabhängig
-JSON.parse(): von JSON zu JS
-JSON.stringify(): von JS zu JSON
Sprachen die der Browser versteht HTML, CSS, JavaScript

XML Extensible Markup language -> von Mensch und Maschine lesbar
CORS - Cross Origin Resource Daten können von mehreren Servern geladen werden (Zugriff per HTTP-
Sharing Header)
Origin: Protokoll (https)
Anfragen auf verschiedene Server gleichzeitig z.b. wenn in einem Web
Dokument zwei Bilder von zwei unterschiedlichen Domains/web Servern
geladen werden sollen
Meist aus Sicherheitsgründen unterbunden
Props -Übergabe von Parametern an Klassen (vgl. HTML-Attribute) -> wird im
öffnenden Tag einer React Komponente übergeben
->Daten an Unterkomponenten (Child Component) übergeben
-ein JSX-Attribut/Child als einzelnes Objekt
->read-only: Klassen und Funktionen dürfen nie ihre eigenen props ändern!
 4
Begriff Erklärung
Pure function =Funktionen, die nicht ihren input verändern, sondern ein Ergebnis
zurückgeben z.b sum of a and b: returns a+b
.then Gibt einen promise zurück -> Reihenfolge wie etwas ausgeführt werden soll

Promise Eventuelle Ausführung oder Fehlschlag einer Operation und der daraus
resultierenden Ergebnisse -> Rückgabewert
Zustände: pending, fulfilled, rejected
REST - representational state -Client Server Modell: Client im Frontend, Server im Backend ->
transfer Nutzerinterface von Datenhaltung getrennt
-Statuslos: keine Clientdaten auf dem Server
-Zwischenstatus: Clients können Antworten zwischenspeichern
-HTTP Methoden: create, read, update, delete -> Zugriff auf Daten
State Zusätzlich zur Erfassung von Eingabedaten (this.props) auch die Verwaltung
der Statusdaten (this.state) einer Komponente
->bei Änderung des State wird gerendertes Markup aktualisiert
->aktueller Stand der Anwendung (bezogen auf ein Objekt)
->sollte immer ein JavaScript Objekt sein
->enthält Daten, die spezifisch für eine Komponente sind und sich ändern
können
->nur Daten, die auch gerendert werden oder wichtig für den Datenfluss sind
->alles andere: kann als Variable definiert werden
ButtonClick State wird neu gesetzt
Eventhandler Was passieren soll, wenn ein Ereignis eintritt
->erkennen Events und führen eine vorbestimmte Aktion aus
->Verbindung Elemente aus Benutzeroberfläche und Code
Event Ausgelöst durch Interaktion des Anwenders
Markup (markup language) Auszeichnungssprache -> Maschinen können Textinhalte gliedern und
formatieren -> maschinenlesbare Sprache
Beispiel: HTML (hypertext markup language) -> beschreibende language da
sie Inhalt einer Seite vorgibt
onSuccess vs onFailure Wenn Methodenaufruf erfolgreich vs nicht erfolgreich war
->.then und .catch bei einer fetch Funktion
Verbindung Frontend zur DB -Mit Node.js: Zugriff über REST-Service -> Anfrage der Daten über eine URL
-Abfrage des Webservice: fetch(url).then(Rückgabe).then(Ergebnis
verarbeiten)
-Rückgabe: auf http-Route
-Verbindungsaufbau mit den Zugangsdaten

Kommunikation mit Backend Promise, Async, Fetch

HTTP Request Methode, URL, Request Header, Formular Daten (bei POST)
->Kommunikation Frontend mit Backend
Lifting State Up State der Child Component in die Parent Component heben
->Zugriff für mehrere Child Components ermöglichen
Wie versteht der Browser React 1. Browser sendet Request an Server, um HTML-Datei abzurufen
Code? 2. Server sendet HTML-Datei an Browser
3. Browser parst HTML-Code
4. Parser trifft auf ein script-Element, das ein externes JavaScript
referenziert
5. Parser hält Parsen an und sendet einen Request an den Server, um das
JavaScript abzurufen
6. Server sendet JavaScript zurück an den Browser
 5
Begriff Erklärung
7. Browser führt JavaScript aus
8. Parser setzt das Parsen des restlichen HTML-Codes fort
9. Sobald das HTML vollständig geparst wurde, wird die Webseite im
Browser angezeigt
Vereinfacht:
1. React Code wird in JavaScript umgewandelt (von Babel, während der
Laufzeit)
2. JS-Code wird dann in HTML-Datei eingebunden und vom Browser
ausgeführt
Parsen -Syntax einer Sprache analysieren
-Zerlegung und Umwandlung einer Eingabe -> für die Weitergabe geeignetes
Format
->Code wird analysiert und in eine Struktur umgewandelt, die vom Browser
verwendet werden kann, um die Webseite darzustellen.
->HTML-Dokument in DOM übersetzen
BABEL (Transcompiler) JavaScript Compiler: löst Problem, wenn Browser nicht alle Funktionalitäten
versteht
->übersetzt JSX in JavaScript
Export default Hauptexport des Moduls (nur einer pro Modul)
->Funktion, Klasse oder Objekt exportieren
->bei Import denselben Namen verwenden, keine { } benötigt
Import{ } Named import: benötigt einen named export
Named export Export const A=33
Callback =Funktion die einer anderen Funktion als Parameter übergeben wird
->wird später von dieser Funktion aufgerufen
->wird nach Ausführen einer anderen Funktion ausgeführt
->bilden asynchrone Vorgänge ab: lösen Funktionalitäten aus, wenn bestimmte
Ereignisse auftreten
-können außerhalb oder direkt im Funktionsaufruf definiert werden
Firebase -Google Authentifizierungssystem -> Sign in with Google
-Dazu muss die Applikation immer online sein
-Plattform zur Entwicklung von Apps (mobil und Web)
-Benutzerauthentifizierung, Datenbanken, Cloud-Storage, Hosting und Analyse
Tools
Firebase SDK =Software Development Kit
->Tools, Bibliotheken, APIs, um auf Funktionen von Firebase zuzugreifen
Authentifizierung -> wer ist es? Verifizierung der Identität eines Benutzers -> Nachweis der Echtheit
->Eingabe von Benutzername und Passwort, um zu prüfen, ob es wirklich der
Account des Nutzers ist
Autorisierung -> darf er zugreifen? Zustimmung/Erlaubnis -> Zuweisen und Überprüfen von Zugriffsrechten
(Bestätigung der Authentifizierung)
Single Sign On Einmalanmeldung: einmalige Authentifizierung
->danach kann Benutzer auf mehrere Anwendungen zugreifen, ohne sich
erneut anmelden zu müssen
-z.b. mit OpenID Connect (Standard von Google)
OAuth - open Authorization ->offener Standard, ermöglicht es Benutzern, auf Ressourcen von 3. Anbietern
zuzugreifen ohne Anmeldedaten preiszugeben
->nach Anmeldung bei Anwendung muss Benutzer Zugriff auf seine
Ressourcen erlauben
->Anwendung erhält OAuth Token (dieser ermöglicht Zugriff, ohne dass sich
Benutzer neu anmelden muss)
 6
Begriff Erklärung
OpenID Authentifizierungssystem für webbasierte Dienste -> erlaubt Benutzer nach
Einmalanmeldung bei allen unterstützenden Webseiten sich ohne Namen und
Passwort anzumelden
-User gibt OpenID URL ein, Webseite leitet weiter zu OpenID Provider, dort
meldet er sich an -> Weiterleitung zur ursprünglichen Webseite
Token Elektronischer Schlüssel zur Identifizierung von Benutzern
->erlaubt den Zugriff auf geschützte Ressourcen und Funktionen
->wird im Securitydecorator aufgerufen, um Sicherheit zu gewähren
-Zugriffstoken: erlauben Zugriff auf Ressourcen (OAtuh)
-Authentifizierungstoken: Benutzer authentifizieren (Single Sign On)
-API Token: verwendet von APIs, um Zugriff auf Ressourcen zu erlauben
(auch Zugriff und Nutzung von APIs von Drittanbietern)
Cookie Textinformation die zu einer besuchten Webseite gespeichert wird
->im Browser von JS erzeugt oder vom Webserver erhalten
->Identifizieren des Users, Abspeichern eines Logins/Warenkorbs
->Datenentnahme und Speicherung als string
-bei erneutem Besuch einer Webseite sendet Browser die Cookies
Singleton Entwurfsmuster, um Objekte zu erzeugen
->von einer Klasse soll genau ein Objekt existieren
->HdMatesAPI global verfügbar machen
->Prüfung, ob Objekt bereits existiert
Static Methode ->können verwendet werden, ohne dass eine Instanz der Klasse besteht
->gehören zur Klasse selbst und nicht zu einer Instanz
->kann direkt über die Klasse aufgerufen werden: Klasse.staticmethode( )
->kann auch für konstante Werte verwendet werden

componentDidMount( )
setState( )
Remote Procedure Call
-wird aufgerufen, sobald eine Komponente in das DOM eingefügt wurde
->wird nach Initialisierung der Komponente und ihrer Kinder aufgerufen
->kann verwendet werden, um asynchrone Anfragen zu starten
->Daten von einer API abfragen
->Daten von einem rempte Endpoint abfragen
-Komponente und ihre Child Components müssen erneut gerendert werden mit
dem neuen state -> Update der Benutzeroberfläche als Antwort auf event
handlers
-mehr als Request zu verstehen (kein direkter Command)
-Komponente wird nicht direkt geupdatet, sondern evtl erst mit anderen zsm
->um Änderungen der states einer Komponente durchzuführen
-Aufruf von Funktionen auf anderen Computern als das aufgerufene Programm
-> Interprozesskommunikation
-Client schickt Anfrage an Server (welche Funktion mit welchen Parametern)
-Server bearbeitet Anfrage und schickt Antwort
-Nach Empfang: Client kann Verarbeitung fortführen

Asynchroner RPC Client kann nach dem Versenden der Anfrage direkt weitere Operationen
ausführen -> muss nicht erst auf Antwort warten
Typescript ->Open Source Programmiersprache
->baut auf JS auf
->fügt statische Typisierung hinzu
->Fehler können während der Entwicklung entdeckt werden
Warum gibt es Typescript bei ->Python hat bereits eingebaute Unterstützung für Typisierung
Python nicht? Wie könnte man das ->für Variablen und Funktionen können Typen angegeben werden
realisieren?
 7
Begriff Erklärung
package.json -Enthält alle Extensions, die für die App benötigt werden -> dort werden
Konfigurationen gemacht -> welche Abhängigkeiten (Dependencies) installiert
werden müssen
-enthält Metadaten über das Projekt
-Definition von npm Skripten -> können mit npm run ausgeführt werden
React Style Guidist Dokumentation von Source Code (im Frontend: Ordner Styleguide)
->Code nach Richtlinien formatieren
Zugriff von Frontend auf Backend Mit REST-Interface:
(Flask Server) 1. Sicherstellen, dass Server auf einem bestimmten Port auf Anfragen
wartet -> app.run(port=5000) -> startet den Server
2. Zugriff vom Frontend: fetch API -> http Anfragen an Server senden
Business Objects -dienen als APIs zwischen Client und Schnittstelle zu backend
-Geschäftslogik einer Anwendung: verarbeiten und manipulieren Daten
des Systems
-im Frontend: Daten anzeigen und bearbeiten -> Modelle der Daten
Static Methode fromJSON liefert ein Array, macht aus jedem JSON-Objekt aus einem Array ein
Business Object
->erstellt eine Instanz einer Klasse aus einem JSON-Objekt
API-Klasse im frontend liefert alle Business Objects sowie deren Attribute, enthält Backend
URLs (post = neu erzeugen, put = updaten) -> Frontend kommuniziert
mit HTTP Request mit dem Backend
API-Module im frontend Eigenständiges Module durch index.js
Component ->ähnlich wie eine JavaScript Methode
->akzeptiert beliebige Eingaben (props)
->gibt React Elemente zurück, die beschreiben, was auf dem Bildschirm
angezeigt werden soll
->besteht aus mehreren Elementen
Elemente in React =die kleinsten Bausteine in React
React in eine existierende Webseite React als <script> tag in einer HTML Seite einfügen
integrieren
Create a react app npx create-react-app my-app
cd my-app
npm start
widget -Steuerungselement/Schaltfläche in der Benutzeroberfläche
-kann Benutereingaben verarbeiten
-Formular, Menü, Textfeld

COMPONENT LIFECYCLE

Mounting: (=Einbau in den DOM)

Wenn eine Instanz einer Komponente erstellt wird und im DOM eingefügt wird
->Methoden werden in folgender Reihenfolge
aufgerufen:
-constructor( )
-render( )
-componentDidMount( )
 8

-render( ) muss! Immer definiert werden

Updating:
->eine Komponente wird erneut gerendert
1. render()
2. componentDidUpdate()

Unmounting:
->Komponente wird aus DOM entfernt
1. componentWillUnmount()
 9

SERVICE LAYER
->sitzt auf einer API/ einem Framework (Flask RestX)
->Hilfsframework, das auf Flask sitzt
->gibt Website mit allen Schnittstellen
->Austausch mit Frontend: Json (wird vom Client mit JavaScript weiterverarbeitet)
->Verarbeitung von Geschäftslogik
->main.py, HdMatesAPI

Begriff Erklärung

Flask -Python Webframework

-ermöglicht Kommunikation zwischen Webserver und Webanwendung
im Python Umfeld
-Ressourcenadressierung über URIs
->aufrufbarer Code auf Serverseite
->vgl. main.py: @app.route( `/ `) an einer Funktion
Flask RestX -Erweiterung zu Flask
-Unterstützung, um schnell REST APIs zu bauen
-enthält Decorators und tools um APIs zu beschreiben
-ermöglicht es Ressourcen auf Serverseite anzulegen und dann aufrufen
zu können
-liefert api Klasse: api=Api(app) -> @api.route(`hello`) an einer Klasse
(Basisklasse: Resource)
-liefert Decorator: marshal_list_with( ) -> passt Rückgabe des returns so
an, dass Python Liste durchlesen wird und in Json Format umgewandelt
wird
REST API -Kommunikation Client und Server: Daten vom Backend im Frontend
bereitstellen
-API die den REST-Architekturstil verfolgt
-definiert Ressourcen (Swagger Dokument)
URI - uniform resource identifiers -Zeichenfolge die bestimmte Netzwerkressource identifiziert
-Schema: Schemaspezifischer Teil
-Schema: um welche Ressource handelt es sich
-spezifischer Teil: Angaben die die Ressource/Standort selbst definieren

URL - uniform resource locator -definiert Netzwerkstandort einer Ressource -> adressiert Ressource im
Backend
ressourcentyp://User:Passwort@host.domain:Prot/Pfad/DateiParameter

Ressource -Informationen: Webseiten, Datensätze, Bilder,..

-werden über Webserver oder REST-APIs bereitgestellt
-kann von Client über Internet angefordert werden
Payload (API) -RESTful API Design: Authentifizierung mit einfachem API secret key
(übergeben in einem HTTP Basic Auth Header)
-Aufruf über http://api.payload.co/…
->Antwort auf eine gesendete Anforderung
->api.payload liefert Daten vom Client
=Datenkörper
->enthält Daten, die von der API verarbeitet werden
->im http Körper der Anfrage/Antwort
->JSON, Text, XML, je nach Protokoll oder API
 10
Begriff Erklärung
Securitydecorator -damit nur authentifizierte User auf die APIs zugreifen
->integriert Sicherheitsfunktionalität
-@secured vor den Methoden in der main.py
-ließt Cookie aus -> Token (und überprüft diesen)
-frägt firebase, wer sich hinter Token verbirgt
-gibt aus, wer was angefragt hat
-Rückgabewert: Methode -> diese wird dann ausgeführt, wenn der
Benutzer authentifiziert wurde
Postman Anwendung zum Testen und Verwenden von APIs
Fetch API -Schnittstelle zum Abrufen von Ressourcen
-fetch(Pfad der Ressource)
->gibt ein Promise zurück
->diese wird in die Response aufgelöst
Response Schnittstelle -Schnittstelle derFetch API
->Antwort auf einen Request
-response.ok: gibt bool zurück, ob Request erfolgreich war
-response.status: status code der Antwort
Ressource Naming -Benennung der Ressourcen in einem System
->um Ressourcen eindeutig zu identifizieren
-in einer Web-API: URI-Pfadangaben /users/{user_id}
-in einer DB: Namen der Tabellen und Spalten
Namespace - Namesraum -zb mehrere Versionen einer API
->pro Namespace Veränderungen im Hintergrund
->Gültigkeitsbereich für bestimmte Funktionen, Variablen,..
->Trennung von Versionen eines Projekts
->Bereich im Projekt, in dem Namen definiert sind (Container für
Namen)
->Bereich in dem Namen gültig sind beschränken
Marshalling -Umwandlung von Objekten in versendbaren Text und vise versa (nicht
das Versenden selbst, sondern nur einpacken und auspacken)
-auch Serialisierung bzw. Deserialisierung
-json.stringify: JavaScript Objekte in JSON strings umwandeln
Namemapping Abbildung der Server Seite in die Client Welt -> wie heißt ein Attribut
auf Python Seite, wie soll es in JavaScript heißen?
->wie heißt das Objekt im Backend und wie soll es im Frontend heißen?
Main.py Enthält Klassen, die alle die Klasse Ressource (kommt von FlaskRestX)
als Basisklasse haben -> über diese wird mit der Administration.py in
der darunterliegenden Schicht kommuniziert
->hier findet die Ressourcenaddressierung statt
->Einstiegspunkt für die Ausführung der Anwendung
->enthält Code der ausgeführt wird, wenn die Anwendung gestartet wird
->initialisiert Web-API
->definiert Routen

BUSINESS LOGIC LAYER

->GeschäftsLogik hinter dem System
->Regeln für Aktionen die im System ausgeführt werden dürfen
->Objekte anlegen/ändern
->Administration.py: User anlegen, ausgeben, speichern -> serverseitig Objekte anlegen
->bei Löschvorgängen: verschachteltes Vorgehen -> soll ein User gelöscht werden müssen erst die Accounts
gelöscht werden, bei diesen wiederum erst die Transaktionen
->BusinessObjects
 11
->hier angelegte Objekte werden von Mappern in die DB abgelegt
->von den Mappern aus der DB ausgelesene dictionaries werden hier in Objekte umgewandelt

Begriff Erklärung

Persistieren Daten auf lange Sicht speichern

->Daten in einer DB speichern
->auch nach Beendigung einer Sitzung oder eines Prozesses noch
verfügbar
from_dict Methode Umwandlung von Json Objekten in Python Dictionaries (das
macht das RestX Framework)
->Umwandlung in die andere Richtung über das Namemapping in
der main.py
->erstellt Instanzen einer Klasse aus einem dictionary
->wird in einer Klasse definiert

Methode der BO Klassen:

 12

DATABASE
->Mapper.py (Superklasse): connection zur Datenbank (cursor)
->Mapper Klassen: Tupelwelt der DB mit der objektorientierten Welt verbinden
->aus Tupel sollen Objekte gemacht werden und umgekehrt
->MySQL python connector als Treiber

Begriff Erklärung

Cursor -Zeigt auf die Datenbank -> Verbindung zur DB

-Objekt, um SQL-Abfragen auszuführen
-wird mit der cursor() Methode erstellt: cursor = cnx.cursor()

Connect() -Methode der MySQL Python Connector Bibliothek

-stellt Verbindung zur DB her
->cnx = mysql.connector.connect(user, password, host, database)

Execute() -sendet SQL-Abfragen an die DB

->Ergebnis wird als Tupel von Zeilen zurückgegeben
->cursor.execute(SQL Statement)

Close() -schließt den Cursor und die Verbindung

->cursor.close()
->cnx.close()
Db.cnf -Konfigurationsdatei
-Zugangsdaten zur Datenbank: Server URL, Benutzer, Passwort,
Datenbankname
ACID-Prinzip ->Eigenschaften von Datenbanktransaktionen
->für Integrität und Zuverlässigkeit von DB
-Atomarität: Abgeschlossenheit -> Abfrage wird vollständig oder gar
nicht ausgeführt (keine Zwischenstände)
-Consistency: keine Fehler -> Transaktion darf nur ausgeführt werden,
wenn sie Integrität der DB nicht gefährdet
-Isolation: Mehrbenutzerbetrieb ohne Überschreiben -> während einer
Transaktion sind Änderungen für andere nicht sichtbar, werden erst
freigegeben, wenn Transaktion abgeschlossen ist
-Dauerhaftigkeit: Daten garantiert dauerhaft abgespeichert, auch nach
Herunterfahren der DB
Integrität einer DB ->Gültigkeit und Genauigkeit der in ihr gespeicherten Daten
->Daten werden nicht beschädigt oder verfälscht
->Korrektheit von einzelnen Daten, Verweisen und Hierarchien

Mapper -tauscht Daten zwischen zwei Komponenten oder Schichten aus (ohne
=Context Manager dass diese sich kennen)
-wandelt Daten aus DB in Objekte um (von persistent=längerfristig
gespeichert zu transistent=temporäre Daten)
->Objekte können dann in der Applikationsschicht weiterverwendet
werden
Name Mapping Wie heißt das Objekt im Backend und wie soll es im Frontend heißen?

Context Manager -Ressourcen verwalten, die von einem bestimmten Codeblock verwendet
werden-> Ressourcen bereitstellen und nach Ende des Codeblocks
wieder freigeben
-With UserMapper( ) as mapper: return mapper.insert(user)
AbstractContextManager -implementiert Context Manager Entwurfsmuster in Python
-stellt selbst keine Ressourcen bereit
-definiert Methoden für Unterklassen, um Ressourcen bereitzustellen

Begriff
ABC
abstractmethod
ContextErrorMessage
IndexError
Autoinkrement
Verbindung App Schicht zur DB-Schicht
Relationale Datenstruktur
MySQL Python Connector
Warum ist es wichtig cursor und
Verbindung am Ende zu schließen?
FetchAll( )
->Backend (nicht zu verwechseln mit
fetch() im Frontend)
Referentielle Integrität
13
Erklärung
-Stellt magic methods enter und exit bereit, um DB-Verbindung
herzustellen bzw zu schließen -> diese müssen aber in den Unterklassen
implementiert werden
=abstract base class
-Modul in Pyhton, mit dem man Abstrakte Basisklassen definieren kann -
> definieren Methoden aber implementieren sie nicht
-kann nicht dirket instanziiert werden -> Vorlage für Unterklassen
-markiert Methoden einer Abstraken Basisklasse
->wenn sie von Unterklasse nicht implementiert wird: TypeError
Fehlermeldung, wenn beim Verwenden eines Context Managers ein
Fehler auftritt
-wenn versucht wird auf ein Element in einer Sammlung (z.b. Array)
zuzugreifen, das nicht vorhanden ist
-Bei Zugriff auf ein Tuple wenn kein tuple zurückgegeben wurde
sondern eine leere Sequenz
Tupel nicht selbst setzen, DB macht das automatisch zb bei id
automatisch hochzählen
->Spalte in der DB als auto_increment definieren
-mit node.js: Zugriff über REST-Service
-Anfrage der Daten über eine URL
-Abfrage des Webservice mit
fetch.(url).then(Rückgabe).then(Ergebnis verarbeiten)
-Rückgabe auf HTTP-Route
-Verbindungsaufbau: mit Zugangsdaten
->über SQL bzw MySQL connector und die Mapper
->Daten in Form von Tabellen abbilden, die miteinander verknüpft sind
-besteht aus mehreren Tabellen (Relationen), diese aus Zeilen (Tupel)
und Spalten (Attribute)
-Verknüpfungen durch Fremdschlüssel
-Bibliothek
-ermöglicht: von Python aus auf eine MySQL DB zuzugreifen
->Schnittstelle zwischen Python und MySQL Server
->import mysql.connector
-sonst bleibt Prozess auf dem Server aktiv und nimmt Ressourcen in
Anspruch -> durch Schließen wird Prozess beendet und Ressourcen
freigegeben -> erst so werden Änderungen in der DB gespeichert
-Erstellen des Cursors beansprucht temporären Speicherplatz auf dem
Server (speichert Ergebnis der Abfrage) -> durch Schließen wird
Speicherbereich freigegeben
-Methode des curser-Objekts in der Python MySQL Bibliothek
-ruft alle von einer SELECT Anweisung zurückgegebenen Zeilen ab
-cursor.fetchall()
-Datensätze mit Fremdschlüssel können nur dann gespeichert werden,
wenn der Wert des Fremdschlüssels einmalig in der referenzierten
Tabelle existiert
-Löschung eines Datensatzes oder Änderung des Fremdschlüssels in
einem Datensatz ist nur möglich, wenn zu diesem keine abhängigen
Datensätze in Beziehung stehen
 14

ALLGEMEINES

Begriff Erklärung

Proxy (vergleichbar mit Server) Kommunikationsschnittstelle: steht zwischen 2 Netzwerken (zb Client
und Server)
Von lat. Procurare = für jemanden handeln
Vermittler zwischen Client und Ziel-Server
Aufgaben: Filterung von Inhalten, Zugriffskontrolle, Caching, IP-
Adresse des Clients verbergen, Marshalling
Entität Eindeutig zu bestimmendes Objekt zb der Kunde Max Maier
Entitätstyp Gleichartige Entitäten zu einem Typ zusammengefasst -> Kunde
Klasse -Bauplan für ähnliche Objekte -> gleiche Ausprägungen und Merkmale
-beschreibt Struktur und Verhalten einer Menge gleichartiger Objekte

Abstrakte Klasse -nicht instanzierbar (nur Unterklassen)

-abstrakte und konkrete Methoden
-in Python: erbt von ABC, @abstractmethode
-gemeinsame Implementierung der Methoden für mehrere Unterklassen
Interface -Keine Membervariablen, kein Methodenkörper, nur Methodenkopf
-keine Instanzvariablen und Konstruktoren -> nicht instanziierbar
-nur abstrakte Methoden
->Methoden müssen von Unterklassen implementiert werden
-keine gemeinsame Implementierung für mehrere Unterklassen
Objekt Konkretes Exemplar einer Klasse
Variablen -deklarieren: auf etwas referenzieren -> Platzhalter für bestimmten Wert
mit bestimmten Namen und Datentyp festlegen
-initialisieren: dem Platzhalter einen Wert zuweisen
Private Attribute Nur in der aktuellen Klasse sichtbar
->Zugriff steuern: andere Klassen haben keinen Zugriff, Attribut kann
nur ausgelesen werden aber nicht geändert werden
__attributname__
Akteur Beteiligter eines Vorgangs, Rolle außerhalb des Systems -> interagiert
mit System
Rolle: kann von verschiedenen Personen eingenommen werden
Use Case (Anwendungsfall) Menge von Aktionen, die von einem System ausgeführt werden und zu
einem Ergebnis führen -> Verhalten eines Systems
OCL - object constraint language -formelle Sprache -> Randbedingungen bei der Modellierung von
Computerprogrammen festlegen
-beschreibt Einschränkungen für Objekte und Klassen in einer
Modellierung
-definiert Regeln für die Verwendung von Objekten und Klassen
->Integrität von Systemen gewährleisten
->bei der Modellierung von Klassendiagrammen: Notiz, Typangaben,
Beziehungen
Hashcode Hashing = Umwandlung einer Zeichenfolge in einen numerischen
Schlüssel mit fester Länge
Git: Commit eindeutig identifizierbar durch Hashcode aus Inhalten des
Commits
 15
Begriff Erklärung
Marshalling Umwandlung der Speicherrepräsentation eines Objekts in ein für die
Übertragung geeignetes Format
->wenn Daten von einem Programm zum anderen verschoben werden
müssen
->Umwandlung von Objekten in versendbaren Text und umgekehrt

Init Methode Erzeugt beim Aufruf eine neue Instanz einer Klasse
Dundermethoden Enter und Exit für Ein- und Austritt aus der DB
-spezielle Methoden in Python
-beginnen und enden mit doppelten _ _
-führen Aktionen aus, wenn bestimmte Funktionen auf ein Objekt
angewendet werden
-init: wenn ein Objekt erstellt wird -> initialisiert Attribute
-str: gibt ein str eines Objektes zurück -> print() oder str()
-len: gibt die Länge eines Objektes zurück -> len()
Magic Method Muss nicht aufgerufen werden, wird ausgeführt, wenn Objekt einer
Klasse erzeugt wird
Staticmethod Kann ohne Instanziierung einer Klasse aufgerufen werden
->wenn ich eine Methode brauche aber noch kein Objekt existiert
->Aufruf: Klassenname.Methodenname( )
Modularisierung Gliederung eines Programms in einzelne Module
->Reduktion der Problemkomplexität
->Schaffung von Teilaufgaben
Serialisierung -Abbildung von strukturierten Daten auf eine sequenzielle
Synonym für Marshalling beim RPC Darstellungsform: Umwandlung des Zustands eines Objekts in eine
Folge von Bytes
-Speicherung von Objekten in Dateien
-Übertragung von Objekten über das Netzwerk
Dev Server Development Server -> Server der als Testumgebung zur Verfügung
steht
->z.b. node.js
Vorgehen bei der Entwicklung 1. Anforderungsanalyse (Use Case Diagramm)
2. Anforderungsspezifikation: Klassendiagramm
3. Entwurf: Architektur, Design, Schnittstellen, Interaktionen der
Komponenten
4. Implementierung: Coding
5. Testen
6. Wartung
Branch Persönlicher Arbeitsbereich: Arbeit unabhängig von anderen
Projektmitgliedern
Commit Snapshots/Meilensteine eines Projekts: werden ins lokale Repository
übertragen, später in remote Repos
Object.getPrototypeOf() greift auf Prototyp (anderes Objekt, von dem das aktuelle erbt) eines
Objektes zu
Object.setPrototypeOf(obj1, Ändert das prototype eines Objektes: obj1 soll Eigenschaften von obj2
obj2.prototype) haben
Array.isArray() Überprüft, ob ein Objekt ein Array ist oder nicht -> true/false
Unix socket Für Interprozess-Kommunikation
->Datenaustausch zwischen Prozessen, die auf demselben Host laufen
 16
Begriff Erklärung
If (__name__ ==„__main__“) Wird true, wenn Datei gestartet wurde (und zwar nur genau dieses
Module, in dem der Code steht) -> Abfrage an das Module: was ist dein
Name? -> wenn es gestartet wurde ist der Name immer main!! (= main
ist der Name eines gestarteten Modules)

-ist eine Methode eines ContextManagers

Wie funktioniert die Dunder Methode -wird verwendet, wenn ein Objekt mit einem with-Block verwendet wird
__enter__? -gibt das Objekt zurück, das im with-Block verwendet werden soll
-kann Verbindungen erstellen, die im with-Block verwendet werden
sollen (z.b. DB Verbindung)
-gibt die Verbindugnen oder Ressourcen am Ende des Blocks wieder frei
Wie funktioniert die Dunder Methode -wird aufgerufen, wenn der with-Block verlassen wird, egal ob
__exit__? erfolgreich oder ob ein Fehler aufgetreten ist
-3 Argumente: Typ des Fehlers, Wert des Fehlers und Stacktrace des
Fehlers
->gibt Ressource(n) des with-Blocks wieder frei
Wie kommunizieren HTML und 1. Zugriff von JS aus auf HTML-Elemente über DOM und DOM-
JavaScript? Methoden: document.getElementById
2. Einbettung von JS in HTML-Code mit script-tags oder
geschweiften Klammern
3. http-Requests in JS
4. Aufrufen von JS-Methoden durch HTML-Ereignisse:
onClick={this.JSMethode}
->React unterstützt Kommunikation und Austausch von Daten
Pep8 Kodierungsrichtlinie für Python Programmierung
->Empfehlungen für Formatierung von Python Code (Leerzeichen,
Einrückungen, Namensgebung von Variablen und Funktionen, Länge
von Zeilen etc.)
->Code lesbarer und wartbarer machen
Warum nicht direkt auf State zugreifen? -Komponente wird sonst nicht neu gerendert -> Benutzeroberfläche
reagiert möglicherweise nicht auf die Änderung
->immer die setState Methode aufrufen!!
Wann wird eine Komponente nicht Wenn sie nicht sichtbar ist
gerendert?
Applikationslogik = Code einer Anwendung, der die Hauptfunktionalitäten definiert
-> Algorithmen, Geschäftsregeln und Logiken
Wie rendert React? 1. Anwendung wird gestartet: Komponenten werden initial
gerendert
2. wenn sich der Zustand einer Komponente ändert: Komponente
wird neu gerendert
3. React vergleicht virtuellen DOM der neu gerenderten
Komponente mit aktuellem DOM
4. Berechnung der minimalen Änderungen, die am DOM
vorgenommen werden müssen, um die Komponente auf dem
Bildschirm auf dem neusten Stand zu halten
5. React führt diese Änderungen durch
Constructor(props) -definiert den initialen Status der Komponente
-wird aufgerufen, wenn eine neue Instanz der Komponente erstellt wird,
bevor sie gerendert wird
-props: Eigenschaften, die von einer übergeordneten Komponente
übergeben werden -> wird benötigt, um den initialen Status der
Komponente zu definieren
Geschweifte Klammern in JS  definieren ein Codeblock oder ein Objektliteral in JS

Begriff
Tree-Objekt in Github
Aus was besteht ein Commit?
JSX im Browser anzeigen
Daten von API an Browser
Gehören Mapper zur Business Logik oder
zur Datenbankschicht?
Tree in Git
Datentyp einer Komponente
Super(props)
Extends Component
Methoden der React.Component
Superklasse
EventListener
PropTypes
Übergabe von Objekten in der Main
Schichtenarchitektur
17
Erklärung
-stellt den Zustand eines Verzeichnisses im Repo zu einem bestimmten
Zeitpunkt dar
-enthält eine Liste von Dateien und Unterverzeichnissen
-jedes Tree Objekt hat einen HashWert
-Referenz auf ein Tree Objekt (=Zustand des Verzeichnisses als der
Commit erstellt wurde
-Liste von Eltern Commits, von denen der aktuelle Commit abgeleitet ist
-eindeutige ID: SHA1 Hash des Inhalts des Commits
-Nachricht die vom Benutzer hinzugefügt wurde: was wurde im Commit
geändert
-Babel wandelt JSX-Code in JavaScript um
-Wird zusammen mit anderen JS-Dateien in einer einzigen Datei
gebündelt
-Diese Datei wird in eine HTML-Seite eingebettet und im Browser
geladen
-Browser führt JS aus und rendert die Benutzeroberfläche basierend auf
dem JSX-Code
->siehe wie versteht der Browser React Code
http Anfrage vom Browser an die API z.b. fetch API
Daten werden von API im http Antwort body zurückgesendet
-wenn man funktional betrachtet: zur DB, denn sie führen SQL-
Statements aus und kommunizieren somit direkt mit der DB
-wenn man die Sprache betrachtet: zur Business Logik, denn die Mapper
sind auch in Programmiersprache, die Datenbank hat relationale
Strukturen (=Tabellen)
->es kommt also darauf an, wo man die Grenze zieht
Struktur des Projektverzeichnisses
Ein Tree Objekt = ein Ordner im Verzeichnis
Ein Ordner enthält Dateien und Unterordner (weitere Tree Objekte)
JavaScript Objekt: als Funktion oder Klasse definiert
Ruft den Constructor der Superklasse auf -> damit Attribute und
Methoden wie ID und Erstellungsdatum aufgerufen werden können
Klasse erbt von der Superklasse React.Component -> so können deren
Methoden im render angewandt werden
-constructor(props)
-render(): gibt ein einziges React Element zurück, definiert die
Darstellung der Komponente, muss immer implementiert werden
-setState()
-componentDidMount(): wird aufgerufen, nachdem Komponente
erfolgreich in den DOM eingefügt wurde
-componentDidUpdate(): aufgerufen nach Aktualisierung der
Komponente
-componentWillUnmount()
Callback Funktion -> wartet auf Erstellung eines Ereignis Objektes
(event)
Kontrolliert, dass Komponenten über props den richtigen Datentyp
verwenden und übergeben
Durch Erstellung von Route APIs und Importieren der Business Objects
=Strukturierungsprinzip für die Architektur von Softwaresystemen
->einzelne Aspekte des Systems werden einer Schicht zugeordnet
 18
Begriff Erklärung
Polymorphismus =Vielgestaltigkeit
->Überschreiben von Methoden in der Objektorientierten
Programmierung
-allgemein: Fähigkeit eines Objektes, unterschiedliche Formen
anzunehmen -> Objekte basierend nach ihrem Typ behandeln
Decorator Eine Funktion, die eine andere Funktion als Argument nimmt, deren
Verhalten erweitert, ohne die Funktion selbst zu verändern
->kann zusätzlichen Code abspielen vor und nach dem Funktionsaufruf
 19

MODELLE

Klassendiagramm:

-abstrakte Klassen: Name kursiv

-Aggegration: Teil Ganzes Beziehung
(Ganzes bekommt Raute)
-Komposition: existenzielle
Abhängigkeit (Kompositum bekommt
Raute)

ER-Modell:
 20

Sequenzdiagramm:

-Modellierung dynamischer Aspekte

-Darstellung Nachrichtenaustausch
zwischen Objekten
-zeitliche Abfolge der Nachrichten
-Objekte: horizontal
-Lebenslinien: vertikal
-Nachrichten: Pfeile zwischen
Lebenslinien

Aktivitätsdiagramm:

-dynamische Sicht
-Kontrollfluss in einem System anhand
von Aktivitäten
-Bedingungen in eckigen Klammern
-Verzweigung als schwarze Linie
-Fallunterscheidung: Raute
 21

Use Case Diagramm:

-Akteur: Beteiligter des Vorgangs, Rolle außerhalb

des Systems, interagiert mit System, kann von
verschiedenen Personen eingenommen werden
-Use Case: Menge von Aktionen, die von einem
System ausgeführt werden und zu einem Ergebnis
führen

Kommunikationsdiagramm:

-dynamische Sichtweise
-Nummerierung der Reihenfolge
-Objekte: Knoten
-Nachrichten entlang der Kanten
 22

Automatendiagramm:

-dynamische Sichtweise
-genau einer Klasse zugeordnet
-mögliche interne Zustände der
Objekte

Komponentendiagramm:

-Komponenten: Bausteine eines Softwaresystems mit starkem

inneren Zusammenhang

Verteilungsdiagramm:

-Anordnung von Komponenten auf Knoten

-Knoten: zur Laufzeit vorhandenes Objekt das
über Speicher verfügt
-Knoten als Quader dargestellt
-Knoten enthalten Komponenten und deren
Beziehungen
 23

Klassendiagramm relationale Datenstruktur

-name: Name der Tabelle

-columns: Liste der Spalten der Tabelle

-rows: Liste der Zeilen der Tabelle

-insert(): fügt neue Zeilen in die Tabelle

-update() aktualisiert eine bestehende Zeile

-delete(): löscht eine bestehende Zeile

-select(): ruft Daten aus der Tabelle ab

-name: Name der Spalte

-dataType: Datentyp der Spalte (z.b. Integer)

-constraints: Einschränkungen auf den Inhalt der Spalte (z.b. Primary

Key)

-values: ein Array von Werten, die die Spaltenwerte der Zeile
darstellen
 24

Code Beispiele
Form
 25

Requests
GET-Request:

->die Methode GET muss nicht angegeben werden

 26
POST-Request:

->z.b. in der handleSubmit Methode

->JSON.stringify wandelt das JS-Objekt aus den geschweiften Klammern in einen JSON sting um
->response: Antwort der API als JSON
->response.json: gibt kein JSON zurück, sondern nimmt JSON als Input und parst es, um ein JS-
Objekt zu erstellen
->data: Antwort der API als JS
->error: Antwort der API, wenn ein Fehler auftritt
->header: gibt an, in welchem Format der Inhalt des bodys übergeben wird, hier: JSON (wichitg,
damit Server weiß, wie er den Inhalt interpretieren soll)
 27
DELETE Request:

PUT Request:

->alternative Möglichkeit, die Response der API zu verarbeiten

 28

Liste
 29

Render a Component – root

Ressourcenaddressierung
Backend:

Frontend:
 30
Flask

Singleton

-static instance -> Deklaration einer statischen Variable

-: APIClient -> gibt den Typ dieser Variablen an

-getInstance() -> gibt eine Instanz vom Typ APIClient zurück

-private Konstruktor: damit von außen keine Instanz erstellt werden kann -> nur die Klasse selbst
kann eine erstellen

-private Variable: von außen kann nicht auf die Instanz zugegriffen werden -> Verwaltung nur
innerhalb der Klasse möglich
 31
Promise

Promise-Klasse

Security Decorator
 32

Mapper

Superklasse Mapper
 33
Find_all()

Insert()
 34
Delete()

->kein return
Update()

->kein return

MapperAufruf in der Admin

BO im Backend
 35
BO im Frontend

fromJSON

->gibt ein Array von Konversationsobjekten zurück (umgewandelt aus einer JSON Struktur)
 36
Hooks

Von Frontend bis Backend

Benutzereingaben werden erfasst

Client Anfrage wird über ein RPC oder eine Restful API an den Server
gesendet

verarbeitet die Anfrage vom Client

Service Layer ruft über einen fetchCall die angefragte Ressource auf
fetchCall beinhaltet einen HTTP-Request, dieser eine URL
Flask bzw. RestX in der main.py sind die URLs hinterlegt, von hier aus wird auf die
Business Logik zugegriffen

Business Logic Anwendung von Algorithmen und Geschäftsregeln

Erstellen, bearbeiten oder Löschen von Objekten
Layer hier werden dann die Mapper aufgerufen, die die Objekte in ein
geeignetes Format umwandeln
Admin.py

Datenbank Mapper speichern Daten ab

fetchAll() gibt Ergebnisse zurück
MySQL
 37

Polymorphismus
->Methoden mit dem selben Namen können in unterschiedlichen Klassen oder auch in der selben
Klasse unterschiedlich implementiert werden

-statisch: Entscheidung, welche Methode verwendet wird beim Komplieren des Codes, Beispiel:
eine Klasse hat zwei Methoden mit dem selben Namen, diese übernehmen aber unterschiedliche
Parameter -> überladen von Methoden

-dynamisch: Entscheidung während der Laufzeit, Beispiel: eine Methode einer abstrakten Klasse
wird in Unterklassen unterschiedlich implementiert -> Polymorphismus durch Vererbung