CRM App
Mit KI-Agent erstellen
React Vorlage

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

Ein produktionsbereites React CRM Backend-Schema und Starter-Kit auf Back4app: Kontakt, Unternehmen, Deal, Aktivität, Pipeline-Stufen, ER-Diagramm, Datenwörterbuch, JSON-Schema, API-Spielplatz und ein One-Click KI-Agent Prompt zur Bereitstellung in Minuten.

Mit KI-Agent erstellen

Wichtige Erkenntnisse

Auf dieser Seite erhalten Sie ein produktionsbereites CRM-Schema, einen One-Click KI-Prompt und Schritt-für-Schritt React Code — damit Sie eine CRM-App ohne Backend-Erstellung bereitstellen können.

  1. In Minuten bereitstellen — Fügen Sie die AI-Agentenaufforderung ein und erhalten Sie eine laufende App mit Kontakten, Unternehmen, Angeboten und Pipeline.
  2. Standardmäßig sicher — ACLs und rollenbasierter Zugriff, damit Benutzer nur ihre zugewiesenen Angebote und Daten sehen.
  3. React-native SDK — Typisierte Objekte, async/await, Offline-Pinning und Live Queries für Pipeline-Updates.
  4. REST + GraphQL — Beide APIs werden automatisch generiert; Angebote nach Phase filtern, Aktivitäten nach relatedTo auflisten.
  5. Fünf Klassen — _User (integriert), Unternehmen, Kontakt, Angebot (Pipeline), Aktivität (Aufgaben/Ereignisse).

Was ist die React CRM App Backend-Vorlage?

Die React CRM App Backend-Vorlage kombiniert das CRM-Schema von Back4app (Contact, Company, Deal, Activity) mit dem Parse JavaScript SDK und React. Verwenden Sie Hooks, um Kontakte und Deals abzurufen, nach Pipeline-Stufen zu filtern und sich für Live Queries für Echtzeit-Updates anzumelden. Ideal für Dashboards und interne Tools: Verbinden Sie Ihre Komponenten mit einem verwalteten Backend, ohne API-Routen zu schreiben oder die Authentifizierung selbst zu verwalten.

Am besten für:

VertriebsteamsCRM-EntwicklerSchnelles PrototypingAußendienstmitarbeiterMVP-StartsTeams, die sich für ein BaaS für CRM entscheiden

Übersicht

React CRM-UIs zeigen typischerweise eine Pipeline (Geschäfte nach Stufe), Kontakt- und Unternehmenslisten sowie Aktivitätszeitleisten. Back4app stellt das Backend bereit; das Parse JavaScript SDK und React Hooks kümmern sich um Abruf, Zustand und Echtzeit-Updates über Live Queries.

Das Schema definiert _User, Company, Contact, Deal und Activity. In React verwenden Sie neu Parse.Query('Deal').equalTo('stage', stage) und speichern die Ergebnisse im Zustand oder Kontext. Das Back4app React/JS SDK unterstützt die Sitzungsauthentifizierung, sodass nur zugewiesene oder eigene Daten zurückgegeben werden.

Kern-CRM-Funktionen

Ein React CRM-Backend mit integriertem Kontakt- und Unternehmensmanagement, Phasen der Geschäftspipeline und Aktivitätsverfolgung. Verwenden Sie Hooks und das Parse SDK für Echtzeit-Pipeline-Updates.

Kontaktverwaltung

Speichern und Verwalten von Kontakten mit Name, E-Mail, Telefon, Unternehmen und Notizen. Ideal für React-Apps.

Unternehmensverwaltung

Verfolgen Sie Unternehmen mit Namen, Website, Branche und Adresse. Verknüpft mit Kontakten und Geschäften.

Deal-Pipeline

Verkaufspipeline mit Phasen, Betrag, voraussichtlichem Abschlussdatum und Zuweisung. Entwickelt für React Backends.

Aktivitätsverfolgung

Protokollieren Sie Anrufe, E-Mails, Besprechungen und Notizen, die mit Kontakten und Geschäften verknüpft sind. Funktioniert mit React SDK.

Benutzer & Berechtigungen

