Refactored the `ping-feature` module to adopt centralized `HttpClient` through Koin DI, replacing legacy implementations. Added secure API calls with improved error handling and updated Webpack build scripts to resolve worker path issues. Enhanced `PingScreen` with extended functionality, UI updates, and aligned test cases for the new architecture. Consolidated feature workflows and finalized documentation with a comprehensive feature implementation guide.
2.5 KiB
| type | status | owner | last_update |
|---|---|---|---|
| Guide | ACTIVE | Frontend Expert | 2026-01-17 |
Feature-Implementierungs-Guide
Dieser Guide beschreibt das Standard-Vorgehen zur Implementierung eines neuen Features im Meldestelle-Frontend, basierend auf der Referenz-Implementierung des ping-feature.
Architektur-Muster
Jedes Feature folgt einer strikten Trennung und nutzt Dependency Injection (Koin).
1. API Client (Network Layer)
Anstatt einen eigenen HttpClient zu instanziieren, nutzen wir den zentralen, authentifizierten Client aus dem Core.
Muster:
- Erstelle ein Interface für die API (z.B.
PingApiim Contract-Modul). - Implementiere den Client im Feature-Modul und lasse dir den
HttpClientinjizieren.
// Feature-Modul: src/commonMain/.../MyFeatureApiClient.kt
class MyFeatureApiClient(private val client: HttpClient) : MyFeatureApi {
override suspend fun getData(): MyData {
// Der 'client' ist bereits mit BaseURL und Auth-Token konfiguriert
return client.get("/api/my-feature/data").body()
}
}
2. Dependency Injection (Koin)
Jedes Feature definiert sein eigenes Koin-Modul.
Muster:
- Nutze
named("apiClient")um den authentifizierten Client zu erhalten. - Registriere den API-Client und das ViewModel.
// Feature-Modul: src/commonMain/.../di/MyFeatureModule.kt
val myFeatureModule = module {
// API Client mit Shared HttpClient
single<MyFeatureApi> { MyFeatureApiClient(get(named("apiClient"))) }
// ViewModel
factory { MyFeatureViewModel(get()) }
}
3. ViewModel
Das ViewModel erhält die API (oder das Repository) via Konstruktor-Injektion.
class MyFeatureViewModel(private val api: MyFeatureApi) : ViewModel() {
// ...
}
4. Integration (Shell)
Das Feature-Modul muss in der Shell (z.B. meldestelle-portal) registriert werden.
- Gradle:
implementation(projects.frontend.features.myFeature)inbuild.gradle.ktsder Shell. - Koin Init: Füge das Modul zur
initKoin-Liste inmain.kt(Desktop & Web) hinzu.
Web-Spezifika (Worker)
Falls das Feature Web-Worker benötigt (z.B. für SQLDelight), muss sichergestellt werden, dass diese korrekt kopiert werden.
- Build-Script: In der Shell
build.gradle.ktsmuss der Copy-Task angepasst werden, falls neue Worker hinzukommen. - Pfad:
rootProject.layout.buildDirectory.dir("js/packages/${rootProject.name}-frontend-shells-meldestelle-portal/kotlin")
Referenz
Siehe frontend/features/ping-feature für die vollständige Implementierung inkl. Tests.