ГЛОССАРИЙ 3
ВВЕДЕНИЕ
1. ПОСТАНОВКА ЗАДАЧИ 8
1.1 Концепция программного инструмента 8
1.2 Обзор альтернативных решений 8
2 ВЫБОР ТЕХНОЛОГИИ РЕАЛИЗАЦИИ 13
3. РЕАЛИЗАЦИЯ ПРОГРАММНОГО ИНСТРУМЕНТА 14
3.1 Проектирование программного обеспечения 14
3.2 Принцип работы алгоритма 17
3.3 Чтение файлов исходного Figma-макета 20
3.4 Ограничения для динамического изменения элементов 22
3.5 Повторное использование кода 24
3.6 Переменные. Динамическое изменение данных 26
3.7 Загрузка пользовательских данных 28
4. ОПИСАНИЕ РАБОТЫ ПРОГРАММЫ 31
ЗАКЛЮЧЕНИЕ 36
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 38
ПРИЛОЖЕНИЕ А 40
ПРИЛОЖЕНИЕ Б
Жизненный цикл разработки веб-приложений существенной влияет на сроки и стоимость конечного продукта. Есть ряд видов работ, которые требуют наибольшего вклада по времени [1]:
• Анализ требований;
• Написание технического задания;
• Проектирование и дизайн пользовательского интерфейса;
• Верстка макетов пользовательского интерфейса;
• Написание кода и тестирование.
На этапе передачи макетов пользовательского интерфейса дизайнером фронтенд разработчику часто возникают разночтения технического задания: не удается донести должным образом требования, технические особенности реализации, тонкости работы интерфейса. Автоматизация часто повторяющихся процессов или процессов не зависящих от нюансов конкретного проекта позволит сократить необходимые трудозатраты.
Рассмотрим каждый процесс с точки зрения автоматизации.
Процесс анализа требований и написания технического задания не может быть автоматизирован, так как требует обсуждения многих вопросов связанных с проектом. Прототипирование и дизайн макетов пользовательского интерфейса не поддаются полной автоматизации, так как в процессе работы макеты сопровождаются правками со стороны клиента и действиями такими как:
• Понимание правил UX [15];
• Творческая составляющая;
• Глубокое понимание сути проекта.
Но есть этап, который может быть автоматизирован должным образом — генерация кода по реализованным макетам пользовательского интерфейса. Процесс реализации макетов пользовательского интерфейса сопровождается написанием кода для элементов интерфейса. Часто интерфейсы содержат элементы, которые повторяются, но требуют незначительного изменения в коде.
Существуют множество программных решений данной задачи. Каждое из которых имеет свои преимущества и недостатки. Одни программы используют метод распознавания изображений нарисованных скетчей с помощью обученной нейронной сети [2]. Но такой подход требует большого количества тестовых данных, так как результат на выходе имеет недостаточно высокий процент совпадения с оригиналом [6]. Другие программы использую подход генерации кода по нарисованным элементам, которые должны быть реализованы в их программе, что сильно ограничивают дизайнеров в выборе рабочего инструмента.
В ходе работы над продуктом дизайнеры используют различные инструменты для отрисовки пользовательского интерфейса. Согласно проведенному опросу среди дизайнеров самым популярным инструментов является Sketch [5] (Рис. 1). Следом HfleTFigma [12], которая работает в облаке. Оба инструмента умеют выдавать json-файлы, в которых содержится вся информация о требуемых экранах дизайн-макета. Выбор графического инструмента Figma был обусловлен такими факторами:
• Работа в облаке;
• Кроссплатформенность. Программа Sketch доступна только пользователям операционной системы Mac OS;
• Наличие стабильного API, которое не меняется от обновления приложения.
В рамках данной выпускной квалификационной работы была поставленная цель разработки плагина для автоматической генерации кода при проектировании пользовательских интерфейсов Web-приложений. Для достижения этой цели были поставлены следующие задачи:
• проанализировать популярные продукты, имеющиеся на рынке, которые обладают функциями автоматической генерации кода и выявить их сильные и слабые стороны;
• разработка алгоритма для генерации кода, на основе данных figma;
• разработка графического интерфейса для взаимодействия пользователя с программой;
В результате выполнения данной дипломной работы было разработано программное решение для генерации кода пользовательского интерфейса для web-приложений. Задачи, выполненные в рамках работы:
• проанализированы популярные на рынке продукты, которые обладают функциями автоматической генерации кода и составлено техническое задание на разработку собственного решения;
• разработан алгоритм для генерации кода, на основе данных figma;
• разработан графический интерфейс для взаимодействия пользователя с программой;
Разработанный программный продукт позволит front-end разработчикам сократить время на верстку шаблонных решений в пользовательском интерфейсе. Дизайнерам даст возможность тестировать продукт на раннем этапе на реальных данных и различных устройствах благодаря адаптивности.
В качестве дальнейших улучшений плагина можно рассмотреть следующие идеи:
• реализация наличия различных состояний элемента, когда пользователь наводит курсор на элемент;
• реализация каскадных таблиц стилей CSS, которая позволяет веб-разработчикам создавать сложные адаптивные макеты веб-дизайна более легко и согласованно в разных браузерах;
• интеграция плагина с платформами для совместной разработки IT-проектов: GitHub, GitLab, BitBucket.
Данная работа размещена в системе управления репозиториями кода для Git —GitLab [19].
