Приложение CRM
Создано с помощью AI-агента
React Шаблон

Шаблон бэкенда CRM приложения
React — Схема, API и AI руководство

Готовая к производству React CRM схема бэкенда и Стартовый комплект на Back4app: Контакт, Компания, Сделка, Активность, этапы воронки, ER-диаграмма, словарь данных, JSON-схема, API-площадка и однонажатийный AI агент для развертывания за минуты.

Создано с помощью AI-агента

Ключевые выводы

На этой странице вы получите готовую к производству схему CRM, однонажатийный AI-подсказку и пошаговый код React — так вы сможете выпустить приложение CRM без создания бэкенда.

  1. Разверните за считанные минуты — Вставьте подсказку AI Agent и получите работающее приложение с контактами, компаниями, сделками и конвейером.
  2. Безопасно по умолчанию — ACL и доступ на основе ролей, чтобы пользователи видели только свои назначенные сделки и данные.
  3. React-родной SDK — Типизированные объекты, async/await, оффлайн-фиксация и Live Queries для обновлений конвейера.
  4. REST + GraphQL — Обе API сгенерированы автоматически; фильтруйте сделки по этапу, перечисляйте активности по relatedTo.
  5. Пять классов — _User (встроенный), Компания, Контакт, Сделка (конвейер), Активность (задачи/события).

Что такое шаблон бэкенда CRM приложения React?

Шаблон бэкенда CRM приложения React сочетает схему CRM Back4app (Contact, Company, Deal, Activity) с SDK Parse JavaScript и React. Используйте хуки для получения контактов и сделок, фильтруйте по стадии воронки и подписывайтесь на Live Queries для обновлений в реальном времени. Идеально подходит для панелей мониторинга и внутренних инструментов: подключите ваши компоненты к управляемому бэкенду без написания маршрутов API или управления аутентификацией самостоятельно.

Лучше всего для:

Команды продажСоздатели CRMБыстрое прототипированиеПолевые представителиЗапуски MVPКоманды выбирают BaaS для CRM

Обзор

Пользовательские интерфейсы CRM React обычно показывают процесс (сделки по этапам), списки контактов и компаний, а также временные линии действий. Back4app предоставляет бэкенд; SDK Parse JavaScript и хуки React обрабатывают получение, состояние и обновления в реальном времени через Live Queries.

Схема определяет _User, Company, Contact, Deal и Activity. В React вы используете новый Parse.Query('Deal').equalTo('stage', stage) и сохраняете результаты в состоянии или контексте. SDK Back4app React/JS поддерживает аутентификацию сессии, поэтому возвращаются только назначенные или принадлежащие данные.

Основные функции CRM

React CRM бэкенд с встроенным управлением контактами и компаниями, этапами воронки сделок и отслеживанием активности. Используйте хуки и SDK Parse для обновлений воронки в реальном времени.

Управление контактами

Храните и управляйте контактами с именем, электронной почтой, телефоном, компанией и заметками. Идеально подходит для приложений React.

Управление компаниями

Отслеживайте компании по имени, веб-сайту, отрасли и адресу. Связано с контактами и сделками.

Конвейер сделок

Конвейер продаж с этапами, суммой, ожидаемой датой закрытия и назначением. Создан для бэкендов React.

Отслеживание активности

Записывайте звонки, электронные письма, встречи и заметки, связанные с контактами и сделками. Работает с SDK React.

Пользователь и разрешения

Встроенная модель пользователя и указатели для владения и назначения. ACL из коробки для React.

Почему стоит создать ваш CRM бэкенд с React на Back4app?

Back4app устраняет необходимость в пользовательском бэкенде, чтобы вы могли сосредоточиться на представлениях воронки и управлении контактами/сделками.

  • •SDK, совместимый с хуками: Используйте Back4app JavaScript SDK с useEffect и useState; получайте контакты и сделки при монтировании и обновляйте состояние после мутаций.
  • •Аутентификация из коробки: Parse.User.login() и signUp() предоставляют вам токены сессии; ограничьте данные по assignedTo или createdBy.
  • •В реальном времени с Live Queries: Подписывайтесь на изменения сделок и активности, чтобы воронка и панель управления оставались синхронизированными без опроса.

Идеально для разработчиков React, создающих CRM или продажные панели управления — один и тот же бэкенд, любой фронтенд.

