Gehe zurück zur Hauptseite.

Architektur

Die Web-App DEFVIS basiert auf einer Server-Client-Architektur. Die Schnittstelle zwischen dem Client (Frontend) und dem Server (backend) basiert auf FastAPI (fastapi.com). Als Speichermedium für die Daten dient eine SQLite-Datenbank (www.sqlite.org).

Beschreibung der Architektur

Daten-Upload

Nutzer und Nutzerinnen (User) unserer Web-App können eigene Punktdaten in Sessionen als .csv-Datei gebündelt in die Web-App einspeisen (im Bereich Session erfassen). Die Datei wird anschliessend mit Axios an die FastAPI-Schnittstelle im Backend gesendet. Das Backend erstellt in der Tabelle Sessions in der Datenbank einen neuen Eintrag. Anschliessend werden die Punkte in die Tabelle Points geschrieben und mit der eben erstellten Session verknüpft.

Anzeigen von Daten

Nachdem ein Nutzer oder eine Nutzerin eingeloggt ist, wird über Axios eine Anfrage an das Backend gestellt. Diese Anfrage an FastAPI löst eine Funktion im Backend aus, welche alle Projekte, für welche die Person Zugriffsrechte hat, lädt. Diese Projekte werden dann von FastAPI zurück an Axios im Frontend gesendet. Im Frontend kann die Nutzerin oder der Nutzer anschliessen ein Projekt auswählen. Geschieht dies, wird mit Axios eine Anfrage an die FastAPI-Schnittstelle gesendet. Diese Anfrage löst im Backend eine Funktion aus, welche alle Punkte des Projektes gebündelt in Sessionen zurückgibt. Die Antwort wird wiederum mit FastAPI zurückgesendet und von Axios empfangen. Die Sessionen können nun im Frontend über das Drop-down-Menü ausgewählt werden. Sind sowohl Nullmessung als auch Folgemessung ausgewählt, werden die Punkte in die Tabelle am linken Bildschirmrand, die Karte und in die 3D-Darstellung geladen. Über die blauen Knöpfe in der Tabelle kann die Ansicht, je nach Auswahl in der Karte oder in der 3D-Ansicht, auf den selektierten Punkt verschoben werden.

Die nachfolgende Grafik zeigt die oben beschriebene Geodateninfrastruktur schematisch auf und verweist auf die wichtigsten Komponenten der Applikation.

Frontend

Die Umsetzung im Frontend wurde mit next.js (nextjs.org) gemacht. Als Programmiersprache im Frontend wurde TypeScript (www.typescriptlang.org) gewählt. TypeScript (TS) stellt im Gegensatz zu JavaScript (JS) sicher, dass die Datentypen definiert sind, was die Anwendung weniger fehleranfällig macht. Für die Darstellung im Frontend wurde auf Tailwind (tailwindcss.com) gesetzt. Tailwind ist ein CSS-Framework, welches die wichtigsten Styling-Attribute von CSS abdeckt und einwandfrei mit Next.js und TS kombinierbar ist. Die Kommunikation zum Backend wird durch Axios (axios-http.com) gelöst. Die nachfolgende Auflistung zeigt die *JS*- & **.tsx-Dateien im Ordner *frontend/src/app*, welche für den Client verwendet werden und ihre Funktionalitäten auf:

• layout.tsx: Hauptdatei, für Layout zuständig
• page.tsx: Hauptbildschirm, regelt, ob Benutzer / Benutzerin Zugriff auf die Applikation hat
• components/Button.tsx: Einheitliche Darstellung der Buttons
• components/Detail.tsx: Verwaltung der States und Einbindung der 3D-Darstellung
• components/Navbar.tsx: Serverkomponente, welche die Routen für Log-in, Registrierung und Log-out bereitstellt.
• components/OlMap.tsx: Darstellung der Punkte und Verschiebungen in der Karte
• components/Settings.tsx: Verwalten von allen Punkt-, Sessions- und Projektdaten, Einbindung der verschiedenen Ansichten
• components/TableView.tsx: Darstellung der Punktverschiebungen in einer Tabelle
• components/ThreeScene.tsx: Darstellung der Punkte auf dem 3D-Modell
• components/cookies/cookiecreator.tsx: Schreiben von Cookies (für Log-in benötigt)
• components/cookies/cookiereader.tsx: Lesen von Cookies (für Log-in benötigt)
• components/login/page.tsx: Einlogen von Benutzenden
• components/logout/page.tsx: Abmelden von Benutzenden
• components/register/page.tsx: Registrierung von neuen Benutzern / Benutzerinnen

Backend

Das Backend ist in der Programmiersprache Python (python.org) geschrieben. In der Datei db.py ist eine Klasse enthalten, welche die Interaktion mit der Datenbank ermöglicht. Dafür wird die Python-Bibliothek sqlite3 verwendet. Total sind 15 Funktionen vorhanden. Diese sind in folgende Kategorien zu unterteilen:

• DB erstellen: Erstellen der Datenbank und einrichten der Tabellen
• User: Interaktion mit der Tabelle User (User erstellen und lesen)
• Project: Interaktion mit der Tabelle projects (Projekte erstellen und lesen)
• Sessions: Interaktion mit der Tabelle sessions (Sessionen erstellen und lesen)
• Points: Interaktion mit der Tabelle points (Punkte erstellen und lesen)

Die Funktionen der Datei db.py werden in der Datei main.py aufgerufen. Hier werden die Bibliotheken FastAPI, pydantic und uvicorn benötigt. Durch FastAPI werden sieben Routen mit den folgenden Zwecken eröffnet:

• /user: Benutzer erstellen
• /login: Log-in prüfen
• /newProject: Projekt erstellen
• /openProject: Projekte der nutzenden Person laden
• /newSession: Neue Session im Projekt anlegen
• /getSessions: Vorhandene Sessionen im Projekt anzeigen & Punkte beziehen

Datenbank

In der Datenbank wurden vier Tabellen erstellt, welche die Nutzer und deren Projekte verwalten. Die Tabellen sind:

• user
• projects
• sessions
• points

In diesen vier Tabellen werden alle nötigen Informationen gespeichert. Die Integrität der Daten wird durch Python im backend sichergestellt und durch entsprechende Fehlermeldungen im frontend den Nutzenden mitgeteilt. In der anschliessenden Grafik ist das Datenbankschema ersichtlich. Die fett geschriebenen Attribute sind gemeinsam, eindeutig.

---

Zurück nach ganz oben.