Перейти к основному содержимому

10. Доработка приложения с AI-помощником (на примере GigaCode)

AI-ассистент разработчика GigaCode​

GigaCode — это AI-ассистент разработчика, который позволяет ускорить процесс написания кода, предлагая наиболее вероятные и релевантные подсказки. GigaCode анализирует имеющийся контекст и предлагает полные конструкции функций, циклов, условий и других элементов кода, что позволяет ускорить процесс разработки, повысить производительность, а также сделать процесс программирования более продуктивным.

Основные возможности GigaCode:

  • Автодополнение кода с контекстным анализом
  • Генерация документации и комментариев
  • Рефакторинг и оптимизация существующего кода
  • Создание юнит-тестов и проверка покрытия
  • Объяснение сложных алгоритмов и архитектурных решений
  • Помощь в отладке и исправлении ошибок

В настоящее время GigaCode поддерживает более 35 языков программирования, а также совместим со множеством популярных редакторов и интегрированных сред разработки, что делает инструмент полезным для большинства разработчиков и позволяет максимально использовать его возможности для улучшения рабочего процесса.

Изучение приложения медицинской клиники с помощью GigaCode​

GigaCode позволяет изучать проекты, фрагменты кода, общую архитектуру проекта, а также производить с его помощью расширение функциональности любого приложения. Рассмотрим как с помощью GigaCode можно изучить какой-либо компонент приложения (в нашем примере это будет компонент DoctorAgg.tsx)

  1. Установите расширение GigaCode для вашей IDE (в данном курсе - VS Code), следуя инструкциям https://gitverse.ru/features/gigacode/install/

  2. Откройте проект медицинской клиники в VS Code.

  3. Выделите в файле DoctorAgg.tsx фрагмент кода, который необходимо проанализировать, изучить, при необходимости доработать.

  4. Перейдите в чат GigaCode (кликните на значок GigaCode в интерфейсе IDE, в VS Code - в левой боковой панели)

  5. Напишите в чат свой вопрос по выделенному фрагменту кода или, введя /, выберите одну из команд:

    /explain — объяснение работы блока кода

    /explain_stepbystep — подробное объяснение работы кода, шаг за шагом

    /doc — генерация документации к коду

    /test — генерация юнит-тестов

    /review — ревью кода

    /improve — рефакторинг кода

  • GigaCode выведет в чат ответ на введенный вопрос или результат работы описанных выше команд.

Практические примеры запросов к GigaCode​

Пример 1: Анализ архитектуры компонента

Проанализируй архитектуру компонента DoctorAgg.tsx:
- Какие принципы проектирования используются?
- Как организована работа с состоянием?
- Какие есть зависимости и как они влияют на компонент?
- Какие потенциальные проблемы можешь выделить?

Пример 2: Оптимизация производительности

Проанализируй производительность компонента DoctorAgg.tsx:
- Есть ли ненужные ре-рендеры?
- Можно ли оптимизировать работу с API?
- Какие хуки можно использовать для мемоизации?
- Предложи конкретные улучшения с примерами кода

Пример 3: Улучшение UX

Как можно улучшить пользовательский опыт в компоненте DoctorAgg.tsx:
- Добавить индикаторы загрузки
- Улучшить обработку ошибок
- Сделать интерфейс более интуитивным
- Добавить keyboard navigation

Таким образом можно изучить любой другой компонент приложения. При этом при возникновении вопросов по коду, можно обращаться к GigaCode за помощью столько сколько потребуется. Это дает существенное расширение возможностей обучения и повышение квалификации разработчика.

Доработка приложения с AI-помощником GigaCode​

Теперь после того как мы научились использовать GigaCode для анализа кода, давайте рассмотрим как с его помощью можно доработать приложение.

Общие принципы работы с AI-помощниками при разработке​

1. Итеративный подход​

  • Принцип: AI-инструменты наиболее эффективны при пошаговой доработке кода
  • Практика: Каждая итерация должна решать конкретную задачу улучшения
  • Валидация: Важно тестировать результат каждого шага перед переходом к следующему
  • Документирование: Записывайте изменения и причины их внесения

