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

Wichtige Erkenntnisse

Übersicht

Eine Todo-App ist einer der häufigsten Ausgangspunkte für das Erlernen der Backend-Entwicklung. Im Hintergrund benötigt sie Benutzerregistrierung, Aufgaben-CRUD, besitzbasierten Zugriffskontrolle und optional Echtzeitsynchronisierung sowie Offline-Unterstützung.

Das folgende Schema definiert zwei Klassen — _User (integriert) und Todo — die durch einen Pointer verbunden sind. Mit dem Parse React Native SDK (Back4app) können Sie direkt aus Ihrem JavaScript oder TypeScript-Code mit diesem Backend interagieren — Abfragen, Erstellen, Aktualisieren und Löschen von Objekten sowie das Anheften für Offline — ohne eine benutzerdefinierte API-Schicht zu schreiben.

Warum Ihr React Native Todo-Backend mit Back4app erstellen?

Back4app bietet Ihnen ein fertiges Backend und das Parse React Native SDK, sodass Sie sich auf UX und Leistung konzentrieren können, anstatt sich um REST-Verkabelung und Authentifizierung zu kümmern.

• •Offline-first & Synchronisierung: Pin Todo-Objekte im lokalen Datenspeicher, sodass die Liste offline funktioniert und synchronisiert, wenn die App wieder online ist — ideal für mobile Anwendungen.
• •Komponenten & Hooks: Verwenden Sie das SDK mit React-Hooks und -Kontext; halten Sie den Zustand mit Parse-Abfragen und Live Queries für Echtzeitaktualisierungen synchron.
• •Plattformübergreifend, ein Backend: Dasselbe Schema und dieselben APIs für iOS und Android; ideal für React Native-Teams, die Expo oder den Bare-Workflow verwenden.

Ideal für React Native-Entwickler, die Expo oder den Bare-Workflow verwenden — ein Backend, beide Plattformen.

Kernvorteile

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

Technologiestack

Alles, was dieses Todo-App-Template auf einen Blick antreibt.

ER-Diagramm

Entitäts-Beziehungsdiagramm für das React Native 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 React Native-App mit Back4app kommuniziert – anmelden, dann Todos abfragen und erstellen.

sequenceDiagram
  participant User
  participant App as React Native App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: Array of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>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)

Rohe 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-Spielplatz

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 React Native Integration

Verbinden Sie sich mit Ihrem Back4app Backend von einer React Native App aus mit dem Parse React Native SDK.

1. Schritt 1: Installieren Sie das Parse React Native SDK

   Fügen Sie das Parse React Native SDK (oder React-native-Parse) mit npm oder yarn zu Ihrem Projekt hinzu.

   JavaScript

   Kopieren

   1

   2

   npm install parse --save
   # or: yarn add parse

2. Schritt 2: Initialisieren Sie Parse in Ihrer App

   Initialisieren Sie das Parse SDK in Ihrem App-Einstieg (z.B. App.js oder index.js) mit Ihrer Anwendungs-ID, Server-URL und JavaScript Schlüssel.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   import Parse from 'parse/react-native';
   
   Parse.setAsyncStorage(AsyncStorage);
   Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
   Parse.serverURL = 'https://parseapi.back4app.com';
   

3. Schritt 3: Alle Todos abfragen

   Erstellen Sie eine Parse Abfrage für die Todo-Klasse, fügen Sie eine aufsteigende Sortierung nach Priorität hinzu und rufen Sie find() (oder findWithCount()) auf.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   async function getTodos() {
     const query = new Parse.Query('Todo').ascending('priority');
     const results = await query.find();
     return results;
   }

4. Schritt 4: Ein Todo erstellen

   Erstellen Sie ein neues Parse.Object('Todo'), setzen Sie Titel, erledigt und Priorität, und rufen Sie dann save() auf.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   async function createTodo(title, priority = 3) {
     const Todo = Parse.Object.extend('Todo');
     const todo = new Todo();
     todo.set('title', title);
     todo.set('done', false);
     todo.set('priority', priority);
     await todo.save();
     return todo;
   }

5. Schritt 5: Todos aktualisieren und löschen

   Holen Sie ein Todo anhand der objectId, setzen Sie die Felder und rufen Sie save() auf, um zu aktualisieren, oder rufen Sie destroy() auf, um zu löschen.

   JavaScript

   Kopieren

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   async function markDone(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     todo.set('done', true);
     await todo.save();
   }
   
   async function deleteTodo(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     await todo.destroy();
   }

Vollständiges JavaScript/TypeScript Datenmodell

Kopiere einen vollständigen Todo-Typ und Hilfsfunktionen für typensichere Serialisierung mit dem Parse SDK.

/** @typedef {{ objectId?: string, title: string, done: boolean, dueDate?: string, priority: number, owner?: { objectId: string }, createdAt?: string, updatedAt?: string }} Todo */

/**
 * @param {Parse.Object} obj
 * @returns {Todo}
 */
function todoFromParse(obj) {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner') ? { objectId: obj.get('owner').id } : undefined,
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Häufig gestellte Fragen

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