Приложения Flutter - начало работы с новой кроссплатформенной платформой Google

Вплоть до недавнего времени Flutter была еще одной новинкой, новым игроком в разработке кроссплатформенных приложений. Как опытный разработчик iOS, я не стал задумываться над этим. Через несколько месяцев после релиза - кажется, все говорят об этом. «Все является виджетом», «Красивые нативные приложения в рекордно короткие сроки» и несколько других модных фраз, казалось, дали Google создание довольно хорошего маркетингового старта. Естественно, наша компания, которая всегда была в курсе последних тенденций, сразу же взялась за дело и начала работу по созданию команды Flutter. Вот краткое изложение моей первой серьезной попытки использования DART и фреймворка на основе виджетов Flutter.  

Первый шаг - установка 

Настройка Flutter на MacOS довольно проста, и официальный веб-сайт Flutter объясняет процесс установки macOS шаг за шагом. Будучи разработчиком Swift, у меня уже были встроенные инструменты командной строки Xcode и Xcode, что сделало процесс еще быстрее. 

Мне пришлось установить Android Studio (также можно использовать код Visual Studio), чтобы иметь возможность кодировать на языке Дарт - Флаттера. Я также должен был добавить ADB, чтобы мои подключенные устройства Android были видны. Для IDE я решил попробовать Android Studio, так как когда-то писал несколько приложений «Здравствуй, мир» для Android, поэтому независимо от изменений на сегодняшний день среда была, по крайней мере, знакома. 

В общем, установка заняла у меня около двух часов, и я смог создать простой демонстрационный проект Flutter  и запустить его на физических устройствах Android и IOS, подключенных к моему Mac через USB.

Учебники 

Официальный сайт Flutter богат примерами кода для начинающих, которые объясняют, как должна выглядеть правильная работа с Dart. Моей первой реакцией была небольшая паника, поскольку то, что я видел, сильно отличалось от того, к чему я привык. Я не «чувствовал» код, не было классов, методов или переменных на виду - конечно, они были там, но синтаксис значительно отличался от того, к чему я привык в Swift. Если вам нравится смотреть на новые языки программирования, я полагаю, вы знаете, о чем я говорю - все казалось немного странным - другой редактор, другое цветовое кодирование и, очевидно, - совершенно другой язык, который нужно выяснить.

Во время чтения / выполнения учебных пособий я научился настраивать представления с использованием базовых виджетов Flutter - для размещения кнопок и меток, открытия следующего представления и т. Д. Все это делается из кода, поэтому на данный момент простой способ отделить код представления от бизнес-логики все еще в моем списке дел.

Приложение First Flutter - концепция

Прежде чем приступить к написанию проекта, необходимо провести некоторые исследования по основам. Для новичка Флаттера объем информации, который нужно усвоить, весьма значителен, но вы не можете постоять за себя. Быстро растущее Общество Flutter предлагает большую поддержку, и там, где отсутствует официальная страница Flutter, вы можете обратиться к репозиториям git, спискам ошибок или Stackoverflow . Из огромного количества тем и проблем, связанных с флаттером, вы можете увидеть и без того огромный и постоянно растущий интерес к флаттеру / дартсу.

Для моего первого проекта мне нужно было узнать немного о:

  • асинхронное получение / публикация
  • форма входа
  • профиль пользователя с историей
  • форма обработки изображений
  • воспроизводство звуков
  • показ предупреждений 

Старт

Так много дел и подумай :). Пришло время для следующего шага - начать некоторые основные подготовительные работы по проекту. Перво-наперво - изменение названия проекта - оказалось, что это не так уж много усилий с прямыми инструкциями с сайта Flutter. Престижность идет к команде Flutter здесь - мы все знаем, что за рутина проекта может быть на разных платформах, поэтому Flutter сияет здесь, как и в рамках, переименование не имеет большого значения. То же самое касается изменения названия пакета с большим количеством информации, которую можно найти в Интернете. 

Еще несколько вещей, которые следует учитывать: Android Manifest, Info.plist в Xcode, настройка bundle.using flavors, Signing, Runner.workspace. Установка цели развертывания для IOS, для Android. И снова большое сообщество и поддержка Google оказались очень полезными. 

Что мне показалось странным во Флаттере, так это длинный синтаксис импорта: 

импортировать «пакет: flutter_demo / model / user.dart»;

Я предпочитаю короткие импорта, лучше всего, если они содержат только имя файла. Мое первое впечатление на DART было то, что это довольно долго. Вместо того, чтобы описать работу несколькими простыми словами, я почувствовал, что рассказываю подробную историю о действии :). Я увижу, что изменится, когда увижу, и получу хорошее представление о конструкциях Dart.

Работа с кодом - анализ примеров

