В этой статье хочу показать как создать свое приложение FlutterFlow, подключить его к Firebase и сделать необходимые настройки.
Видеоурок как создать настроить приложение FlutterFow.
Авторизуйтесь на сайте FlutterFlow по этой ссылке https://flutterflow.io/
Так выглядит личный кабинет разработчика. Нажмите справа вверху кнопку Create New, чтобы создать новый проект.
Появится вот такое окно в котором нужно ввести название вашего проекта. Чтобы нам быть на одной волне с вами давайте назовем его firstApp.
Во FlutterFlow уже есть несколько настроенных шаблонов которыми вы при необходимости сможете воспользоваться. Но мы будем идти с чистого листа чтобы создать проект и шаг за шагом знакомиться с функционалом FlutterFlow.
Ввели название проекта? Теперь нажимайте кнопку Create Blank.
Далее FlutterFlow предоставит нам окно настроек которые мы выполним чтобы подключить наш проект к Firebase.
Что такое Firebase?
Firebase — это облачная платформа от Google, предоставляющая набор инструментов для разработки мобильных и веб-приложений, включая базы данных, аутентификацию, аналитика и хостинг.
Сейчас мы подробно на этом останавливаться не будем, продолжим настройку нашего проекта.
В открывшемся окне нажимаем на кнопку Next Step.
На этом этапе нам нужно создать проект Firebase который будет подключен к нашему проекту FlutterFlow.
Нажимаем кнопку Create Project.
Здесь нам нужно выбрать регион сервера Firebase который ближе всего располагается к вашему будущему проекту. Внимательно посмотрите доступные варианты так после этого поменять регион сервера Firebase уже не будет возможным.
Теперь используя учетную запись Google соедините свой проект FlutterFlow с Firebase
Начнется создание проекта Firebase о чем говорит надпись на кнопке Creating Project. Процесс не очень быстрый, наберитесь терпения, может занять пару минут.
Если все прошло успешно появится зеленая надпись Firebase Project Created. Что в переводе означает Проект Firebase создан. Отлично. Это то что нам нужно.
Теперь сделаем несколько настроек.
Нажмите на кнопку Enable Auth On Firebase.
После чего откроется страница Firebase. Нажимайте на кнопку Get started.
Что это за страница?
Когда мы далее будем разрабатывать приложение, перед тем как клиенты начнут им пользоваться необходимо будет зарегистрироваться в приложении. А способ как это сделать мы настраиваем именно в этом разделе Firebase.
Как видите здесь можно включить несколько способов.
- Вход по email
- Вход по номеру телефона
- Авторизация через соцсети
В нашем случаем выберем авторизацию с помощью email. Нажимайте на нее и на следующем шаге активируйте оба переключателя как показано на иллюстрации и нажмите кнопку Save чтобы продолжить.
Эту часть настроек мы завершили, можете закрыть эту вкладку или оставить ее - решайте сами, это уже неважно. Теперь вернитесь на вкладку FlutterFlow, нам еще кое-что нужно включить.
Теперь нажмите кнопку Enable Storage on Firebase.
Откроется вот такая страница. Жмем кнопку Get started.
На этом шаге включаем режим Start in test mode и жмем кнопку Next.
На этом экране нажмите кнопку Done.
Пару слов что это мы такое сделали. Когда мы будем разрабатывать приложение мы научимся загружать фотографии. Так как раз эти файлы и будут храниться в Storage.
Теперь возвращайтесь обратно на вкладку FlutterFlow. Осталось совсем немного чтобы завершить первичную настройку проекта.
Теперь нажмите на кнопку Complete Firebase Setup.
В следующем окне нажмите на кнопку Generate Files.
Этот процесс займет некоторое время. Не закрывайте это окно и дождитесь когда этот процесс завершится.
Теперь мы на финишной прямой. Наконец-то))
Нажмите на кнопку Start Building чтобы завершить процесс настройки Firebase.
После этого нам откроется окно со всеми инструментами для создания мобильного приложения на конструкторе FlutterFlow.
Поздравляю!!!
Вы только что прошли минимально необходимые шаги для первичной настройки своего проекта.
Теперь останется самое простое - создать мобильное приложение )))
Для этого в следующих статьях мы будем постепенно знакомиться с интерфейсом конструктора FlutterFlow. Посмотрим как здесь все устроено, что для чего нужно, а далее будем изучать как с помощью этих инструментов создать приложение.
Итак подытожим.
В этой статье мы рассмотрели как пройти первые шаги: по регистрации своего проекта во FlutterFlow, как подключить Firebase и сделать в нем базовые настройки для авторизации пользователей - мы выбрали вход по емейл, и активировали Storage в котором будут храниться файлы нашего будущего приложения.
Если остались вопросы или вам необходимо разработать мобильное приложение - смело обращайтесь, поможем.
Также вы можете оставлять комментарии на какие темы нужно записать новые уроки.
На этом все. Пока.
Здесь ссылка на материал где мы рассмотрим из чего состоит интерфейс FlutterFlow
