Transcription
Я был бесконечно разочарован ИИ-кодированием, и мне совсем не удавалось заставить эти кодовые агенты работать должным образом. Но затем я сел и создал простую трехэтапную систему, которой я поделюсь с вами в этом видео сегодня, потому что эта система помогает мне быть гораздо более последовательным, и я хочу поделиться ею, потому что я думаю, что каждый заслуживает того, чтобы научиться правильно кодировать с помощью ИИ, потому что именно так мы можем вместе создавать гораздо более крутое программное обеспечение. Итак, друзья, давайте приступим, чтобы показать вам, что система работает. У меня открыто полное приложение full stack в моем редакторе кода, и я просто быстро покажу, о чем это приложение. Итак, в моем браузере страница уже открыта, и это просто веб-приложение, которое я разрабатываю, чтобы вы могли изучать ИИ-инженерию в масштабе. Это полнофункциональное веб-приложение с обычными пользователями, администраторами, создателями курсов и, конечно же, типичными функциями, такими как вход в систему, регистрация, просмотр вашей панели управления, наличие собственного пользовательского профиля. И, конечно же, часть этого явно еще находится в стадии разработки, но приложение уже функционально, и это полнофункциональное приложение. Теперь то, что мы будем реализовывать сегодня, — это страница обзора курсов, потому что если я нажму на страницу "курсы", вы увидите, что она перенаправляет на 404, потому что я еще не реализовал это. Теперь большая ошибка, которую совершают многие люди, независимо от того, какой ИИ-редактор они используют, заключается в том, что они заходят в агента и просто набирают "создай для меня страницу курсов с функциями X, Y и Z". Но на самом деле, если вы подходите к этому итеративно и сначала даете агенту понять, как решение работает в данный момент, каковы ваши точные требования к функции, а затем ваш конкретный запрос, вы увидите, что ваши результаты будут намного лучше. Поэтому я собираюсь начать с того, что дам модели хорошее представление о том, как наше решение работает в данный момент, потому что именно так вы будете работать как разработчик программного обеспечения. Вы не начинаете без каких-либо знаний о том, как работает приложение. У вас есть ментальная модель того, как работает приложение. И поэтому аналогично вам нужно предоставить ИИ-агенту ментальную модель приложения. И не волнуйтесь, если это звучит сложно. На самом деле это довольно интуитивно, и я проведу вас через все сегодня. Итак, давайте приступим к шагу первому, предоставим ИИ-модели ментальную модель того, как работает приложение. Итак, когда вы работаете с существующим репозиторием кода, вместо того, чтобы пытаться просто вставить ИИ-кодирование прямо в него, вам нужно убедиться, что ваш ИИ-редактор кода действительно понимает, как приложение работает в первую очередь. Теперь, когда вы задаете ИИ-агенту, такому как Copilot, вопрос вроде "можешь ли ты добавить функцию XY Z", обычно он пытается просканировать несколько файлов, чтобы получить общее представление о том, как работает приложение. Но гораздо лучше всегда предоставлять ментальную модель всего приложения системе ИИ-кодирования. И это стратегия номер один. Вам нужен четкий документ, описывающий всю архитектуру вашего приложения с разных точек зрения. Так как же нам к этому подойти? Ну, на самом деле я хочу дать Copilot инструкцию сначала исследовать мой репозиторий и подробно описать, как он работает, включая технические диаграммы, написанные с помощью mermaid. Теперь, если вы не знаете Mermaid, не волнуйтесь. Мы разберемся с этим. Но это важная стратегия, чтобы убедиться, что на любой последующий вопрос система ИИ ответит гораздо точнее. Итак, давайте введем запрос, который фактически позволит Copilot исследовать весь репозиторий и создать этот архитектурный документ. Итак, мы попросим его исследовать весь репозиторий, чтобы понять кодовую базу с разных точек зрения: как архитектор программного обеспечения, разработчик программного обеспечения и менеджер продукта, потому что вам также нужен этот документ, чтобы описать, что делает приложение, верно? Я хочу, чтобы вы скомпилировали свои выводы в очень обширный markdown-документ в корне репозитория для описания технических концепций. Вы должны включить диаграммы mermaid в этот markdown-файл. И то, что мы будем делать позже, это добавим этот файл в наши инструкции для чата C-pilot. Теперь, если вы не используете C-Pilot, а какой-то другой ИИ-редактор, это будет работать точно так же. Так что вам не нужно об этом беспокоиться. В наши дни они все довольно похожи. Итак, давайте просто позволим ему исследовать кодовую базу. И пока он это делает, я также хочу примерно объяснить вам, как здесь работает код, чтобы вы тоже знали, с чем мы работаем. Итак, вы действительно можете видеть, что он начинает читать такие вещи, как package.json, потому что это действительно полнофункциональное приложение Node.js JS, и вы можете видеть, что он начинает читать много важных конфигурационных файлов, а также нашу схему для базы данных. Так что действительно он начинает добиваться прогресса, и мы просто дадим ему поработать пару минут, и я вернусь к вам, когда он закончит. Хорошо, так что через пару минут Copilot создал этот markdown-документ AI Academy analysis. Теперь, чтобы сделать его более читабельным, я открою предварительный просмотр markdown, и тогда вы увидите, что это уже довольно большой документ. У нас есть анализ архитектуры программного обеспечения, анализ разработчика программного обеспечения и анализ управления продуктом. И если я прокручу вниз, вы увидите, что здесь довольно много диаграмм. И эти диаграммы сделаны с помощью mermaid. Так что в коде markdown вы можете увидеть, что диаграммы написаны текстом, но затем они могут быть отрисованы в markdown. И самое приятное то, что как человек я могу довольно легко интерпретировать эти диаграммы, но даже ИИ-модель может их читать и понимать. И поэтому есть диаграмма для общего потока приложения. Есть конкретная очень обширная диаграмма для аутентификации приложения. И мне потребовалось бы много времени, чтобы создать эту диаграмму вручную. Так что это уже очень приятно. А также, например, обзор всех таблиц базы данных. И если мы продолжим прокрутку, мы даже можем увидеть перспективу управления продуктом приложения. А именно, проверить, какие функции уже есть, а какие полностью реализованы, а какие нет. Теперь этот документ устареет по мере работы разработчиков над этим приложением, но самое приятное то, что вы всегда можете попросить Copilot или любую другую используемую вами систему ИИ обновить документ на основе последнего кода. Теперь, как вы убедитесь, что ваш ИИ-редактор всегда использует этот документ? Ну, в зависимости от вашего ИИ-редактора, настройка, которую вам нужно настроить, отличается, но каждый ИИ-редактор имеет эту возможность. В случае Visual Studio Code я собираюсь перейти к настройкам пользователя. И тогда у вас есть настройка под названием GitHub Copilot chat code generation instructions. И вы всегда можете включить конкретный файл в ваш разговор с co-pilot. В моем случае я собираюсь ввести новый объект. Затем я назову этот файл. И затем я дам ему пользовательское имя, потому что, конечно, мы хотим сопоставить его с этим файлом AIA Academy. Так что это будет работать только в том случае, если я нахожусь в этом репозитории AI Academy. Но это нормально, потому что, конечно, это та область, в которой мы работаем в данный момент. Так что это будет работать для меня, что здорово. Итак, я собираюсь нажать "сохранить" здесь, в правом нижнем углу ИИ-агента, потому что я доволен результатом. Затем нажмите "готово", и мы готовы к работе. Итак, у нас есть этот markdown-файл, и все готово. Итак, просто чтобы доказать, что это действительно работает, я открою совершенно новый чат, а затем я убежусь, что закрою все свои открытые файлы. И тогда давайте спросим что-нибудь вроде "кратко опиши архитектуру этого приложения, не читая новые файлы". Вот так. И тогда вы увидите здесь, что он говорит "использован один справочник", и markdown-файл A Academy analysis включен, и вы можете видеть, что он фактически дает мне весь этот вывод, например, как он построен с использованием TWIN CSS, основанный исключительно на этом markdown-файле. Так что это здорово. Мы всегда включаем соответствующий контекст приложения, не заставляя его сначала читать кучу файлов. И это здорово, потому что ИИ-системе, которой приходится читать кучу файлов, это также отвлекает ее от фактической задачи, которую вы просите ее выполнить. Теперь для шага второго я хочу разработать эту новую функцию курсов, верно? Но вместо того, чтобы просто перейти в новый чат и попросить создать страницу курсов, мне нужно быть немного более структурированным относительно требований, которые я действительно хочу для этой страницы. Итак, давайте откроем новый чат и попросим его подумать как менеджер продукта, чтобы создать PRD, документ с требованиями к продукту. Итак, я хочу, чтобы вы выступили в роли менеджера продукта для веб-приложения AI Academy. Нам нужна страница обзора курсов со стандартизированными лучшими практиками, которые вы также находите в других популярных системах управления контентом. Пока ничего не кодируйте. Вместо этого глубоко подумайте о том, какие требования нам нужны и как должна работать страница, и подробно опишите пользовательские истории в markdown-файле продукта. продукт требований. Теперь, прежде чем я просто отправлю этот вопрос, я хочу, чтобы вы осознали, что именно здесь выбор разных моделей может быть очень полезен, потому что некоторые модели лучше креативно мыслят, чем другие. Например, если я хочу использовать модель мышления, в этом случае я могу переключиться в режим запроса, а затем я могу переключиться на claw 3.7 sonnet thinking, который может быть немного более подходящим здесь, чтобы он действительно глубоко задумался над моим вопросом. Итак, я собираюсь перезапустить его без этой функции рабочего пространства. И в этом случае, поскольку мы не работаем в режиме агента, он может не создавать файл автоматически, но я могу просто вставить все, что он мне сейчас дает, в отдельный документ. Хорошо, он передал мне документ с требованиями к продукту, и я уже ознакомился с этим документом, и я был очень впечатлен им, потому что он охватывает множество аспектов того, что нам нужно. Но вы также видите здесь много ссылок, которые взяты прямо из документа анализа приложения. Например, раздел "персона пользователя" здесь. Ну, это фактически исходит из раздела "персона пользователя", который у нас есть в этом документе анализа. Так что это фактически показывает вам, насколько полезна эта пошаговая система, потому что вы будете уверены, что все ваши PRD будут фактически соответствовать всем персонажам пользователей, которые у вас есть для вашего приложения. Вы можете видеть здесь, что у вас есть студенты, наставники и администраторы. И это возвращается сюда со всеми их основными потребностями. Затем у нас есть все пользовательские истории. Например, как студент, я хочу просматривать все доступные курсы. И у нас есть гораздо больше. У нас есть функциональные требования. У нас есть много дополнительных требований, таких как производительность, отзывчивость, доступность, и не все это может быть реализовано системой ИИ за один раз. Но приятная особенность в том, что вы всегда можете итерировать и спрашивать, какие аспекты этого POD фактически реализованы в коде до сих пор. Так что вы можете сделать систему ИИ немного более ответственной за то, над чем она работает, что действительно приятно. Теперь я собираюсь щелкнуть правой кнопкой мыши здесь и скопировать весь этот ответ. Опять же, поскольку я не был в режиме агента, он не создал для меня новый документ. Но это просто потому, что я хотел использовать модель мышления. Так что в моем случае я собираюсь создать новую папку и просто назвать ее PRDS и просто поместить ее туда. Итак, мы назовем ее 0000. Э-э, вероятно, просто что-то простое, вроде course dashboard markdown, и вставим ее сюда. Хорошо. Итак, что мы делаем теперь? Ну, мы уже очень близки к тому, чтобы попросить ИИ-модель начать работу над этим. Итак, я снова создам новый чат. И поскольку я открыл этот PRD здесь, вы можете видеть, что он уже включен в контекст Copilot. Итак, я переключусь в режим агента. И затем я переключусь на, в моем случае, мне нравится claw 3.7 Sonnet. И затем я попрошу его полностью реализовать этот PRD как MVP. пока что убедившись, что вы просто используете статические данные фронтенда. Мы реализуем реальную информацию о курсах в базе данных позже. Итак, вы можете видеть здесь, как в качестве третьего шага я наконец прошу ИИ-модель начать реализацию чего-либо. Но даже тогда я не просто говорю "полностью реализуй этот PD, убедись, что все на месте". Я прошу его реализовать POD как MVP, и пока MVP для этого видео заключается в том, что я просто хотел создать все эти фронтенд-компоненты и использовать много статических данных, а затем позже он сможет изменить базу данных по своему усмотрению, и мы создадим новые фиктивные данные для вставки туда. Но я думаю, что выполнение всего этого в одном запросе, вероятно, перегрузит ИИ-модель. Итак, вы можете видеть здесь, что он снова использует эту одну ссылку, AI Academy analysis, и он ищет в кодовой базе больше релевантных документов, чтобы получить лучшее представление о том, как, например, создаются фронтенд-компоненты, и это хороший знак, потому что он, вероятно, будет хорошо следовать существующим шаблонам в репозитории. Так что это идеально. Я собираюсь просто позволить ему работать и продолжить все шаги здесь, а затем, когда ИИ-агент закончит, я вернусь к вам снова. Хорошо. Итак, я вернулся через несколько минут. Я не знаю, сколько это заняло. Я сделал себе чашку чая. Но тем временем, кажется, Copilot Agent фактически закончил. Итак, давайте проверим веб-приложение. Прежде всего, если все выглядит хорошо и наша страница курсов действительно работает. Итак, моя страница автоматически обновилась. И вы действительно можете видеть, что у нас много очень функциональных компонентов. У нас есть функция поиска. Мы можем фильтровать по разным категориям. Мы можем фактически фильтровать по двум разным представлениям. У нас есть такой маленький компонент карточки, и мы можем изменить его на большое представление списка. Мы можем фактически искать курсы. Например, я могу просто поискать NLP. И, конечно, это все фиктивные данные. Мне нужно будет перенести это в мою базу данных позже. Но это хороший подход — делать это шаг за шагом. И поскольку я делаю это так тщательно, у нас уже есть много функциональных фронтенд-компонентов, и все, что нам нужно сделать, это просто подключить их к нашей базе данных позже, что здорово. Теперь мы даже можем сортировать по, знаете ли, новейшим, алфавитным, и если мы прокрутим вниз, это кажется работает нормально. Так что кажется, что он делает различие между списком всех курсов и продолжением обучения, что, возможно, мы захотим изменить позже. Но эй, это мелкая деталь реализации. И теперь, конечно, я предполагаю, что когда я нажму "продолжить", это приведет к 404. Это вполне логично, потому что мы работаем только над страницей обзора курсов. Так что вы можете видеть, что когда вы подходите к вещам шаг за шагом, вы получаете очень последовательные результаты, и я могу продолжить теперь с своего рода итеративным циклом обратной связи, потому что я могу попросить вас продолжить прогресс по этому поводу и создать соединения с базой данных. Но способ, которым я люблю подходить к этому, — это также убедиться, что я сохраняю свой прогресс, потому что я, вероятно, не сделаю все за один чат. Теперь, когда я говорю "сохранить свой прогресс", я не имею в виду только код. Я также имею в виду прогресс того, насколько текущая реализация соответствует документу с требованиями к продукту. Поэтому, когда я вернусь в Visual Studio Code, я могу попросить его изменить исходный документ с требованиями к продукту и добавить раздел, где вы описываете, насколько далеко продвинулась текущая реализация. На практике это может быть похоже на редактирование отслеживающего вопроса GitHub или другого. И идея фактического выполнения этого агентом заключается в том, что когда вы открываете новый чат или другой разработчик продолжает работу, агент также осведомлен о том, насколько далеко продвинулась реализация в данный момент. Итак, теперь вы можете видеть, что он фактически читает весь PRD, а затем сравнивает его со всеми изменениями, которые он внес, и давайте посмотрим, какой раздел он добавит в PRD, чтобы понять, насколько мы далеки от его реализации. Теперь, как вы можете видеть, он фактически добавил новый раздел в PRD под названием "статус реализации", и вы можете видеть здесь, что он создал карточки курсов, фильтрацию и сортировку, но он также укажет, что он не реализовал. Например, вы можете видеть здесь, что есть некоторые частично требуемые. Например, вы можете видеть здесь, что есть некоторые частично завершенные требования, и у нас есть полные ожидающие требования, потому что это довольно базовая реализация, у нас нет таких крутых вещей, как ленивая загрузка или стратегия кэширования. Но именно поэтому я попросил его реализовать это как MVP. И вы даже можете видеть, что он создал для нас следующие шаги. Например, подключение интерфейса к фактической базе данных с использованием Prisma и, конечно же, впрыскивание данных. И здесь тоже вы можете видеть, что он знает, что мы используем Prisma в качестве нашей системы OM, потому что это было написано в том самом исходном архитектурном документе. Так что это просто показывает, как эти три шага действительно работают вместе, чтобы дать вам гораздо более последовательный опыт ИИ-кодирования. И небо в вашем воображении действительно предел. Так что я бы сказал: идите туда, создавайте приложения этим методом и дайте мне знать, как это работает, в комментариях ниже. Если вы заинтересованы в изучении еще более продвинутых стратегий ИИ-кодирования, то вы можете присоединиться к моему сообществу AI native engineering по ссылке в описании ниже. И я надеюсь увидеть вас.