Быстрые стартеры

Как создать бэкэнд для Flutter?

40min

Введение

В этом учебном пособии вы узнаете как создать бэкенд для Flutter с использованием Back4app, надежного и открытого сервиса бэкенда (BaaS).

Мы пройдем через интеграцию основных функций Back4app — таких как управление базами данных, облачные функции, RESTful API, GraphQL API и аутентификация пользователей — в ваш проект Flutter.

Вы также узнаете, как обрабатывать обновления в реальном времени с помощью Live Queries. Используя мощные серверы бэкенда Back4app, вы можете избежать значительной части ручной настройки и сосредоточиться на создании динамичного приложения Flutter.

Этот гид покажет разработчикам Flutter, как настроить безопасную, масштабируемую и надежную структуру бэкенда, которая без усилий взаимодействует с вашей клиентской стороной.

Мы также подчеркнем преимущества того, что Back4app берет на себя тяжелую работу — такую как хостинг, аутентификация пользователей и логика сервера — чтобы вы могли воспользоваться такими функциями, как автоматическое масштабирование, повышенная безопасность и упрощенное обслуживание.

Если у вас есть проект Flutter и вы хотите сэкономить множество часов на настройке бэкенда, это правильное место для начала.

К концу этого учебного пособия вы поймете, какой тип бэкенда вы можете создать с помощью Back4app, и будете готовы расширить свои бэкенд-сервисы для готового к производству приложения или интегрировать более сложные функции, такие как внешние API и продвинутая аутентификация пользователей.

Давайте начнем!

Предварительные требования

Чтобы завершить этот учебник, вам потребуется:

  • Учетная запись Back4app и новый проект Back4app Начало работы с Back4app. Если у вас нет учетной записи, вы можете создать ее бесплатно. Следуйте приведенному выше руководству, чтобы подготовить ваш проект.
  • Базовая среда разработки Flutter Убедитесь, что у вас установлен и настроен Flutter SDK . Также убедитесь, что у вас есть IDE (например, Android Studio или VS Code), настроенная для Flutter.
  • Среда программирования Dart Обычно она устанавливается вместе с Flutter. Убедитесь, что вы можете импортировать пакеты dart без ошибок.
  • Знание основ Flutter Официальная документация Flutter. Если вы новичок в Flutter, ознакомьтесь с официальной документацией или учебником для начинающих перед началом.

Убедитесь, что у вас есть все эти предварительные требования. Настройка вашего проекта Back4app и вашей локальной среды Flutter поможет вам легче следовать инструкциям.

Шаг 1 – Создание нового проекта на Back4App и подключение

Создать новый проект

Первый шаг в создании вашего бэкенда Flutter на Back4app – это создание нового проекта. Если вы еще не создали его, выполните следующие шаги:

  1. Войдите в свою учетную запись Back4app.
  2. Нажмите кнопку “Новое приложение” в вашей панели управления Back4app.
  3. Дайте вашему приложению имя (например, “Flutter-Backend-Tutorial”).
Document image


После создания проекта вы увидите его в своем дашборде Back4app. Этот проект станет основой для всех конфигураций бэкенда, которые мы обсудим.

Установите и инициализируйте Parse SDK в вашем приложении Flutter

Back4app полагается на платформу Parse для управления вашими данными, обновлениями в реальном времени, аутентификацией пользователей и многим другим. Чтобы подключить ваш проект Flutter к Back4app, выполните следующие шаги:

  1. Добавьте Parse Flutter SDK в ваше приложение:
YAML

  1. Импортируйте пакет Parse в ваш main.dart (или где бы вы ни инициализировали ваше приложение):
Dart


В вашей панели управления Back4app перейдите в раздел Безопасность и ключи, чтобы найти ваш Идентификатор приложения, Ключ клиента, и URL-адрес сервера Parse. Замените заполнители выше на свои собственные учетные данные. С этой инициализацией каждый запрос из вашего приложения Flutter безопасно направляется к вашему экземпляру Back4app.

Помните, что мастер-ключ никогда не должен использоваться на стороне клиента вашего приложения Flutter. Если вам нужен мастер-ключ, храните его на сервере или в безопасной среде.

Шаг 2 – Настройка базы данных

Создание модели данных

Как только ваше приложение Flutter подключится к Back4app, вы можете начать проектировать схему вашей базы данных. Вы можете сделать это вручную из панели управления Back4app:

  1. Перейдите в раздел “База данных” в вашей панели управления.
  2. Создайте новый класс (например, “Todo”), и добавьте соответствующие столбцы (например, заголовок, завершено).
