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.
# 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 **\+ 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 **\+ 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 **\+ 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\_name}} 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 **\+** Añadir salida**.
1. Para **Salida**, introduzca**{{results.ListObjects1.Contents}}**. 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 \+ Añadir.**
1. Selecciona **\+ 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 **\+ 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\_name}} 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 **\+** Añadir.
1. Selecciona **\+ 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 **\+ 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\_name}} 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 **\+** Añadir salida**.
1. Para **Salida**, introduzca**{{results.GetObject1.Body.transformToWebStream()}}**. 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 **\+ 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 **{{currentRow.Key}}**.
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 **\+ 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 **\+ 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**{{currentRow.Key}}**.
1. En **Valor**, introduzca **{{currentRow.Key}}**.
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**{{ui.table1.selectedRow["Filename"]}}**.
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:**{{ui.table1.selectedRow["Filename"]}}**.
### 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 **{{ui.s3Upload1.files[0]?.nameWithExtension}}**.
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 **\+ 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 **\+ 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).