# Gravando e armazenando seu código

Siga o fluxo de trabalho do desenvolvedor principal para criar um branch, escrever código e abrir uma solicitação de pull usando Copilot e GitHub Desktop.

Agora você criará o recurso de site que você planejou: uma página que lista os repositórios estrelados. Ao longo do caminho, você seguirá o fluxo de trabalho essencial de desenvolvimento: configurando um espaço para o seu trabalho, fazendo suas alterações e salvando-as, e propondo-as para revisão usando ramificações, commits e um pull request.

## Pré-requisitos

* Um clone local do repositório `stargazers-log`. Se você ainda não configurou isso, consulte [Connecting to your code locally](/pt/enterprise-server@3.17/get-started/start-your-journey/connecting-to-your-code-locally).

## Criando um ramo

Uma ramificação permite que você trabalhe em seu recurso em seu próprio espaço, sem alterar a `main` cópia do código até que você esteja pronto.

1. Abra o GitHub Desktop.
2. Na parte superior do aplicativo, clique em **Branch Atual** e clique em **Novo Branch**.
3. Nomeie o branch `add-starred-list`e clique em **Criar Branch**.
4. Clique em **Publicar branch** para disponibilizar a branch em GitHub.

## Compilando o código do site

Seu recurso precisa de alguns arquivos: dados de exemplo, uma folha de estilos, um script para exibir os dados e uma home page atualizada.

Você pode escrever esses arquivos por conta própria ou solicitar Copilot, um assistente de IA, para gerá-los. Cada conta GitHub inclui acesso a GitHub Copilot Gratuito e uma cota de créditos de IA para que você possa começar a usar Copilot imediatamente.

Para saber mais sobre os Copilot planos disponíveis e como o uso funciona, consulte [Planos para GitHub Copilot](/pt/enterprise-cloud@latest/copilot/get-started/plans) na GitHub Enterprise Cloud documentação.

Abra Bate-papo do Copilot no seu editor e peça que ele crie os arquivos com um prompt como o seguinte.

<!-- 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>AbrirBate-papo do CopilotemVS 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>

Examine o que Copilot gera e ajuste os arquivos para corresponder aos exemplos abaixo.

Se você não usou Copilot, use o editor de código para criar os arquivos abaixo no `add-starred-list` branch.

1. Crie um arquivo nomeado `events.json` com os dados de exemplo a seguir. Salve o arquivo.

   ```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. Crie um arquivo nomeado `style.css` com os estilos a seguir. Salve o arquivo.

   ```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. Crie um arquivo nomeado `script.js` com o código a seguir. Salve o arquivo.

   ```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. Atualize `index.html` para vincular os novos arquivos e manter a lista. Salve o arquivo.

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

## Commitando e dando push das suas alterações

A confirmação salva um instantâneo de suas alterações e o envio por push as envia para GitHub onde elas serão armazenadas em seu repositório.

1. Em GitHub Desktop, examine os arquivos alterados na barra lateral esquerda.
2. Na parte inferior da barra lateral, no campo **Resumo** , digite uma mensagem de confirmação, como `Add starred repositories list`.
3. Clique **em Confirmar 4 arquivos para adicionar lista estrelada**.
4. Clique em **Push origin** para enviar seu commit para GitHub.

## Abrindo uma solicitação de pull

Um pull request propõe as alterações da sua branch para revisão antes de serem mescladas em `main`.

1. Em GitHub Desktop, clique em **Visualizar Solicitação de Pull Request** e, em seguida, clique em **Criar Solicitação de Pull Request**. Seu navegador abre o formulário de pull request em GitHub.
2. Examine o título e a descrição e, em seguida, adicione uma anotação sobre o que seu recurso faz.
3. Clique em **Criar solicitação de pull**.

## O que você realizou

| Tarefa                                  | Resultado                                                                                                   |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Criou uma ramificação                   | Você criou um espaço separado para a sua funcionalidade com `add-starred-list`.                             |
| Escreveu o código                       | Você adicionou os arquivos da funcionalidade à sua ramificação, com ajuda opcional de Bate-papo do Copilot. |
| Suas alterações foram enviadas por push | Você armazenou as alterações do branch em GitHub.                                                           |
| Abriu uma solicitação de pull           | Você propôs suas alterações para revisão.                                                                   |

## Leitura adicional

* [Sobre planos e benefícios individuais do GitHub Copilot](/pt/enterprise-cloud@latest/copilot/concepts/billing/individual-plans)
* [Cobrança baseada em uso para indivíduos](/pt/enterprise-cloud@latest/copilot/concepts/billing/usage-based-billing-for-individuals)
* [Monitorar o uso de GitHub AI Credits](/pt/enterprise-cloud@latest/copilot/how-tos/manage-and-track-spending/monitor-ai-usage) na GitHub Enterprise Cloud documentação

## Próximas Etapas 

* Antes de mesclar, examine suas próprias alterações para detectar problemas mais cedo. Continue para [Revisando suas alterações propostas](/pt/enterprise-server@3.17/get-started/start-your-journey/reviewing-your-proposed-changes).