Transcription
Облако — это больше не просто чат-бот. Это агент искусственного интеллекта, который может фактически писать, тестировать и исправлять ваш код непосредственно в вашей IDE. И в этом видео я покажу вам, как установить Cloud Code в ваш Visual Studio Code. Здесь вы также увидите, как подключить ваши API-ключи, как использовать его и создавать проекты.
Прежде чем Visual Studio Code сможет это сделать, нам нужен движок. Поэтому нам нужно получить Cloud Code. Что вы можете сделать, так это зайти в браузер, просто найти Cloud Code, затем перейти на этот веб-сайт. И здесь у вас будет эта команда. Вам нужно будет скопировать это. Так что это фактически инструмент командной строки Anthropic's Agentic CLI. Это то, что позволяет Cloud фактически выполнять команды и записывать вашу файловую систему.
Чтобы выполнить это, в начале вам нужно убедиться, что у вас установлен Node.js. Так что, если у вас не установлен Node.js, зайдите на этот веб-сайт, установите его на свою машину, а затем, наконец, откройте терминал и вставьте команду, которую вы только что скопировали отсюда. Так что скопируйте эту команду и вставьте ее сюда, нажав Ctrl+V. Затем нажмите Enter.
Через несколько секунд вы увидите "Настройка Cloud Code", "Установка Cloud Code native build latest". Процесс занимает несколько секунд. Хорошо, готово. Вы увидите что-то вроде этого. Там говорится: "Вам нужно добавить путь к вашему локальному бинарному файлу". Хорошо, поэтому мне нужно будет выполнить эту команду. Иногда это на самом деле не требуется для вас. Если вы видите что-то вроде этого, тогда вы просто выполните эту команду, в противном случае вы проигнорируете. Хорошо.
Итак, позвольте мне нажать Enter, и это добавлено. Как убедиться, что Cloud Code установлен на вашей машине? Вы можете просто набрать Cloud пробел {тире} {тире} version. И если вы нажмете Enter, вы увидите здесь такой тип номера версии. Это означает, что вы используете Cloud Code версии 2.1.114. Хорошо.
Итак, после установки Cloud Code, что дальше? Мы перейдем к Visual Studio Code. И здесь вам нужно установить расширение. Так что перейдите на эту вкладку расширений. Здесь просто найдите Cloud, затем вы получите это расширение. Вы можете видеть, что это расширение от Anthropic и оно проверено. Нажмите на это расширение, и вам нужно будет его установить. Позвольте мне довериться и установить. Хорошо.
Когда оно фактически установлено, вы увидите этот значок. Это Cloud Code. Вы можете напрямую нажать на этот значок, чтобы открыть что-то вроде этого. Или есть другой способ, вы можете использовать CLI. Так что вам нужно будет ввести команду Cloud в терминале. Так что обоими способами вы можете это сделать.
Чтобы использовать его, вам действительно нужна подписка Cloud AI, учетная запись Anthropic console или сторонние интеграции. Так что для фактической подписки Cloud AI, например, у вас есть план Cloud Pro или командный план, просто войдите, нажав здесь. Так что это самый простой способ для частного лица. А для учетной записи Anthropic console, для этого вам нужно будет перейти, позвольте мне показать вам. Вы откроете новую вкладку. Здесь вы найдете Cloud console, затем перейдете на эту платформу.cloud.com. И здесь вам нужна учетная запись. И оттуда вы можете просто получить API-ключ. И имея API-ключ, вы можете просто подключить свой Cloud Code здесь. Так что для этого вам придется платить по мере использования. Это обычно для доступа к более высоким лимитам скорости. Хорошо.
А затем, это фактически для сторонних интеграций. Это расширение также поддерживает Bedrock, Foundry или Vertex AI для фактического Cloud Code. Bedrock для AWS. Vertex для Google Cloud. Если ваша компания имеет это для безопасности и соответствия требованиям, тогда выберите эти параметры. Поскольку у меня есть подписка Cloud, я нажму этот вариант. Но пока, позвольте мне показать вам из терминала. Вы можете сделать то же самое, открыв свой терминал и просто набрав Cloud. Если вы нажмете Enter, вы получите этот интерфейс. Вы можете нажать Enter еще раз.
Так что это фактически для выбора темы. Вы можете выбрать темную тему, вы можете выбрать светлую тему. Хорошо. Для меня, на самом деле, второй вариант подходит. Затем вы увидите то же самое. Вы можете продолжить с Cloud Code с подпиской, учетной записью Anthropic console и сторонней платформой. Как я описал все эти три вещи. Хорошо. Так что отсюда вы можете выбрать любой из них, нажимая клавиши со стрелками вверх и вниз. Для меня, на самом деле, у меня есть подписка Pro, поэтому я выберу первый вариант, а затем нажму Enter.
Теперь он перенаправит вас в браузер, затем вам нужно будет авторизоваться. Если ваша учетная запись не вошла в систему, вам нужно будет войти в нее. Теперь вы можете закрыть окно. Так что это фактически добавлено. Так что прямо сейчас, если вы вернетесь в Visual Studio Code, вы увидите "Вход выполнен успешно" и нажмите Enter, чтобы продолжить. Хорошо. Мне придется нажать Enter.
Теперь он говорит, что это фактически примечание по безопасности, Cloud может ошибаться, поэтому вам придется убедиться, что вы используете его и проверяете, когда вам это нужно. Так что позвольте мне нажать Enter. Затем здесь вы увидите что-то вроде этого. Для оптимального опыта кодирования введите рекомендуемые настройки. Так что я выберу "да", использовать рекомендуемые настройки. Затем он спрашивает: "Доверяете ли вы этой папке?" Да, я доверяю этой папке.
И здесь вы увидите, прямо сейчас вы можете видеть, это фактически Cloud Sonnet 3.6. Я использую учетные записи Cloud Pro. Хорошо. Так что здесь, что вы можете сделать, если вам нужно изменить любую модель, вы можете просто набрать model и затем нажать Enter. Затем вы увидите, по умолчанию, он фактически использует Sonnet 3.6. Это для повседневных задач. Если вам нужно работать с более сложными задачами, тогда вы выберете Opus. И есть модель Haiku. Хорошо. Так что отсюда вы можете просто выбрать любую модель, которая вам нужна. И я использую модель по умолчанию, поэтому я могу просто выйти из нее. Так что нажмите Escape, чтобы выйти.
И здесь вы можете просто делать что угодно. Например, вам нужна инициализация. Поэтому вы можете просто ввести команду forward slash init. И затем он фактически инициализирует файл cloud.md с документацией по кодовой базе. Так что прямо сейчас у меня здесь ничего нет. Так что он говорит, что вам нужны какие-то файлы, затем снова запустите init, и он сгенерирует фактическую документацию на основе этого. Хорошо. Так что давайте сделаем это. Я собираюсь перейти в каталог проекта. И, например, давайте у меня будут эти файлы здесь. И теперь я сделаю ту же команду, init, затем нажму Enter. Хорошо.
Так что прямо сейчас он фактически читает все мои файлы, а затем он создаст файл cloud.md. Это инструкция о том, как Cloud Code читает ваши файлы и папки и получает представление о том, что вы собираетесь здесь делать. Теперь вы можете видеть, что это ваш файл cloud.md. Это сводка для ваших проектов. Вы можете видеть, что это статичный одностраничный веб-сайт для бренда природы с темой природы, созданный с использованием ванильного HTML, CSS и JavaScript. Никаких инструментов сборки, никаких фреймворков, никакого NPM. Хорошо.
Говорит: "Нужно ли вносить эти изменения в Cloud?" Да. Для этого, на самом деле, разрешить все изменения во время этой сессии. Я выберу второй вариант. И теперь вы можете видеть, что файл cloud.md здесь. Это ваш файл cloud.md. Так что когда вы используете это, на самом деле, когда у вас есть существующая кодовая база, и вы хотите сообщить Cloud о своих проектах, тогда у вас будет эта команда, forward slash init. Хорошо. Так что я надеюсь, вы понимаете.
Так что пока, для целей тестирования, что мы можем сделать, например, прямо сейчас, позвольте мне свернуть это. Прямо сейчас, если я зайду в файл index.html и перейду в режим "live", вы увидите, что это мой веб-сайт. Хорошо. Это очень простой веб-сайт. И давайте попробуем добавить переключатель светлого/темного режима на мой веб-сайт. Как вы можете это сделать?
Чтобы сделать это, давайте вернемся сюда. И нам нужно сказать что-то, я хочу реализовать темный {косая черта} светлый режим на моем сайте. Сохраняйте цветовую согласованность, когда добавляете темный и светлый режим. Хорошо. Так что здесь, позвольте мне показать вам кое-что. Посмотрите сюда, если вы просто введете эту команду, Cloud фактически напишет код для вас, потому что вы находитесь в режиме принятия изменений. Это означает, что он будет писать код напрямую без планирования.
Если вы хотите спланировать, прежде чем Cloud просто напишет код для вас, вы можете перейти в режим планирования. Как вы можете это сделать? Нажмите Shift + Tab. Хорошо. Так что, если вы нажмете Shift и Tab, тогда посмотрите, прямо сейчас это в режиме планирования. Режим планирования на самом деле очень, очень специфичен. Он фактически реализует план того, какую функцию вы хотите реализовать на своем сайте. Он фактически не будет писать код для вас. Хорошо.
Так что я нажму Shift+Tab, чтобы перейти в этот режим планирования. Если вам нужно перейти в режим редактирования, тогда вы можете просто снова нажать Shift+Tab. Затем вы можете видеть, что редактирование принято включено. Хорошо. Я сначала перейду в режим планирования, затем спланирую это. Так что позвольте мне нажать Enter.
Теперь вы можете видеть, позвольте мне изучить вашу кодовую базу, понять текущую цветовую систему. И здесь он изучит ваш файл index.html, файл design.md, затем поймет цветовую согласованность вашего сайта, реализует план для этого. Если вы примете план, тогда вы сможете выполнить код. Если вам нужен расширенный вид, вы можете просто нажать Ctrl+O, затем вы можете видеть, что он фактически думает. Вы можете просто увидеть здесь. Хорошо, это очень интересно. Просто нажмите Ctrl+O еще раз, и он просто свернется. Чтобы развернуть его, вам придется нажать Ctrl+O.
Хорошо, теперь у меня есть все, что мне нужно. Позвольте мне написать план. Так что прямо сейчас он фактически планирует. Хорошо. Так что он фактически выполнил планирование. Говорит: "Вот все". Вы можете просто прочитать это. И если вы проверите, тогда вы можете просто, да, автоматически принять изменения, или вручную улучшить изменения. Или я просто пока, на самом деле, да, автоматически приму изменения.
После этого, на самом деле, посмотрите, он реализует переключатель темного/светлого режима. Так что план одобрен. Он фактически обновляет ваши корневые переменные. Посмотрите, он обновляет вашу корневую переменную. И посмотрите, это фактически для системы темного режима. Здесь, что фактически реализовано. Вы можете видеть эту сводку. И прямо сейчас он говорит: "Откройте index.html в вашем браузере и нажмите на значок круга, чтобы переключиться. Хорошо, давайте посмотрим, как это реализовано здесь.
Посмотрите, он реализовал здесь переключатель темного/светлого режима, и прямо сейчас вы можете видеть, и если я нажму, это фактически светлый режим. Вы можете видеть прямо сейчас, вы видите светлый режим, а теперь, если вы нажмете туда, вы увидите, что это фактически темный режим. Так что это реализовано идеально, и я доволен. Так что я поделюсь множеством советов и хитростей. Если вам просто интересно, оставьте мне комментарий, и на этом я закончу это видео, и если вам нужна какая-либо конкретная тема, просто поделитесь со мной, и я поделюсь с вами своими знаниями. Спасибо.