Подключение Firebase

Firebase закрывает сразу несколько задач приложения: вход пользователей, хранение файлов, база данных с обновлением в реальном времени. Ниже — три способа связать его с проектом FlutterFlow и настройки, которые понадобятся после подключения.

Создать проект Firebase из FlutterFlow

FlutterFlow умеет создавать проект Firebase сам — это три шага.

Шаг 1. Откройте настройки

Перейдите в Settings & Integrations > Project Setup > Firebase.

Шаг 2. Выберите регион

Нажмите + Create Project. В открывшемся окне подтвердите имя проекта и выберите регион Firebase — тот, что ближе к вашим пользователям.

Шаг 3. Подключите аккаунт Google

Нажмите Create или Sign in with Google. Если запросят разрешения для flutterflow.io, их нужно выдать — без них билдер не сможет создать и настроить проект за вас. Нажмите Select all, затем Continue.

Дальше FlutterFlow всё сделает сам в фоне.

Короткая демонстрация:

Когда процесс завершится, панель настроек Firebase будет выглядеть так:

Включите аутентификацию

Если планируете вход пользователей или Firebase Content Manager, включите аутентификацию в консоли Firebase и активируйте способ входа Email/Password.

Включите хранилище

Собираетесь хранить файлы в Firebase — нажмите Enable Storage и подтвердите включение в консоли Firebase.

Сгенерируйте файлы конфигурации

Конфигурационные файлы содержат ключи и настройки, по которым приложение находит ваш проект Firebase, — без них подключение не работает. Нажмите Auto Generate Config Files, затем Generate Files.

Подключить существующий проект вручную

Если проект Firebase уже есть, откройте Settings & Integrations > Project Setup > Firebase и запустите Firebase Setup Wizard. Дальше по шагам.

Настройка Firebase

В диалоге пролистайте до Setup Firebase, отметьте этот пункт и нажмите Next Step. Откроется вторая страница мастера. Прежде чем заполнять её, выдайте FlutterFlow доступ к проекту Firebase — как это сделать, ниже.

Выдайте FlutterFlow доступ к проекту

1. В консоли Firebase откройте Project Settings → Users and Permissions.

2. Нажмите Add Member справа сверху.

3. Добавьте firebase@flutterflow.io с ролью Editor, нажмите Done, затем Add Member.

   

4. На той же странице нажмите Advanced Permission Settings — маленькая синяя ссылка под таблицей. Откроется консоль Google Cloud в новой вкладке.

   

5. Найдите строку firebase@flutterflow.io и нажмите Edit principal — карандаш справа.

   

6. Нажмите + Add Another Role.

7. В поле Select A Role найдите Service Account User и выберите её.

   

8. Ещё раз нажмите + Add Another Role и добавьте роль Cloud Functions Admin.

Подключение и генерация файлов

1. В консоли Firebase откройте Project Settings.

2. В блоке Your Project найдите Project ID и скопируйте его.

3. Вернитесь во FlutterFlow, вставьте Project ID в диалог и нажмите Connect. При успешном подключении появится зелёная галочка.

4. В блоке Config Files выберите Generate Config Files, затем Generate Files.

Подключить Firebase при создании проекта

Если заранее известно, что проекту нужен Firebase, подключите его сразу.

Шаг 1. Создайте проект с включённым Firebase

При создании проекта оставьте включённой опцию Setup Firebase и нажмите Next Step.

Шаг 2. Подключитесь к Firebase

Чтобы FlutterFlow создал проект Firebase за вас, нажмите + Create Project и пройдите шаги отсюда. Если хотите подключить существующий проект — инструкция для ручного подключения.

Шаг 3. Включите аутентификацию

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

Учтите: тумблер только включает саму возможность. Логику входа придётся настроить отдельно.

Включение Firestore

Если бэкендом будет Firestore Database, его нужно включить отдельно — после этого коллекции и документы можно создавать прямо из FlutterFlow.

1. В консоли Firebase в левом меню под Build выберите Firestore Database, затем Create Database.

   

2. Задайте правила безопасности Firebase. Для быстрого старта подойдёт Start in test mode — нажмите Next.

   

   инфо

   Перед публикацией приложения правила нужно переписать под себя: правила безопасности Firestore.

3. Выберите расположение данных Firestore и нажмите Enable.

   

После этого откроется панель Cloud Firestore — можно создавать коллекции и документы.

Индексы

Часть запросов к Firestore не работает без индексов. Самые простые Firestore индексирует сам, но как только в запросе к коллекции сочетаются фильтрация и сортировка, нужен составной индекс — и Firestore выдаст предупреждение.

Индексы FlutterFlow создаёт за вас. Остаётся выкатить их в базу:

1. Откройте Firestore в меню слева.
2. Перейдите на вкладку Settings.
3. Пролистайте до секции Firestore Indexes и нажмите Deploy.

Включение биллинга

Для Cloud Functions — например, для оплаты через Braintree или push-уведомлений — и для Firebase Cloud Storage на проекте Firebase должен быть включён биллинг:

1. В консоли Firebase в левом меню под Build выберите Functions, затем Upgrade project.

2. Нажмите Purchase. Если биллинг включается впервые, откроется страница с платёжными данными; иначе можно сразу задать бюджет проекта. Расценки — на странице тарифов Firebase.