Exercício – Efetuar push de uma alteração pelo pipeline

Concluído

Nesta unidade, você praticará o fluxo de trabalho de código completo efetuando push de uma pequena alteração no site do Space Game no GitHub.

Mara recebeu a tarefa de alterar algum texto na home page do site, Index.cshtml. Nesta unidade, você acompanhará isso.

Vamos revisar rapidamente as etapas que você seguirá para concluir a tarefa:

• Sincronize seu repositório local com o ramo mais recente main do GitHub.
• Crie uma ramificação para manter as alterações.
• Faça as alterações de código necessárias e verifique-as localmente.
• Efetuar push do branch para o GitHub.
• Mescle as alterações recentes do main branch no GitHub em seu branch de trabalho local e verifique se as alterações ainda funcionam.
• Efetuar push das alterações restantes, observar o Azure Pipelines compilar o aplicativo e enviar a solicitação de pull.

Efetuar fetch da ramificação principal mais recente

Na unidade anterior, você criou uma pull request e mesclou seu branch code-workflow com o branch main no GitHub. Agora, você precisa efetuar pull das alterações em main de volta para o branch local.

O comando git pull busca o código mais recente do repositório remoto e o mescla ao repositório local. Dessa forma, você sabe que você está trabalhando com a base de código mais recente.

1. No terminal, execute git checkout main a fim de alternar para o branch main:

   git checkout main
   

2. Para efetuar pull das alterações mais recentes, execute este comando git pull:

   git pull origin main
   

   Você poderá exibir a lista de arquivos que foram alterados. Como uma etapa opcional, você pode abrir o arquivo azure-pipelines.yml para verificar se ele contém sua configuração de build completa.

   Lembre-se de que um repositório Git no qual os membros da equipe colaboram (como no GitHub) é chamado de remoto. Aqui, a origem especifica seu repositório no GitHub.

   Posteriormente, você buscará o código inicial do repositório Do Microsoft GitHub, conhecido como upstream.

Compilar e executar o aplicativo Web

Para garantir que você tenha uma cópia funcional para iniciar suas alterações, compile e execute o aplicativo Web localmente.

1. No Visual Studio Code, vá para a janela do terminal e execute o seguinte comando dotnet build para compilar o aplicativo:

   dotnet build --configuration Release
   

2. Execute o seguinte comando dotnet run para executar o aplicativo:

   dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
   

   Dica

   Se você vir um erro no navegador relacionado a um erro de privacidade ou certificado, selecione Ctrl+C no terminal para interromper o aplicativo em execução.

   Em seguida, execute dotnet dev-certs https --trust e selecione Sim quando solicitado ou consulte esta postagem de blog para obter mais informações.

   Depois que o computador confiar no certificado SSL local, execute o comando dotnet run uma segunda vez e vá para http://localhost:5000 em uma nova guia do navegador para ver o aplicativo em execução.

Verificar se o aplicativo está em execução

No modo de desenvolvimento, o site do Space Game está configurado para ser executado na porta 5000.

Em uma nova guia do navegador, acesse http://localhost:5000 para ver o aplicativo em execução.

Você verá isso:

Você pode interagir com a página, incluindo o placar de líderes. Ao selecionar o nome de um jogador, você verá detalhes sobre ele.

Quando terminar, retorne à janela do terminal e selecione Ctrl+C para interromper o aplicativo em execução.

Criar um branch de recursos

Nesta seção, você criará um branch do Git para que possa trabalhar em arquivos sem afetar ninguém. Ninguém saberá que você está trabalhando nesses arquivos até que você os envie por push para o repositório remoto.

Para criar um branch, use o comando git checkout e dê um nome ao branch, assim como fez na parte anterior.

Antes de criar um branch, é uma boa ideia seguir uma convenção de nomenclatura. Por exemplo, se a finalidade do branch for trabalhar em um novo recurso, você poderá usar feature/<branch-name>. Para uma correção de bug, você poderia usar bugfix/<bug-number>. Neste exemplo, o nome do seu branch será feature/home-page-text.

No terminal, execute o seguinte comando git checkout:

git checkout -B feature/home-page-text

Como antes, o feature/home-page-text é baseado no branch main.

Fazer alterações e testar localmente

1. No Visual Studio Code, abra Index.cshtml no diretório Tailspin.SpaceGame.Web/Views/Home .

2. Procure este texto próximo à parte superior da página:

   <p>An example site for learning</p>
   

   Dica

   O Visual Studio Code também oferece uma maneira fácil de pesquisar texto em arquivos. Para acessar o painel de pesquisa, selecione o ícone de lupa no painel lateral.

3. Substitua o texto da etapa anterior pelo seguinte texto “digitado incorretamente” e salve o arquivo:

   <p>Welcome to the oficial Space Game site!</p>
   

   Observe que a palavra “oficial” é digitada de maneira incorreta intencionalmente. Abordaremos esse erro mais tarde neste módulo.

4. No terminal, execute o seguinte comando dotnet build para compilar o aplicativo:

   dotnet build --configuration Release
   

5. Execute o seguinte comando dotnet run para executar o aplicativo:

   dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
   

