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

Siga los pasos descritos en 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. Al crear un proyecto con una plantilla, los recursos se crean automáticamente, incluido un repositorio de código fuente que incluya código de muestra. Puede usar este repositorio y este código de ejemplo para aprender a:

• ver los repositorios de código fuente de un proyecto y explorar su contenido;

• crear un entorno de desarrollo con una nueva ramificación en la que se pueda trabajar con el código;

• cambiar un archivo y confirmar e insertar los cambios;

• crear una solicitud de extracción y revisar los cambios de código con otros miembros del proyecto;

• observar el flujo de trabajo del proyecto para crear y probar automáticamente los cambios en la ramificación de origen de la solicitud de extracción;

• combinar los cambios de la ramificación de origen con la de destino y cerrar la solicitud de extracción;

• observar cómo se compilan e implementan automáticamente los cambios combinados.

Para aprovechar al máximo este tutorial, puede invitar a otras personas a su proyecto para que puedan colaborar en una solicitud de extracción. También puede explorar otras características de CodeCatalyst, como crear problemas y asociarlos a una solicitud de extracción, o configurar notificaciones y recibir alertas cuando se ejecute el flujo de trabajo asociado. Para ver una exploración completa de CodeCatalyst, consulte Tutoriales de introducción.

Creación de un proyecto con un esquema

Crear un proyecto es el primer paso para la colaboración. Puede usar un esquema para crear su proyecto, lo que también creará un repositorio de código fuente con código de muestra y un flujo de trabajo que compilará e implementará automáticamente el código cuando lo cambie. En este tutorial, le mostraremos un proyecto creado con el esquema de Aplicación de una sola página, pero puede seguir los procedimientos de cualquier proyecto con un repositorio de código fuente. Asegúrese de elegir un rol de IAM o de añadir un rol de IAM si no lo tiene como parte de la creación del proyecto. Le recomendamos que utilice el rol de servicio CodeCatalystWorkflowDevelopmentRole-spaceName para este proyecto.

Si ya tiene un proyecto, puede avanzar hasta el paso Visualización de los repositorios de un proyecto.

nota

Solo los usuarios con el rol de administrador del espacio o usuario avanzado pueden crear proyectos en CodeCatalyst. Si no tiene este rol y necesita trabajar en un proyecto para este tutorial, pídale a alguien que tenga uno de estos roles que cree un proyecto por usted y lo añada al proyecto creado. Para obtener más información, consulte Concesión de acceso en los roles de usuario.

Creación de un proyecto con un esquema

1. En la consola de CodeCatalyst, vaya al espacio donde desee crear un proyecto.

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

3. Seleccione Empezar con un esquema.

   sugerencia

   Puede elegir añadir un esquema proporcionando a Amazon Q los requisitos de su proyecto para que Amazon Q le sugiera un esquema. Para obtener más información, consulte Uso de Amazon Q para elegir un esquema al crear un proyecto o al añadir funciones y Prácticas recomendadas al utilizar Amazon Q para crear proyectos o añadir funciones con esquemas. Esta característica solo está disponible en la región Oeste de EE. UU. (Oregón).

   Esta funcionalidad requiere que las características de IA generativa estén habilitadas en el espacio. Para obtener más información, consulte Managing generative AI features.

4. En la pestaña Esquemas de CodeCatalyst o Esquemas del espacio, seleccione un esquema y luego elija Siguiente.

5. En Asignar nombre al proyecto, introduzca el nombre que desea 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 esquema se almacena en un repositorio de CodeCatalyst. También puede elegir almacenar el código fuente del esquema en un repositorio de terceros. Para obtener más información, consulte Adición de funcionalidad a proyectos mediante extensiones en CodeCatalyst.

   importante

   CodeCatalyst no admite la detección de cambios en la ramificación predeterminada de los repositorios vinculados. Para cambiar la ramificación predeterminada de un repositorio vinculado, primero debe desvincularlo de CodeCatalyst, cambiar la ramificación predeterminada y volver a vincularla. Para obtener más información, consulte Vinculación de repositorios de GitHub, repositorios de Bitbucket, repositorios de proyectos de GitLab y proyectos de Jira en CodeCatalyst.

   Como práctica recomendada, asegúrese 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 de terceros que desee utilizar:

   • Repositorios de GitHub: conéctese a una cuenta de GitHub.

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

     nota

     Si se conecta a una cuenta de GitHub, deberá crear una conexión personal para establecer una asignación de identidades entre la identidad de CodeCatalyst y la de GitHub. Para obtener más información, consulte Conexiones personales y Acceso a los recursos de GitHub con conexiones personales.

   • Repositorios de Bitbucket: conéctese a un espacio de trabajo de Bitbucket.

     Seleccione el menú desplegable Avanzado, elija Bitbucket como proveedor del repositorio y, a continuación, elija el espacio de trabajo de Bitbucket en el que desee almacenar el código fuente creado por el esquema.

   • Repositorios de GitLab: conéctese a un usuario de GitLab.

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