Integriertes Benutzermodell und Verweise für Eigentum und Zuweisung. ACLs sofort einsatzbereit für React.

Warum Ihr React CRM-Backend mit Back4app erstellen?

Back4app beseitigt die Notwendigkeit für ein benutzerdefiniertes Backend, damit Sie sich auf Pipeline-Ansichten und Kontakt-/Deal-Management konzentrieren können.

  • •Hooks-freundliches SDK: Verwende das Back4app JavaScript SDK mit useEffect und useState; hole Kontakte und Deals beim Mounten und aktualisiere den Status nach Mutationen.
  • •Auth sofort einsatzbereit: Parse.User.login() und signUp() geben Ihnen Sitzungstoken; Daten nach assignedTo oder createdBy einschränken.
  • •Echtzeit mit Live Queries: Abonnieren Sie Änderungen an Deals und Aktivitäten, damit Pipeline und Dashboard ohne Abfragen synchron bleiben.

Ideal für React-Entwickler, die CRM- oder Vertriebsdashboards erstellen – dasselbe Backend, jedes Frontend.

Kernvorteile

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

Schneller liefern, kein Backend-Code

REST- und GraphQL APIs und ein einsatzbereites Schema — verbinden Sie Ihre App und legen Sie los.

Standardmäßig sicher

ACLs und Klassenberechtigungen; einschränken nach assignedTo und createdBy.

Echtzeit-Pipeline

Live Queries über WebSockets für sofortige Deal- und Aktivitätsupdates.

Integrierte Authentifizierung

Benutzerregistrierung, Anmeldung und Sitzungsverwaltung sofort einsatzbereit.

Offline-Funktionalität

Lokales Pinnen hält Kontakte und Deals offline verfügbar und synchronisiert, wenn Sie sich wieder verbinden.

In Minuten bereitstellen

Verwenden Sie den KI-Agenten, um Ihre CRM-App aus dieser Vorlage zu erstellen und bereitzustellen.

Bereit, es auszuprobieren?

Lassen Sie den Back4app KI-Agenten Ihr CRM-App-Backend erstellen, das React-Frontend verbinden und bereitstellen — alles aus einem einzigen Prompt.

Mit KI-Agenten erstellenAPI Playground ausprobieren

Kostenlos starten — 50 KI-Agenten-Prompts/Monat, keine Kreditkarte erforderlich

Technologischer Stack

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

Frontend
React
Backend
Back4app
Datenbank
MongoDB
Auth
Auth & Zugriffskontrolle
APIs
REST & GraphQL
Bereitstellung
KI-Agent / Dashboard

ER-Diagramm

