Lauf-Tracker-Dienst

Ein Lauf-Tracker-Dienst hält Distanz, Zeit, Pace und Route eines Laufs direkt auf dem Handy fest und zeigt jeder angemeldeten Person nur ihre eigenen Aufzeichnungen. Sobald ein Lauf beendet ist, wird die heutige Aufzeichnung der Liste hinzugefügt, und die Aufzeichnungen anderer Personen sind untereinander nicht sichtbar. Dieselbe Aufzeichnung sehen Sie sowohl in der Handy-App als auch im Web.

Dieses Beispiel zeigt eine Sache. Zwei Oberflächen, die Handy-App und das Web, nutzen ein einziges WEEGLOO-Backend gemeinsam. Deshalb betrachtet diese Seite zuerst das Backend, das App und Web gemeinsam nutzen, und teilt sich danach in die Seite auf, die Sie interessiert, App oder Web. Welche Seite Sie auch wählen, das Backend ist dasselbe. Genau das ist der Punkt.

Was wir bauen

Statt eines Bekleidungsgeschäfts oder eines Blogs ist dieses Beispiel ein persönlicher Lauf-Tracker-Dienst. Zwei Oberflächen, die Handy-App und das Web, zeigen dieselbe Aufzeichnung. Für die App legen wir drei Bildschirme fest.

• Anmeldebildschirm: Sie melden sich mit Google an.
• Aufzeichnungsliste: Eine angemeldete Person sieht die Laufaufzeichnungen, die sie bisher erfasst hat, die neuesten zuerst.
• Aufzeichnung hinzufügen: Sie erfassen Distanz, Zeit, Pace, Route und Datum eines Laufs.

Der Kern ist: "Jede Person sieht nur ihre eigenen Aufzeichnungen." Einer angemeldeten Person werden nur die Aufzeichnungen zugestellt, die sie selbst erfasst hat, und die Aufzeichnungen anderer sind nicht sichtbar. Diese Bedingung macht später sowohl die Mitgliederanmeldung als auch die Berechtigungen zusammen nötig.

Sie können auch gleich zu der Seite springen, die Sie interessiert. Wer die Handy-App baut, geht zu Als App nutzen, wer das Web baut, zu Als Web nutzen. Der Abschnitt darunter, "Das Backend hinter den Bildschirmen", ist allerdings für App wie Web gemeinsam, sodass die beiden Zweige gut zusammenpassen, wenn Sie ihn zuerst überfliegen.

Das Backend hinter den Bildschirmen (App und Web gemeinsam)

Wenn Sie dem Agenten, der die Bildschirme erstellt und angebunden hat, sagen "Binde das an WEEGLOO an" (Verbinden, Mit einem Satz anbinden), betrachtet der Agent die Bildschirme und richtet ein, was dahinter nötig ist. Das ist die Datenstruktur, die die Laufaufzeichnungen aufnimmt (Content Type), die Google-Anmeldung (ServiceLogin), die Berechtigung "nur eigene Aufzeichnungen" (ServiceUserRole) und die Zustellung, die entsprechend dieser Berechtigung jedem Mitglied nur seine eigenen Aufzeichnungen sendet. Dieses Backend ist dasselbe, ob Sie mit dem App-Bildschirm oder dem Web-Bildschirm beginnen, und App und Web nutzen es unverändert gemeinsam. Wie man jeden Baustein für sich handhabt, wird jeweils einzeln in Registrierung und Anmeldung anbinden, Berechtigungen aufteilen und Daten speichern und abrufen behandelt.

Unten sehen Sie die Ressourcen, die im Stride-Space dieses Beispiels tatsächlich erstellt wurden. Dies ist keine Anleitung zum einzelnen Einrichten, sondern ein Blick darauf, was als Ergebnis von "binde das an" entstanden ist.

Die Struktur, die Laufaufzeichnungen aufnimmt

Das Erste ist die Struktur, die Laufaufzeichnungen aufnimmt (Content Type), "Run". Die Werte, die in einen einzelnen Lauf einfließen, sind in Felder je Angabe aufgeteilt.

Es gibt kein eigenes Feld, das die durchschnittliche Pace speichert. Sie ist ein Wert, der sich allein aus Distanz und Zeit ergibt, deshalb berechnet und zeigt die App sie direkt an (das "auto-calculated" auf dem Bildschirm zum Hinzufügen einer Aufzeichnung).

Google-Anmeldung

Das Zweite ist der Kanal, über den Mitglieder sich mit Google anmelden (ServiceLogin). In diesem Beispiel ist der Name auf "Stride" gesetzt, und Google ist die einzige aktivierte Anmeldemethode. Eine neu angemeldete Person erhält standardmäßig die unten stehende Berechtigung "Runner". Sobald die Anmeldung abgeschlossen ist, kommt das Ergebnis zurück auf den Bildschirm, wobei die Art der Rückkehr sich bei App und Web etwas unterscheidet. Diesen Unterschied behandeln Als App nutzen und Als Web nutzen jeweils gesondert.