7. En Recursos del proyecto, configure los parámetros del esquema. Según el esquema, es posible que tenga la opción de asignar un nombre al repositorio de código fuente.

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 de proyecto.

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

10. Elija Crear proyecto.

La página de informació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 información general de un proyecto nuevo no contiene incidencias pendientes ni solicitudes de extracción. Opcionalmente, puede elegir crear una incidencia y asignársela. También puede optar por invitar a otra persona al proyecto. Para obtener más información, consulte Creación de incidencias en CodeCatalyst y Invitación a un usuario a un proyecto.

Visualización de los repositorios de un proyecto

Como miembro de un proyecto, puede ver los repositorios de código fuente del proyecto. También puede decidir crear repositorios adicionales. Si alguien que tenga el rol de Administrador de espacio ha instalado y configurado la extensión para repositorios de GitHub, repositorios de Bitbucket o repositorios de GitLab, también puede añadir enlaces a repositorios de terceros en las cuentas de GitHub, los espacios de trabajo de Bitbucket o los usuarios de GitLab configurados para la extensión. Para obtener más información, consulte Creación de un repositorio de código fuente y Inicio rápido: instalación de extensiones, conexión de proveedores y vinculación de 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 código fuente que contiene el código de muestra es spa-app.

Navegación a los repositorios de código fuente de un proyecto

1. Vaya al proyecto y lleve a cabo una de las siguientes acciones:

   • En la página de resumen del 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, elija el nombre del repositorio en la lista. Puede filtrar la lista de repositorios escribiendo una parte del nombre en la barra de filtros.

2. En la página de inicio del repositorio, consulte el contenido del repositorio y la información sobre los recursos asociados, como el número de solicitudes de extracción y los flujos de trabajo. De forma predeterminada, se muestra el contenido de la ramificación predeterminada. Para cambiar la vista, seleccione otra ramificación en 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 ramificaciones de este repositorio y sus archivos. Si acaba de crear el proyecto, los flujos de trabajo iniciales para compilar, 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, manténgase en la página de información general y explore el código en el repositorio. El contenido del archivo README.md se muestra en esta página, debajo de los archivos del repositorio. En Archivos, se muestra el contenido de la ramificación predeterminada. Puede cambiar la vista del archivo para mostrar el contenido de otra ramificación, si tiene una. La carpeta .codecatalyst contiene el código utilizado para otras partes del proyecto, como los archivos YAML del flujo de trabajo.

Para ver el contenido de las carpetas, seleccione la flecha que aparece junto al nombre de la carpeta para expandirla. Por ejemplo, elija la flecha situada junto a .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á Ver archivos y podrá examinar el contenido de varios archivos. También puede editar archivos individuales en la consola, pero para editar varios archivos, deberá crear un entorno de desarrollo.

Creación de un entorno de desarrollo

Puede agregar y cambiar archivos en un repositorio de código fuente de la consola de Amazon CodeCatalyst. Sin embargo, para trabajar de forma eficaz con varios archivos y ramificaciones, le recomendamos utilizar un entorno de desarrollo o clonar el repositorio en su equipo local. En este tutorial, crearemos un entorno de desarrollo de AWS Cloud9 con una ramificación denominada develop. Puede elegir un nombre de ramificación diferente, pero si le pone a la ramificación el nombre develop, se ejecutará automáticamente un flujo de trabajo para compilar y probar el código cuando cree una solicitud de extracción más adelante en este tutorial.

sugerencia

