Introducción a los repositorios de CodeCatalyst código fuente y al modelo de aplicación de una sola página

Sigue los pasos de este tutorial para aprender a trabajar con los repositorios de código fuente en Amazon CodeCatalyst.

La forma más rápida de empezar a trabajar con los repositorios de código fuente en Amazon CodeCatalyst es crear un proyecto con una plantilla. Cuando creas un proyecto con una plantilla, los recursos se crean automáticamente, incluido un repositorio de código fuente que incluye código de muestra. Puedes usar este repositorio y este ejemplo de código para aprender a:

• Ver los repositorios de fuentes de un proyecto y explorar su contenido

• Crea un entorno de desarrollo con una nueva rama en la que puedas trabajar con el código

• Cambia un archivo y confirma y envía tus cambios

• Crea una solicitud de cambios y revisa los cambios de código con otros miembros del proyecto

• Observa el flujo de trabajo de tu proyecto, crea y prueba automáticamente los cambios en la rama fuente de la solicitud de extracción

• Combina los cambios de tu rama de origen con la rama de destino y cierra la solicitud de extracción

• Observa cómo se crean e implementan automáticamente los cambios combinados

Para aprovechar al máximo este tutorial, invita a otras personas a tu proyecto para que puedan trabajar juntos en una solicitud de incorporación de cambios. También puedes explorar otras funciones CodeCatalyst, como crear incidencias y asociarlas a una solicitud de extracción, o configurar las notificaciones y recibir alertas cuando se ejecute el flujo de trabajo asociado. Para una exploración completa de CodeCatalyst, consulteTutoriales de introducción.

Crear un proyecto con un plano

Crear un proyecto es el primer paso para poder trabajar juntos. Puedes usar un plano para crear tu proyecto, que también creará un repositorio fuente con código de muestra y un flujo de trabajo que compilará e implementará automáticamente tu código cuando lo cambies. En este tutorial, te mostraremos un proyecto creado con el esquema de aplicación de una sola página, pero puedes seguir los procedimientos de cualquier proyecto con un repositorio de código fuente. Asegúrese de elegir un IAM rol o agregar uno si no tiene uno como parte de la creación del proyecto. IAM Te recomendamos que utilices el CodeCatalystWorkflowDevelopmentRole-spaceNamerol de servicio para este proyecto.

Si ya tiene un proyecto, puede pasar aVer los repositorios de un proyecto.

nota

Solo los usuarios con el rol de administrador de Space o de usuario avanzado pueden crear proyectos en él CodeCatalyst. Si no tienes este rol y necesitas un proyecto en el que trabajar para este tutorial, pídele a alguien con uno de estos roles que cree un proyecto para ti y te añada al proyecto creado. Para obtener más información, consulte Concesión de acceso con roles de usuario.

Para crear un proyecto con un plano

1. En la CodeCatalyst consola, navegue hasta el espacio en el que desee crear un proyecto.

2. En el panel de control del espacio, seleccione Crear proyecto.

3. Selecciona Empezar con un plano.

   sugerencia

   Puedes optar por añadir un plan proporcionando a Amazon Q los requisitos de tu proyecto para que Amazon Q te sugiera un plan. Para obtener más información, consulte Uso de Amazon Q para elegir un plano al crear un proyecto o añadir funciones y Prácticas recomendadas a la hora de utilizar Amazon Q para crear proyectos o añadir funciones con planos. Esta función solo está disponible en la región EE.UU. Oeste (Oregón).

   Esta funcionalidad requiere que las funciones de IA generativa estén habilitadas en el espacio. Para obtener más información, consulte Administrar las funciones de IA generativa.

4. En la pestaña de CodeCatalyst planos o planos de espacio, elige un plano y, a continuación, selecciona Siguiente.

5. En Asigne un nombre a su proyecto, introduzca el nombre que desee asignar al proyecto y los nombres de los recursos asociados. El nombre debe ser único dentro de su espacio.

