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

Но есть инструменты, которые помогают разрабатывать приложения в разы дешевле, быстрее и без кода — это no-code-конструкторы. FlutterFlow как раз один из них.

Что такое FlutterFlow

FlutterFlow — это зерокодинговый конструктор мобильных приложений для Android и iOS. От других сервисов он отличается тем, что на выходе выдает код на фреймворке Flutter от Google. Нужно собрать приложение в визуальном редакторе, скачать его исходный код, скомпилировать файл и получить сборки, которые можно загрузить в App Store и Google Play. Для этого не обязательно уметь программировать.

Конструктор работает в браузере как Figma. У него больше 50 000 пользователей

Создатели FlutterFlow говорят, что сделать приложение в их сервисе можно в 10 раз быстрее, чем с программистами, потому что вы сразу делаете проект под iOS и Android.

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

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

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

При создании проекта FlutterFlow предлагает собрать приложение с нуля или выбрать шаблон

Бесплатная авторизация по номеру телефона. «Из коробки» FlutterFlow позволяет бесплатно добавить вход по номеру мобильного. Ограничение — 10 000 авторизаций в месяц. При этом у конкурентов одна СМС стоит 2–3 рубля.

Интеграция с Firebase. Это среда, где работает бэкенд и хранится база данных приложения. Все бесплатно, если не превышать лимит в 5 ГБ и 50 000 обращений в сутки. Например, в Adalo база данных на 5 ГБ есть только в плане за 50 $ в месяц.

В базу данных Firebase легко добавить новое поле и задать его тип — например, текст, изображение или дата

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

Проект легко тестировать. Не обязательно проверять сборку сразу на Android или iOS — проверить UI и навигацию можно прямо в вебе без эмуляторов.

При проверке приложения можно выбрать разные модели устройств, чтобы узнать, как приложение будет работать на девайсах Android и iOS

Доступен исходный код. При сборке проекта код можно выгружать, редактировать и автоматически экспортировать в GitHub. Каждая новая версия приложения — это отдельная ветка кода в GitHub.

Сколько стоит FlutterFlow

У FlutterFlow есть три тарифа — бесплатный, стандартный за 30 $ и профессиональный за 70 $ в месяц.

Бесплатный план подойдет, чтобы построить и протестировать свое приложение без настоящих данных. Его возможности:

  • визуальный конструктор;
  • 40 готовых виджетов;
  • интеграция с Firebase;
  • авторизация пользователей;
  • превью приложения;
  • кастомный код;
  • интеграции с несколькими платежными системами;
  • интеграция с Google AdMob.

В плане за 30 $ в месяц приложение уже можно собрать и протестировать с настоящей базой данных. Тариф позволяет собирать установочный APK-файл для Android и выгружать исходный код. Готовый код нужно компилировать и подписывать, поэтому сборку для iOS не получится сделать без MacBook.

В профессиональном плане доступны связки со сторонними сервисами через API, интеграция с GitHub, легко подключить Codemagic — систему для тестирования, контроля версий и сборки приложений для Android и iOS (с ней MacBook не понадобится). Там также есть визуальный редактор, чтобы напрямую редактировать данные в базе Firestore.

Чем FlutterFlow отличается от Adalo

По сравнению с Adalo, приложения на FlutterFlow работают намного быстрее. Вы получаете исходный код, а не готовые файлы проекта. У конструктора есть бесплатная база данных, при этом профессиональный план стоит на 130 $ дешевле.

Минусы тоже есть:

  • у FlutterFlow довольно высокий порог входа;
  • разработка на FlutterFlow занимает в 3–4 раза больше времени, чем на Adalo;
  • в конструкторе нет формул и математических операций, их нужно добавлять вручную.

Кейсы приложений на FlutterFlow

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

Вот примеры приложений на FlutterFlow:

Фриланс-биржа для зерокодеров. Сергей Горелов, эксперт, который помог редакции «Зерокодера» сделать этот обзор, собрал на FlutterFlow мобильное приложение для iOS и Android. В нем можно размещать и выполнять заказы на no-code-разработку. В проекте реализован вход и регистрация по номеру мобильного, авторизация через аккаунты Facebook, Apple ID и Google. Подробнее о бирже Сергей рассказал в своей статье на vc.ru.

Чат для айтишников. На сайте FlutterFlow есть демо чата для IT-специалистов. В нем реализована авторизация по email и гостевой вход. На основе этого шаблона можно за считанные минуты добавить в свое приложение функцию чата.

Где освоить FlutterFlow

Чтобы научиться воплощать свои идеи в жизнь без огромных бюджетов, приходи осваивать FlutterFlow на наш продвинутый курс по мобильным приложениям! Сейчас этот курс доступен и по клубному абонементу — восемь курсов по цене двух!

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

На официальном YouTube-канале инструмента есть 40 видеоуроков о том, как внедрять кастомный код, выкладывать приложения в App Store, добавлять монетизацию Google AdMob, внедрять авторизацию пользователей и многое другое.

Задать вопросы по FlutterFlow и пообщаться с экспертами можно в русскоязычном сообществе.

Вывод — кому подойдет FlutterFlow

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