Amazon ya no CodeCatalyst está abierto a nuevos clientes. Los clientes existentes pueden seguir utilizando el servicio con normalidad. Para obtener más información, consulte [Cómo migrar desde CodeCatalyst](migration.md).
Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Tutorial: creación y actualización de una aplicación de React
Como autor de esquemas, puede desarrollar y añadir esquemas personalizados al catálogo de esquemas de su espacio. Luego, los miembros del espacio pueden usar estos esquemas para crear nuevos proyectos o añadirlos a proyectos existentes. Puede seguir realizando cambios en sus esquemas, que luego estarán disponibles como actualizaciones mediante solicitudes de extracción.
En este tutorial se ofrece un recorrido desde la perspectiva del autor de un esquema y del usuario del esquema. El tutorial muestra cómo crear un esquema de aplicación web de una sola página para React. A continuación, el esquema se utiliza para crear un nuevo proyecto. Cuando el esquema se actualiza con los cambios, el proyecto creado a partir del esquema incorpora esos cambios mediante una solicitud de extracción.
**Topics**
+ [Requisitos previos](#blueprint-getting-started-prerequisites)
+ [Paso 1: creación de un esquema personalizado](#react-bluprint-tutorial-create-bp)
+ [Paso 2: consulta del flujo de trabajo de publicación](#blueprint-getting-started-view-workflow)
+ [Paso 3: incorporación de esquema al catálogo](#blueprint-getting-started-add-to-catalog)
+ [Paso 4: creación del proyecto con el esquema](#blueprint-getting-started-create-project)
+ [Paso 5: actualización del esquema](#blueprint-getting-started-update-blueprint)
+ [Paso 6: actualización de la versión del catálogo publicada del esquema a la nueva versión](#blueprint-getting-started-update-catalog-version)
+ [Paso 7: actualización del proyecto con una nueva versión del esquema](#blueprint-getting-started-update-project)
+ [Paso 8: consulta de los cambios en el proyecto](#blueprint-getting-started-view-changes)
## Requisitos previos
Para crear y actualizar un esquema personalizado, debe haber completado las siguientes tareas de [Configuración e inicio de sesión en CodeCatalystConfiguración e inicio de sesión en CodeCatalyst](setting-up-topnode.md):
+ Debe tener un ID de creador de AWS para iniciar sesión en CodeCatalyst.
+ Debe pertenecer a un espacio y tener asignado el rol de **administrador del espacio** o **usuario avanzado** en ese espacio. Para obtener más información, consulte [Creación de un espacio](spaces-create.md), [Concesión de permisos de espacio a los usuarios](spaces-members.md) y [Rol de administrador del espacio](ipa-role-types.md#ipa-role-space-admin).
## Paso 1: creación de un esquema personalizado
Al crear un esquema personalizado, se crea un proyecto de CodeCatalyst que contiene el código fuente del esquema y las herramientas y recursos de desarrollo. Su proyecto es el lugar donde desarrollará, probará y publicará el esquema.
1. Abra la consola de CodeCatalyst en [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. En la consola de CodeCatalyst, vaya al espacio donde desee crear un esquema.
1. Elija **Configuración** para ir a la configuración del espacio.
1. En la pestaña **Configuración del espacio**, seleccione **Esquemas** y elija **Crear esquema**.
1. Actualice los campos del asistente de creación de esquemas con los siguientes valores:
+ En **Nombre del esquema**, escriba `react-app-blueprint`.
+ En **Nombre para mostrar del esquema**, escriba `react-app-blueprint`.
1. Si lo desea, seleccione **Ver código** para obtener una vista previa del código fuente del esquema. Del mismo modo, elija **Ver flujo de trabajo** para obtener una vista previa del flujo de trabajo que se creará en el proyecto que compila y publica el esquema.
1. Seleccione **Crear esquema**.
1. Una vez creado el esquema, se le redirigirá al proyecto del esquema. Este proyecto contiene el código fuente del esquema, junto con las herramientas y los recursos que necesita para desarrollar, probar y publicar el esquema. Se generó un flujo de trabajo de publicación que publicó automáticamente su esquema en el espacio.
1. Ahora que el esquema y el proyecto del esquema están creados, el siguiente paso es configurarlos actualizando el código fuente. Puede usar entornos de desarrollo para abrir y editar el repositorio de código fuente directamente en el navegador.
En el panel de navegación, elija **Código** y, a continuación, **Entornos de desarrollo**.
1. Elija **Crear entorno de desarrollo** y, a continuación, elija **AWS Cloud9 (en el navegador)**.
1. Deje el resto de valores predeterminados y elija **Crear**.
1. En el terminal de AWS Cloud9, vaya al directorio del proyecto del esquema y ejecute el siguiente comando.
```
cd react-app-blueprint
```
1. Al crear un esquema, se crea y rellena automáticamente una carpeta `static-assets`. En este tutorial, eliminará la carpeta predeterminada y generará una nueva para el esquema de una aplicación de React.
Elimine la carpeta static-assets ejecutando el siguiente comando:
```
rm -r static-assets
```
AWS Cloud9 se basa en una plataforma de Linux. Si utiliza un sistema operativo Windows, puede usar el siguiente comando en su lugar:
```
rmdir /s /q static-assets
```
1. Ahora que se ha eliminado la carpeta predeterminada, cree una carpeta `static-assets` para un esquema de una aplicación de React ejecutando el siguiente comando:
```
npx create-react-app static-assets
```
Si se le solicita, especifique `y` para continuar.
Se creó una nueva aplicación de React en la carpeta `static-assets` con los paquetes necesarios. Los cambios deben enviarse a su repositorio de código fuente remoto de CodeCatalyst.
1. Asegúrese de tener los cambios más recientes y, a continuación, confirme y envíe los cambios al repositorio de código fuente de CodeCatalyst del esquema ejecutando los siguientes comandos:
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Cuando se envía un cambio al repositorio de código fuente del esquema, el flujo de trabajo de publicación se inicia automáticamente. Este flujo de trabajo incrementa la versión del esquema, crea el esquema y lo publica en su espacio. En el siguiente paso, irá a la ejecución del flujo de trabajo de publicación para ver su rendimiento.
## Paso 2: consulta del flujo de trabajo de publicación
1. En la consola de CodeCatalyst, en el panel de navegación, elija **CI/CD** y, a continuación, elija **Flujos de trabajo**.
1. Elija el flujo de trabajo **blueprint-release**.
1. Puede ver que el flujo de trabajo incluye acciones para compilar y publicar el esquema.
1. En **Última ejecución**, elija el enlace de ejecución del flujo de trabajo para ver la ejecución a partir del cambio de código que realizó.
1. Una vez finalizada la ejecución, se publica la nueva versión del esquema. Las versiones del esquema publicadas se pueden ver en **Configuración** en el espacio, pero no se pueden usar en proyectos hasta que se añadan al catálogo de esquemas del espacio. En el siguiente paso, añadirá el esquema al catálogo.
## Paso 3: incorporación de esquema al catálogo
Al añadir un esquema al catálogo de esquemas del espacio, el esquema estará disponible para su uso en todos los proyectos de un espacio. Luego, los miembros del espacio pueden usar los esquemas para crear nuevos proyectos o añadirlos a proyectos existentes.
1. En la consola de CodeCatalyst, vaya de nuevo al espacio.
1. Elija **Configuración** y, a continuación, **Esquemas**.
1. Elija **react-app-blueprint** y, a continuación, **Agregar al catálogo**.
1. Seleccione **Save**.
## Paso 4: creación del proyecto con el esquema
Ahora que el esquema se ha añadido al catálogo, se puede utilizar en proyectos. En este paso, creará un proyecto con el esquema que acaba de crear. En un paso posterior, actualizará este proyecto actualizando y publicando una nueva versión del esquema.
1. Elija la pestaña **Proyectos** y, a continuación, **Crear proyecto**.
1. Seleccione **Esquemas del espacio** y, a continuación, **react-app-blueprint**.
**nota**
Una vez elegido el esquema, podrá ver el contenido del archivo `README.md` del esquema.
1. Elija **Siguiente**.
1.
**nota**
El contenido de este asistente de creación de proyectos se puede configurar en el esquema.
Introduzca el nombre del proyecto como usuario del esquema. En este tutorial, escriba `react-app-project`. Para obtener más información, consulte [Desarrollo de un esquema personalizado para cumplir los requisitos del proyecto](develop-bp.md).
A continuación, actualizará el esquema y añadirá la nueva versión al catálogo, que utilizará para actualizar este proyecto.
## Paso 5: actualización del esquema
Una vez que se haya utilizado un esquema para crear un proyecto nuevo o aplicarlo a proyectos existentes, podrá seguir realizando actualizaciones como autor del esquema. En este paso, realizará cambios en el esquema y publicará automáticamente una nueva versión en el espacio. A continuación, la nueva versión se puede añadir como la versión del catálogo.
1. Desplácese hasta el proyecto **react-app-blueprint** creado en [Tutorial: creación y actualización de una aplicación de React](#blueprint-getting-started-tutorial).
1. Abra el entorno de desarrollo creado en [Tutorial: creación y actualización de una aplicación de React](#blueprint-getting-started-tutorial).
1. En el panel de navegación, elija **Código** y, a continuación, **Entornos de desarrollo**.
1. En la tabla, busque el entorno de desarrollo y, a continuación, seleccione **Abrir en AWS Cloud9 (en el navegador)**.
1. Cuando se ejecutó el flujo de trabajo de publicación del esquema, se incrementó la versión del esquema actualizando el archivo `package.json`. Introduzca ese cambio ejecutando el siguiente comando en el terminal de AWS Cloud9:
```
git pull
```
1. Vaya a la carpeta `static-assets` y ejecute el comando siguiente:
```
cd /projects/react-app-blueprint/static-assets
```
1. Cree un archivo `hello-world.txt` en la carpeta `static-assets` ejecutando el siguiente comando:
```
touch hello-world.txt
```
AWS Cloud9 se basa en una plataforma de Linux. Si utiliza un sistema operativo Windows, puede usar el siguiente comando en su lugar:
```
echo > hello-world.text
```
1. En el panel de navegación de la izquierda, haga doble clic en el archivo `hello-world.txt` para abrirlo en el editor y añada el siguiente contenido:
```
Hello, world!
```
Guarde el archivo.
1. Asegúrese de tener los cambios más recientes y, a continuación, confirme y envíe los cambios al repositorio de código fuente de CodeCatalyst del esquema ejecutando los siguientes comandos:
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
Al introducir los cambios, se inició el flujo de trabajo de publicación, que publicará automáticamente la nueva versión del esquema en el espacio.
## Paso 6: actualización de la versión del catálogo publicada del esquema a la nueva versión
Una vez que se haya utilizado un esquema para crear un proyecto nuevo o aplicarlo a proyectos existentes, podrá seguir actualizando el esquema como autor del esquema. En este paso, realizará cambios en el esquema y cambiará la versión del catálogo del esquema.
1. En la consola de CodeCatalyst, vaya de nuevo al espacio.
1. Elija **Configuración** y, a continuación, **Esquemas**.
1. Elija **react-app-blueprint** y, a continuación, **Administrar versión del catálogo**.
1. Elija la nueva versión y después **Guardar**.
## Paso 7: actualización del proyecto con una nueva versión del esquema
Ahora hay una nueva versión disponible en el catálogo de esquemas del espacio. Como usuario del esquema, puede actualizar la versión del proyecto creado en [Paso 4: creación del proyecto con el esquema](#blueprint-getting-started-create-project). Esto garantiza que disponga de los cambios y correcciones más recientes necesarios para cumplir las prácticas recomendadas.
1. En la consola de CodeCatalyst, vaya al proyecto **react-app-project** creado en [Paso 4: creación del proyecto con el esquema](#blueprint-getting-started-create-project).
1. En el panel de navegación, elija **Esquemas**.
1. Seleccione **Actualizar esquema** en el cuadro de información.
1. En el panel de la derecha **Cambios de código**, puede ver las actualizaciones de `hello-world.txt` y `package.json`.
1. Seleccione **Aplicar actualización**.
Al seleccionar **Aplicar actualización**, se crea una solicitud de extracción en el proyecto con los cambios con respecto a la versión actualizada del esquema. Para realizar las actualizaciones en el proyecto, debe combinar la solicitud de extracción. Para obtener más información, consulte [Revisión de una solicitud de extracción](pull-requests-review.md) y [Combinación de una solicitud de extracción](pull-requests-merge.md).
1. En la tabla **Esquema**, busque el esquema. En la columna **Estado**, seleccione **Solicitud de extracción pendiente** y, a continuación, seleccione el enlace a la solicitud de extracción abierta.
1. Revise la solicitud de extracción y, a continuación, seleccione **Combinar**.
1. Elija **Combinación de avance rápido** para mantener los valores predeterminados y, a continuación, elija **Combinar**.
## Paso 8: consulta de los cambios en el proyecto
Los cambios en el esquema estarán disponibles en su proyecto después del [Paso 7: actualización del proyecto con una nueva versión del esquema](#blueprint-getting-started-update-project). Como usuario del esquema, puede ver los cambios en el repositorio de código fuente.
1. En el panel de navegación, elija **Repositorios de código fuente** y luego elija el nombre del repositorio de código fuente creado cuando se creó el proyecto.
1. En **Archivos**, puede ver el archivo `hello-world.txt` que se creó en [Paso 5: actualización del esquema](#blueprint-getting-started-update-blueprint).
1. Elija el archivo `hello-world.txt` para ver su contenido.
La administración del ciclo de vida proporciona a los autores de esquemas la posibilidad de administrar de forma centralizada el ciclo de vida de desarrollo de software de cada proyecto que contenga un esquema concreto. Como se muestra en este tutorial, puede introducir actualizaciones en el esquema para luego incorporarlas en los proyectos que lo hayan utilizado para crear un nuevo proyecto o lo hayan aplicado a un proyecto existente. Para obtener más información, consulte [El trabajo del autor de esquemas con la administración del ciclo de vida](lifecycle-management-dev.md).