Ejercicio: Inserción de un cambio a través de la canalización

  • 19 minutos

En esta unidad practicará el flujo de trabajo de código completo mediante la inserción en GitHub de un pequeño cambio en el sitio web de Space Game.

A Mara se le ha asignado la tarea de cambiar un texto en la página principal del sitio web, Index.cshtml. En esta unidad, seguirá adelante.

Este es un repaso breve de los pasos que se van a seguir para completar la tarea:

  • Sincronice el repositorio local con la rama main más reciente en GitHub
  • Crear una rama para los cambios
  • Realizar los cambios de código necesarios y comprobarlos localmente
  • Inserción de la rama en GitHub
  • Combinar los cambios recientes de la rama main de GitHub en la rama de trabajo local y comprobar que siguen funcionando
  • Insertar los cambios restantes, ver cómo Azure Pipelines compila la aplicación y enviar la solicitud de incorporación de cambios

Captura de la rama (“branch”) principal más reciente

En la unidad anterior ha creado una solicitud de incorporación de cambios y ha combinado la rama code-workflow en la rama main en GitHub. Ahora tendrá que volver a incorporar los cambios de main en la rama local.

El comando git pull captura el código más reciente desde el repositorio remoto y lo combina en el repositorio local. De este modo sabrá que está trabajando con el código base más reciente.

  1. En el terminal, ejecute git checkout main para cambiar a la rama main:

    git checkout main

  2. Para extraer los cambios más recientes, ejecute este comando git pull:

    git pull origin main

    Puede ver la lista de los archivos que se han cambiado. Como paso opcional, puede abrir el archivo azure-pipelines.yml para comprobar que contiene la configuración de compilación completa.

    Recuerde que un repositorio de Git donde colaboran los miembros del equipo (como en GitHub) se denomina repositorio remoto. Aquí, origin señala el repositorio en GitHub.

    Más adelante, podrá recuperar código de inicio del repositorio de GitHub de Microsoft, conocido como ascendente.

Compilación y ejecución de la aplicación web

Para asegurarse de que tiene una copia funcional para iniciar los cambios, compile y ejecute la aplicación web de forma local.

  1. En Visual Studio Code, vaya a la ventana del terminal y ejecute el siguiente comando dotnet build para compilar la aplicación:

    dotnet build --configuration Release

  2. Ejecute el comando dotnet run siguiente para ejecutar la aplicación:

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

    Sugerencia

    Si ve un error en el explorador relacionado con un error de privacidad o de certificado, seleccione Ctrl+C en el terminal para detener la aplicación en ejecución.

    A continuación, ejecute dotnet dev-certs https --trust y seleccione Sí cuando se le solicite o consulte esta entrada de blog para obtener más información.

    Una vez que el equipo confíe en el certificado SSL local, ejecute el comando dotnet run una segunda vez y vaya a http://localhost:5000 desde una nueva pestaña del explorador para ver la aplicación en ejecución.

Comprobación de que la aplicación se está ejecutando

En el modo de desarrollo, el sitio web de Space Game está configurado para ejecutarse en el puerto 5000.

En una nueva pestaña del explorador, vaya a http://localhost:5000 para ver la aplicación en ejecución.

Debería aparecer esto:

Screenshot of the Space Game website running in a web browser.

Puede interactuar con la página, incluido el marcador. Al seleccionar el nombre de un jugador, puede ver detalles sobre ese jugador.

Cuando haya terminado, vuelva a la ventana de terminal y seleccione Control+C para detener la aplicación en ejecución.

Creación de una rama de características

En esta sección, creará una rama de Git para poder trabajar en los archivos sin afectar a otros usuarios. Nadie sabrá que está trabajando en esos archivos hasta que los inserte en el repositorio remoto.

Para crear una rama, use el comando git checkout y asigne un nombre a la rama, tal como hizo en la parte anterior.

Antes de crear una rama, es recomendable seguir una convención de nomenclatura. Por ejemplo, si la rama es para trabajar en una característica nueva, podría usar feature/<branch-name>. Para corregir un error, podría usar bugfix/<bug-number>. En este ejemplo, el nombre de la rama será feature/home-page-text.

Ejecute el comando git checkout siguiente en el terminal:

git checkout -B feature/home-page-text

Al igual que antes, la clase feature/home-page-text se basa en la rama main.

Realización de cambios y pruebas locales

  1. En Visual Studio Code, abra Index.cshtml en el directorio Tailspin.SpaceGame.Web/Views/Home.

  2. Busque este texto junto a la parte superior de la página:

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

    Sugerencia

    Visual Studio Code también proporciona una manera fácil de buscar texto en archivos. Para acceder al panel de búsqueda, seleccione el icono de lupa en el panel lateral.

  3. Reemplace el texto del paso anterior por el texto "mal escrito" y, después, guarde el archivo:

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

    Tenga en cuenta que la palabra "oficial" se ha escrito mal de forma intencionada. Abordaremos este error más adelante en este módulo.

  4. En el terminal, ejecute el comando dotnet build siguiente para compilar la aplicación:

    dotnet build --configuration Release

  5. Ejecute el comando dotnet run siguiente para ejecutar la aplicación:

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

  6. En una nueva pestaña del explorador, vaya a http://localhost:5000 para ver la aplicación en ejecución.

    Verá que la página principal contiene el texto actualizado.

    Screenshot of the Space Game website with updated text. The text contains a spelling error.

    Cuando haya terminado, vuelva a la ventana de terminal y, después, presione Control+C para detener la aplicación en ejecución.