6. (Opcional) De forma predeterminada, el código fuente creado por el blueprint se almacena en un CodeCatalyst repositorio. Como alternativa, puede optar por almacenar el código fuente del blueprint en un repositorio de terceros. Para obtener más información, consulte Añada funcionalidad a los proyectos con extensiones en CodeCatalyst.

   importante

   CodeCatalyst no admite la detección de cambios en la rama predeterminada de los repositorios enlazados. Para cambiar la rama predeterminada de un repositorio vinculado, primero debes desvincularlo CodeCatalyst, cambiar la rama predeterminada y, a continuación, volver a vincularlo. Para obtener más información, consulte Vincular GitHub repositorios, repositorios de Bitbucket, repositorios de GitLab proyectos y proyectos de Jira en CodeCatalyst.

   Como práctica recomendada, asegúrate siempre de tener la última versión de la extensión antes de vincular un repositorio.

   Realice una de las siguientes acciones en función del proveedor de repositorios externo que desee utilizar:

   • GitHub repositorios: Conecta una GitHub cuenta.

     Seleccione el menú desplegable Avanzado, elija GitHub el proveedor del repositorio y, a continuación, elija la GitHub cuenta en la que desee almacenar el código fuente creado por el blueprint.

     nota

     Si vas a conectar una GitHub cuenta, debes crear una conexión personal para establecer un mapeo de identidad entre tu CodeCatalyst identidad y tu GitHub identidad. Para obtener más información, consulte Conexiones personales y Acceder a GitHub los recursos con conexiones personales.

   • Repositorios de Bitbucket: Conecta un espacio de trabajo de Bitbucket.

     Selecciona el menú desplegable Avanzado, elige Bitbucket como proveedor del repositorio y, a continuación, elige el espacio de trabajo de Bitbucket en el que quieres almacenar el código fuente creado por el blueprint.

   • GitLab repositorios: Conecta a un GitLab usuario.

     Seleccione el menú desplegable Avanzado, elija GitLab el proveedor del repositorio y, a continuación, elija el GitLab usuario en el que desee almacenar el código fuente creado por el blueprint.

7. En Recursos del proyecto, configure los parámetros del blueprint. Según el esquema, puede que tenga la opción de asignar un nombre al repositorio de origen.

8. (Opcional) Para ver los archivos de definición con actualizaciones basadas en las selecciones de parámetros del proyecto que haya realizado, seleccione Ver código o Ver flujo de trabajo en Generar vista previa del proyecto.

9. (Opcional) Seleccione Ver detalles en la tarjeta del blueprint para ver detalles específicos del blueprint, como una descripción general de la arquitectura del blueprint, las conexiones y los permisos necesarios y el tipo de recursos que crea el blueprint.

10. Elija Crear proyecto.

La página de descripción general del proyecto se abre en cuanto se crea un proyecto o se acepta una invitación para participar en él y se completa el proceso de inicio de sesión. La página de resumen de un proyecto nuevo no contiene temas pendientes ni solicitudes de selección. Si lo desea, puede optar por crear una edición y asignársela a usted mismo. También puedes optar por invitar a otra persona a tu proyecto. Para obtener más información, consulte Crear un problema en CodeCatalyst y Invitar a un usuario a un proyecto.

Ver los repositorios de un proyecto

Como miembro de un proyecto, puedes ver los repositorios de código fuente del proyecto. También puedes optar por crear repositorios adicionales. Si alguien con el rol de administrador de Space ha instalado y configurado GitHub los repositorios, los repositorios de Bitbucket o la extensión de repositorios, también puedes añadir enlaces a GitLab repositorios de terceros en las GitHub cuentas, los espacios de trabajo de Bitbucket o los usuarios configurados para la extensión. GitLab Para obtener más información, consulte Crear un repositorio de código fuente y Inicio rápido: instalar extensiones, conectar proveedores y vincular recursos en CodeCatalyst.

nota

En el caso de los proyectos creados con el esquema de aplicación de una sola página, el nombre predeterminado del repositorio de origen que contiene el código de muestra es spa-app.

Para navegar a los repositorios de origen de un proyecto

1. Navegue hasta su proyecto y realice una de las siguientes acciones:

   • En la página de resumen de su proyecto, elija el repositorio que desee de la lista y, a continuación, elija Ver repositorio.

   • En el panel de navegación, elija Código y, a continuación, elija Repositorios de origen. En Repositorios de origen, elige el nombre del repositorio de la lista. Puede filtrar la lista de repositorios escribiendo parte del nombre del repositorio en la barra de filtros.

2. En la página de inicio del repositorio, consulta el contenido del repositorio y la información sobre los recursos asociados, como el número de solicitudes de incorporación de datos y los flujos de trabajo. De forma predeterminada, se muestra el contenido de la rama predeterminada. Puede cambiar la vista seleccionando una rama diferente de la lista desplegable.