Как однажды сказал мудрый человек: «Изучение языка программирования происходит в два этапа - обучение чтению кода, а затем написанию кода», поэтому неплохо начать с анализа существующих примеров, чтобы получить представление о платформе Flutter. Наблюдение за присутствием абстрактных классов было облегчением, так как я знал, что смогу сделать некоторую наследованную и протокольную логику SWIFT.

Одна маленькая деталь

Ваше приложение должно отображаться только в режиме принудительного портрета

Crashlytics интеграция. 

По общему признанию, это - то, где я должен был сражаться в своем первом серьезном сражении Флаттера. В настоящее время с Fabric мы находимся в некоторой ситуации: она куплена Google и находится в процессе интеграции с Firebase Crashlytics. Мне было не очень понятно, какие пакеты мне следует добавить для обработки распространения бета-версии Fabric и сообщений об ошибках Crashlytics. Небольшое исследование на стороне Firebase Alpha, заменяющего Fabric Beta для распространения сборки, показывает многообещающие результаты, но сейчас, когда доступна только бета-версия, необходим гибридный доступ к Fabric и Firebase. 

Мне пришлось создать один проект Firebase для приложения, создать приложение для IOS и Android, перенести GoogleService-Info.plist и google-services.json в папки проекта платформы, выполнить необходимые изменения в AndroidManifest.xml, build.gradle и т. Д. Для Andro добавьте файл Info.plist и AppDelegate.m для IOS. Тогда только правильный импорт в файл main.dart и модификация метода main (), наконец, заставят Crashlytics работать. 

Запуск непрерывной интеграции

Все это заняло большую часть дня, но в итоге моя Непрерывная интеграция была полностью настроена для моего проекта Flutter с помощью fastlane для платформ IOS и Android. Нет никакого способа сделать это для Flutter напрямую или создать одну настройку fastlane для проекта Flutter для работы с обеими платформами - вам нужно создать отдельные Fast-файлы для каждой платформы и настроить их независимо. Я немного изменил его, чтобы позволить сборкам переходить прямо на Crashlytics вместо iTunes или Google Play. 

Конфигурация вышеупомянутого является немного горсткой - мой совет должен оставаться в курсе правильных версий пакета, поскольку мне потребовалось много времени, чтобы найти причину «неожиданных» ошибок компиляции. 

Мне также пришлось иметь дело с этой ошибкой для Android:

> java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Невозможно объединить dex

Это было легко исправить после того, как быстрый поиск дал решение добавить multiDexEnabled true в defaultConfig build.gradle

Флаттер дизайн - почему BLoC? 

Как и в любом проекте, настройка правильной архитектуры для запуска проекта приложения является главным приоритетом. Изучение как общественных, так и официальных рекомендаций, которые все заключают, что BLoC был предпочтительным вариантом. Я нашел эту статью полезной для понимания того, как работает архитектура BLoC . Оказывается, это очень похоже на MVVC для iOS, с классом блока, используемым вместо modelView. Я подумал, что архитектура BLoC - это путь, и решил поработать с ней в своем проекте. 

Пример приложения из вышеупомянутой статьи был очень похож на мой первый проект приложения флаттера - все, что мне было нужно, это добавить дополнительный слой проекта и отдельный контент для отдельных модулей. Все, что нужно - расширить базовый список папок на все модули (пользовательский интерфейс, блоки, модели, ресурсы). Я также создал папку commonModels для хранения в ней всех моделей, используемых в разных модулях. Более подробное чтение статьи привело к небольшим изменениям в коде и доработке архитектуры BLoC для моего проекта.

Реализация

Начав с нуля, я обнаружил, что действительно трудно создать что-нибудь с кодом DART, которое действительно сработало бы - полное уважение ко всем, кто с легкостью переключается на язык Flutter. Для меня это было возвращение в школу по практически всем аспектам написания кода - один шаг вперед, два шага назад. Все, что я знал, - это то, что я узнал из пошаговых руководств, примеров и некоторых тестовых отладок, чтобы увидеть, как работает установка точек останова кода. 

В итоге мне удалось создать небольшой виджет с 5 кнопками, определяемыми назначенными свойствами модели - этого недостаточно для вызова приложения. Создание пользовательского интерфейса тоже пошло не очень хорошо - внезапно DART, и сама идея «все - это виджет», стала напоминать JSON - просто сложнее. Я все еще должен ознакомиться со всеми определениями параметров пользовательского интерфейса - ребрами, размерами, выравниванием и т. Д. - я планирую получить правильные результаты, как только закончу писать и анализировать код.

В целом, работа с Флаттером показалась мне довольно сложной, но я вижу, что вся эта шумиха вокруг не беспочвенна. С некоторыми уточнениями и углубленным изучением, я думаю, что это очень хорошее дополнение к набору инструментов любого программного дома, а для меня - отличный способ расширить мои возможности как программиста. 

Контакты

+38 (093) 647-37-31

pavel.keepwarning@gmail.com

Ришельевская, 33, Одесса, Украина

Блог

Оставьте заявку
и мы Вам перезвоним