Быстрые стартеры
Как создать бэкенд для React Native?

38min
Введение
В этом учебном пособии вы научитесь создавать бэкенд для React Native с использованием Back4App. 
Мы сосредоточимся на совместимости между платформами и проиллюстрируем, как вы можете интегрировать основные функции Back4App для управления данными, аутентификации пользователей и работы с данными в реальном времени. 
Используя REST и GraphQL API, вы можете разработать свой проект React Native для работы как на iOS, так и на Android, обеспечивая бесшовный опыт работы с нативными компонентами и мобильными приложениями.
Реализация безопасного входа пользователей, планирование задач и использование приложений в реальном времени упростят ваш путь как разработчика полного стека. 
Вы также увидите, как среда Back4App может сократить время, необходимое для настройки таких услуг, как хостинг, база данных и уровни безопасности. 
К концу вы получите надежную структуру бэкенда, которая поддерживает ваше приложение React Native и прокладывает путь для создания мобильных решений в большом масштабе.
После завершения этого руководства вы будете готовы расширить свое приложение с помощью расширенных функций, интегрировать сторонние сервисы или превратить ваш проект в платформу, готовую к производству. 
Давайте погрузимся в современную разработку мобильных приложений с Back4App и React Native!
Предварительные требования
Для завершения этого учебника вам понадобятся:
Учетная запись Back4app и новый проект Back4App
Начало работы с Back4app.
Если у вас нет учетной записи, зарегистрируйтесь бесплатно. Затем следуйте руководству, чтобы подготовить ваш проект.
Базовая среда разработки React Native
Вы можете использовать Быстрый старт с React Native CLI или Expo CLI. Убедитесь, что у вас установлен Node.js.
Установленный Node.js (версия 14 или выше)
Вам нужен Node.js для установки npm-пакетов и запуска локальных серверов разработки. Установка Node.js﻿
Знание JavaScript и основных концепций React Native
Официальная документация React Native.
Если вы новичок в разработке на React Native, сначала ознакомьтесь с документацией или учебником для начинающих.
Убедитесь, что у вас есть все эти предварительные требования перед началом. Создание вашего проекта Back4App и настройка локальной среды React Native обеспечат гладкий процесс.
Шаг 1 – Создание нового проекта на Back4App и подключение
Создать новый проект
Первый шаг в создании мобильных бэкендов для вашего приложения React Native – это создание нового проекта на Back4App. Следуйте этим шагам:
Войдите в свою учетную запись Back4App.
Нажмите кнопку “Новое приложение” в вашей панели управления Back4App.
Дайте вашему приложению имя (например, “ReactNative-Backend-Tutorial”).
﻿
После создания проекта он появится на вашей панели управления Back4App. Вы будете использовать этот новый проект для управления данными и настройки безопасности для вашего приложения на React Native.
Получение ключей вашего приложения
В отличие от веб-приложений на React, разработка на React Native часто требует прямых HTTP-запросов для получения и манипуляции данными. Поскольку мы сосредоточены на REST API (или GraphQL API) вместо Parse SDK, вам все равно понадобятся ваши ключи Back4App для отправки аутентифицированных запросов.
Получите ваши ключи Parse:
В панели управления Back4App откройте раздел Настройки приложения или Безопасность и ключи чтобы найти ваш Идентификатор приложения, Ключ REST API, и Конечную точку GraphQL (обычно https://parseapi.back4app.com/graphql).
Запишите ваш ключ REST API:
Вы будете включать его в заголовки fetch или axios вашего React Native для аутентификации каждого запроса.
﻿
Этот шаг гарантирует, что ваши мобильные приложения могут безопасно взаимодействовать с Back4App.
Шаг 2 – Настройка базы данных
Back4App предоставляет широкий спектр вариантов бэкенда для приложений React Native, включая надежные возможности управления данными. Вы можете создавать классы, добавлять поля и определять отношения через панель управления. Независимо от того, создаете ли вы приложения в реальном времени или более простые CRUD-приложения, панель управления Back4App помогает вам легко хранить и организовывать данные.
Создание модели данных
Перейдите в раздел “База данных” в вашей панели управления Back4App.
Создайте новый класс (например, “Todo”) и добавьте соответствующие столбцы, такие как title (строка) и isCompleted (логическое значение).
Создать новый класс
﻿
Back4App поддерживает различные типы данных: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, и Polygon. Вы также можете позволить Parse автоматически создавать поля, когда вы отправляете новые данные.
Создание модели данных с помощью AI-агента
Если вы предпочитаете, вы можете использовать AI-агента Back4App:
Откройте AI-агента из вашей панели управления приложением.
Опишите вашу модель данных простым языком (например, “Создайте класс Todo с полями title и isCompleted.”).
Позвольте AI-агенту создать схему для вас.
﻿
Это может сэкономить время на ранних этапах вашего проекта React Native.
Чтение и запись данных с использованием REST API
Для типичной разработки React Native вы можете использовать нативный fetch API или стороннюю библиотеку, такую как axios для работы с REST API. Ниже приведен пример с использованием cURL, который вы можете адаптировать для fetch:
POST (Создать Todo):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
GET (Получить Todos):
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
В вашем приложении React Native вы можете сделать то же самое с fetch:
JS
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Чтение и запись данных с использованием GraphQL API
Если вы предпочитаете GraphQL, Back4App предоставляет конечную точку GraphQL. Ниже приведен пример мутации для создания новой записи:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Вы можете выполнять запросы GraphQL, используя библиотеку, такую как apollo-client или даже простой fetch вызов:
JS
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
﻿
Работа с живыми запросами (по желанию)
Для получения данных в реальном времени Back4App предлагает живые запросы, хотя обычно это требует использования Parse SDK. Поскольку в этом учебнике мы сосредоточены на REST-вызовах, вы можете включить живые запросы в настройках сервера вашего приложения, если планируете использовать их позже. Данные в реальном времени могут помочь вам мгновенно обновлять пользователей в приложении React Native. Для более простого подхода вы можете опрашивать сервер с вашими собственными интервалами или полагаться на сторонние инструменты.
Шаг 3 – Применение безопасности с помощью ACL и CLP
Краткий обзор
Back4App защищает ваш бэкенд с помощью ACL (Списки контроля доступа) и CLP (Разрешения на уровне класса). Они позволяют защищать данные как на уровне объектов, так и на уровне классов. Они жизненно важны для реализации безопасных пользовательских разрешений в разработке мобильных приложений уровня производства.
Пошагово
Разрешения на уровне класса (CLP):
Перейдите в раздел База данных вашего приложения, откройте любой класс и переключитесь на "Безопасность и разрешения". Настройте разрешения на чтение/запись для различных ролей пользователей или публичного доступа.
ACL:
Вы можете применять контроль доступа на уровне объектов, включая поля _ACL в ваших REST-запросах. Например:
Для получения дополнительной информации ознакомьтесь с Руководством по безопасности приложений.
Шаг 4 – Написание функций облачного кода
Почему облачный код
Облачный код позволяет вам запускать серверные скрипты на Back4App для таких задач, как валидация, триггеры и обработка внешних API вызовов. Это помогает вам контролировать логику, которая должна оставаться скрытой от клиента, обеспечивая лучшую безопасность вашего проекта на React Native.
Пример функции
Ниже приведен пример, который вы бы написали в вашем main.js на стороне сервера. Вы можете вызвать его из вашего приложения на React Native через REST:
JS
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
﻿
Развертывание
Back4app CLI:
Установите CLI, настройте ключ вашей учетной записи и выполните b4a deploy.
Панель управления:
Вы также можете перейти в Cloud Code > Functions, вставить ваш код в main.js, и нажать Развернуть.
﻿
Вызов вашей функции (через REST)
Используйте REST API напрямую из вашего приложения React Native:
JS
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
﻿
Эта гибкость делает вас более эффективным разработчиком полного стека, так как вы можете интегрировать бизнес-логику, не раскрывая чувствительные данные на клиенте.
Шаг 5 – Настройка аутентификации
Включить или настроить аутентификацию пользователя
Back4App использует класс Parse User для управления аутентификацией пользователей. Даже если вы не используете Parse SDK в React Native, вы можете зарегистрироваться, войти в систему или выйти из нее, используя прямые HTTP-запросы.
Зарегистрировать пользователя (REST):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "[email protected]"
     }' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "alice@example.com"
     }' \
  https://parseapi.back4app.com/users
