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

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

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

Локальный клон репозитория stargazers-log . Если вы еще не настроили эту настройку, см. раздел Подключение к коду локально.

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

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

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

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

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

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

Сведения о доступных Copilot планах и способах использования см. в документации по GitHub Enterprise Cloud.

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

Text

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.

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.

ОткрытьКопилот ЧатвVS Code

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

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

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

JSON

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

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

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

SCSS

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

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

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

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

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

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

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

JavaScript

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);
    });
  });

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);
    });
  });

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

HTML

<!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>

<!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 в место их хранения в репозитории.

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

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

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

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

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

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

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

О индивидуальных планах и преимуществах GitHub Copilot
Выставление счетов на основе использования для физических лиц
Мониторинг вашего GitHub AI Credits использования В GitHub Enterprise Cloud документации

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

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

Get started

В этой статье