{"meta":{"title":"Написание и хранение кода","intro":"Выполните основной рабочий процесс разработчика, чтобы создать ветвь, написать код и открыть запрос на вытягивание с помощью Copilot и GitHub Desktop.","product":"Начало работы","breadcrumbs":[{"href":"/ru/get-started","title":"Начало работы"},{"href":"/ru/get-started/start-your-journey","title":"Начните переход"},{"href":"/ru/get-started/start-your-journey/writing-and-storing-your-code","title":"Написание и хранение кода"}],"documentType":"article"},"body":"# Написание и хранение кода\n\nВыполните основной рабочий процесс разработчика, чтобы создать ветвь, написать код и открыть запрос на вытягивание с помощью Copilot и GitHub Desktop.\n\nТеперь вы создадите функцию веб-сайта, которую вы планируете: страница, в которую перечислены размещенные репозитории. На этом пути вы будете следовать основному рабочему процессу разработчика — настройке пространства для работы, внесению и сохранению изменений, а также предложению их для проверки с помощью ветвей, фиксаций и запроса на вытягивание.\n\n## Необходимые условия\n\n* Локальный клон репозитория `stargazers-log` . Если вы еще не настроили эту настройку, см. раздел [Подключение к коду локально](/ru/get-started/start-your-journey/connecting-to-your-code-locally).\n\n## Создание ветви\n\nВетвь позволяет работать над функцией в собственном пространстве, не изменяя `main` копию кода до тех пор, пока вы не будете готовы.\n\n1. Откройте GitHub Desktop.\n2. В верхней части приложения нажмите кнопку **\"Текущая ветвь**\", а затем нажмите кнопку **\"Создать ветвь**\".\n3. Назовите ветвь, а затем нажмите кнопку `add-starred-list`\\*\\*\\*\\*\".\n4. Нажмите кнопку **\"Опубликовать ветвь** \", чтобы сделать ветвь доступной GitHub.\n\n## Создание кода веб-сайта\n\nДля функции требуется несколько файлов: примеры данных, таблица стилей, скрипт для отображения данных и обновленная домашняя страница.\n\nЭти файлы можно написать самостоятельно или попросить Copilotпомощника по искусственному интеллекту, чтобы создать их. Каждая GitHub учетная запись включает в себя доступ GitHub Copilot Free к и пособие по кредитам искусственного интеллекта, поэтому вы можете начать использовать Copilot сразу.\n\nСведения о доступных Copilot планах и способах использования см. в документации[](/ru/copilot/get-started/plans) по .\n\nОткройте Copilot Chat в редакторе и попросите его создать файлы с запросом, как показано ниже.\n\n<!-- markdownlint-disable search-replace -->\n\n```text copy\nCreate a starred repositories page for my software project. Add:\n- events.json with sample data for a few starred repositories\n- style.css to style a simple list\n- script.js to fetch events.json and render the list\n- an update to index.html that links style.css and script.js\n\nUse the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.\n```\n\n<!-- markdownlint-enable search-replace -->\n\n<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\">\n<span>ОткрытьCopilot Chatв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>\n</a><br><br>\n\nПроверьте, что Copilot создает, а затем настройте файлы в соответствии с приведенными ниже примерами.\n\nЕсли вы не использовали Copilot, используйте редактор кода для создания файлов, приведенных `add-starred-list` ниже в ветви.\n\n1. Создайте файл с именем `events.json` со следующими примерами данных. Сохраните файл.\n\n   ```json copy\n   [\n     { \"name\": \"octocat/Hello-World\", \"starred\": \"2024-01-15\" },\n     { \"name\": \"github/docs\", \"starred\": \"2024-02-02\" },\n     { \"name\": \"octo-org/octo-repo\", \"starred\": \"2024-03-21\" }\n   ]\n   ```\n\n2. Создайте файл с именем `style.css` со следующими стилями. Сохраните файл.\n\n   ```scss copy\n   body {\n     font-family: sans-serif;\n     margin: 2rem;\n   }\n\n   ul {\n     list-style: none;\n     padding: 0;\n   }\n\n   li {\n     padding: 0.5rem 0;\n     border-bottom: 1px solid #ddd;\n   }\n   ```\n\n3. Создайте файл с именем `script.js` со следующим кодом. Сохраните файл.\n\n   ```javascript copy\n   fetch(\"events.json\")\n     .then((response) => response.json())\n     .then((events) => {\n       const list = document.querySelector(\"#starred\");\n       events.forEach((event) => {\n         const item = document.createElement(\"li\");\n         item.textContent = `${event.name} — starred ${event.starred}`;\n         list.appendChild(item);\n       });\n     });\n   ```\n\n4. Обновите `index.html` , чтобы связать новые файлы и сохранить список. Сохраните файл.\n\n   ```html copy\n   <!DOCTYPE html>\n   <html lang=\"en\">\n     <head>\n       <meta charset=\"utf-8\">\n       <title>Stargazers log</title>\n       <link rel=\"stylesheet\" href=\"style.css\">\n     </head>\n     <body>\n       <h1>Stargazers log</h1>\n       <p>A log of the repositories I've starred.</p>\n       <ul id=\"starred\"></ul>\n       <script src=\"script.js\"></script>\n     </body>\n   </html>\n   ```\n\n## Фиксация и отправка изменений\n\nФиксация сохраняет моментальный снимок изменений и отправляет их GitHub в место их хранения в репозитории.\n\n1. Просмотрите GitHub Desktopизмененные файлы на левой боковой панели.\n2. В нижней части боковой панели в поле **\"Сводка** \" введите сообщение фиксации, например `Add starred repositories list`.\n3. Нажмите кнопку **\"Зафиксировать 4 файла\", чтобы открыть список надстроек**.\n4. Нажмите кнопку **\"Отправить источник** \", чтобы отправить фиксацию GitHub.\n\n## Открытие запроса на вытягивание\n\nЗапрос на вытягивание предлагает изменения ветви для проверки перед их слиянием `main`.\n\n1. В GitHub Desktopполе \" **Предварительный просмотр запроса на вытягивание**\" нажмите кнопку **\"Создать запрос на вытягивание**\". В браузере откроется форма GitHubзапроса на вытягивание.\n2. Просмотрите название и описание, а затем добавьте примечание о том, что делает ваша функция.\n3. Нажмите **\"Создать pull request\"**.\n\n## То, что вы выполнили\n\n| задачи                          | Результат                                                                   |\n| ------------------------------- | --------------------------------------------------------------------------- |\n| Создание ветви                  | Вы сделали изолированное пространство для вашей функции `add-starred-list`. |\n| Написал код                     | Вы добавили файлы компонента в ветвь с дополнительной помощью Copilot Chat. |\n| Отправка изменений              | Вы сохранили изменения GitHubветви.                                         |\n| Открытие запроса на вытягивание | Вы предложили изменения для проверки.                                       |\n\n## Дополнительные материалы\n\n* [Планы по GitHub Copilot](/ru/copilot/concepts/billing/individual-plans)\n* [Выставление счетов на основе использования для физических лиц](/ru/copilot/concepts/billing/usage-based-billing-for-individuals)\n* [Мониторинг вашего GitHub AI Credits использования](/ru/copilot/how-tos/manage-and-track-spending/monitor-ai-usage)\n\n## Дальнейшие действия\n\n* Перед слиянием просмотрите собственные изменения, чтобы устранить проблемы рано. Перейдите к [Просмотр предлагаемых изменений](/ru/get-started/start-your-journey/reviewing-your-proposed-changes)."}