﻿
Войти в систему (REST):
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
﻿
Эти запросы возвращают токен сессии, который вы можете сохранить в своем приложении React Native для управления сессиями пользователей. Это гарантирует, что каждый запрос, который вы делаете, может быть авторизован, создавая мобильные приложения, которые остаются безопасными.
Социальный вход
Back4App поддерживает социальные входы (Google, Facebook, Apple) через специализированные потоки. Вам нужно будет следовать за Документация по социальному входу для настройки OAuth приложений, а затем отправить соответствующие токены в Back4App.
Шаг 6 – Обработка хранения файлов
Настройка хранения файлов
Back4App может хранить файлы для вашего React Native приложения. Вы можете прикрепить их к объектам или загрузить их напрямую. Поскольку мы используем REST, ниже приведен пример загрузки файла (кодированного в Base64):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
﻿
Ответ возвращает URL, который вы можете сохранить в своей базе данных. Из вашего React Native приложения вы можете сделать это с помощью fetch отправив файл как blob или данные формы.
Соображения безопасности
Чтобы предотвратить несанкционированные загрузки, настройте fileUpload параметры в ваших Настройках сервера Parse. Например, вы можете разрешить загрузки только от аутентифицированных пользователей. Это гарантирует, что такие услуги, как хранение файлов, остаются защищенными.
Шаг 7 – Подтверждение электронной почты и сброс пароля
Обзор
Подтверждение владения электронной почтой является ключом к реализации безопасных пользовательских потоков. Back4App предлагает встроенные инструменты для проверки электронной почты и сброса паролей.
Конфигурация панели управления Back4App
Откройте настройки вашего приложения.
Включите проверку электронной почты в настройках электронной почты.
Настройте шаблоны для сообщений о сбросе пароля и проверке.
Код/Реализация
Пользователь, который забыл свой пароль, может инициировать запрос на сброс:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "[email protected]"}' \
  https://parseapi.back4app.com/requestPasswordReset
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "alice@example.com"}' \
  https://parseapi.back4app.com/requestPasswordReset
