Hintergrund / Motivation

Im Rahmen der Ausbildung zum Fachinformatiker für Systemintegration ist es wichtig, theoretische Inhalte praktisch umzusetzen und komplexe IT-Systeme ganzheitlich zu verstehen. Das Hörbuch-Projekt wurde entwickelt, um zentrale Themen wie Client-Server-Kommunikation, Webanwendungen, Datenbanken und Benutzerverwaltung praxisnah zu verknüpfen. Ziel war es, nicht nur einzelne Technologien isoliert zu betrachten, sondern deren Zusammenspiel in einem realitätsnahen Szenario zu erlernen und anzuwenden. Zusätzlich sollte das Projekt typische Anforderungen aus dem Alltag der IT, wie Benutzeranmeldung, Rechteverwaltung und Datenpersistenz, abbilden.

Beschreibung

Bei dem Projekt handelt es sich um eine webbasierte Hörbuch-Anwendung, die über einen Browser genutzt werden kann. Benutzer können sich registrieren, anmelden und Hörbücher aus einer zentralen Datenbank abrufen. Die Anwendung ermöglicht das Abspielen von Hörbüchern, das Speichern des Wiedergabefortschritts sowie das Markieren von Favoriten. Im Hintergrund kommuniziert das Frontend über eine REST-API mit einem C#-Backend, das für die Geschäftslogik und den Zugriff auf die Datenbank zuständig ist. Die Datenbank speichert Benutzerinformationen, Hörbücher, Favoriten und den Hörfortschritt. Das Projekt zeigt exemplarisch, wie moderne Webtechnologien, Serverdienste und Datenbanksysteme zusammenarbeiten und stellt damit ein praxisnahes Beispiel für typische Aufgaben eines Fachinformatikers für Systemintegration dar.

Technologien
  • Visual Studio Code (VS Code)
    • Als Entwicklungsumgebung für Frontend und Backend. VS Code bietet eine gute Erweiterbarkeit und Unterstützung für JavaScript, HTML, CSS und C#.
  • C# (Backend)
    • Das Backend wurde in C# umgesetzt. Es stellt eine REST-API zur Verfügung, über die das Frontend auf Daten zugreifen kann.
    • Die API übernimmt die Geschäftslogik, Authentifizierung sowie die Kommunikation mit der Datenbank.
  • HTML
    • Wird für die Grundstruktur der Weboberfläche verwendet. Inhalte wie Navigation, Seitenstruktur und Player-Komponenten sind in HTML definiert.
  • JavaScript
    • JavaScript übernimmt die gesamte Client-Logik, darunter:
    • API-Kommunikation (über Axios)
    • Benutzerinteraktionen
    • dynamisches Laden von Inhalten
    • Steuerung des Audio-Players
  • bcrypt (Passwortverschlüsselung)
    • Zur sicheren Speicherung von Passwörtern im Backend.
    • Passwörter werden nicht im Klartext gespeichert, sondern gehasht, um Sicherheitsanforderungen zu erfüllen.
  • Tailwind CSS
    • Ein Utility-First-CSS-Framework zur schnellen und konsistenten Gestaltung der Benutzeroberfläche.
  • DaisyUI
    • Erweiterung für Tailwind CSS, die vorgefertigte UI-Komponenten bereitstellt (Buttons, Cards, Alerts etc.).
  • MySQL
    • Relationale Datenbank zur Speicherung von:
    • Benutzerdaten
    • Hörbuchdaten
    • Favoriten
    • Wiedergabefortschritt
Projektinfo
Schuljahr:
25/26
Ausbildung:
Systemintegration
Schüler:
Tobias Kopp / Max Pfleger
Betreuer:
Herr Matthias Graf, Herr Hans Apfelbeck
Bilder
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.