Entität-Beziehungsdiagramm für das React CRM-App-Datenmodell.

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

    Company {
        String objectId PK
        String name
        String website
        String industry
        String address
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Contact {
        String objectId PK
        String name
        String email
        String phone
        Pointer company FK
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Deal {
        String objectId PK
        String title
        Number amount
        String stage
        Pointer contact FK
        Pointer company FK
        Date expectedCloseDate
        String notes
        Pointer assignedTo FK
        Date createdAt
        Date updatedAt
    }

    Activity {
        String objectId PK
        String type
        String subject
        String description
        Date dueDate
        Date completedAt
        Pointer relatedTo FK
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Company ||--o{ Contact : "has"
    Company ||--o{ Deal : "has"
    Contact ||--o{ Deal : "has"
    _User ||--o{ Deal : "assignedTo"
    _User ||--o{ Activity : "createdBy"
    Contact ||--o{ Activity : "relatedTo"
    Deal ||--o{ Activity : "relatedTo"
    _User ||--o{ Company : "createdBy"
    _User ||--o{ Contact : "createdBy"

Integrationsfluss

Auth-to-CRUD-Sequenz: wie Ihre React App mit Back4app kommuniziert — anmelden, dann Kontakte und Deals abfragen, Pipeline aktualisieren.

Diagrammquelle anzeigen
Mermaid
sequenceDiagram
  participant User
  participant App as React 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 contacts and deals
  App->>Back4app: new Parse.Query('Deal').find() or Parse.Query('Contact').find()
  Back4app-->>App: List of Deal / Contact
  App-->>User: Show pipeline

  User->>App: Create deal or contact
  App->>Back4app: deal.save() or contact.save()
  Back4app-->>App: Deal (objectId)
  App-->>User: Updated list

Datenwörterbuch

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

FeldTypBeschreibungErforderlich
objectIdStringAuto-generated unique identifierauto
nameStringFull name of the contact
emailStringEmail address—
phoneStringPhone number—
companyPointer<Company>Company this contact belongs to—
notesStringFree-form notes—
createdByPointer<_User>User who created this contact—
createdAtDateAuto-generated creation timestampauto
updatedAtDateAuto-generated last-update timestampauto

9 Felder in Contact

Sicherheit & Berechtigungen

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

Zeilenebene ACLs

Verwenden Sie ACLs und Zeiger (assignedTo, createdBy), damit Benutzer nur ihre zugewiesenen Deals und verwandte Daten sehen und bearbeiten können.

Klassenberechtigungen

CLPs beschränken, welche Rollen oder Benutzer Objekte auf Klassenebene erstellen, lesen, aktualisieren oder löschen können.

Zeigerbasiertes Eigentum

Deal.assignedTo und Activity.createdBy verlinken zu _User; Cloud Code kann Sichtbarkeit und Bearbeitungen nach Rolle durchsetzen.

Schema (JSON)

Roh-JSON-Schemaspezifikation — kopieren und in Ihrer Back4app-App verwenden oder über die API importieren.

JSON
{
  "classes": [
    {
      "className": "Contact",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": false
        },
        "phone": {
          "type": "String",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Company",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "website": {
          "type": "String",
          "required": false
        },
        "industry": {
          "type": "String",
          "required": false
        },
        "address": {
          "type": "String",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Deal",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "amount": {
          "type": "Number",
          "required": false
        },
        "stage": {
          "type": "String",
          "required": false
        },
        "contact": {
          "type": "Pointer",
          "targetClass": "Contact",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "expectedCloseDate": {
          "type": "Date",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "assignedTo": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Activity",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "type": {
          "type": "String",
          "required": false
        },
        "subject": {
          "type": "String",
          "required": false
        },
        "description": {
          "type": "String",
          "required": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "completedAt": {
          "type": "Date",
          "required": false
        },
        "relatedTo": {
          "type": "Pointer",
          "required": false
        },
        "createdBy": {
          "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
        }
      }
    }
  ]
}

Mit AI-Agent erstellen

Verwenden Sie den Back4app AI-Agent, um eine echte CRM-App aus dieser Vorlage zu erstellen: Er wird das Frontend, das Backend (dieses Schema, Authentifizierung und APIs) erstellen und bereitstellen – keine manuelle Einrichtung. Der folgende Prompt beschreibt diesen CRM-Stack, damit der Agent eine produktionsbereite App auf einmal generieren kann.

Back4app AI-Agent
Bereit zum Erstellen
Erstellen Sie eine CRM-App auf Back4app mit diesem genauen Schema und Verhalten.

Schema:
1. _User (verwenden Sie Back4app integrierte): Benutzername (String, erforderlich), E-Mail (String, erforderlich), Passwort (String, erforderlich); objectId, createdAt, updatedAt (System).
2. Unternehmen: Name (String, erforderlich), Website (String), Branche (String), Adresse (String), Notizen (String), erstelltVon (Pointer zu _User); objectId, createdAt, updatedAt (System).
3. Kontakt: Name (String, erforderlich), E-Mail (String), Telefon (String), Unternehmen (Pointer zu Unternehmen), Notizen (String), erstelltVon (Pointer zu _User); objectId, createdAt, updatedAt (System).
4. Deal: Titel (String, erforderlich), Betrag (Zahl), Phase (String; z.B. Lead, qualifiziert, Angebot, Verhandlung, gewonnen, verloren), Kontakt (Pointer zu Kontakt), Unternehmen (Pointer zu Unternehmen), erwartetes Abschlussdatum (Datum), Notizen (String), zugewiesenAn (Pointer zu _User); objectId, createdAt, updatedAt (System).
5. Aktivität: Typ (String; z.B. Anruf, E-Mail, Meeting, Notiz), Betreff (String), Beschreibung (String), Fälligkeitsdatum (Datum), abgeschlossenAm (Datum), bezogenAuf (Pointer zu Kontakt oder Deal), erstelltVon (Pointer zu _User); objectId, createdAt, updatedAt (System).

Sicherheit:
- Setzen Sie ACLs, damit nur authentifizierte Benutzer auf Daten zugreifen können; verwenden Sie rollenbasierte oder besitzerbasierte Regeln, wo es angebracht ist (z.B. zugewiesenAn, erstelltVon).
- Verwenden Sie Klassenebenenberechtigungen, damit nur authentifizierte Benutzer diese Klassen erstellen/lesen/aktualisieren/löschen können.

Authentifizierung:
- Anmeldung (Benutzername, E-Mail, Passwort) und Login; Unterstützung für Abmeldung/Sitzung.

Verhalten:
- Vollständiges CRUD für Unternehmen, Kontakt, Deal und Aktivität.
- Listen Sie Deals mit Filter nach Phase und sortieren Sie nach erwartetesAbschlussdatum oder updatedAt (Pipeline-Ansicht).
- Listen Sie Aktivitäten nach bezogenAuf (Kontakt oder Deal).
- Optional: Echtzeit Live Queries für Deal und Aktivität für Dashboard/Pipeline-Updates.
- Optional: Offline-Pinning für mobile (Kontakte, Deals, Aktivitäten).

Liefern:
- Erstellen Sie die Back4app-App mit dem obigen Schema, ACLs und allen benötigten Cloud-Code.
- Generieren Sie das Frontend und verbinden Sie es mit diesem Backend; bereitstellen, damit die App end-to-end lauffähig ist.

Drücken Sie die Schaltfläche unten, um den Agenten mit dem vorab ausgefüllten Prompt dieser Vorlage zu öffnen.

In Minuten bereitstellen50 kostenlose Eingabeaufforderungen / MonatKeine Kreditkarte erforderlich

API-Spielplatz

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

Spielplatz wird geladen…

Verwendet dasselbe CRM-Schema (Kontakt, Unternehmen, Deal, Aktivität) wie diese Vorlage.

Schritt-für-Schritt React Integration

Verbinden Sie sich von einer React App mit Ihrem Back4app Backend über das Back4app React SDK.

  1. Schritt 1: Installieren Sie das Back4app React SDK

    Fügen Sie das Back4app SDK für Ihren Stack hinzu (z.B. npm, pubspec oder Paketmanager).

    Bash
    npm install parse

  2. Schritt 2: Initialisieren Sie Back4app in Ihrer App

    Initialisieren Sie das Back4app SDK beim Start der App mit Ihrer App-ID und Server-URL.

    JavaScript
    import Parse from 'parse';

Parse.initialize(
  'YOUR_APP_ID',
  'YOUR_JAVASCRIPT_KEY',
  { serverURL: 'https://parseapi.back4app.com' }
);
Parse.serverURL = 'https://parseapi.back4app.com';

  3. Schritt 3: Kontakte und Geschäfte abfragen

    Verwenden Sie das SDK, um Kontakt- und Geschäftsobjekte abzurufen; filtern Sie Geschäfte nach Phase für die Pipeline.

    JavaScript
    async function getDeals(stage = 'qualified') {
  const query = new Parse.Query('Deal');
  query.equalTo('stage', stage);
  query.ascending('expectedCloseDate');

  const results = await query.find();
  return results;
}

async function getContacts() {
  const query = new Parse.Query('Contact');
  return await query.find();
}

  4. Schritt 4: Erstellen Sie einen Kontakt oder ein Geschäft

    Erstellen Sie einen neuen Kontakt oder ein Geschäft mit den erforderlichen Feldern und Hinweisen (Unternehmen, Kontakt, zugewiesen an), und speichern Sie dann.

    JavaScript
    async function createDeal(title, stage = 'lead', amount) {
  const Deal = Parse.Object.extend('Deal');
  const deal = new Deal();
  deal.set('title', title);
  deal.set('stage', stage);
  if (amount != null) deal.set('amount', amount);
  await deal.save();
  return deal;
}

async function createContact(name, email, phone) {
  const Contact = Parse.Object.extend('Contact');
  const contact = new Contact();
  contact.set('name', name);
  if (email) contact.set('email', email);
  if (phone) contact.set('phone', phone);
  await contact.save();
  return contact;
}

  5. Schritt 5: Aktualisieren Sie die Geschäftsphase und Aktivitäten

    Aktualisieren Sie Deal.stage beim Bewegen in der Pipeline; erstellen und listen Sie Aktivitäten nach relatedTo.

    JavaScript
    // Update deal stage (e.g. move in pipeline)
async function updateDealStage(objectId, stage) {
  const query = new Parse.Query('Deal');
  const deal = await query.get(objectId);
  deal.set('stage', stage);
  await deal.save();
}

// Delete a deal
async function deleteDeal(objectId) {
  const query = new Parse.Query('Deal');
  const deal = await query.get(objectId);
  await deal.destroy();
}

Zustandsmanagement-Integration

Integrieren Sie das Back4app SDK mit der Zustandschicht Ihrer App (z.B. Kontext, Store oder Dienste) für Pipeline- und Kontaktzustände.

Vollständiges Datenmodell

Kopiere ein vollständiges CRM-Modell für typsichere Serialisierung (z.B. Klasse, Schnittstelle oder Typdefinition).

JavaScript
// TypeScript interfaces for Deal and Contact (matches Back4app schema)
interface Deal {
  objectId?: string;
  title: string;
  amount?: number;
  stage?: string;
  expectedCloseDate?: string;
  contact?: { __type: string; className: string; objectId: string };
  company?: { __type: string; className: string; objectId: string };
  assignedTo?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

interface Contact {
  objectId?: string;
  name: string;
  email?: string;
  phone?: string;
  company?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

function toDeal(obj: Parse.Object): Deal {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    amount: obj.get('amount'),
    stage: obj.get('stage'),
    expectedCloseDate: obj.get('expectedCloseDate')?.toISOString?.() ?? undefined,
    contact: obj.get('contact'),
    company: obj.get('company'),
    assignedTo: obj.get('assignedTo'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Offline-First & Lokaler Datenspeicher

Verwende pin() und unpin(), damit Kontakte und Deals offline verfügbar sind und synchronisiert werden, wenn du wieder online bist.

Unterstützte SDKs beinhalten einen lokalen Datenspeicher. Pinne Kontakt-, Deal- und Aktivitätsobjekte, um sie auf dem Gerät zu behalten; frage gepinnte Daten im Offline-Modus ab. Wenn die App wieder online ist, synchronisiere mit dem Server.

Unten: Ergebnisse nach dem Abrufen anheften und abheften, wenn du keine lokalen Kopien mehr benötigst.

JavaScript
// 1. Enable local datastore (e.g. before Parse.initialize)
Parse.enableLocalDatastore();

// 2. After fetching deals, pin them for offline access
async function fetchAndPinDeals() {
  const query = new Parse.Query('Deal');
  query.equalTo('stage', 'qualified');
  query.ascending('expectedCloseDate');
  const results = await query.find();
  await Parse.Object.pinAll(results);
  return results;
}

// 3. When offline (or for instant load), query from local datastore
async function getDealsFromLocal() {
  const query = new Parse.Query('Deal');
  query.fromLocalDatastore();
  return await query.find();
}

// 4. Unpin when no longer needed
async function unpinAllDeals() {
  await Parse.Object.unpinAll('Deal');
}

Häufig gestellte Fragen

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

Was ist Back4app?
Warum Back4app für eine React CRM-App verwenden?
Wie filtere ich Deals nach Phase in React?
Ist die Echtzeit-Pipeline-Synchronisierung für React verfügbar?

Von Entwicklern weltweit vertraut

Schließe dich der Gemeinschaft an, die die Zukunft von Apps gestaltet.

G2 Users Love Us Badge

Bereit, Ihre CRM-App zu erstellen?

Starten Sie Ihr React-Projekt in wenigen Minuten. Keine Kreditkarte erforderlich.

Mit AI-Agent bauen