Кодирование Vibe с помощью GitHub Copilot

Введение

Copilot позволяет создавать совершенно новое приложение с нуля, добавлять функции или изменять пользовательский интерфейс, не пишя ни одной строки кода самостоятельно. Вы можете работать с Copilot, вводя подсказки в чате — используя ИИ как партнёра по программированию — и оставить весь сам код Copilot.

В этом уроке вы будете работать таким образом — в VS Code или в IDE JetBrains — чтобы создать персональное веб-приложение для отслеживания времени.

Этот метод хорошо работает для создания доказательства концепции, создания черновика приложения, который вы будете развивать более традиционным подходом к разработке программного обеспечения, или для создания приложений для собственного использования.

Для кого этот туториал?

•         **Ученик:** Вы учитесь создавать программные приложения. Вы можете многому научиться, работая с Copilot и наблюдая, как он реализует ваши запросы.
  

•         **Не разработчики:** Вы менеджер продукта или работаете в другой роли вне инженерной команды. Вам нужно быстро создать доказательство концепции, чтобы продемонстрировать определённую функциональность. Вас в первую очередь волнует пользовательский опыт, а не детали кода.
  

•         **Индивидуальный:** Вам нужно создать приложение, которое предоставит полезные функции для помощи в повседневной работе или домашней жизни. Приложение будет работать локально на вашем компьютере, и только вы будете им пользоваться, так что вас особо не волнует, как был собран код.
  

Этот туториал не предназначен для опытных разработчиков с устоявшейся практикой написания кода в редакторе. Опытные разработчики будут использовать Copilot по-другому — как инструмент для решения проблем и повышения продуктивности. В этом туториале мы будем работать в чате и оставим Copilot to do всю работу в редакторе.

Сколько времени это займет?

Существует множество факторов, которые могут повлиять на то, сколько времени вы займёте на прохождение этого учебника. Однако стоит выделить минимум два часа. В любой момент вы можете вернуться к нему позже, продолжая с того места, где остановились в том же разговоре в Копилот Чат.

Предпосылки

Прежде чем getting started, у вас должны быть следующее:

• A GitHub Copilot подписочный план.
• Один из таких IDE:
  • Visual Studio Code
  • Любой IDE JetBrains, поддерживающий Copilot с установленным расширением GitHub Copilot для JetBrains. См . раздел AUTOTITLE.
• Некоторый опыт использования Копилот Чат в Visual Studio Code или JetBrains. Если вы никогда раньше не использовали Копилот Чат, смотрите АВТОЗАГОЛОВОК.

Подготовка

Мы создадим приложение для отслеживания времени в новом репозитории GitHub.

1. На сайте GitHub создайте новый приватный репозиторий для вашего приложения, включая исходный файл README. См. статью "Создание нового репозитория".

2. Клонируйте копию репозитория на ваш локальный компьютер. См. клонирование репозитория.

3. В вашей локальной копии репозитория создайте новую ветку для работы.

   Например, в терминале используйте команду:

   Bash

   git checkout -b BRANCH-NAME
   

Исследование с помощью Copilot

1. В VS Code или вашем IDE JetBrains откройте каталог репозитория как новый project или рабочее пространство.

2. Закройте все открытые вкладки редактора.

   Работа в пустом project или рабочем пространстве без открытых вкладок редактора предотвращает влияние Copilot под влиянием кода или информации из этих вкладок.

3. Откройте окно терминала в IDE.

4. Откройте Копилот Чат и проверьте внизу просмотра чата, что Ask — это выбранный режим чата. Если нет, выберите «Спросить » в выпадающем меню чата.

   

5. Выберите модель в выпадающем меню моделей.

   Примечание.

   Ответы, упомянутые в этом учебнике, были получены при использовании сонета Клода 4.5. Другие модели реагируют по-разному, но результаты должны быть примерно похожими. Claude Sonnet 4.5 — хороший выбор, если он доступен, так как он даёт полезные комментарии в чате, объясняет свои действия и даёт подробные резюме после завершения кода.

   Если Claude Sonnet 4.5 недоступен, установите модель на Auto или выберите модель по своему выбору.