Создать новый класс
Создать новый класс


Back4app также предоставляет AI-агента для помощи в автоматическом создании схемы:

  1. Откройте AI-агента из вашей панели управления приложением или меню.
  2. Опишите вашу модель данных простым языком (например, “Создайте новое приложение ToDo с полной схемой класса.”).
  3. Позвольте AI-агенту создать схему для вас.
Document image


Это упрощает настройку архитектуры данных. Если вы хотите, чтобы поля создавались автоматически, вы можете просто начать сохранять объекты из вашего приложения — Parse поддерживает создание схемы на лету.

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

Если вы решите использовать AI-агента Back4app, просто предоставьте короткое описание, и он создаст или предложит схему для вас. Это отличный способ ускорить начальную фазу моделирования данных вашего проекта на Flutter.

Чтение и запись данных с использованием Flutter Parse SDK

Ниже приведен простой пример, демонстрирующий, как создавать и извлекать объекты с использованием Parse Flutter SDK.

Dart


С помощью этого вы можете напрямую взаимодействовать с вашей базой данных Back4app из вашего приложения Flutter. Просто вызовите createTodoItem('Покормить кота', false) или fetchTodos() для записи и чтения данных.

Чтение и запись данных с использованием REST API

Если вам нужно интегрироваться с другими сервисами или вы предпочитаете более традиционный подход, вы все равно можете использовать REST API Back4app:

Bash


Чтение и запись данных с использованием GraphQL API

Back4app также предлагает конечную точку GraphQL:

GraphQL


Это дает вам гибкость для создания любого подхода, который лучше всего подходит для вашего приложения Flutter.

Работа с живыми запросами

Back4app предоставляет живые запросы, чтобы вы могли получать обновления данных в реальном времени. Включите живые запросы в панели управления Back4app (Настройки сервера), а затем используйте клиент Parse LiveQuery для Flutter.

Dart


С этой подпиской вы можете слушать изменения данных по мере их появления. Это фантастично для создания совместных приложений, где несколько пользователей видят обновления данных в реальном времени. Как только будет вызван горячий перезагруз, ваша подписка останется активной, если приложение не перезапустится.

Шаг 3 – Применение безопасности с помощью ACL и CLP

Что такое ACL и CLP?

Back4app использует ACL (Списки управления доступом) и CLP (Разрешения на уровне класса) для ограничения того, кто может читать или записывать данные как на уровне объектов, так и на уровне классов. Этот уровень обеспечивает защиту ваших данных от несанкционированного доступа.

Настройка разрешений на уровне класса

  1. В вашей панели управления Back4app перейдите к База данных и выберите класс (например, “Todo”).
  2. Перейдите к Разрешениям на уровне класса.
  3. Установите значения по умолчанию (например, только аутентифицированные пользователи могут создавать новые объекты).
Document image


Настройка ACL в коде

Вы также можете применять ACL на уровне объекта из кода Flutter:

Dart


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

Шаг 4 – Написание функций облачного кода

Почему облачный код?

Cloud Code позволяет вам выполнять серверную логику без необходимости вручную настраивать какие-либо серверы. Это идеально подходит для проверки данных, интеграции с внешними сервисами или соблюдения определенных правил в вашем бэкенде как услуге (BaaS).

Пример функции

Вот пример облачной функции, которая вычисляет длину текста:

JS


Вы можете развернуть этот код через Back4app CLI или в панели управления вашего приложения в разделе Cloud Code.

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

Используя Back4app CLI:

Bash


Используя панель управления:

  1. В панели управления вашего приложения перейдите в Cloud Code > Functions.
  2. Вставьте код JavaScript.
  3. Нажмите Deploy.
Document image


Вызов Cloud Code из Flutter

Dart


Этот безопасный подход гарантирует, что чувствительная логика остается на сервере, в то время как ваше приложение Flutter просто отправляет запросы.

Шаг 5 – Настройка аутентификации

Включить аутентификацию пользователей

Back4app использует класс Parse.User для обработки регистрации и входа пользователей. По умолчанию Parse заботится о хэшировании паролей, токенах сессий и безопасном хранении.

Dart


Социальный вход

Back4app поддерживает интеграции с Google, Apple, Facebook и другими. У каждого провайдера есть свой подход и могут потребоваться дополнительные библиотеки (например, для входа через Facebook или Google). Затем вы можете вызвать:

