Seminar Amundsen – Frontend-Anpassung und Nutzererlebnis

Ein Datenkatalog wird angenommen, wenn Suche, Detailseiten und Arbeitswege verständlich, schnell und verlässlich sind.

Das Seminar behandelt Frontend-Architektur, Konfiguration, Branding, Such- und Detailansichten, Feature-Steuerung, API-Anbindung, Barrierearmut, Tests und produktionsgerechte Bereitstellung.

Inhaltsübersicht

• Seminarprofil
• Zielgruppe
• Voraussetzungen
• Lernziele
• Inhalte und Schritt-für-Schritt-Anleitungen
• Praxisaufgaben
• Arbeitsweise und Qualitätssicherung

Seminarprofil

Der Schwerpunkt liegt auf das Seminar behandelt Frontend-Architektur, Konfiguration, Branding, Such- und Detailansichten, Feature-Steuerung, API-Anbindung, Barrierearmut, Tests und produktionsgerechte Bereitstellung. Die Inhalte werden über nachvollziehbare Entscheidungen, reproduzierbare Arbeitsschritte und dokumentierte Kontrollen vermittelt.

Zielgruppe

Frontend- und Full-Stack-Entwicklung, UX Engineering, technische Produktverantwortung und Plattformteams.

Voraussetzungen

Gute Kenntnisse in JavaScript oder TypeScript, React-Grundlagen, Web-APIs, HTML und CSS sowie grundlegendes Verständnis der Amundsen-Dienste.

Lernziele

• Frontend-Aufbau und Konfigurationspunkte sicher beherrschen.
• Suche, Navigation und Detailseiten zielgruppengerecht anpassen.
• Erweiterungen sauber an APIs, Berechtigungen und Feature-Schalter anbinden.
• Änderungen mit Tests, Barrierefreiheitskontrollen und Deployment absichern.

Inhalte und Schritt-für-Schritt-Anleitungen

Frontend-Aufbau und Entwicklungsumgebung

Die Anwendung wird in React-Oberfläche, Flask-Schicht, Konfiguration und statische Ressourcen zerlegt.

1. Schritt 1: Projektstruktur und Startpfade der Entwicklungsumgebung nachvollziehen.
2. Schritt 2: Umgebungsvariablen, Konfigurationsmodule und Feature-Schalter lokalisieren.
3. Schritt 3: API-Endpunkte und Proxy-Verhalten für lokale Entwicklung konfigurieren.
4. Schritt 4: Baseline-Build und reproduzierbaren Entwicklungsstart dokumentieren.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Branding und Informationsarchitektur

Visuelles Design wird mit Navigation, Benennung und inhaltlicher Orientierung verbunden.

1. Schritt 1: Logo, Typografie, Farben und Basiselemente über definierte Anpassungspunkte ändern.
2. Schritt 2: Navigationsbegriffe und Einstiegspunkte an Zielgruppen ausrichten.
3. Schritt 3: Startseite, Hinweise und Hilfetexte ohne Quellcode-Duplikate strukturieren.
4. Schritt 4: Darstellung auf unterschiedlichen Bildschirmgrößen prüfen.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Suche und Ergebnisdarstellung

Suchoberflächen machen Filter, Ranking und Ergebnisqualität nachvollziehbar.

1. Schritt 1: Suchfeld, Vorschläge und leere Zustände zielgerichtet gestalten.
2. Schritt 2: Filter, Entitätstypen und Ergebnisattribute priorisieren.
3. Schritt 3: Ranking-Signale und erklärende Hinweise in der Oberfläche berücksichtigen.
4. Schritt 4: Fehler-, Timeout- und Teilergebniszustände verständlich darstellen.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Detailseiten und Fachaktionen

Detailseiten werden auf die Entscheidungen der jeweiligen Nutzergruppe fokussiert.

1. Schritt 1: relevante Metadatenblöcke und Reihenfolge je Entität festlegen.
2. Schritt 2: Ownership-, Tag-, Beschreibung- und Feedbackaktionen integrieren.
3. Schritt 3: externe Systembezüge als interne, kontrollierte Aktionen modellieren.
4. Schritt 4: fehlende, veraltete oder eingeschränkte Daten eindeutig kennzeichnen.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

API-Anbindung und Berechtigungen

Frontendfunktionen dürfen nur verfügbare und zulässige API-Funktionen anbieten.

1. Schritt 1: API-Verträge und Fehlercodes pro Funktion dokumentieren.
2. Schritt 2: Sitzungs-, Rollen- und Feature-Informationen in die Anzeige einbeziehen.
3. Schritt 3: Lade-, Fehler- und Wiederholungslogik konsistent implementieren.
4. Schritt 4: unzulässige Aktionen sowohl in Oberfläche als auch Backend absichern.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Qualität, Barrierearmut und Tests

Nutzererlebnis wird durch automatisierte und manuelle Prüfungen reproduzierbar abgesichert.

1. Schritt 1: Komponenten- und Interaktionstests für zentrale Arbeitswege erstellen.
2. Schritt 2: Tastaturbedienung, Fokusführung, Kontrast und semantische Struktur prüfen.
3. Schritt 3: Performance-Baseline für Start, Suche und Detailseite messen.
4. Schritt 4: Regressionen mit visuellen und End-to-End-Tests erkennen.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Build, Konfiguration und Deployment

Anpassungen werden versioniert, umgebungsspezifisch und rückrollbar ausgeliefert.

1. Schritt 1: Buildparameter und Laufzeitkonfiguration sauber trennen.
2. Schritt 2: Containerbuild und statische Assets reproduzierbar erzeugen.
3. Schritt 3: Health Checks, Cache-Verhalten und Reverse-Proxy-Pfade prüfen.
4. Schritt 4: Release, Rollback und Nachkontrolle in einer Deployment-Checkliste festhalten.

Kontrolle: Der Arbeitsschritt gilt als abgeschlossen, wenn Ausgangslage, Änderung beziehungsweise Entscheidung und überprüfter Zielzustand nachvollziehbar dokumentiert sind.

Praxisaufgaben

1. Praxisaufgabe 1: Entwicklungsumgebung starten und Konfigurationspunkte dokumentieren.
2. Praxisaufgabe 2: Branding und Startseite für eine definierte Zielgruppe anpassen.
3. Praxisaufgabe 3: Suchergebnisse und Filter mit begründeter Informationspriorität überarbeiten.
4. Praxisaufgabe 4: Detailseite um eine fachliche Aktion und klare Fehlerzustände ergänzen.
5. Praxisaufgabe 5: Barrierefreiheits-, Komponenten- und End-to-End-Tests ausführen.
6. Praxisaufgabe 6: Build- und Deploymentablauf mit Rückfallplan erstellen.

Arbeitsweise und Qualitätssicherung

Jeder Themenblock folgt demselben Muster: Ausgangszustand erfassen, Zielzustand festlegen, Änderung oder Analyse in kleinen Schritten durchführen, Resultat kontrollieren und den Ablauf für Wiederholung oder Übergabe dokumentieren. Demonstrationen werden durch Übungen, Prüflisten, Fehlerfälle und gemeinsame Reviews ergänzt.

Die Übungen verwenden eine isolierte Labor- oder Plansituation. Produktive Änderungen werden erst nach technischer Prüfung, Freigabe, Sicherung, Rückfallplanung und dokumentierter Nachkontrolle vorgesehen.