Confirmación e inserción de la rama

Aquí podrá almacenar provisionalmente los cambios en Index.cshtml, confirmar el cambio en la rama e insertarla en GitHub.

  1. Ejecute git status para comprobar si hay cambios sin confirmar en la rama:

    git status

    Verá que Index.cshtml se ha modificado. Al igual que antes, el siguiente paso es asegurarse de que Git está realizando el seguimiento de este archivo, lo que se denomina almacenamiento provisional del archivo.

  2. Ejecute el comando git add siguiente para almacenar Index.cshtml de forma provisional:

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

  3. Ejecute el comando git commit siguiente para confirmar en la rama feature/home-page-text el archivo almacenado provisionalmente:

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

  4. Ejecute este comando git push para insertar, o cargar, la rama feature/home-page-text en el repositorio de GitHub:

    git push origin feature/home-page-text

  5. Al igual que antes, puede encontrar la rama (“branch”) en GitHub desde el cuadro desplegable correspondiente.

    Screenshot of GitHub showing the new branch.

Compilación de la aplicación en Azure Pipelines

Como ha hecho antes, de forma automática Azure Pipelines pone en cola la compilación al insertar cambios en GitHub.

Como paso opcional, realice el seguimiento de la compilación mientras se desplaza a través de la canalización y compruebe que se realiza de forma correcta.

Sincronización de los cambios realizados en la rama (“branch”) principal

Mientras trabajaba en la característica, es posible que se hayan realizado cambios en la rama main remota. Antes de crear una solicitud de incorporación de cambios, un procedimiento habitual consiste en obtener la versión más reciente de la rama main remota.

Para ello, primero desactive o cambie a la rama main y, a continuación, fusione mediante combinación la rama remota main con la rama local main.

A continuación, extraiga la rama de características del repositorio y, a continuación, fusione mediante combinación la rama de características con la rama main.

Ahora se probará el proceso.

  1. En el terminal, ejecute este comando git checkout para extraer la rama main:

    git checkout main

  2. Para descargar los cambios más recientes en la rama main remota y combinarlos en la rama main local, ejecute este comando git pull:

    git pull origin main

    Como nadie ha realizado ningún cambio en la rama main, el siguiente comando le indica que ya está todo actualizado.

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

  3. Para extraer la rama de características del repositorio, ejecute git checkout:

    git checkout feature/home-page-text

  4. Fusione mediante combinación la rama de características con main:

    git merge main

    De nuevo, como nadie ha realizado ningún cambio en la rama main, verá que todo sigue actualizado.

    Already up to date.

    Si ha incorporado algún cambio, le interesará probar la aplicación para asegurarse de que todo sigue funcionando.

Nueva inserción de la rama local

Cuando se incorporan cambios del repositorio remoto a la rama de características local, tendrá que volver a insertar la rama local en el repositorio remoto una segunda vez.

Aunque no ha incorporado cambios del repositorio remoto, se practicará el proceso para ver qué sucede.

  1. Ejecute este comando git push para insertar los cambios en GitHub:

    git push origin feature/home-page-text

    Una vez más, la respuesta indica que ya está actualizado, porque no se ha realizado ningún cambio.

    Everything up-to-date

Envío de una solicitud de incorporación de cambios

En esta sección enviará una solicitud de incorporación de cambios tal como hizo antes.

  1. En un explorador, inicie sesión en GitHub.

  2. Vaya al repositorio mslearn-tailspin-spacegame-web.

  3. En la lista desplegable, seleccione la rama feature/home-page-text.

  4. Para iniciar la solicitud de incorporación de cambios (“pull request”), seleccione Contribuir y, a continuación, Open pull request (Abrir “pull request”).

  5. Asegúrese de que en la lista desplegable base se especifica su repositorio y no el de Microsoft.

    Screenshot of GitHub confirming that the branch can be merged.

    Importante

    De nuevo, este paso es importante porque no se pueden combinar los cambios en el repositorio de Microsoft.

    Cuando trabaje directamente con un repositorio propio y no una bifurcación, la rama main se selecciona de forma predeterminada.

  6. Escriba un título y una descripción para la solicitud de incorporación de cambios.

    • Título: Mejora del texto en la parte superior de la página principal
    • Descripción: Recibió el texto de la página principal más reciente del equipo del producto.

  7. Para completar la solicitud de incorporación de cambios, seleccione el botón Crear solicitud de incorporación de cambios.

    En este paso no se combina ningún código. Indica a otros usuarios que tiene cambios que propone para la combinación.

    Se muestra la ventana de la solicitud de incorporación de cambios. Como antes, una solicitud de incorporación de cambios desencadena Azure Pipelines para compilar la aplicación de forma predeterminada.

  8. Como paso opcional, seleccione el vínculo Detalles o vaya al proyecto de Azure DevOps y observe la ejecución de la canalización.

  9. Cuando la compilación haya finalizado, vuelva a la solicitud de incorporación de cambios en GitHub.

  10. Seleccione Merge pull request (Fusionar solicitud de incorporación de cambios) y, después, Confirm merge (Confirmar fusión).

  11. Seleccione Eliminar rama para eliminar la rama feature/home-page-text de GitHub.