Разработайте мобильное приложение с помощью инфраструктуры пользовательского интерфейса с открытым исходным кодом Google.

Google недавно анонсировал бета-версию Flutter на Mobile World Congress 2018. Flutter - это новая платформа мобильного пользовательского интерфейса с открытым исходным кодом, которая используется для создания собственных приложений как для iOS, так и для Android.

Flutter использует Dart для написания приложений, поэтому синтаксис должен выглядеть очень знакомым, если вы уже знаете Java, JavaScript, C # или Swift. Код компилируется с использованием стандартных наборов инструментов Android и iOS для конкретной мобильной платформы, что обеспечивает гораздо лучшую производительность и время запуска.

У Flutter есть много преимуществ для разработчиков:

  • Проект с открытым исходным кодом
  • Горячие перезагрузки для более быстрого цикла разработки
  • Встроенная среда выполнения кода ARM
  • Богатый набор виджетов и растущее сообщество плагинов при поддержке Google
  • Отличная интеграция редактора с Android Studio и Visual Studio Code
  • Единая кодовая база для iOS и Android с полной производительностью, которая не использует JavaScript в качестве моста или WebView.
  • Многоразовые компоненты, похожие на React Native
  • Dart похож на Java, что позволяет многим разработчикам с легкостью приступить к работе
  • В наборе инструментов используются виджеты, поэтому все должно показаться очень знакомым для любого, кто имеет опыт веб-разработки.
  • Это может положить конец священным войнам Java между Google и Oracle

Создание приложения с использованием Flutter было прекрасной возможностью запачкать руки и развить бессерверный Golang API, продемонстрированный в моем предыдущем посте - Бессерверный Golang API с AWS Lambda.

На веб-сайте фильма используется функция AWS Lambda, написанная на Go - новейшем языке для бессерверных приложений. Сайт извлекает и отображает последние выпуски фильмов в вашем браузере.

А теперь давайте создадим мобильную версию нашего сайта с фильмами с помощью Flutter!

Создание бессерверного мобильного приложения с использованием Flutter

Приложение Flutter вызовет API-шлюз, а затем вызовет функцию AWS Lambda. Функция будет использовать API TMDB для получения списка фильмов, которые будут транслироваться на этой неделе в кинотеатрах - все в режиме реального времени. Приложение получит ответ JSON, а затем отобразит результаты в ListView.

Примечание. Весь код можно найти в моем репозитории GitHub.

Для начала следуйте предыдущему руководству о том, как создать Бессерверный API.

  • После развертывания скопируйте API Gateway Invoke URL в буфер обмена.
  • Затем загрузите пакет SDK для Flutter , клонировав следующий репозиторий GitHub: git clone -b beta https://github.com/flutter/flutter.git
  • Не забудьте добавить папку flutter/bin в переменную среды PATH.
  • Затем установите недостающие зависимости и файлы SDK: flutter doctor
  • Запустите Android Studio и установите плагин Flutter из Файл ›Настройки› Плагины.

  • Пришло время создать новый проект Flutter с помощью Android Studio.
  • Поскольку Flutter также имеет интерфейс командной строки, вы также можете создать новый проект с помощью следующей команды: flutter create PROJECT_NAME.

  • Android Studio сгенерирует файлы для базового примера приложения Flutter.
  • Мы будем проделывать свою работу в файле lib/main.dart:

  • Теперь вы можете запустить приложение - должен появиться следующий экран:

  • Затем создайте простой класс POJO с именем Movie , используя следующий набор атрибутов и геттеров:
  • Теперь создайте виджет с именемTopMovies.
  • Этот шаг создаст его состояние с именем TopMoviesState.
  • Государственный класс будет вести список фильмов.
  • Затем добавьте виджет с отслеживанием состояния TopMovies в main.dart:
  • Пришло время добавить класс TopMoviesState.
  • Большая часть логики приложения будет находиться в этом классе.
  • Давайте инициализируем our _movies переменную списком фильмов, вызвав API Gateway . Мы переберем ответ в формате JSON и добавим фильмы с помощью функции _addMovie:
  • Функция _addMovie() просто добавит фильм, переданный в качестве аргумента, в список _movies:
  • Теперь нам нужно будет отображать фильмы в режиме прокрутки ListView . Flutter поставляется с набором мощных базовых виджетов, чтобы упростить эту задачу.
  • В приведенном ниже коде я использовал виджеты Text, Row и Image.
  • Компоненты Padding и Align правильно отображают элемент фильма.
  • Наконец, обновите метод сборки для MyApp, чтобы вызвать виджет TopMovies:
  • Перезапустите приложение - должен появиться список текущих фильмов!

И Оскар получает …

Поздравляю! Мы успешно создали бессерверное приложение всего за 143 строчки кода -, и оно прекрасно работает как на Android, так и на iOS.

Flutter все еще находится на начальной стадии, поэтому, конечно, у него есть некоторые недостатки:

  • Крутая кривая обучения по сравнению с React Native, который использует JavaScript
  • Dart непопулярен по сравнению с Kotlin или Java
  • Не поддерживает 32-битные устройства iOS.
  • Из-за автоматически сгенерированного кода артефакт сборки огромен. Размер APK для Android составляет почти 25 Мб, в то время как я создал такое же приложение на Java для 3 Мб.

Для альфа-проекта с открытым исходным кодом он выглядит очень стабильным и хорошо продуманным. Не могу дождаться, чтобы увидеть, что вы можете построить с помощью Flutter! Оставьте свои комментарии, отзывы или предложения ниже - или свяжитесь со мной прямо в Twitter @ mlabouardy.