📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

OpenCode Tutorial for Beginners: Learn 90% Of OpenCode in Under 25 Minutes

James NoCode22:33

Transcription

Многие из вас, вероятно, уже использовали ИИ-агентов для написания кода, таких как Codex или Claude Code, или планируете использовать их в ближайшее время. Но знали ли вы, что существуют также бесплатные агенты для написания кода с открытым исходным кодом, которые могут работать с бесплатными моделями? Сегодня мы рассмотрим Open Code, одного из самых популярных ИИ-агентов для написания кода с открытым исходным кодом, а затем построим с его помощью небольшое приложение. Итак, прежде всего, что такое Open Code? Open Code — это открытая агентная оболочка, используемая для подключения моделей к реальной работе по написанию кода, такой как чтение файлов, планирование изменений, редактирование кода, выполнение команд и проверка результатов. Если вы использовали Codex или Claude Code, вы уже используете агентную оболочку. Open Code — это гибкая версия открытого провайдера, которая может работать с моделями с открытым исходным кодом и другими поставщиками моделей. Итак, если вы перейдете на opencode.ai, вы сможете узнать больше об этом ИИ-агенте для написания кода с открытым исходным кодом. Вы можете увидеть, что у них почти 170 000 звезд. И поэтому этот ИИ-агент для написания кода находится в активной разработке. Его используют очень много людей, происходит очень много разработок. И поэтому это не то, что было сделано один раз и забыто. Также доступно настольное приложение в бета-версии для macOS, Windows и Linux, и мы рассмотрим его чуть позже. Open Code — это агент с открытым исходным кодом, который помогает вам писать код в вашем терминале, IDE или на рабочем столе. И вы можете просмотреть различные функции, которые у них есть: поддержка LSP, общие ссылки для нескольких сеансов, GitHub Copilot, ChatGPT Plus или Pro, любая модель, более 75 поставщиков LLM через models.dev, включая локальные модели, любой редактор, доступный в виде интерфейса командной строки, настольного приложения и расширения IDE. Итак, если вы используете что-то вроде Codex или Claude Code, вы, вероятно, знакомы с тем, что такое ИИ-агент для написания кода. А если нет, то вот простая диаграмма, чтобы лучше это показать. Итак, это вы как разработчик, и когда вы взаимодействуете с чем-то вроде Codex, Claude Code или Open Code, вы не взаимодействуете напрямую с моделью. Вы сначала взаимодействуете с чем-то, называемым оболочкой, и эта оболочка отвечает за все различные инструменты. И это здесь — часть уровня выполнения инструментов. Итак, всякий раз, когда вы имеете дело с ресурсами, вы имеете дело с этим уровнем выполнения инструментов. Так что такие вещи, как файлы, оболочка, Git, команды MCP, различные тесты. Все это делается через этот внешний уровень, называемый уровнем выполнения инструментов, который является частью оболочки. Далее у нас есть что-то, называемое уровнем провайдера, и это здесь делает модели доступными для оболочки. Теперь, когда вы используете Open Code, вы будете использовать Open Code Zen, который является их собственным уровнем провайдера, который дает вам доступ к их моделям, к различным моделям, которые вы можете использовать в Open Code. Но когда вы используете что-то вроде, вы знаете, Codex или Claude Code, вы также используете уровень провайдера, но он гораздо более предвзятый. Он напрямую связывает вас с их собственной моделью. Так, например, когда вы используете Codex, вы используете собственные модели OpenAI. Когда вы используете Claude Code, вы используете собственные модели Anthropic. Но когда вы используете Open Code, вы используете их собственный уровень провайдера, который дает вам доступ к большему количеству моделей. Он дает вам доступ к более широкому спектру моделей. И последнее, но не менее важное: у нас есть уровень модели или мозга, и здесь вы используете фактическую модель. Вы знаете, что-то вроде GPT-5.5, GPT-5.4, GPT-5.5 Mini. И вот что многие люди не осознают: когда вы работаете с этими агентными инструментами ИИ, такими как Codex, Claude Code, Open Code, вы не взаимодействуете напрямую с моделью. Есть много других частей, которые делают все это возможным и дают вам этот своего рода бесшовный опыт, к которому многие из нас, вероятно, уже привыкли. Хорошо. Итак, теперь, когда мы немного поговорили об Open Code, что это такое и как он вписывается в общий рабочий процесс агентных ИИ, давайте загрузим настольное приложение Open Code и проведем краткий обзор, прежде чем мы фактически построим с его помощью простое приложение. Теперь есть несколько способов использования Open Code, и если вы нажмете «Загрузить сейчас» на главной странице, вы увидите, что вы можете использовать его через CLI, то есть интерфейс командной строки. Вы также можете использовать его как расширение для вашей IDE. Так что-то вроде Visual Studio Code, Cursor, Zed, Windserve, VS Codium, и у вас также есть различные интеграции, которые вы можете использовать с вашими системами контроля версий, такими как GitHub или GitLab. Теперь, из всех этих вариантов, я определенно предпочитаю автономное настольное приложение, и это то, что я рекомендую вам, если у вас нет веской причины использовать его как CLI, как терминал или как расширение для IDE, которую вы, возможно, используете прямо сейчас. Итак, что вам нужно сделать дальше, это перейти и загрузить настольное приложение Open Code для вашей конкретной платформы. Поскольку я использую MacBook, я перешел и загрузил эту версию здесь для Apple Silicon. И как только вы загрузите и установите его, вы увидите приложение, которое выглядит примерно так. В этом приложении у нас в основном три панели. Слева у нас наши проекты. Здесь у нас наши сеансы. И здесь чат. А справа — все, что было сделано, где вы можете просмотреть все изменения кода, связанные с Git, и выполнить там весь ваш контроль исходного кода. Теперь внизу у нас есть основное поле ввода запроса, где вы можете попросить его сделать что угодно. И если вы нажмете здесь, вы также можете добавить файлы для дополнения вашего запроса, чтобы предоставить контекст для вашего запроса. Теперь внизу у нас есть различные настройки. Итак, сначала у нас есть режим сборки или режим планирования, и это то, о чем мы поговорим чуть позже. Далее у нас есть селектор моделей. Итак, если вы нажмете здесь, вы можете выбрать фактическую модель, с которой хотите работать. И это здесь — мозг, с которым вы будете работать. Теперь, как вы видите, эти модели являются частью Open Code Zen. И эта модель является стандартной. Мы также можем выбрать одну из этих других моделей, и мы сделаем все это немного позже в видео, чтобы вы могли увидеть, как все это работает и лучше ли одна модель, чем другая. Теперь, если вы прокрутите вниз, вы также можете выбрать другие модели, такие как Claude Opus, Claude Sonnet, Deep Seek, Gemini, GLM и т. д. И если вы нажмете здесь, вы можете фактически подключить провайдера. И, подключив провайдера, вы можете получить доступ к еще большему количеству моделей. Итак, здесь вы можете искать провайдеров. Это здесь — основной провайдер, Open Code Zen. У нас также есть что-то под названием Open Code Go, которое является недорогой подпиской для всех. А затем у вас есть стандартные провайдеры, такие как Anthropic, GitHub Co-pilot, Open AI, Google, Open for sale и многие другие провайдеры. И поэтому, когда вы прокручиваете вниз, вы можете видеть, что есть очень много провайдеров, из которых вы можете выбирать, что, в свою очередь, дает вам доступ ко всем видам различных моделей. И это здесь — основное преимущество использования Open Code по сравнению с некоторыми из этих других стандартных коммерческих агентных инструментов ИИ. Вы можете выбрать практически любую модель, которую хотите, как угодно. Так что это чрезвычайно гибко и, возможно, отлично подходит для вашего конкретного рабочего процесса. Теперь, прямо рядом с ним, у нас есть режим рассуждений. Итак, у нас есть стандартный, но мы также можем выбрать низкий, средний, высокий или максимальный. И это будет зависеть от типа задачи, над которой вы работаете. Следующее, что я хочу осветить, это различные настройки, и важно понимать различные варианты, доступные вам при настройке Open Code для вашего конкретного проекта. Итак, если вы нажмете Command + запятая, вы будете перенаправлены в эти основные настройки. И есть несколько настроек, которые вы должны убедиться, что понимаете, прежде чем начнете создавать свое приложение. Итак, одна из самых важных настроек — это разрешения. Итак, мы можем установить его на автоматическое принятие разрешений здесь, или мы можем просто оставить его по умолчанию, где запросы на разрешения не будут автоматически одобрены. Итак, я оставлю его по умолчанию здесь, то есть не буду автоматически принимать разрешения, чтобы мы могли видеть, как это работает, когда ему нужно сделать что-то, что требует нашего разрешения. Другой вариант — показывать ли сводки рассуждений. И это здесь, где вы хотите, чтобы модель показывала, как она думала, пытаясь выяснить, как ответить на ваш запрос. И я просто оставлю это выключенным. Еще одна интересная опция — показывать ли индикатор выполнения сеанса. Мы оставим это включенным. И если вы прокрутите вниз, у нас есть различные системные уведомления. Да, мы хотим агента, мы хотим разрешения. Теперь, на вкладке «Сочетания клавиш» вы можете определить различные сочетания клавиш, которые вы хотите использовать. Мы пока оставим их по умолчанию. У вас есть вкладка «Провайдеры» здесь, и здесь вы можете определить различные провайдеры, которые вы хотите использовать в своем рабочем процессе. И последнее, но не менее важное: у нас есть вкладка «Модели» здесь, и здесь вы можете определить различные модели, которые вы хотите использовать. И мы пока оставим все это по умолчанию. Теперь давайте создадим очень, очень простое приложение, а затем позже посмотрим, сможем ли мы сделать его более сложным, добавив больше функций. Я открою проект, и теперь у меня есть папка проекта, назначенная этому проекту. Итак, вот простой запрос. Создайте простое веб-приложение для списка дел с локальным хранилищем. Мы переключимся в режим планирования здесь. Мы оставим это по умолчанию и перейдем к выполнению прямо здесь. И вот модель ответила нам, сказав, что каталог пуст. Вот мой предложенный план для простого веб-приложения для списка дел с локальным хранилищем. Это план. Это файлы, которые нужно создать. Это функции, где, знаете ли, он решил использовать локальное хранилище для сохранения данных, и это архитектура. А затем у него есть несколько вопросов, которые он задает мне, прежде чем начнет создавать приложение. Это очень, очень похоже на то, как работает Codex. Он также задает от одного до трех вопросов. Во-первых, он спрашивает, какой подход к стилизации вы бы предпочли? Минимальный CSS, Tailwind CSS. Введите свой ответ. Я выберу минимальный CSS. Я выберу это. Я перейду к следующему. Должно ли приложение быть одним HTML-файлом или отдельными файлами? Итак, первый вариант — отдельные файлы, что рекомендуется. Далее, у нас есть один HTML-файл, или я могу ввести свой ответ. Я просто сделаю отдельные файлы. И последнее, но не менее важное: есть ли какие-либо дополнительные функции, которые вы хотели бы включить. Только основы. С редактированием на месте, с перетаскиванием для изменения порядка. Я обычно люблю эту функцию перетаскивания для изменения порядка. Так что я выберу это. И прежде чем нажать «Отправить», я хочу показать вам кое-что еще. Итак, когда мы запустили это, он показывает нам контекстное окно. Так что, если вы нажмете здесь, вы можете увидеть, что происходит прямо сейчас. Итак, вы можете видеть, что мы используем этого провайдера, мы используем эту модель. Предел контекста составляет 200 000, что вполне стандартно, не очень много. Есть модели с миллионом контекстов, и теперь появляются модели с еще большим контекстом. И это количество токенов, которое мы использовали. Это общее количество токенов, и это были входные токены здесь. У нас 67 выходных токенов и 68 токенов рассуждений, хорошо? Ничего из этого не было кэшировано. Общая стоимость сейчас составляет ноль, хорошо? Итак, я закрою это и отправлю. И посмотрим, сможет ли он создать очень, очень простое приложение для списка дел здесь. Хорошо? Теперь мы все еще в режиме планирования, и поэтому он создал для нас план. И мы перейдем в режим сборки, и я скажу: «Продолжайте». И здесь, что хорошо, так это то, что он дает нам список задач, над которыми он работает, чтобы мы могли видеть в реальном времени, где находится модель, над чем она работает и насколько мы продвинулись. Теперь он закончил. Создано три файла, index.html. У нас есть различные функции, у нас есть детали. Теперь здесь он говорит нам открыть index.html в браузере, чтобы использовать его. И хотя я могу легко это сделать, я хочу посмотреть, возможно ли фактически предварительно просмотреть приложение в этой правой панели. Нажав здесь, я могу видеть различные файлы, так что я могу фактически просмотреть индекс, но я пока не могу его предварительно просмотреть. И поэтому я открою этот файл во внешнем браузере вместо этого. Хорошо, и вот приложение, которое он создал. Итак, что нужно сделать, активно и завершено. Итак, давайте посмотрим. Скажем, я записываю видео, и я добавлю это. И теперь оно добавлено, и это активно. Я нажму здесь. Теперь это не активно. Теперь это завершено. И я также могу перетащить его. Но куда я могу его перетащить? Вот в чем вопрос. На самом деле, давайте добавим еще пару. Сделать домашнее задание. Да, я могу изменить порядок. Хорошо, это довольно круто, на самом деле, очень легко. Позвонить клиенту. И давайте скажем, выгулять собаку. Теперь я могу изменить порядок, и он показывает, где это будет происходить, что довольно круто. Я также могу нажать здесь, и это удалит его. Это удаляет его, но не подтверждает, хотел ли я его удалить. Так что это то, что мы можем увидеть, добавляемое в будущем. Но это, знаете ли, работает. Это очень, очень простое приложение, но оно работает очень хорошо. И поэтому давайте вернемся в Open Code и посмотрим, сможем ли мы добавить пару функций. Давайте сделаем так, чтобы я хотел видеть завершенные и хотел видеть активные и завершенные на одной странице. Убедитесь, что активные и завершенные задачи отображаются на одной странице. Перейдите в режим планирования. И что интересно здесь, так это то, что в режиме планирования он фактически сообщает мне об изменениях, которые он собирается внести. Так что это очень, очень технический ответ. Это не так, как с Codex, где Codex просто говорит вам в целом, что он собирается сделать, и, возможно, даже указывает на некоторые файлы, но здесь он фактически, знаете ли, сообщает вам строки и как он собирается внести изменения. Еще одно отличие заключается в том, что если я нахожусь в режиме планирования, и он просит меня продолжить, он должен выйти из режима планирования и перейти непосредственно в режим сборки. Так что давайте посмотрим, сделает ли он это. Да, продолжайте. Итак, он говорит мне, что он в настоящее время находится в режиме планирования. Могу вносить изменения напрямую. Так что мне нужно сделать это вручную. Итак, я перейду в режим сборки, а затем скажу: «Продолжайте». Все готово, и это заняло всего 23 секунды. Итак, давайте перейдем в Google Chrome, давайте обновим это, давайте сделаем это. Хорошо, теперь все на одной вкладке, и вы можете видеть, что у завершенных есть галочка и зачеркивание. Хорошо, таким образом вы можете отличить завершенные от незавершенных. И поэтому давайте добавим еще одну задачу, знаете ли, задача A, задача один, задача два, задача три, и я могу просто отметить их вот так, очень, очень просто. Теперь давайте добавим еще функциональности этому приложению. Превратим это в доску Kanban или доску Trello. И для этого мы сменим модели. Давайте попробуем другую модель. Итак, у нас есть этот Mimo, у нас есть этот MX3, и у нас также есть эта бесплатная модель Open Code Zen Super Free с также 200 000 пределом контекста. Итак, давайте переключимся на эту модель и давайте попросим ее: «Превратите это приложение в доску Kanban с двумя группами: работа, идея, в процессе и готово». Давайте перейдем в режим планирования и посмотрим, как это работает. Теперь здесь я сразу вижу, что эта модель намного медленнее предыдущей, потому что она думала около 30 секунд, и исследовала только этот один файл. Так что это занимает, знаете ли, гораздо больше времени, чем я привык. И поэтому я подожду еще немного и посмотрю, как она работает. В противном случае я переключусь на другую модель. Итак, она думала почти 2 минуты, и вот что она придумала. Итак, она на самом деле довольно исчерпывающая. Конвертировать из простого списка дел с переключением завершения, где дела имеют три статуса столбца путем перетаскивания. Так что это довольно стандартно, и давайте перейдем к сборке, и давайте посмотрим, сколько времени займет фактическая реализация всего этого. Продолжайте и внесите изменения. Теперь здесь я остаюсь на стандартном, и поэтому, что я сделаю, это я переключусь на средний, потому что я не думаю, что это задача, требующая большого бюджета на рассуждения. И поэтому здесь мы находимся в режиме сборки, мы в среднем, и я собираюсь выполнить это прямо здесь. Итак, теперь мы видим задачи, и, надеюсь, это будет немного быстрее, поскольку мы находимся в среднем уровне мыслительных усилий. Хорошо, так я могу сказать, что даже в среднем режиме это заметно медленнее, чем все, к чему я привык при использовании Codex для разработки. И я подожду еще немного, но мне очень хочется попробовать другую модель, что-то, что будет быстрее, потому что это довольно медленно. Хорошо, из любопытства я остановлю это и вернусь к этой модели, чтобы увидеть, как быстро она работает. И поэтому я скажу ей продолжить и внести эти изменения, зная, что она внесла некоторые изменения раньше, и посмотрим, как быстро она пойдет оттуда. Здесь я переключусь обратно на стандартный, и я собираюсь выполнить это прямо здесь. Хорошо, и все готово. Теперь, конечно, предыдущая модель работала некоторое время, но это было очень, очень быстро. Вы можете сказать, что это довольно быстрая модель. И поэтому давайте посмотрим на наше приложение здесь. Давайте обновим его, и теперь у нас есть этот интерфейс в стиле Kanban. Давайте сделаем задачу один, задачу два, задачу три, и теперь я могу перетаскивать их прямо здесь. Это выглядит очень красиво. Я могу удалить их. Очень, очень красиво. Очень, очень красивый интерфейс, очень, очень быстро. Так что до сих пор я очень доволен этой версией DeepSeek 4 flash free. Работает очень, очень хорошо. Теперь далее я хочу создать здесь репозиторий Git. Так что я сделаю это. Теперь у нас есть репозиторий Git, и теперь я попрошу модель внести пару очень, очень небольших изменений. Сделать диалоговое окно подтверждения при удалении. И я просто останусь в режиме сборки. Я собираюсь выполнить это. И теперь мы можем видеть фактические файлы, которые меняются. Мы можем видеть, что меняется, как меняется, что добавляется. Вы можете увидеть прямо здесь. Если вы прокрутите, вы можете увидеть, где находятся изменения. Итак, вы можете видеть, что он добавил эти три строки, это диалоговое окно подтверждения, и все готово. И это фактически заняло всего 8 секунд. Это очень, очень быстро. И поэтому теперь, если мы вернемся к нашему приложению здесь и нажмем здесь, теперь у нас есть простое диалоговое окно подтверждения JavaScript. Хотите удалить? Если я нажму «Отмена», ничего не произойдет. Если я нажму «ОК», оно удалится. И если мы вернемся, вы можете фактически увидеть это здесь. Если мы не подтвердили, ничего не происходит. В противном случае он продолжает. И здесь он фактически удаляет его, фильтруя, создавая новый список без этого элемента, который был там раньше. И поэтому до сих пор эта модель была отличной. Она очень, очень быстрая. Она создала красивый интерфейс и в целом работала очень, очень хорошо. Теперь давайте спросим модель, способна ли она отменить изменение. И это очень, очень важно, если вы что-то сделали, но затем поняли, что допустили ошибку или это не работает, и вы хотите отменить изменение. Откатить предыдущее изменение. И давайте перейдем в режим планирования, чтобы увидеть, что это за изменение. И это здесь — изменение «удалить задачу». Но это было не единственное изменение. Было еще одно изменение. И поэтому давайте выйдем из режима сборки и запустим это. Продолжайте. Итак, оно отменило изменение. Теперь, если вы прокрутите вниз, вы можете увидеть, что именно оно сделало. Оно фактически отменило эту часть. Это правильно. Это была эта функция здесь, и это была эта часть. И поэтому без нее, если мы вернемся к нашему приложению и скажем, что мы создадим еще пару задач, а затем удалим ее, больше не будет диалогового окна подтверждения. Так что для этого очень, очень простого приложения оно работало очень, очень хорошо. Теперь давайте попробуем немного более сложную функцию, и это создание файла под названием agents.md. Итак, вот запрос, который мы будем использовать. Создайте черновик agents.md для этого репозитория. Включите, как установить зависимости, как запустить это приложение и т. д. и т. д. Давайте перейдем в режим планирования и выполним это. Мне нужно применить это? Да, сборка. Да, продолжайте. И вот файл агента. Вот весь файл. Очень, очень быстро. Очень, очень классная модель. Всего 9 секунд для этой простой задачи. И если вы нажмете здесь, вы можете увидеть, что вы использовали 21% нашего лимита контекста, и все это стоило абсолютно ничего. Теперь, конечно, это было очень, очень простое приложение, которое мы построили. Обычно вы будете строить приложения, которые намного более сложные, намного более комплексные, с тысячами, даже сотнями, даже в некоторых случаях миллионами строк кода, которые, знаете ли, делают всевозможные замысловатые вещи, подключаются к другим системам. Но до сих пор, для приложения, которое оно нам построило, и общей стоимости, вы не можете действительно жаловаться. Теперь, в будущем видео, я планирую использовать Open Code, чтобы помочь мне построить гораздо более сложное, готовое к производству мобильное приложение. И это будет гораздо более интересный тест Open Code и того, смог ли модель сделать это за минимальную стоимость. И поэтому, если вы хотите увидеть такое видео, обязательно нажмите «Нравится», подпишитесь на канал и оставьте комментарий ниже, сообщив мне, что вы заинтересованы в таком контенте. И также обязательно проверьте наше удивительное сообщество Patreon, где вы получите доступ к большему количеству контента, всем моим запросам, а также будете поддерживать этот канал и мою работу. Перейдите по первой ссылке в описании, чтобы присоединиться к нашему удивительному сообществу Patreon.