6. Введите этот запрос в чат:

   Copilot prompt

   I need to keep a daily log of what I've spent my time on. I want to build a time-tracking application to help me do this. Throughout the day I want to use the app to record what I'm working on as I move between tasks. At the end of the day it should show me the total time I've spent on each item.
   
   What are the typical features of such an app?
   
   What do I need to consider when building this app?
   

   Copilot отвечает с подробностями, чтобы ответить на ваши вопросы.

7. Рассмотрите ответ Copilot и попросите предоставить дополнительную информацию, если это необходимо, чтобы прояснить свои мысли о вашей заявке.

   Например, можно попросить:

   Copilot prompt

   Data storage: the application will run locally on my laptop. What's the best way to persistently store data so that I'll have access to historic time-tracking data?
   
   Data structure: How should I structure the data for this application? There will be tasks and projects. Each chunk of time will be associated with a task and some, but not all, tasks will be associated with projects. I will want to see totals for: each task, each project, each task per project.
   

8. Продолжайте задавать вопросы в одном чате, чтобы получить более чёткое представление о приложении, которое хотите создать.

   Держите разговор в чате открытым, так как Copilot будет использовать это в следующих шагах.

Планирование реализации

Теперь вы можете начать планировать первоначальную реализацию вашего приложения. Хорошая идея — начать с базовой версии приложения, которую можно будет развивать. Это облегчает работу базового функционала перед добавлением функций.

1. В том же разговоре Копилот Чат, который вы использовали в предыдущем разделе, переключитесь из режима запроса на режим плана, выбрав «Планировать » в выпадающем меню режима чата внизу просмотра.

2. Введите этот запрос:

   Copilot prompt

   I want to build a time-tracking application that allows me to keep track of how much time I spend on tasks during my working day. This should be a web app that runs locally on my computer. Plan the implementation of a basic, initial version of this application. This first version should allow me to:
   
   - Add, edit and delete projects and tasks - each a name with a maximum of about 50 characters
   - Quickly click to select a project and task and record the start time
   - Click another task to stop the current timer, recording the stop time, and recording the start time for the new task
   - Pause/resume/end the current task
   - Display the totals of times I have spent on each: task, project, and task per project.
   
   Time is always recorded for a specific task. A task can optionally be associated with a project.
   
   Store data for each day, but for this version do not include any user interface or functionality for looking at historical data, or compiling statistics. The initial version of the application should be limited to today's time tracking.
   
   Notes:
   - Tasks never overlap
   - Time should be accurate to the minute by recording the day, hour, minute tasks are started and stopped and calculating the duration from this
   - Design the web UI for display on a desktop monitor
   - Keep things very simple for the initial version. Do not add any other features not mentioned in this prompt
   

   Copilot отвечает примерно так:

   План: Создать Time-Tracking веб-приложении

   Одностраничное веб-приложение для отслеживания ежедневного времени выполнения задач с использованием стандартного HTML/CSS/JavaScript с локальным хранилищем. Приложение отображает проекты/задачи в боковой панели, показывает активный таймер и рассчитывает ежедневные итоги по задачам и project.

   Этапы

          **Create project structure** с помощью `index.html`, `styles.css`, `app.js` и `storage.js` для автономного стандартного JavaScript-приложения
   

          **Реализовать слой данных storage** в `storage.js` с использованием localStorage с коллекциями для `projects`, `tasks` и `timeEntries`, включая операции с CRUD-файлами и генерацию идентификаторов
   

          **Build HTML-структура** в `index.html` с тремя основными разделами: левая боковая панель для управления project/задачей, центральная панель для активного таймера и управления (старт/пауза/возобновление/стоп) и правая панель для ежедневных итогов
   

          **Реализовать логику основного таймера** при `app.js` выборе задач (авто-стоп предыдущий, автостарт новый), пауза/возобновление/остановка и вычисления времени с точностью в минутах `{ taskId, startTime, endTime, duration }`
   

          **Create UI rendering functions** в `app.js` для списков project/задач с встроенным редактированием/удалением, активным таймером с обновлениями в реальном времени и агрегированием панелей по задачам, project и задачам на project
   

          **Оформить интерфейс**`styles.css` с оптимизированным для рабочего стола трёхколоночным макетом, чёткими визуальными состояниями для активных/паузированных таймеров и простыми формами для добавления/редактирования проектов и задач
   

   Дополнительные соображения

          **Обработка дат** — храните все времена в виде ISO-строк и фильтруйте записи к сегодняшней дате (`YYYY-MM-DD`). Должна ли дневная граница быть полночью или по индивидуальному времени (например, 4 утра для работников позднего дня)?
   

          **Формат отображения таймера** — показать прошедшее время как `HH:MM` или `H hours M minutes`? Обновлять каждую секунду или каждую минуту?
   

             **Неназначенные задачи** — как отображать задачи без проектов в интерфейсе? Отдельный раздел «No Project» вверху/внизу боковой панели или смешан по алфавиту?
   