﻿
Back4App отправляет пользователю электронное письмо для сброса пароля. Это удобство избавляет вас от необходимости настраивать отдельные почтовые серверы в вашем приложении React Native.
Шаг 8 – Планирование задач с помощью облачных заданий
Что делают облачные задания
Облачные задания помогают вам автоматизировать повторяющиеся задачи, такие как очистка данных или отправка ежедневных отчетов. Ниже приведен пример задания в main.js:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Разверните этот код, затем перейдите в Настройки сервера > Фоновая работа для его планирования. Это поддерживает ваши данные актуальными на ваших платформах iOS и Android без ручного вмешательства.
Планирование облачного задания
﻿
Шаг 9 – Интеграция вебхуков
Определение
Вебхуки позволяют вашему бэкенду уведомлять внешние сервисы всякий раз, когда происходит событие. Например, вы можете уведомить Slack или платежный шлюз при создании новой задачи.
Конфигурация
Перейдите в Дополнительно > Вебхуки в вашей панели управления Back4App.
Добавьте новый вебхук на указанный внешний конечный пункт.
Установите триггеры, чтобы определить, когда изменения данных вашего приложения React Native должны вызывать вебхук.
Добавление вебхука
﻿
Вы также можете кодировать вебхуки внутри триггеров Cloud Code, что позволяет вам отправлять HTTP-запросы или интегрироваться с API сторонних разработчиков. Это расширяет возможности вашего бэкенда для работы с широким спектром внешних сервисов.
BeforeSave WebHook
﻿
Шаг 10 – Изучение панели администратора Back4App
Где это найти
Панель администратора Back4App – это удобный интерфейс для нетехнических пользователей для управления данными. Это особенно полезно для владельцев продуктов, представителей клиентов или сотрудников поддержки, которым нужен прямой доступ к вашей модели данных.
Особенности
Включите приложение администратора в вашем Панель управления приложением > Дополнительно > Приложение администратора.
Создайте администратора (имя пользователя/пароль).
Выберите поддомен для быстрого доступа к базе данных без кода.
Включите приложение администратора
﻿
После входа в систему ваши пользователи или команда могут просматривать, редактировать или удалять записи без написания кода. Этот подход поддерживает более быстрое управление данными и сотрудничество.
Заключение
В этом руководстве вы узнали как создать бэкенд для приложений React Native, используя Back4App. Это включало:
Создание безопасного бэкенда и реализация кроссплатформенной совместимости для вашего приложения React Native.
Настройка управления данными с помощью REST и GraphQL API.
Настройка ACL и CLP для защиты конфиденциальных данных.
Написание Cloud Code для серверной логики.
Обработка аутентификации пользователей и проверки электронной почты.
Управление хранилищем файлов с помощью прямых загрузок.
Планирование фоновых задач с помощью Cloud Jobs.
Использование Webhooks для интеграции внешних сервисов.
Изучение панели администратора Back4App для удобного администрирования базы данных.
С этими инструментами и функциями ваш проект React Native может вырасти в надежное и масштабируемое полностековое решение. Теперь вы готовы обрабатывать данные в реальном времени, обеспечивать безопасность пользователей и другие важные аспекты мобильных приложений. Продолжайте изучать Документацию Back4App, чтобы улучшить свои навыки и создавать мощные мобильные приложения на платформах iOS и Android.
Следующие шаги
Укрепите ваше приложение на React Native с помощью расширенной безопасности и контроля доступа на основе ролей.
Экспериментируйте с обновлениями в реальном времени с использованием Live Queries для приложений в реальном времени (если необходимо).
Интегрируйте внешние API и сервисы, включая платежные шлюзы или социальные входы.
Улучшите производительность через кэширование или оптимизацию облачных функций.
Углубитесь в официальную документацию Back4App для разблокировки дополнительных функций.
﻿
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать бэкенд для Xamarin?
Как построить бэкенд для Objective-C?