La página de información general del repositorio incluye información sobre los flujos de trabajo y las solicitudes de extracción configurados para las ramas de este repositorio y sus archivos. Si acabas de crear el proyecto, los flujos de trabajo iniciales para crear, probar e implementar el código seguirán ejecutándose, ya que tardan unos minutos en completarse. Puede ver los flujos de trabajo relacionados y su estado seleccionando el número que aparece debajo de Flujos de trabajo relacionados, pero esto abrirá la página Flujos de trabajo en CI/CD. Para ver este tutorial, visita la página de información general y explora el código del repositorio. El contenido del README.md archivo se muestra en esta página, debajo de los archivos del repositorio. En Archivos, se muestra el contenido de la rama predeterminada. Puede cambiar la vista del archivo para mostrar el contenido de otra rama, si tiene una. La .codecatalyst carpeta contiene el código utilizado para otras partes del proyecto, como los YAML archivos de flujo de trabajo.

Para ver el contenido de las carpetas, elija la flecha situada junto al nombre de la carpeta para ampliarla. Por ejemplo, elija la flecha situada junto a esta src para ver los archivos de la aplicación web de una sola página contenida en esa carpeta. Para ver el contenido de un archivo, elíjalo en la lista. Se abrirá la opción Ver archivos, donde podrá examinar el contenido de varios archivos. También puedes editar archivos individuales en la consola, pero para editar varios archivos, querrás crear un entorno de desarrollo.

Creación de un entorno de desarrollo

Puedes añadir y cambiar archivos en un repositorio de origen de la CodeCatalyst consola de Amazon. Sin embargo, para trabajar eficazmente con varios archivos y ramas, te recomendamos utilizar un entorno de desarrollo o clonar el repositorio en tu ordenador local. En este tutorial, crearemos un entorno de AWS Cloud9 desarrollo con una rama denominadadevelop. Puedes elegir un nombre de rama diferente, pero si le pones un nombre a la ramadevelop, se ejecutará automáticamente un flujo de trabajo para compilar y probar tu código cuando crees una solicitud de extracción más adelante en este tutorial.

sugerencia

Si decides clonar un repositorio localmente en lugar de utilizar un entorno de desarrollo o además de él, asegúrate de tener Git en tu ordenador local o de IDE incluir Git. Para obtener más información, consulte Configuración para trabajar con repositorios de código fuente.

Para crear un entorno de desarrollo con una nueva rama

1. Abra la CodeCatalyst consola en https://codecatalyst.aws/.

2. Vaya al proyecto donde desea crear un entorno de desarrollo.

3. Elija el nombre del repositorio de la lista de repositorios de origen del proyecto. Como alternativa, en el panel de navegación, selecciona Código, elige Repositorios de código fuente y elige el repositorio para el que quieres crear un entorno de desarrollo.

4. En la página de inicio del repositorio, selecciona Crear entorno de desarrollo.

5. Elige uno compatible en el IDE menú desplegable. Para obtener más información, consulte Entornos de desarrollo integrados compatibles para entornos de desarrollo.

6. Elija el repositorio que desea clonar, elija Trabajar en una nueva ramificación, introduzca el nombre de la ramificación en el campo Nombre de ramificación, y elija una ramificación a partir de la cual crear la ramificación nueva en el menú desplegable Crear ramificación desde.

7. Si lo desea, añada un alias para el entorno de desarrollo.

8. Si lo desea, elija el botón de editar Configuración del entorno de desarrollo para editar la configuración informática, de almacenamiento o el tiempo de espera del entorno de desarrollo.

9. Seleccione Crear. Mientras se crea el entorno de desarrollo, la columna de estado del entorno de desarrollo mostrará Iniciando y la columna de estado mostrará Ejecutando una vez se haya creado el entorno de desarrollo. Se abrirá una nueva pestaña con el entorno IDE de desarrollo que elijas. Puedes editar el código y confirmar y enviar los cambios.

Una vez que hayas creado el entorno de desarrollo, puedes editar los archivos, confirmar los cambios y enviarlos a la test rama. En este tutorial, edita el contenido entre las <p> etiquetas del App.tsx archivo de la src carpeta para cambiar el texto que se muestra en la página web. Confirme y presione el cambio y, a continuación, regrese a la CodeCatalyst pestaña.

Para realizar e impulsar un cambio desde un entorno AWS Cloud9 de desarrollo

1. En AWS Cloud9, expande el menú de navegación lateral para buscar los archivos. srcExpande y abreApp.tsx.

2. Realice un cambio en el texto dentro de las <p> etiquetas.

3. Guarde el archivo y, a continuación, confirme e inserte los cambios mediante el menú Git. Como alternativa, en la ventana del terminal, confirma y envía los cambios con los git push comandos git commit y.

   git commit -am "Making an example change"
   git push

   sugerencia

   Es posible que tengas que cambiar los directorios de la terminal al directorio del repositorio de Git para poder ejecutar correctamente los comandos de Git.

Creación de una solicitud de extracción