1. Ответьте на вопросы «Дополнительные соображения» Copilot поднятых. Например, вы можете ответить следующим запросом:

   Copilot prompt

   - Date handling: only consider the local date. This app is only going to be used by one person in one timezone. Set the day boundary to 4 am.
   - Time display: Show elapsed time as HH:MM. Don't track seconds.
   - Unassigned tasks: I've changed my mind. All tasks should be associated with a project, but there should be a built-in project called "No Project" (which the user can't delete or rename). All tasks should be associated with this project until the user chooses another project.
   
   If the user is changing tasks for the same project then they should be able to do this with one click (assuming the new task has already been defined). If they are doing the same task but for a different project, this should also be possible to change with one click (assuming the new project is already defined). If they want to track time for a different task in a different project then they should be able to do this with 2 clicks.
   

   Copilot может ответить дополнительными вопросами для вашего рассмотрения.

2. Вы можете ответить на некоторые или все вопросы, или, если считаете, что в плане достаточно деталей, перейти к следующему этапу.

   Ответы Copilot недетерминированы, поэтому вопросы будут различаться, но предположим, что ответ включал следующие вопросы:

          **Новая задача по умолчанию project** — При добавлении новой задачи без указания project назначить на «No Project» или на текущую активную/выбранную project? Рекомендую: В настоящее время выбран/активный project с запасным вариантом "No Project".
   

          **Крайний случай точности таймера** — если пользователь меняет задачи в течение одной минуты (например, с 10:30:15 до 10:30:45), должно ли это создавать запись за 0 минут или игнорировать? Рекомендую: игнорируйте и воспринимайте как мгновенное переключение без записи.
   

   Вы можете решить ответить на эти вопросы, введя запрос:

   Copilot prompt

   New task default project - When adding a new task without actively specifying a project, use the currently selected/active project with "No Project" as the default when the user has not actively selected any other project.
   
   Timer precision edge case - If user switches or ends tasks within the same minute as the start time then delete this entry. Only time entries of more than one minute should be recorded.
   

3. Продолжайте повторять, если почувствуете, что есть ещё вопросы, на которые нужно ответить.

4. Держите разговор в чате открытым, так как Copilot будет использовать это в следующих шагах.

Создание вашего приложения с помощью Агент кодирования Copilot

Когда вы считаете, что в плане достаточно подробностей:

1.        **Нажмите «Начать реализацию**» в представлении Копилот Чат.
   

   В зависимости от вашего IDE, это либо сразу запустит агента, либо добавит запрос «Start Implementation», который вы должны отправить.

   Обратите внимание, что режим чата переключается с «План» на «Агент».

2. Copilot запросит ваше разрешение выполнять такие действия, как редактирование чувствительных файлов, выполнение команд или добавление файлов в Git.

   •      **В VS Code:** нажмите **Разрешить**.
     

     

     Или же нажмите стрелку на кнопке «Разрешить » и «Разрешить в этой сессии » в выпадающем меню.

   •      **В JetBrains:**
     

     • Если спросить, хотите ли вы добавить файл в Git, выберите галочку «Не спрашивай снова », затем нажмите «Добавить».

     • Если спросить о запуске команды, нажмите «Продолжить».

       

   Copilot начнёт реализовывать начальную версию вашего приложения.

