Transcription
Курсор, ведущий редактор кода с ИИ, только что анонсировал свой самый крупный релиз за всю историю — Курсор 2.0. Теперь с этим релизом выходит совершенно новая модель ИИ для написания кода, которую команда Курсора собрала сама, а также совершенно новый интерфейс для взаимодействия с ИИ-агентами, которые модифицируют ваш код. Итак, сегодня мы рассмотрим все это и создадим приложение от начала до конца. И я покажу вам, как именно использовать все эти новые инструменты. Я хочу поблагодарить команду Курсора за предоставленный мне ранний доступ для игры с Курсором 2.0. И я был очень впечатлен продуктом до сих пор. Прежде всего, Курсор — это настольное приложение, поэтому вам нужно будет его скачать. И для этого вы просто зайдете на cursor.com, нажмете кнопку загрузки, а затем установите его. Что касается ценообразования, это платный продукт, но есть бесплатная пробная версия на одну неделю. Поэтому я предлагаю начать с нее, а затем перейти на профессиональный план, если вы считаете, что это стоит вашего времени. Имейте в виду, что это может стать довольно дорого. Так что для меня лично, как для профессионального разработчика, я попадаю в ультра-уровень и иногда использую их ценообразование на основе использования, которое описано в их документации. Хорошо. Теперь, когда вы скачали Курсор и установили его, вы откроете его. Он будет выглядеть примерно так. Курсор работает с файлами на вашем компьютере. Так что ваши варианты — это либо открыть проект, который является просто папкой на вашем компьютере, либо клонировать git-репозиторий в папку. Итак, я открою эту папку здесь, которая на самом деле является просто пустым проектом. Я пока ничего здесь не делал. И прямо сейчас мы смотрим на вид агента, что является новым в Курсоре 2.0. Они движутся к более агентивному, ориентированному на ИИ подходу, в отличие от вида редактора, который покажет вам все файлы и их содержимое. Итак, давайте пока останемся в этом новом виде агента, и посмотрим, как далеко мы сможем продвинуться. Чтобы быстро начать проект и иметь хорошую основу для работы, я собираюсь использовать create Vololo app, который является моим бесплатным и открытым стартовым набором. Вы можете проверить его на GitHub в описании, или вы можете просто попросить Курсор использовать его. Итак, я скажу: пожалуйста, используйте create Vololo app для начала проекта. И здесь мы будем использовать режим агента, который позволит Курсору фактически выполнять команды и изменять файлы. И мы будем использовать модель composer one. Это новая модель ИИ, которую команда Курсора фактически создала. Но вы всегда можете переключиться на другие ведущие отраслевые модели в выпадающем меню. Обычно я использую sonnet 45, но я с нетерпением жду возможности попробовать composer 1, потому что он очень быстрый. Итак, я отправлю этот запрос и выполню эту команду. Что это сделает, так это просто настроит базовый фронтенд, бэкенд и локальную базу данных, с которой я могу работать. Таким образом, я могу просто определить конкретные функции для моего приложения, вместо того, чтобы пытаться настроить все это с нуля. Хорошо, похоже, проект был настроен. Теперь мы можем запустить сервер. Он будет работать pnpm rundev. И я на самом деле нажму на это, чтобы увидеть, где работает приложение. Похоже, оно здесь, на порту 5501. Хорошо, вот оно. Это основа нашего приложения. Теперь я открою нового агента, который позволит мне дать Курсору свежий контекст. Таким образом, он не будет перегружен деталями настройки проекта, а вместо этого я просто сосредоточу его на конкретных функциях, которые я опишу. И для начала я хочу настроить свой проект. Я хочу создать приложение для отслеживания привычек, где вы можете сажать свои привычки, а затем видеть, как они растут со временем. Итак, я опишу все это. И я переключу этого агента в режим планирования, чтобы прежде чем он фактически что-либо построит, он создаст подробный план, которому будет следовать, и будет действовать шаг за шагом. Этот подход планирования, а затем построения действительно эффективен, потому что он позволяет вам исправить ИИ, прежде чем он пойдет и внесет кучу изменений, которые вы не обязательно хотели. Итак, я собираюсь использовать этот новый метод голосового ввода и описать свое приложение. Мы создаем приложение для отслеживания привычек, которое позволяет пользователям сажать привычки и видеть, как они растут со временем, когда они следуют этим привычкам день за днем. Я описал свое приложение и отправлю запрос. Похоже, Курсору удалось быстро изучить кодовую базу и понять, с чем мы работаем. И теперь он спрашивает меня о некоторых деталях, чтобы уточнить, что я хочу построить. Я уточнил свой план для Курсора. И теперь он начнет фактически писать этот план. И мы видим, что эта модель composer one очень быстрая. Вообще говоря, вы захотите потратить много времени на просмотр этих планов, потому что, как только ИИ реализует его, исправить его сложнее, чем сделать это правильно с первого раза. Поэтому я бы просмотрел это, а затем, когда вы будете чувствовать себя комфортно, вы можете попросить Курсор построить его. Итак, именно это мы и собираемся сделать сейчас. И он начнет работать над этим списком дел, который он составил для себя. Курсор просит меня выполнить пару команд здесь. И это прекрасная вещь в агентах Курсора — они могут просто выполнять команды. Они могут изменять файлы. Они могут читать файлы и искать данные. Они могут искать информацию в Интернете. Хорошо, Курсор закончил работу и написал для нас 12 различных файлов. Мы видим более тысячи строк кода. Теперь мы можем просмотреть эти изменения. И это еще одна часть Курсора 2.0, и весь этот новый вид заключается в том, что мы можем видеть все эти изменения файл за файлом. И это делает его намного удобнее для просмотра всего в одном месте, вместо того, чтобы переключаться между разными файлами. Итак, здесь я вижу, что он, знаете ли, удалил некоторые строки, добавил некоторые строки и быстро перемещается по всем изменениям, которые он внес. Теперь, помимо самостоятельного просмотра, вы можете нажать кнопку «Найти проблемы», и тогда Курсор сам пройдет и просмотрит код, ища любые потенциальные проблемы, которые мог вызвать агент реализации. И похоже, на этот раз агент не нашел никаких проблем. Но мне нравится видеть это направление, которое выбирает Курсор, когда планирование и просмотр являются основной частью этого рабочего процесса реализации. До Курсора 2.0 я использовал свои собственные подсказки для планирования и просмотра. Вы можете найти их на моем GitHub, но здорово видеть, что они фактически включают это в основной рабочий процесс самого Курсора. Давайте переключимся и посмотрим, как это выглядит сейчас. Хорошо, у нас есть страница привычек. Давайте создадим привычку. Это выглядит хорошо. Давайте скажем, пить воду. И мы хотим, чтобы это было ежедневно. Хорошо, похоже, есть проблема с цветом шрифта, но у нас есть некоторые растения. Давайте посадим этот цветок. Я создам его. Хорошо, это не работает. Я могу открыть инструменты разработчика и увидеть, что здесь есть некоторые проблемы. Обычно я бы скопировал и вставил это в Курсор, но я покажу вам еще одну функцию Курсора 2.0, которая заключается в том, что они добавили браузер в Курсор. Итак, здесь я нажму «Подключиться к браузеру» и нажму «Google Chrome». И здесь я скажу: «Пожалуйста, проверьте ошибки в журнале консоли браузера». Хорошо, здесь похоже, что он идет не туда. Я на самом деле остановлю его, потому что любые изменения, которые он вносит, он вносит на основе некоторых плохих предположений, потому что, когда он открыл его, он на самом деле не смотрел на приложение. Итак, я вернусь и нажму эту кнопку, которая отменит изменения, внесенные с момента этого сообщения. Таким образом, я всегда могу вернуться. И это то, что мне нравится в Курсоре. Это не встроено во многие другие приложения для кодирования с ИИ. Мне очень нравится возможность просто вернуться к предыдущей контрольной точке. Позвольте мне попробовать кое-что другое. Я скажу «вкладка браузера». Таким образом, мы сможем увидеть это прямо здесь. И я скажу: «Пожалуйста, проверьте журналы ошибок». А затем я дам ему фактический URL, чтобы он перешел в нужное место. Проверьте это. Он фактически автономно управляет этим браузером. Итак, он фактически перешел на эту страницу, проверил журналы, а затем, увидев ошибку. Теперь он обновляет API. Действительно впечатляет видеть такой уровень взаимодействия прямо в редакторе кода. Итак, теперь давайте попробуем создать привычку. Создать. Хорошо, эта кнопка все еще не работает. И мне интересно, может ли он уловить журналы из моей попытки создать ее. На самом деле, знаете что? Я только что прочитал сообщение, и я думаю, это потому, что pnpm db push изначально не сработал. Итак, я открою новый терминал и выполню его напрямую. Хорошо, давайте попробуем еще раз. Создать. Бум. Вот оно. Отлично. Итак, мы смогли добавить эту привычку. Теперь давайте посмотрим на сад. Хорошо, он не совсем загружается. Похоже, у нас есть инструменты разработчика прямо здесь, которые мы можем использовать для просмотра журналов. Опять же, мне больше не нужно покидать Курсор, чтобы видеть это, верно? Я могу просто видеть, что здесь происходит. И я просто опишу это Курсору. Я просто скажу: «Я вижу эти журналы в браузере. Когда я перехожу на страницу сада, можете ли вы посмотреть?» Хорошо, похоже, Курсор смог исправить проблему. И у нас есть наш первый маленький посаженный привычка. Теперь я открою нового агента и начну итерацию над этим. И я фактически запущу двух агентов параллельно, потому что, во-первых, я хочу улучшить опыт на этой странице, а также провести некоторую очистку, чтобы удалить некоторые другие ненужные страницы. Итак, я открою нового агента и скажу: «Пожалуйста, сделайте сад страницей по умолчанию, на которую мы попадаем при переходе в приложение, и удалите другие ненужные страницы, кроме страницы привычек. Итак, мы начнем это. Затем я запущу другого агента параллельно. И я скажу: «Мы только что создали базовое приложение для отслеживания привычек. И у нас есть страница сада, которая должна позволять нам сажать наши привычки. Но на самом деле она просто автоматически сажает их для нас. И у нее просто очень скучный фон. Итак, давайте спланируем гораздо более интересный и увлекательный способ взаимодействия с приложением. И затем я переключу его в режим планирования, чтобы у нас было конкретное представление о том, как это будет работать. Похоже, другой агент закончил. Я посмотрю. И похоже, что он изменил вещи в app tsx и app sidebar. Это здорово. Итак, теперь, когда я перехожу в приложение, я вижу сад и вижу привычки. Так что все это выглядит хорошо. Я нажму «Сохранить все». Вам не обязательно. Курсор вносит изменения в файлы по мере их выполнения. Поэтому, чтобы отменить изменения, вам нужно их отклонить. Но сохранение их просто облегчает вам просмотр дальнейших изменений, но не обязательно сохранять их все время. Другой агент создал план, поэтому я просмотрю его. И предложенные изменения звучат для меня отлично, поэтому я нажму «Построить». Что мне действительно нравится в этом рабочем процессе Курсора 2.0, так это то, что он наконец-то выводит вас за рамки отдельных файлов и помогает вам сосредоточиться на конкретных функциях, которые вы разрабатываете, при этом предоставляя вам доступ к этим файлам и позволяя видеть изменения гораздо более консолидированным и оптимизированным способом. Курсор закончил эту другую функцию. Так что я могу просмотреть ее. Я могу посмотреть на отдельные файлы. Но давайте посмотрим, как это выглядит в браузере. Позвольте мне снова создать привычку. Похоже, у него снова проблемы с API. Поэтому я попрошу его исправить это. Похоже, он правильно определил, что нам нужно добавить пару полей в базу данных, и создал здесь новый файл миграции. И когда вы работаете над реальным приложением, вы всегда будете погружаться в такие вещи, когда получаете ошибки и вам приходится иметь дело с базой данных. И если вы не понимаете основ программного обеспечения или как использовать эти инструменты, может быть трудно добиться прогресса. Поэтому, если вы хотите научиться использовать эти инструменты и как создавать реальный продукт, ознакомьтесь с моим курсом «AI Coding for Entrepreneurs». Он на Skillap AI. Есть бесплатная пробная версия, и мы проходим весь путь от начала работы с ChatGPT с базовыми скриптами, переходя к lovable и созданию целевой страницы, и, наконец, используя Курсор для создания полнофункционального приложения. Я думаю, это отличный ресурс и отличный способ начать свое путешествие в области кодирования с ИИ. Теперь, чтобы исправить эту проблему, я снова запущу pnpm db push. чтобы наша база данных была обновлена, и теперь мы можем видеть привычку здесь, потому что наша база данных работает должным образом. Теперь я перейду в сад, и мы сможем фактически выбрать его и разместить на холсте. Но мне не нравится, как это выглядит сжатым. Поэтому я собираюсь использовать эту новую опцию «Выбрать элемент» и выберу все это, и это будет добавлено в качестве контекста для Курсора. Таким образом, я могу описать изменения, которые мне нужны для этих конкретных UI-элементов. И я скажу: «Давайте оставим семена привычек наверху, чтобы мы могли видеть сад во всю ширину все время». Хорошо, вот оно. Это выглядит довольно хорошо. Позвольте мне перетащить это. Похоже, его нельзя перетащить. Поэтому я добавлю это как задачу. Но пока я могу нажать на нее и разместить. Я поставлю ее прямо здесь. Отлично. Теперь я вижу, что когда я прокручиваю, он как бы масштабируется и прокручивается одновременно. Так что это проблема, которую я хочу исправить. И я просто составлю список этих небольших правок и предоставлю Курсору, и он просто проработает их все. Я попрошу его исправить эти пару проблем. И тогда я фактически открою отдельного агента, чтобы мы могли добавить страницу для отслеживания этих привычек. Я описал свою функцию, и теперь я покажу вам еще одну очень мощную вещь о Курсоре 2.0, и это возможность запускать несколько агентов параллельно. Итак, я собираюсь начать с двух. Мы заставим Курсор реализовать эту функцию дважды, и мы сможем сравнить разные версии. Таким образом, мы сможем выбрать, какую из них использовать. Это может значительно ускорить разработку, особенно когда вы делаете что-то творческое и хотите увидеть разные идеи. Вы также можете выбрать разные модели для запуска параллельно. Итак, давайте скажем, мы хотим запустить один с composer 1, а другой с sonnet 45. Итак, у нас будет три из них, работающих одновременно. И давайте отправим их. Мы видим, что они работают параллельно. И когда им нужно, чтобы я что-то сделал, там есть маленький значок, который будет меня уведомлять. Похоже, два composer'а закончили, и sonnet 45 заканчивает. Теперь, что касается просмотра результатов этих разных агентов, вы можете увидеть все файлы, которые они изменили здесь, и просмотреть их справа. Но видеть, как это обновляется в пользовательском интерфейсе, немного сложнее. Поэтому вам нужно нажать кнопку «Применить все», и это применит изменения этого конкретного агента к вашей основной ветке. Таким образом, вы можете увидеть это в своем пользовательском интерфейсе и в вашем фактически работающем программном обеспечении. Итак, теперь я переключусь обратно сюда, и мы видим, что теперь есть целый вид календаря. Теперь, если я хочу посмотреть другую ветку, я отменю применение и перейду к другой и нажму «Применить» на ней. Теперь, если я переключусь, похоже, этот конкретный агент не смог импортировать определенный элемент здесь. Так что я могу просто отказаться от этой ветки и использовать ту, которая работает. Просто просматривая ее снова в браузере Курсора, и я очень доволен тем, как это выглядит. Так что я могу пометить это как завершенное, и мы видим это отраженным в календаре. Я могу перетаскивать, и это функция, которую мы добавили в другом агенте, который работал параллельно. Так что вы можете начать видеть, как это действительно становится полноценным приложением. Теперь, если я вернусь к этому позже и не буду знать, что происходит, я могу просто открыть нового агента и спросить, как это работает. Итак, здесь, например, я спрошу, как мы отслеживаем серию привычек, и Курсор прочитает все файлы, придумает ответ. Это то, что я фактически сделал недавно в create volo app, когда я вернулся к проекту через 3 месяца после работы над ним, и я не был уверен, как развернуть новую версию. Поэтому я просто спросил Курсор. Он прочитал все мои файлы и напомнил мне о правильном способе публикации новой версии create volo app. Я заметил, что на этой странице было написано «ноль дней», хотя в календаре была фактическая серия. Поэтому я спросил, почему это может происходить, и Курсор снова просмотрел множество разных файлов, чтобы выяснить, что вызывает эту проблему. Так что вы можете видеть, что это фактически работает в реальной кодовой базе. он может находить соответствующие файлы и добираться до первопричины любой проблемы, которая у вас может возникнуть. Он даже предложил мне решение. Итак, я переключу это в режим агента и скажу: «Пожалуйста, реализуйте это в моем коде». Теперь, когда я обновлю, мы увидим, что у него есть фактическая серия. Так что это выглядит довольно хорошо. Итак, все, что мы здесь рассмотрели, — это практически совершенно новый Курсор 2.0. Вы всегда можете вернуться в редактор и видеть все свои файлы бок о бок. Вы по-прежнему можете использовать новый браузер Курсора внутри здесь, который может быть очень мощным способом взаимодействия с агентом Курсора. Это более традиционный вид прямо в редакторе. Мы видим все наши файлы сбоку. Здесь у нас есть содержимое. Теперь мы видим браузер. Мы видим эти файлы плана. И, конечно же, у нас всегда есть наш чат справа. Так что у вас по-прежнему есть доступ ко всем этим оригинальным функциям, но мне кажется, что вид агента Курсора 2.0 — это очень эффективный способ создания программного обеспечения, теперь, когда мы думаем о нем больше на уровне функций, а не на уровне отдельных файлов или отдельных функций. Если вы хотите узнать больше об этих традиционных функциях Курсора, обязательно посмотрите это другое связанное видео, которое более подробно расскажет об этом. Теперь я также хочу поделиться обновлением канала, которое заключается в том, что я немного изменю формат. Я понял, что мои видео немного разрознены. Есть учебники, обзоры моделей, многочасовые сборки, материалы для новичков и экспертов, и я хотел придумать формат, который взял бы лучшие аспекты всех этих разных типов видео и сделал бы что-то более последовательное, ценное и научил бы вас кодированию с ИИ в контексте создания реальных проектов. Поэтому в дальнейшем канал немного изменится. Вместо того, чтобы проводить такие учебные пособия, основанные на инструментах, я буду создавать классные вещи, и это больше соответствует тому, что я хочу делать. В любом случае, и в процессе я покажу вам все различные ИИ-инструменты, которые я использую, как я решаю различные проблемы, и вы увидите, как я создаю что-то классное. Я планирую начать с трех видео, выпущенных одновременно в ближайшие несколько недель, и это будет начало новой главы для канала. Так что я надеюсь, вам понравятся новые видео, и спасибо за вашу поддержку. Как всегда, спасибо за просмотр. Берегите себя.