Achitektur - SE-TINF22B2/G3-ApeRepublic GitHub Wiki

Übersicht

Willkommen zur Architekturübersicht unseres Trading Simulator-Projekts! In diesem GitHub-Wiki bieten wir einen detaillierten Einblick in die Technologien und Architekturentscheidungen, die hinter unserem Trading Simulator stehen. Das Projekt kombiniert Angular im Frontend, TypeScript als Programmiersprache, Spring Boot im Backend und MySQL als zuverlässige Datenbanklösung.

Technologien

Angular

Unsere Trading Simulator-Anwendung setzt auf Angular, ein modernes Frontend-Framework, um eine benutzerfreundliche und dynamische Benutzeroberfläche zu bieten. In diesem Abschnitt erfahren Sie mehr über die Integration von Angular und die wichtigsten Funktionen, die für ein reibungsloses Benutzererlebnis sorgen.

Voraussetzungen

  • HTML5
  • CSS3
  • TypeScript(OOP)

Architekturüberblick

Unser Angular-Frontend ist modular aufgebaut und nutzt Angular-Komponenten, Module und Services, um die verschiedenen Funktionen der Trading Simulator-Anwendung zu realisieren. Hier geben wir Ihnen einen Einblick in die Architektur und Struktur unseres Angular-Clients.

Komponenten

  • Chart Component: Zeigt Finanzdaten in Form von Diagrammen oder Grafiken an und ermöglicht es dem Benutzer, Trends und Muster zu analysieren.

  • Trade Form Component: Stellt ein Formular dar, das es dem Benutzer ermöglicht, Trades auszuführen, indem er Handelsparameter wie Symbol, Menge und Preis eingibt.

Module

  • Core Module: Enthält allgemeine Services, wie z.B. einen API-Dienst zur Kommunikation mit dem Backend, der von der gesamten Anwendung genutzt wird.

  • Trade Module: Enthält Komponenten und Services, die speziell für die Handelsfunktionalität der Anwendung benötigt werden, wie z.B. die Trade-Form-Komponente und den Trade-Service.]

Services

  • Datenabrufservice: Kommuniziert mit dem Backend, um relevante Daten abzurufen und an die entsprechenden Komponenten weiterzuleiten.
  • FinnhubPriceService: Beliefert uns mit aktuellen Preisen der jeweiligen Aktie

TypeScript

Unsere Trading Simulator-Anwendung profitiert von der Verwendung von TypeScript als Programmiersprache für das Frontend. TypeScript erweitert JavaScript um statische Typisierung, was die Codequalität und -Sicherheit verbessert. Hier werfen wir einen Blick darauf, wie TypeScript in unserem Projekt eingesetzt wird.

Warum TypeScript?

TypeScript bietet folgende Vorteile:

  • Statische Typisierung: Frühzeitige Fehlererkennung und verbesserte Codequalität.
  • Verbesserte Lesbarkeit: Klare und gut strukturierte Codebasis.
  • Tool-Unterstützung: Umfangreiche Unterstützung durch Entwicklertools wie Autovervollständigung und Refactoring.

Integration in Angular

TypeScript wird nahtlos in das Angular-Framework integriert. Hier sind einige der Schlüsselfunktionen von TypeScript in unserer Angular-Anwendung:

Typisierte Modelle

Alle Modelle für Handelsaktivitäten, Benutzerportfolios und andere relevante Daten sind in TypeScript typisiert. Dies erleichtert die Arbeit mit Datenstrukturen und sorgt für konsistente Datenverarbeitung im Frontend.

Schnittstellen für Services

Die Kommunikation mit Backend-Services erfolgt über definierte TypeScript-Schnittstellen. Dies erleichtert nicht nur die Integration, sondern ermöglicht auch eine klare Definition von Datenformaten und API-Aufrufen.

Klassenbasierte Struktur

Komponenten und Services sind in TypeScript als Klassen implementiert. Dies fördert eine objektorientierte Herangehensweise und erleichtert die Wartung und Erweiterung des Codes.

Hier sind einige Beispiele von TypeScript-Codeabschnitten:

// Beispiel für eine Handelsaktivität
interface TradeActivity {
  symbol: string;
  quantity: number;
  price: number;
  timestamp: Date;
}

// Beispiel für einen Datenabrufservice
class DataService {
  async getTradeActivities(): Promise<TradeActivity[]> {
    // Logik zum Abrufen von Handelsaktivitäten vom Backend
  }
}

SpringBoot

Spring Boot bildet das Rückgrat unseres Trading Simulator-Projekts, indem es eine effiziente und skalierbare Backend-Infrastruktur bereitstellt. Hier erfahren Sie mehr über die Architektur und Funktionalitäten von Spring Boot in unserem Projekt.

Spring Boot im Trading Simulator

Unser Trading Simulator verlässt sich auf Spring Boot als Backend-Framework, um eine zuverlässige und skalierbare Serverinfrastruktur bereitzustellen. In diesem Abschnitt erhalten Sie einen Überblick über die Architektur und Schlüsselfunktionen von Spring Boot in unserem Projekt.

Architekturübersicht

