Введение
Добро пожаловать в мир Firebase и FlutterFlow! Firebase — это известная платформа разработки от Google, предлагающая широкий набор инструментов для усиления возможностей мобильных и веб‑приложений. В связке с FlutterFlow, мощным фреймворком для создания приложений, Firebase раскрывает новые возможности, делая разработку проще и эффективнее. Это подробное руководство проведет вас по всем нюансам интеграции Firebase с FlutterFlow, с упором на настройку надежной базы данных для вашего приложения.
Возможности Firebase в FlutterFlow
Firebase — мощный инструмент с отличной интеграцией. В 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.”
Интеграция существующего проекта 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.
Завершаем настройку
Выберите стартовые страницы и завершите настройку проекта
Функция “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 на новый уровень.
Также посмотрите наш Полный гайд по дропшиппингу: от идеи до реализации
