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

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.

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

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.

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

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.

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 branch para revisão antes de serem mescladas em 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 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
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.

Get started

Neste artigo