Бесплатный конспект к уроку

В видео Валера, преподаватель Айти-Инкубатора, рассказал про 4 темы:

6. Работа с изображениями. Загрузка изображений, FormData, react-toastify

• Загрузка дефолтной картинки

• FormData- теория и практика

• input type="file"

• Реализация загрузки изображения

• Ограничение загрузки по типу файла

• Ограничение загрузки по размеру

• Реализация удаления изображения

• Рефакторинг / декомпозиция кода

• Внедрение React toastify для отображения ошибок
  
  7. Searching and Pagination. Query параметры, debounce
   

• Работа с query параметрами

• Реализация поиска

• Debounce - теория, реализация и пояснение кода

• Пагинация - теория, реализация и пояснение кода

• Добавление селекта для выбора размера страницы (pageSize)

• Рефакторинг / декомпозиция кода
  
  8. Cache. Методы для работы с кэшем. Получение данных на другой странице
   

• Кэширование теория

• KeepUnusedDataFor

• RefetchOnFocus

• RefetchOnReconnec

• Polling

• Получение данных на другой странице
  
  9. Infinity Queries. flat, flatMap, load more, IntersectionObserver, курсорная пагинация
  

• Infinity Queries - теория

• Курсорная пагинация - теория и реализация

• Реализация пагинации при отрисовке треков.

• Методы массивов flat и flatMap на практике

• Реализация подгрузки данных по кнопке (load more)

• Infinity scroll - теория

• Использование Intersection observer для реализации бесконечной подгрузки данных

• Декомпозиция. Вынесение логики в кастомный хук useInfiniteScroll

• Домашнее задание: Offset Pagination

Три кита AI‑driven разработки

Наш подход держится на трёх опорах:

1. LLM. Мы используем языковую модель (например, Claude Sonnet) для генерации решений.

2. Контекст. Это структура знаний о проекте, которая превращает идеи в понятные инструкции. AI должен «понимать», о чём речь, иначе будет гадать на кофейной гуще.

3. Соглашения. Чёткие правила взаимодействия с моделью и средой разработки. Наши документы – это «договорённости» о том, как вести проект, какие инструменты использовать, чего избегать и что делать в первую очередь

Шаг 1. Фиксация идеи

Любой проект начинается с идеи: «хочу умного ассистента на базе LLM, оформленного как Telegram‑бот». Вместо того чтобы хранить это в голове, пишем в файл idea.md и просим AI структурировать мысль. Модель превращает хаотичное желание в чёткую формулировку: цель, функции, взаимодействие с пользователем

Промпт 1. Фиксация идеи - idea.md

Зафиксируй мою идею по разработке LLM-ассистента в файле.

LLM-ассистент должен быть выполнен в виде Telegram-бота.

Основной задачей бота является вести диалог с пользователем и отвечать на его вопросы.

Шаг 2. Проектирование: vision.md

Следующий шаг – документ vision.md, где мы вместе с AI разрабатываем техническое видение проекта: определяем стек (Python, Telegram SDK, API для LLM), принципы разработки (KISS, MVP, YAGNI), структуру кода, архитектуру, модель данных, способы интеграции и мониторинга LLM, сценарии работы, подход к деплою и конфигурации. Главное – избегать оверинжиниринга: минимальный набор компонентов для проверки гипотезы, всё лишнее – потом.

# Промпт 2. Генерация видения - vision.md

Давай создадим файл vision.md

В нем мы отразим техническое видение проекта @idea.md:

- технологии

- принцип разработки

- структуру проекта

- архитектуру проекта

- модель данных

- работа с LLM

- мониторинг LLM

- сценарии работы

- деплой

- подход к конфигурированию

- подход к логгированию

Данный документ будет служить нашей отправной точкой и техническим проектом для последующей разработки.

Давай создавать последовательно.

Проанализируй состав документа.

Иди последовательно по разделам.

Задавай мне вопросы, предлагай итоговое видение, после согласования со мной фиксируй в документе.

После переходи к следующему разделу.

Самое главное:

Нам нужно создать максимально простое решение для проверки своей идеи, по принципам KISS.

Никакого оверинжиниринга.

Только самое необходимое и простое во всех разделах!

Шаг 3. Соглашения и запреты

Мы заключаем с AI «контракт» в файле conventions.md. Тут описываем, как писать код (простые функции, одна ответственность на файл), как структурировать проект, и – что особенно важно – что не делать. Эти правила отражают наши ценности: KISS, YAGNI, модульность. Они помогают модели понимать, чего мы от неё ждём.

ПРОМПТ 3. Генерация соглашения по разработке - conventions.md

Создай файл conventions.md c правилами для разработки кода для передачи их code ассистенту, который будет генерировать код

Правила должны отражать все главные наши принципы разработки из документа vision.md и ссылаться на сам документ vision.md, не дублируя информацию из него.

Правила должны быть лаконичными, по принципу KISS, не содержать лишнего, только главное влияющее на качество