Основные преимущества

Готовый к производству CRM-бэкенд, чтобы вы могли быстрее разрабатывать и сосредоточиться на своем приложении.

Разрабатывайте быстрее, без кода бэкенда

REST и API GraphQL и готовая схема — подключите свое приложение и вперед.

Безопасно по умолчанию

ACL и разрешения на уровне класса; ограничить по assignedTo и createdBy.

Поток в реальном времени

Live Queries через WebSockets для мгновенных обновлений сделок и активности.

Встроенная аутентификация

Регистрация пользователей, вход в систему и управление сессиями из коробки.

Работает в оффлайне

Локальная привязка сохраняет контакты и сделки доступными в оффлайне и синхронизирует их при повторном подключении.

Развертывание за минуты

Используйте AI Agent для создания и развертывания вашего CRM-приложения из этого шаблона.

Готовы попробовать?

Позвольте AI Agent от Back4app создать бэкенд вашего CRM-приложения, подключить фронтенд React и развернуть — все из одного запроса.

Создавайте с AI AgentПопробуйте API Playground

Бесплатно для начала — 50 запросов AI Agent в месяц, без необходимости в кредитной карте

Технический стек

Все, что поддерживает этот шаблон CRM-приложения, на одном взгляде.

Фронтенд
React
Бэкенд
Back4app
База данных
MongoDB
Аутентификация
Аутентификация и контроль доступа
API
REST и GraphQL
Развертывание
AI-агент / Панель управления

ER диаграмма

Диаграмма «Сущность-связь» для модели данных CRM приложения React.

Просмотреть источник диаграммы
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"

Поток интеграции

Последовательность Auth-to-CRUD: как ваше React приложение взаимодействует с Back4app — вход в систему, затем запрос контактов и сделок, обновление воронки.

Просмотреть источник диаграммы
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

Словарь данных

Полная справка по полям для каждого класса в схеме.

ПолеТипОписаниеОбязательно
objectIdStringAuto-generated unique identifierавто
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 timestampавто
updatedAtDateAuto-generated last-update timestampавто

9 поля в Contact

Безопасность и разрешения

Как владение, ACL и разрешения на уровне классов защищают данные в этой схеме CRM.

ACL на уровне строк

Используйте ACL и указатели (assignedTo, createdBy), чтобы пользователи видели и редактировали только свои назначенные сделки и связанные данные.

Разрешения на уровне классов

CLP ограничивают, какие роли или пользователи могут создавать, читать, обновлять или удалять объекты на уровне класса.

Владение на основе указателей

Deal.assignedTo и Activity.createdBy ссылаются на _User; Cloud Code может обеспечивать видимость и редактирование по ролям.

Схема (JSON)

Сырая определение схемы JSON — скопируйте и используйте в вашем Back4app приложении или импортируйте через API.

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
        }
      }
    }
  ]
}

Создайте с помощью AI Agent

Используйте Back4app AI Agent, чтобы создать реальное CRM приложение из этого шаблона: он создаст фронтенд, бэкенд (эту схему, аутентификацию и API) и развернет его — без ручной настройки. Подсказка ниже описывает этот стек CRM, чтобы Агент мог сгенерировать готовое к производству приложение за один раз.

Back4app AI Agent
Готовы к созданию
Создайте приложение CRM на Back4app с этой точной схемой и поведением.

Схема:
1. _Пользователь (используйте встроенный Back4app): имя пользователя (Строка, обязательно), электронная почта (Строка, обязательно), пароль (Строка, обязательно); objectId, createdAt, updatedAt (система).
2. Компания: название (Строка, обязательно), веб-сайт (Строка), отрасль (Строка), адрес (Строка), заметки (Строка), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
3. Контакт: имя (Строка, обязательно), электронная почта (Строка), телефон (Строка), компания (Указатель на Компанию), заметки (Строка), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
4. Сделка: название (Строка, обязательно), сумма (Число), стадия (Строка; например, лид, квалифицированный, предложение, переговоры, выиграно, проиграно), контакт (Указатель на Контакт), компания (Указатель на Компанию), ожидаемая дата закрытия (Дата), заметки (Строка), назначено (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).
5. Активность: тип (Строка; например, звонок, электронная почта, встреча, заметка), тема (Строка), описание (Строка), срок (Дата), завершено (Дата), связано с (Указатель на Контакт или Сделку), создано (Указатель на _Пользователь); objectId, createdAt, updatedAt (система).

