Три шага от эскиза до рабочего прототипа

Всем привет! Продолжаю делиться своим опытом. Итак, передо мной встала задача - сделать макет дизайна для панели управления доступом к компонентам веб-приложения. Любопытной особенностью данной задачи было то, что роли имеют три уровня вложенности или группировки. На верхнем уровне - доменная группа. В каждую доменную группу входят несколько Групп ролей. И уже в каждой группе могут быть отдельные Роли. При этом для каждой роли настраивается доступ для различных частей компонентов системы - полный доступ, только для чтения, отсутствие доступа.

Входные данные Матрица доступа в виде файла Excel - огромная таблица, в которой была трёхуровневая шапка (те самые доменные группы и прочее), перечень частей компонентов системы, а на перекрёстках частей и ролей - отметки о наличии доступа.

Создание рабочего прототипа

1. Делаем эскиз Исходя из того, что нам нужно отобразить - рисуем (буквально от руки на бумаге). Рисуем так, как понимаем и исходя из тех сущностей, что лежат на поверхности. Здесь я сразу увидела, что у ролей имеется явная иерархия. А что хорошо позволяет визуализировать иерархическую структуру? Дерево! Отлично - значит рисуем слева дерево ролей. Пойдём дальше - нам нужно отобразить информацию о том, к каким частям компонентов системы имеет роль доступ и какой именно доступ она имеет. Здесь в первом приближении я нарисовала три списка: “полный доступ”, “только чтение”, “нет доступа”. В каждый из списков я планировала выводить перечень частей компонентов системы. Однако, поразмыслив, я решила, что три списка - это слишком сложно. В итоге появилась идея сделать таблицу, в которой будут перечислены компоненты, их части, а в каждой строке части компонента будет три переключателя (radio button) - взаимоисключающие отметки о доступе. Таким образом эскиз был готов.

2. Делаем промпт Спасибо родной Компании - у нас есть закрытый доступ к достаточно современным ИИ! Как раз одной из них, а именно GLM-5, я и воспользовалась. Итак, я делю задачу на две части. Во-первых, нужно из файла Excel получить структуру JSON (она идеально подходит для хранения дерева ролей и матрицы доступа). Во-вторых, нужно подготовить HTML со встроенным кодом JavaScript, в который будем внедрять (с помощью функции VBA.Replace()) наш JSON. Таким образом, первый промпт сосредоточен на том, чтобы получить из матрицы Excel-файла текст JSON. Здесь я буквально объяснила ИИ как устроена шапка (те самые три уровня ролей), где части компонентов и какие бывают доступы. Попросила написать скрипт на VBA Excel для получения JSON. Вуаля - половина дела сделана! Вторая задача базировалась на моём эскизе. Я объясняю ИИ, что слева будет дерево иерархии ролей, справа - таблица с перечнем доступности частей компонентов системы. Также подаю на вход пример сформированного JSON. Ну и говорю ему, что может я чего-то не учла, так пусть он предложит мне лучшие практики и сразу реализует их.

3. Оцениваем результат Во-первых, получаем макрос, который генерирует JSON. Этот JSON можем как сохранить в файл, так и внедрить в наш шаблон. Во-вторых, получаем кликабельный, совершенно рабочий прототип, который можем показать не только стейкхолдерам, но и команде разработки. Не нужно больше объяснять на пальцах и просить “представить себе” как работает та или иная часть прототипа! Как я уже говорила - совсем без знаний программирования не получится обойтись, т.к. ИИ не умеет делать всё идеально. Многое приходилось рихтовать вручную . Но результат того стоит!

Три шага от эскиза до рабочего прототипа | Сетка — социальная сеть от hh.ru