Schnellstart: gehostete App

In zehn Minuten von einem leeren Projekt zu einer gehosteten App, die das Profil und die Termine des angemeldeten Mitglieds zeigt. Du brauchst ein Artim-Dev-Konto und ein Methacore-Konto, in dem du Mitglied eines Vereins bist – die Vorschau arbeitet mit deinen echten Daten.

1. Projekt und Client im DevHub

1. Lege im DevHub ein Projekt an (oder wähle eines) und schalte unter APIs die API „Methacore Apps“ frei.
2. Lege unter OAuth einen Client für diese API an und wähle die Scopes, die deine App brauchen könnte – für dieses Beispiel mc.me.profile:read und mc.me.events:read.
3. Öffne Methacore-App in der Projektnavigation. Trag einen Namen ein, wähle als Art Gehostet und als Zielplattform Beides. Speichern.

Der Client braucht keine Redirect-URI: gehostete Apps melden sich immer über https://apps-run.methacore.de/oauth/callback an, und diese Adresse lässt der DevHub für jeden Client der API „Methacore Apps“ automatisch zu.

2. Studio öffnen und Konto verknüpfen

Öffne studio.methacore.de und melde dich mit deinem Methacore-Konto an. Beim ersten Mal fragt das Studio nach deinem Artim-Dev-Konto: „Mit Artim Dev anmelden“ verknüpft beide Konten einmalig. Danach zeigt das Studio alle Apps der Teams, in denen du bist. Mit ⌘K (Strg+K) springst du zwischen ihnen.

Jede App hat fünf Bereiche:

Builder und Code arbeiten auf demselben Entwurf. Was du im Builder änderst, steht sofort in app.json und umgekehrt. Der Entwurf speichert sich selbst; ein ungültiges app.json wird nie gespeichert – das Studio zeigt dir stattdessen die Fehler.

3. Einstellungen: Client und Berechtigungen

Unter Einstellungen wählst du den OAuth-Client aus Schritt 1 und hakst die Berechtigungen an, denen Mitglieder beim ersten Öffnen zustimmen sollen: Profil lesen und Termine lesen. Das Studio schreibt beides nach app.json:

"auth": {
  "clientId": "cl_7d2e41a9",
  "scopes": ["mc.me.profile:read", "mc.me.events:read"]
}

Angeboten werden nur Scopes, die der Client auch trägt. Name und Icon kommen aus dem DevHub-Eintrag; der Name steht automatisch in app.json.

4. Bauen im Builder

1. Zieh aus der Palette eine Überschrift auf die Fläche und setz den Text auf Hallo {{state.profil.firstName}}.
2. Öffne rechts Datenquellen und füge Mein Profil hinzu. Der Builder legt die Bindung an und schreibt das Ergebnis in den State-Schlüssel profil.
3. Füge die Datenquelle Meine Termine hinzu. Sie landet unter termine; als Feld für die Liste wählt der Builder items.
4. Zieh eine Tabelle darunter, setz Datenquelle auf {{state.termine}} und klick die Spalten title, start und location an.

Der Builder zeigt auf der Fläche Beispieldaten aus dem Datenquellen-Katalog. Echte Daten gibt es in der Vorschau.

Im Bereich Code sieht dasselbe so aus:

{
  "$schema": "https://methacore.de/schemas/apps/app/v1.json",
  "schemaVersion": 1,
  "name": "Meine Termine",
  "auth": { "clientId": "cl_7d2e41a9", "scopes": ["mc.me.profile:read", "mc.me.events:read"] },
  "initialState": {},
  "root": {
    "id": "root",
    "type": "Stack",
    "props": { "gap": 12 },
    "bind": [
      { "source": "me.profile", "to": "profil" },
      { "source": "me.events", "to": "termine", "pick": "items" }
    ],
    "children": [
      { "id": "heading-1", "type": "Heading", "props": { "text": "Hallo {{state.profil.firstName}}", "level": 2 } },
      {
        "id": "table-1",
        "type": "Table",
        "props": {
          "data": "{{state.termine}}",
          "columns": [
            { "key": "title", "label": "Termin" },
            { "key": "start", "label": "Beginn" },
            { "key": "location", "label": "Ort" }
          ],
          "empty": "Keine Termine in den nächsten 90 Tagen"
        }
      }
    ]
  }
}

5. Ein Export per Knopf

Zieh einen Button unter die Tabelle, Beschriftung Als Excel exportieren. Unter Aktionen → Beim Klick fügst du Exportieren hinzu: Format xlsx, Daten {{state.termine}}, Dateiname termine. Im Dashboard lädt der Host die Datei herunter, auf dem Handy öffnet sich der Teilen-Dialog.

{
  "id": "export",
  "type": "Button",
  "props": { "label": "Als Excel exportieren", "variant": "light" },
  "on": {
    "click": [
      { "type": "export", "format": "xlsx", "data": "{{state.termine}}", "filename": "termine",
        "columns": [{ "key": "title", "label": "Termin" }, { "key": "start", "label": "Beginn" }] }
    ]
  }
}

6. Vorschau

Unter Vorschau läuft die App in einem Desktop- oder Handy-Rahmen, passend zur Zielplattform. Beim ersten Start fragt sie wie im Dashboard nach deiner Zustimmung. Du meldest dich dabei nicht noch einmal an: das Studio reicht deine bestehende Methacore-Anmeldung als einmaliges Ticket weiter. Danach siehst du dein eigenes Profil und deine eigenen Termine.

Die Vorschau lädt den Entwurf über ein Vorschau-Ticket, das fünf Minuten gilt; das Studio erneuert es von selbst. Hinweise (toast), Navigation und „App schließen“ zeigt die Vorschau als Meldung an.

7. Version veröffentlichen

Unter Versionen → Version veröffentlichen gibst du eine Versionsnummer (1.0.0) und einen Änderungstext ein. Die Version friert den Entwurf ein und geht zur Prüfung. Den Stand siehst du im Studio und im DevHub unter Methacore-App → Prüfung je Version. Nach der Freigabe ist sie live – für deinen Verein sofort, für alle anderen, sobald der Eintrag öffentlich ist.

Nächste Schritte

• Eigene Logik: main.js & Handler
• Eigenes Aussehen: Styling
• Daten speichern: App-Speicher