Puedes utilizar las solicitudes de extracción para revisar los cambios en el código de forma colaborativa para comprobar si se han realizado cambios o correcciones menores, si se han incorporado funciones importantes o si se han introducido nuevas versiones del software que hayas publicado. En este tutorial, crearás una solicitud de extracción para revisar los cambios que has realizado en el test rama en comparación con la rama principal. Al crear una solicitud de incorporación de cambios en un proyecto creado con una plantilla, también se iniciarán los flujos de trabajo asociados, si los hubiera.

Para crear una solicitud de extracción

1. Vaya a su proyecto.

2. Realice una de las siguientes acciones siguientes:

   • En el panel de navegación, selecciona Código, selecciona Solicitudes de extracción y, a continuación, selecciona Crear solicitud de extracción.

   • En la página de inicio del repositorio, selecciona Más y, a continuación, selecciona Crear solicitud de extracción.

   • En la página del proyecto, selecciona Crear solicitud de extracción.

3. En el repositorio de fuentes, asegúrate de que el repositorio de fuentes especificado es el que contiene el código confirmado. Esta opción solo aparece si no creaste la solicitud de extracción desde la página principal del repositorio.

4. En la rama de destino, elige la rama en la que deseas combinar el código después de revisarlo.

5. En la rama Fuente, elige la rama que contiene el código confirmado.

6. En el título de la solicitud de extracción, introduce un título que ayude a otros usuarios a entender qué es lo que hay que revisar y por qué.

7. (Opcional) En la descripción de la solicitud de retirada, proporciona información como un enlace a los problemas o una descripción de tus cambios.

   sugerencia

   Puedes elegir Escribir una descripción para que yo genere CodeCatalyst automáticamente una descripción de los cambios incluidos en la solicitud de cambios. Puedes realizar cambios en la descripción generada automáticamente después de añadirla a la solicitud de extracción.

   Esta funcionalidad requiere que las funciones de IA generativa estén habilitadas en el espacio y no estén disponibles para las solicitudes de extracción en los repositorios enlazados. Para obtener más información, consulta Administrar las funciones de IA generativa.

8. (Opcional) En Problemas, selecciona Vincular problemas y, a continuación, elige un problema de la lista o introduce su ID. Para desvincular una incidencia, selecciona el icono de desvinculación.

9. (Opcional) En Revisores obligatorios, selecciona Agregar revisores obligatorios. Elija de la lista de miembros del proyecto para añadirlos. Los revisores necesarios deben aprobar los cambios antes de poder fusionar la solicitud de extracción en la sucursal de destino.

   nota

   No puedes añadir un revisor como revisor obligatorio y como revisor opcional. No puedes añadirte a ti mismo como revisor.

10. (Opcional) En Revisores opcionales, selecciona Añadir revisores opcionales. Elija de la lista de miembros del proyecto para añadirlos. Los revisores opcionales no tienen que aprobar los cambios como requisito para poder fusionar la solicitud de extracción en la sucursal de destino.

11. Revisa las diferencias entre las sucursales. La diferencia que se muestra en una solicitud de extracción son los cambios entre la revisión en la rama de origen y la base de fusión, que es la confirmación principal de la rama de destino en el momento en que se creó la solicitud de extracción. Si no se muestra ningún cambio, es posible que las ramas sean idénticas o que hayas elegido la misma rama tanto para el origen como para el destino.

12. Cuando estés seguro de que la solicitud de extracción contiene el código y los cambios que deseas revisar, selecciona Crear.

    nota

    Después de crear la solicitud de extracción, puedes añadir comentarios. Los comentarios se pueden añadir a la solicitud de extracción o a líneas individuales de los archivos, así como a la solicitud de extracción en general. Puedes añadir enlaces a recursos, como archivos, utilizando el signo @ seguido del nombre del archivo.

Para ver la información sobre los flujos de trabajo asociados iniciados con la creación de esta solicitud de extracción, selecciona Descripción general y, a continuación, revisa la información en el área de detalles de la solicitud de extracción, en Ejecuciones del flujo de trabajo. Para ver la ejecución del flujo de trabajo, selecciónela.

sugerencia

Si has asignado a la rama un nombre diferente al de «develop, no se ejecutará automáticamente un flujo de trabajo para crear y probar los cambios». Si quieres configurarlo, edita el YAML archivo del onPullRequestBuildAndTestflujo de trabajo. Para obtener más información, consulte Creación de un flujo de trabajo.

