Разработайте мобильное приложение с помощью инфраструктуры пользовательского интерфейса с открытым исходным кодом 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.