Claude Code только что уничтожил все агентства Shopify
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Настраивать магазины Shopify стало проще, чем когда-либо, потому что теперь вы просто объединяете их с
00:00:04ИИ-агентами, которые пишут код, и позволяете им взять на себя всё остальное. Но простого подключения Claude Code к
00:00:09вашему магазину недостаточно. Чтобы в итоге получить магазин, который не выглядит шаблонным, как
00:00:14любой другой магазин на Shopify, вам нужно добавить несколько ключевых элементов в вашу настройку.
00:00:19К концу этого видео вы узнаете весь рабочий процесс, который можно использовать для создания вашего
00:00:23конвейера Shopify от начала до конца, чтобы сразу начать продавать свои товары.
00:00:28Вам нужно выполнить несколько шагов, чтобы подготовиться к созданию магазина. Первое,
00:00:32что вам нужно, — это партнерский аккаунт Shopify, поэтому зайдите в браузер и зарегистрируйтесь. Партнерский
00:00:37аккаунт важен, потому что он дает доступ к инструментам разработки, позволяющим экспериментировать
00:00:41с платформой. Это, по сути, песочница для ваших магазинов, где вы можете создавать свое приложение так, как
00:00:46обычно это делаете, одновременно используя инструменты разработки, такие как фиктивные платежи и тестовые пользователи,
00:00:51чтобы протестировать приложение перед запуском. А позже, если вы решите, что ваше приложение готово
00:00:56к продажам, вам просто нужно добавить платежные интеграции, и вы легко перенесете аккаунт разработчика в
00:01:01аккаунт продавца, где можно начать продавать реальные товары реальным людям.
00:01:05Теперь, когда вы создали приложение в проекте, пора установить Shopify CLI. Вы можете сделать это,
00:01:10скопировав команду установки из документации CLI и выполнив её в терминале. После выполнения
00:01:15вас попросят выбрать между приложением на React или приложением-расширением. Мы выбрали React,
00:01:20потому что мы в основном на нем и разрабатываем, и так проще настраивать приложение. После этого можно выбрать
00:01:26язык программирования, и мы выбрали TypeScript из-за его безопасности типов и функционала по сравнению
00:01:31с JavaScript. После завершения этой настройки будут установлены все необходимые зависимости для
00:01:37запуска приложения. Когда зависимости будут установлены, проект будет готов, и при запуске вы
00:01:41увидите базовый шаблон приложения, с которого можно начать вносить дальнейшие изменения. Итак, после того как CLI
00:01:46установлен, нужно установить другие вещи, начиная с набора инструментов Shopify AI,
00:01:51который дополняет процесс сборки. Самая важная его часть — это MCP, и команду установки для этого
00:01:56MCP для всех ИИ-агентов по написанию кода можно найти в документации. Поскольку мы использовали Claude Code, мы скопировали команду
00:02:03для Claude и установили MCP, вы можете сделать то же самое с любым инструментом программирования на ваш выбор. Как только MCP
00:02:08установлен, он предоставляет свои инструменты Claude, но одного MCP недостаточно, потому что все инструменты в нем
00:02:14созданы лишь для того, чтобы помочь Claude лучше писать код. У MCP нет способа отправить изменения в ваш магазин,
00:02:19работающий в облаке. Он содержит только документацию и знания об API Shopify, а также другие проверки. Поэтому
00:02:25этой настройки было недостаточно для самостоятельного создания приложения. И именно поэтому важен CLI,
00:02:30потому что это, по сути, мост между приложением Shopify и локальной настройкой. Помимо MCP, вам также нужно
00:02:35установить плагин. Плагин важен, потому что он содержит несколько агентов и навыков, объединенных вместе.
00:02:40Вы можете установить его, следуя командам установки. После выполнения команд установки,
00:02:44запустите команду перезагрузки плагинов, и все агенты и навыки будут готовы к использованию.
00:02:49Теперь основная настройка завершена, но перед тем, как вы действительно начнете создавать, нужно подготовить сам проект.
00:02:53Первым делом нужно настроить файл Claude.md, который, по сути, является файлом для руководства
00:02:59агентом по практикам, которым вы хотите, чтобы он следовал. Добавленный нами Claude.md содержит все лучшие практики,
00:03:05о которых мы постоянно говорим. У нас есть отдельное полное видео об этом, где мы рассказываем о лучших практиках для
00:03:10файла Claude.md, которое вы можете посмотреть на канале. Помимо Claude.md, вам также нужно иметь
00:03:15еще кое-что на месте. По умолчанию Claude генерирует SVG и использует их как плейсхолдеры для изображений. Но
00:03:21эти SVG не подойдут для визуала нашего магазина, поэтому мы создали навык, чтобы закрыть этот пробел. Мы создали
00:03:26навык генерации изображений Gemini, который позволяет любому агенту, в который вы его установите, вызывать Gemini CLI и
00:03:32просить его генерировать изображения для веб-сайта. Навык содержит инструкции о том, как вызывать Gemini CLI
00:03:38и куда сохранять созданные изображения. И поскольку в Gemini CLI интегрирована генерация изображений, нет
00:03:44необходимости в отдельном API-ключе, поэтому вы можете использовать этот навык напрямую, полагаясь просто на аутентификацию
00:03:50Gemini CLI. Помимо генерации изображений, мы также создали еще один навык для собственного удобства. Навык прототипирования
00:03:55работает так: всякий раз, когда вы просите агента внести изменение в дизайн, он сначала создает HTML-файл,
00:04:01который вы можете просмотреть, и как только вы это сделали, он применяет это изменение к дизайну приложения. Файл
00:04:05skill.md содержит подробности обо всем рабочем процессе, разделенном на две фазы. Как только эти навыки
00:04:11на месте, есть некоторые хуки, которые вы также настраиваете и подключаете в settings.json внутри папки .claud.
00:04:17Эти хуки, по сути, выступают в роли защитных барьеров для Claude. Например, пред-инструментальный скрипт может
00:04:22остановить Claude, прежде чем он применит изменения напрямую к приложению без вашего одобрения. Вы можете настроить столько
00:04:28хуков, сколько захотите. Итак, с этой настройкой мы были готовы к созданию приложения. Но прежде чем мы двинемся
00:04:33дальше, пара слов от нашего спонсора, Willow Voice. Если вы проводите большую часть дня, печатая электронные письма,
00:04:37сообщения в Slack, документы и запросы, вы работаете намного медленнее, чем могли бы. Willow Voice позволяет вам
00:04:42говорить вместо того, чтобы печатать где угодно на вашем компьютере, и текст появляется мгновенно. Это не как ваша
00:04:47встроенная диктовка, которая ошибается через слово. Willow в три раза точнее, и он
00:04:52на самом деле правильно форматирует всё с абзацами и структурой. Самое лучшее, что он адаптируется к тому, что вы
00:04:57делаете: формально, когда вы пишете письмо, непринужденно в Slack, и технически, когда пишете код.
00:05:02Он учится тому, как вы пишете со временем, поэтому результат звучит как вы, а не как робот. Более 100 000 профессионалов
00:05:07пользуются им ежедневно, он сертифицирован по стандарту SOC2, соответствует HIPAA и не сохраняет данные, так что ваши слова
00:05:13остаются приватными. Я использую его последнюю неделю, и возвращаться к печатанию теперь мучительно долго.
00:05:18Скачайте Willow Voice бесплатно, используя ссылку в описании. Теперь, когда это настроено, вы можете
00:05:23просто давать Claude запросы о том, что вы хотите создать. Вам нужно описать целевую страницу,
00:05:27так же, как мы упомянули стиль, которому должна следовать целевая страница. И поскольку мы
00:05:31настроили навык, он сначала загрузил навык прототипирования. Поэтому вместо того, чтобы вносить изменения напрямую в
00:05:36реальное приложение, он написал HTML-код, в котором завершил дизайн, а затем дождался нашего одобрения.
00:05:41Он также открыл дизайн в новой вкладке, чтобы мы могли просмотреть его. Первая версия, которую он создал,
00:05:46выглядела аккуратно и работала визуально хорошо, но на целевой странице использовались плейсхолдеры вместо
00:05:51изображений, где они должны были быть. Поскольку мы установили навык генерации изображений, он должен был загрузить
00:05:55это напрямую и использовать генерацию изображений с самого начала. Поэтому мы попросили его снова использовать навык
00:06:00генерации изображений и на самом деле создать изображения для этих плейсхолдеров. После того как мы дали этот запрос,
00:06:05он запустил несколько Gemini CLI через bash-инструмент и открыл их в режиме YOLO, чтобы Gemini CLI
00:06:12не блокировался никаким запросом на разрешение. Claude запустил несколько терминалов, и все они
00:06:17начали генерировать изображения параллельно. Генерация изображений занимает больше времени, поэтому приходится ждать, пока
00:06:22она завершится. Когда изображения готовы, вы можете проверить сайт, и он будет выглядеть гораздо более проработанным. И
00:06:27поскольку запросы на генерацию изображений также контролировались Claude, изображения очень хорошо соответствовали стилю UI.
00:06:33Теперь, когда визуальные элементы добавлены, веб-сайт был готов. На этом этапе вы можете итерировать дизайн.
00:06:38Поскольку у нас не было больше изменений, мы попросили Claude продолжить и внедрить приложение в магазин.
00:06:43Он задаст вам несколько вопросов о том, как вы хотите, чтобы приложение было внедрено, например,
00:06:48хотите ли вы, чтобы оно было синхронизировано с живым магазином или нет, что мы и сделали, поэтому выбрали этот вариант. Ответив на его
00:06:53вопросы, он приступил к конвертации HTML-дизайна в само приложение, не напрямую в основное приложение,
00:06:58а в созданное нами приложение для разработки. Он скопировал дизайн один в один, и вы можете сами просмотреть
00:07:03приложение, чтобы убедиться, что он полностью скопировал дизайн. Хорошо, что мы использовали HTML
00:07:08перед тем как внедрять его в приложение, потому что этот процесс занимает много времени. И если бы вы
00:07:13итерировали дизайн, используя этот процесс, это потратило бы много времени и токенов. HTML-прототипирование
00:07:18было намного быстрее и проще в итерации. Кроме того, если вам нравится наш контент, подумайте
00:07:23о нажатии кнопки “хайп”, потому что это помогает нам создавать больше контента, подобного этому, и охватывать больше людей.
00:07:28К этому моменту приложение синхронизировано с фактическим URL-адресом магазина. Дизайн, который вы только что создали, находится на
00:07:34локальном сервере для предварительного просмотра на локальной машине, а также находится внутри предварительного просмотра темы, где
00:07:39по сути, тема отправляется в приложение для разработки, чтобы мы могли просматривать её в живую. Это не финальная версия,
00:07:44это просто черновик. Поэтому мы просто сказали ему синхронизировать всё вживую, и он использовал Shopify CLI и MCP,
00:07:50чтобы синхронизировать дизайн с основным URL-адресом, настроенным для магазина Shopify. И после этого
00:07:55Claude обновил дизайн вживую в вашем приложении. Точно так же вы можете попросить его обновить все
00:08:00другие страницы на вашем веб-сайте, и он выполнит тот же процесс. Сначала он сделает прототип разделов,
00:08:05затем обновит их в реальном приложении, а затем синхронизирует с размещенным магазином. Но есть несколько вещей,
00:08:10которые вам все равно нужно сделать со своим магазином, чтобы он был готов. На данном этапе вы не сможете добавить
00:08:14товары, потому что обновление товаров и подготовка их к внедрению требует использования Admin API Shopify.
00:08:20Это невозможно сделать без Admin API, потому что именно он дает доступ к основным частям
00:08:25магазина, таким как страница “О нас”, товары и другие функции управления. До сих пор мы только
00:08:30вносили изменения в тему и применяли эту тему к самому магазину для визуала. Чтобы подключить
00:08:35Admin API, вам нужно аутентифицировать его с магазином, используя Shopify CLI. Как только вы введете
00:08:41команду аутентификации с вашей ссылкой, откроется браузер, откуда вы сможете пройти аутентификацию. После
00:08:46этого вы сможете создавать страницы, связанные с магазином, и он будет использовать Shopify MCP и CLI вместе
00:08:52для обновления других разделов страницы. Теперь вы можете сказать ему добавить другие товары в
00:08:56ваш магазин, чтобы вы могли начать продавать. Но для добавления товаров нужно настроить разрешения
00:09:01для магазина Shopify, чтобы он мог получить доступ к инструментам через Admin API. Добавление товаров требует больше
00:09:06разрешений, чем те, которые мы дали ранее. Мы добавили только разрешение на запись контента, но для добавления
00:09:11товаров нужны дополнительные разрешения, такие как запись товаров, чтение и запись публикаций.
00:09:16Поэтому вам нужно запустить команду аутентификации снова, но с добавленными разрешениями. Как только это будет сделано,
00:09:20вы можете попросить Claude добавить товары на ваш сайт. И как только он это сделает, вы сможете проверить приложение и увидеть
00:09:25товары, перечисленные там, а также готовность магазина с деталями товаров, функциями корзины и
00:09:30также проверить товары в панели администратора. Но те, кто заходит в ваш магазин, все равно не смогут совершать
00:09:35покупки на данном этапе. Чтобы магазин был действительно готов к продаже товаров, нужно добавить платежные
00:09:40реквизиты, чтобы платежи могли обрабатываться. Вам также нужно будет выбрать тарифный план, потому что, пока вы этого не сделаете,
00:09:45каждый, кто посещает ваш магазин, должен будет ввести пароль, чтобы просмотреть его, что очевидно нецелесообразно. Поэтому,
00:09:51как только вы выберете план, вы сможете начать продавать свои товары. Теперь, весь этот
00:09:55руководство по настройке и все созданные здесь навыки можно найти в AI Labs Pro для этого видео и для всех наших предыдущих
00:10:02видео, откуда вы можете скачать и использовать их для своих собственных проектов. Если вы нашли ценность в том, что мы делаем,
00:10:07и хотите поддержать канал, это лучший способ сделать это. Ссылка в описании.
00:10:11На этом мы подходим к концу видео. Если вы хотите поддержать канал и помочь нам продолжать создавать
00:10:16видео, подобные этому, вы можете сделать это, используя кнопку “суперспасибо” ниже. Как всегда,
00:10:20спасибо за просмотр, и увидимся в следующем.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video