Puedes comentar esta solicitud de cambios y pedir a otros miembros del proyecto que la comenten. También puedes optar por añadir o cambiar revisores opcionales u obligatorios. Puedes optar por realizar más cambios en la rama de origen del repositorio y ver cómo esos cambios confirmados crean revisiones para la solicitud de extracción de información. Para obtener más informaciónRevisión de una solicitud de extracción, consulteActualización de una solicitud de extracción,Revisar el código con solicitudes de cambios en Amazon CodeCatalyst, yVer el estado y los detalles de la ejecución del flujo de trabajo.

Fusionar una solicitud de extracción

Una vez que una solicitud de extracción se haya revisado y haya recibido la aprobación de los revisores necesarios, puedes fusionar su rama de origen con la de destino en la CodeCatalyst consola. Al fusionar una solicitud de extracción, también se iniciarán los cambios en todos los flujos de trabajo asociados a la sucursal de destino. En este tutorial, fusionarás la rama de prueba con la principal, lo que iniciará una ejecución del onPushToMainDeployPipelineflujo de trabajo.

Para fusionar una solicitud de extracción (consola)

1. En las solicitudes de extracción, elige la solicitud de extracción que creaste en el paso anterior. En la solicitud de extracción, selecciona Fusionar.

2. Elige entre las estrategias de fusión disponibles para la solicitud de extracción. Si lo deseas, selecciona o deselecciona la opción para eliminar la rama de origen después de fusionar la solicitud de extracción y, a continuación, selecciona Fusionar. Una vez completada la fusión, el estado de la solicitud de extracción cambia a Combinada y deja de aparecer en la vista predeterminada de las solicitudes de extracción. La vista predeterminada muestra las solicitudes de extracción con el estado Abierto. Aún puedes ver una solicitud de extracción combinada, pero no puedes aprobarla ni cambiar su estado.

   nota

   Si el botón Combinar no está activo o ves la etiqueta No se puede combinar, significa que un revisor obligatorio aún no ha aprobado la solicitud de extracción o la solicitud de extracción no se puede fusionar en la CodeCatalyst consola. Un revisor que no ha aprobado una solicitud de extracción se indica con un icono de reloj en la sección Descripción general, en el área de detalles de la solicitud de extracción. Si todos los revisores necesarios han aprobado la solicitud de extracción, pero el botón Combinar sigue sin estar activo, es posible que tengas un conflicto de fusión o que hayas superado la cuota de almacenamiento del espacio. Puedes resolver los conflictos de fusión para la rama de destino en un entorno de desarrollo, insertar los cambios y, a continuación, fusionar la solicitud de extracción, o puedes resolver los conflictos y fusionar localmente y, a CodeCatalyst continuación, presionar la confirmación que contiene la fusión. Para obtener más información, consulta Fusión de una solicitud de cambios (Git) la documentación de Git.

Visualización del código desplegado

Ahora es el momento de ver el código implementado originalmente que estaba en la rama predeterminada y los cambios combinados una vez que se hayan creado, probado e implementado automáticamente. Para ello, puedes volver a la página de información general del repositorio y elegir el número situado junto al icono de los flujos de trabajo relacionados o, en el panel de navegación, elegir CI/CD y, a continuación, elegir Flujos de trabajo.

Para ver el código desplegado

1. En Flujos de trabajo, enonPushToMainDeployPipeline, expanda Ejecuciones recientes.

   nota

   Este es el nombre predeterminado del flujo de trabajo para los proyectos creados con el blueprint de la aplicación de una sola página.

2. La ejecución más reciente es la que se inició con la confirmación de la solicitud de cambios fusionada con la main rama y es probable que muestre el estado En curso. Selecciona una ejecución completada correctamente de la lista para abrir los detalles de esa ejecución.

3. Elija Variables. Copie el valor de la aplicación URL. Este es el de URL la aplicación web de una sola página implementada. Abra una nueva pestaña del navegador y pegue el valor para ver el código creado e implementado. Deje la pestaña abierta.

4. Vuelva a la lista de ejecuciones del flujo de trabajo y espere a que se complete la ejecución más reciente. Cuando lo haga, regrese a la pestaña que abrió para ver la aplicación web y actualizar el navegador. Deberás ver los cambios que has realizado en tu solicitud de extracción combinada.

Limpieza de recursos

Una vez que hayas pensado en trabajar con un repositorio de código fuente y una solicitud de extracción, es posible que desees eliminar los recursos que no necesites. No puedes eliminar las solicitudes de extracción, pero puedes cerrarlas. Puedes eliminar cualquier rama que hayas creado.

Si ya no necesitas el repositorio de origen o el proyecto, también puedes eliminar esos recursos. Para obtener más información, consulte Eliminar un repositorio de fuentes y Eliminación de un proyecto.