Baue eine native macOS-App namens "MyHuhnBank". ## Referenzen für die Implementierung Lies diese beiden Quellen, bevor du anfängst: - YAXI API-Dokumentation: https://docs.yaxi.tech/getting-started.html - Offizielles YAXI Demo-Projekt (React + Spring Boot): https://github.com/yaxitech/routex-react-demo Das Demo-Projekt zeigt den vollständigen Ticket-Flow: Backend stellt Tickets aus, Frontend ruft YAXI-Services damit auf. Orientiere dich an dieser Architektur, aber baue alles in eine einzige Glaze-App ohne separaten Backend-Server. ## Ziel Eine schlichte, ansprechende Banking-Übersicht, die echte Kontodaten über die YAXI Open-Banking-API abruft und anzeigt. ## YAXI-Integration (Technische Umsetzung) - API-Key: DEIN_YAXI_API_KEY - Der API-Key dient zur Signierung von Service-Tickets (JWT mit HS256, kid = API-Key-ID) - Ticket-Ausstellung direkt in der App (kein separater Backend-Server nötig) - Ablauf: 1. App startet mit "Bank verbinden"-Button 2. Beim Klick: App signiert ein JWT-Ticket mit dem API-Key - Service "Accounts": ruft IBAN und Kontoinhaber ab (kein ticket data nötig) - Service "Balances": ruft Kontostand ab (kein ticket data nötig) - Service "Transactions": ruft Umsätze der letzten 90 Tage ab 3. App übergibt das Ticket an die YAXI-Bibliothek 4. YAXI zeigt das Bank-Login-Formular (läuft in einem eingebetteten WebView) 5. Nach erfolgreicher Authentifizierung liefert YAXI die Daten als signierten JWT zurück 6. App verifiziert und dekodiert den Response-JWT und zeigt die Daten an Für den YAXI-Client: Nutze die JavaScript/TypeScript-Implementierung aus dem Demo-Repo als Vorlage (routex-react-demo/src). Die App läuft in einer Glaze WebView-Umgebung, daher ist ein JS/TS-Frontend mit eingebettetem Node-Backend für die JWT-Signierung die einfachste Lösung. ## Datenstruktur (aus YAXI-Response) Accounts-Response: { bic, currency, iban, ownerName } Balances-Response: { account: { iban }, balances: [{ amount, currency, balanceType }] } balanceType "Booked" = gebuchter Saldo, "Expected" = verfügbar Transactions-Response: { bookingDate, amount: { currency, amount }, creditor: { name, iban }, debtor: { iban }, remittanceInformation: [string] } ## Hauptansicht (nach Login) - Ganz oben: ownerName und IBAN (grau, klein, 13px) - Groß in der Mitte: Booked Balance in Euro, fett, 36px - Darunter: "Verfügbar: X,XX €" (Expected Balance), grau, 16px - Trennlinie - Liste der letzten 30 Transaktionen, sortiert nach bookingDate absteigend: - Zeile 1: Datum links, creditor.name oder debtor.iban rechts - Zeile 2: remittanceInformation[0] links (grau, 12px), Betrag rechts (positiv = grün, negativ = rot, fett) - Oben rechts: "Aktualisieren"-Button (lädt alle drei Services neu) ## Design - Hintergrund: #FFFFFF, Schrift: #1A1915, Akzent: #1A3A5C - Schrift: SF Pro / System-Default - Kein Chart, kein Dashboard. Nur das Wesentliche. - Fenstergröße: 420 x 680 px, nicht resizable ## Datenhaltung - API-Key im macOS Keychain speichern (nicht in UserDefaults oder Plaintext) - Bankdaten nur im Arbeitsspeicher, nie auf Disk schreiben - Session nach App-Neustart neu aufbauen (YAXI-Sessions sind kurzlebig) ## Fehlerbehandlung - API nicht erreichbar: freundliche Fehlermeldung + "Erneut versuchen"-Button - JWT-Verifikation fehlgeschlagen: Fehlermeldung mit Hinweis auf API-Key-Prüfung - Ticket abgelaufen (nach ca. 10 Min.): automatisch neues Ticket ausstellen