Tutorial: Creación de un proyecto con el esquema Aplicación web moderna de tres niveles

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

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

Elija Crear proyecto.

Seleccione Empezar con un esquema.

En la barra de búsqueda, ingrese modern.

Seleccione el esquema Aplicación web moderna de tres niveles y elija Siguiente.

En Asignar nombre al proyecto, introduzca un nombre para el proyecto. Por ejemplo:

MyExampleProject.

En Cuenta, seleccione la Cuenta de AWS que haya añadido durante el registro. El esquema instalará los recursos en esta cuenta.

En Rol de implementación, seleccione el rol que haya añadido durante el registro. En este ejemplo, elija CodeCatalystWorkflowDevelopmentRole-spaceName.

Si no hay ningún rol en la lista, añada uno. Para añadir un rol, elija Agregar rol de IAM y añada el rol a la Cuenta de AWS. Para obtener más información, consulte Permisos de acceso a recursos de AWS con Cuentas de AWS conectadas.

En Plataforma de computación, elija Lambda.

En Opción de alojamiento frontend, elija Amplify Hosting. Para obtener información sobre AWS Amplify, consulte What is AWS Amplify Hosting? en la Guía del usuario de AWS Amplify.

En Región de implementación, introduzca el código de la Región de AWS donde desea que el esquema implemente la aplicación Mysfits y los recursos de soporte. Para obtener una lista de códigos de región, consulte Puntos de conexión regionales en la Referencia general de AWS.

En Nombre de la aplicación, deje el valor predeterminado de mysfitsstring.

(Opcional) En Generar vista previa del proyecto, seleccione Ver código para obtener una vista previa de los archivos del código fuente que el esquema instalará. Seleccione Ver flujo de trabajo para obtener una vista previa de los archivos de definición del flujo de trabajo de CI/CD que el esquema instalará. La vista previa se actualiza de forma dinámica en función de sus selecciones.

Elija Crear proyecto.

Vaya al proyecto al que desee invitar a los usuarios.

En el panel de navegación, seleccione Configuración del proyecto.

En la pestaña Miembros, seleccione Invitar.

Escriba las direcciones de correo electrónico de las personas a las que desea invitar como usuarios del proyecto. Puede escribir varias direcciones de correo electrónico separadas por un espacio o una coma. También puede elegir entre los miembros del espacio que no sean miembros del proyecto.

Elija el rol para el usuario.

Cuando haya terminado de añadir usuarios, seleccione Invitar.

En el panel de navegación, elija Problemas.

Seleccione Crear el problema.

En Título del problema, introduzca un nombre para el problema. También tiene la opción de proporcionar una descripción del problema. En este ejemplo, use make a change in the src/mysfit_data.json file.

Elija la prioridad, la estimación, el estado y las etiquetas. En Cesionario, seleccione +Añadirme para asignarse el problema.

Seleccione Crear el problema. Ahora, el problema se puede ver en el panel. Elija la ficha para mover el problema a la columna En curso.

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.

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.

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

Vaya al proyecto donde desea crear un entorno de desarrollo.

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.

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

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

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.

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

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.

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.

Vaya al entorno de desarrollo de su proyecto. En AWS Cloud9, expanda el menú de navegación lateral para buscar los archivos. Expanda mysfits y src y abra src/mysfit_data.json.

En el archivo, cambie el valor del campo "Age": de 6 a 12. La línea debería tener el siguiente aspecto:

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

Guarde el archivo.

Cambie al repositorio de mysfits con el comando cd /projects/mysfits.

Añada, confirme y envíe los cambios mediante los comandos git add, git commit y git push.

git add .
git commit -m "make an example change"
git push

En la consola de CodeCatalyst, en el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

Aparecerá una lista de flujos de trabajo. Estos son los flujos de trabajo que el esquema de CodeCatalyst generó e inició al crear el proyecto.

Observe la lista de flujos de trabajo; debería ver cuatro:

Seleccione el flujo de trabajo ApplicationDeploymentPipeline asociado a la ramificación main, en la parte inferior. Este flujo de trabajo se ejecutó con el código fuente de la ramificación main.

