TFO KI Frontend

Projektidee

TFO KI ist ein intelligentes Chat-System, das als zentrale Anlaufstelle für schulspezifische Informationen an der TFO Max Valier dient. Es ermöglicht Schülern und Lehrpersonen einen schnellen Zugriff auf Daten wie Stundenpläne, Lehrpläne oder die Schülercharta. Ziel des Projekts ist die Entwicklung einer modernen, responsiven Weboberfläche auf Basis von Angular, die komplexe Informationen durch KI-gestützte Dialoge einfach zugänglich macht und so den Schulalltag nachhaltig vereinfacht.

Funktionsweise

Entwicklung einer modernen Web-Applikation mit dem Framework Angular
Integration einer sicheren Benutzeranmeldung via Firebase Authentication
Intuitive Chat-Oberfläche zur Interaktion mit der künstlichen Intelligenz
Mehrsprachiges Design zur Unterstützung der lokalen Sprachgruppen
Umsetzung als Progressive Web App (PWA) für die optimale mobile Nutzung
Gestaltung im Corporate Design der TFO Max Valier

Daten und Fakten

Umfang: Über 6.000 Zeilen Quellcode (TS, HTML, SCSS)
Struktur: Rund 100 Dateien organisiert in über 30 Verzeichnissen
Komponenten: 28 maßgeschneiderte Angular-Komponenten und Pages
Technologien: Angular, Firebase Auth, SSE-Streaming, Docker
Design: Vollständig responsives UI im Corporate Design der TFO Max Valier

Detaillierte Projektbeschreibung

TFO-KI: Die zentrale KI-Anlaufstelle der TFO Max Valier

1. Zielsetzung
Der Schulalltag an der TFO Max Valier ist informationsintensiv. Stundenpläne, Reglements und Termine sind oft auf verschiedenen Plattformen verteilt. „TFO-KI“ löst dieses Problem durch eine zentrale, KI-gestützte Plattform. Nutzer können Fragen in natürlicher Sprache stellen und erhalten sofort präzise, schulspezifische Antworten. Der Fokus dieser Arbeit lag auf der Konzeption und technischen Umsetzung eines modernen, performanten Frontends.

2. Design und Benutzererlebnis (UX/UI)
Das Frontend wurde mit dem Framework Angular realisiert. Das Design orientiert sich am Corporate Design der Schule und kombiniert dieses mit modernen UI-Trends wie Glassmorphism.
Responsive Design & PWA: Die Anwendung ist als Progressive Web App (PWA) konzipiert. Dadurch bietet sie auf Mobilgeräten ein natives App-Gefühl, ermöglicht Offline-Funktionalitäten und ist plattformunabhängig direkt über den Browser installierbar.
Intuitive Bedienung: Eine dynamische Sidebar ermöglicht das Verwalten mehrerer Chat-Sitzungen (Erstellen, Umbenennen, Löschen).

3. Kernfunktionen
Firebase Integration: Die Nutzerverwaltung erfolgt sicher via Firebase (E-Mail oder Google-Login). Ein dedizierter Onboarding-Prozess personalisiert das Erlebnis durch die Erfassung von Profildaten wie Name und Klasse.
Intelligentes Chat-Interface: Die Chat-Oberfläche trennt klar zwischen Nutzeranfragen und KI-Antworten. Letztere werden vor der Anzeige verarbeitet, um Formatierungen wie Aufzählungen oder Code-Blöcke optimal darzustellen.
Account-Management: Nutzer können ihr Profil individuell verwalten, Profilbilder hochladen oder Sicherheitseinstellungen anpassen.
Internationalisierung: Um die Mehrsprachigkeit der Schule abzubilden, ist das gesamte Interface nahtlos zwischen Deutsch, Italienisch und Englisch umschaltbar.

4. Infrastruktur
Die gesamte Anwendung ist vollständig containerisiert (Docker). Dies garantiert eine konsistente Bereitstellung und einfache Skalierbarkeit.

Mit TFO-KI wurde ein technologisch anspruchsvoller Grundstein gelegt, um den Informationsfluss an der Schule durch den Einsatz künstlicher Intelligenz zukunftsfähig zu gestalten.

Fotos