Die Berechtigung "nur eigene Aufzeichnungen"

Das Dritte ist die Berechtigung, die Mitglieder erhalten (ServiceUserRole), "Runner". Die Regeln sind wie folgt.

Weil "Lesen" an "nur die selbst erstellten" gebunden ist, zeigt die Liste jeder Person nur ihre eigenen Aufzeichnungen. Da die Aufzeichnungen, die jedes Mitglied lesen kann, nur die eigenen sind, ist genau das die Liste, die dieser Person zugestellt wird. Diese Regel gilt gleichermaßen, ob App oder Web.

Aufzeichnungen und Fotos

Das Vierte ist jede einzelne Laufaufzeichnung (Content) und das Routenfoto (Media). Diese beiden werden nicht im Voraus erstellt; jede entsteht unter dem Namen eines Mitglieds, wenn es einen Lauf erfasst. Unten sehen Sie eine Aufzeichnung, die tatsächlich erfasst wurde. Die Struktur "Run" oben ist mit Werten gefüllt, und ein Routenfoto ist daneben angehängt.

Die Distanz 42.195 ist ein voller Marathon. Die Zeit wird in Sekunden festgehalten (hier eine Aufzeichnung von 3 Stunden 53 Minuten) und in der App als 3:53:00 angezeigt. Das Routenfoto wird gesondert als Datei (Media) gespeichert, und die Aufzeichnung enthält nur einen Verweis, der auf diese Datei zeigt.

Als App nutzen

Zuerst die Handy-App. Sie erstellen die App-Bildschirme und füllen deren Hintergrund mit dem obigen Backend hinter den Bildschirmen.

App-Bildschirme erstellen und anbinden

1. Die Bildschirmdesigns erstellen. Die drei Bildschirme aus "Was wir bauen" oben sind entstanden, indem einem LLM ein Prompt wie der folgende gegeben wurde. Sie geben eine Zeile dazu an, welche Art von App Sie erstellen, die Liste der Bildschirme und was jeder Bildschirm enthält, sowie eine Designrichtung.

Entwirf die Bildschirme für eine Lauf-Tracker-App. Es ist eine vertikale mobile App.

Bildschirme:

• Anmeldung: eine Zeile, die die App vorstellt, und eine Schaltfläche "Continue with Google".
• Aufzeichnungsliste (Startseite): eine Zusammenfassung von Gesamtdistanz und Anzahl der Läufe, eine Liste mit Karten der Laufaufzeichnungen (Datum, Distanz, Zeit, Pace, Routen-Vorschaubild) und eine Schaltfläche zum Hinzufügen einer Aufzeichnung.
• Aufzeichnung hinzufügen: Eingaben für Datum, Distanz, Zeit, Pace, Notizen und ein Routenfoto sowie Speichern.

Halte es sauber und aktiv, sodass Werte wie Distanz und Pace auf einen Blick lesbar sind. Folge den Konventionen für mobile UI.

Die so entstandenen Bildschirme sind noch ohne Daten und ohne Anmeldung, nur die Bildschirme.

2. An WEEGLOO anbinden. Verbinden Sie den Agenten mit WEEGLOO und sagen Sie "Binde das an WEEGLOO an". Dann betrachtet der Agent diese Bildschirme und richtet das obige Backend hinter den Bildschirmen ein.

Zwei Dinge, an die man denken muss, weil es eine App ist

Das Backend ist dasselbe wie beim Bauen für das Web. Weil es eine App ist, gibt es zwei Dinge, an die man denken muss.

• Bereitstellung: Eine fertige mobile App in die Hände der Menschen zu bringen (sie in einem App-Markt einzustellen), geschieht außerhalb von WEEGLOO. Was WEEGLOO übernimmt, sind die Daten, Mitglieder und Berechtigungen hinter den App-Bildschirmen. (Das Web hat keinen App-Markt. Das behandelt Als Web nutzen.)
• Anmelde-Callback: Die Verbindung, die das Ergebnis nach Abschluss der Anmeldung zurück in die App bringt, unterscheidet sich vom Web. Das Anmeldeergebnis kann nur an eine Webadresse zurückkehren, deshalb ist ein zusätzlicher Schritt nötig: eine Seite, die als Zwischenbrücke dient und dieses Ergebnis in die App übergibt. Dieser technische Schritt wird in Auth API behandelt.

Prüfen, dass es wirklich nur die eigenen Aufzeichnungen sind

Die Kernbedingung "jede Person sieht nur ihre eigenen Aufzeichnungen" hält in der App tatsächlich. Unten sehen Sie die Startseiten derselben App, geöffnet mit zwei verschiedenen Konten. Es ist dieselbe App, aber die Gesamtdistanz, die Anzahl der Läufe und die in der Liste angezeigten Aufzeichnungen unterscheiden sich alle.

