84 lines
3.4 KiB
Markdown
84 lines
3.4 KiB
Markdown
ANDROID App - 1:1 Portierung der Web-UI (TODO)
|
|
|
|
Ziel: Die Web-UI des Projekts 1:1 in eine native (oder cross-platform) Android-App überführen, inklusive Farben, Designsystem und aller Funktionalitäten.
|
|
|
|
1) Analyse Codebasis & Assets
|
|
- Analysiere `package.json`, `nuxt.config.js`, `tailwind.config.js` und zentrale Server-/API-Endpunkte.
|
|
- Liste alle verwendeten Farben, CSS-Variablen, Tailwind-Konfigurationen.
|
|
- Sammle alle statischen Assets: Bilder, Icons, SVGs, Fonts, PDF-Dokumente.
|
|
- Identifiziere dynamische Komponenten: Formulare, Rich-Text-Editor, Uploads, Kalender, Navigation.
|
|
|
|
2) Projektziele und Scope
|
|
- Entscheide: Native Android (Kotlin/Jetpack Compose) oder Cross-Platform (React Native, Flutter, Kotlin Multiplatform).
|
|
- Priorisiere Features für MVP vs. Post-Launch.
|
|
|
|
3) Designsystem und Farben extrahieren
|
|
- Extrahiere Farbpalette, Typografie, Abstände, Buttons, Karten, Form-Controls.
|
|
- Erstelle eine Design-Token-Liste (Hex/RGBA, Namen, Einsatzbereiche).
|
|
|
|
4) Technologie-Stack wählen
|
|
- Empfohlene Optionen: Kotlin + Jetpack Compose (native), Flutter (UI-First), React Native (Wiederverwendung von JS/nuxt-Logik).
|
|
- Bibliotheken: Navigation, HTTP-Client, Bild-Handling, Auth (WebAuthn falls nötig), Local DB.
|
|
|
|
5) Android-Projekt aufsetzen
|
|
- Erstelle Projekt-Scaffold, CI-Build, Signing-Config.
|
|
|
|
6) Theme & Farben implementieren
|
|
- Implementiere App-Theme mit Farben/Typografie-Token.
|
|
|
|
7) Navigation-Struktur implementieren
|
|
- Bottom/Navigations-Drawer/Stack wie Web-Navigation abbilden.
|
|
|
|
8) Screens für Seiten anlegen
|
|
- Erstelle Screens für: Startseite, Termine, Spielplan, Galerie, Kontakt, News, Mitgliedschaft, Login, CMS-Bereiche.
|
|
|
|
9) UI-Komponenten portieren
|
|
- Navbar, Footer, Cards, Image-Grid, Modal/Dialog, Rich-Text-Viewer/Editor, Date-Picker, Tabellen.
|
|
|
|
10) Formulare & Validierung implementieren
|
|
- Registrieren, Login, Passwort vergessen, Mitgliedschaftsformulare mit Client- und Server-Validierung.
|
|
|
|
11) Authentifizierungs-Flow implementieren
|
|
- JWT / Session, OAuth oder WebAuthn falls benötigt; Token-Handling sicher speichern.
|
|
|
|
12) API-Client implementieren
|
|
- Einheitlicher HTTP-Client, Error-Handling, Retry-Strategien, Pagination.
|
|
|
|
13) Bilderupload & Storage einrichten
|
|
- Multi-part Upload, Progress, Bildkompression, lokale Cache-Strategie.
|
|
|
|
14) Offline-Support und Caching
|
|
- Caching von API-Responses, Bild-Caching, Sync-Strategie für Formulare.
|
|
|
|
15) Lokalisierung und Texte prüfen
|
|
- Alle statischen Texte extrahieren, deutsche Strings prüfen und in Resource-Files ablegen.
|
|
|
|
16) Accessibility-Prüfung und Anpassungen
|
|
- Farbkontrast, Touch-Targets, Screenreader-Labels.
|
|
|
|
17) Unit- und UI-Tests schreiben
|
|
- Komponenten- und Integrations-Tests, E2E (falls möglich).
|
|
|
|
18) Performance-Optimierung durchführen
|
|
- Bilder, Netzwerk, Render-Perf.
|
|
|
|
19) CI/CD für Builds einrichten
|
|
- GitHub Actions / GitLab CI: Build, Test, Lint, Release.
|
|
|
|
20) Play Store Release vorbereiten
|
|
- App-Icons, Screenshots, Privacy-Policy, Datensparsamkeit.
|
|
|
|
21) Monitoring & Crash-Reporting einrichten
|
|
- Sentry / Firebase Crashlytics, Analytics.
|
|
|
|
22) Dokumentation: Setup & Architektur
|
|
- README, Architekturdiagramm, API-Spec, Onboarding-Guide.
|
|
|
|
23) Design Review und Abnahme
|
|
- UX/Design-Review mit Stakeholdern.
|
|
|
|
24) Launch und Feedbackrunde durchführen
|
|
- Release-Notes, Feedback-Formular, Bug-Fixing-Plan.
|
|
|
|
|
|
Datei erstellt: Bitte bestätige, wenn ich mit der in-depth Analyse der Codebasis und Assets beginnen soll (Suche nach Farben, verwendeten Komponenten, Images, Fonts, relevanten Scripts). |