Gravando e armazenando seu código

Agora você criará o recurso de site que você planejou: uma página que lista os repositórios estrelados. Ao longo do processo, você seguirá o fluxo de trabalho principal do desenvolvedor — configurando um espaço para seu trabalho, fazendo e salvando suas alterações 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 Conectar-se ao seu código localmente.

Criando um ramo

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

Abra o GitHub Desktop.
Na parte superior do aplicativo, clique em Branch Atual e clique em Novo Branch.
Nomeie o branch add-starred-liste clique em Criar Branch.
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 Free 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 na GitHub Enterprise Cloud documentação.

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

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.

AbrirCopilot ChatemVS Code

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.

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

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" }
]

Crie um arquivo nomeado style.css com os estilos a seguir. Salve o arquivo.

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

Crie um arquivo nomeado script.js com o código a seguir. Salve o arquivo.

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

Atualize index.html para vincular os novos arquivos e manter a lista. Salve o arquivo.

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>

Confirmar e enviar por push 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.

Em GitHub Desktop, examine os arquivos alterados na barra lateral esquerda.
Na parte inferior da barra lateral, no campo Resumo , digite uma mensagem de confirmação, como Add starred repositories list.
Clique em Confirmar 4 arquivos para adicionar lista estrelada.
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 ramificação para revisão antes de serem mescladas à ramificação principal main.

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.
Examine o título e a descrição e, em seguida, adicione uma anotação sobre o que seu recurso faz.
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 do recurso a sua ramificação, com a ajuda opcional da ramificação principal Copilot Chat.
Você enviou suas alterações	Você armazenou as alterações da sua ramificação em GitHub.
Você abriu um pull request	Você propôs suas alterações para revisão.

Leitura adicional

Planos para GitHub Copilot
Cobrança baseada em uso para indivíduos
Monitorar o uso de GitHub AI Credits 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.

Neste artigo

A seguir