2. Контекстуальность​

  • Полный контекст: Предоставляйте AI максимально полную информацию: исходный код, требования, ограничения
  • Технический стек: Указывайте используемые библиотеки, фреймворки и версии
  • Бизнес-логика: Объясняйте назначение компонента и его роль в приложении
  • Пользовательские сценарии: Описывайте, как компонент используется в реальных условиях

3. Специфичность запросов​

  • Конкретность: Избегайте общих формулировок типа "улучши код"
  • Критерии успеха: Четко формулируйте желаемый результат и как его измерить
  • Технические требования: Указывайте конкретные ограничения и требования к производительности
  • Приоритеты: Определяйте, что важнее: скорость разработки, производительность, читаемость кода

4. Управление версиями​

  • Бэкапы: Всегда создавайте резервные копии перед крупными изменениями
  • Коммиты: Фиксируйте каждый шаг доработки в системе контроля версий
  • Ветвления: Используйте отдельные ветки для экспериментов с AI
  • Теги: Отмечайте стабильные версии после AI-доработок

5. Тестирование AI-генерированного кода​

  • Автоматическое тестирование: Убедитесь, что все существующие тесты проходят
  • Ручное тестирование: Проверьте функциональность в различных сценариях
  • Нагрузочное тестирование: Протестируйте производительность при больших нагрузках
  • Accessibility тестирование: Проверьте доступность для пользователей с ограниченными возможностями

Продвинутые техники работы с AI-ассистентами​

1. Техника "Резиновой утки" с AI​

Объясняйте AI вашу проблему детально, как если бы объясняли коллеге:

У меня есть компонент списка врачей. Пользователи жалуются, что:
1. Долго загружается при большом количестве врачей
2. Неудобно искать конкретного врача
3. Не хватает фильтрации по специализации
4. Нет сортировки по рейтингу

Как можно решить эти проблемы, сохранив текущую функциональность?

2. Техника "Ролевого моделирования"​

Просите AI взять на себя роль эксперта в определенной области:

Ты - эксперт по UX/UI дизайну медицинских приложений. 
Проанализируй компонент записи к врачу с точки зрения:
- Удобства использования для пожилых пациентов
- Соответствия медицинским стандартам
- Эффективности workflow для администраторов

3. Техника "Пошагового планирования"​

Просите AI составить детальный план доработки:

Составь подробный план переработки компонента DoctorList:
1. Анализ текущего состояния
2. Определение проблем и их приоритетов
3. Проектирование решений
4. Пошаговая реализация
5. Тестирование и валидация
6. Документирование изменений

Для каждого пункта укажи конкретные действия и временные оценки.

4. Техника "Альтернативных решений"​

Запрашивайте несколько вариантов решения задачи:

Предложи 3 различных подхода к реализации системы уведомлений:
1. Простое решение (минимум кода, быстрая реализация)
2. Масштабируемое решение (для роста приложения)
3. Инновационное решение (с использованием новых технологий)

Для каждого подхода укажи плюсы, минусы и сложность реализации.

Ключевые аспекты создания качественных промптов​

1. Структурированность​

  • Нумерованные списки: Используйте для перечисления требований
  • Группировка: Разделяйте функциональные и визуальные требования
  • Приоритизация: Указывайте, что критично, а что желательно
  • Форматирование: Используйте markdown для лучшей читаемости

2. Техническая специфичность​

  • Конкретные компоненты: Указывайте точные названия библиотек (например, "Card из Ant Design v5.2")
  • Версии: Упоминайте версии используемых технологий
  • Ограничения: Определяйте технические и ресурсные ограничения
  • Структура данных: Приводите примеры данных, с которыми работает компонент

3. Контекст использования​

  • Целевая аудитория: Объясняйте, кто будет использовать компонент
  • Сценарии использования: Описывайте различные случаи применения
  • Устройства: Указывайте требования к адаптивности
  • Производительность: Определяйте требования к скорости работы

4. Критерии успеха​

  • Измеримые метрики: Определяйте, что считается успешным результатом
  • Качественные показатели: Указывайте требования к UX и DX
  • Состояния: Описывайте ожидаемое поведение в различных ситуациях
  • Граничные случаи: Определяйте поведение в крайних ситуациях

5. Примеры и референсы​

  • Приводите примеры желаемого результата
  • Ссылайтесь на существующие решения как образец
  • Используйте визуальные описания для сложных UI-элементов

Описание доработок компонента DoctorAppointmentList​

