Quickstarters
Как создать бэкенд для Ionic?

34min
Введение
В этом учебном пособии вы научитесь создавать полный бэкенд для приложения Ionic с использованием Back4App.
Мы рассмотрим управление базами данных, функции Cloud Code, REST и GraphQL API, аутентификацию пользователей, обработку файлов и многое другое.
Наша цель — показать вам как построить бэкенд для Ionic который безопасен, масштабируем и легко поддерживается.
Мы будем использовать интуитивно понятную среду Back4App, чтобы упростить настройку серверной части, избавив вас от необходимости вручную настраивать серверы или базы данных.
Вы научитесь основным инструментам, таким как планирование задач с помощью Cloud Jobs, применение продвинутых правил безопасности и интеграция вебхуков с другими сервисами.
К концу вы будете готовы расширить этот базовый бэкенд в готовую к производству систему для вашего приложения Ionic.
Предварительные требования
Учетная запись Back4App и новый проект Back4App
Начало работы с Back4App.
Если у вас нет учетной записи, создайте ее бесплатно и следуйте приведенному выше руководству, чтобы настроить ваш проект.
Базовая среда разработки Ionic
Убедитесь, что у вас установлен Ionic CLI и вы можете создать и запустить приложение Ionic.
Установленный Node.js (версия 14 или выше)
Скачать Node.js для управления зависимостями и сборки вашего проекта.
Знание JavaScript/TypeScript и концепций Ionic
Официальная документация Ionic.
Хорошее понимание структур, компонентов и хуков жизненного цикла Ionic будет полезным.
Шаг 1 – Создание нового проекта на Back4App и подключение
Войдите в свою учетную запись Back4App.
Создайте новое приложение с помощью кнопки “Новое приложение” на вашей панели управления Back4App.
Назовите ваше приложение (например, “Ionic-Backend-Tutorial”).
﻿
Этот проект Back4App является основой для вашего бэкенда. В отличие от использования клиентского SDK Parse, этот учебник продемонстрирует, как делать вызовы через REST и GraphQL из вашего приложения Ionic.
Получение ваших учетных данных
В панели управления Back4App перейдите к Настройки приложения или Безопасность и ключи.
Запишите ваш Идентификатор приложения, Ключ REST API, и Конечную точку GraphQL. Вам понадобятся эти данные для отправки запросов из вашего Ionic приложения.
Шаг 2 – Настройка базы данных
Хорошо структурированная база данных является основой каждого приложения. Панель управления Back4App упрощает проектирование моделей данных и управление отношениями.
1. Создание модели данных
Перейдите в раздел База данных в вашей панели управления Back4App.
Создайте новый класс (например, “Todo”) и добавьте столбцы (например, title как строку, isCompleted как логическое значение).
Создать новый класс
﻿
2. Создание модели данных с использованием AI-агента
Откройте AI Agent из вашей панели управления Back4App.
Опишите вашу желаемую схему, например, “Создать класс Todo с полями для заголовка (String) и isCompleted (Boolean).”
AI Agent автоматически сгенерирует схему.
﻿
3. Чтение и запись данных с использованием REST API
Из вашего кода Ionic вы можете выполнять HTTP-запросы. Например, чтобы создать 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
﻿
Чтобы получить все 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
﻿
Вы можете интегрировать эти вызовы, используя fetch, Axios, или любую библиотеку HTTP-клиента в сервисах или компонентах вашего приложения Ionic.
4. Чтение и запись данных с использованием GraphQL API
Аналогично, вы можете отправлять мутации и запросы GraphQL из вашего приложения Ionic. Например, чтобы создать новый Todo:
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
    }
  }
}
﻿
Пример вызовов REST или GraphQL можно разместить в файле провайдера/сервиса в вашей структуре Ionic, а затем вызывать из ваших страниц.
5. Работа с живыми запросами (по желанию)
Живые запросы предоставляют обновления данных вашего приложения в реальном времени, хотя они требуют SDK Parse или специализированного подхода к подписке. Если вам нужны данные в реальном времени, вы можете включить Живые запросы в настройках вашего сервера Back4App. Обычно вы будете использовать соединение WebSocket, чтобы отслеживать изменения в ваших классах. Однако для стандартных вызовов на основе HTTP вы можете периодически запрашивать конечные точки REST или GraphQL.
Шаг 3 – Применение безопасности с помощью ACL и CLP
Краткий обзор
ACL (Списки контроля доступа) позволяют вам устанавливать разрешения на чтение/запись для отдельных объектов. CLP (Разрешения на уровне класса) позволяют вам управлять более широким доступом на уровне класса. Эти функции имеют решающее значение для защиты частных данных и обеспечения того, чтобы только авторизованные пользователи могли изменять информацию.
Настройка разрешений на уровне класса
В вашей панели управления Back4App перейдите в База данных > Разрешения на уровне класса.
Настройте ваши классовые параметры по умолчанию (например, только аутентифицированные пользователи могут создавать новые Todos).
Настройка ACL
При создании или обновлении записей вы можете передать ACL поля через 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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Для получения дополнительной информации смотрите Руководство по безопасности приложений.
Шаг 4 – Написание функций облачного кода
Почему облачный код
Облачный код позволяет вам выполнять серверный JavaScript для таких задач, как валидация данных, триггеры или интеграции. Вы можете создавать пользовательские конечные точки для централизованной логики, что особенно полезно, если вы хотите держать код вне клиента.
Пример функции и триггеров
В вашем main.js на стороне сервера (Back4App) вы можете написать:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Разверните это через Back4App CLI или в разделе Облачный код на панели управления.
Вызов облачного кода из Ionic
Вы можете отправить POST-запрос:
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
Вы получите ответ в формате JSON, содержащий любые возвращенные данные или сообщение об ошибке.
Модули NPM
Вы можете установить пакеты, такие как axios, в вашей среде Cloud Code для интеграции сторонних сервисов. Включите их в main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Разверните и вызывайте его так же, как и любую функцию Cloud Code.
Шаг 5 – Настройка аутентификации
Включение аутентификации пользователей
Регистрация и вход пользователей могут быть выполнены с помощью REST-запросов к классу User. Например, чтобы зарегистрироваться:
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": "jon",
    "password": "somePassword",
    "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": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Вход
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  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" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
В случае успеха вы получите sessionToken. Храните его в безопасности и включайте в заголовки будущих запросов для аутентифицированных операций.
Социальные входы
Вы можете настроить социальные входы (например, Google или Facebook), настроив поток OAuth через Back4App или используя внешних провайдеров. Обратитесь к Документации по социальным входам для подробных шагов.
Шаг 6 – Обработка хранения файлов
Настройка хранения файлов
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: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.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/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
Ответ будет включать URL файла, который вы можете сохранить в классе:
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Соображения безопасности
Вы можете включить правила безопасности файлов в Настройках сервера, чтобы требовать аутентификацию или ограничить загрузку файлов для определенных ролей.
Шаг 7 – Подтверждение электронной почты и сброс пароля
Почему важна проверка
Подтверждение электронной почты обеспечивает законность пользовательских адресов электронной почты. Сброс пароля предоставляет безопасный способ восстановления утерянных учетных данных. Это помогает поддерживать доверие и правильное управление пользователями в вашем приложении Ionic.
Настройка панели управления Back4App
Перейдите в Настройки приложения > Настройки электронной почты.
Включите Подтверждение электронной почты.
Настройте шаблоны электронной почты для подтверждения и сброса пароля.
Шаг 8 – Планирование задач с помощью облачных заданий
Что делают облачные задания
Облачные задания позволяют вам планировать повторяющиеся задачи, такие как очистка данных или отправка сводных электронных писем. Вы пишете их в вашем main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
После развертывания:
Перейдите в Настройки приложения > Настройки сервера > Фоновая работа.
Запланируйте cleanupOldTodos для ежедневного выполнения.
Планирование облачного задания
﻿
Шаг 9 – Интеграция вебхуков
Вебхуки позволяют отправлять данные во внешние сервисы, когда в вашем проекте Back4App происходят определенные события. Если вашему приложению Ionic нужно инициировать действие в Stripe или Slack после создания новой записи, вы можете использовать вебхуки для автоматизации этого.
Перейдите в Дополнительно > Вебхуки в вашей панели управления Back4App.
Добавьте новый вебхук и установите его конечную точку (например, https://your-service.com/webhook-endpoint).
Выберите событие (например, “После сохранения” в классе Todo).
Добавление вебхука
﻿
Вы также можете инициировать исходящие запросы из триггеров Cloud Code в main.js с использованием стандартных HTTP библиотек.
Шаг 10 – Изучение панели администратора Back4App
The Back4App Admin App является более простым интерфейсом для нетехнических заинтересованных сторон. Он предоставляет простой способ выполнения операций CRUD с вашими классами, не заходя в основной интерфейс Parse Dashboard.
Включение Admin App
В панели управления перейдите в Дополнительно > Admin App.
Нажмите Включить Admin App и создайте администратора.
Выберите поддомен для доступа к вашему административному интерфейсу.
Включить Admin App
﻿
﻿
Эта панель помогает вам управлять данными без написания запросов, что делает ее идеальной для клиентов или членов команды, которые предпочитают графический интерфейс.
Заключение
Завершив этот гид о как построить бэкенд для Ionic, вы:
Создали безопасный бэкенд на Back4App с надежными моделями данных и отношениями.
Интегрировались с REST и GraphQL API для чтения и записи данных из вашего Ionic приложения.
Реализовали безопасность с помощью ACL и CLP.
Развернули Cloud Code для пользовательской логики и триггеров.
Настроили аутентификацию пользователей и хранение файлов.
Настроили Cloud Jobs для планирования задач.
Использовали вебхуки для внешних интеграций.
Изучили панель администратора для упрощения администрирования данных.
С этой основой ваше Ionic приложение может развиваться в готовую к производству платформу. Добавьте больше логики, подключите сторонние API или уточните правила безопасности, чтобы соответствовать вашему случаю использования.
Следующие шаги
Улучшите вашу производственную сборку внедрением кэширования, ролевого доступа и мониторинга производительности.
Интегрируйте расширенные функции такие как запросы в реальном времени или многофакторная аутентификация.
Консультируйтесь с официальной документацией Back4App для глубокого изучения аналитики, журналов и настройки производительности.
Изучите другие учебники которые демонстрируют приложения для чата, интеграции IoT или функции на основе местоположения в сочетании с надежными бэкенд-сервисами Back4App.
﻿
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как построить бекенд для Symfony?
Как создать бэкенд для Dart?