Agora que já clonamos o repositório para nossa máquina, é hora de implementar as mudanças solicitadas pela issue.

Você se lembra que no GitHub você editou o código dos arquivos Markdown diretamente online? Isso é feito por meio de um editor de código, mas o editor do GitHub só funciona quando estamos online, o que pode não ser ideal em todas as situações.

Por isso, é importante ter um editor de código instalado no seu computador, que permite editar os arquivos localmente e realizar modificações mesmo quando você não estiver conectado à internet. Além disso, usar um editor de código local oferece mais flexibilidade, recursos avançados e uma experiência mais eficiente.

Na próxima seção, vamos aprender a usar um editor de código específico: o Visual Studio Code. Vamos ver como configurá-lo e utilizá-lo para editar nosso repositório hello-world localmente.

Um editor de código é uma ferramenta usada para escrever e editar programas ou códigos-fonte de softwares. Ao contrário dos editores de texto comuns, como o Bloco de Notas (NotePad), Microsoft Word, Pages ou LibreOffice Writer, um editor de código é otimizado para lidar com linguagens de programação e com a estrutura de códigos.

Algumas das principais vantagens de usar um editor de código:

• Facilidade de uso e eficiência: Editores de código são mais rápidos e intuitivos, com recursos como autocompletar, sugestões de código, e navegação rápida entre arquivos.

• Destaque de sintaxe: Eles podem destacar o código de diferentes cores, facilitando a identificação de erros e tornando a leitura do código mais agradável.

• Integração com ferramentas de versionamento: Editores de código geralmente se integram com Git e outras ferramentas de controle de versão, facilitando o gerenciamento de código.

• Extensões e personalização: Você pode adicionar extensões para personalizar o editor conforme suas necessidades. Por exemplo, pode instalar extensões para linguagens específicas ou para integrar-se a plataformas como Docker e Kubernetes.

• Funciona offline: Ao contrário de editores online, como o do GitHub, você pode usar um editor de código local mesmo sem estar conectado à internet.

Imagine que você está escrevendo um livro. Usar um editor de código seria como usar uma ferramenta avançada de processamento de texto, como o Microsoft Word, mas voltada para programadores. Assim como o Word ajuda a organizar um texto, revisar e corrigir erros, o editor de código faz o mesmo com o seu código, com funções específicas para quem cria programas.

Se você usasse um editor de texto simples, como o Bloco de Notas, seria como escrever à mão, sem nenhum auxílio. Com um editor de código, você tem a vantagem de escrever de forma mais rápida, organizada e precisa.

Visual Studio Code

O Visual Studio Code (VSCode) é um dos editores de código mais populares e amplamente utilizados na indústria. Ele é gratuito, open-source e desenvolvido pela Microsoft. Sua popularidade se deve à facilidade de uso, suporte a diversas linguagens de programação e uma grande quantidade de extensões que podem ser instaladas para adicionar mais funcionalidades.

Como instalar o Visual Studio Code

Passo 1: Baixar o Visual Studio Code

1. Acesse o site oficial do Visual Studio Code: https://code.visualstudio.com/

2. Na página principal, clique no botão Download.

3. Escolha a versão correta para o seu sistema operacional:

   • Windows: Escolha a versão "User Installer" caso não tenha certeza.

   • macOS: Baixe o arquivo .dmg.

   • Linux: Escolha entre os pacotes .deb (Debian/Ubuntu) ou .rpm (Fedora/RHEL).

Passo 2: Instalar o Visual Studio Code

No Windows

1. Após o download, abra o arquivo .exe.

2. Na tela de instalação, clique em Avançar.

3. Aceite os termos de uso e continue clicando em Avançar.

4. Marque a opção "Adicionar ao PATH" para facilitar o uso no futuro.

5. Clique em Instalar e aguarde a conclusão.

Caso esteja enfrentando dificuldades, você pode seguir esse blog post, instruções da seção Como baixar e instalar o VS Code no Windows?, que possui o passo a passo com imagens.