Ein Konto zeigt nur einen einzigen 5-km-Lauf, das andere nur zwei Läufe, einen Marathon und einen 3-km-Lauf. Ihre Aufzeichnungen sind füreinander nicht sichtbar. Stride enthält alle drei dieser Aufzeichnungen, aber jedem Mitglied werden nur die Aufzeichnungen zugestellt, die es selbst erfasst hat. Das ist das Ergebnis davon, dass das Lesen oben in Die Berechtigung "nur eigene Aufzeichnungen" an "nur die selbst erstellten" gebunden wurde.

Als Web nutzen

Das Web nutzt dasselbe Backend wie die App, so wie es ist. Das obige Backend hinter den Bildschirmen liest das Web aus und zeigt dieselben Aufzeichnungen an.

Web-Bildschirme erstellen und anbinden

Auch das Web sind dieselben zwei Schritte wie die App.

1. Die Web-Bildschirmdesigns erstellen. Wie bei der App geben Sie einem LLM einen Prompt wie den folgenden und lassen die Web-Bildschirme entstehen. Der Inhalt ist derselbe wie bei der App, umgesetzt in ein Weblayout, das auf die breite Oberfläche zugeschnitten ist.

Entwirf die Web-Bildschirme für einen Lauf-Tracker. Es ist ein Desktop-Web.

Bildschirme:

• Anmeldung: eine Zeile, die den Dienst vorstellt, und eine Schaltfläche "Continue with Google".
• Aufzeichnungsliste (Dashboard): eine Zusammenfassung von Gesamtdistanz, Anzahl der Läufe und durchschnittlicher Pace, eine Liste der Laufaufzeichnungen (Datum, Distanz, Zeit, Pace, Routen-Vorschaubild) und eine Schaltfläche zum Hinzufügen einer Aufzeichnung.
• Aufzeichnung hinzufügen: Eingaben für Datum, Distanz, Zeit, Pace, Notizen und ein Routenfoto sowie Speichern.

Nutze ein Layout, das die breite Oberfläche ausnutzt, sodass Werte wie Distanz und Pace auf einen Blick lesbar sind. Folge den Konventionen für Web-UI.

2. An WEEGLOO anbinden. Sagen Sie dem angebundenen Agenten "Binde auch dieses Web an WEEGLOO an". Wenn Sie bereits die App erstellt haben, richtet der Agent das obige Backend hinter den Bildschirmen nicht erneut ein, sondern schließt es unverändert an. Es entstehen keine neuen WEEGLOO-Ressourcen. Was im Web neu entsteht, sind nur die Web-Bildschirme. (Wenn Sie ohne den Umweg über die App mit dem Web begonnen haben, entsteht dieses Backend hier zum ersten Mal, und auch wenn Sie später die App ergänzen, nutzen Sie es genauso unverändert. Wie auch immer, das Backend ist dasselbe.)

Dieser Web-Bildschirm ist das Konto aus Prüfen, dass es wirklich nur die eigenen Aufzeichnungen sind (diesen Monat 45.2km, ein Marathon über 42.20km und 3km), im Web geöffnet. Gesamtdistanz, Anzahl der Läufe und Aufzeichnungen sind dieselben wie auf der App-Startseite. Weil es ein einziges Backend gibt, zeigt das Web genau die Daten, die die App gezeigt hat, auf dem Desktop-Bildschirm unverändert an.

Zwei Dinge, die beim Web anders sind

Auch das Web unterscheidet sich von der App in zwei Punkten, doch weil die Richtung der App entgegengesetzt ist, gibt es diesmal eher weniger zu bedenken.

• Bereitstellung: Das Web braucht keinen App-Markt. Die erstellten Webdateien stellen Sie mit Web Hosting direkt ins Internet (Eine Website ins Internet stellen).
• Anmelde-Callback: Beim Web kehrt das Anmeldeergebnis direkt an die Webadresse zurück. Die Zwischenbrücken-Seite, die die App brauchte, ist im Web nicht nötig.

Die Berechtigung bleibt gleich, deshalb sieht auch im Web jedes Mitglied nur seine eigenen Aufzeichnungen. Die obige Berechtigung "nur eigene Aufzeichnungen" gilt im Web genauso.

Was als Nächstes zu tun ist

• Registrierung und Anmeldung anbinden: behandelt, wie man eine Anmeldung, die eigene Mitglieder aufnimmt, gesondert anbindet.
• Auth API: behandelt den technischen Schritt, das Anmeldeergebnis zurück in die App zu bringen.
• Berechtigungen aufteilen: behandelt, wie man Berechtigungen so festlegt, dass Mitglieder nur ihre eigenen Dinge bearbeiten.
• Daten speichern und abrufen: behandelt, wie man eine Datenstruktur erstellt und mit Inhalten füllt.
• Eine Website ins Internet stellen: behandelt, wie man das Web mit Web Hosting bereitstellt.