Si decide clonar un repositorio de forma local en lugar de utilizar un entorno de desarrollo o de forma adicional a él, asegúrese de tener Git en su equipo local o de que su IDE incluya Git. Para obtener más información, consulte Configuración para trabajar con repositorios de código fuente.

Creación de un entorno de desarrollo con una nueva ramificación

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

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

3. Seleccione el nombre del repositorio de la lista de repositorios de código fuente para el proyecto. Si lo prefiere, en el panel de navegación, seleccione Código y Repositorios de origen, y elija el repositorio para el que quiera crear un entorno de desarrollo.

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

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

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 su entorno de desarrollo en el IDE que elija. Puede editar el código y confirmar y enviar los cambios.

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

Realización e inserción de un cambio desde un entorno de desarrollo de AWS Cloud9

1. En AWS Cloud9, expanda el menú de navegación lateral para buscar los archivos. Expanda src y abra App.tsx.

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

3. Guarde el archivo y después confirme e inserte los cambios mediante el menú de Git. Como alternativa, en la ventana del terminal, confirme e inserte los cambios con los comandos git commit y git push.

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

   sugerencia

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

Creación de una solicitud de extracción

Puede utilizar las solicitudes de extracción para revisar de forma colaborativa los cambios en el código relacionados con pequeños cambios o correcciones, incorporación de características importantes o versiones nuevas del software publicado. En este tutorial, creará una solicitud de extracción para revisar los cambios que ha realizado en la ramificación test en comparación con la ramificación main. Al crear una solicitud de extracción en un proyecto creado con una plantilla, también se iniciarán los flujos de trabajo asociados, si los hubiera.

Creación de una solicitud de extracción

1. Vaya a su proyecto.

2. Realice una de las siguientes acciones:

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

   • En la página de inicio del repositorio, seleccione Más y después seleccione Crear solicitud de extracción.

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

3. En Repositorio de origen, asegúrese de que el repositorio de código fuente especificado sea el que contenga el código confirmado. Esta opción solo aparece si no ha creado la solicitud de extracción desde la página principal del repositorio.

4. En Ramificación de destino, elija la ramificación en la que quiera combinar el código después de revisarlo.

5. En Ramificación de origen, elija la ramificación que contenga el código confirmado.

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

7. (Opcional) En Descripción de la solicitud de extracción, proporcione información, como un enlace a las incidencias o una descripción de los cambios.

   sugerencia

   Puede elegir Escribir descripción automáticamente para que CodeCatalyst genere automáticamente una descripción de los cambios incluidos en la solicitud de extracción. Puede 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 características de IA generativa estén habilitadas en el espacio y no estén disponibles para las solicitudes de extracción en los repositorios vinculados. Para obtener más información, consulte Managing generative AI features.

8. (Opcional) En Problemas, seleccione Vincular problemas y, a continuación, elija un problema de la lista o introduzca su ID. Para desvincular un problema, seleccione el icono de desvinculación.

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

   nota

   No es posible agregar un revisor como revisor obligatorio y como revisor opcional. No es posible añadirse a uno mismo como revisor.

10. (Opcional) En Revisores opcionales, seleccione Agregar revisores opcionales. Elija en la lista miembros del proyecto para añadirlos. No es obligatorio que los revisores opcionales aprueben los cambios para poder combinar la solicitud de extracción en la ramificación de destino.

11. Revise las diferencias entre las ramificaciones. La diferencia que se muestra en una solicitud de extracción consiste en los cambios entre la revisión en la ramificación de origen y la base de combinación, que es la confirmación del encabezado en la ramificación 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 ramificaciones sean idénticas o que haya elegido la misma ramificación tanto para el origen como para el destino.

12. Cuando tenga claro que la solicitud de extracción contiene el código y los cambios que desea revisar, elija Crear.

    nota

    Una vez creada la solicitud de extracción, podrá 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. Puede 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, seleccione Información general y después revise la información en el área de Detalles de la solicitud de extracción, bajo Ejecuciones del flujo de trabajo. Para ver la ejecución del flujo de trabajo, selecciónela.

sugerencia

Si ha asignado a la ramificación un nombre diferente a develop, no se ejecutará automáticamente un flujo de trabajo para compilar y probar los cambios. Si quiere configurar eso, edite el archivo YAML para el flujo de trabajo onPullRequestBuildAndTest. Para obtener más información, consulte Creación de un flujo de trabajo.

