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.
# Tutoriales
**Topics**
+ [Cree una aplicación de resumen de texto de IA con Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interacción con Amazon Simple Storage Service con componentes y automatizaciones](automations-s3.md)
+ [Invocar funciones Lambda en una aplicación de App Studio](tutorial-lambda.md)
# Cree una aplicación de resumen de texto de IA con Amazon Bedrock
En este tutorial, creará una aplicación en App Studio que utiliza Amazon Bedrock para proporcionar resúmenes concisos de las entradas de texto de los usuarios finales. La aplicación contiene una interfaz de usuario sencilla en la que los usuarios pueden introducir cualquier texto que deseen resumir. Pueden ser notas de reuniones, contenido de artículos, resultados de investigaciones o cualquier otra información textual. Una vez que los usuarios introduzcan el texto, pueden pulsar un botón para enviarlo a Amazon Bedrock, que lo procesará con el modelo Claude 3 Sonnet y devolverá una versión resumida.
**Contents**
+ [Requisitos previos](#tutorial-conversational-bedrock-prerequisites)
+ [Paso 1: Crear y configurar un rol de IAM y un conector de App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Paso 2: Crear una aplicación](#tutorial-conversational-bedrock-steps-create-application)
+ [Paso 3: Crea y configura una automatización](#tutorial-conversational-bedrock-steps-create-automation)
+ [Paso 4: Crear páginas y componentes](#tutorial-conversational-bedrock-steps-user-interface)
+ [Cambie el nombre de la página predeterminada](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Añada componentes a la página](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configure los componentes de la página](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Paso 5: Publicar la aplicación en el entorno **de pruebas**](#tutorial-conversational-bedrock-steps-publish)
+ [(Opcional) Limpieza](#tutorial-conversational-bedrock-steps-cleanup)
## Requisitos previos
Antes de empezar, revise y complete los siguientes requisitos previos:
+ Acceso a AWS App Studio. Ten en cuenta que debes tener el rol de administrador para crear un conector en este tutorial.
+ Opcional: [AWS Conceptos de App Studio](concepts.md) revísalo y familiarízate con los conceptos importantes de App Studio. [Tutorial: Comience a crear desde una aplicación vacía](getting-started-tutorial-empty.md)
## Paso 1: Crear y configurar un rol de IAM y un conector de App Studio
Para proporcionar acceso a App Studio a los modelos de Amazon Bedrock, debe:
1. Activa los modelos de Amazon Bedrock que quieras usar en tu aplicación. Para este tutorial, utilizará **Claude 3 Sonnet**, así que asegúrese de habilitar ese modelo.
1. Cree un rol de IAM con los permisos adecuados para Amazon Bedrock.
1. Cree un conector de App Studio con la función de IAM que se utilizará en su aplicación.
Consulta las [Conéctese a Amazon Bedrock](connectors-bedrock.md) instrucciones detalladas y vuelve a este tutorial después de haber seguido los pasos y creado el conector.
## Paso 2: Crear una aplicación
Utilice el siguiente procedimiento para crear una aplicación vacía en App Studio que integrará en la aplicación de resumen de texto.
1. Inicia sesión en App Studio.
1. Ve al centro de creación y selecciona **\$1 Crear aplicación**.
1. Elija **Empezar desde cero**.
1. En el campo **Nombre de la aplicación**, proporciona un nombre para la aplicación, como**Text Summarizer**.
1. Si se te pide que selecciones fuentes de datos o un conector, selecciona **Omitir** para los fines de este tutorial.
1. Elija **Paso siguiente** para continuar.
1. (Opcional): mira el tutorial en vídeo para obtener una descripción general rápida de la creación de aplicaciones en App Studio.
1. Selecciona **Editar aplicación**, que te llevará al estudio de aplicaciones.
## Paso 3: Crea y configura una automatización
Usted define la lógica y el comportamiento de una aplicación de App Studio en *las automatizaciones.* Las automatizaciones constan de pasos individuales conocidos como *acciones*, *parámetros* que se utilizan para transferir datos a la acción desde otros recursos y un *resultado* que pueden utilizar otras automatizaciones o componentes. En este paso, creará una automatización que gestione la interacción con Amazon Bedrock con lo siguiente:
+ Entradas: un parámetro para pasar la entrada de texto del usuario a la automatización.
+ Acciones: una acción de **GenAI Prompt** que envía el texto introducido a Amazon Bedrock y devuelve el resumen del texto de salida.
+ Resultados: un resultado de automatización que consiste en el resumen procesado de Amazon Bedrock, que se puede utilizar en su aplicación.
**Para crear y configurar una automatización que envíe un mensaje a Amazon Bedrock y procese y devuelva un resumen**
1. Seleccione la pestaña **Automatizaciones** en la parte superior del lienzo.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **InvokeBedrock** y luego presione **Entrar**.
1. Añada un parámetro a la automatización que se utilizará para pasar la entrada de texto del usuario a la automatización que se utilizará en la solicitud a Amazon Bedrock realizando los siguientes pasos:
1. En el lienzo, en el cuadro de parámetros, selecciona **\$1 Añadir**.
1. En **Name (Nombre)**, escriba **input**.
1. En **Descripción**, introduzca cualquier descripción, por ejemplo**Text to be sent to Amazon Bedrock**.
1. En **Tipo**, seleccione **Cadena**.
1. Seleccione **Añadir** para crear el parámetro.
1. Añada una acción de **GenAI Prompt** realizando los siguientes pasos:
1. **En el panel de la derecha, selecciona Acciones.**
1. Selecciona **GenAI Prompt** para añadir una acción.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Cambie el nombre de la acción a **PromptBedrock** seleccionando el icono del lápiz, introduciendo el nombre y pulsando Entrar.
1. En **Conector**, seleccione el conector que se creó en[Paso 1: Crear y configurar un rol de IAM y un conector de App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. En **Modelo**, elija el modelo de Amazon Bedrock que desee utilizar para procesar la solicitud. En este tutorial, elegirá **Claude 3.5 Sonnet**.
1. En la **solicitud de usuario**, escriba`{{params.input}}`. Representa el `input` parámetro que creó anteriormente y contendrá el texto introducido por los usuarios de la aplicación.
1. En la línea de **comandos** del sistema, introduzca las instrucciones de la línea de comandos del sistema que desee enviar a Amazon Bedrock. Para este tutorial, introduzca lo siguiente:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Elija la **configuración de la solicitud** para ampliarla y actualice los siguientes campos:
+ En **Temperatura**, ingresa`0`. La temperatura determina la aleatoriedad o la creatividad del resultado en una escala de 0 a 10. Cuanto más alto sea el número, más creativa será la respuesta.
+ En **Max Tokens**, ingresa `4096` para limitar la longitud de la respuesta.
1. La salida de esta automatización será el texto resumido; sin embargo, de forma predeterminada, las automatizaciones no crean salidas. Configure la automatización para crear una salida de automatización realizando los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la **InvokeBedrock**automatización.
1. En el menú **Propiedades** de la derecha, en **Salida**, selecciona **\$1** Añadir.
1. En **Salida**, introduzca**\$1\$1results.PromptBedrock.text\$1\$1**. Esta expresión devuelve el contenido de la `processResults` acción.
## Paso 4: Crear páginas y componentes
En App Studio, cada página representa una pantalla de la interfaz de usuario (UI) de la aplicación con la que los usuarios interactuarán. Dentro de estas páginas, puedes agregar varios componentes, como tablas, formularios, botones y más, para crear el diseño y la funcionalidad deseados.
### Cambie el nombre de la página predeterminada
La aplicación de resumen de texto de este tutorial solo contendrá una página. Las aplicaciones recién creadas vienen con una página predeterminada, así que cambiarás el nombre de esa página en lugar de añadirla.
**Para cambiar el nombre de la página predeterminada**
1. En el menú de navegación de la barra superior, selecciona **Páginas**.
1. En el panel de la izquierda, selecciona **Página1** y elige el panel de **Propiedades** en el panel de la derecha.
1. **Elija el icono del lápiz, introduzca **TextSummarizationTool** y pulse Entrar.**
1. En la **etiqueta de navegación**, introduzca**TextSummarizationTool**.
### Añada componentes a la página
Para este tutorial, la aplicación de resumen de texto tiene una página que contiene los siguientes componentes:
+ Un componente **de entrada de texto** que los usuarios finales utilizan para introducir un mensaje para resumirlo.
+ Un componente de **botón** que se utiliza para enviar el mensaje a Amazon Bedrock.
+ Un componente de **área de texto** que muestra el resumen de Amazon Bedrock.
Añada un componente **de entrada de texto** a la página que los usuarios utilizarán para introducir un mensaje de texto para resumirlo.
**Para añadir un componente de entrada de texto**
1. En el panel de **componentes** de la derecha, localice el componente **de entrada de texto** y arrástrelo al lienzo.
1. Elija la entrada de texto en el lienzo para seleccionarla.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre a la entrada de texto. **inputPrompt**
1. En **Etiqueta**, ingresa**Prompt**.
1. En **Placeholder**, introduzca**Enter text to be summarized**.
Ahora, añada un componente **Button** que los usuarios elijan para enviar el mensaje a Amazon Bedrock.
**Para añadir un componente de botón**
1. En el panel de **componentes** de la derecha, localice el componente de **botón** y arrástrelo al lienzo.
1. Elija el botón en el lienzo para seleccionarlo.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre al botón. **sendButton**
1. En **Etiqueta del botón**, ingresa**Send**.
Ahora, añada un componente de **área de texto** que muestre el resumen devuelto por Amazon Bedrock.
**Para añadir un componente de área de texto**
1. En el panel de **componentes** de la derecha, localice el componente del **área de texto** y arrástrelo al lienzo.
1. Elija el área de texto en el lienzo para seleccionarla.
1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:
1. Selecciona el icono del lápiz para cambiarle el nombre al botón. **textSummary**
1. En **Etiqueta**, ingresa**Summary**.
### Configure los componentes de la página
Ahora que la aplicación contiene una página con componentes, el siguiente paso es configurar los componentes para que tengan el comportamiento adecuado. Para configurar un componente, como un botón, para que realice acciones cuando se interactúe con él, debe añadirle un *activador*. En este tutorial, en el caso de la aplicación, añadirá dos activadores al `sendButton` botón para hacer lo siguiente:
+ El primer disparador envía el texto del `textPrompt` componente a Amazon Bedrock para su análisis.
+ El segundo activador muestra el resumen devuelto por Amazon Bedrock en el `textSummary` componente.
**Para añadir un disparador que envíe el mensaje a Amazon Bedrock**
1. Elija el botón del lienzo para seleccionarlo.
1. En el panel de **propiedades** del lado derecho, en la sección **Activadores**, selecciona **\$1 Añadir**.
1. Selecciona **Invoke Automation.**
1. Elija el único **InvokeAutomationactivador** que se creó para configurarlo.
1. En **Nombre de la acción**, introduzca**invokeBedrockAutomation**.
1. En **Invoke Automation**, seleccione la **InvokeBedrock**automatización que se creó anteriormente.
1. En el cuadro de parámetros, en el parámetro **de entrada** que se creó anteriormente, introduzca**\$1\$1ui.inputPrompt.value\$1\$1**, que pasa el contenido al componente de entrada de `inputPrompt` texto.
1. Seleccione la flecha izquierda situada en la parte superior del panel para volver al menú de propiedades del componente.
Ahora que ha configurado un disparador que invoca la automatización para enviar una solicitud a Amazon Bedrock cuando se hace clic en el botón, el siguiente paso es configurar un segundo activador que muestre los resultados en el componente. `textSummary`
**Para añadir un disparador que muestre los resultados de Amazon Bedrock en el componente de área de texto**
1. En el panel de **propiedades** del lado derecho del botón, en la sección **Activadores**, selecciona **\$1** Añadir.
1. Seleccione **Ejecutar la acción del componente.**
1. Elija el activador **Runcomponentaction1** que se creó para configurarlo.
1. En **Nombre de la acción**, introduzca. **setTextSummary**
1. En **Componente**, seleccione el componente **TextSummary**.
1. En **Acción**, seleccione **Establecer valor**.
1. En **Definir valor** en, introduzca**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Paso 5: Publicar la aplicación en el entorno **de pruebas**
Por lo general, cuando se crea una aplicación, se recomienda previsualizarla para ver su aspecto y realizar las primeras pruebas de su funcionalidad. Sin embargo, dado que las aplicaciones no interactúan con los servicios externos en el entorno de vista previa, deberá publicar la aplicación en el entorno de pruebas para poder probar el envío de solicitudes y la recepción de respuestas de Amazon Bedrock.
**Para publicar su aplicación en el entorno de pruebas**
1. En la esquina superior derecha del creador de aplicaciones, selecciona **Publicar**.
1. Agrega una descripción de la versión para el entorno de pruebas.
1. Revise y seleccione la casilla de verificación relativa al SLA.
1. Elija **Iniciar**. La publicación puede tardar hasta 15 minutos.
1. (Opcional) Cuando estés listo, puedes dar acceso a otras personas seleccionando **Compartir** y siguiendo las instrucciones. Para obtener más información sobre cómo compartir aplicaciones de App Studio, consulte[Compartir las aplicaciones publicadas](application-share.md).
Tras probar la aplicación, vuelve a seleccionar **Publicar** para promocionarla en el entorno de producción. Tenga en cuenta que las aplicaciones del entorno de producción no están disponibles para los usuarios finales hasta que se compartan. Para obtener más información sobre los distintos entornos de aplicaciones, consulte[Entornos de aplicaciones](applications-publish.md#application-environments).
## (Opcional) Limpieza
Ya ha completado correctamente el tutorial y ha creado una aplicación de resumen de texto en App Studio con Amazon Bedrock. Puede seguir utilizando la aplicación o puede limpiar los recursos que se crearon en este tutorial. La siguiente lista contiene una lista de los recursos que se deben limpiar:
+ El conector Amazon Bedrock creado en App Studio. Para obtener más información, consulte [Visualización, edición y eliminación de conectores](viewing-deleting-connectors.md).
+ La aplicación de resumen de texto de App Studio. Para obtener más información, consulte [Eliminación de una aplicación de](applications-delete.md).
+ El rol de IAM creado en la consola de IAM. Para obtener más información, consulte [Eliminar roles o perfiles de instancia](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) en la Guía del *AWS Identity and Access Management usuario*.
+ Si ha solicitado acceso al modelo para usar Claude 3 Sonnet y desea revertir el acceso, consulte [Administrar el acceso a los modelos de bases de Amazon Bedrock en la Guía del usuario](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) de *Amazon Bedrock*.
# Interacción con Amazon Simple Storage Service con componentes y automatizaciones
Puede invocar varias operaciones de Amazon S3 desde una aplicación de App Studio. Por ejemplo, puede crear un panel de administración sencillo para gestionar los usuarios y los pedidos y mostrar el contenido multimedia de Amazon S3. Si bien puede invocar cualquier operación de Amazon S3 mediante la AWS acción **Invoke**, hay cuatro acciones específicas de Amazon S3 que puede añadir a las automatizaciones de su aplicación para realizar operaciones comunes en buckets y objetos de Amazon S3. Las cuatro acciones y sus operaciones son las siguientes:
+ **Poner objeto**: utiliza la `Amazon S3 PutObject` operación para añadir un objeto a un bucket de Amazon S3.
+ **Get Object**: utiliza la `Amazon S3 GetObject` operación para recuperar un objeto de un bucket de Amazon S3.
+ **Listar objetos**: utiliza la `Amazon S3 ListObjects` operación para enumerar los objetos de un bucket de Amazon S3.
+ **Eliminar objeto**: utiliza la `Amazon S3 DeleteObject` operación para eliminar un objeto de un bucket de Amazon S3.
Además de las acciones, hay un componente de **carga en S3** que puede añadir a las páginas de las aplicaciones. Los usuarios pueden usar este componente para elegir un archivo para cargar, y el componente requiere `Amazon S3 PutObject` cargar el archivo en el depósito y la carpeta configurados. En este tutorial se utilizará este componente en lugar de la acción de automatización independiente **Put Object**. (La acción independiente debe usarse en escenarios más complejos que impliquen una lógica o acciones adicionales que deban tomarse antes o después de la carga).
## Requisitos previos
En esta guía se supone que has completado el siguiente requisito previo:
1. Creé y configuré un bucket de Amazon S3, una función y una política de IAM y un conector de Amazon S3 para integrar correctamente Amazon S3 con App Studio. Para crear un conector, debe tener la función de administrador. Para obtener más información, consulte [Connect to Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Cree una aplicación vacía
Cree una aplicación vacía para utilizarla a lo largo de esta guía realizando los siguientes pasos.
**Para crear una aplicación vacía**
1. En el panel de navegación, elija **Mis aplicaciones**.
1. Seleccione **\$1 Crear aplicación**.
1. En el cuadro de diálogo **Crear aplicación**, asigne un nombre a la aplicación, elija **Empezar desde cero** y, a continuación, **Siguiente**.
1. En el cuadro de diálogo **Conectarse a datos existentes**, elija **Omitir** para crear la aplicación.
1. Seleccione **Editar aplicación** para ir al lienzo de su nueva aplicación, donde podrá usar componentes, automatizaciones y datos para configurar el aspecto y el funcionamiento de la aplicación.
## Crea páginas
Cree tres páginas en su aplicación para recopilar o mostrar información.
**Para crear páginas**
1. Si es necesario, selecciona la pestaña **Páginas** en la parte superior del lienzo.
1. En la barra de navegación de la izquierda, hay una sola página que se creó con tu aplicación. Selecciona **\$1 Añadir** dos veces para crear dos páginas más. El panel de navegación debe mostrar tres páginas en total.
1. Actualice el nombre de la página **Page1** realizando los siguientes pasos:
1. Elija el icono de puntos suspensivos y elija Propiedades de la **página.**
1. En el menú **Propiedades** de la derecha, selecciona el icono del lápiz para editar el nombre.
1. Escriba **FileList** y luego presione **Entrar**.
1. Repita los pasos anteriores para actualizar la segunda y la tercera página de la siguiente manera:
+ Cambie el nombre de la **página 2** a. **UploadFile**
+ **Cambie el nombre de Page3 a.** **FailUpload**
**Ahora, tu aplicación debería tener tres páginas denominadas, y **FileList**UploadFile**FailUpload******, que se muestran en el panel de páginas de la izquierda.**
A continuación, creará y configurará las automatizaciones que interactúan con Amazon S3.
## Cree y configure automatizaciones
Cree las automatizaciones de su aplicación que interactúan con Amazon S3. Utilice los siguientes procedimientos para crear las siguientes automatizaciones:
+ Una automatización de **GetFiles** que enumera los objetos de su bucket de Amazon S3, que se utilizará para rellenar un componente de tabla.
+ Una automatización de **DeleteFile** que elimina un objeto de su bucket de Amazon S3, que se utilizará para añadir un botón de eliminación a un componente de la tabla.
+ Una automatización de **ViewFile** que obtiene un objeto de su bucket de Amazon S3 y lo muestra, que se utilizará para mostrar más detalles sobre un único objeto seleccionado de un componente de la tabla.
### Cree una automatización `getFiles`
Cree una automatización que muestre una lista de los archivos de un bucket de Amazon S3 específico.
1. Elija la pestaña **Automatizaciones** en la parte superior del lienzo.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **getFiles** y luego presione **Entrar**.
1. Para añadir una acción **de lista de objetos**, realice los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Seleccione **Listar objetos** para añadir una acción. La acción debe tener un nombre`ListObjects1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**nota**
Puede usar el `Prefix` campo para limitar la respuesta a los objetos que comiencen por la cadena especificada.
1. El resultado de esta automatización se utilizará para rellenar un componente de tabla con objetos de su bucket de Amazon S3. Sin embargo, de forma predeterminada, las automatizaciones no crean resultados. Configure la automatización para crear una salida de automatización mediante los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la automatización de **GetFiles**.
1. En el menú **Propiedades** de la derecha, en Salida de **automatización, selecciona **\$1** Añadir salida**.
1. Para **Salida**, introduzca**\$1\$1results.ListObjects1.Contents\$1\$1**. Esta expresión devuelve el contenido de la acción y ahora se puede utilizar para rellenar un componente de la tabla.
### Crea una automatización `deleteFile`
Cree una automatización que elimine un objeto de un bucket de Amazon S3 específico.
1. **En el panel de **automatizaciones** de la izquierda, selecciona \$1 Añadir.**
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **deleteFile** y luego presione **Entrar**.
1. Añada un parámetro de automatización, que se utiliza para pasar datos a una automatización, realizando los siguientes pasos:
1. En el menú **Propiedades** de la derecha, en **Parámetros de automatización**, seleccione **\$1 Agregar**.
1. Seleccione el icono del lápiz para editar el parámetro de automatización. Actualice el nombre del parámetro a **fileName** y pulse **Entrar**.
1. Añada una acción de **eliminación de objeto** mediante los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Seleccione **Eliminar objeto** para añadir una acción. La acción debe tener un nombre`DeleteObject1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Cree una automatización `viewFile`
Cree una automatización que recupere un único objeto de un bucket de Amazon S3 específico. Más adelante, configurará esta automatización con un componente de visor de archivos para mostrar el objeto.
1. En el panel de **automatizaciones** de la izquierda, selecciona **\$1** Añadir.
1. Selecciona **\$1 Añadir automatización**.
1. En el panel de la derecha, selecciona **Propiedades**.
1. Actualice el nombre de la automatización seleccionando el icono del lápiz. Escriba **viewFile** y luego presione **Entrar**.
1. Añada un parámetro de automatización, que se utiliza para pasar datos a una automatización, realizando los siguientes pasos:
1. En el menú **Propiedades** de la derecha, en **Parámetros de automatización**, seleccione **\$1 Agregar**.
1. Seleccione el icono del lápiz para editar el parámetro de automatización. Actualice el nombre del parámetro a **fileName** y pulse **Entrar**.
1. Añada una acción **Obtener objeto** realizando los siguientes pasos:
1. En el panel de la derecha, selecciona **Acciones**.
1. Selecciona **Obtener objeto** para añadir una acción. La acción debe tener un nombre`GetObject1`.
1. Configure la acción realizando los siguientes pasos:
1. Elija la acción en el lienzo para abrir el menú de **propiedades** de la derecha.
1. Para **Connector**, elija el conector Amazon S3 que creó a partir de los requisitos previos.
1. Para la **configuración**, introduzca el siguiente texto y *bucket\$1name* sustitúyalo por el bucket que creó en los requisitos previos:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. De forma predeterminada, las automatizaciones no crean salidas. Configure la automatización para crear una salida de automatización mediante los siguientes pasos:
1. En el menú de navegación de la izquierda, selecciona la automatización **ViewFile**.
1. En el menú **Propiedades** de la derecha, en Salida de **automatización, elija **\$1** Añadir salida**.
1. Para **Salida**, introduzca**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. Esta expresión devuelve el contenido de la acción.
**nota**
Puede leer la respuesta de `S3 GetObject` de las siguientes maneras:
`transformToWebStream`: Devuelve una secuencia, que debe consumirse para recuperar los datos. Si se usa como salida de automatización, la automatización se encarga de ello y la salida se puede utilizar como fuente de datos de un componente de visor de imágenes o PDF. También se puede utilizar como entrada para otra operación, por ejemplo`S3 PutObject`.
`transformToString`: Devuelve los datos sin procesar de la automatización y debe usarse en una JavaScript acción si los archivos contienen contenido de texto, como datos JSON. Debe esperarse, por ejemplo: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Devuelve una matriz de enteros de 8 bits sin signo. Esta respuesta cumple el propósito de una matriz de bytes, que permite el almacenamiento y la manipulación de datos binarios. Debe esperarse, por ejemplo: `await results.GetObject1.Body.transformToByteArray();`
A continuación, añadirá componentes a las páginas que creó anteriormente y los configurará con sus automatizaciones para que los usuarios puedan usar su aplicación para ver y eliminar archivos.
## Agrega y configura los componentes de la página
Ahora que ha creado las automatizaciones que definen la lógica empresarial y la funcionalidad de su aplicación, creará los componentes y conectará ambos.
### Añada componentes a la página **FileList**
La **FileList**página que creó anteriormente se usará para mostrar una lista de archivos en el bucket de Amazon S3 configurado y más detalles sobre cualquier archivo que se elija de la lista. Para ello, debe hacer lo siguiente:
1. Cree un componente de tabla para mostrar la lista de archivos. Configurará las filas de la tabla para que se rellenen con el resultado de la automatización de **GetFiles** que creó anteriormente.
1. Cree un componente de visor de PDF para mostrar un solo PDF. Configurará el componente para ver un archivo seleccionado de la tabla, utilizando la automatización **ViewFile** que creó anteriormente para extraer el archivo de su depósito.
**Para añadir componentes a la página **FileList****
1. Seleccione la pestaña **Páginas** en la parte superior del lienzo.
1. En el panel de **páginas** de la izquierda, selecciona la **FileList**página.
1. En la página de **componentes** de la derecha, busca el componente **Tabla** y arrástralo hasta el centro del lienzo.
1. Elija el componente de tabla que acaba de añadir a la página.
1. **En el menú **Propiedades** de la derecha, selecciona el menú desplegable **Fuente** y selecciona Automatización.**
1. **Selecciona el menú desplegable **Automatización** y selecciona la automatización GetFiles.** La tabla utilizará la salida de la automatización de **GetFiles** como contenido.
1. Añada una columna para rellenarla con el nombre del archivo.
1. En el menú **Propiedades** de la derecha, junto a **Columnas**, selecciona **\$1 Añadir**.
1. Seleccione el icono de flecha situado a la derecha de la columna **Columna 1** que se acaba de añadir.
1. En **Etiqueta de columna**, cambie el nombre de la columna a. **Filename**
1. En **Valor**, introduzca **\$1\$1currentRow.Key\$1\$1**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
1. Añada una acción de tabla para eliminar el archivo de una fila.
1. En el menú **Propiedades** de la derecha, junto a **Acciones**, selecciona **\$1 Añadir**.
1. En **Acciones**, cambie el nombre del **botón** a. **Delete**
1. Seleccione el icono de flecha situado a la derecha de la acción **Eliminar** cuyo nombre se acaba de cambiar.
1. En **Al hacer clic**, selecciona **\$1 Añadir acción** y selecciona **Invocar la automatización**.
1. Elija la acción que se agregó para configurarla.
1. En **Nombre de la función**, introduzca **DeleteRecord**.
1. En **Invoke automation**, seleccione**deleteFile**.
1. En el cuadro de texto del parámetro, introduzca**\$1\$1currentRow.Key\$1\$1**.
1. En **Valor**, introduzca **\$1\$1currentRow.Key\$1\$1**.
1. En el panel de la derecha, elija **Componentes** para ver el menú de componentes. Hay dos opciones para mostrar los archivos:
+ Un **visor de imágenes** para ver archivos con una `.jpg` extensión `.png``.jpeg`, o.
+ Un componente de **visor de PDF** para ver archivos PDF.
En este tutorial, añadirá y configurará el componente de **visor de PDF**.
1. Añada el componente de **visor de PDF**.
1. En la página de **componentes** de la derecha, busque el componente del **visor de PDF** y arrástrelo al lienzo, debajo del componente de la tabla.
1. Elija el componente del **visor de PDF** que se acaba de añadir.
1. **En el menú **Propiedades** de la derecha, selecciona el menú desplegable **Fuente** y selecciona Automatización.**
1. **Selecciona el menú desplegable **Automatización** y selecciona la automatización de ViewFile.** La tabla utilizará la salida de la automatización de **ViewFile** como contenido.
1. En el cuadro de texto del parámetro, introduzca**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. En el panel de la derecha, también hay un campo de **nombre de archivo**. El valor de este campo se utiliza como encabezado del componente del visor de PDF. Introduzca el mismo texto que en el paso anterior:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### Agregue componentes a la **UploadFile**página
La **UploadFile**página contendrá un selector de archivos que se puede utilizar para seleccionar y cargar un archivo en el bucket de Amazon S3 configurado. Añadirá el componente de **carga de S3** a la página, que los usuarios pueden utilizar para seleccionar y cargar un archivo.
1. En el panel de **páginas** de la izquierda, selecciona la **UploadFile**página.
1. En la página de **componentes** de la derecha, busca el componente de **carga de S3** y arrástralo hasta el centro del lienzo.
1. Elija el componente de carga de S3 que acaba de añadir a la página.
1. En el menú **Propiedades** de la derecha, configure el componente:
1. En el menú desplegable **Connector**, seleccione el conector Amazon S3 que se creó en los requisitos previos.
1. En **Bucket**, introduce el nombre de tu bucket de Amazon S3.
1. En **Nombre del archivo**, escriba **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. En **Tamaño máximo de archivo**, **5** introdúcelo en el cuadro de texto y asegúrate de que **MB** esté seleccionado en el menú desplegable.
1. En la sección **Activadores**, añade las acciones que se ejecutan después de que las cargas se realicen correctamente o no. Para ello, sigue estos pasos:
Para añadir una acción que se ejecute después de que las cargas se hayan realizado correctamente:
1. **En caso de éxito**, selecciona **\$1 Añadir acción** y selecciona **Navegar**.
1. Elija la acción que se agregó para configurarla.
1. En **Tipo de navegación**, elija **Página**.
1. **En Navegar hasta**, elija**FileList**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
Para añadir una acción que se ejecute después de que las cargas no se realicen correctamente:
1. **En caso de error**, selecciona **\$1 Añadir acción** y selecciona **Navegar**.
1. Elija la acción que se agregó para configurarla.
1. En **Tipo de navegación**, elija **Página**.
1. **En Navegar hasta**, elija**FailUpload**.
1. Seleccione el icono de flecha situado en la parte superior del panel para volver al panel principal de **Propiedades**.
### Añada componentes a la **FailUpload**página
La **FailUpload**página es una página sencilla que contiene un cuadro de texto que informa a los usuarios de que se ha producido un error en la carga.
1. En el panel de **páginas** de la izquierda, selecciona la **FailUpload**página.
1. En la página de **componentes** de la derecha, busca el componente de **texto** y arrástralo al centro del lienzo.
1. Elige el componente de texto que acabas de añadir a la página.
1. En el menú **Propiedades** de la derecha, en **Valor**, introduzca**Failed to upload, try again**.
## Actualiza la configuración de seguridad de la aplicación
Todas las aplicaciones de App Studio tienen ajustes de seguridad de contenido que puedes usar para restringir contenido multimedia o recursos externos, o a qué dominios de Amazon S3 puedes cargar objetos. La configuración predeterminada es bloquear todos los dominios. Para cargar objetos a Amazon S3 desde su aplicación, debe actualizar la configuración para permitir los dominios a los que desea cargar objetos.
**Para permitir que los dominios carguen objetos en Amazon S3**
1. Seleccione la pestaña de **configuración de la aplicación**.
1. Seleccione la pestaña **Configuración de seguridad del contenido**.
1. En **Connect source**, selecciona **Permitir todas las conexiones**.
1. Seleccione **Save**.
## Próximos pasos: Obtenga una vista previa de la aplicación y publíquela para probarla
La aplicación ya está lista para ser probada. Para obtener más información sobre la vista previa y la publicación de aplicaciones, consulte[Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md).
# Invocar funciones Lambda en una aplicación de App Studio
En este tutorial, se muestra cómo conectar App Studio a Lambda e invocar funciones de Lambda desde las aplicaciones.
## Requisitos previos
En esta guía se supone que ha cumplido los siguientes requisitos previos:
1. Creó una aplicación de App Studio. Si no tiene una, puede crear una aplicación vacía para usarla en el tutorial. Para obtener más información, consulte [Creación de una aplicación de](applications-create.md).
**nota**
Si bien no necesita una función Lambda para seguir este tutorial y aprender a configurarla, puede resultarle útil disponer de una para asegurarse de que ha configurado correctamente la aplicación. [Este tutorial no contiene información sobre la creación de funciones Lambda. Para obtener más información, consulte la Guía del AWS Lambda desarrollador.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Crear un conector Lambda
Para usar las funciones de Lambda en tu aplicación de App Studio, debes usar un conector para conectar App Studio a Lambda y proporcionar acceso a tus funciones. Debe ser administrador para crear conectores en App Studio. Para obtener más información sobre la creación de conectores Lambda, incluidos los pasos para crear uno, consulte. [Connect to AWS Lambda](connectors-lambda.md)
## Cree y configure una automatización
Las automatizaciones se utilizan para definir la lógica de la aplicación y se componen de acciones. Para invocar una función Lambda en tu aplicación, primero debes agregar y configurar una acción *Invoke Lambda* a una automatización. Siga los siguientes pasos para crear una automatización y agregarle la acción *Invoke Lambda*.
1. Mientras editas la aplicación, selecciona la pestaña **Automatizaciones**.
1. Selecciona **\$1 Añadir automatización**.
1. En el menú **Acciones** de la derecha, selecciona **Invocar Lambda** para añadir el paso a la automatización.
1. Elija el nuevo paso de Lambda en el lienzo para ver y configurar sus propiedades.
1. En el menú **Propiedades** de la derecha, configure el paso realizando los siguientes pasos:
1. En **Connector**, seleccione el conector que se creó para conectar App Studio a las funciones de Lambda.
1. En **Nombre de función**, introduzca el nombre de la función Lambda.
1. En **Evento de función**, introduzca el evento que se va a pasar a la función Lambda. En la siguiente lista se proporcionan algunos ejemplos de casos de uso comunes:
+ Pasar el valor de un parámetro de automatización, como el nombre de un archivo u otra cadena: `varName: params.paramName`
+ Pasar el resultado de una acción anterior: `varName: results.actionName1.data[0].fieldName`
+ Si añade una acción de *invocar Lambda* dentro de *una* acción de bucle, puede enviar campos de cada elemento iterado de forma similar a los parámetros: `varName: currentItem.fieldName`
1. El campo de **salida simulado** se puede usar para proporcionar una salida simulada para probar la aplicación durante la vista previa, cuando los conectores no están activos.
## Configura un elemento de interfaz de usuario para ejecutar la automatización
Ahora que tiene una automatización configurada con una acción para invocar la función Lambda, puede configurar un elemento de interfaz de usuario para ejecutar la automatización. En este tutorial, creará un botón que ejecute la automatización al hacer clic en él.
**sugerencia**
También puede ejecutar automatizaciones desde otras automatizaciones con la acción *Invocar* automatización.
**Para ejecutar la automatización desde un botón**
1. Mientras editas tu aplicación, selecciona la pestaña **Páginas**.
1. En el menú de la derecha, selecciona el componente **Botón** para añadir un botón a la página.
1. Elija el nuevo botón para configurarlo.
1. En el menú de **propiedades** de la derecha, en **Disparadores**, selecciona **\$1 Añadir** y selecciona **Invocar** la automatización.
1. Elija el nuevo activador de invocación de la automatización para configurarlo.
1. En **Invoke automation**, seleccione la automatización que invoca la función Lambda y configure los parámetros que desee enviar a la automatización.
Ahora, cualquier usuario que elija este botón en su aplicación hará que se ejecute la automatización configurada.
## Próximos pasos: previsualice y publique la aplicación para probarla
La aplicación ya está lista para ser probada. Al obtener una vista previa de la aplicación en el entorno de desarrollo, los conectores no están activos, por lo que no puede probar la automatización durante la vista previa, ya que utiliza un conector para conectarse. AWS Lambda Para probar la funcionalidad de tu aplicación, que depende de los conectores, debes publicarla en el entorno de pruebas. Para obtener más información sobre la vista previa y la publicación de aplicaciones, consulte[Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md).