Шаг 4. План работы: tasklist.md

Разбиваем проект на небольшие итерации и фиксируем в tasklist.md. Каждая задача снабжена чек‑боксом, датой начала и завершения, есть поле для отчёта о прогрессе. Такой формат помогает модели работать по шагам: сначала сделать echo‑бот, затем подключить LLM, потом добавить память и обработку ошибок, далее – логирование, контейнеризацию и т.д. Чем меньше задач в одном запросе, тем легче модели удержать контекст и тем точнее она работает.

ПРОМПТ 4. План работы - tasklist.md

Создай пошаговый итерационный план разработки: doc/tasklist.md

Каждый шаг должен позволять протестировать работу бота.

Каждая итерация добавляет новый функционал.

Сверху отведи место для отчета по прогрессу, который будет обновляться после каждой итерации.

Отчет красивый в таблице, со статусами, иконками.

Каждая задача должна быть отмечена чекбоксом для наглядного отслеживания прогресса

План тоже должен быть лаконичным, содержать только главное и следовать принципу KISS

Шаг 5. Workflow.md: правила игры

Теперь нужно установить, как именно мы работаем вместе. В workflow.md описываем процесс: планируем итерацию, согласовываем с AI предложенный код, тестируем, вносим правки, отмечаем прогресс, делаем коммит, только потом переходим к следующей итерации. Модель учится «есть слона по кусочкам»: сначала думать, потом обсуждать, потом кодировать, и всегда ждать подтверждения перед следующими шагами.

ПРОМПТ 5. Соглашение по процессу работы - workflow.md

Создай файл doc/workflow.md с правилами выполнения работ по тасклисту tasklist.md,

чтобы проинструктировать кодового ассистента о разработке нашего бота по vision.md

Важно:

- выполнять работу строго по плану

- перед каждой итерацией вначале согласовывать предполагаемое решение с отрезками кода

- после согласования реализовывать

- после чего ожидать подтверждения

- обновлять прогресс в тасклисте

- отмечать выполненные задачи

- согласовывать переход к следующей итерации

- делать коммит в репозиторий

Workflow должен быть лаконичным, содержать только главное и следовать принципу KISS

Шаг 6. Cursor Rules: настройка IDE

В редакторе Cursor есть механизм «правил» (.mdc), который позволяет автоматически подмешивать нужные документы в контекст модели. Мы копируем conventions.md и workflow.md в каталог .cursor/rules и отмечаем режим Always – AI всегда будет помнить наши договорённости.

Шаг 7. Генерация кода и эволюция проекта

Теперь всё готово для практики. Мы начинаем с простого: структура репозитория, echo‑бот, конфигурация. AI анализирует план, предлагает код, мы согласовываем и получаем первый рабочий бот. Далее итерации добавляют интеллект (интеграция LLM), память (хранение контекста), обработку ошибок, мониторинг и логирование, контейнеризацию через Docker и автоматизацию Makefile. После каждой итерации у нас на руках минимально работоспособный продукт (MVP), который можно протестировать.

ПРОМПТ 6. Начинаем разработку по плану

Начинаем работу над проектом vision.md строго по тасклисту tasklist.md

Шаг 8. Onboarding‑документация

В финале мы просим AI написать документацию для новых разработчиков: как развернуть проект, как получить ключи API, какие есть сценарии и где что находится. Так мы получаем не только рабочий код, но и понятный для человека пакет: doc/intro.md, диаграммы, инструкции.

ПРОМПТ 7. Создание технической документации

Создай техническое описание разработанного проекта для быстрого ознакомления с проектом новому разработчику

Используй не только текст, но и примеры кода, ссылки на файлы, диаграммы и другую визуализацию

Сохрани описание в файл doc/intro.md

Выводы

Всё, что мы делаем, – это применяем хорошие старые практики Software Engineering в новой реальности AI‑кодинга. Структура, документация, итеративная разработка – никаких чудес, просто системный подход. AI‑driven подход превращает разработчика в архитектора, который управляет процессом на высоком уровне и делегирует рутинные операции ИИ.

Почему это работает?

Потому что контекст – основа качества генерации: чем лучше мы сформулируем задачу, тем меньше сюрпризов получим на выходе. Соглашения и правила – наш щит от «вайб‑кодинга», когда модель творит произвольные штуки. А поэтапный план помогает не потеряться и не перегружать LLM.

Пусть ИИ остаётся вашим ассистентом, а не конкурентом. Семь раз отмерьте: подумайте об архитектуре, подготовьте контекст, договоритесь с моделью. И только потом один раз сгенерируйте – результат вас приятно удивит.

Больше полезной, ценной и практической информации об ИИ мы публикуем в нашем Telegram-канале AI.Dialogs. Там же мы рассказываем о наших обучающих программах AI-кодингу ИИ-агентов, кейсах и опыте в консалтинге и разработке ИИ-решений! Присоединяйтесь. По любым вопросам и предложениям пишите мне в Telegram smirnoff_ai.