3. Если Copilot завершает свой ответ без завершения установки, или если Copilot, похоже, застопорилась, предпринимайте следующие корректирующие действия, как требуется:

   •      **Отсутствующий компонент**
     

     Если Copilot сообщает, что процесс не может продолжиться, потому что требуется установка необходимого компонента (например, Node.js), вы можете ввести запрос Copilot скачать и установить недостающий компонент.

   •      **Процесс занимает много времени**
     

     Некоторые шаги могут занять несколько минут. Будьте терпеливы и позвольте агенту выполнить каждую часть процесса. Анимированный иконка спиннера указывает, что агент в данный момент работает над командой.

     Например, в IDE JetBrains:

     

   •      **Требуется ввод**
     

     Иногда Copilot выполняет команду, требующую ручного ввода.

     Если Copilot, похоже, застопорилась, проверьте окно терминала IDE, чтобы узнать, требует ли от вас действия команды. Copilot будет ждать, пока вы введёте ответ в терминале, прежде чем продолжить.

   •      **Сообщения об ошибках**
     

     Если при разработке приложения появляются сообщения об ошибке, скопируйте их в блок чата и попросите Copilotисправить проблему.

     Примечание.

     Возможно, придётся повторять с Copilot таким образом, прося его отладить и исправить проблемы, пока не появится рабочее приложение, которое можно просматривать в браузере.

   •      **Ответ Copilot, похоже, застрял**
     

     Если в ответе отображается значок спиннера, но после нескольких минут ожидания — и после проверки, что ваш ввод не нужен в терминале — ничего не происходит, вы можете остановить и начать разговор заново.

     Нажмите кнопку отмены внизу просмотра чата. Например, в VS Code:

     

     Затем введите запрос:

     Copilot prompt

     Your previous response stalled. Try again, picking up from where you left off.
     

4. Обычно ближе к концу процесса кодирования Copilot запрашивает ваше разрешение на открытие ненадёжной веб-страницы для приложения:

   

   Дайте на это разрешение.

5. Когда агент завершит работу над приложением, он покажет сводку того, что он построил, в чат-панели. Обычно он предоставляет ссылку на запущенное приложение.

   Приложение time tracker также может отображаться во вкладке браузера в вашем IDE. Это может быть полезно для подтверждения доступности страницы. Однако всегда проверяйте приложение в браузере по умолчанию, чтобы убедиться в реалистичном пользовательском опыте.

   Нажмите на ссылку в чате, чтобы открыть приложение в вашем браузере по умолчанию.

   Если ссылка не отображается в чате Copilot, подождите несколько минут, пока агент может работать над развертыванием приложения. Если ссылка всё ещё не отображается, можно запросить Copilot для её отображения:

   Copilot prompt

   Confirm the implementation is complete. If so, give me a link to the running application.
   

6. Если последнее сообщение от Copilot даёт инструкции для запуска приложения (например, запуска npm start), вместо того чтобы давать ссылку на запущенное приложение, вы можете попросить Copilot выполнить команду и проверить, что она успешно выполнена. Рассмотрим пример.

   Copilot prompt

   Run npm start for me and confirm everything is working
   

   Если Copilot не может выполнить все команды самостоятельно, он предоставит команды, которые можно скопировать и вставить в терминал.

Тестирование вашего приложения

1. Просмотрите веб-страницу вашего приложения.

   Ниже приведены примеры приложения для отслеживания времени, созданного с помощью Copilot:

   
   

   Примечание.

   Приложение, которое Copilot генерирует для вас, может выглядеть совсем иначе, чем приведённые выше примеры.

2. Попробуйте воспользоваться приложением. Добавьте пару проектов и подборку задач, а затем начните отслеживать время выполнения задачи.

