Введение

Добро пожаловать в мир Firebase и FlutterFlow! Firebase — это известная платформа разработки от Google, предлагающая широкий набор инструментов для усиления возможностей мобильных и веб‑приложений. В связке с FlutterFlow, мощным фреймворком для создания приложений, Firebase раскрывает новые возможности, делая разработку проще и эффективнее. Это подробное руководство проведет вас по всем нюансам интеграции Firebase с FlutterFlow, с упором на настройку надежной базы данных для вашего приложения.

Возможности Firebase в FlutterFlow

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

Изучить FlutterFlow

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

Первые шаги при настройке проекта Firebase

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

Чтобы создать проект, нажмите кнопку “+ Create Project”. Откроется окно, где вы подтвердите Project Name и выберете Firebase Project Region. Рекомендуем выбирать регион, исходя из локации ваших пользователей. После проверки данных нажмите “Create” или “Sign in with Google”, чтобы запустить создание проекта в Firebase. Обратите внимание: регион проекта нельзя изменить после создания.

Если будет запрошено, предоставьте доступ для ‘flutterflow.io’, чтобы сервис смог создать и настроить Firebase‑проект за вас. Можно выбрать все и нажать continue.

Включение и настройка Firebase Authentication и Firebase Content Manager

Чтобы использовать Firebase Authentication в приложении или работать с Firebase Content Manager, включите его в консоли Firebase и активируйте вход по ‘Email/Password’.

Настройка Firebase Storage и генерация конфигурационных файлов

Чтобы включить хранилище в Firebase, нажмите ‘Enable Storage on Firebase’ и активируйте его в консоли Firebase.

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

Убедитесь, что поле ‘Package Name’ заполнено.

Подключение нового проекта Firebase к существующему проекту FlutterFlow.

Чтобы добавить новый проект Firebase в существующий проект FlutterFlow, перейдите в Settings & Integrations > Project Setup > Firebase и следуйте инструкциям из раздела “Firebase Project Setup.”

Курс по FlutterFlow

Интеграция существующего проекта Firebase с проектом FlutterFlow.

Если у вас уже есть проект Firebase и вы хотите связать его с вашим проектом FlutterFlow, выполните следующие действия:

1. Откройте раздел Settings & Integrations в вашем проекте FlutterFlow.

2. Нажмите Project Setup, затем выберите Firebase.

3. Включите опцию Setup Firebase и запустите Firebase Setup Wizard.

4. Нажмите Next Step и внимательно следуйте инструкциям до завершения процесса.

Предоставьте доступ к вашему проекту."

Чтобы добавить firebase@flutterflow.io как “Editor” в ваш проект, выполните в консоли Firebase:

1. В левом меню перейдите в Project Settings --> Users and Permissions.

2. Нажмите “Add Member” в правом верхнем углу.

3. Укажите firebase@flutterflow.io, выберите роль “Editor”, затем нажмите “Done” и “Add Member.”.

4. На этой же странице нажмите “Advanced Permission Settings” (маленький синий текст под таблицей). Откроется Google Cloud console в новом окне.

5. Найдите строку с firebase@flutterflow.io и выберите “Edit principal” (значок карандаша справа).

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

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

8. Снова нажмите “+ Add Another Role”. В поле “Select A Role,” найдите “Cloud Functions Admin.” Выберите “Cloud Functions Admin”.

9. Нажмите “Save”.

Настройка базы данных Firestore

Настроить Firestore можно прямо из FlutterFlow — создавайте коллекции и документы, а затем сразу интегрируйте данные в приложение.

Создание коллекций и документов в Firestore

Перейдите в панель проекта Firebase, в левом меню выберите Firestore Database в разделе Build и нажмите Create Database (на скриншоте выделено красным).

Чтобы быстро стартовать с Firebase Security Rules, можно начать в test mode и нажать Next.

При настройке Firestore выберите локацию из выпадающего списка и включите сервис. Подробнее о регионах Firebase читайте по ссылке this link.

После завершения вы попадете в интерфейс Cloud Firestore. Здесь можно сразу приступать к созданию коллекций и документов!

Включение биллинга (опционально)

Как включить биллинг для проекта Firebase

Зайдите в панель проекта Firebase, выберите Build, затем Functions и нажмите Upgrade project.

Выберите нужный тариф. Если вы впервые подключаете биллинг, откроется страница для ввода платежной информации. Иначе можно задать бюджет проекта. Подробнее о стоимости Firebase смотрите this link.

Какие функции требуют включенного биллинга: Braintree и Push‑уведомления

Подключение биллинга в Firebase открывает доступ к возможностям за пределами бесплатного тарифа. Такие функции, как платежи через Braintree и Push‑уведомления, обычно требуют платного плана. Braintree обеспечивает проведение транзакций в приложении, а Push‑уведомления позволяют отправлять сообщения напрямую на устройства пользователей. Эти возможности повышают вовлеченность и монетизацию, но из‑за ресурсоемкости требуют апгрейда плана Firebase. Подробный список функций, нуждающихся в биллинге, смотрите в документации Firebase.

Научиться No-Code

Завершаем настройку

Выберите стартовые страницы и завершите настройку проекта

Функция “Select Initial Pages” позволяет задать первую страницу, которую видит пользователь при открытии приложения (Entry Page), и страницу после входа в аккаунт (Logged In Page). Если нажать “Unset,” откроется список шаблонов.

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

Чтобы пользователи могли входить в приложение с помощью разных методов (email/пароль, соцсети, телефон), включите опцию Enable Authentication. Обратите внимание: этот шаг только активирует аутентификацию.

Если нужно автоматически добавлять пользователя в коллекцию Firestore Database для хранения его данных (например, email), включите опцию Create User Collection.

После этого нажмите кнопку Start Building.

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

Как Firebase влияет на ваше приложение

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

Истории успеха на FlutterFlow

FlutterFlow помог запустить успешные приложения в разных отраслях. Вот несколько примеров:

Ab.Money: Разработанное агентством AppFul.Pro из Чехии приложение для медитаций, добившееся впечатляющих результатов. Спустя два месяца после перехода на FlutterFlow — топ категории «Образование» в App Store в Восточной Европе, рейтинг 4.8 в App Store и 5.0 в Google Play, более $100 000 выручки и 250 000 пользователей. Среди функций — медитации, аффирмации и кастомный аудиоплеер. В разработке сочетались нативные возможности FlutterFlow и пользовательский код для уникальных фич.

Kawenter: Приложение для путешествий от Мустафы Алвана, помогающее с оформлением eVisa/eTA: проверка статуса заявок, загрузка документов, скачивание виз. Дополнительно — проверка требований для поездок и бронирование перелетов и отелей.

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

Дополнительные материалы и подробные руководства

За пошаговыми инструкциями обращайтесь к официальной документации по настройке Firebase в FlutterFlow: FlutterFlow Documentation.

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

Также посмотрите наш Полный гайд по дропшиппингу: от идеи до реализации

Zerocoder: Гайд по дропшиппингу: от идеи до реализации

В стремительном мире бизнеса дропшиппинг — прибыльная модель, меняющая e‑commerce. Наш гайд проведет вас от идеи к успеху.

Zerocoder | No-Code MarketplaceGeorge Novik

Настройка Firebase в FlutterFlow: база данных для вашего приложения