Exercício – Emitir uma alteração através do pipeline

  • 19 minutos

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

Mara recebeu a tarefa de alterar algum texto na página inicial do site, Index.cshtml. Nesta unidade, você acompanhará.

Vamos rever brevemente as etapas a seguir para concluir a tarefa:

  • Sincronize seu repositório local com a ramificação main mais recente no GitHub.
  • Crie uma ramificação para manter suas alterações.
  • Faça as alterações de código necessárias e verifique-as localmente.
  • Empurre sua filial para o GitHub.
  • Mescle quaisquer alterações recentes da ramificação main no GitHub em sua ramificação de trabalho local e verifique se as alterações ainda funcionam.
  • Faça o push de todas as alterações restantes, veja o Azure Pipelines compilar a aplicação e envie o seu pull request.

Buscar a filial principal mais recente

Na unidade anterior, você criou uma solicitação pull e mesclou sua code-workflow ramificação na main ramificação no GitHub. Agora, precisa de enviar as alterações feitas ao main de volta para o ramo local.

O comando git pull obtém o código mais recente do repositório remoto e intercala-o no repositório local. Dessa forma, você sabe que está trabalhando com a base de código mais recente.

  1. No seu terminal, corra git checkout main para mudar para a main filial:

    git checkout main

  2. Para puxar para baixo as alterações mais recentes, execute este git pull comando:

    git pull origin main

    Você pode 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 compilação completa.

    Lembre-se de que um repositório do Git onde os membros da equipa podem colaborar (como o GitHub) chama-se remoto. Aqui, origem especifica o seu repositório no GitHub.

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

Compilar e executar a aplicação Web

Para garantir que você tenha uma cópia de trabalho para iniciar as alterações, crie e execute o aplicativo Web localmente.

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

    dotnet build --configuration Release

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

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

    Gorjeta

    Se vir um erro no navegador relacionado com um erro de privacidade ou certificado, selecione Ctrl+C no terminal para parar a aplicação 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 dotnet run comando uma segunda vez e vá para http://localhost:5000 a partir de uma nova guia do navegador para ver o aplicativo em execução.

Verifique se o aplicativo está em execução

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

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

Você deve ver isto:

Captura de tela do site Space Game em execução em um navegador da web.

Você pode interagir com a página, incluindo a tabela de classificação. Quando seleciona o nome de um jogador, vê detalhes sobre esse jogador.

Quando terminar, volte para a janela do terminal e selecione Ctrl+C para parar o aplicativo em execução.

Criar um ramo de funcionalidade

Nesta seção, você criará uma ramificação do Git para que possa trabalhar em arquivos sem afetar mais ninguém. Ninguém saberá mesmo que está a trabalhar nesses ficheiros até serem enviados para o repositório remoto.

Para criar uma ramificação, use o git checkout comando e dê um nome à sua ramificação, assim como fez na parte anterior.

Antes de criar um ramo, é uma boa ideia adotar uma convenção de nomenclatura. Por exemplo, se o ramo for para trabalhar num numa nova funcionalidade, poderá utilizar feature/<branch-name>. Para uma correção de erro, pode utilizar bugfix/<bug-number>. Neste exemplo, o nome da ramificação será feature/home-page-text.

No seu terminal, execute o seguinte git checkout comando:

git checkout -B feature/home-page-text

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

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 perto do topo da página:

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

    Gorjeta

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

  3. Substitua o texto na etapa anterior pelo seguinte texto "digitado incorretamente" e, em seguida, salve o arquivo:

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

    Note que a palavra "oficial" é intencionalmente digitada incorretamente. Abordaremos esse erro mais adiante neste módulo.

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

    dotnet build --configuration Release

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

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

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

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

    Captura de tela do site Space Game com texto atualizado. O texto contém um erro ortográfico.

    Quando terminar, regresse à janela do terminal e, em seguida, prima Ctrl+C para parar a aplicação em execução.

Consolidar e emitir o ramo