No macOS

1. Abra o arquivo .dmg que você baixou.

2. Arraste o ícone do Visual Studio Code para a pasta Aplicativos.

3. Aguarde a cópia do programa e pronto!

No Linux (Ubuntu/Debian)

1. Abra o terminal.

2. Navegue até a pasta onde o arquivo .deb foi baixado.

3. Execute o comando:

   Copiar

   sudo dpkg -i code_*.deb

4. Caso apareçam erros de dependências, rode:

   Copiar

   sudo apt-get install -f

Passo 3: Abrir o Visual Studio Code

Após a instalação, abra o VSCode seguindo estas opções:

• Windows: Pesquise por Visual Studio Code no menu Iniciar.

• macOS: Vá até a pasta Aplicativos e clique no ícone do programa.

• Linux: Digite code no terminal e pressione Enter.

Como alterar o idioma para Português (Brasil)

Por padrão, o VSCode vem em inglês, mas podemos mudar para português:

1. Abra o Visual Studio Code.

2. No menu superior, clique em View > Command Palette....

3. Digite Configure Display Language e selecione essa opção.

4. Clique na opção Install additional languages.

5. Na loja de extensões, procure por Português (Brasil) e clique em Install.

6. Após a instalação, reinicie o VSCode para aplicar a mudança.

Caso esteja enfrentando dificuldades, você pode seguir esse blog post que possui o passo a passo com imagens.

Como abrir a pasta de um projeto

Para editar arquivos dentro de um projeto, primeiro precisamos abrir a pasta onde ele está salvo:

1. No menu superior, clique em Arquivo > Abrir Pasta....

2. Navegue até a pasta do projeto e clique em Selecionar Pasta.

3. A pasta será carregada e aparecerá na barra lateral esquerda da tela.

Como abrir um arquivo dentro da pasta

1. Com a pasta do projeto aberta, veja a lista de arquivos no lado esquerdo.

2. Clique duas vezes no arquivo que deseja editar.

3. O arquivo será aberto no editor de código no centro da tela.

Como editar um arquivo

1. Com o arquivo aberto, clique no meio do texto e digite as alterações desejadas.

2. Faça as mudanças no código ou no texto conforme necessário.

Como salvar as alterações

1. Após editar, vá até o menu Arquivo.

2. Clique em Salvar para salvar o arquivo.

Como visualizar Markdown formatado (como no GitHub)

Se o arquivo que você está editando for um arquivo markdown, é possível visualizar como ele irá ficar formatado:

1. Com o arquivo markdown aberto, clique no ícone de Pré-Visualização no canto superior direito.

2. O VSCode mostrará uma pré-visualização formatada do Markdown, igual ao que você veria no GitHub.

Outros editores de código, como Atom e Sublime Text, funcionam de maneira parecida, mas escolhemos o VSCode por ser amplamente adotado na indústria.

Fique tranquilo! Na próxima seção, vamos praticar a edição de arquivos passo a passo, editando o README.md do projeto hello-world!

Chegamos no momento de fazer as alterações no arquivo README.md da cópia local do repositório segundo requisitos da issue criada na seção8.2 Criando uma Issue no GitHub.

Passo a Passo

1. Abrindo o Visual Studio Code

O primeiro passo é abrir a aplicação Visual Studio Code, que foi instalada anteriormente.

Ao abrir o VSCode, será exibida a aba Bem-vindo. Essa aba apresenta atalhos para abrir projetos, acessar documentação e personalizar o editor.

No entanto, não iremos utilizá-la agora, então podemos fechá-la clicando no X no canto da aba.

O editor ficará assim:

2. Abrindo a pasta do repositório

Agora, vamos abrir a pasta do repositório no editor. Para isso, clique em Arquivo na barra de menu no topo da tela.

Selecione Abrir Pasta....

