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

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

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

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

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

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

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

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

Этот шаблон предоставляет нативным приложениям React готовый CRM бэкенд на Back4app с поддержкой оффлайн. Закрепите объекты Contact, Deal и Activity локально, чтобы представители на местах могли работать без подключения; синхронизируйте, когда снова подключитесь. Один бэкенд для iOS и Android, с Live Queries для обновлений воронки. Идеально подходит для приложений продаж и полевых услуг, которым нужен надежный оффлайн-доступ.

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

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

Обзор

Нативные приложения CRM React часто работают в полевых условиях с нестабильным подключением. Этот шаблон сочетает схему CRM Back4app с нативным SDK Parse React: закрепляйте объекты Контакта и Сделки локально, запрашивайте в оффлайне и синхронизируйте, когда вернетесь в онлайн. Live Queries поддерживает синхронизацию процесса между устройствами.

Пять классов (_User, Company, Contact, Deal, Activity) одинаковы на сервере; SDK обрабатывает синхронизацию и разрешение конфликтов. Используйте один бэкенд для iOS и Android и сосредоточьтесь на экранах и навигации.

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

React Нативный CRM бэкенд с управлением контактами, воронкой сделок и офлайн-фиксацией. Встроенные ACL и Live Queries, чтобы представители поля видели только свои сделки и контакты.

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

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

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

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

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

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

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

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

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

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

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

Back4app предоставляет вам готовый бэкенд и нативный SDK Parse React, чтобы вы могли сосредоточиться на UX конвейера и оффлайне для полевых представителей.

  • •Оффлайн в первую очередь и синхронизация: Закрепите объекты Контакта, Сделки и Активности, чтобы приложение работало в оффлайне и синхронизировалось, когда снова выходит в онлайн — идеально для мобильного CRM.
  • •Компоненты и хуки: Используйте SDK с хуками React; поддерживайте состояние конвейера и контактов в синхронизации с запросами Parse и Live Queries.
  • •Кроссплатформенный, один бэкенд: Одна и та же схема и API для iOS и Android; один бэкенд для обеих платформ.

Идеально для команд React Native, создающих CRM или продажные приложения с Expo или bare workflow.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ER диаграмма

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

Просмотреть источник диаграммы
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 Native приложение взаимодействует с Back4app — вход в систему, затем запрос контактов и сделок, обновление воронки.

Просмотреть источник диаграммы
Mermaid
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 contacts and deals
  App->>Back4app: new Parse.Query('Deal').find() or Parse.Query('Contact').find()
  Back4app-->>App: Array 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 Native

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

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

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

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

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

    Инициализируйте SDK Back4app при запуске приложения с вашим идентификатором приложения и URL-адресом сервера.

    JavaScript
    import Parse from 'parse/react-native';

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
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');
  return await query.find();
}
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
    async function updateDealStage(objectId, stage) {
  const query = new Parse.Query('Deal');
  const deal = await query.get(objectId);
  deal.set('stage', stage);
  await deal.save();
}

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

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

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

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

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

JavaScript
/** @typedef {{ objectId?: string, title: string, amount?: number, stage?: string, expectedCloseDate?: string, contact?: { objectId: string }, company?: { objectId: string }, assignedTo?: { objectId: string }, createdAt?: string, updatedAt?: string }} Deal */
/** @typedef {{ objectId?: string, name: string, email?: string, phone?: string, company?: { objectId: string }, notes?: string, createdAt?: string, updatedAt?: string }} Contact */

function dealFromParse(obj) {
  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') ? { objectId: obj.get('contact').id } : undefined,
    company: obj.get('company') ? { objectId: obj.get('company').id } : undefined,
    assignedTo: obj.get('assignedTo') ? { objectId: obj.get('assignedTo').id } : undefined,
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}
function contactFromParse(obj) {
  return {
    objectId: obj.id,
    name: obj.get('name'),
    email: obj.get('email'),
    phone: obj.get('phone'),
    company: obj.get('company') ? { objectId: obj.get('company').id } : undefined,
    notes: obj.get('notes'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

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

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

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

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

JavaScript
// Pin deals after fetch (offline-first)
async function fetchAndPinDeals() {
  const query = new Parse.Query('Deal').equalTo('stage', 'qualified').ascending('expectedCloseDate');
  const results = await query.find();
  await Parse.Object.pinAll(results);
  // When offline, read from local datastore:
  // const localQuery = new Parse.Query('Deal').fromLocalDatastore();
  // const localResults = await localQuery.find();
}

async function unpinAllDeals() {
  await Parse.Object.unpinAll('Deal');
}

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

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

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

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

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

G2 Users Love Us Badge

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

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

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