3. Когда вы опрабуете этот первый вариант заявки, запишите две-три самых важных момента, которые нужно изменить. В последующих шагах вы будете работать над исправлением этих проблем. Пока не тратьте время на записи всего, что хотите изменить. Просто определите самые насущные моменты, которые нужно решить в первую очередь. Позже у вас будет время, чтобы всё наладило и выглядело так, как вы хотите.

4. Если приложение не загружается или отображается ошибка, опишите проблему в окне чата, скопируя и вставив сообщения об ошибке, и попросите Copilot отладить и исправить проблему.

5. После того как вы изучите первоначальный проект заявки и убедитесь, что оно работает хотя бы в базовом виде, вернитесь к своему IDE.

6.        _
          **Необязательно**: если вы знакомы с типом кода данных, которые variables.product.prodname_copilot_short %} пишет для вас._ Отобразите файлы, которые Copilot изменились, в редакторе и просмотрите изменения. Вы можете внести свои собственные изменения, если потребуется.
   

7.        **Нажмите Keep** (in VS Code) или **Accept All** (в IDE JetBrains) в представлении Копилот Чат, чтобы принять изменения и удалить различия строк из редактора.
   

   Теперь у вас есть базовая версия приложения, которую можно улучшать и расширять функциональность и пользовательский интерфейс.

8. Зафиксируйте изменения в Git.

   Всегда полезно фиксировать изменения при каждой успешной итерации, чтобы легко вернуться к предыдущей версии, если вам не понравились некоторые изменения, которые Copilotвнёс для вас.

9. Закройте все открытые вкладки редактора, но оставьте открытым представление Копилот Чат, так как вы продолжите работать в том же чате.

Итерация изменений

1. После того как вы зарегистрировали исходную версию в git, вы можете внести изменения в приложение, исправив одну из ошибок, которые отметили при просмотре сайта.

   Например, реализация могла привязать задачи к project, так что задача, созданная для одного project, не отображалась при выборе другого project. Чтобы изменить это — позволяя создавать задачи, которые можно использовать для любого project — введите в тот же разговор ещё один запрос, оставаясь в режиме агента для Copilot. Вы можете использовать подсказку, например:

   Copilot prompt

   Tasks should not be tied to projects in the user interface, as they currently are. When the user selects a project, allow them to choose any currently defined task. There should be a many-to-many relationship between projects and tasks.
   

2. Опять же, Copilot, скорее всего, попросит вас одобрить необходимые изменения в коде. Нажмите «Одобрить» или «Продолжить».

3. Когда Copilot завершит изменение, вернитесь в браузер и обновите страницу.

4. Просмотрите пересмотренное приложение и сообщите Copilot, было ли изменено некорректно.

   Вы можете заметить несколько проблем, требующих исправления, но чтобы Copilot могли сосредоточиться на одной задаче, следует ограничить каждую задачу одной задачей и по мере необходимости повторять её серией запросов и ответов, пока проблема не будет решена. Затем переходите к следующему, что хотите изменить.

5. Если возникли проблемы с оформлением веб-страницы — например, перекрывающиеся или плохо выровненные элементы — вы можете сделать скриншот, вставить его в чат и ввести запрос, например:

   Copilot prompt

   This part of the web page looks bad. Fix it.
   

6. После того как изменение будет успешно реализовано, нажмите «Сохранить или принять всё » и зафиксировать изменения.

7.        _
          **Опционально**:_ В зависимости от ваших рабочих практик — например, если вы работаете в команде разработчиков — вы можете решить на этом этапе, после каждого значительного изменения, подать pull request. Это позволит вам пересматривать изменения и объединять в стандартную ветку репозитория, чтобы другие могли работать над кодом.
   

8. Продолжайте работу над заявкой.

   Например, вы можете предложить приложению другой стиль пользовательского интерфейса. В этом случае, всё ещё в режиме агента, можно запросить Copilot:

   Copilot prompt

   I don't like the look of the user interface. Suggest some alternative web UI libraries I could choose to give the app a more formal, business-like appearance.
   

   Copilot перечислит некоторые библиотеки интерфейса.

