РАЗРАБОТКА ПРОГРАММНЫХ СРЕДСТВ СИНХРОНИЗАЦИИ ЭЛЕМЕНТОВ ВИЗУАЛЬНОГО ДИЗАЙНА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Введение 4
1. Требования к системе 7
1.1. Расширение для дизайн-системы 7
1.1.1. Требования к интерфейсу 7
1.1.2. Функциональные требования 7
1.2. Механизм для разработчика 8
1.2.1. Требования к интерфейсу 8
1.2.2. Требования к системе 9
2. Описание архитектуры 10
2.1. Модуль для дизайн-системы 10
2.2. Механизм разработчика 11
3. Реализация механизма для разработчика 13
3.1. Используемые технологии 13
3.1.1. Язык программирования Swift 13
3.1.2. Swift Package Manager 13
3.1.3. Шаблонный язык Stencil 14
3.1.4. YAML и конфигурационный файл 15
3.2. Разработка консольного приложения 16
3.2.1. Color Parser 17
3.2.2. Font Parser 18
3.2.3. Asset Parser 19
3.2.4. Обработка команд пользователя 20
3.2.5. Файл конфигурации 20
3.2.6. Синхронизация компонентов 21
4. Разработка механизма для дизайнера 22
4.1. Используемые технологии 22
4.1.1. Язык программирования JavaScript 22
4.1.2. Язык программирования CocoaScript 22
4.2. Разработка плагина для Sketch 23
4.2.1. Разработка компонента для экспорта цветов 23
4.2.2. Разработка компонента для экспорта шрифтов 25
4.2.3. Разработка компонента для экспорта иконок 25
5. Функциональные возможности инструмента 27
Заключение 30
Список терминов 31
Список использованных источников 32
Приложение А. Основные модули расширения для разработчика .... 34
Приложение Б. Основные модули расширения для дизайнера 39
Купить

Значительную часть в работе iOS-разработчика составляет создание пользовательского интерфейса. Чтобы каждая UserStory правильно функционировала и соответствовала дизайну, отвечала определенным требованиям, согласно дизайн руководству от Apple [1], необходимо корректно использовать доступные UI-компоненты.
Сегодня все дизайн-наработки дизайнеры хранят в дизайн-системах (Sketch, Zeplin и в других подобных программах). Для сохранения консистентности дизайна разработчик вынужден постоянно следить за изменениями макетов и UI-компонентов. В зависимости от размеров проекта это может занимать от 10-15 минут до часа, из расчета, что сравнение каждого экрана занимает 2-3 минуты. Частота таких проверок может быть как ежедневной так и еженедельной - это зависит от скорости роста проекта, количества дизайнеров и прочего. Таким образом, разработчик может тратить до 5 часов в неделю на проверку соответствия макетов и реализованных экранов на наличие изменений. Также стоит учесть, что в случае наличия расхождений требуется выполнить дополнительные действия по добавлению новых ресурсов (цвета, шрифты, иконки) в проект и их применения.
Крупная продуктовая разработка сталкивается с такой проблемой, как синхронизация дизайн-компонентов между дизайнером и разработчиком: оперативная поставка UI-компонентов в проект, быстрая смена стилей. В постоянно развивающемся продукте происходит частый редизайн готовых окон на основе исследований: A/B тестирований, опросов среди пользователей и из-за изменений требований к продукту и создания новых пользовательских историй. По данным компании Badoo, им потребовалось провести порядка 10 A/B тестирований, чтобы добавить определенный UI-компонент на экран, соответственно это потребовало переработать дизайн более 10 раз.
На данный момент взаимодействие между дизайн-командой и командами разработчиков в продуктовой разработке строится на постоянном взаимодействии. Разработчикам необходимо постоянно следить за текущим состоянием дизайн-проекта и своевременно обновлять свои компоненты.
Сейчас в продуктовой разработке создание дизайн-проекта и написание основного приложения происходят на разных платформах, которые никак не синхронизируются между собой. Для того, чтобы добавить новый дизайн-компонент сначала необходимо это сделать в среде разработки дизайн-проекта, затем необходимо оповестить разработчика о необходимости синхронизировать проекты. Разработчику тоже требуется дополнительное время, чтобы перенести этот компонент к себе в проект. Данный процесс может происходить более одного раза в неделю и требует быстрого обновления, так как члены команды разработчиков могут использовать устаревшие компоненты, и в будущем потребует дополнительной работы по исправлению. Таким образом, если бы дизайн система и IDE для разработки приложения могли бы обращаться к общему репозиторию, который хранил актуальное состояние проекта, то данное время можно было бы сократить больше чем вполовину.
По статистике, собранной в компании “Технократия”, для занесения новых стилей в проект разработчику потребуется около полутора часов времени. В эти полтора часа входит: добавить самостоятельно компоненты в проект, отправить эти изменения на пул-реквест, чтобы все разработчики могли пользоваться актуальными данными, прохождение пул-реквеста, слияние актуальной версии ветки development в свою текущую ветку. Чтобы изменить какое-то название UI-элемента, всю эту работу необходимо проделать заново.
Основываясь на данных компании “Альфа Банк”, для совершения аналогичных действий им потребуется час времени, так как они выделили несколько человек, основная задача которых следить за актуальностью дизайн-компонентов и быстро синхронизировать дизайн-проект с основным приложением. На данный момент нет ни одного решения, как в платном, так и в свободном доступе, которое могло бы решить вышеперечисленные проблемы, а главное сократить время разработки.
Целью данной работы является разработка программных средств синхронизации элементов визуального дизайна мобильных приложений. Для достижения поставленной цели были определены следующие задачи:
1. разработать интерфейс для дизайнера, встроенный в его IDE, который обеспечит ему возможность выгрузки UI-элементов в удаленное хранилище;
2. разработать программные механизмы для автоматической генерации кода на основании файлов в репозитории проекта;
3. реализовать интеграцию с репозиторием, добавить интеграцию файлов в существующий проект Xcode;
4. разработать механизм для автоматической синхронизации состояния данных проекта и данных, хранящихся удаленно в репозитории проекта.
Купить