Использование Flutter Flow для создания мобильного приложения проекта интеллектуального волонтёрства Do Nuts
Всем доброго дня! С вами Амалия Багирова, один из разработчиков DoNuts. DoNuts — это платформа интеллектуального волонтерства. Наших пользователей мы никак не ограничиваем — наш проект открыт для всех.
Миссия DoNuts – объединить возможности и потребности волонтеров, бизнеса, государства и НКО для решения социальных и бизнес-задач в России на единой цифровой площадке для всеобщего вовлечения общества в благотворительную деятельность. Принцип работы нашей платформы прост: заказчики обращаются к нам за выполнением задачи, а мы публикуем задачу на платформе, чтобы исполнители ее выполнили в нужный срок. Чтобы мотивировать исполнителей и придать ценность работе, мы создали свою собственную виртуальную валюту – «орешки». Орешки можно обменять на цифровые продукты или сделать пожертвование.
Но внутри команды мы наш проект называем просто «агрегатор добрых дел»:)
Когда мы начали разработку своего проекта, стало ясно, что для большего удобства клиентов и исполнителей нам нужно создать приложение. Однако, наблюдая за стоимостью и продолжительностью разработки iOS-приложений, мы решили обратиться к альтернативе — Flutter Flow.
Что такое flutter flow?
Flutter Flow представляет собой быстрый конструктор приложений с понятным интерфейсом. С его помощью мы смогли создать наш прототип iOS приложения всего за неделю. При этом не потратив ни копейки на разработку, потому что использовали бесплатный тариф.
Основное преимущество Flutter Flow в том, что его достаточно просто освоить даже людям, не знакомым с программированием. Наша команда не имела опыта разработки мобильных приложений, но все же мы были уверены, что сможем создать приложение самостоятельно, главное — следовать инструкциям.
С помощью инструментов Flutter Flow мы добавили в приложение не только основные функции, такие как запросы клиентов, предложения исполнителей и оповещения о статусе задачи, но и некоторые дополнительные возможности, такие как подборка самых популярных задач.
Самое главное — экономия огромного количества времени и денег для создания прототипа приложения. Мы могли фокусироваться на совершенствовании нашего проекта, а не тратить месяцы на разработку приложения.
Конечно, наш опыт может быть не самым репрезентативным, но мы полностью довольны результатом. Рекомендуем другим подобным проектам попробовать использовать Flutter Flow для разработки своих приложений, поскольку он позволяет экономить время, деньги и силы на создании приложений.
Шаг 1. Определяем минимальный функционал. Из чего должно состоять приложение?
Приложение состоит из стандартных экранов — логин/регистрация, личный кабинет, лидерборд и «стакан» задач.
Логин — экран для входа в систему. Пользователь вводит логин и пароль для входа в свой аккаунт. Если пароль или логин неверные, система выдает ошибку и предлагает попробовать снова.
Регистрация — экран для создания нового аккаунта. Пользователь заполняет форму с личными данными (имя, фамилия, электронная почта, пароль), после чего система отправляет письмо на указанный электронный адрес для подтверждения регистрации.
Онбординг — экран или серия экранов, которые помогают пользователю разобраться с системой и начать использовать ее. Например, онбординг может содержать приветственное видео, инструкции по работе с системой, подсказки о том, где находятся основные функции и т.д. Два свайпа влево — и ясна работа приложения и его ценность для клиента.
Личный кабинет — экран, который открывается после успешного входа в систему. В личном кабинете пользователь может произвести управление профилем — изменить личные данные, добавить аватар и т.д. Бублик прогресса демонстрирует текущий прогресс пользователя в задачах. Далее, на экране размещаются списки задач, которые находятся в работе, и список выполненных задач.
Минимальный функционал дает пользователям возможность зарегистрироваться в системе, входить в аккаунт, следить за своим прогрессом и просматривать свои задачи. Он также предлагает пользователям простой и интуитивно понятный интерфейс, который помогает использовать систему без лишних шагов и запутанных экранов.
Шаг 2. Реализация описанной архитектуры и плюсы использования FlutterFlow
Виджеты и Дерево виджетов
Одной из наиболее примечательных особенностей FlutterFlow является то, что это конструктор приложений с возможностью перетаскивания. Платформа предлагает широкий выбор шаблонов, готовых виджетов и интеграций, так что вы можете создать функциональное и безупречное приложение или веб-приложение без написания кода.
Во FlutterFlow виджет — это элемент пользовательского интерфейса, который помогает создавать макет страницы. Почти все, что видно на странице, является виджетом. Создаем пользовательский интерфейс, комбинируя виджеты в отношениях родитель-потомок. Text, Row, Column , Stack и Container — самые основные типы виджетов. В проекте, о котором идет речь в данном посте, использованы разные виджеты для более полной реализации возможного функционала.
Вообще, во Flutter Flow виджеты реализуются с помощью языка программирования Dart.
Далее я буду обсуждать код на языке Dart. Отсутствие знания этого языка программирования никак не повлияет на вашу возможность пользоваться Flutter Flow.
Разобраться в этом было необходимо, чтобы понять, как на языке программирования реализуется Flutter Flow и как можно улучшить приложение с точки зрения функциональности, дописав необходимый код. Экспортирую проект из Flutter Flow в код на Flutter SDK. Flutter Flow сгенерировал соответствующий код на Dart на основе нашего индивидуального интерфейса, который был создан с помощью Flutter Flow.
Продолжаю разработку после экспорта в среде разработки Flutter, добавляя логику и дополнительные функции.
Загляну под капот виджетов:
- Создание виджета.
Виджеты во Flutter Flow являются классами, наследующими от базового класса `StatelessWidget` или `StatefulWidget`.
import ‘package:flutter/material.dart’; Class MyWidget extends StatelessWidget < @override Widget build(BuildContext context) < return Container ( // Здесь код для настройки внешнего вида виджета ); >>
2. Значительное удобство виджетов заключается в том, что они могут переиспользоваться. В данном случае – это карточка задачи. Каждый раз, когда задача публикуется, дополнительный элемент-виджет создавать не нужно. Его можно просто переиспользовать, иначе просто не хватило бы ресурсов.
Однако не все так просто: переиспользование карточки не очевидно, ведь каждый раз там разный текст задачи, поэтому необходимо реализовать такой функционал, который бы позволил переиспользовать виджет с разным текстом.
Вот базовое решение задачи в виде кода Dart:
import ‘package:flutter/material.dart’; class MyWidget extends StatelessWidget < final String text; MyWidget(
Предположим, у меня есть следующие текстовые поля для каждой задачи: «Название», «Описание» и «Дата».
Опишу приблизительную самую базовую структуру карточки:
Card ListTile — Text (Название задачи) — Text (Описание задачи) — Text (Дата)
Как будет выглядеть переиспользуемая карточка на Dart:
В этом примере класс `TaskCard` является переиспользуемым виджетом, представляющим карточку задачи. Он принимает параметры `title`, `description`, `date`, которые будут отображаться в соответствующих текстовых виджетах.
В методе `build` класса `TaskCard`, создаю виджет `Card` с вложенным виджетом `ListTile`.Внутри `ListTile`виджет `Text` используется для отображения заголовка задачи (`title`), а виджет `Column` содержит текстовые виджеты для описания задачи (`description`) и даты(`date`).
Сложность задачи заключается в том, что текст, который задается для карточек является input предыдущей формы, которую заполняет клиент, чтобы задача была размещена.
То есть для решения этой задачи необходимо как-то хранить введенные пользователем данные в состоянии приложения и передавать их в виджет карточки задачи при создании каждой карточки.
Пример того, как на Dart можно передавать из формы данные в виджет карточки:
В этом примере есть два класса: `TaskCard` и `FormScreen`. Класс `TaskCard` представляет виджет карточки задачи, который принимает параметры `title`, `description`, `date`. Класс `FormScreen` является виджетом экрана с формой, в которой пользователь может вводить описание задачи.
В классе `FormScreen` есть состояние, в котором хранятся значения полей формы (`title`, `description`, `date`). При вводе пользователем в поле `Описание задачи` обновляю значение переменной `description` с помощью обратного вызова `onChanged`.
Когда пользователь отправляет форму, в методе `handleSubmit’ происходит обработка отправки формы и сохранение значений полей в состоянии приложения. В этом примере значения полей жестко заданы в методе `handleSubmit` для иллюстрации, но их можно заменить на реальные значения, полученные из формы.
Затем значение `description` передаеся из состояния в виджет `TaskCard` при создании карточки задачи. Таким образом, введенное пользователем описание будет отображаться в карточке задачи.
Важно отметить, что в этом примере используется класс `StatefulWidget` для создания экрана формы, чтобы иметь возможность обновлять состояние при вводе пользователя (приложение может содержать более сложную структуру состояний, в зависимости от требований).
Вы могли заметить, что в этой задаче «вложены» одни виджеты в другие. Теперь необходимо обратиться к еще одному важному концепту «Дерево виджетов».
Когда вы объединяете несколько виджетов или вкладываете их в другой виджет, они образуют дерево виджетов. Дерево виджетов представляет собой иерархическую структуру, в которой виджеты организованы вложенными друг в друга. Эта структура определяет компоновку и взаимосвязь виджетов в пользовательском интерфейсе приложения.
Доступ к нему можно получить из меню навигации (левая часть экрана). Это дает лучшее представление о том, сколько виджетов добавляется на страницу и как они добавляются (знание родителя или дочернего элемента любого виджета).
Как выглядит дерево виджетов в FlutterFlow:
FlutterFlow
FlutterFlow — онлайн-инструмент для создания нативных мобильных приложений. Инструмент позволяет компаниям создавать рабочие макеты или полноценные мобильные приложения без помощи разработчиков. Это могут быть корпоративные социальные сети, приложения для созданий расписаний, трекеры задач, карты и другие приложения. Созданное в FlutterFlow приложение будет автоматически оптимизированно под устройства на системах iOS и Android.
Для создания приложения в FlutterFlows пользователи могут воспользоваться готовыми шаблонами или создать его с нуля. Конструктор приложений позволяет создавать дизайн приложения, устанавливать логику элементов и переходов, вести базу данных пользователей. Приложения в FlutterFlows состоят из нескольких страниц, на каждой странице из панели инструментов пользователи могут перетаскивать и размещать элементы. Это могут быть кнопки, формы, изображения и видео, элементы навигации, текстовые блоки и интерактивные элементы. У элементов настраивается размер, цвета, формы, эффекты и их положение на странице. После создания дизайна и расположения элементов прописывается логика работы приложения.
Действия пользователей и их данные автоматически будут вноситься в базу данных. При создании приложения можно также настроить его API и встроить пользовательский код, чтобы увеличить функциональность. Готовые приложения компании могут публиковать на маркетплейсах платформ или скачать APK-файлом. После публикации их можно наполнять контентом и добавлять новые функции.
Особенности FlutterFlow
- Создание мобильных приложений и MVP-продуктов
- No-code-редактор для создания приложений
- Ведение базы данных
- Создания интеграций при помощи API
- Публикация на маркетплейсах приложений iOS и Android
- Возможность скачать исходный код созданного приложения
Интересные факты
- С помощью интеграции с Stripe, приложения, созданные на FlutterFlow, могут принимать платежи без написания дополнительного кода.
- FlutterFlow является активным участником сообщества Flutter и часто участвует в конференциях и мероприятиях, посвященных данной технологии.
- Сервис включает в себя реальный просмотр приложения, позволяя пользователям тестировать свои приложения прямо в браузере.
Обзор FlutterFlow — no-code-конструктора нативных приложений для iOS и Android
Разбираемся, как работает и кому подходит FlutterFlow — зерокодинговый конструктор приложений для Android и iOS.
Любому мобильному приложению нужен фронтенд, бэкенд, база данных, внутренняя логика и интеграции со сторонними сервисами — в традиционной разработке это реализуют целые команды. Они пишут код, компилируют его, тестируют приложения и размещают их в маркетах. На запуск продукта уходят месяцы и миллионы рублей.
Но есть инструменты, которые помогают разрабатывать приложения в разы дешевле, быстрее и без кода — это no-code-конструкторы. FlutterFlow как раз один из них.
Что такое FlutterFlow
FlutterFlow — это зерокодинговый конструктор мобильных приложений для Android и iOS. От других сервисов он отличается тем, что на выходе выдает код на фреймворке Flutter от Google. Нужно собрать приложение в визуальном редакторе, скачать его исходный код, скомпилировать файл и получить сборки, которые можно загрузить в App Store и Google Play. Для этого не обязательно уметь программировать.
Создатели FlutterFlow говорят, что сделать приложение в их сервисе можно в 10 раз быстрее, чем с программистами, потому что вы сразу делаете проект под iOS и Android.
Бесплатная авторизация по номеру телефона. «Из коробки» FlutterFlow позволяет бесплатно добавить вход по номеру мобильного. Ограничение — 10 000 авторизаций в месяц. При этом у конкурентов одна СМС стоит 2–3 рубля.
Интеграция с Firebase. Это среда, где работает бэкенд и хранится база данных приложения. Все бесплатно, если не превышать лимит в 5 ГБ и 50 000 обращений в сутки. Например, в Adalo база данных на 5 ГБ есть только в плане за 50 $ в месяц.
Легко подключить внешние API. Приложение нетрудно связать с мессенджерами, сервисами рассылок и тысячами других инструментов. Команда конструктора опубликовала видеоурок о работе с API.
Проект легко тестировать. Не обязательно проверять сборку сразу на Android или iOS — проверить UI и навигацию можно прямо в вебе без эмуляторов.
Доступен исходный код. При сборке проекта код можно выгружать, редактировать и автоматически экспортировать в 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 нет каких-либо ограничений.
FlutterFlow лучшая платформа для создания мобильных приложений
С легкостью создавайте красивые приложения, подключайте данные и внедряйте расширенные функции.
Визуальный конструктор
Простой конструктор с перетаскиванием позволяет строить в 10 раз быстрее.
Простая интеграция данных и API
Вы также можете использовать нашу поддержку API для подключения к любому стороннему API или вашему собственному серверу RESTful.
Многоязычные приложения
Вы также можете использовать нашу поддержку API для подключения к любому стороннему API или вашему собственному серверу RESTful.