9. Выберите одну из библиотек и попросите Copilot использовать её. Рассмотрим пример.

   Copilot prompt

   Alter the user interface to use Bootstrap 5. I want the app to look like a professionally designed business application.
   

   Copilot переработает приложение, чтобы использовать выбранную вами библиотеку пользовательского интерфейса.

10. Проверьте результаты и внесите изменения, если вас устраивает обновлённый вид заявки.

11. Распространённое требование для приложения для отслеживания времени — возможность выводить табель рабочего времени. Например, если вы подрядчик, вам может потребоваться предоставить табель работы вместе с счетом. Давайте добавим возможность генерировать PDF.

    Используйте этот запрос:

    Copilot prompt

    Add a button to the user interface which generates a PDF timesheet for the work the user has tracked today. The timesheet should show the total time spent on task for each of the defined project for which data has been recorded today. Under this show the total time spent on each project. Then show the total time spent on each task irrespective of projects. Finally show a chronological lists of tasks performed during the day with the time spent on each.
    

Пример применения

После работы с Copilot для создания, расширения и улучшения вашего таймтрекера приложение может выглядеть примерно так:

Улучшение вашего программного обеспечения project

1. Copilot может помочь сделать ваш project более надёжным, добавляя и запуская тесты. Тесты помогают предотвратить попадание багов в кодовую базу. Вы можете запросить Copilot в режиме агента:

   Copilot prompt

   Add a comprehensive suite of tests for this application. These should include unit tests, integration tests, component tests, database tests, and end-to-end tests. Locate the tests in a `tests` directory. Run the tests and fix any problems that are identified.
   

2. Всегда полезно иметь в project файл README. README должен предоставлять обзор project и давать инструкции по использованию приложения. Вы можете попросить Copilot создать или обновить файл README:

   Copilot prompt

   Add or update a README.md file. This should provide an introduction to the application, describing its primary use and highlighting its features. It should give easy to follow user instructions for using the application in the browser. It should provide admin instructions, explaining how to deploy the application. Finally it should give an overview of the technologies used to build the application and some basic information for developers on how to maintain the code and extend the application.
   

3. Теперь, когда вы добавили исходный код приложения в репозиторий, следует добавить пользовательский файл инструкций для Copilot. Пользовательский файл инструкций улучшает ответы Copilot в репозитории, предоставляя специфичные для репозитория рекомендации и предпочтения реализации. Чтобы добавить пользовательский файл инструкций:

   •      **В VS Code:** нажмите на значок «Configure Chat» в верхней части чата и выберите **Generate Chat Instructions**.
     

   •      **В IDE JetBrains:** в режиме агента Копилот Чат отправьте запрос, например:
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI coding agents.
     
     Discover essential knowledge for immediate productivity:
     - Architecture: major components, service boundaries, data flows, and structural decisions
     - Developer workflows: builds, tests, debugging commands
     - Project conventions that differ from common practices
     - Integration points and cross-component communication
     
     Guidelines:
     - Merge intelligently if file exists
     - Write ~20-50 concise lines with markdown structure
     - Include specific codebase examples
     - Focus on THIS project's approaches, not generic advice
     - Document discoverable patterns, not aspirational patterns
     - Reference key files/directories that exemplify important patterns
     

4. Просмотрите файл с инструкциями. Если вы считаете, что инструкции требуют дополнительных подробностей, вы можете добавить их в файл вручную и сохранить. Например, вы можете добавить инструкцию о запуске тестов, если в файле уже нет инструкции об этом:

   Text

   ## Running tests
   
   Always run the complete test suite after completing a batch of code changes, to ensure the changes do not break or adversely affect any part of the application. Fix any test failures and then run the tests again to verify the fix.
   

Дальнейшие шаги

• Продолжайте улучшать этот project, улучшая свой таймтрекер.
• Используя ту же методологию, создайте другое приложение.
• Узнайте, как можно создавать приложения без самостоятельного написания кода. См . раздел AUTOTITLE.