Dart


Настройте параметры в соответствии с документацией провайдера.

Шаг 6 – Обработка хранения файлов

Настройка хранения файлов

Вы можете хранить изображения, документы или другие медиафайлы, используя ParseFile. Back4app защищает эти файлы и предоставляет URL для их получения.

Dart


Соображения безопасности

Вы можете определить, кто имеет доступ к файлам (публичные, аутентифицированные пользователи или ограниченные), комбинируя безопасность на уровне файлов с ACL. Это гарантирует, что ваши данные файла остаются в безопасности.

Шаг 7 – Подтверждение электронной почты и сброс пароля

Почему это важно

Подтверждение электронной почты подтверждает, что пользователь владеет указанным адресом электронной почты, в то время как процессы сброса пароля улучшают пользовательский опыт и безопасность.

Конфигурация панели управления

  1. Перейдите в Настройки электронной почты вашего приложения на панели управления Back4app.
  2. Включите Проверку электронной почты и Сброс пароля.
  3. Настройте шаблоны электронной почты или ваш собственный домен, если это необходимо.

Эти настройки позволяют вашему приложению Flutter автоматически обрабатывать проверки прав пользователя и восстановление пароля.

Реализация в Flutter

Dart


Шаг 8 – Планирование задач с помощью облачных заданий

Облачные задания

Вам может понадобиться запланировать повторяющиеся задачи (например, очистку старых данных или отправку периодических электронных писем). Облачные задания позволяют делать именно это:

JS


Разверните этот код, затем перейдите в Настройки приложения > Настройки сервера > Фоновая работа в вашей панели управления Back4app, чтобы запланировать его.

Запланировать облачную задачу
Запланировать облачную задачу


Шаг 9 – Интеграция вебхуков

Что такое вебхуки?

Вебхуки позволяют вашему приложению Back4app отправлять HTTP-запросы на внешний сервис, когда происходят определенные события (например, сохранение нового объекта). Это идеально подходит для интеграции с инструментами третьих сторон.

  1. Перейдите в Дополнительно > Вебхуки в вашей панели управления Back4app и Добавить вебхук.
  2. Установите вашу конечную точку и триггеры (например, “Новая запись в Todo”).
Добавление вебхука
Добавление вебхука


Вы также можете вручную настроить вебхуки в облачном коде, отправляя HTTP-запросы в триггерах beforeSave или afterSave.

BeforeSave WebHook
BeforeSave WebHook


Шаг 10 – Изучение панели администратора Back4App

Где это найти

Приложение Back4app Admin App – это удобный интерфейс, который позволяет не техническим членам команды управлять данными (операции CRUD, задачи с данными и т. д.) без необходимости открывать панель управления Parse.

  1. Перейдите в App Dashboard > More > Admin App.
  2. Нажмите Enable Admin App.
Enable Admin App
Enable Admin App


Вы создадите администратора, выберете поддомен и войдете в систему с новыми учетными данными. Приложение Admin помогает быстро просматривать и изменять данные.

Заключение

В этом учебном пособии вы узнали как создать бэкенд для Flutter с использованием Back4app и Parse Flutter SDK.

Вы создали классы, хранили данные, настраивали запросы в реальном времени, применяли безопасность с помощью ACL и CLP, писали облачные функции, планировали задачи, интегрировали вебхуки и исследовали панель администратора Back4app.

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

Финальная строка, которую вы имеете сейчас, — это функционирующий и безопасный бэкенд, который использует RESTful API, аутентификацию пользователей и простую манипуляцию данными.

Вы можете интегрировать более продвинутые функции в любое время — такие как дополнительные облачные функции, вызовы внешних API или пользовательские роли.

Следующие шаги

  • Подготовьтесь к производству: Реализуйте продвинутый кэширование, аналитику или управление доступом на основе ролей.
  • Расширьте свое приложение: Интегрируйте сторонние сервисы или создайте больше облачных функций для специализированной бизнес-логики.
  • Консультируйтесь с документацией Back4app: Изучите продвинутую безопасность, настройку производительности, анализ логов и многое другое.
  • Узнайте больше: Ознакомьтесь с учебными пособиями по приложениям для живого чата, услугам на основе местоположения или более сложным структурам данных. Объедините их с вашим проектом Flutter для реальных случаев использования.

Продолжая уточнять эту настройку, вы преобразите свое приложение Flutter в мощное, масштабируемое решение, построенное на надежном бэкенд-сервисе. Удачного кодирования!