ВВЕДЕНИЕ 3
1 ОПИСАНИЕ ФРЕЙМВОРКА FLUTTER 6
2 ПРОЕКТ ПРОГРАММНОГО РЕШЕНИЯ 8
2.1 Принцип работы инструмента 8
2.2 Типы элементов интерфейса 10
3 ОСОБЕННОСТИ РЕАЛИЗАЦИИ ИНСТРУМЕНТА 20
3.1 Инструменты разработки 20
3.2 Архитектура программного решения 21
3.3 Модуль распознавания по именам объектов 22
3.2 Модуль распознавания с использованием ML 23
3.4 Модуль генерации кода 25
4 ОПИСАНИЕ РАБОТЫ ПРОГРАММЫ 28
ЗАКЛЮЧЕНИЕ 30
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 31
ПРИЛОЖЕНИЕ А 33
Пример входных данных 33
ПРИЛОЖЕНИЕ Б Исходный код модуля генерации 74
В условиях современной разработки мобильных приложений все чаще возникают предпосылки для создания средств для ее ускорения и удешевления. В частности это касается попыток внедрить парадигму, которая изначально принадлежала виртуальной Java-машине: "write once, run anywhere", что в переводе означает "пиши единожды - запускай где угодно". Для мобильной разработки этот тезис сегодня сводится к объединению наиболее популярных платформ - Android и iOS. На сегодняшний день 74.45% устройств работают на операционной системе Android, 22.85% на iOS и лишь 3.65% на остальных [1].
На данный момент такие компании, как Google, Microsoft и Facebook ищут возможности для создания универсального решения, которое позволяло бы быстро, без особых расхождений в дизайне и функционале, а также с минимальными потерями по производительности разрабатывать приложения под обе платформы сразу. Для этого в 2011 году компания Microsoft выпустила фреймворк Xamarin, который на данный момент является старейшей альтернативой для нативной мобильной разработки и сохраняет свою популярность благодаря языку C# и большому сообществу разработчиков [2]. В 2015 году Facebook выпустила свою библиотеку React Native, которая сочетала в себе нативную разработку и язык JavaScript, популярный в среде front-end разработчиков [3]. Позднее появляются Ionic и NativeScript, которые в основном используют наработки и технологии React Native.
В 2017 году компания Google выпускает фреймворк Flutter, который призван стать полноценным средством кроссплатформенной разработки без значительного ущерба для производительности с упором на мощный и легкий движок C++ [4].
Flutter - стремительно развивающийся фреймворк. Большим толчком для него стала конференция Google I/O 2018, на которой он и был представлен общественности впервые. После этого по всему миру стали появляться различные мероприятия, посвященные Flutter, крупные компании по разработке мобильных приложений начали пополнять свой стек технологий языком Dart [5], а репозиторий с исходным кодом фреймворка теперь имеет более 54 тысяч звезд [6].
На сегодняшний день Flutter версии 1.2 использует в качестве основы язык программирования Dart версии 2.2 (еще один продукт Google) и имеет в распоряжении более 1000 вспомогательных пакетов и библиотек [7], но пока что не обладает собственным IDE и работает только при помощи плагинов для Android Studio и Xcode.
Помимо всех плюсов фреймворка и языка Dart есть и проблемы - разработка интерфейсов здесь уникальна и использует свой набор виджетов или компонентов для каждого из элементов дизайна и пользовательского интерфейса. Все эти компоненты образуют громоздкие блоки, а их написание отнимает много времени. Большинство из компонентов обладают уникальной логикой и не имеют прямых аналогов для каждого из нативных наборов виджетов. Так, например, компонент "Column" выполняет функции одновременно нескольких аналогов из встроенного фреймворка для верстки под Android и содержит в себе отдельный элемент для верстки и отображения самих частей списка, который обычно выносится в отдельный файл в случае с Android. Фреймворк по большей части решает проблему дублирования кода в случае с дорогой и долгой разработкой под несколько платформ одновременно [8], но при этом остаются пути для последующей автоматизации разработки.
В рамках данной дипломной работы была поставлена цель создать программный инструмент, автоматизирующий процесс разработки пользовательских интерфейсов кроссплатформенных приложений для фреймворка Flutter на основе данных графического редактора Figma.
Для достижения цели были поставлены следующие задачи:
• выделение исходной информации из макета дизайна с помощью специальных программных средств;
• применение методов машинного обучения для распознавания элементов, информация о которых не может быть выделена средствами Figma API;
• разработка плагина для среды разработки Android Studio, способного генерировать код на языке Dart на основе поданного на вход дизайна из Figma.
В результате выполнения данной дипломной работы было реализовано программное решение, автоматизирующее процесс разработки пользовательских интерфейсов кроссплатформенных приложений для фреймворка Flutter на основе данных графического редактора Figma.
Задачи, выполненные в рамках данной дипломной работы:
• разработан модуль для выделения исходной информации из макета дизайна с использованием Figma API;
• обучена нейронная сеть на выборке из приблизительно 72 тысяч размеченных экранов и разработан модуль распознавания элементов на изображениях с помощью обученной модели машинного обучения;
• разработан интегрируемый в среду разработки Android Studio плагин, способный генерировать код на языке Dart на основе поданного на вход дизайна из Figma.
В будущем планируется расширить разработанный плагин следующими функциями:
• Добавить возможность пользователю выбрать тип элемента, если он был распознан неверно или вовсе не был распознан.
• Добавить возможность загружать дизайн в формате .fig с локального хранилища или отдельные изображения для распознавания.
• Расширить возможности генерации кода для интерактивных объектов, сложных экранных форм.
Результаты данной выпускной квалификационной работы опубликованы в репозитории GitLab и доступны по ссылке: http: //gititis .kpfu.ru/B SMotygullin/FlutterBuilder.