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á.
# Tutoriais
**Topics**
+ [Crie um aplicativo de resumo de texto com IA com o Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interagindo com o Amazon Simple Storage Service com componentes e automações](automations-s3.md)
+ [Invocando funções Lambda em um aplicativo do App Studio](tutorial-lambda.md)
# Crie um aplicativo de resumo de texto com IA com o Amazon Bedrock
Neste tutorial, você criará um aplicativo no App Studio que usa o Amazon Bedrock para fornecer resumos concisos da entrada de texto dos usuários finais. O aplicativo contém uma interface de usuário simples, na qual os usuários podem inserir qualquer texto que desejarem resumido. Podem ser notas de reuniões, conteúdo do artigo, resultados de pesquisas ou qualquer outra informação textual. Depois que os usuários inserem o texto, eles podem pressionar um botão para enviar o texto para o Amazon Bedrock, que o processará usando o modelo Claude 3 Sonnet e retornará uma versão resumida.
**Contents**
+ [Pré-requisitos](#tutorial-conversational-bedrock-prerequisites)
+ [Etapa 1: criar e configurar uma função do IAM e um conector do App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Etapa 2: criar um aplicativo](#tutorial-conversational-bedrock-steps-create-application)
+ [Etapa 3: criar e configurar uma automação](#tutorial-conversational-bedrock-steps-create-automation)
+ [Etapa 4: criar páginas e componentes](#tutorial-conversational-bedrock-steps-user-interface)
+ [Renomear a página padrão](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Adicionar componentes à página](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configurar os componentes da página](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Etapa 5: publicar o aplicativo no ambiente **de teste**](#tutorial-conversational-bedrock-steps-publish)
+ [Limpar (opcional)](#tutorial-conversational-bedrock-steps-cleanup)
## Pré-requisitos
Antes de começar, analise e preencha os seguintes pré-requisitos:
+ Acesso ao AWS App Studio. Observe que você deve ter a função de administrador para criar um conector neste tutorial.
+ Opcional: revise [AWS Conceitos do App Studio](concepts.md) e [Tutorial: Comece a criar a partir de um aplicativo vazio](getting-started-tutorial-empty.md) se familiarize com conceitos importantes do App Studio.
## Etapa 1: criar e configurar uma função do IAM e um conector do App Studio
Para fornecer acesso ao App Studio aos modelos do Amazon Bedrock, você deve:
1. Ative os modelos do Amazon Bedrock que você deseja usar em seu aplicativo. Neste tutorial, você usará o **Claude 3 Sonnet**, portanto, certifique-se de habilitar esse modelo.
1. Crie uma função do IAM com as permissões apropriadas para o Amazon Bedrock.
1. Crie um conector do App Studio com a função IAM que será usada no seu aplicativo.
Acesse [Conecte-se ao Amazon Bedrock](connectors-bedrock.md) para obter instruções detalhadas e retorne a este tutorial depois de seguir as etapas e criar o conector.
## Etapa 2: criar um aplicativo
Use o procedimento a seguir para criar um aplicativo vazio no App Studio que você incorporará ao aplicativo de resumo de texto.
1. Faça login no App Studio.
1. Navegue até o hub do construtor e escolha **\$1 Criar aplicativo**.
1. Escolha **Começar do zero**.
1. No campo **Nome do aplicativo**, forneça um nome para seu aplicativo, como**Text Summarizer**.
1. Se você precisar selecionar fontes de dados ou um conector, escolha **Ignorar** para os fins deste tutorial.
1. Escolha **Próximo** para continuar.
1. (Opcional): assista ao tutorial em vídeo para ter uma visão geral rápida da criação de aplicativos no App Studio.
1. Escolha **Editar aplicativo**, que o levará ao estúdio de aplicativos.
## Etapa 3: criar e configurar uma automação
Você define a lógica e o comportamento de um aplicativo do App Studio nas *automações.* As automações consistem em etapas individuais conhecidas como *ações*, *parâmetros* usados para transmitir dados de outros recursos para a ação e uma *saída* que pode ser usada por outras automações ou componentes. Nesta etapa, você criará uma automação que gerencia a interação com o Amazon Bedrock com o seguinte:
+ Entradas: um parâmetro para passar a entrada de texto do usuário para a automação.
+ Ações: Uma ação **GenAI Prompt** que envia a entrada de texto para o Amazon Bedrock e retorna o resumo do texto de saída.
+ Saídas: uma saída de automação que consiste no resumo processado do Amazon Bedrock, que pode ser usado em seu aplicativo.
**Para criar e configurar uma automação que envia uma solicitação ao Amazon Bedrock e processa e retorna um resumo**
1. Escolha a guia **Automações** na parte superior da tela.
1. Escolha **\$1 Adicionar automação**.
1. No painel direito, escolha **Propriedades**.
1. Atualize o nome da automação escolhendo o ícone de lápis. Digite **InvokeBedrock** e pressione **Enter**.
1. Adicione um parâmetro à automação que será usado para passar a entrada do prompt de texto do usuário para a automação a ser usada na solicitação para o Amazon Bedrock executando as seguintes etapas:
1. Na tela, na caixa de parâmetros, escolha **\$1 Adicionar**.
1. Em **Nome**, insira **input**.
1. Em **Descrição**, insira qualquer descrição, como**Text to be sent to Amazon Bedrock**.
1. Em **Tipo**, selecione **Cadeia de caracteres**.
1. Escolha **Adicionar** para criar o parâmetro.
1. Adicione uma ação **GenAI Prompt** executando as seguintes etapas:
1. No painel direito, escolha **Ações**.
1. Escolha **GenAI Prompt** para adicionar uma ação.
1. Configure a ação executando as seguintes etapas:
1. Escolha a ação na tela para abrir o menu **Propriedades** à direita.
1. Renomeie a ação para **PromptBedrock** escolhendo o ícone de lápis, inserindo o nome e pressionando enter.
1. Em **Conector**, selecione o conector que foi criado em[Etapa 1: criar e configurar uma função do IAM e um conector do App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Em **Modelo**, escolha o modelo Amazon Bedrock que você deseja usar para processar a solicitação. Neste tutorial, você escolherá **Claude 3.5 Sonnet**.
1. Em **Solicitação do usuário**, insira`{{params.input}}`. Isso representa o `input` parâmetro que você criou anteriormente e conterá a entrada de texto dos usuários do seu aplicativo.
1. No **prompt do sistema**, insira as instruções do prompt do sistema que você deseja enviar para o Amazon Bedrock. Para este tutorial, insira o seguinte:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Escolha **Configurações de solicitação** para expandi-la e atualize os seguintes campos:
+ Em **Temperatura**, insira`0`. A temperatura determina a aleatoriedade ou criatividade da saída em uma escala de 0 a 10. Quanto maior o número, mais criativa é a resposta.
+ Em **Max Tokens**, insira `4096` para limitar a duração da resposta.
1. A saída dessa automação será o texto resumido, 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 **InvokeBedrock**automação.
1. No menu **Propriedades** à direita, em **Saída**, escolha **\$1 Adicionar**.
1. Em **Saída**, insira**\$1\$1results.PromptBedrock.text\$1\$1**. Essa expressão retorna o conteúdo da `processResults` ação.
## Etapa 4: criar páginas e componentes
No App Studio, cada página representa uma tela da interface de usuário (UI) do seu aplicativo com a qual seus usuários interagirão. Nessas páginas, você pode adicionar vários componentes, como tabelas, formulários, botões e muito mais, para criar o layout e a funcionalidade desejados.
### Renomear a página padrão
O aplicativo de resumo de texto deste tutorial conterá apenas uma página. Os aplicativos recém-criados vêm com uma página padrão, então você renomeará essa em vez de adicionar uma.
**Para renomear a página padrão**
1. No menu de navegação da barra superior, escolha **Páginas**.
1. No painel do lado esquerdo, escolha **Página1** e escolha o painel **Propriedades** no painel do lado direito.
1. Escolha o ícone do lápis**TextSummarizationTool**, insira e pressione **Enter**.
1. Em **Rótulo de navegação**, insira**TextSummarizationTool**.
### Adicionar componentes à página
Para este tutorial, o aplicativo de resumo de texto tem uma página que contém os seguintes componentes:
+ Um componente **de entrada de texto** que os usuários finais usam para inserir uma solicitação a ser resumida.
+ Um componente **Button** usado para enviar a solicitação para o Amazon Bedrock.
+ Um componente **da área de texto** que exibe o resumo do Amazon Bedrock.
Adicione um componente **de entrada de texto** à página que os usuários usarão para inserir uma solicitação de texto a ser resumida.
**Para adicionar um componente de entrada de texto**
1. No painel **Componentes** à direita, localize o componente **de entrada de texto** e arraste-o para a tela.
1. Escolha a entrada de texto na tela para selecioná-la.
1. No painel **Propriedades** do lado direito, atualize as seguintes configurações:
1. Escolha o ícone de lápis para o qual renomear a entrada de texto. **inputPrompt**
1. Em **Rótulo**, insira**Prompt**.
1. Em **Espaço reservado**, insira**Enter text to be summarized**.
Agora, adicione um componente **Button** que os usuários escolherão para enviar a solicitação para o Amazon Bedrock.
**Para adicionar um componente de botão**
1. No painel **Componentes** à direita, localize o componente **Botão** e arraste-o para a tela.
1. Escolha o botão na tela para selecioná-lo.
1. No painel **Propriedades** do lado direito, atualize as seguintes configurações:
1. Escolha o ícone de lápis para o qual renomear **sendButton** o botão.
1. Em **Rótulo do botão**, insira**Send**.
Agora, adicione um componente de **área de texto** que exibirá o resumo retornado pelo Amazon Bedrock.
**Para adicionar um componente de área de texto**
1. No painel **Componentes** à direita, localize o componente **Área de texto** e arraste-o para a tela.
1. Escolha a área de texto na tela para selecioná-la.
1. No painel **Propriedades** do lado direito, atualize as seguintes configurações:
1. Escolha o ícone de lápis para o qual renomear **textSummary** o botão.
1. Em **Rótulo**, insira**Summary**.
### Configurar os componentes da página
Agora que o aplicativo contém uma página com componentes, a próxima etapa é configurar os componentes para realizar o comportamento adequado. Para configurar um componente, como um botão, para realizar ações ao interagir com ele, você deve adicionar um *gatilho* a ele. Para o aplicativo deste tutorial, você adicionará dois gatilhos ao `sendButton` botão para fazer o seguinte:
+ O primeiro gatilho envia o texto no `textPrompt` componente para o Amazon Bedrock para ser analisado.
+ O segundo gatilho exibe o resumo retornado do Amazon Bedrock no `textSummary` componente.
**Para adicionar um gatilho que envia a solicitação para o Amazon Bedrock**
1. Escolha o botão na tela para selecioná-lo.
1. **No painel **Propriedades** do lado direito, na seção **Acionadores**, escolha \$1 Adicionar.**
1. Escolha **Invoke Automation**.
1. Escolha o **InvokeAutomation1** gatilho que foi criado para configurá-lo.
1. Em **Nome da ação**, insira**invokeBedrockAutomation**.
1. Em **Invoke Automation**, selecione a **InvokeBedrock**automação que foi criada anteriormente.
1. Na caixa de parâmetros, no parâmetro **de entrada** criado anteriormente, insira**\$1\$1ui.inputPrompt.value\$1\$1**, que passa o conteúdo no componente de entrada de `inputPrompt` texto.
1. Escolha a seta para a esquerda na parte superior do painel para retornar ao menu de propriedades do componente.
Agora que você configurou um gatilho que invoca a automação para enviar uma solicitação ao Amazon Bedrock quando o botão é clicado. A próxima etapa é configurar um segundo gatilho que exibe os resultados no componente. `textSummary`
**Para adicionar um gatilho que exibe os resultados do Amazon Bedrock no componente da área de texto**
1. **No painel **Propriedades** do lado direito do botão, na seção **Acionadores**, escolha \$1 Adicionar.**
1. Escolha **Executar ação do componente**.
1. Escolha o gatilho **Runcomponentaction1** que foi criado para configurá-lo.
1. Em **Nome da ação**, insira**setTextSummary**.
1. Em **Componente**, selecione o componente **TextSummary**.
1. Em **Ação**, selecione **Definir valor**.
1. Em **Definir valor como**, insira**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Etapa 5: publicar o aplicativo no ambiente **de teste**
Normalmente, enquanto você está criando um aplicativo, é uma boa prática visualizá-lo para ver sua aparência e fazer os testes iniciais de sua funcionalidade. No entanto, como os aplicativos não interagem com serviços externos no ambiente de pré-visualização, você publicará o aplicativo no ambiente de teste para poder testar o envio de solicitações e o recebimento de respostas do Amazon Bedrock.
**Para publicar seu aplicativo no ambiente de teste**
1. No canto superior direito do criador de aplicativos, escolha **Publicar**.
1. Adicione uma descrição da versão para o ambiente de teste.
1. Revise e marque a caixa de seleção referente ao SLA.
1. Escolha **Iniciar**. A publicação pode levar até 15 minutos.
1. (Opcional) Quando estiver pronto, você pode dar acesso a outras pessoas escolhendo **Compartilhar** e seguindo as instruções. Para obter mais informações sobre o compartilhamento de aplicativos do App Studio, consulte[Compartilhamento de aplicativos publicados](application-share.md).
Depois de testar seu aplicativo, escolha **Publicar** novamente para promover o aplicativo para o ambiente de produção. Observe que os aplicativos no ambiente de produção não estão disponíveis para os usuários finais até que sejam compartilhados. Para obter mais informações sobre os diferentes ambientes de aplicativos, consulte[Ambientes de aplicativos](applications-publish.md#application-environments).
## Limpar (opcional)
Agora você concluiu com sucesso o tutorial e criou um aplicativo de resumo de texto no App Studio com o Amazon Bedrock. Você pode continuar usando seu aplicativo ou limpar os recursos que foram criados neste tutorial. A lista a seguir contém uma lista de recursos a serem limpos:
+ O conector Amazon Bedrock criado no App Studio. Para obter mais informações, consulte [Visualizando, editando e excluindo conectores](viewing-deleting-connectors.md).
+ O aplicativo de resumo de texto no App Studio. Para obter mais informações, consulte [Como excluir uma aplicação](applications-delete.md).
+ A função do IAM criada no console do IAM. Para obter mais informações, consulte [Excluir funções ou perfis de instância](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) no *Guia AWS Identity and Access Management do usuário*.
+ Se você solicitou acesso ao modelo para usar o Claude 3 Sonnet e quiser reverter o acesso, consulte [Gerenciar o acesso aos modelos da Amazon Bedrock Foundation no](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) Guia do usuário do *Amazon* Bedrock.
# 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 **\$1 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 **\$1 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 **\$1 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\$1name* 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 **\$1 Adicionar saída**.
1. Em **Saída**, insira**\$1\$1results.ListObjects1.Contents\$1\$1**. 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 \$1 Adicionar.**
1. Escolha **\$1 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 **\$1 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\$1name* 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 \$1 Adicionar.**
1. Escolha **\$1 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 **\$1 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\$1name* 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 **\$1 Adicionar saída**.
1. Em **Saída**, insira**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. 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 **\$1 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 **\$1\$1currentRow.Key\$1\$1**.
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 **\$1 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 **\$1 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**\$1\$1currentRow.Key\$1\$1**.
1. Em **Valor**, insira **\$1\$1currentRow.Key\$1\$1**.
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**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
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:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### 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 **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
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 **\$1 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 **\$1 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).
# Invocando funções Lambda em um aplicativo do App Studio
Este tutorial mostra como conectar o App Studio ao Lambda e invocar funções do Lambda a partir dos seus aplicativos.
## Pré-requisitos
Este guia pressupõe que você tenha preenchido os seguintes pré-requisitos:
1. Criou um aplicativo do App Studio. Se você não tiver um, poderá criar um aplicativo vazio para usar no tutorial. Para obter mais informações, consulte [Como criar uma aplicação do](applications-create.md).
**nota**
Embora você não precise de uma função Lambda para seguir este tutorial e aprender como configurá-la, pode ser útil ter uma para garantir que você tenha configurado corretamente o aplicativo. [Este tutorial não contém informações sobre a criação de funções Lambda. Para obter mais informações, consulte o Guia do AWS Lambda desenvolvedor.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Crie um conector Lambda
Para usar as funções do Lambda em seu aplicativo do App Studio, você deve usar um conector para conectar o App Studio ao Lambda para fornecer acesso às suas funções. Você precisa ser administrador para criar conectores no App Studio. Para obter mais informações sobre a criação de conectores Lambda, incluindo as etapas para criar um, consulte. [Conecte-se a AWS Lambda](connectors-lambda.md)
## Crie e configure uma automação
As automações são usadas para definir a lógica do seu aplicativo e são compostas por ações. Para invocar uma função Lambda em seu aplicativo, primeiro você adiciona e configura uma *ação Invoke Lambda* em uma automação. Use as etapas a seguir para criar uma automação e adicionar a ação *Invoke Lambda* a ela.
1. Ao editar seu aplicativo, escolha a guia **Automações**.
1. Escolha **\$1 Adicionar automação**.
1. No menu **Ações** à direita, escolha **Invoke Lambda** para adicionar a etapa à sua automação.
1. Escolha a nova etapa do Lambda na tela para visualizar e configurar suas propriedades.
1. No menu **Propriedades** à direita, configure a etapa executando as seguintes etapas:
1. Em **Conector**, selecione o conector que foi criado para conectar o App Studio às suas funções do Lambda.
1. Em **Nome da função**, insira o nome da sua função Lambda.
1. Em **Evento de função**, insira o evento a ser passado para a função Lambda. Alguns exemplos de casos de uso comuns são fornecidos na lista a seguir:
+ Transmitir o valor de um parâmetro de automação, como um nome de arquivo ou outra string: `varName: params.paramName`
+ Transmitindo o resultado de uma ação anterior: `varName: results.actionName1.data[0].fieldName`
+ Se você adicionar uma ação *Invoke Lambda* dentro de *uma* ação Loop, poderá enviar campos de cada item iterado de forma semelhante aos parâmetros: `varName: currentItem.fieldName`
1. O campo **de saída simulada** pode ser usado para fornecer uma saída simulada para testar o aplicativo durante a visualização, quando os conectores não estão ativos.
## Configurar um elemento de interface do usuário para executar a automação
Agora que você tem uma automação configurada com uma ação para invocar sua função Lambda, você pode configurar um elemento de interface do usuário para executar a automação. Neste tutorial, você criará um botão que executa a automação quando clicado.
**dica**
Você também pode executar automações de outras automações com a ação de automação *Invoke*.
**Para executar sua automação a partir de um botão**
1. Ao editar seu aplicativo, escolha a guia **Páginas**.
1. No menu à direita, escolha o componente **Botão** para adicionar um botão à página.
1. Escolha o novo botão para configurá-lo.
1. **No menu **Propriedades** à direita, em **Acionadores**, escolha **\$1 Adicionar e escolha Invocar** automação.**
1. Escolha o novo gatilho de invocação de automação para configurá-lo.
1. Em **Invoke automation**, selecione a automação que invoca sua função Lambda e configure todos os parâmetros que você deseja enviar para a automação.
Agora, qualquer usuário que escolher esse botão no seu aplicativo fará com que a automação configurada seja executada.
## Próximas etapas: visualize e publique o aplicativo para teste
Seu aplicativo agora está pronto para ser testado. Ao visualizar seu aplicativo no ambiente de desenvolvimento, os conectores não estão ativos, então você não pode testar a automação durante a visualização, pois ela usa um conector para se conectar. AWS Lambda Para testar a funcionalidade do seu aplicativo que depende de conectores, você deve publicar o aplicativo no ambiente de teste. 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).