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. # Trabajando con AWS Step Functions Workflow Studio En las siguientes secciones se describe cómo trabajar con AWS Step Functions Workflow Studio en AWS Toolkit for Visual Studio Code. Para obtener información detallada sobre AWS Step Functions Workflow Studio, consulte el tema [Desarrollo de flujos](https://docs.aws.amazon.com//step-functions/latest/dg/developing-workflows.html) de trabajo en la Guía para *AWS Step Functions*desarrolladores ## Apertura del Diseñador de flujo de trabajo En la siguiente lista se describen las diferentes rutas disponibles para abrir el Diseñador de flujo de trabajo en VS Code. **nota** Para trabajar con el Diseñador de flujo de trabajo en VS Code, la extensión del archivo `Amazon State Language`(ASL) que contiene la definición de máquina de estado debe terminar en `asl.json`, `asl.yml` o `asl.yaml`. Para obtener más información sobre cómo descargar o crear una nueva definición de máquina de estados en el AWS kit de herramientas, consulte las secciones *Descarga de máquinas de estados* y *Creación de una máquina de estados* en el AWS Step Functions tema Cómo [trabajar con](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/building-stepfunctions.html) esta guía del usuario. + En el AWS explorador, abra el menú contextual (haga clic con el botón derecho) en un `ASL` archivo que contenga una definición de máquina de estados y, a continuación, seleccione **Abrir en Workflow Studio**. + En un archivo de `ASL` abierto que contenga una definición de máquina de estado, elija el icono **Abrir con el Diseñador de flujo de trabajo** situado junto a las pestañas de la ventana del editor de VS Code. + En un `ASL` archivo abierto que contenga una definición de máquina de estados, seleccione el CodeLens comando **Abrir con Workflow Studio**, situado en la parte superior del archivo. + Al cerrar y volver a abrir un archivo de `ASL` con una definición de máquina de estado, se volverá a abrir automáticamente el archivo en el Diseñador de flujo de trabajo, a menos que el Diseñador de flujo de trabajo predeterminado se deshabilite de forma manual. ## Modo Diseño y modo Código El Diseñador de flujo de trabajo tiene dos modos para trabajar con los archivos de `ASL` que contienen una definición de máquina de estado: el modo **Diseño** y el modo **Código**. El modo **Diseño** proporciona una interfaz gráfica para visualizar los flujos de trabajo a medida que crea prototipos. El modo **Código** tiene un editor de código integrado en el que puede ver, escribir y editar las definiciones de `ASL` de los flujos de trabajo. **nota** Para obtener información detallada sobre cada una de las secciones de la interfaz de usuario en los modos Diseño y Código, consulte el tema [Uso del Diseñador de flujo de trabajo](https://docs.aws.amazon.com//step-functions/latest/dg/workflow-studio.html) de la Guía para desarrolladores de *AWS Step Functions*. No todas las funciones de Workflow Studio están disponibles en el AWS kit de herramientas, como el **modo Config**, por ejemplo. La interfaz de usuario del modo **Diseño** tiene siete secciones principales, tal como aparecen etiquetadas y descritas en la imagen siguiente. 1. Botones de modo: botones para cambiar entre los modos **Diseño** y **Código**. 1. Botones de utilidad: conjunto de botones para realizar tareas, como salir del Diseñador de flujo de trabajo, guardar los flujos de trabajo o exportar las definiciones de `ASL` a un archivo JSON o YAML. 1. Barra de herramientas de diseño: barra de herramientas que contiene un conjunto de botones que realizan acciones comunes, como deshacer, eliminar y ajustar el zoom. 1. Navegador de estados: navegador que contiene drag-and-drop los estados de su lienzo de flujo de trabajo. Los estados se organizan en pestañas y se definen como **Acciones**, **Flujo** y **Patrones**. 1. Lienzo y gráfico del flujo de trabajo: representación visual del flujo de trabajo en la que puede eliminar, reorganizar y seleccionar los estados para su configuración. 1. Panel inspector: vea y edite las propiedades de cualquier estado seleccionado en el lienzo. En función del estado seleccionado en el gráfico del flujo de trabajo del lienzo, las pestañas se rellenan con opciones específicas del estado para **Configuración**, **Entrada/salida**, **Variables** y **Gestión de errores**. 1. Enlaces de información: abren un panel con información contextual cuando necesita ayuda. Estos paneles también incluyen enlaces a temas relacionados en la Guía para desarrolladores de *AWS Step Functions*. ![\[El modo de diseño de la interfaz de usuario de Workflow Studio en el AWS kit de herramientas\]](http://docs.aws.amazon.com/es_es/toolkit-for-vscode/latest/userguide/images/SFNWFS022025.png) ## Uso de pruebas de estado único durante el diseño En la interfaz de usuario de estado de prueba del Diseñador de flujo de trabajo, puede probar los estados individuales de la máquina de estado. Esto incluye la capacidad de proporcionar entradas de estado, establecer variables y realizar sustituciones tanto por CloudFormation definición como por ambas AWS SAM . Para obtener más información sobre la infraestructura como código (IaC), las definiciones de recursos y la transformación de datos, consulte los temas [Uso AWS SAM para crear flujos de trabajo de Step Functions](https://docs.aws.amazon.com/step-functions/latest/dg/concepts-sam-sfn.html) y [Transformación de datos con JSONata Step Functions](https://docs.aws.amazon.com/step-functions/latest/dg/transforming-data.html) en la Guía para *AWS Step Functions*desarrolladores. En el siguiente procedimiento se describe cómo abrir la interfaz de usuario de estado de prueba en el Diseñador de flujo de trabajo. **Apertura de la interfaz de usuario de estado de prueba** 1. En la pestaña del modo **Diseño** del Diseñador de flujo de trabajo, vaya al lienzo y elija un estado para abrirlo en el panel **Inspector**. 1. En el panel **Inspector**, elija el botón **Probar estado**. 1. La interfaz de usuario de **Probar estado** se abre en VS Code. La interfaz de usuario de estado de prueba tiene tres pestañas principales: **Entrada de prueba**, **Argumentos y resultado** y **Definición de estado**. La pestaña **Probar entradas** tiene 3 campos adicionales que le permiten **introducir datos de estado**, establecer **variables** y especificar **sustituciones de definiciones** a partir de sus plantillas AWS SAM o CloudFormation plantillas. En la pestaña **Definición de estado**, puede ajustar el flujo de trabajo y volver a probarlo. Cuando termine de ejecutar las pruebas, podrá aplicar y guardar los cambios en la definición de máquina de estado. En la siguiente captura de pantalla se muestra la interfaz de usuario de estado de prueba, que incluye una definición de recursos del tema. ![\[La interfaz de usuario del estado de prueba de Workflow Studio en el kit de herramientas AWS\]](http://docs.aws.amazon.com/es_es/toolkit-for-vscode/latest/userguide/images/SFNWFSteststate022025.png) ## Deshabilitación del Diseñador de flujo de trabajo de forma predeterminada De forma predeterminada, el Diseñador de flujo de trabajo es el editor predeterminado para los archivos de `ASL` que contienen una definición de máquina de estado. Para deshabilitar la configuración predeterminada, modifique el archivo de `settings.json` en el directorio `.vscode` local. Si desactiva el Diseñador de flujo de trabajo de forma predeterminada, podrá seguir accediendo a él mediante los métodos que se indican en la sección *Apertura del Diseñador de flujo de trabajo*, que se encuentra en este tema. Para editar el archivo de `settings.json` desde VS Code, complete los siguientes pasos. 1. En VS Code, pulse **option\$1shift\$1p** (Mac) o **ctrl\$1shift\$1p** (Windows) para abrir la **paleta de comandos**. 1. En la **paleta de comandos** de VS Code, escriba **Open User Settings (JSON)** en la barra de búsqueda y elija esta opción cuando aparezca en la lista. 1. En `settings.json` del editor, agregue la siguiente modificación al archivo: ``` { "workbench.editorAssociations": { // Use all the following overrides or a specific one for a certain file type "*.asl.json": "default", "*.asl.yaml": "default", "*.asl.yml": "default" } } ``` 1. Guarde los cambios en `settings.json` y actualice o reinicie VS Code.