6. Em uma nova guia do navegador, acesse http://localhost:5000 para ver o aplicativo em execução.

   Você pode ver que a página inicial contém o texto atualizado.

   

   Quando terminar, retorne à janela do terminal e pressione Ctrl+C para interromper o aplicativo em execução.

Confirmar e efetuar push de seu branch

Aqui, você preparará suas alterações em Index.cshtml, confirmará a alteração em seu branch e efetuará push do branch para o GitHub.

1. Execute git status para verificar se há alterações não confirmadas em seu branch:

   git status
   

   Você verá que Index.cshtml foi modificado. Como antes, a próxima etapa é verificar se o Git está acompanhando esse arquivo, o que é chamado de preparação do arquivo.

2. Execute o seguinte git add comando para preparar Index.cshtml:

   git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
   

3. Execute o comando git commit a seguir para fazer commit do arquivo preparado no branch feature/home-page-text:

   git commit -m "Improve the text at the top of the home page"
   

4. Execute este comando git push para efetuar push (ou fazer upload) do branch feature/home-page-text em seu repositório no GitHub:

   git push origin feature/home-page-text
   

5. Assim como antes, você pode localizar o branch no GitHub na caixa suspensa do branch.

   

Assistir à compilação do aplicativo pelo Azure Pipelines

Assim como você fez anteriormente, o Azure Pipelines enfileira automaticamente o build quando você envia alterações por push ao GitHub.

Como etapa opcional, rastreie o build conforme ele percorre o pipeline e verifique se ele é bem-sucedido.

Sincronizar as alterações com a ramificação principal

Enquanto você estava ocupado trabalhando em seu recurso, alterações podem ter sido feitas no branch main remoto. Antes de você criar uma solicitação de pull, é uma prática comum obter a última versão do branch main remoto.

Para fazer isso, primeiro faça check-out ou alterne para o branch main. Em seguida, mescle o branch remoto main com o branch local main .

Em seguida, fazer check-out do branch de recursos e mescle o branch de recursos com o branch main.

Vamos testar o processo.

1. No terminal, execute o comando git checkout para fazer check-out do branch main:

   git checkout main
   

2. Para baixar as alterações mais recentes do branch main remoto e mesclá-las com o branch main local, execute este comando git pull:

   git pull origin main
   

   Como ninguém fez alterações em seu branch main, o comando a seguir informa que tudo já está atualizado.

   From https://github.com/username/mslearn-tailspin-spacegame-web
    * branch            main     -> FETCH_HEAD
   Already up to date.
   

3. Para fazer check-out do branch de recursos, execute git checkout:

   git checkout feature/home-page-text
   

4. Mescle seu branch de recursos com main:

   git merge main
   

   Mais uma vez, como ninguém fez alterações no branch main, você verá que tudo ainda está atualizado.

   Already up to date.
   

   Se tivesse incorporado alterações, você testaria o aplicativo novamente para garantir que tudo continua funcionando.

Efetuar push do branch local novamente

Quando incorpora alterações do repositório remoto ao seu branch de recurso local, você precisa efetuar push do branch local de volta para o repositório remoto uma segunda vez.

Embora você não tenha incorporado alterações do repositório remoto, vamos praticar o processo para ver o que acontece.

1. Execute este comando git push para efetuar push das alterações para o GitHub:

   git push origin feature/home-page-text
   

   Mais uma vez, a resposta diz que tudo já está atualizado, pois nenhuma alteração foi feita.

   Everything up-to-date
   

Enviar uma solicitação de pull

Nesta seção, você enviará uma pull request da mesma forma que fez anteriormente.

1. Em um navegador, entre no GitHub.

2. Vá para o repositório mslearn-tailspin-spacegame-web .

3. Na lista suspensa, selecione o branch feature/home-page-text.

4. Para iniciar sua solicitação de pull, selecione Contribuir e , em seguida, Abra a solicitação de pull.

5. Verifique se a lista suspensa base especifica seu repositório, e não o repositório da Microsoft.

   

   Importante

   Mais uma vez, essa etapa é importante porque você não poderá mesclar suas alterações com o repositório da Microsoft.

   Quando você trabalha diretamente com seu próprio repositório, não com uma bifurcação, seu branch main é selecionado por padrão.

6. Insira um título e uma descrição para a pull request.

   • Título: Melhorar o texto na parte superior da home page
   • Descrição: Foi recebido o texto mais recente da home page da equipe do produto.

7. Para concluir sua solicitação de pull, selecione Criar solicitação de pull.

   Esta etapa não mescla nenhum código. Ela informa a outras pessoas que você tem alterações que está propondo mesclar.

   A janela da pull request será exibida. Assim como antes, uma pull request dispara o Azure Pipelines para criar seu aplicativo por padrão.

8. Opcionalmente, selecione o link Detalhes ou acesse seu projeto no Azure DevOps e assista à execução do pipeline.

9. Quando o build for concluído, volte para a pull request no GitHub.

10. Selecione Mesclar solicitação de pull e selecione Confirmar mesclagem.

11. Selecione Excluir branch para excluir o feature/home-page-text branch do GitHub.