Безопасность:
- Установите ACL, чтобы только аутентифицированные пользователи могли получать доступ к данным; используйте правила на основе ролей или владельца, где это уместно (например, назначено, создано).
- Используйте разрешения на уровне класса, чтобы только аутентифицированные пользователи могли создавать/читать/обновлять/удалять эти классы.

Аутентификация:
- Регистрация (имя пользователя, электронная почта, пароль) и вход; поддержка выхода/сессии.

Поведение:
- Полный CRUD для Компании, Контакта, Сделки и Активности.
- Список сделок с фильтром по стадии и сортировкой по ожидаемой дате закрытия или updatedAt (вид воронки).
- Список активностей по связанным с (Контакт или Сделка).
- Опционально: обновления в реальном времени Live Queries для Сделки и Активности для обновлений панели управления/воронки.
- Опционально: оффлайн-фиксация для мобильных устройств (Контакты, Сделки, Активности).

Доставка:
- Создайте приложение Back4app с вышеуказанной схемой, ACL и любым необходимым облачным кодом.
- Сгенерируйте фронтенд и подключите его к этому бэкенду; разверните, чтобы приложение работало от начала до конца.

Нажмите кнопку ниже, чтобы открыть Агента с предзаполненной подсказкой этого шаблона.

Развернуть за минуты50 бесплатных запросов / месяцКредитная карта не требуется

API Playground

Попробуйте REST и GraphQL конечные точки для схемы CRM. Ответы из приведенных выше примерных данных — учетная запись Back4app не требуется.

Загрузка песочницы…

Использует ту же схему CRM (Контакт, Компания, Сделка, Активность), что и этот шаблон.

Пошаговая интеграция React

Подключитесь к вашему Back4app бэкенду из приложения React с использованием SDK Back4app React.

  1. Шаг 1: Установите SDK Back4app React

    Добавьте SDK Back4app для вашего стека (например, npm, pubspec или менеджер пакетов).

    Bash
    npm install parse

  2. Шаг 2: Инициализируйте Back4app в вашем приложении

    Инициализируйте SDK Back4app при запуске приложения с вашим идентификатором приложения и 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. Шаг 3: Запросите контакты и сделки

    Используйте SDK для получения объектов Контакта и Сделки; фильтруйте сделки по этапу для воронки.

    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. Шаг 4: Создайте контакт или сделку

    Создайте новый Контакт или Сделку с обязательными полями и указателями (компания, контакт, назначено), затем сохраните.

    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. Шаг 5: Обновите стадию сделки и действия

    Обновите Deal.stage при перемещении в воронке; создайте и перечислите Activity по 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();
}

Интеграция управления состоянием

Интегрируйте SDK Back4app с уровнем состояния вашего приложения (например, контекст, хранилище или сервисы) для состояния потока и контактов.

Полная модель данных

Скопируйте полную модель CRM для безопасной сериализации типов (например, класс, интерфейс или определение типа).

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,
  };
}

Оффлайн-ориентированный и локальный хранилище данных

Используйте pin() и unpin(), чтобы контакты и сделки были доступны в оффлайне и синхронизировались при возвращении в онлайн.

Поддерживаемые SDK включают локальное хранилище данных. Закрепите объекты Контакт, Сделка и Деятельность, чтобы сохранить их на устройстве; запрашивайте закрепленные данные в оффлайне. Когда приложение снова в сети, синхронизируйтесь с сервером.

Ниже: закрепите результаты после получения и снимите закрепление, когда больше не нужны локальные копии.

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');
}

Часто задаваемые вопросы

Распространенные вопросы о шаблоне бэкенда CRM приложения.

Что такое Back4app?
Почему использовать Back4app для React CRM-приложения?
Как отфильтровать сделки по этапу в React?
Доступна ли синхронизация пайплайна в реальном времени для React?

Доверяют разработчики по всему миру

Присоединяйтесь к сообществу, строящему будущее приложений

G2 Users Love Us Badge

Готовы создать свое CRM-приложение?

Начните свой проект React за считанные минуты. Кредитная карта не требуется.

Строить с ИИ-агентом