Exercício – Criar um branch como Alice

10 minutos

Sua amiga desenvolvedora Alice quer adicionar CSS para estilizar as fotos de gatos em seu site. Alice quer realizar esse trabalho em seu próprio branch.

Instalação

Antes de assumir a função de Alice, você deve fazer um trabalho de configuração de um repositório básico para ser compartilhado entre todos e adicionar alguns arquivos.

O Git já está instalado para nós no Azure Cloud Shell e, portanto, podemos usar o Git no Cloud Shell à direita.

Criar um repositório básico compartilhado

Crie um diretório chamado Shared.git para armazenar o repositório básico:
```
mkdir Shared.git
cd Shared.git
```
Agora, execute o seguinte comando para criar um repositório básico no diretório compartilhado:
```
git init --bare
```
Defina o nome do branch padrão para o novo repositório. Para realizar essa etapa, você pode alterar o branch HEAD para que ele aponte para outro branch. Neste caso, o branch main:
```
git symbolic-ref HEAD refs/heads/main
```

Clonar o repositório compartilhado para Bob

Suba um nível desse diretório e crie um diretório para Bob a fim de armazenar o repositório:
```
cd ..
mkdir Bob
```

Clone e configure o repositório para Bob:

cd Bob
git clone ../Shared.git .
git config user.name Bob
git config user.email bob@contoso.com
git symbolic-ref HEAD refs/heads/main

Observação

Como você deseja começar com o branch padrão do main, você precisa alterar HEAD para apontar para refs/heads/main em vez de refs/heads/master, que é o nome do branch padrão.

Adicionar arquivos base

Como uma etapa de configuração final, adicionaremos os arquivos base do site e efetuaremos push deles para o repositório compartilhado. Para esses comandos, ainda estamos trabalhando no diretório Bob.

Crie alguns arquivos executando o comando touch do Linux, prepare os arquivos e confirme-os usando o Git:

touch index.html
mkdir Assets
touch Assets/site.css
git add .
git commit -m "Create empty index.html and site.css files"

Agora, adicione HTML ao arquivo usando o editor de código do Cloud Shell. Você pode abrir o editor executando o comando code. Abra index.html no editor online inserindo code index.html no prompt do terminal:
```
code index.html
```

Cole este código HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
    <link rel="stylesheet" href="CSS/site.css">
  </head>
  <body>
    <nav><a href="./index.html">home</a></nav>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <footer><hr>Copyright (c) 2021 Contoso Cats</footer>
  </body>
</html>

Salve o arquivo e feche o editor. Selecione as reticências "…" no canto direito do editor ou use a tecla de acelerador (pressione CTRL+S no Windows e no Linux e Cmd+S no macOS).
Altere para o diretório Ativos e abra site.css no editor:
```
cd Assets
code site.css
```

Adicione o seguinte CSS ao arquivo:

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; background-color: #F0FFF8; }
nav, footer { background-color: #C0D8DF; }

Salve o arquivo e feche o editor.

Volte ao diretório Bob e confirme novamente:
```
cd ..
git add .
git commit -m "Add simple HTML and stylesheet"
git push --set-upstream origin main
```
Observação

Como estamos usando um nome de branch padrão diferente, você precisa dizer ao git para associar o seu branch principal ao branch principal do repositório de origem.

Verifique a saída. Se um aviso como este for exibido, não se preocupe. O aviso só está informando os usuários de uma alteração nos comportamentos padrão do Git.

warning: push.default is unset; its implicit value has changed in
Git 2.0 from 'matching' to 'simple'. To squelch this message
and maintain the traditional behavior, use:

  git config --global push.default matching

To squelch this message and adopt the new behavior now, run:

  git config --global push.default simple

When push.default is set to 'matching', git will push local branches
to the remote branches that already exist with the same name.

Since Git 2.0, Git defaults to the more conservative 'simple'
behavior, which only pushes the current branch to the corresponding
remote branch that 'git pull' uses to update the current branch.

See 'git help config' and search for 'push.default' for further information.
(the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
'current' instead of 'simple' if you sometimes use older versions of Git)

Se você quiser ter certeza de que não verá esse aviso novamente, execute este comando:

git config --global push.default simple

Verifique a saída deste indicador de êxito:

Counting objects: 9, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (9/9), 953 bytes | 953.00 KiB/s, done.
Total 9 (delta 0), reused 0 (delta 0)
To ../Shared.git
 * [new branch]      main -> main

Criar um branch para Alice

Alice quer criar um branch do tópico chamado add-style para trabalhar. Vamos assumir a função de Alice, criar o branch e adicionar código a ele.

Mova um nível para cima desse diretório e crie um diretório para a cópia do repositório da Alice:
```
cd ..
mkdir Alice
```

Clone o repositório para Alice e o configure:

cd Alice
git clone ../Shared.git .
git config user.name Alice
git config user.email alice@contoso.com

Agora você tem uma cópia atual do repositório. Para confirmar, você pode listar o conteúdo do arquivo e executar git status para confirmar o estado do repositório.
```
ls
git status
```
Execute o comando git branch para criar um branch chamado add-style. Execute o comando git checkout para alternar para esse branch (torná-lo o branch atual).
```
git branch add-style
git checkout add-style
```
No diretório Alice/Ativos, abra site.css. Adicione a seguinte definição de classe CSS à parte inferior do arquivo:
```
.cat { max-width: 40%; padding: 5 }
```
Salve as alterações feitas no arquivo e feche o editor.

Confirme a alteração:

git commit -a -m "Add style for cat pictures"

Neste ponto, Alice deseja disponibilizar seu estilo a todos os outros usuários. Portanto, ela volta para main e efetua pull caso qualquer outra pessoa tenha feito alterações:
```
git checkout main
git pull
```
A saída informa que o branch main está atualizado (em outras palavras, main no computador de Alice corresponde a main no repositório compartilhado). Portanto, Alice mescla o branch add-style com o branch main executando git merge --ff-only para executar uma mesclagem de avanço rápido. Alice efetua push de main do repositório dela para o repositório compartilhado.
```
git merge --ff-only add-style
git push
```

Nesse caso, uma mesclagem de avanço rápido não era estritamente necessária porque o branch main não tinha nenhuma alteração, e o Git teria mesclado as alterações de qualquer forma. Mas usar o sinalizador --ff only é uma boa prática, pois uma mesclagem --ff-only falhará se main tiver sido alterado.

Continuar