Die Architektur des Spring-Boot-Backends ist in mehrere Module unterteilt:

(**ICH WEIß NICHT OB WIR DIE AUFTEILUGN SO MACHEN **)

1. Controller

  • TradeController: Verwaltet HTTP-Anfragen im Zusammenhang mit Handelsaktivitäten.
  • PortfolioController: Zuständig für Anfragen bezüglich Benutzerportfolios.
  • UserAuthController: Bedient RESTful-API-Anfragen zur Nutzer-Authentifizierung

2. Services

  • TradeService: Implementiert die Geschäftslogik für Handelsaktivitäten.
  • PortfolioService: Verwaltet die Aktualisierung und Abfrage von Benutzerportfolios.
  • UserAuthService: Implementiert das Handhaben von Authentifizierungs- und Sitzungsanfragen.

3. Datenbankzugriff

  • TradeRepository: Kommuniziert mit der MySQL-Datenbank für Handelsaktivitäten.
  • PortfolioRepository: Verantwortlich für den Zugriff auf Benutzerportfolios in der Datenbank.
  • UserRepository: Schnittstelle zur User-Datenbank

Integration mit Angular

Die Kommunikation zwischen Angular-Frontend und Spring-Boot-Backend erfolgt über RESTful-APIs. Hierbei werden Daten im JSON-Format ausgetauscht, um eine nahtlose Integration zu gewährleisten.

Beispielcode aus dem Backend

// Beispiel für einen Controller-Endpunkt
@RestController
@RequestMapping("/api/trade")
public class TradeController {
    
    @Autowired
    private TradeService tradeService;

    @GetMapping("/activities")
    public List<TradeActivity> getTradeActivities() {
        return tradeService.getAllTradeActivities();
    }

    // Weitere Controller-Endpunkte für Handelsaktivitäten...
}

MySQL

MySQL dient als zuverlässige Datenbanklösung für unseren Trading Simulator. Erfahren Sie mehr über die Struktur und Verwendung von MySQL in unserem Projekt.

Die Trading Simulator-Anwendung speichert ihre Daten zuverlässig in einer MySQL-Datenbank. In diesem Abschnitt werfen wir einen Blick auf die Struktur der Datenbank und wie sie in unserem Projekt integriert ist.

Datenbankstruktur

Die MySQL-Datenbank ist/wird in mehrere Tabellen unterteilt, um verschiedene Aspekte der Handelsaktivitäten und Benutzerportfolios zu speichern:

ER Modell

Integration mit Spring Boot

Die Spring-Boot-Anwendung kommuniziert über JPA (Java Persistence API)??? mit der MySQL-Datenbank. Hierbei werden die Entity-Klassen direkt auf die Datenbanktabellen abgebildet.

Beispielcode für eine Entity-Klasse

@Entity
@Table(name = "trade_activity")
public class TradeActivity {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String symbol;

    @Column(nullable = false)
    private int quantity;

    @Column(nullable = false)
    private double price;

    @Column(nullable = false)
    private LocalDateTime timestamp;

Codedokumentation

Frontend

Ordnerstruktur des FrontEnds (Angular Projekt)

frontend
├── .angular
├── node_modules  
└── src
    ├── app
    │   ├── component1
    │   │    ├── .html
    │   │    ├── .scss
    │   │    ├── .spec.ts
    │   │    ├── .ts
    │   └── component2
    │        └── .html
    │             ...
    ├── assets
    ├── models
    └── services

Server

Ordnerstruktur des Servers (Java Projekt)

server
├── gradle
│   └── wrapper
└── src
    ├── main
    │   ├── java
    │   │   └── de
    │   │       └── aperepublic
    │   │           └── server
    │   │               ├── controller
    │   │               ├── models
    │   │               │   ├── requests
    │   │               │   └── response
    │   │               ├── repositories
    │   │               └── services
    │   └── resources
    └── test
        └── java
            └── de
                └── aperepublic
                    └── server
                        ├── controller
                        ├── models
                        └── services

  • server/src/:

    • Der Ordner "main" enthält alle Klassen die den Server bilden.
    • Der Ordner "test" enthält alle Testklassen die für den Server geschrieben wurden. Ausgeführt werden können diese Testklassen durch den Command "gradle test" (mit der Vorraussetzung das Gradle auf dem System installiert ist).

  • server/src/main/java/de/aperepublic/server/ServerApplication.java: Ist die Hauptklasse mit der der Server gestartet werden kann (Datenbank nicht mit eingeschlossen).

  • server/src/main/java/de/aperepublic/server:

    • Unter "controller" sind mehrere Klassen die Anfragen von Clients abfangen enthalten und so unterteilt sind um die funktionalen Anforderungen zu spiegeln
    • Unter "models" sind alle Klassen um Entities der Datenbank abzudecken enthalten und des weiteren Klassen für das Handhaben von laufzeitrelevanten Funktionalitäten
    • Unter "repositories" sind alle Klassen enthalten, die wichtig sind für das Lesen und Schreiben von Datenbanktabellen. Jede Tabelle in der Datenbank wird repräsentiert durch eine dieser Klassen.