Исходное состояние компонента DoctorAppointmentList​

Компонент DoctorAppointmentList отображает список записей к врачам в виде таблицы. Это стандартное представление для отображения списка записей Ant Design.

Код компонента DoctorAppointmentList в исходном состоянии - DoctorAppointmentList-1.tsx

Доработка #1: Переход с таблицы на карточное представление​

Цель: Улучшить визуальное восприятие данных о записях к врачам, сделать интерфейс более современным и удобным для пользователей.

Анализ текущего состояния:

  • Использование стандартной таблицы Ant Design
  • Отсутствие визуального разделения данных
  • Сложность восприятия большого количества информации
  • Недостаток интерактивности

Ключевые изменения:

  • Замена компонента Table на Card из библиотеки Ant Design
  • Внедрение адаптивной сетки с использованием Row и Col
  • Добавление русской локализации текстов интерфейса
  • Улучшение визуального отображения данных записи
  • Добавление состояния выделения выбранной карточки
  • Сохранение всёй существующей функциональности (навигация, действия)

Пример промпта для AI:

Необходимо переработать компонент списка записей к врачам. 
Текущая реализация использует обычную таблицу, необходимо:
1. Заменить Table на карточное представление с использованием Card из Ant Design
2. Сделать адаптивную сетку для отображения карточек
3. Перевести интерфейс на русский язык
4. Добавить выделение выбранной карточки с анимацией hover
5. Сохранить всю существующую функциональность (навигация, действия)

Пример результата доработки:

Код компонента DoctorAppointmentList после 1 доработки - DoctorAppointmentList-2.tsx

Доработка #2: Создание календарного представления​

Цель: Создать удобный календарный интерфейс для просмотра расписания врачей по дням недели с возможностью навигации по периодам.

Ключевые изменения:

  • Переход к табличному представлению с врачами по вертикали и днями недели по горизонтали
  • Добавление навигации по неделям (предыдущая/следующая неделя, переход к текущей дате)
  • Внедрение цветового кодирования записей по времени суток
  • Улучшенное отображение информации о записях в компактном формате
  • Добавление интерактивных элементов для выбора записей

Пример промпта для AI:

Нужно кардинально переработать компонент в календарный вид:
1. Создать таблицу где по вертикали - список врачей, по горизонтали - дни недели (7 дней)
2. В ячейках таблицы отображать записи врача на конкретный день в виде мини-карточек
3. Добавить навигацию по неделям: кнопки "предыдущая/следующая неделя" и "сегодня"
4. Реализовать цветовое кодирование записей по времени (утро: 8-12, день: 12-18, вечер: 18-22)
5. Сохранить возможность выбора записи и действия редактирования/удаления
6. Начинать неделю с понедельника
7. Выделять текущий день
8. Добавить красивые эмодзи для улучшения UX

Пример результата доработки:

Код компонента DoctorAppointmentList после 2 доработки - DoctorAppointmentList-3.tsx

Заключение​

Использование AI-ассистентов для доработки кода требует осознанного и структурированного подхода. Качество результата напрямую зависит от качества промпта, понимания возможностей инструмента и умения правильно интерпретировать результаты. Итеративный подход позволяет достичь нужного результата даже при работе со сложными компонентами, постепенно улучшая функциональность и пользовательский опыт.

Важно помнить, что AI-ассистенты являются мощными инструментами, но не заменяют необходимость понимания принципов программирования, архитектуры и best practices. Они лучше всего работают в качестве "усилителей" человеческого интеллекта, помогая ускорить разработку и предлагая новые идеи.

Ключевые принципы успешной работы с AI-ассистентами:

  • Четкость и конкретность в формулировках
  • Предоставление полного контекста и технических деталей
  • Итеративный подход к доработке с валидацией каждого шага
  • Структурированное планирование и документирование изменений
  • Готовность к корректировке промптов при необходимости
  • Постоянное обучение и адаптация к новым возможностям AI
  • Сохранение критического мышления и human oversight
  • Этичное использование AI-инструментов в разработке

Будущее разработки неразрывно связано с AI-технологиями, и умение эффективно работать с AI-ассистентами становится ключевым навыком современного разработчика. Важно развивать этот навык планомерно, изучая новые инструменты и техники, но при этом сохраняя фундаментальные знания и навыки программирования.

Ссылки​