As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Interagindo com o Amazon Simple Storage Service com componentes e automações
Você pode invocar várias operações do Amazon S3 a partir de um aplicativo do App Studio. Por exemplo, você pode criar um painel de administração simples para gerenciar seus usuários e pedidos e exibir sua mídia do Amazon S3. Embora você possa invocar qualquer operação do Amazon S3 usando **a** ação AWS Invoke, há quatro ações dedicadas do Amazon S3 que você pode adicionar às automações em seu aplicativo para realizar operações comuns em buckets e objetos do Amazon S3. As quatro ações e suas operações são as seguintes:
+ **Colocar objeto**: usa a `Amazon S3 PutObject` operação para adicionar um objeto a um bucket do Amazon S3.
+ **Obter objeto**: usa a `Amazon S3 GetObject` operação para recuperar um objeto de um bucket do Amazon S3.
+ **Listar objetos**: usa a `Amazon S3 ListObjects` operação para listar objetos em um bucket do Amazon S3.
+ **Excluir objeto**: usa a `Amazon S3 DeleteObject` operação para excluir um objeto de um bucket do Amazon S3.
Além das ações, há um componente de **upload do S3** que você pode adicionar às páginas dos aplicativos. Os usuários podem usar esse componente para escolher um arquivo para carregar, e as chamadas do componente `Amazon S3 PutObject` para carregar o arquivo no bucket e na pasta configurados. Este tutorial usará esse componente no lugar da ação autônoma de automação **Put Object**. (A ação autônoma deve ser usada em cenários mais complexos que envolvam lógica ou ações adicionais a serem tomadas antes ou depois do upload.)
## Pré-requisitos
Este guia pressupõe que você tenha cumprido os seguintes pré-requisitos:
1. Criou e configurou um bucket do Amazon S3, uma função e uma política do IAM e um conector do Amazon S3 para integrar com sucesso o Amazon S3 com o App Studio. Para criar um conector, você deve ter a função de administrador. Para obter mais informações, consulte [Conecte-se ao Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Crie um aplicativo vazio
Crie um aplicativo vazio para usar em todo este guia executando as etapas a seguir.
**Para criar um aplicativo vazio**
1. No painel de navegação, escolha **Meus aplicativos.**
1. Escolha **\+ Criar aplicativo**.
1. Na caixa de diálogo **Criar aplicativo**, dê um nome ao seu aplicativo, escolha **Começar do zero** e escolha **Avançar**.
1. Na caixa de diálogo **Conectar aos dados existentes**, escolha **Ignorar** para criar o aplicativo.
1. Escolha **Editar aplicativo** para acessar a tela do seu novo aplicativo, onde você pode usar componentes, automações e dados para configurar a aparência e a função do seu aplicativo.
## Crie páginas
Crie três páginas em seu aplicativo para coletar ou mostrar informações.
**Para criar páginas**
1. Se necessário, escolha a guia **Páginas** na parte superior da tela.
1. Na navegação à esquerda, há uma única página que foi criada com seu aplicativo. Escolha **\+ Adicionar** duas vezes para criar mais duas páginas. O painel de navegação deve mostrar um total de três páginas.
1. Atualize o nome da **página Page1** executando as seguintes etapas:
1. Escolha o ícone de elipses e escolha Propriedades da **página**.
1. No menu **Propriedades** à direita, escolha o ícone de lápis para editar o nome.
1. Digite **FileList** e pressione **Enter**.
1. Repita as etapas anteriores para atualizar a segunda e a terceira páginas da seguinte forma:
+ Renomeie a **página 2 para**. **UploadFile**
+ Renomeie a **página 3 para**. **FailUpload**
Agora, seu aplicativo deve ter três páginas chamadas **FileList**,, e **UploadFile**FailUpload****, que são mostradas no painel **Páginas** à esquerda.
Em seguida, você criará e configurará as automações que interagem com o Amazon S3.
## Crie e configure automações
Crie as automações do seu aplicativo que interagem com o Amazon S3. Use os procedimentos a seguir para criar as seguintes automações:
+ Uma automação **GetFiles** que lista os objetos em seu bucket do Amazon S3, que serão usados para preencher um componente de tabela.
+ Uma automação **DeleteFile** que exclui um objeto do seu bucket do Amazon S3, que será usada para adicionar um botão de exclusão a um componente da tabela.
+ Uma automação **do ViewFile** que obtém um objeto do seu bucket do Amazon S3 e o exibe, que será usada para mostrar mais detalhes sobre um único objeto selecionado de um componente da tabela.
### Crie uma `getFiles` automação
Crie uma automação que listará os arquivos em um bucket específico do Amazon S3.
1. Escolha a guia **Automações** na parte superior da tela.
1. Escolha **\+ Adicionar automação**.
1. No painel direito, escolha **Propriedades**.
1. Atualize o nome da automação escolhendo o ícone de lápis. Digite **getFiles** e pressione **Enter**.
1. Adicione uma ação **Listar objetos** executando as seguintes etapas:
1. No painel direito, escolha **Ações**.
1. Escolha **Listar objetos** para adicionar uma ação. A ação deve ser nomeada`ListObjects1`.
1. Configure a ação executando as seguintes etapas:
1. Escolha a ação na tela para abrir o menu **Propriedades** à direita.
1. Para **Conector**, escolha o conector Amazon S3 que você criou a partir dos pré-requisitos.
1. Em **Configuração**, insira o texto a seguir, {{bucket\_name}} substituindo-o pelo bucket que você criou nos pré-requisitos:
```
{
"Bucket": "{{bucket_name}}",
"Prefix": ""
}
```
**nota**
Você pode usar o `Prefix` campo para limitar a resposta aos objetos que começam com a string especificada.
1. A saída dessa automação será usada para preencher um componente de tabela com objetos do seu bucket do Amazon S3. No entanto, por padrão, as automações não criam saídas. Configure a automação para criar uma saída de automação executando as seguintes etapas:
1. Na navegação à esquerda, escolha a automação **GetFiles**.
1. No menu **Propriedades** à direita, em **Saída de automação**, escolha **\+ Adicionar saída**.
1. Em **Saída**, insira**{{results.ListObjects1.Contents}}**. Essa expressão retorna o conteúdo da ação e agora pode ser usada para preencher um componente da tabela.
### Crie uma `deleteFile` automação
Crie uma automação que exclua um objeto de um bucket específico do Amazon S3.
1. **No painel **Automações** à esquerda, escolha \+ Adicionar.**
1. Escolha **\+ Adicionar automação**.
1. No painel direito, escolha **Propriedades**.
1. Atualize o nome da automação escolhendo o ícone de lápis. Digite **deleteFile** e pressione **Enter**.
1. Adicione um parâmetro de automação, usado para passar dados para uma automação, executando as seguintes etapas:
1. No menu **Propriedades** à direita, em **Parâmetros de automação**, escolha **\+ Adicionar**.
1. Escolha o ícone de lápis para editar o parâmetro de automação. Atualize o nome do parâmetro **fileName** e pressione **Enter**.
1. Adicione uma ação **Excluir objeto** executando as seguintes etapas:
1. No painel direito, escolha **Ações**.
1. Escolha **Excluir objeto** para adicionar uma ação. A ação deve ser nomeada`DeleteObject1`.
1. Configure a ação executando as seguintes etapas:
1. Escolha a ação na tela para abrir o menu **Propriedades** à direita.
1. Para **Conector**, escolha o conector Amazon S3 que você criou a partir dos pré-requisitos.
1. Em **Configuração**, insira o texto a seguir, {{bucket\_name}} substituindo-o pelo bucket que você criou nos pré-requisitos:
```
{
"Bucket": "{{bucket_name}}",
"Key": params.fileName
}
```
### Crie uma `viewFile` automação
Crie uma automação que recupere um único objeto de um bucket específico do Amazon S3. Posteriormente, você configurará essa automação com um componente visualizador de arquivos para exibir o objeto.
1. **No painel **Automações** à esquerda, escolha \+ Adicionar.**
1. Escolha **\+ Adicionar automação**.
1. No painel direito, escolha **Propriedades**.
1. Atualize o nome da automação escolhendo o ícone de lápis. Digite **viewFile** e pressione **Enter**.
1. Adicione um parâmetro de automação, usado para passar dados para uma automação, executando as seguintes etapas:
1. No menu **Propriedades** à direita, em **Parâmetros de automação**, escolha **\+ Adicionar**.
1. Escolha o ícone de lápis para editar o parâmetro de automação. Atualize o nome do parâmetro **fileName** e pressione **Enter**.
1. Adicione uma ação **Obter objeto** executando as seguintes etapas:
1. No painel direito, escolha **Ações**.
1. Escolha **Obter objeto** para adicionar uma ação. A ação deve ser nomeada`GetObject1`.
1. Configure a ação executando as seguintes etapas:
1. Escolha a ação na tela para abrir o menu **Propriedades** à direita.
1. Para **Conector**, escolha o conector Amazon S3 que você criou a partir dos pré-requisitos.
1. Em **Configuração**, insira o texto a seguir, {{bucket\_name}} substituindo-o pelo bucket que você criou nos pré-requisitos:
```
{
"Bucket": "{{bucket_name}}",
"Key": params.fileName
}
```
1. Por padrão, as automações não criam saídas. Configure a automação para criar uma saída de automação executando as seguintes etapas:
1. Na navegação à esquerda, escolha a automação **ViewFile**.
1. No menu **Propriedades** à direita, em **Saída de automação**, escolha **\+ Adicionar saída**.
1. Em **Saída**, insira**{{results.GetObject1.Body.transformToWebStream()}}**. Essa expressão retorna o conteúdo da ação.
**nota**
Você pode ler a resposta `S3 GetObject` de das seguintes formas:
`transformToWebStream`: retorna um fluxo, que deve ser consumido para recuperar os dados. Se usada como uma saída de automação, a automação lida com isso e a saída pode ser usada como fonte de dados de um componente do visualizador de imagens ou PDF. Também pode ser usado como entrada para outra operação, como`S3 PutObject`.
`transformToString`: retorna os dados brutos da automação e deve ser usado em uma JavaScript ação se seus arquivos contiverem conteúdo de texto, como dados JSON. Deve ser aguardado, por exemplo: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: retorna uma matriz de números inteiros não assinados de 8 bits. Essa resposta serve ao propósito de uma matriz de bytes, que permite o armazenamento e a manipulação de dados binários. Deve ser aguardado, por exemplo: `await results.GetObject1.Body.transformToByteArray();`
Em seguida, você adicionará componentes às páginas criadas anteriormente e os configurará com suas automações para que os usuários possam usar seu aplicativo para visualizar e excluir arquivos.
## Adicionar e configurar componentes da página
Agora que você criou as automações que definem a lógica comercial e a funcionalidade do seu aplicativo, você criará componentes e conectará os dois.
### Adicionar componentes à **FileList**página
A **FileList**página que você criou anteriormente será usada para exibir uma lista de arquivos no bucket configurado do Amazon S3 e mais detalhes sobre qualquer arquivo escolhido na lista. Para fazer isso, você fará o seguinte:
1. Crie um componente de tabela para exibir a lista de arquivos. Você configurará as linhas da tabela para serem preenchidas com a saída da automação **GetFiles** que você criou anteriormente.
1. Crie um componente de visualização de PDF para exibir um único PDF. Você configurará o componente para visualizar um arquivo selecionado na tabela, usando a automação **ViewFile** que você criou anteriormente para buscar o arquivo do seu bucket.
**Para adicionar componentes à **FileList**página**
1. Escolha a guia **Páginas** na parte superior da tela.
1. No painel **Páginas** à esquerda, escolha a **FileList**página.
1. Na página **Componentes** à direita, localize o componente **Tabela** e arraste-o para o centro da tela.
1. Escolha o componente de tabela que você acabou de adicionar à página.
1. **No menu **Propriedades** à direita, escolha a lista suspensa **Fonte** e selecione Automação.**
1. Escolha o menu suspenso **Automação** e selecione a automação **GetFiles**. A tabela usará a saída da automação **GetFiles** como seu conteúdo.
1. Adicione uma coluna a ser preenchida com o nome do arquivo.
1. No menu **Propriedades** à direita, ao lado de **Colunas**, escolha **\+ Adicionar**.
1. Escolha o ícone de seta à direita da coluna **Coluna1** que acabou de ser adicionada.
1. Em **Rótulo da coluna**, renomeie a coluna para**Filename**.
1. Em **Valor**, insira **{{currentRow.Key}}**.
1. Escolha o ícone de seta na parte superior do painel para retornar ao painel **Propriedades** principal.
1. Adicione uma ação de tabela para excluir o arquivo em uma linha.
1. No menu **Propriedades** à direita, ao lado de **Ações**, escolha **\+ Adicionar**.
1. Em **Ações**, renomeie **Botão** para**Delete**.
1. Escolha o ícone de seta à direita da ação **Excluir** que acabou de ser renomeada.
1. Em Ao **clicar**, escolha **\+ Adicionar ação** e escolha **Invocar automação**.
1. Escolha a ação que foi adicionada para configurá-la.
1. Em **Nome da ação**, insira **DeleteRecord**.
1. Em **Invoke automation**, selecione**deleteFile**.
1. Na caixa de texto do parâmetro, insira**{{currentRow.Key}}**.
1. Em **Valor**, insira **{{currentRow.Key}}**.
1. No painel direito, escolha **Componentes** para visualizar o menu de componentes. Há duas opções para mostrar arquivos:
+ Um **visualizador de imagens** para visualizar arquivos com uma `.jpg` extensão `.png``.jpeg`, ou.
+ Um componente de **visualização de PDF** para visualizar arquivos PDF.
Neste tutorial, você adicionará e configurará o componente do **visualizador de PDF**.
1. Adicione o componente do **visualizador de PDF**.
1. Na página **Componentes** à direita, localize o componente **visualizador de PDF** e arraste-o até a tela, abaixo do componente da tabela.
1. Escolha o componente do **visualizador de PDF** que acabou de ser adicionado.
1. **No menu **Propriedades** à direita, escolha a lista suspensa **Fonte** e selecione Automação.**
1. Escolha o menu suspenso **Automação** e selecione a automação **ViewFile**. A tabela usará a saída da automação do **ViewFile** como seu conteúdo.
1. Na caixa de texto do parâmetro, insira**{{ui.table1.selectedRow["Filename"]}}**.
1. No painel direito, também há um campo **Nome do arquivo**. O valor desse campo é usado como cabeçalho para o componente do visualizador de PDF. Insira o mesmo texto da etapa anterior:**{{ui.table1.selectedRow["Filename"]}}**.
### Adicionar componentes à **UploadFile**página
A **UploadFile**página conterá um seletor de arquivos que pode ser usado para selecionar e carregar um arquivo no bucket Amazon S3 configurado. Você adicionará o componente de **upload do S3** à página, que os usuários podem usar para selecionar e carregar um arquivo.
1. No painel **Páginas** à esquerda, escolha a **UploadFile**página.
1. Na página **Componentes** à direita, localize o componente de **upload do S3** e arraste-o para o centro da tela.
1. Escolha o componente de upload do S3 que você acabou de adicionar à página.
1. No menu **Propriedades** à direita, configure o componente:
1. No menu suspenso **Conector**, selecione o conector Amazon S3 que foi criado nos pré-requisitos.
1. Em **Bucket**, insira o nome do seu bucket do Amazon S3.
1. Em **Nome do arquivo**, insira **{{ui.s3Upload1.files[0]?.nameWithExtension}}**.
1. Em **Tamanho máximo do arquivo**, insira **5** na caixa de texto e verifique se ela **MB** está selecionada na lista suspensa.
1. Na seção **Acionadores**, adicione ações que são executadas após carregamentos bem-sucedidos ou malsucedidos executando as seguintes etapas:
Para adicionar uma ação que é executada após carregamentos bem-sucedidos:
1. **Em caso de sucesso**, escolha **\+ Adicionar ação** e selecione **Navegar**.
1. Escolha a ação que foi adicionada para configurá-la.
1. Em **Tipo de navegação**, escolha **Página**.
1. Em **Navegar até**, escolha**FileList**.
1. Escolha o ícone de seta na parte superior do painel para retornar ao painel **Propriedades** principal.
Para adicionar uma ação que é executada após carregamentos malsucedidos:
1. **Em caso de falha**, escolha **\+ Adicionar ação** e selecione **Navegar**.
1. Escolha a ação que foi adicionada para configurá-la.
1. Em **Tipo de navegação**, escolha **Página**.
1. Em **Navegar até**, escolha**FailUpload**.
1. Escolha o ícone de seta na parte superior do painel para retornar ao painel **Propriedades** principal.
### Adicionar componentes à **FailUpload**página
A **FailUpload**página é uma página simples que contém uma caixa de texto que informa aos usuários que o upload falhou.
1. No painel **Páginas** à esquerda, escolha a **FailUpload**página.
1. Na página **Componentes** à direita, localize o componente **Texto** e arraste-o para o centro da tela.
1. Escolha o componente de texto que você acabou de adicionar à página.
1. No menu **Propriedades** à direita, em **Valor**, insira**Failed to upload, try again**.
## Atualize as configurações de segurança do seu aplicativo
Cada aplicativo no App Studio tem configurações de segurança de conteúdo que você pode usar para restringir mídias ou recursos externos, ou para quais domínios no Amazon S3 você pode carregar objetos. A configuração padrão é bloquear todos os domínios. Para fazer upload de objetos do seu aplicativo para o Amazon S3, você deve atualizar a configuração para permitir os domínios para os quais deseja fazer upload de objetos.
**Para permitir que domínios façam upload de objetos para o Amazon S3**
1. Escolha a guia **Configurações do aplicativo**.
1. Escolha a guia **Configurações de segurança de conteúdo**.
1. Em **Connect source**, escolha **Permitir todas as conexões**.
1. Escolha **Salvar**.
## Próximas etapas: visualize e publique o aplicativo para teste
O aplicativo agora está pronto para testes. Para obter mais informações sobre a visualização e publicação de aplicativos, consulte[Visualizando, publicando e compartilhando aplicativos](applications-preview-publish-share.md).