Encontre a pasta do repositório hello-world, selecione-a e clique em Abrir.

O editor agora exibirá os arquivos do repositório na barra lateral esquerda. Neste caso, apenas o README.md.

3. Abrindo o arquivo README.md

Na barra lateral esquerda, clique no arquivo README.md para abri-lo. O conteúdo do arquivo será mostrado no painel central da tela, onde você poderá editá-lo.

Antes de começarmos a edição, vamos visualizar como o arquivo fica formatado. Para isso:

1. Clique no ícone de Pré-Visualização no canto superior direito.

2. O VSCode abrirá uma visualização formatada do Markdown ao lado direito, mostrando como o arquivo será exibido no GitHub.

Agora, temos três principais áreas visíveis no editor:

• Barra lateral esquerda: Lista os arquivos do repositório.

• Painel central: Área onde editamos o README.md.

• Painel da direita: Pré-visualização do Markdown formatado.

4. Editando o arquivo

Podemos adicionar o exemplo sugerido na descrição issue ao final do arquivo.

![Boas vindas ao meu repositório!](https://link-para-o-gif-ou-imagem)

5. Escolhendo uma imagem ou GIF

Para encontrar uma imagem ou GIF para ilustrar a seção de boas-vindas, pode-se buscar diretamente no Google Images usando, por exemplo, os termos "gif boas-vindas".

Após escolher a que mais lhe agrada, clique na própria imagem para abri-lo.

Por fim, clique com o botão direito na imagem que se abriu a direita e selecione Copiar endereço da imagem.

Agora, é só substituir o link no README.md pelo URL real do GIF:

![Boas vindas ao meu repositório!](https://media3.giphy.com/media/Cmr1OMJ2FN0B2/giphy.gif?cid=790b76112e3e9eaa416c803fbf3b929f75c3716726601d56&rid=giphy.gif)

Perceba que automaticamente a pré-visualização já mostrará a sua imagem no texto formatado.

6. Alterando o texto alternativo (alt text)

O texto alternativo (alt text) é o texto incluído no código para descrever uma imagem em um site. Ele é fundamental para pessoas que utilizam ferramentas para leitura de tela, como é o caso das pessoas com deficiência visual.

Além de sua principal função, o alt text também pode ser útil em casos em que a imagem não carregue corretamente e também é uma ferramenta que ajuda os rastreadores de mecanismos de pesquisa a entenderem melhor o contexto da página.

Por isso, é uma boa prática sempre fornecer uma descrição clara e objetiva.

Podemos descrever nosso GIF da seguinte maneira:

Gif de um filhote de pinguim fofo com olhos grandes e brilhantes. Está sentado no gelo, sorrindo e acenando. Ele tem um pedaço de casca de ovo rachado ainda preso na cabeça, sugerindo que acabou de nascer. O fundo mostra um ambiente gelado com o céu ao entardecer.

Basta, então, atualizar o valor do alt text no README.md:

![Gif de um filhote de pinguim fofo com olhos grandes e brilhantes. Está sentado no gelo, sorrindo e acenando. Ele tem um pedaço de casca de ovo rachado ainda preso na cabeça, sugerindo que acabou de nascer. O fundo mostra um ambiente gelado com o céu ao entardecer.](https://media3.giphy.com/media/Cmr1OMJ2FN0B2/giphy.gif?cid=790b76112e3e9eaa416c803fbf3b929f75c3716726601d56&rid=giphy.gif)

7. Salvando o arquivo

Agora que as alterações foram feitas, é necessário salvar o arquivo no VSCode. Antes, perceba que:

• Quando um arquivo tem mudanças não salvas, aparece um ponto branco/preto ao lado do nome da aba.

• Quando o arquivo é salvo, o ponto desaparece e um X aparece no lugar.

• Se houver arquivos não salvos, o VSCode também exibe a etiqueta "1 não salvo" na barra lateral esquerda.

Para salvar o arquivo, clique em Arquivo no menu superior.

E selecione a opção Salvar.

Pronto, agora suas alterações estão salvas no seu computador! Perceba que agora aparece um X ao lado do nome do arquivo na aba e que o VSCode não mostra mais a etiqueta "1 não salvo".

Embora o arquivo tenha sido salvo no seu computador, ele ainda não foi salvo no controle local de versão do Git. Salvar no VSCode apenas armazena as mudanças localmente no seu computador, enquanto salvar no Git registra as mudanças no sistema de controle de versão, permitindo rastreamento e colaboração.

No próximo passo, veremos como adicionar essas mudanças ao Git para garantir que elas sejam versionadas corretamente.

Agora, vamos ver o processo completo de como salvar alterações no seu repositório Git local a partir de um novo branch. A prática de utilizar branches específicos para tarefas e correções ajuda a manter o fluxo de trabalho organizado e facilita a integração das modificações ao projeto principal.

Passo a Passo

Verificar estado atual do repositório

Antes de realizar qualquer modificação, é importante verificar o estado atual do repositório.

git status
▶ On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

O estado atual do README.md é tracked e modified, uma vez que o arquivo foi modificado anteriormente com a adição do GIF de boas vindas.

Criar um novo branch

Uma boa prática, especialmente para iniciantes, é evitar modificar diretamente o branch principal (main). Para cada nova tarefa ou correção, é recomendável criar um branch específico. Essa abordagem é conhecida como feature branch, onde cada funcionalidade ou correção é desenvolvida separadamente antes de ser integrada ao projeto principal.

Crie um novo branch chamado issue-1 e alterne para ele.

git switch -C issue-1
▶ Switched to a new branch 'issue-1'

Verificar estado atual do repositório

Ao verificar o estado do repositório, agora a primeira linha retornada deve ser On branch issue-1 ao a invés de On branch main.

git status
▶ On branch issue-1
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

O estado atual do README.md permanece tracked e modified.

Adicionar README.md

Agora, adicione o arquivo ao staging area, preparando-o para o commit.

git add README.md

Verificar estado atual do repositório

Verifique novamente o estado do repositório.

git status
▶ On branch issue-1
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	modified:   README.md

O estado do README.md agora é tracked e staged.

Git commit

Agora, salve as alterações no histórico do Git com um commit.

git commit -m 'Adicionando GIF de boas vindas ao README.md'
▶ [issue-1 29f1d56] Adicionando GIF de boas vindas ao README.md
 1 file changed, 2 insertions(+)

Verificando o log do repositório

Para confirmar que o commit foi registrado corretamente, utilize o comando:

git log

Saída esperada (algo como):

commit 2d942e747a89210df6d1454045abaa3ab451bda6 (HEAD -> issue-1)
Author: aprendizCumbucaDev <aprendiz.cumbucadev@gmail.com>
Date:   Mon Mar 10 20:57:46 2025 -0300

    Adicionando GIF de boas vindas ao README.md

commit 2e0d77fa56b7dc2b9c830c92d132143eacadcdf0 (origin/main, origin/HEAD, main)
Author: aprendizCumbucaDev <aprendiz.cumbucadev@gmail.com>
Date:   Mon Jan 20 14:44:57 2025 -0300

    Atualizando o README.md

    Adicionando o objetivo do repositório.

commit e140d961188e52636238ea60df81bc56f065a9ed
Author: aprendizCumbucaDev <aprendiz.cumbucadev@gmail.com>
Date:   Thu Jan 9 16:58:20 2025 -0300

    Initial commit

Note que o seu último commit aparece apenas no branch issue-1, indicado por (HEAD -> issue-1). Isso significa que seu novo commit está apenas no branch issue-1, enquanto o branch main local ainda está alinhado com o repositório remoto.

Após salvar suas alterações no controle de versão local, o próximo passo é enviá-las para o repositório remoto, o que abordaremos a seguir.