# Написание и хранение кода

Выполните основной рабочий процесс разработчика, чтобы создать ветвь, написать код и открыть запрос на вытягивание с помощью Copilot и GitHub Desktop.

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

## Необходимые условия

* Локальный клон репозитория `stargazers-log` . Если вы еще не настроили эту настройку, см. раздел [Подключение к коду локально](/ru/enterprise-server@3.22/get-started/start-your-journey/connecting-to-your-code-locally).

## Создание ветви

Ветвь позволяет работать над функцией в собственном пространстве, не изменяя `main` копию кода до тех пор, пока вы не будете готовы.

1. Откройте GitHub Desktop.
2. В верхней части приложения нажмите кнопку **"Текущая ветвь**", а затем нажмите кнопку **"Создать ветвь**".
3. Назовите ветвь, а затем нажмите кнопку `add-starred-list`\*\*\*\*".
4. Нажмите кнопку **"Опубликовать ветвь** ", чтобы сделать ветвь доступной GitHub.

## Создание кода веб-сайта

Для функции требуется несколько файлов: примеры данных, таблица стилей, скрипт для отображения данных и обновленная домашняя страница.

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

Сведения о доступных Copilot планах и способах использования см. в документации[](/ru/enterprise-cloud@latest/copilot/get-started/plans) по GitHub Enterprise Cloud.

Откройте Копилот Чат в редакторе и попросите его создать файлы с запросом, как показано ниже.

<!-- markdownlint-disable search-replace -->

```text copy
Create a starred repositories page for my software project. Add:
- events.json with sample data for a few starred repositories
- style.css to style a simple list
- script.js to fetch events.json and render the list
- an update to index.html that links style.css and script.js

Use the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.
```

<!-- markdownlint-enable search-replace -->

<a href="vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=button" target="_blank" class="btn btn-primary mt-3 mr-3 no-underline" aria-label="Open Copilot Chat in Visual Studio Code">
<span>ОткрытьКопилот ЧатвVS Code</span><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-link-external" aria-label="link external icon" role="img"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg>
</a><br><br>

Проверьте, что Copilot создает, а затем настройте файлы в соответствии с приведенными ниже примерами.

Если вы не использовали Copilot, используйте редактор кода для создания файлов, приведенных `add-starred-list` ниже в ветви.

1. Создайте файл с именем `events.json` со следующими примерами данных. Сохраните файл.

   ```json copy
   [
     { "name": "octocat/Hello-World", "starred": "2024-01-15" },
     { "name": "github/docs", "starred": "2024-02-02" },
     { "name": "octo-org/octo-repo", "starred": "2024-03-21" }
   ]
   ```

2. Создайте файл с именем `style.css` со следующими стилями. Сохраните файл.

   ```scss copy
   body {
     font-family: sans-serif;
     margin: 2rem;
   }

   ul {
     list-style: none;
     padding: 0;
   }

   li {
     padding: 0.5rem 0;
     border-bottom: 1px solid #ddd;
   }
   ```

3. Создайте файл с именем `script.js` со следующим кодом. Сохраните файл.

   ```javascript copy
   fetch("events.json")
     .then((response) => response.json())
     .then((events) => {
       const list = document.querySelector("#starred");
       events.forEach((event) => {
         const item = document.createElement("li");
         item.textContent = `${event.name} — starred ${event.starred}`;
         list.appendChild(item);
       });
     });
   ```

4. Обновите `index.html` , чтобы связать новые файлы и сохранить список. Сохраните файл.

   ```html copy
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>Stargazers log</title>
       <link rel="stylesheet" href="style.css">
     </head>
     <body>
       <h1>Stargazers log</h1>
       <p>A log of the repositories I've starred.</p>
       <ul id="starred"></ul>
       <script src="script.js"></script>
     </body>
   </html>
   ```

## Фиксация и отправка изменений

Фиксация сохраняет моментальный снимок изменений и отправляет их GitHub в место их хранения в репозитории.

1. Просмотрите GitHub Desktopизмененные файлы на левой боковой панели.
2. В нижней части боковой панели в поле **"Сводка** " введите сообщение фиксации, например `Add starred repositories list`.
3. Нажмите кнопку **"Зафиксировать 4 файла", чтобы открыть список надстроек**.
4. Нажмите кнопку **"Отправить источник** ", чтобы отправить фиксацию GitHub.

## Открытие запроса на вытягивание

Запрос на вытягивание предлагает изменения ветви для проверки перед их слиянием `main`.

1. В GitHub Desktopполе " **Предварительный просмотр запроса на вытягивание**" нажмите кнопку **"Создать запрос на вытягивание**". В браузере откроется форма GitHubзапроса на вытягивание.
2. Просмотрите название и описание, а затем добавьте примечание о том, что делает ваша функция.
3. Нажмите **"Создать pull request"**.

## То, что вы выполнили

| задачи                          | Результат                                                                   |
| ------------------------------- | --------------------------------------------------------------------------- |
| Создание ветви                  | Вы сделали изолированное пространство для вашей функции `add-starred-list`. |
| Написал код                     | Вы добавили файлы компонента в ветвь с дополнительной помощью Копилот Чат.  |
| Отправка изменений              | Вы сохранили изменения GitHubветви.                                         |
| Открытие запроса на вытягивание | Вы предложили изменения для проверки.                                       |

## Дополнительные материалы

* [О индивидуальных планах и преимуществах GitHub Copilot](/ru/enterprise-cloud@latest/copilot/concepts/billing/individual-plans)
* [Выставление счетов на основе использования для физических лиц](/ru/enterprise-cloud@latest/copilot/concepts/billing/usage-based-billing-for-individuals)
* [Мониторинг вашего GitHub AI Credits использования](/ru/enterprise-cloud@latest/copilot/how-tos/manage-and-track-spending/monitor-ai-usage) В GitHub Enterprise Cloud документации

## Дальнейшие действия

* Перед слиянием просмотрите собственные изменения, чтобы устранить проблемы рано. Перейдите к [Просмотр предлагаемых изменений](/ru/enterprise-server@3.22/get-started/start-your-journey/reviewing-your-proposed-changes).