{"id":142,"date":"2025-10-13T12:25:15","date_gmt":"2025-10-13T12:25:15","guid":{"rendered":"https:\/\/docs.pedagotchi.de\/?post_type=docs&#038;p=142"},"modified":"2025-10-13T12:29:32","modified_gmt":"2025-10-13T12:29:32","password":"","slug":"dokumentation","status":"publish","type":"docs","link":"https:\/\/docs.pedagotchi.de\/index.php\/docs\/dokumentation\/","title":{"rendered":"Context"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/jonmaxmue\/context\/tree\/main\">https:\/\/github.com\/jonmaxmue\/context\/tree\/main<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist \u201eContext\u201c?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zweck<\/strong>: Der Context liefert eine wiederverwendbare Applikations\u2011Infrastruktur: State\u2011Management, Controller\u2011Wiring, Repositories, IO \u00fcber Directus, Reaktivit\u00e4t (MobX), Routing\u2011Hooks und einen Provider f\u00fcr deine UI.<\/li>\n\n\n\n<li><strong>Prinzip<\/strong>: Du definierst deine Dom\u00e4ne (eigene Models, optionale Controller, eigene UI). Der Context \u00fcbernimmt den Rest (Core\u2011Logik).<\/li>\n\n\n\n<li><strong>Nutzen<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Schneller Start<\/strong>: Plug &amp; Play \u2013 nur Provider einbinden und&nbsp;<code>moduleConfig<\/code>&nbsp;definieren.<\/li>\n\n\n\n<li><strong>Konsistenz<\/strong>: Einheitliches Schema f\u00fcr Models und Controller, abgestimmt auf Directus.<\/li>\n\n\n\n<li><strong>Reaktivit\u00e4t<\/strong>: MobX +&nbsp;<code>observer<\/code>&nbsp;aktualisieren deine UI automatisch.<\/li>\n\n\n\n<li><strong>Trennung<\/strong>: Fachlogik (Models\/Controller) bleibt sauber getrennt von Infrastruktur (Repos\/IO\/Navigation).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wichtige Bausteine im Projekt<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Provider<\/strong>:&nbsp;providers\/ContextControllerProvider.tsx<br>Bindet den Context global ein und macht ihn per Hook verf\u00fcgbar:\n<ul class=\"wp-block-list\">\n<li>Hook:&nbsp;useContextControllerProvider()&nbsp;liefert dir den&nbsp;<code>controller<\/code>.<\/li>\n\n\n\n<li>Beispiel im Code:&nbsp;ContextControllerProvider&nbsp;erstellt&nbsp;<code>new Controller(moduleConfig, routeConfig, routerFunctions)<\/code>&nbsp;und rendert erst, wenn&nbsp;<code>controller.loaded<\/code>&nbsp;true ist.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Modul\u2011Konfiguration<\/strong>:&nbsp;configs\/moduleConfig.ts<br>Deklariert Models (Collection, Klassentyp) und initialisiert Controller. Alle Module sind dar\u00fcber einheitlich verdrahtet.<\/li>\n\n\n\n<li><strong>Routing<\/strong>:&nbsp;<code>configs\/routeConfig.ts<\/code>&nbsp;+ Expo Router<br>ContextControllerProvider&nbsp;injiziert&nbsp;<code>router.push\/replace<\/code>&nbsp;in den Context, damit Controller navigieren k\u00f6nnen.<\/li>\n\n\n\n<li><strong>Reaktivit\u00e4t<\/strong>: MobX (<code>makeAutoObservable\/makeObservable<\/code>)<br>Models sind observabel, Controller kapseln Lade\u2011\/Mutationslogik. In der UI verwendest du&nbsp;<code>mobx-react<\/code>\u2019s&nbsp;<code>observer<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigene Controller und Models mit Context integrieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mit Context kannst du eigene Controller im selben Schema integrieren und eigene Models im vorgegebenen MobX\u2011Muster definieren. Der gro\u00dfe Vorteil: Dein Projekt kann seine Dom\u00e4nenobjekte frei gestalten und nutzt Context, um diese zentral zu verwalten \u2013 inklusive Directus\u2011IO und Reaktivit\u00e4t \u2013 bis hin zur eigenen UI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Muster: Controller mit&nbsp;<code>initialize(...)<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Controller werden in der&nbsp;<code>moduleConfig<\/code>&nbsp;registriert und \u201elazy\u201c mit Abh\u00e4ngigkeiten verdrahtet. Das passt zu deinem bestehenden Pattern (siehe&nbsp;<code>controllers\/examination\/ExaminationController.ts<\/code>:&nbsp;<code>initialize(examinationItemController, gameRelationController, gameId)<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beispielcontroller (Schema):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ controllers\/MyFeatureController.ts\nimport { makeObservable, observable, action, runInAction } from \"mobx\";\nimport { ItemController } from \"context\";\n\nexport default class MyFeatureController {\n  _itemController!: ItemController&lt;any&gt;;\n  _relationController?: any;\n  _entityId?: number;\n\n  isLoading = false;\n\n  constructor() {\n    makeObservable(this, {\n      _itemController: observable,\n      _relationController: observable,\n      _entityId: observable,\n      isLoading: observable,\n      loadById: action,\n      clear: action,\n    });\n  }\n\n  \/\/ Wird von moduleConfig\/Context aufgerufen\n  initialize(\n    itemController: ItemController&lt;any&gt;,\n    relationController: any,\n    entityId: number\n  ) {\n    this._itemController = itemController;\n    this._relationController = relationController;\n    this._entityId = entityId;\n  }\n\n  get store() {\n    return this._itemController.store;\n  }\n\n  get selected() {\n    return this._itemController.store.getSelected();\n  }\n\n  async loadById(id: number) {\n    this.isLoading = true;\n    try {\n      await this._itemController.loadOne(id);\n    } finally {\n      runInAction(() =&gt; (this.isLoading = false));\n    }\n  }\n\n  clear() {\n    this._itemController.store.clearSelected();\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analog zu deinem&nbsp;<code>ExaminationController<\/code>: Konstruktor setzt nur Basisstate;&nbsp;<code>initialize(...)<\/code>&nbsp;verdrahtet late\u2011bound Abh\u00e4ngigkeiten (ItemController, RelationController, IDs).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Muster: Model mit&nbsp;asJson()&nbsp;und&nbsp;updateFromJson(&#8230;)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Models folgen einem festen Schema (vgl.&nbsp;<code>models\/items\/CohortPatientModel.ts<\/code>,&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">models\/items\/GameClinicalDirective.ts):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>asJson(): TItem&nbsp;\u2013 Serialisierung f\u00fcr Write\u2011IO (Directus).<\/li>\n\n\n\n<li>updateFromJson(json: TItem): this&nbsp;\u2013 Mapping von API \u2192 Model.<\/li>\n\n\n\n<li>Optional:&nbsp;getNewInstance()&nbsp;wenn dein Store es nutzt.<\/li>\n\n\n\n<li>Reaktivit\u00e4t via MobX.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Beispielmodell (Struktur\u2011Vorlage):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ models\/items\/MyFeatureModel.ts\nimport { makeAutoObservable } from \"mobx\";\nimport { TItem } from \"context\";\n\nexport default class MyFeatureModel {\n  id: number;\n  title: string;\n  relatedId?: number;\n\n  constructor() {\n    this.id = 0;\n    this.title = \"\";\n    this.relatedId = undefined;\n\n    makeAutoObservable(this);\n  }\n\n  get asJson(): TItem {\n    return {\n      id: this.id,\n      title: this.title,\n      related_id: this.relatedId, \/\/ API-konforme Feldnamen\n    };\n  }\n\n  updateFromJson(json: TItem) {\n    this.id = json.id;\n    this.title = json.title;\n    this.relatedId = json.related_id;\n    return this;\n  }\n\n  getNewInstance() {\n    return new MyFeatureModel();\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Richte dich beim Mapping nach deinen Collections (z.B.&nbsp;<code>patients_id<\/code>,&nbsp;<code>games_id<\/code>&nbsp;in&nbsp;GameClinicalDirective,&nbsp;<code>patients_id<\/code>&nbsp;in&nbsp;<code>CohortPatientModel<\/code>).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Registrierung in&nbsp;<code>moduleConfig<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Im Projekt werden Controller\/Models in&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">configs\/moduleConfig.ts&nbsp;gem\u00e4\u00df Schema zusammengef\u00fchrt (siehe vorhandene Eintr\u00e4ge wie&nbsp;<code>GameController<\/code>,&nbsp;<code>GameActivityController<\/code>, etc.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beispiel (Ausschnitt):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ configs\/moduleConfig.ts\nimport MyFeatureController from \"@\/controllers\/MyFeatureController\";\nimport MyFeatureModel from \"@\/models\/items\/MyFeatureModel\";\nimport { ModuleConfig, ItemController } from \"context\";\n\nexport const myModuleConfig: ModuleConfig = {\n  models: {\n    myFeature: {\n      model: MyFeatureModel,\n      collection: \"my_feature\",\n    },\n  },\n  controllers: (deps) =&gt; {\n    const myFeatureItemController = new ItemController({\n      model: MyFeatureModel,\n      collection: \"my_feature\",\n      client: deps.client, \/\/ Directus-Client aus Context\n      notificationController: deps.notificationController,\n    });\n\n    const myFeature = new MyFeatureController();\n    myFeature.initialize(\n      myFeatureItemController,\n      deps.someRelationController, \/\/ falls ben\u00f6tigt\n      0\n    );\n\n    return {\n      myFeatureController: myFeature,\n    };\n  },\n};<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Halte dich an das vorhandene Initialisierungsmuster deiner Controller (z.B.&nbsp;<code>ExaminationController.initialize(...)<\/code>).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Verwendung in der UI<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provider ist bereits integriert (providers\/ContextControllerProvider.tsx):\n<ul class=\"wp-block-list\">\n<li>Baut&nbsp;<code>new Controller(moduleConfig, routeConfig, routerFunctions)<\/code>.<\/li>\n\n\n\n<li>Rendert Kinder erst, wenn&nbsp;<code>controller.loaded<\/code>&nbsp;true ist.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Zugriff in Screens\/Komponenten:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import { observer } from \"mobx-react\";\nimport { useContextControllerProvider } from \"context\";\nimport { useEffect } from \"react\";\n\nexport default observer(function MyFeatureScreen() {\n  const ctx = useContextControllerProvider();\n  const myFeature = ctx.modules.myModule.controllers.myFeatureController;\n\n  useEffect(() =&gt; {\n    myFeature.loadById(1);\n  }, &#91;]);\n\n  if (myFeature.isLoading) return null;\n\n  return &lt;Text&gt;{myFeature.selected?.title}&lt;\/Text&gt;;\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reaktivit\u00e4t:&nbsp;<code>observer<\/code>&nbsp;sorgt daf\u00fcr, dass UI bei \u00c4nderungen im Store\/Controller automatisch aktualisiert.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Kurzfazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Definiere eigene Models und (falls n\u00f6tig) Controller. Registriere sie in der&nbsp;<code>moduleConfig<\/code>. Binde den Provider ein. Ab da \u00fcbernimmt Context als Core deine zentrale App-Logik \u2013 inkl. Auth-Flow. Du fokussierst dich auf Dom\u00e4ne und UI. Plug &amp; Play.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/github.com\/jonmaxmue\/context\/tree\/main Was ist \u201eContext\u201c? Wichtige Bausteine im Projekt Eigene Controller und Models mit Context integrieren Mit Context kannst du eigene Controller im selben Schema integrieren und eigene Models im vorgegebenen MobX\u2011Muster definieren. Der gro\u00dfe Vorteil: Dein Projekt kann seine Dom\u00e4nenobjekte frei gestalten und nutzt Context, um diese zentral zu verwalten \u2013 inklusive Directus\u2011IO und Reaktivit\u00e4t [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[8],"doc_tag":[],"class_list":["post-142","docs","type-docs","status-publish","hentry","doc_category-modul-und-state-management"],"year_month":"2026-05","word_count":841,"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":"Core-Management (Context)","term_url":"https:\/\/docs.pedagotchi.de\/index.php\/docs-category\/modul-und-state-management\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/142","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=142"}],"version-history":[{"count":4,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/142\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/docs\/142\/revisions\/147"}],"wp:attachment":[{"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/media?parent=142"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_category?post=142"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.pedagotchi.de\/index.php\/wp-json\/wp\/v2\/doc_tag?post=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}