{"id":23,"date":"2025-10-06T09:48:19","date_gmt":"2025-10-06T09:48:19","guid":{"rendered":"https:\/\/docs.pedagotchi.de\/?post_type=docs&#038;p=23"},"modified":"2025-10-07T15:49:40","modified_gmt":"2025-10-07T15:49:40","password":"","slug":"high-level-datenfluss","status":"publish","type":"docs","link":"https:\/\/docs.pedagotchi.de\/index.php\/docs\/high-level-datenfluss\/","title":{"rendered":"High-Level-Datenfluss"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">App\u2011Start und Initialisierung<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In\u00a0controllers\/AppController.ts\u00a0setzt\u00a0prepareApp()\u00a0fr\u00fch globale Rahmenbedingungen:\n<ul class=\"wp-block-list\">\n<li>Plattform\u2011Setup (z. B. Android NavigationBar nur mit\u00a0<code>Platform.OS === 'android'<\/code>).<\/li>\n\n\n\n<li>Audio\u2011Modus (iOS\u2011freundliche Defaults) via\u00a0<code>expo-audio<\/code>.<\/li>\n\n\n\n<li>Schriftarten via\u00a0<code>expo-font<\/code>.<\/li>\n\n\n\n<li>Am Ende\u00a0setAppIsReady(true), damit der Rest der App rendern kann.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Parallel sorgt der\u00a0ContextControllerProvider\u00a0in\u00a0providers\/ContextControllerProvider.tsx\u00a0f\u00fcr genau eine Controller\u2011Instanz. \u00dcber\u00a0<code>loaded<\/code>\u00a0wird das UI so lange \u201egegatet\u201c, bis Module\/Stores bereit sind. Erst dann werden Kinder gerendert.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Konsum der Steuerlogik in der UI<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Screens\/Komponenten beziehen den Controller \u00fcber\u00a0useContextControllerProvider(), z. B. in\u00a0app\/auth\/index.tsx. Damit sind Modulzugriffe (z. B.\u00a0<code>modules.core.controllers.*<\/code>) und zentralisierte Navigation verf\u00fcgbar.<\/li>\n\n\n\n<li>Die UI bleibt pr\u00e4sentationsorientiert und delegiert Anwendungslogik an den Controller. So entstehen keine duplizierten Codepfade f\u00fcr Navigation oder Datenbeschaffung.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ereignisse und Orchestrierung<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nutzerinteraktionen (Form\u2011Submit, Button\u2011Tap) werden als Aktionen an Controller\u2011Methoden weitergereicht, etwa\u00a0authController.onPressLogin().<\/li>\n\n\n\n<li>Der Controller orchestriert die Dom\u00e4nenlogik:\n<ul class=\"wp-block-list\">\n<li>Validierung von Eingaben.<\/li>\n\n\n\n<li>Aufruf von Repositories (Directus\u2011API) zur Datenbeschaffung\/Mutation.<\/li>\n\n\n\n<li>Schreiben der Ergebnisse in beobachtbare Stores (MobX).<\/li>\n\n\n\n<li>Optional: zentrale Navigation (z. B. Weiterleitung nach erfolgreichem Login).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Reaktive Aktualisierung mit observer<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stores sind beobachtbar. Sobald der Controller Daten schreibt (z. B. Token, Benutzerprofil, Listen), propagiert MobX die \u00c4nderungen automatisch an alle\u00a0<code>observer<\/code>\u2011Komponenten.<\/li>\n\n\n\n<li><code>observer<\/code>\u00a0bewirkt, dass die UI ausschlie\u00dflich vom Zustand abh\u00e4ngt. Es sind keine manuellen Re\u2011Render\u2011Trigger notwendig. Dadurch bleibt die UI deklarativ, w\u00e4hrend Gesch\u00e4ftslogik in Controllern\/Stores geb\u00fcndelt ist.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Kurzer Beispiel\u2011Ausschnitt (konzeptuell, nicht vollst\u00e4ndig):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Store (vereinfacht)\nclass AuthStore {\n  @observable me: User | null = null;\n  @observable isLoading = false;\n}\n\n\/\/ Controller-Flow (vereinfacht)\nasync onPressLogin(credentials) {\n  this.authStore.isLoading = true;\n  const user = await this.authRepository.login(credentials);\n  this.authStore.me = user;\n  this.authStore.isLoading = false;\n  this.routeController.navigateToNext(\"(home)\");\n}\n\n\/\/ UI-Komponente (vereinfacht)\nexport default observer(function AuthStatus() {\n  const { modules } = useContextControllerProvider();\n  const { me, isLoading } = modules.core.stores.authStore;\n  if (isLoading) return &lt;Spinner \/>;\n  return &lt;Text>{me ? `Hallo, ${me.name}` : \"Nicht eingeloggt\"}&lt;\/Text>;\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wesentlich ist hier: Die Komponente fragt nur Zustand ab und markiert sich mit&nbsp;<code>observer<\/code>. Sobald der Controller den Store aktualisiert, rendert sie automatisch neu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">End\u2011to\u2011End\u2011Beispiel (Login\u2011Sequenz in der App)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die Login\u2011Maske\u00a0components\/molecules\/Login.tsx\u00a0ruft beim Tap auf \u201eLogin\u201c eine Controller\u2011Methode auf (\u00fcber Props\/Controller\u2011Binding).<\/li>\n\n\n\n<li>Der Auth\u2011Controller validiert Eingaben, spricht das Auth\u2011Repository (Directus) an, verarbeitet die Antwort (Token\/User) und schreibt Ergebnisse in den Auth\u2011Store.<\/li>\n\n\n\n<li>Der Store\u2011Wechsel (z. B.\u00a0<code>me<\/code>\u00a0gesetzt,\u00a0<code>isLoading<\/code>\u00a0false) l\u00f6st automatisch Re\u2011Render in allen\u00a0<code>observer<\/code>\u2011Komponenten aus, die diesen Zustand konsumieren (z. B. Anzeige des Benutzer\u2011Namens oder Freigabe weiterer Routen).<\/li>\n\n\n\n<li>Der Controller triggert eine zentrale Navigation (z. B. zum Home\u2011Bereich), da Router\u2011Funktionen injiziert sind und so an einer Stelle konsistente Navigationsregeln gelten.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ergebnis<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der Datenfluss UI\u2011Ereignis \u2192 Controller\u2011Aktion \u2192 Store\u2011Update \u2192 Navigation\/Render bleibt durchg\u00e4ngig unidirektional. Die Controller sind die zentrale Steuerinstanz, Stores sind die verl\u00e4ssliche Statusquelle, und&nbsp;<code>observer<\/code>&nbsp;h\u00e4lt die UI automatisch synchron mit dem Anwendungszustand. Das reduziert Doppelimplementierungen, schafft Vorhersehbarkeit und verbessert Wartbarkeit sowie Testbarkeit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>App\u2011Start und Initialisierung Konsum der Steuerlogik in der UI Ereignisse und Orchestrierung Reaktive Aktualisierung mit observer Kurzer Beispiel\u2011Ausschnitt (konzeptuell, nicht vollst\u00e4ndig): Wesentlich ist hier: Die Komponente fragt nur Zustand ab und markiert sich mit&nbsp;observer. Sobald der Controller den Store aktualisiert, rendert sie automatisch neu. End\u2011to\u2011End\u2011Beispiel (Login\u2011Sequenz in der App) Ergebnis Der Datenfluss UI\u2011Ereignis \u2192 Controller\u2011Aktion [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[4],"doc_tag":[],"class_list":["post-23","docs","type-docs","status-publish","hentry","doc_category-architekturueberblick"],"year_month":"2026-05","word_count":507,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"jon","author_nicename":"jon","author_url":"https:\/\/docs.pedagotchi.de\/index.php\/author\/jon\/"},"doc_category_info":[{"term_name":"Architektur\u00fcberblick","term_url":"https:\/\/docs.pedagotchi.de\/index.php\/docs-category\/architekturueberblick\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":3,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/23\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/23\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_category?post=23"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_tag?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}