Puede comentar esta solicitud de extracción y pedir a otros miembros del proyecto que la comenten. También puede elegir agregar o cambiar los revisores opcionales u obligatorios. Puede optar por realizar más cambios en la ramificación de origen del repositorio y ver cómo esos cambios confirmados crean revisiones para la solicitud de extracción. Para obtener más información, consulte Revisión de una solicitud de extracción, Actualización de una solicitud de extracción, Revisión del código con solicitudes de extracción en Amazon CodeCatalyst y Visualización del estado y los detalles de la ejecución de un flujo de trabajo.

Combinación de una solicitud de extracción

Una vez que se haya revisado una solicitud de extracción y haya recibido la aprobación de los revisores necesarios, puede combinar su ramificación de origen con la de destino en la consola de CodeCatalyst. Al combinar una solicitud de extracción, también se iniciarán los cambios en todos los flujos de trabajo asociados en la ramificación de destino. En este tutorial, combinará la ramificación de prueba con la principal, lo que iniciará una ejecución del flujo de trabajo onPushToMainDeployPipeline.

Combinación de una solicitud de extracción (consola)

1. En Solicitudes de extracción, seleccione la solicitud de extracción que creó en el paso anterior. En la solicitud de extracción, elija Combinar.

2. Elija entre las estrategias de combinación disponibles para la solicitud de extracción. Puede seleccionar o deseleccionar la opción para eliminar la ramificación de origen después de combinar la solicitud de extracción; después, seleccione Combinar. Una vez completada la combinación, el estado de la solicitud de extracción cambia a Combinado y deja de aparecer en la vista predeterminada de solicitudes de extracción. La vista predeterminada muestra las solicitudes de extracción con el estado Abierto. Las solicitudes de extracción combinadas se siguen pudiendo ver, pero no se pueden aprobar ni cambiar de estado.

   nota

   Si el botón Combinar está inactivo o ve la etiqueta No se puede combinar, esto significa que algún revisor obligatorio aún no ha aprobado la solicitud de extracción o que dicha solicitud no se puede combinar en la consola de CodeCatalyst. Si hay algún revisor que no ha aprobado la solicitud de extracción, aparecerá el icono de reloj en Información general, en el área Detalles de la solicitud de extracción. Si todos los revisores obligatorios han aprobado la solicitud de extracción, pero el botón Combinar sigue inactivo, es posible que haya un conflicto de combinación o que haya superado la cuota de almacenamiento para el espacio. Puede resolver los conflictos de combinación de la ramificación de destino en un entorno de desarrollo, insertar los cambios y combinar la solicitud de extracción, o puede resolver los conflictos y realizar la combinación localmente para después enviar la confirmación que contiene la combinación a CodeCatalyst. Para obtener más información, consulte Combinación de una solicitud de extracción (Git) y la documentación de Git.

Visualización del código implementado

Ahora es el momento de ver el código implementado originalmente que estaba en la ramificación predeterminada y los cambios combinados una vez que se hayan creado, probado e implementado automáticamente. Para ello, puede 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, seleccionar CI/CD y, a continuación, Flujos de trabajo.

Visualización del código implementado

1. En Flujos de trabajo, en onPushToMainDeployPipeline, expanda Ejecuciones recientes.

   nota

   Este es el nombre predeterminado del flujo de trabajo para los proyectos creados con el esquema de 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 extracción combinada con la ramificación main y es probable que muestre el estado En curso. Seleccione una ejecución completada correctamente de la lista para abrir los detalles de esa ejecución.

3. Seleccione Variables. Copie el valor de AppURL. Esta es la URL de 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 compilado 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ía ver los cambios que haya realizado en la solicitud de extracción combinada.

Limpieza de recursos

Una vez que haya explorado cómo trabajar con un repositorio de código fuente y una solicitud de extracción, es posible que quiera eliminar los recursos que no necesite. No puede eliminar las solicitudes de extracción, pero puede cerrarlas. Puede eliminar cualquier ramificación que haya creado.

Si ya no necesita el repositorio de código fuente o el proyecto, también puede eliminar esos recursos. Para obtener más información, consulte Eliminación de un repositorio de código fuente y Eliminación de un proyecto.