📄Работа №32067
Тема: КОДОГЕНЕРАЦИЯ ПРИ ПРОЕКТИРОВАНИИ ИНТЕРФЕЙСОВ: РЕАЛИЗАЦИЯ ПЛАГИНА ДЛЯ ПРИЛОЖЕНИЯ FIGMA
Характеристики работы
Тип работы
Дипломные работы, ВКР
Предмет
Информатика и вычислительная техника
Объем:
63 листов
Год:
2019
Просмотров:
316
6500
руб.
🛒 Купить работу
Не подходит эта работа?
Закажите новую по вашим требованиям
Узнать цену на написание
Закажите новую по вашим требованиям
Представленный материал является образцом учебного исследования, примером структуры и содержания учебного исследования по заявленной теме. Размещён исключительно в информационных и ознакомительных целях.
Workspay.ru оказывает информационные услуги по сбору, обработке и структурированию материалов в соответствии с требованиями заказчика.
Размещение материала не означает публикацию произведения впервые и не предполагает передачу исключительных авторских прав третьим лицам.
Материал не предназначен для дословной сдачи в образовательные организации и требует самостоятельной переработки с соблюдением законодательства Российской Федерации об авторском праве и принципов академической добросовестности.
Авторские права на исходные материалы принадлежат их законным правообладателям. В случае возникновения вопросов, связанных с размещённым материалом, просим направить обращение через форму обратной связи.
Настоящий учебно-методический информационный материал размещён в ознакомительных и исследовательских целях и представляет собой пример учебного исследования. Не является готовым научным трудом и требует самостоятельной переработки.
📋 Содержание
ГЛОССАРИЙ 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. ПОСТАНОВКА ЗАДАЧИ 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;
• разработка графического интерфейса для взаимодействия пользователя с программой;
• Анализ требований;
• Написание технического задания;
• Проектирование и дизайн пользовательского интерфейса;
• Верстка макетов пользовательского интерфейса;
• Написание кода и тестирование.
На этапе передачи макетов пользовательского интерфейса дизайнером фронтенд разработчику часто возникают разночтения технического задания: не удается донести должным образом требования, технические особенности реализации, тонкости работы интерфейса. Автоматизация часто повторяющихся процессов или процессов не зависящих от нюансов конкретного проекта позволит сократить необходимые трудозатраты.
Рассмотрим каждый процесс с точки зрения автоматизации.
Процесс анализа требований и написания технического задания не может быть автоматизирован, так как требует обсуждения многих вопросов связанных с проектом. Прототипирование и дизайн макетов пользовательского интерфейса не поддаются полной автоматизации, так как в процессе работы макеты сопровождаются правками со стороны клиента и действиями такими как:
• Понимание правил 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].
• проанализированы популярные на рынке продукты, которые обладают функциями автоматической генерации кода и составлено техническое задание на разработку собственного решения;
• разработан алгоритм для генерации кода, на основе данных figma;
• разработан графический интерфейс для взаимодействия пользователя с программой;
Разработанный программный продукт позволит front-end разработчикам сократить время на верстку шаблонных решений в пользовательском интерфейсе. Дизайнерам даст возможность тестировать продукт на раннем этапе на реальных данных и различных устройствах благодаря адаптивности.
В качестве дальнейших улучшений плагина можно рассмотреть следующие идеи:
• реализация наличия различных состояний элемента, когда пользователь наводит курсор на элемент;
• реализация каскадных таблиц стилей CSS, которая позволяет веб-разработчикам создавать сложные адаптивные макеты веб-дизайна более легко и согласованно в разных браузерах;
• интеграция плагина с платформами для совместной разработки IT-проектов: GitHub, GitLab, BitBucket.
Данная работа размещена в системе управления репозиториями кода для Git —GitLab [19].
ИЛИ
Поиск аналога
📕 Список литературы
🛒 Оформить заказ
⚡ Работу высылаем в течении 5 минут после оплаты.