Ejercicio: Inserción de un cambio a través de la canalización
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.
En el terminal, ejecute
git checkout main
para cambiar a la ramamain
:git checkout main
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.
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
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 ahttp://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:
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
En Visual Studio Code, abra Index.cshtml en el directorio Tailspin.SpaceGame.Web/Views/Home.
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.
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.
En el terminal, ejecute el comando
dotnet build
siguiente para compilar la aplicación:dotnet build --configuration Release
Ejecute el comando
dotnet run
siguiente para ejecutar la aplicación:dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
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.
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.
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.
Ejecute el comando
git add
siguiente para almacenar Index.cshtml de forma provisional:git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
Ejecute el comando
git commit
siguiente para confirmar en la ramafeature/home-page-text
el archivo almacenado provisionalmente:git commit -m "Improve the text at the top of the home page"
Ejecute este comando
git push
para insertar, o cargar, la ramafeature/home-page-text
en el repositorio de GitHub:git push origin feature/home-page-text
Al igual que antes, puede encontrar la rama (“branch”) en GitHub desde el cuadro desplegable correspondiente.
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.
En el terminal, ejecute este comando
git checkout
para extraer la ramamain
:git checkout main
Para descargar los cambios más recientes en la rama
main
remota y combinarlos en la ramamain
local, ejecute este comandogit 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.
Para extraer la rama de características del repositorio, ejecute
git checkout
:git checkout feature/home-page-text
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.
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.
En un explorador, inicie sesión en GitHub.
Vaya al repositorio mslearn-tailspin-spacegame-web.
En la lista desplegable, seleccione la rama
feature/home-page-text
.Para iniciar la solicitud de incorporación de cambios (“pull request”), seleccione Contribuir y, a continuación, Open pull request (Abrir “pull request”).
Asegúrese de que en la lista desplegable base se especifica su repositorio y no el de Microsoft.
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.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.
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.
Como paso opcional, seleccione el vínculo Detalles o vaya al proyecto de Azure DevOps y observe la ejecución de la canalización.
Cuando la compilación haya finalizado, vuelva a la solicitud de incorporación de cambios en GitHub.
Seleccione Merge pull request (Fusionar solicitud de incorporación de cambios) y, después, Confirm merge (Confirmar fusión).
Seleccione Eliminar rama para eliminar la rama
feature/home-page-text
de GitHub.