Aparecerá un diagrama de flujo de trabajo. El diagrama muestra varios bloques, y cada uno de ellos representa una tarea o una acción. La mayoría de las acciones se organizan verticalmente; es decir, las acciones de la parte superior se ejecutan antes que las de la parte inferior. Las acciones mostradas una al lado de la otra se ejecutan en paralelo. Todas las acciones agrupadas deben ejecutarse correctamente antes de que pueda iniciarse la acción que se encuentra debajo de ellas.

A continuación, puede ver una descripción de los bloques principales.

Seleccione la pestaña Definición (cerca de la parte superior). El archivo de definición del flujo de trabajo aparece a la derecha. El archivo tiene las siguientes secciones importantes:

Seleccione la pestaña Último estado (cerca de la parte superior) y elija cualquier acción en el diagrama del flujo de trabajo.

A la derecha, seleccione la pestaña Configuración para ver los ajustes de configuración utilizados por la acción durante la última ejecución. Cada parámetro de configuración tiene una propiedad coincidente en el archivo de definición del flujo de trabajo.

Deje la consola abierta y pase al siguiente procedimiento.

Seleccione la pestaña Último estado.

En el diagrama del flujo de trabajo, seleccione la acción DeployFrontend.

Espere a que finalice la acción. Observe el icono “en curso” ( ) y espere a que cambie al icono de “éxito” ( ).

Seleccione la acción build_backend.

Seleccione la pestaña Registros y expanda un par de secciones para ver los mensajes de registro en estos pasos. Puede ver los mensajes relacionados con la configuración del backend.

Seleccione la pestaña Informes y elija el informe backend-coverage.xml. CodeCatalyst mostrará el informe asociado. El informe muestra las pruebas de cobertura de código que se realizaron e indica la proporción de líneas de código que se validaron correctamente mediante las pruebas (por ejemplo, el 80 %).

Para obtener más información sobre los informes de pruebas, consulte Pruebas con flujos de trabajo.

Deje la consola de CodeCatalyst abierta y pase al siguiente procedimiento.

Vuelva al flujo de trabajo ApplicationDeploymentPipeline y elija el enlace Ejecutar-string de la última ejecución.

En el diagrama del flujo de trabajo, busque la acción DeployFrontend y seleccione el enlace Ver aplicación. Aparecerá el sitio web de Mysfit.

Busque el pegaso de Mysfit, llamado Twilight Glitter. Como puede ver, la edad tiene el valor 6. Va a hacer un cambio en el código para actualizar la edad.

Vaya a su proyecto.

Realice una de las siguientes acciones siguientes:

• 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.

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.

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

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

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é.

(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.

(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.

(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.

(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.

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.

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

Vaya al proyecto de aplicación moderna.

En la página del proyecto, en Solicitudes de extracción abiertas, elija la solicitud de extracción que quiera combinar. Si no ve la solicitud de extracción, seleccione Ver todas y selecciónela de la lista. Elija Merge (Combinar).

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.

En el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

En Flujos de trabajo, en ApplicationDeploymentPipeline, expanda Ejecuciones recientes. Puede ver la ejecución del flujo de trabajo iniciada por la confirmación de la combinación. Si lo desea, selecciónela para ver el progreso de la ejecución.

Cuando se complete la ejecución, cargue de nuevo la URL que visitó anteriormente. Compruebe que la edad del pegaso haya cambiado.

Vaya a su proyecto.

En el panel de navegación, elija Problemas.

Arrastre y suelte el problema en la columna Listo.

Acceda al proyecto y elija Configuración del proyecto.

Elija la pestaña General.

En el nombre del proyecto, seleccione Eliminar proyecto.

Inicie sesión en la AWS Management Console con la misma cuenta que añadió al espacio de CodeCatalyst.

Vaya al servicio de AWS CloudFormation.

Elimine la pila mysfitsstring.

Elimine la pila development-mysfitsstring.

Elija (pero no elimine) la pila CDKToolkit. Elija la pestaña Recursos. Elija el enlace StagingBucket y elimine el bucket y su contenido en Amazon S3.

(Opcional) Elimine la pila de CDKToolkit.