Aqui, vai testar as alterações feitas a Index. cshtml, consolidar a alteração para o ramo e emitir o ramo para o GitHub.

  1. Execute git status para verificar e ver se há alterações não confirmadas em sua ramificação:

    git status

    Você verá que Index.cshtml foi modificado. Como antes, a próxima etapa é certificar-se de que o Git está rastreando esse arquivo, que é chamado de preparo 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 seguinte git commit comando para confirmar seu arquivo em estágios na feature/home-page-text ramificação:

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

  4. Execute este git push comando para enviar ou carregar a feature/home-page-text ramificação para seu repositório no GitHub:

    git push origin feature/home-page-text

  5. Assim como antes, você pode localizar sua filial no GitHub a partir da caixa suspensa de filial.

    Captura de tela do GitHub mostrando a nova ramificação.

Ver o Azure Pipelines a compilar a aplicação

Tal como fez anteriormente, o Azure Pipelines coloca a compilação automaticamente em fila quando enviar alterações para o GitHub.

Como uma etapa opcional, rastreie a compilação à medida que ela se move pelo pipeline e verifique se a compilação foi bem-sucedida.

Sincronizar quaisquer alterações na ramificação principal

Enquanto você estava ocupado trabalhando em seu recurso, alterações podem ter sido feitas na ramificação remota main . Antes de criar uma solicitação pull, é prática comum obter a mais recente da ramificação remota main .

Para fazer isso, primeiro faça check-out da ramificação main ou mude para ela. Em seguida, mescle a ramificação main remota com a ramificação main local.

Em seguida, verifique sua ramificação de recurso e, em seguida, mescle sua ramificação de recurso com a ramificação main.

Vamos experimentar agora o processo.

  1. No seu terminal, execute este git checkout comando para verificar a main ramificação:

    git checkout main

  2. Para baixar as alterações mais recentes na ramificação remota main e mesclar essas alterações em sua ramificação local main , execute este git pull comando:

    git pull origin main

    Como ninguém realmente fez nenhuma alteração em sua main filial, 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 verificar sua ramificação de recursos, execute git checkout:

    git checkout feature/home-page-text

  4. Mescle sua ramificação de recursos com main:

    git merge main

    Novamente, porque ninguém realmente fez nenhuma alteração em sua main filial, você vê que tudo ainda está atualizado.

    Already up to date.

    Se você incorporou alguma alteração, convém testar seu aplicativo novamente para garantir que tudo ainda esteja funcionando.

Emitir novamente o ramo local

Quando incorporar as alterações do repositório remoto no ramo de funcionalidade local, terá de enviar o ramo local de volta para o repositório remoto uma segunda vez.

Embora não tenham sido incorporadas nenhumas alterações a partir do repositório remoto, vamos praticar o processo para ver o que acontece.

  1. Execute este git push comando para enviar suas alterações para o GitHub:

    git push origin feature/home-page-text

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

    Everything up-to-date

Submeter um pedido Pull

Nesta seção, você envia uma solicitação pull exatamente como fez anteriormente.

  1. Em um navegador, faça login no GitHub.

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

  3. Na lista suspensa, selecione sua feature/home-page-text filial.

  4. Para iniciar sua solicitação pull, selecione Contribute e, em seguida, Open pull request.

  5. Certifique-se de que a lista suspensa base especifique seu repositório e não o repositório da Microsoft.

    Captura de tela do GitHub confirmando que a ramificação pode ser mesclada.

    Importante

    Novamente, esta etapa é importante porque você não pode mesclar suas alterações no repositório da Microsoft.

    Quando trabalha diretamente com o seu próprio repositório e não com um fork, o ramo main está selecionado por predefinição.

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

    • Título: Melhorar o texto na parte superior da página inicial
    • Descrição: Recebeu o texto mais recente da página inicial da equipe do produto.

  7. Para concluir sua solicitação pull, selecione Create pull request.

    Este passo não intercala nenhum código. Ele diz aos outros que você tem mudanças que você está propondo mesclar.

    A janela pull request é exibida. Como antes, uma solicitação pull aciona o Azure Pipelines para criar seu aplicativo por padrão.

  8. Opcionalmente, selecione o link Detalhes ou vá para seu projeto no Azure DevOps e observe a execução do pipeline.

  9. Quando a compilação estiver concluída, volte para sua solicitação pull no GitHub.

  10. Selecione Mesclar solicitação pull e, em seguida, selecione Confirmar mesclagem.

  11. Selecione Excluir ramificação para excluir a feature/home-page-text ramificação do GitHub.