Todo-App-Backend-Vorlage
GraphQL — Schema, API & KI-Leitfaden

Wichtige Erkenntnisse

Übersicht

Eine Todo-App ist einer der häufigsten Ausgangspunkte zum Lernen der Backend-Entwicklung. Im Hintergrund benötigt sie Benutzerregistrierung, Aufgaben-CRUD, besitzbasierte Zugriffskontrolle und optional Echtzeitsynchronisation.

Das folgende Schema definiert zwei Klassen — _User (integriert) und Todo — die durch einen Pointer verbunden sind. Mit dem Back4app GraphQL SDK können Sie von Ihrer App aus mit diesem Backend interagieren — Abfragen, Erstellen, Aktualisieren und Löschen von Objekten — ohne eine benutzerdefinierte API-Schicht zu schreiben.

Warum Ihr GraphQL Todo-Backend mit Back4app erstellen?

Back4app bietet Ihnen ein fertiges Backend und ein typisiertes SDK, damit Sie Ihre Todo-App erstellen können, ohne REST-Glue zu schreiben oder die Authentifizierung selbst zu verwalten.

• •SDK & Typsicherheit: Das SDK hält Todo und Benutzer typsicher und verarbeitet JSON, sodass Sie weniger Boilerplate schreiben.
• •Async & optionale Offline: Verwenden Sie async/await; unterstützte SDKs bieten lokale Speicherung, sodass Ihre Liste offline funktioniert und beim Online-Sein synchronisiert wird.
• •Live Queries: Abonnieren Sie Änderungen an Todo, damit die UI in Echtzeit über WebSockets aktualisiert wird.

Das gleiche Schema und die gleichen APIs für jeden Stack — wechseln Sie später die Clients, ohne das Backend zu ändern.

Kernvorteile

Ein produktionsbereites Todo-Backend, damit Sie schneller liefern und sich auf Ihre App konzentrieren können.

Technologiestack

Alles, was diese Todo-App-Vorlage auf einen Blick antreibt.

ER-Diagramm

Entity-Relationship-Diagramm für das GraphQL Todo-App-Datenmodell.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

Integrationsfluss

Auth-to-CRUD-Sequenz: wie Ihre GraphQL-App mit Back4app kommuniziert — anmelden, dann Todos abfragen und erstellen.

sequenceDiagram
  participant User
  participant Client as GraphQL Client
  participant Back4app as Back4app Cloud

  User->>Client: Login
  Client->>Back4app: mutation { logIn(username, password) }
  Back4app-->>Client: Session token
  Client-->>User: Logged in

  User->>Client: Load todos
  Client->>Back4app: query { todos { edges { node { objectId title done } } } }
  Back4app-->>Client: Todo list
  Client-->>User: Show list

  User->>Client: Create todo
  Client->>Back4app: mutation { createTodo(input: { ... }) }
  Back4app-->>Client: Todo (objectId)
  Client-->>User: Updated list

Datenwörterbuch

Vollständige Feldreferenz für jede Klasse im Schema.

Sicherheit & Berechtigungen

Wie Eigentum, ACLs und Klassenberechtigungen Daten in diesem Schema schützen.

Schema (JSON)

Rohes JSON-Schema-Definition — kopieren und in Ihrer Back4app-App verwenden oder über die API importieren.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API Playground

Testen Sie die REST- und GraphQL-Endpunkte für das Todo-Schema. Antworten aus den obigen Beispieldaten — kein Back4app-Konto erforderlich.

Verwendet dasselbe Todo-Schema wie diese Vorlage.

Schritt-für-Schritt GraphQL Integration

Verbinden Sie sich von einer GraphQL App mit Ihrem Back4app Backend unter Verwendung des Back4app GraphQL SDK.

1. usage.graphql.step1Title

   usage.graphql.step1Desc

   GraphQL

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   query GetTodos {
     todos {
       edges {
         node {
           objectId
           title
           done
           dueDate
           priority
           createdAt
         }
       }
     }
   }

2. usage.graphql.step2Title

   usage.graphql.step2Desc

   GraphQL

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   mutation CreateTodo($title: String!, $done: Boolean, $priority: Int) {
     createTodo(input: {
       fields: {
         title: $title
         done: $done
         priority: $priority
       }
     }) {
       todo {
         objectId
         title
         done
         createdAt
       }
     }
   }

3. usage.graphql.step3Title

   usage.graphql.step3Desc

   GraphQL

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   mutation UpdateTodo($objectId: ID!, $done: Boolean) {
     updateTodo(input: {
       objectId: $objectId
       fields: { done: $done }
     }) {
       todo { objectId done }
     }
   }
   
   mutation DeleteTodo($objectId: ID!) {
     deleteTodo(input: { objectId: $objectId }) { success }
   }

Häufig gestellte Fragen

Häufige Fragen zum Backend-Template der Todo-App.