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á.
# Documentação do Builder
Os tópicos a seguir contêm informações para ajudar os usuários do App Studio que estão criando, editando e publicando aplicativos.
**Topics**
+ [Tutoriais](tutorials.md)
+ [Criando seu aplicativo App Studio com IA generativa](generative-ai.md)
+ [Criando, editando e excluindo aplicativos](applications-create-edit-delete.md)
+ [Visualizando, publicando e compartilhando aplicativos](applications-preview-publish-share.md)
+ [Páginas e componentes: crie a interface de usuário do seu aplicativo](pages-components-ux.md)
+ [Automações e ações: defina a lógica de negócios do seu aplicativo](automations.md)
+ [Entidades e ações de dados: configure o modelo de dados do seu aplicativo](data.md)
+ [Parâmetros de página e automação](paramters.md)
+ [Usando JavaScript para escrever expressões no App Studio](expressions.md)
+ [Dependências de dados e considerações de tempo](data-dependencies-timing-considerations.md)
+ [Criando um aplicativo com vários usuários](builder-collaboration.md)
+ [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md)
# 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).
# Criando seu aplicativo App Studio com IA generativa
AWS O App Studio fornece recursos integrados de IA generativa para acelerar o desenvolvimento e simplificar tarefas comuns. Você pode aproveitar a IA generativa para gerar e editar aplicativos, modelos de dados, dados de amostra e até mesmo obter ajuda contextual ao criar aplicativos.
## Gerando seu aplicativo
Para um início acelerado, você pode gerar aplicativos inteiros usando instruções de linguagem natural com tecnologia de IA. Esse recurso permite que você descreva a funcionalidade desejada do aplicativo, e a IA criará automaticamente os modelos de dados, interfaces de usuário, fluxos de trabalho e conectores. Para obter mais informações sobre como gerar um aplicativo com IA, consulte[Como criar uma aplicação do](applications-create.md).
## Criando ou editando seu aplicativo
Ao editar seu aplicativo, você pode usar o bate-papo para descrever as alterações que deseja fazer e seu aplicativo é atualizado automaticamente. Você pode escolher entre os exemplos de solicitações existentes ou inserir seu próprio prompt. O chat pode ser usado para adicionar, editar e remover componentes compatíveis, além de criar e configurar automações e ações. Use o procedimento a seguir para usar a IA para editar ou criar seu aplicativo.
**Para editar seu aplicativo com IA**
1. Se necessário, edite seu aplicativo para navegar até o estúdio de aplicativos.
1. (Opcional) Selecione a página ou o componente que você deseja editar com a IA.
1. Escolha **Criar com IA** no canto inferior esquerdo para abrir o bate-papo.
1. Insira as alterações que você deseja fazer ou escolha entre os exemplos de solicitações.
1. Analise as alterações a serem feitas. Se você quiser que as alterações sejam feitas, escolha **Confirmar**. Caso contrário, insira outro prompt.
1. Analise o resumo das mudanças.
## Gerando seus modelos de dados
Você pode gerar automaticamente uma entidade com campos, tipos de dados e ações de dados com base no nome da entidade fornecido. Para obter mais informações sobre a criação de entidades, incluindo a criação de entidades usando GenAi, consulte[Criação de uma entidade em um aplicativo do App Studio](data-entities-create.md).
Você também pode atualizar uma entidade existente das seguintes formas:
+ Adicione mais campos a uma entidade. Para obter mais informações, consulte [Adicionar, editar ou excluir campos de entidade](data-entities-edit-fields.md).
+ Adicione ações de dados a uma entidade. Para obter mais informações, consulte [Criação de ações de dados](data-entities-edit-data-actions.md#data-entities-data-action-add).
## Gerando dados de amostra
Você pode gerar dados de amostra para suas entidades com base nos campos da entidade. Isso é útil para testar seu aplicativo antes de conectar fontes de dados externas ou testar seu aplicativo no ambiente de desenvolvimento, que não se comunica com fontes de dados externas. Para obter mais informações, consulte [Adicionar ou excluir dados de amostra](data-entities-edit-sample-data.md).
Depois de publicar seu aplicativo para teste ou produção, suas fontes de dados e conectores ativos são usados nesses ambientes.
## Configurando ações para serviços AWS
Ao fazer a integração com AWS serviços como o Amazon Simple Email Service, você pode usar a IA para gerar um exemplo de configuração com campos pré-preenchidos com base no serviço selecionado. Para experimentar, no menu **Propriedades** de uma ação de automação do **Invoke AWS**, expanda o campo **Configuração** escolhendo a seta dupla face. Em seguida, escolha **Gerar configuração de amostra**.
## Respostas zombeteiras
Você pode gerar respostas simuladas para ações AWS de serviço. Isso é útil para testar seu aplicativo no ambiente de desenvolvimento, que não se comunica com fontes de dados externas.
## Pedindo ajuda à IA durante a construção
No estúdio de aplicativos, você encontrará um botão **Peça ajuda à IA** nos recursos ou propriedades compatíveis. Use isso para obter sugestões contextuais, documentação e orientação relacionadas à exibição atual ou ao componente selecionado. Faça perguntas gerais sobre o App Studio, as melhores práticas de criação de aplicativos ou seu caso de uso específico do aplicativo para receber informações e recomendações personalizadas.
# Criando, editando e excluindo aplicativos
**Contents**
+ [Como criar uma aplicação do](applications-create.md)
+ [Importação de aplicativos](applications-import.md)
+ [Aplicativos importáveis fornecidos pelo App Studio](applications-import.md#app-catalog)
+ [Duplicando aplicativos](applications-duplicate.md)
+ [Editando ou criando um aplicativo](applications-edit.md)
+ [Editar uma versão do aplicativo publicada anteriormente](applications-edit-previously-published-version.md)
+ [Renomeando um aplicativo](applications-rename.md)
+ [Como excluir uma aplicação](applications-delete.md)
# Como criar uma aplicação do
Use o procedimento a seguir para criar um aplicativo no App Studio.
**Como criar uma aplicação do**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir** para navegar até uma lista dos seus aplicativos.
1. Escolha **\$1 Criar aplicativo**.
1. Na caixa de diálogo **Criar aplicativo**, dê um nome ao seu aplicativo e escolha um dos seguintes métodos de criação de aplicativos:
+ **Gere um aplicativo com IA**: escolha essa opção para descrever seu aplicativo com linguagem natural e fazer com que a IA gere o aplicativo e seus recursos para você.
+ **Comece do zero**: escolha essa opção para começar a criar a partir de um aplicativo vazio.
1. Escolha **Próximo**.
1. Se você escolheu **Gerar um aplicativo com IA**:
1. **Na caixa de diálogo **Conectar aos dados existentes**, adicione todas as fontes de dados existentes ao seu aplicativo selecionando o **Conector** que fornece acesso ao App Studio às fontes de dados, depois selecione a **Tabela e escolha Avançar**.** Adicionar fontes de dados aqui ajuda a IA a gerar um aplicativo otimizado para você. Você pode pular essa etapa e adicionar fontes de dados posteriormente escolhendo **Ignorar**.
1. Após um breve atraso (alguns minutos), você será direcionado para a página **Gerar seu aplicativo usando IA**, onde poderá descrever o aplicativo que deseja criar.
1. Você pode começar a descrever seu aplicativo no chat ou escolher e personalizar um exemplo de prompt fornecido.
1. Depois que sua solicitação for analisada, revise os requisitos e a visão geral do aplicativo. Use o chat para solicitar alterações ou escolha Recomeçar para **começar** a partir de um prompt vazio.
1. Quando estiver pronto, escolha **Gerar aplicativo**.
1. Depois de gerado, visualize seu aplicativo em outra guia escolhendo **Visualizar aplicativo**. Quando estiver pronto para começar a editar, você pode escolher **Editar aplicativo**. Navegue pelas páginas, automações e dados do seu aplicativo para se familiarizar com ele. Revise quaisquer erros ou avisos no painel de depuração inferior. Para saber mais sobre como gerar um aplicativo usando IA, consulte[Tutorial: Gere um aplicativo usando IA](getting-started-tutorial-ai.md). Para obter informações gerais sobre como a criação no App Studio funciona, consulte[Como AWS o App Studio funciona](how-it-works.md).
1. Se você escolheu **Começar do zero**:
1. **Na caixa de diálogo **Conectar aos dados existentes**, adicione todas as fontes de dados existentes ao seu aplicativo selecionando o **Conector** que fornece acesso ao App Studio às fontes de dados, depois selecione a **Tabela e escolha Avançar**.** Você pode pular essa etapa e adicionar fontes de dados posteriormente escolhendo **Ignorar**.
1. Depois que seu aplicativo for criado, escolha **Editar aplicativo** para começar a editar seu aplicativo. Para saber mais sobre como criar a partir de um aplicativo vazio, consulte[Tutorial: Comece a criar a partir de um aplicativo vazio](getting-started-tutorial-empty.md). Para obter informações gerais sobre como a criação no App Studio funciona, consulte[Como AWS o App Studio funciona](how-it-works.md).
# Importação de aplicativos
Você pode importar uma cópia de um aplicativo exportado para sua instância do App Studio. Você pode importar aplicativos que foram exportados de outras instâncias do App Studio ou aplicativos de um catálogo fornecido pelo App Studio. Importar um aplicativo do catálogo de aplicativos do App Studio pode ajudá-lo a começar a usar um aplicativo com funcionalidade semelhante ou ajudá-lo a aprender sobre a criação de aplicativos no App Studio explorando o aplicativo importado.
Quando você importa um aplicativo para sua instância, uma cópia do aplicativo original é criada na sua instância. Depois que o novo aplicativo for criado, você será direcionado para o ambiente de desenvolvimento do aplicativo, onde poderá visualizá-lo e navegar pela funcionalidade do aplicativo.
**Atenção**
Ao importar um aplicativo, você está importando toda a lógica do aplicativo, o que pode resultar em um comportamento indesejado ou inesperado. Por exemplo, pode haver consultas destrutivas que excluem dados dos bancos de dados que você conecta ao aplicativo. Recomendamos analisar minuciosamente o aplicativo e sua configuração e testá-lo em ativos que não sejam de produção antes de conectar os dados de produção a ele.
**Para importar um aplicativo**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir** para navegar até uma lista dos seus aplicativos.
1. Escolha a seta suspensa ao lado de **\$1 Criar aplicativo**.
1. Escolha **Importar aplicativo**.
1. Na caixa de diálogo **Importar aplicativo**, em **Importar código**, insira o código de importação do aplicativo que você deseja importar. Para ver uma lista de aplicativos fornecidos pelo App Studio que podem ser importados, incluindo descrições e códigos de importação, consulte[Aplicativos importáveis fornecidos pelo App Studio](#app-catalog).
1. Escolha **Importar** para importar o aplicativo e vá para o ambiente de desenvolvimento do aplicativo importado para visualizá-lo ou editá-lo. Para obter informações sobre criação de aplicativos no App Studio, consulte [Como AWS o App Studio funciona](how-it-works.md)
## Aplicativos importáveis fornecidos pelo App Studio
O App Studio fornece aplicativos que podem ser importados para sua instância para ajudar você a aprender sobre a criação de aplicativos. Para ver como uma funcionalidade específica do aplicativo é implementada no App Studio, você pode visualizar os aplicativos e, em seguida, procurar suas configurações no ambiente de desenvolvimento.
A tabela a seguir contém a lista de aplicativos, seus códigos de importação e uma breve descrição dos aplicativos. Cada aplicativo inclui uma `README` página que contém informações sobre o aplicativo que você pode ver depois de importá-lo.
| Nome do aplicativo | Description | Código de importação |
| --- | --- | --- |
| **Pesquisa de solicitação de brindes** | Um aplicativo interno de solicitação de brindes desenvolvido para que os funcionários solicitem mercadorias da marca da empresa. Os funcionários podem selecionar itens, especificar tamanhos e enviar sua solicitação por meio de um formulário simples. Este aplicativo manipula todos os dados por meio de armazenamento embutido, eliminando a necessidade de conexões externas. | Pesquisa de solicitação de compras/EC4F5FAF-E2F8-42EE-AB8D-6723D8CA21B2 |
| **Rastreamento de Sprint** | Um aplicativo de gerenciamento de sprint que as equipes podem usar para organizar e acompanhar o trabalho de desenvolvimento de software. Os usuários podem criar sprints, adicionar tarefas, atribuir trabalhos e monitorar o progresso por meio de visualizações dedicadas de sprint, trilha e tarefas. Este aplicativo manipula todos os dados por meio de armazenamento embutido, eliminando a necessidade de conexões externas. | Rastreamento de velocidade/8F31E160-771F-48D7-87B0-374E285E2FBC |
| **Amazon Review Sentiment Tracker** | Esse aplicativo é uma ferramenta de análise de feedback de clientes que gera pontuações de opinião a partir de avaliações de produtos para ajudar as empresas a entender a satisfação do cliente. O aplicativo inclui exemplos de utilitários de geração de dados para testes rápidos e requer um conector Amazon Bedrock para insights baseados em IA, mantendo todos os outros dados dentro do sistema de armazenamento integrado. | Amazon Review Sentiment Tracker/60f0dae4-f8e2-4c20-9583-fa456f5ebfab |
| **Processamento de faturas e recibos** | Esse aplicativo de processamento de recibos economiza tempo e reduz erros automatizando a entrada manual de dados e simplificando os fluxos de trabalho de aprovação de documentos. A solução requer conectores Amazon Textract, Amazon S3 e Amazon SES. Ele usa um Amazon Textract para analisar e extrair dados de recibos armazenados no Amazon S3 e, em seguida, processa e envia por e-mail as informações extraídas aos aprovadores usando o Amazon SES. | Processamento de faturas e recibos/98BDE3AE-E454-4B18-A1E6-6F23E8B2A4F1 |
| **Inspeção e auditoria de inventário** | Um aplicativo para gerenciar inspeções de armazéns e rastreamento de equipamentos. Os usuários podem realizar avaliações pass/fail de equipamentos por localização da sala, monitorar os níveis de inventário e visualizar o histórico de inspeções. O aplicativo fornece um sistema centralizado para rastrear as inspeções das instalações e o status do equipamento. Este aplicativo manipula todos os dados por meio de armazenamento embutido, eliminando a necessidade de conexões externas. | Inspeção e auditoria de inventário/CF570A06-1C5e-4DD7-9ea8-5C04723d687f |
| **Rastreador de adoção de produtos** | Um aplicativo abrangente para gerenciar o desenvolvimento de produtos que centraliza o feedback do cliente, as solicitações de recursos e as notas das reuniões do cliente. As equipes podem monitorar as interações com os clientes, organizar os requisitos e gerar relatórios baseados em IA para o planejamento trimestral do roteiro. O aplicativo inclui exemplos de utilitários de dados e utiliza o Amazon Bedrock para insights de IA e o Amazon Aurora PostgreSQL para gerenciamento de dados. | Rastreador de adoção de produtos/9B3A4437-BB50-467F-AE9E-D108776B7CA1 |
| **Incorporação rápida** | Um aplicativo de demonstração que permite que os usuários visualizem análises enquanto trabalham com os dados subjacentes. O aplicativo contém dois métodos para incorporar painéis do Amazon Quick no App Studio: uma abordagem baseada em API para usuários registrados e anônimos (exigindo o conector Quick) e uma integração com iFrame para painéis públicos. | Incorporação Quicksight /0CDC15FC-CA8B-41B7-869E-ED13C9072BC8 |
| **Pia de cozinha** | Um aplicativo de referência que apresenta dicas avançadas de desenvolvimento do App Studio e melhores práticas. Inclui exemplos práticos de gerenciamento de estado, tratamento de dados CSV, integração de API de navegador e padrões de interface do usuário que os criadores podem estudar e implementar em seus próprios aplicativos. Nenhum dos exemplos exige conexões externas. | Pia de cozinha App Studio/1CFE6B2F-544C-4611-B82C-80EADC76A0C8 |
# Duplicando aplicativos
Proprietários e coproprietários de aplicativos podem duplicar seus aplicativos para criar uma cópia exata do aplicativo. A duplicação de aplicativos é útil se você quiser preservar o estado atual para fins de teste ou usar o aplicativo duplicado como ponto de partida para criar um novo aplicativo.
**Para duplicar um aplicativo**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir**. Você será direcionado para uma página exibindo uma lista de aplicativos aos quais você tem acesso.
1. Escolha a lista suspensa na coluna **Ações** do aplicativo que você deseja duplicar.
1. Escolha **Duplicate** (Duplicar). Se o opcional **Duplicar** não estiver disponível, você provavelmente não é proprietário ou coproprietário do aplicativo.
1. Opcionalmente, forneça um nome do aplicativo duplicado. O nome padrão é *Current\$1App\$1Name COPY*.
1. Escolha **Duplicate** (Duplicar).
# Editando ou criando um aplicativo
Use o procedimento a seguir para editar um aplicativo no App Studio.
**Para editar (criar) um aplicativo**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir**. Você será direcionado para uma página exibindo uma lista de aplicativos aos quais você tem acesso.
1. Na coluna **Ações** do aplicativo que você deseja editar, escolha **Editar**. Isso o levará ao ambiente de desenvolvimento, onde você pode usar componentes, automações e dados para configurar a aparência e a função do seu aplicativo. Para obter informações sobre a criação de aplicativos, consulte[Introdução ao AWS App Studio](getting-started.md).
# Editar uma versão do aplicativo publicada anteriormente
Use o procedimento a seguir para editar uma versão publicada anteriormente do seu aplicativo do App Studio. Depois de escolher editar a versão publicada anteriormente, você pode editar o aplicativo no ambiente de desenvolvimento ou publicá-lo em Teste e depois em Produção.
**Atenção**
A versão publicada anteriormente substitui a versão em andamento do aplicativo no ambiente de desenvolvimento. Todas as alterações não publicadas em seu aplicativo serão perdidas.
A edição de uma versão publicada anteriormente é útil no caso de você publicar acidentalmente alterações indesejadas ou alterações que interrompam o aplicativo para seus usuários e desejar criar ou editar ainda mais a partir da versão anterior do aplicativo.
**nota**
Se você detectar problemas com um aplicativo publicado e precisar publicar imediatamente uma versão que estava funcionando anteriormente, ou se quiser publicar uma versão anterior, mas preservar as atualizações mais recentes do aplicativo no ambiente de desenvolvimento, reverta o aplicativo. Para obter mais informações, consulte [Revertendo para uma versão publicada anteriormente](application-rollback-version.md).
**Para editar uma versão do aplicativo publicada anteriormente**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a seta suspensa ao lado do botão **Publicar** e, em seguida, escolha Central de **publicação**.
1. Escolha **Histórico de versões** para ver a lista de versões publicadas anteriormente do aplicativo.
1. Encontre a versão que você deseja editar e escolha **Editar**.
1. Revise as informações e escolha **Reverter.**
1. A versão que você escolheu editar agora é a versão atual no ambiente de desenvolvimento. Você pode fazer alterações nele ou publicá-lo no ambiente de teste no estado em que se encontra, escolhendo **Publicar**. Depois de publicado no Testing, você pode publicar novamente no ambiente de produção, se desejar.
# Renomeando um aplicativo
Use o procedimento a seguir para renomear um aplicativo no App Studio. Você pode renomear um aplicativo da lista de aplicativos ou do ambiente de desenvolvimento ao criar o aplicativo.
**Para renomear um aplicativo**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir**. Você será direcionado para uma página exibindo uma lista de aplicativos aos quais você tem acesso.
1. Você pode renomear um aplicativo dessa lista ou do ambiente de desenvolvimento durante a edição.
+ Para renomear a partir dessa lista:
1. **Escolha a lista suspensa na coluna **Ações** do aplicativo que você deseja renomear e escolha Renomear.**
1. Dê um novo nome ao seu aplicativo e escolha **Renomear**.
+ Para renomear a partir do ambiente de desenvolvimento:
1. Na coluna **Ações** do aplicativo que você deseja editar, escolha **Editar**.
1. No ambiente de desenvolvimento, escolha o nome do aplicativo e atualize-o, depois pressione Enter ou saia do campo de texto para salvar suas alterações.
# Como excluir uma aplicação
Use o procedimento a seguir para excluir um aplicativo no App Studio.
**Como excluir uma aplicação do**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir**. Você será direcionado para uma página exibindo uma lista de aplicativos aos quais você tem acesso.
1. Escolha a lista suspensa na coluna **Ações** do aplicativo que você deseja excluir.
1. Escolha **Excluir**.
1. Na caixa de diálogo **Excluir aplicativo**, revise cuidadosamente as informações sobre a exclusão de aplicativos. Se você quiser excluir o aplicativo, escolha **Excluir**.
# Visualizando, publicando e compartilhando aplicativos
**Topics**
+ [Pré-visualizando aplicativos](applications-preview.md)
+ [Aplicativos de publicação](applications-publish.md)
+ [Compartilhamento de aplicativos publicados](application-share.md)
+ [Revertendo para uma versão publicada anteriormente](application-rollback-version.md)
+ [Exportação de aplicativos](applications-export.md)
# Pré-visualizando aplicativos
Você pode visualizar aplicativos no App Studio para ver como eles aparecerão para os usuários e também testar sua funcionalidade usando-os e verificando os registros em um painel de depuração.
O ambiente de visualização do aplicativo não oferece suporte à exibição de dados ativos ou à conexão com recursos externos com conectores, como fontes de dados. Para testar a funcionalidade no ambiente de visualização, você pode usar a saída simulada em automações e dados de amostra em entidades. Para visualizar seu aplicativo com dados em tempo real, você deve publicá-lo. Para obter mais informações, consulte [Aplicativos de publicação](applications-publish.md).
O ambiente de pré-visualização ou desenvolvimento não atualiza o aplicativo publicado nos outros ambientes. Se um aplicativo não tiver sido publicado, os usuários não poderão acessá-lo até que ele seja publicado e compartilhado. Se um aplicativo já tiver sido publicado e compartilhado, os usuários ainda acessarão a versão que foi publicada, e não a versão usada em um ambiente de pré-visualização.
**Para visualizar seu aplicativo**
1. Se necessário, navegue até o estúdio de aplicativos do aplicativo que você deseja visualizar:
1. No painel de navegação, escolha **Meus aplicativos** na seção **Criar**.
1. Escolha **Editar** para o aplicativo.
1. Escolha **Visualizar** para abrir o ambiente de visualização do aplicativo.
1. (Opcional) Expanda o painel de depuração escolhendo seu cabeçalho próximo à parte inferior da tela. Você pode filtrar o painel por tipo de mensagem escolhendo o tipo de mensagem na seção **Filtrar registros**. Você pode limpar os registros do painel escolhendo **Limpar console**.
1. Enquanto estiver no ambiente de visualização, você pode testar seu aplicativo navegando pelas páginas, usando seus componentes e escolhendo seus botões para iniciar automações que transferem dados. Como o ambiente de visualização não suporta dados ativos ou conexões com fontes externas, você pode ver exemplos dos dados que estão sendo transferidos no painel de depuração.
# Aplicativos de publicação
Quando você terminar de criar e configurar seu aplicativo, a próxima etapa é publicá-lo para testar as transferências de dados ou compartilhá-lo com os usuários finais. Para entender os aplicativos de publicação no App Studio, é importante entender os ambientes disponíveis. O App Studio fornece três ambientes separados, descritos na lista a seguir:
1. **Desenvolvimento**: onde você cria e visualiza seu aplicativo. Você não precisa publicar no ambiente de desenvolvimento, pois a versão mais recente do seu aplicativo é hospedada lá automaticamente. Não há dados ativos nem serviços ou recursos de terceiros disponíveis nesse ambiente.
1. **Teste**: onde você pode realizar testes abrangentes do seu aplicativo. No ambiente de teste, você pode se conectar, enviar e receber dados de outros serviços.
1. **Produção**: o ambiente operacional ao vivo para consumo do usuário final.
Toda a criação do seu aplicativo ocorre no ambiente **de desenvolvimento**. **Em seguida, publique no ambiente de teste para testar a transferência de dados entre outros serviços e o teste de aceitação do usuário (UAT) fornecendo uma URL de acesso aos usuários finais.** Depois, publique seu aplicativo no ambiente **de produção** para realizar os testes finais antes de compartilhá-lo com os usuários. Para obter mais informações sobre os ambientes de aplicativos, consulte[Ambientes de aplicativos](#application-environments).
Quando você publica um aplicativo, ele não está disponível para os usuários até que seja compartilhado. Isso lhe dá a oportunidade de usar e testar o aplicativo nos ambientes de teste e produção antes que os usuários possam acessá-lo. Quando você publica um aplicativo no Production que já foi publicado e compartilhado, a versão que está disponível para os usuários é atualizada.
## Aplicativos de publicação
Use o procedimento a seguir para publicar um aplicativo do App Studio no ambiente de teste ou produção.
**Para publicar um aplicativo no ambiente de teste ou produção**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Criar**. Você será direcionado para uma página exibindo uma lista de aplicativos aos quais você tem acesso.
1. Escolha **Editar** para o aplicativo que você deseja publicar.
1. Escolha **Publicar** no canto superior direito.
1. Na caixa de diálogo **Publicar suas atualizações**:
1. Revise as informações sobre a publicação de um aplicativo.
1. (Opcional) Em **Descrição da versão**, inclua uma descrição dessa versão do aplicativo.
1. Escolha a caixa para reconhecer as informações sobre o ambiente.
1. Escolha **Iniciar**. Pode levar até 15 minutos para que o aplicativo seja atualizado no ambiente ativo.
1. Para obter informações sobre a visualização de aplicativos nos ambientes de teste ou produção, consulte[Visualizando aplicativos publicados](#application-viewing-published).
**nota**
O uso do aplicativo no ambiente de teste ou produção resultará na transferência de dados ao vivo, como a criação de registros em tabelas de fontes de dados que foram conectadas com conectores.
Aplicativos publicados que nunca foram compartilhados não estarão disponíveis para usuários ou outros criadores. Para disponibilizar um aplicativo aos usuários, você deve compartilhá-lo após a publicação. Para obter mais informações, consulte [Compartilhamento de aplicativos publicados](application-share.md).
## Visualizando aplicativos publicados
Você pode visualizar os aplicativos publicados nos ambientes de teste e produção para testar o aplicativo antes de compartilhá-lo com usuários finais ou outros criadores.
**Para visualizar aplicativos publicados no ambiente de teste ou produção**
1. Se necessário, navegue até o estúdio de aplicativos do aplicativo que você deseja visualizar:
1. No painel de navegação, escolha **Meus aplicativos** na seção **Criar**.
1. Escolha **Editar** para o aplicativo.
1. **Escolha a seta suspensa ao lado de **Publicar** no canto superior direito e escolha Central de publicação.**
1. No centro de publicação, você pode visualizar os ambientes nos quais seu aplicativo é publicado. Se seu aplicativo for publicado nos ambientes de teste ou produção, você poderá visualizá-lo usando o link da **URL** de cada ambiente.
**nota**
O uso do aplicativo no ambiente de teste ou produção resultará na transferência de dados ao vivo, como a criação de registros em tabelas de fontes de dados que foram conectadas com conectores.
## Ambientes de aplicativos
AWS O App Studio fornece recursos de gerenciamento do ciclo de vida do aplicativo (ALM) em três ambientes separados: desenvolvimento, teste e produção. Isso ajuda você a adotar as melhores práticas com mais facilidade, como manter ambientes separados, controlar versões, compartilhar e monitorar todo o ciclo de vida do aplicativo.
### Ambiente de desenvolvimento
O ambiente de **desenvolvimento** é uma sandbox isolada na qual você pode criar aplicativos sem se conectar a nenhuma fonte de dados ou serviços ativos usando o estúdio de aplicativos e dados de amostra. No ambiente de desenvolvimento, você pode visualizar seu aplicativo para visualizá-lo e testá-lo sem comprometer os dados de produção.
Embora seu aplicativo não se conecte a outros serviços no ambiente de desenvolvimento, você pode configurar diferentes recursos em seu aplicativo para imitar conectores e automações de dados ativos.
Há um painel de depuração dobrável que inclui erros e avisos na parte inferior do estúdio de aplicativos no ambiente de desenvolvimento para ajudá-lo a inspecionar e depurar o aplicativo durante a criação. Para obter mais informações sobre solução de problemas e depuração de aplicativos, consulte. [Solução de problemas e depuração do App Studio](troubleshooting-and-debugging.md)
### Ambiente de teste
Depois que o desenvolvimento inicial do aplicativo estiver concluído, a próxima etapa é publicar no ambiente **de testes**. Enquanto estiver no ambiente de teste, seu aplicativo pode se conectar, enviar e receber dados de outros serviços. Portanto, você pode usar esse ambiente para realizar testes abrangentes, incluindo testes de aceitação do usuário (UAT), fornecendo uma URL de acesso aos usuários finais.
**nota**
Sua publicação inicial no ambiente de testes pode levar até 15 minutos.
A versão do seu aplicativo publicada no ambiente de teste será removida após 3 horas de inatividade do usuário final. No entanto, todas as versões persistem e podem ser restauradas na guia **Histórico de versões**.
Os principais recursos do ambiente de teste são os seguintes:
+ Teste de integração com fontes de dados ativas e APIs
+ Teste de aceitação do usuário (UAT) facilitado por meio de acesso controlado
+ Ambiente para coletar feedback e resolver problemas
+ Capacidade de inspecionar e depurar atividades do lado do cliente e do servidor usando consoles de navegador e ferramentas de desenvolvedor.
Para obter mais informações sobre solução de problemas e depuração de aplicativos, consulte. [Solução de problemas e depuração do App Studio](troubleshooting-and-debugging.md)
### Ambiente de produção
Depois de testar e corrigir os problemas, você pode promover a versão do seu aplicativo do ambiente de teste para o ambiente de produção para uso operacional ao vivo. Embora o ambiente de produção seja o ambiente operacional ativo para consumo do usuário final, você pode testar a versão publicada antes de compartilhá-la com os usuários.
Sua versão publicada no ambiente de produção será removida após 14 dias de inatividade do usuário final. No entanto, todas as versões persistem e podem ser restauradas na guia **Histórico de versões**.
Os principais recursos do ambiente de produção são os seguintes:
+ Ambiente operacional ao vivo para consumo do usuário final
+ Controle de acesso granular baseado em funções
+ Capacidades de controle de versão e reversão
+ Capacidade de inspecionar e depurar somente atividades do lado do cliente
+ Usa conectores ativos, dados, automações e APIs
## Gerenciamento de versões e lançamentos
O App Studio fornece recursos de controle de versão e gerenciamento de versões por meio de seu sistema de controle de versão na Central de **publicação**.
Principais recursos de controle de versão:
+ A publicação no ambiente de teste gera novos números de versão (1.0, 2.0, 3.0...).
+ O número da versão não muda durante a promoção do ambiente de teste para produção.
+ Você pode reverter para qualquer versão anterior no **Histórico de versões**.
+ Os aplicativos publicados no ambiente de teste são pausados após 3 horas de inatividade. As versões são persistentes e podem ser restauradas a partir do **Histórico de versões**.
+ Os aplicativos publicados no ambiente de produção são removidos após 14 dias de inatividade. As versões são persistentes e podem ser restauradas a partir do **Histórico de versões**.
Esse modelo de controle de versão permite uma iteração rápida, mantendo a rastreabilidade, os recursos de reversão e o desempenho ideal em todo o ciclo de desenvolvimento e teste do aplicativo.
## Manutenção e operações
Talvez o App Studio precise republicar automaticamente seu aplicativo para realizar determinadas tarefas de manutenção, atividades operacionais e incorporar novas bibliotecas de software. Nenhuma ação é necessária de você, o criador, mas talvez os usuários finais precisem fazer login novamente no aplicativo. Em determinadas situações, podemos precisar que você republique seu aplicativo para incorporar novos recursos e bibliotecas que não podemos adicionar automaticamente. Você precisará resolver quaisquer erros e revisar os avisos antes de republicar.
# Compartilhamento de aplicativos publicados
Quando você publica um aplicativo que ainda não foi publicado, ele não está disponível para os usuários até que seja compartilhado. Depois que um aplicativo publicado for compartilhado, ele estará disponível para os usuários e não precisará ser compartilhado novamente se outra versão for publicada.
**nota**
Esta seção trata do compartilhamento de aplicativos publicados com usuários finais ou testadores. Para obter informações sobre como convidar outros usuários para criar um aplicativo, consulte[Criando um aplicativo com vários usuários](builder-collaboration.md).
**Para compartilhar um aplicativo publicado**
1. Acesse a caixa de diálogo **Compartilhar** na lista de aplicativos ou no estúdio de aplicativos do seu aplicativo usando as seguintes instruções:
+ Para acessar a caixa de diálogo **Compartilhar** na lista de aplicativos: No painel de navegação, escolha **Meus aplicativos** na seção **Criar**. **Escolha a lista suspensa na coluna **Ações** do aplicativo que você deseja compartilhar e escolha Compartilhar.**
+ Para acessar a caixa de diálogo **Compartilhar** no estúdio de aplicativos: No estúdio de aplicativos do seu aplicativo, escolha **Compartilhar** no cabeçalho superior.
1. Na caixa de diálogo **Compartilhar**, escolha a guia do ambiente que você deseja compartilhar. Se você não vê as guias **Teste** ou **Produção**, seu aplicativo pode não ser publicado no ambiente correspondente. Para obter mais informações sobre publicação, consulte [Aplicativos de publicação](applications-publish.md).
1. Na guia apropriada, selecione grupos no menu suspenso para compartilhar o ambiente com eles.
1. (Opcional) Atribua uma função no nível do aplicativo ao grupo para testar ou configurar a visibilidade condicional da página. Para obter mais informações, consulte [Configurando a visibilidade de páginas com base em funções](app-level-roles.md).
1. Selecione **Share**.
1. (Opcional) Copie e compartilhe o link com os usuários. Somente usuários com os quais o aplicativo e o ambiente foram compartilhados podem acessar o aplicativo no ambiente correspondente.
# Revertendo para uma versão publicada anteriormente
Use o procedimento a seguir para reverter o ambiente de produção do seu aplicativo App Studio para uma versão publicada anteriormente. Os usuários finais do seu aplicativo serão afetados e verão a versão revertida do seu aplicativo após a implantação. Quando você reverte um aplicativo, ele também reverte o código do componente para a versão do momento da publicação anterior e afeta toda a pilha de implantação do aplicativo (código do usuário, estado da configuração do componente). Isso significa que todas as atualizações feitas pelo App Studio no código do componente, como alterações de campo ou outras alterações de configuração, serão revertidas para garantir que a versão revertida do aplicativo funcione da mesma forma que funcionava quando foi publicada originalmente.
A versão em andamento do seu aplicativo no ambiente de desenvolvimento não é afetada quando você reverte a versão publicada.
A reversão da versão publicada de um aplicativo é útil se você detectar problemas com um aplicativo publicado e precisar publicar imediatamente uma versão em funcionamento anterior ou se quiser publicar uma versão anterior e preservar as atualizações mais recentes do aplicativo no ambiente de desenvolvimento.
**nota**
Se quiser reverter o ambiente de desenvolvimento de um aplicativo para uma versão publicada anteriormente, você deve reverter o aplicativo. Para obter mais informações, consulte [Editar uma versão do aplicativo publicada anteriormente](applications-edit-previously-published-version.md).
**Para reverter a versão do ambiente de produção para uma versão do aplicativo publicada anteriormente**
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o. Para obter mais informações, consulte [Editando ou criando um aplicativo](applications-edit.md).
1. Escolha a seta suspensa da versão na parte superior do quadro Ambiente de **produção** para ver as versões disponíveis para reversão. O menu suspenso contém as versões publicadas nos últimos 30 dias. Se essa lista suspensa estiver desativada, pode ser porque a publicação de um aplicativo já está em andamento e somente uma publicação pode acontecer ao mesmo tempo.
1. Escolha a versão para a qual você deseja reverter.
1. Insira um motivo para reverter e escolha **Reverter**. A publicação reversa será iniciada e, uma vez concluída, o ambiente de produção do seu aplicativo será atualizado para a versão escolhida.
**nota**
Você também pode avançar para uma versão do aplicativo publicada anteriormente depois de reverter.
# Exportação de aplicativos
Você pode exportar um instantâneo do seu aplicativo para compartilhá-lo com outras instâncias do App Studio. Quando você exporta um aplicativo, um instantâneo é criado a partir do ambiente de desenvolvimento do aplicativo e um código de importação é gerado. O código de importação pode então ser usado para importar o aplicativo para outras instâncias do App Studio, onde ele pode ser visualizado e criado.
Os aplicativos exportados podem ser importados para instâncias em qualquer instância Região da AWS compatível com o App Studio.
**Para exportar um aplicativo**
1. No painel de navegação, escolha **Meus aplicativos** na seção **Construir** para navegar até uma lista dos seus aplicativos.
1. Escolha a lista suspensa na coluna **Ações** do aplicativo que você deseja exportar.
1. Escolha **Exportar**.
1. O procedimento para gerar e compartilhar um código de importação varia dependendo se um código de importação já foi criado ou não para o aplicativo.
+ Se um código de importação não tiver sido criado:
1. Em **Permissões de importação de aplicativos**, especifique quais instâncias podem importar o aplicativo exportado. Você pode conceder permissões de importação a todas as instâncias ou adicionar instâncias específicas do App Studio inserindo a instância delas IDs. Separe várias instâncias IDs com uma vírgula.
Para encontrar o ID da instância, acesse as configurações da conta da sua instância escolhendo **Configurações da conta** no console do App Studio.
1. Escolha **Gerar código de importação**.
1. Copie e compartilhe o código de importação gerado.
+ Se um código de importação já tiver sido criado:
1. Para compartilhar o aplicativo atualmente exportado, copie e compartilhe o código de importação existente. Para criar um novo aplicativo exportado com as alterações mais recentes em seu aplicativo, escolha **Gerar novo código**. Você também pode atualizar as permissões de importação, se necessário.
# Páginas e componentes: crie a interface de usuário do seu aplicativo
**Topics**
+ [Gerenciando páginas](pages.md)
+ [Gerenciando componentes](adding-editing-deleting-components.md)
+ [Configurando a visibilidade de páginas com base em funções](app-level-roles.md)
+ [Ordenando e organizando páginas na navegação do aplicativo](pages-order.md)
+ [Altere as cores em seu aplicativo com temas de aplicativos](app-theme.md)
+ [Referência de componentes](components-reference.md)
# Gerenciando páginas
Use os procedimentos a seguir para criar, editar ou excluir páginas do seu AWS aplicativo do App Studio.
As **páginas** são contêineres para [componentes](concepts.md#concepts-component), que compõem a interface de usuário de um aplicativo 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. As páginas são criadas e editadas na guia **Páginas** do estúdio de aplicativos.
# Criando uma página
Use o procedimento a seguir para criar uma página em um aplicativo no App Studio. Para obter informações sobre a duplicação de uma página existente, consulte[Duplicando uma página](pages-duplicate.md).
**Para criar uma página**
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. No menu **Páginas** do lado esquerdo, escolha **\$1** Adicionar.
# Duplicando uma página
Use o procedimento a seguir para duplicar uma página em um aplicativo no App Studio.
**Para duplicar uma página**
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. **No menu **Páginas** do lado esquerdo, escolha o menu de elipses ao lado do nome da página que você deseja duplicar e escolha Duplicar.** A página duplicada é adicionada diretamente após a página original.
# Visualizando e editando propriedades da página
Use o procedimento a seguir para editar uma página em um aplicativo no App Studio. Você pode editar propriedades como o nome da página, seus parâmetros e seu layout.
**Para visualizar ou editar as propriedades da página**
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. **No menu **Páginas** do lado esquerdo, escolha o menu de elipses ao lado do nome da página que você deseja editar e escolha Propriedades da página.** Isso abre o menu **Propriedades** do lado direito.
1. Para editar o nome da página:
**nota**
****Caracteres de nome de página válidos: **A-Z**, **a-z**, **0-9, \$1**, \$1****
1. Escolha o ícone de lápis ao lado do nome na parte superior do menu **Propriedades**.
1. Insira o novo nome para sua página e pressione Enter.
1. Para criar, editar ou excluir parâmetros de página:
1. Para criar um parâmetro de página, escolha **\$1 Adicionar novo** na seção **Parâmetros da página**.
1. Para editar o valor de **Chave** ou **Descrição** de um parâmetro de página, escolha o campo de entrada da propriedade que você deseja alterar e insira um novo valor. Suas alterações são salvas à medida que você edita.
1. Para excluir um parâmetro de página, escolha o ícone de lixeira do parâmetro de página que você deseja excluir.
1. Para adicionar, editar ou remover o logotipo ou banner de uma página:
1. Para adicionar um logotipo ou banner de página, ative a respectiva opção na seção **Estilo**. Configure a fonte da imagem e, opcionalmente, forneça texto alternativo.
1. Para editar o logotipo ou banner de uma página, atualize os campos na seção **Estilo**.
1. Para remover o logotipo ou banner de uma página, desative a respectiva opção na seção **Estilo**.
1. Para editar o layout de uma página:
1. Atualize os campos na seção **Layout**.
# Excluindo uma página
Use o procedimento a seguir para excluir uma página de um aplicativo no App Studio.
**Para excluir uma página**
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. **No menu **Páginas** do lado esquerdo, escolha o menu de elipses ao lado do nome da página que você deseja excluir e escolha Excluir.**
# Gerenciando componentes
Use os procedimentos a seguir para adicionar, editar e excluir componentes em ou de páginas no estúdio de aplicativos do App Studio para criar a interface de usuário desejada para seu aplicativo.
# Adicionar componentes a uma página
Use o procedimento a seguir para adicionar um componente a uma página no App Studio. Para obter informações sobre a duplicação de um componente existente, consulte[Duplicação de componentes](duplicating-components.md).
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. O painel de componentes está localizado no menu do lado direito, que contém os componentes disponíveis.
1. Arraste e solte o componente desejado do painel na tela. Como alternativa, você pode clicar duas vezes no componente no painel para adicioná-lo automaticamente ao centro da página atual.
1. Agora que você adicionou um componente, use o painel **Propriedades** do lado direito para ajustar suas configurações, como fonte de dados, layout e comportamento. Para obter informações detalhadas sobre a configuração de cada tipo de componente, consulte[Referência de componentes](components-reference.md).
# Duplicação de componentes
Use o procedimento a seguir para duplicar um componente em um aplicativo do App Studio. Os componentes duplicados contêm quaisquer automações ou entidades vinculadas do componente original.
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. Há duas maneiras de duplicar um componente:
+ No menu **Páginas** do lado esquerdo, expanda a página que contém o componente que você deseja duplicar. **Escolha o menu de elipses ao lado do nome do componente que você deseja duplicar e escolha Duplicar.**
+ Escolha o componente que você deseja duplicar e escolha o ícone de duplicação.
O componente duplicado é adicionado diretamente após o componente original.
**dica**
Você pode desfazer a duplicação de um componente, junto com muitas outras ações no ambiente de desenvolvimento, usando os atalhos de teclado CTRL\$1Z ou CMD\$1Z.
# Visualizando e editando propriedades do componente
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. No menu **Páginas** do lado esquerdo, expanda a página que contém o componente e escolha o componente a ser visualizado ou editado. Como alternativa, você pode escolher a página e, em seguida, escolher o componente na tela.
1. O painel **Propriedades** do lado direito exibe as configurações configuráveis para o componente selecionado.
1. Explore as várias propriedades e opções disponíveis e atualize-as conforme necessário para configurar a aparência e o comportamento do componente. Por exemplo, talvez você queira alterar a fonte de dados, configurar o layout ou ativar funcionalidades adicionais.
Para obter informações detalhadas sobre a configuração de cada tipo de componente, consulte[Referência de componentes](components-reference.md).
# Excluindo componentes
1. Se necessário, navegue até o ambiente de desenvolvimento do seu aplicativo editando-o.
1. Navegue até a guia **Páginas**.
1. No menu **Páginas** do lado esquerdo, escolha o componente a ser excluído para selecioná-lo.
1. No menu **Propriedades** do lado direito, escolha o ícone da lixeira.
1. Na caixa de diálogo de confirmação, escolha **Excluir**.
# Configurando a visibilidade de páginas com base em funções
Você pode criar funções em um aplicativo do App Studio e configurar a visibilidade das páginas com base nessas funções. Por exemplo, você pode criar funções com base nas necessidades ou níveis de acesso do usuário, como administrador, gerente ou usuário, para aplicativos que fornecem recursos como aprovações de projetos ou processamento de solicitações e tornam determinadas páginas visíveis para funções específicas. Neste exemplo, os administradores podem ter acesso total, os gerentes podem ter acesso para visualizar painéis de relatórios e os usuários podem ter acesso às páginas de tarefas com formulários de entrada.
Use o procedimento a seguir para configurar a visibilidade das páginas com base em funções no seu aplicativo do App Studio.
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo. **No menu de navegação do lado esquerdo, escolha **Meus aplicativos**, encontre seu aplicativo e escolha Editar.**
1. Crie funções em nível de aplicativo no estúdio de aplicativos.
1. Escolha a guia **Configurações do aplicativo** na parte superior do estúdio de aplicativos.
1. Escolha **\$1 Adicionar função**
1. Em **Nome da função**, forneça um nome para identificar sua função. Recomendamos usar um nome que descreva o nível de acesso ou as tarefas do grupo, pois você usará o nome para configurar a visibilidade da página.
1. Opcionalmente, em **Descrição**, adicione uma descrição para a função.
1. Repita essas etapas para criar quantas funções forem necessárias.
1. Configure a visibilidade de suas páginas
1. Escolha a guia **Páginas** na parte superior do estúdio de aplicativos.
1. No menu **Páginas** do lado esquerdo, escolha a página para a qual você deseja configurar a visibilidade baseada em funções.
1. No menu do lado direito, escolha a guia **Propriedades**.
1. Em **Visibilidade**, desative **Abrir para todos os usuários finais**.
1. Mantenha a **função** selecionada para escolher em uma lista das funções que você criou na etapa anterior. Escolha **Personalizado** para escrever uma JavaScript expressão para configurações de visibilidade mais complexas.
1. Com a **função** selecionada, marque as caixas das funções do aplicativo para as quais a página estará visível.
1. Com a opção **Personalizado** selecionada, insira uma JavaScript expressão que seja resolvida como verdadeira ou falsa. Use o exemplo a seguir para verificar se o usuário atual tem a função de *gerente*:`{{currentUser.roles.includes('manager')}}`.
1. Agora que sua visibilidade está configurada, você pode testar a visibilidade da página visualizando seu aplicativo.
1. Escolha **Visualizar** para abrir uma prévia do seu aplicativo.
1. No canto superior direito da visualização, escolha o menu **Visualizar como** e marque as caixas das funções que você deseja testar. As páginas visíveis devem refletir as funções selecionadas.
1. Agora, atribua grupos às funções de um aplicativo publicado. As atribuições de grupos e funções devem ser configuradas separadamente para cada ambiente. Para obter mais informações sobre ambientes de aplicativos, consulte[Ambientes de aplicativos](applications-publish.md#application-environments).
**nota**
Seu aplicativo deve ser publicado nos ambientes de teste ou produção para atribuir grupos do App Studio às funções que você criou e configurou. Se necessário, publique seu aplicativo para atribuir grupos às funções. Para obter mais informações sobre publicação, consulte [Aplicativos de publicação](applications-publish.md).
1. No canto superior direito do estúdio de aplicativos, escolha **Compartilhar**.
1. Escolha a guia do ambiente do qual você deseja configurar a visibilidade da página.
1. Escolha a caixa de entrada **Pesquisar grupos** e escolha o grupo com o qual deseja compartilhar a versão do aplicativo. Você pode inserir texto para pesquisar grupos.
1. No menu suspenso, escolha as funções a serem atribuídas ao grupo. Você pode escolher **Sem função** para compartilhar a versão do aplicativo e não atribuir uma função ao grupo. Somente páginas visíveis para todos os usuários estarão visíveis para grupos sem função.
1. Selecione **Share**. Repita essas etapas para adicionar quantos grupos forem necessários.
# Ordenando e organizando páginas na navegação do aplicativo
Este tópico inclui informações sobre como reordenar e organizar páginas nos aplicativos do App Studio. Há duas áreas do produto em que as páginas do aplicativo são vistas: no menu **Páginas** à esquerda durante a edição do aplicativo no estúdio de aplicativos e na navegação à esquerda de uma prévia do aplicativo publicado.
## Ordenar páginas no menu **Páginas** à esquerda durante a edição de um aplicativo
Ao editar um aplicativo no estúdio de aplicativos, as páginas são ordenadas por hora de criação no menu **Páginas** à esquerda. Você não pode reordenar as páginas nesse menu.
## Ordenar, mostrar ou ocultar páginas na navegação de um aplicativo pré-visualizado ou publicado
Você pode editar as seguintes configurações da navegação à esquerda de um aplicativo em pré-visualização ou publicado:
+ A visibilidade de toda a navegação
+ A visibilidade de páginas específicas na navegação
+ A ordem das páginas na navegação
**Para editar a navegação à esquerda de um aplicativo em pré-visualização ou publicado**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo para editá-lo.
1. No menu **Páginas** do lado esquerdo, escolha **Cabeçalho e navegação**.
1. No menu **Cabeçalho e navegação** do lado direito, visualize ou edite o seguinte:
1. Para ocultar ou mostrar a navegação no aplicativo, use o botão de **navegação do aplicativo**.
1. Para ocultar páginas da navegação do aplicativo, arraste as páginas até a seção **Páginas desvinculadas**. ****
1. Para reordenar as páginas na navegação do aplicativo, arraste-as até a ordem desejada na seção **Páginas vinculadas**.
# Altere as cores em seu aplicativo com temas de aplicativos
Use o procedimento a seguir para atualizar as cores em seu aplicativo configurando um tema de aplicativo.
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo para editá-lo.
1. No estúdio de aplicativos, navegue até a guia **Páginas**.
1. Na navegação à esquerda, escolha Tema do **aplicativo para abrir as configurações do tema** do aplicativo à direita.
1. No **tema base**, escolha **Modo claro** ou **Modo escuro**.
1. Para adicionar cores personalizadas ao seu aplicativo, ative a opção **Personalizar** e atualize as seguintes configurações:
1. Em **Cor primária**, escolha a cor que é aplicada a determinados componentes e à navegação do seu aplicativo. Você pode escolher uma cor com o seletor de cores, código RGB, HSL ou HEX.
**nota**
O App Studio garantirá automaticamente que suas cores estejam acessíveis. Por exemplo, se você escolher uma cor clara no modo claro, ela será atualizada para ficar mais acessível.
1. Em **Cor do cabeçalho**, escolha a cor aplicada ao cabeçalho do seu aplicativo. Você pode escolher uma cor com o seletor de cores, código RGB, HSL ou HEX.
1. Escolha **Temas padrão** para visualizar e escolher entre temas predefinidos ou escolha **Randomizar** para gerar uma cor primária e de cabeçalho aleatória.
1. Escolha **Salvar alterações** para atualizar o tema do seu aplicativo.
# Referência de componentes
Este tópico detalha cada um dos componentes do App Studio, suas propriedades e inclui exemplos de configuração.
## Propriedades comuns dos componentes
Esta seção descreve as propriedades e os recursos gerais que são compartilhados entre vários componentes no estúdio de aplicativos. Os detalhes específicos da implementação e os casos de uso de cada tipo de propriedade podem variar dependendo do componente, mas o conceito geral dessas propriedades permanece consistente no App Studio.
### Nome
Um nome padrão é gerado para cada componente; no entanto, você pode editar para mudar para um nome exclusivo para cada componente. Você usará esse nome para referenciar o componente e seus dados de outros componentes ou expressões na mesma página. Limitação: Não inclua espaços no nome do componente; ele só pode ter letras, números, sublinhados e cifrões. Exemplos: `userNameInput`, `ordersTable`, `metricCard1`.
### Valor primário, valor secundário e valor
Muitos componentes no estúdio de aplicativos fornecem campos para especificar valores ou expressões que determinam o conteúdo ou os dados exibidos no componente. Esses campos geralmente são rotulados como `Primary value``Secondary value`, ou simplesmente`Value`, dependendo do tipo e da finalidade do componente.
O `Primary value` campo geralmente é usado para definir o valor principal, o ponto de dados ou o conteúdo que deve ser exibido com destaque no componente.
O `Secondary value` campo, quando disponível, é usado para exibir um valor ou informação adicional ou de suporte ao lado do valor principal.
O `Value` campo permite que você especifique o valor ou a expressão que deve ser exibida no componente.
Esses campos oferecem suporte à entrada de texto estático e a expressões dinâmicas. Ao usar expressões, você pode referenciar dados de outros componentes, fontes de dados ou variáveis em seu aplicativo, permitindo a exibição de conteúdo dinâmico e orientado por dados.
#### Sintaxe para expressões
A sintaxe para inserir expressões nesses campos segue um padrão consistente:
```
{{expression}}
```
Onde *expression* é uma expressão válida que avalia o valor ou os dados desejados que você deseja exibir.
##### Exemplo: texto estático
+ Valor primário: você pode inserir um número ou valor estático diretamente, como `"123"` ou`"$1,999.99"`.
+ Valor secundário: você pode inserir um rótulo de texto estático, como `"Goal"` ou`"Projected Revenue"`.
+ Valor: você pode inserir uma string estática, como `"since last month"` ou`"Total Quantity"`.
##### Exemplos: Expressões
+ `Hello, {{currentUser.firstName}}`: exibe uma saudação com o primeiro nome do usuário atualmente conectado.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: exibe condicionalmente um título de painel diferente com base na função do usuário.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: recupera o valor do `fieldName` campo do primeiro item nos dados do componente com o ID`componentName`.
+ `{{ui.componentName.value * 100}}`: executa um cálculo do valor do componente com o ID`componentName`.
+ `{{ui.componentName.value + ' items'}}`: concatena o valor do componente com o ID `componentName` e a string. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: recupera o número do pedido da primeira linha de dados no `ordersTable` componente.
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: calcula a receita projetada aumentando a receita total da primeira linha de dados no `salesMetrics` componente em 15%.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: concatena o nome e o sobrenome dos dados no componente. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: formata a data do pedido do `orderDetails` componente em uma string de data mais legível.
+ `{{ui.productList.data?.length}}`: exibe o número total de produtos nos dados conectados ao `productList` componente.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: calcula o valor do desconto com base na porcentagem do desconto e no total do pedido.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: exibe o número de itens no carrinho de compras, junto com a etiqueta`items in cart`.
Ao usar esses campos de expressão, você pode criar conteúdo dinâmico e orientado por dados em seu aplicativo, permitindo que você exiba informações adaptadas ao contexto do usuário ou ao estado do seu aplicativo. Isso permite experiências de usuário mais personalizadas e interativas.
### Rótulo
A propriedade **Label** permite que você especifique uma legenda ou título para o componente. Esse rótulo geralmente é exibido ao lado ou acima do componente, ajudando os usuários a entender sua finalidade.
Você pode usar texto estático e expressões para definir o rótulo.
#### Exemplo: texto estático
Se você inserir o texto “Nome” no campo Rótulo, o componente exibirá “Nome” como rótulo.
#### Exemplo: Expressões
##### Exemplo: loja de varejo
O exemplo a seguir personaliza o rótulo para cada usuário, fazendo com que a interface pareça mais personalizada para cada pessoa:
```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```
##### Exemplo: gerenciamento de projetos SaaS
O exemplo a seguir extrai dados do projeto selecionado para fornecer rótulos específicos ao contexto, ajudando os usuários a se manterem orientados no aplicativo:
```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```
##### Exemplo: clínica de saúde
O exemplo a seguir faz referência ao perfil do usuário atual e às informações do médico, proporcionando uma experiência mais personalizada para os pacientes.
```
Dr. {{ui.doctorProfileTable.data.firstName}}
{{ui.doctorProfileTable.data.lastName}}
```
### Placeholder
A propriedade Placeholder permite que você especifique o texto de dica ou orientação que é exibido dentro do componente quando ele está vazio. Isso pode ajudar os usuários a entender o formato de entrada esperado ou fornecer contexto adicional.
Você pode usar texto estático e expressões para definir o espaço reservado.
#### Exemplo: texto estático
Se você inserir o texto `Enter your name` no campo **Espaço reservado**, o componente será exibido `Enter your name` como texto do espaço reservado.
#### Exemplo: Expressões
##### Exemplo: serviços financeiros
`Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Esses exemplos extraem dados da conta selecionada para exibir solicitações relevantes, tornando a interface intuitiva para clientes bancários.
##### Exemplo: comércio eletrônico
`Enter the coupon code for {{ui.cartTable.data.currency}} total`O espaço reservado aqui é atualizado dinamicamente com base no conteúdo do carrinho do usuário, proporcionando uma experiência de checkout perfeita.
##### Exemplo: clínica de saúde
`Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Ao usar uma expressão que faz referência à idade do paciente, o aplicativo pode criar um espaço reservado mais personalizado e útil.
### Fonte
A propriedade **Source** permite selecionar a fonte de dados de um componente. Após a seleção, você pode escolher entre os seguintes tipos de fonte de dados:`entity`,`expression`, ou`automation`.
#### Entidade
Selecionar **Entidade** como fonte de dados permite conectar o componente a uma entidade de dados ou modelo existente em seu aplicativo. Isso é útil quando você tem uma estrutura de dados ou um esquema bem definido que deseja aproveitar em todo o aplicativo.
Quando usar a fonte de dados da entidade:
+ Quando você tem um modelo de dados ou entidade que contém as informações que você deseja exibir no componente (por exemplo, uma entidade de “Produtos” com campos como “Nome”, “Descrição”, “Preço”).
+ Quando você precisa buscar dados dinamicamente de um banco de dados, API ou outra fonte de dados externa e apresentá-los no componente.
+ Quando você quiser aproveitar os relacionamentos e associações definidos no modelo de dados do seu aplicativo.
##### Selecionar uma consulta em uma entidade
Às vezes, talvez você queira conectar um componente a uma consulta específica que recupera dados de uma entidade, em vez da entidade inteira. Na fonte de dados da entidade, você tem a opção de escolher entre as consultas existentes ou criar uma nova.
Ao selecionar uma consulta, você pode:
+ Filtre os dados exibidos no componente com base em critérios específicos.
+ Passe parâmetros para a consulta para filtrar ou classificar dinamicamente os dados.
+ Aproveite junções complexas, agregações ou outras técnicas de manipulação de dados definidas na consulta.
Por exemplo, se você tiver uma `Customers` entidade em seu aplicativo com campos como `Name``Email`, `PhoneNumber` e. Você pode conectar um componente de tabela a essa entidade e escolher uma ação de `ActiveCustomers` dados predefinida que filtra os clientes com base em seu status. Isso permite que você exiba somente os clientes ativos na tabela, em vez de todo o banco de dados de clientes.
##### Adicionar parâmetros a uma fonte de dados da entidade
Ao usar uma entidade como fonte de dados, você também pode adicionar parâmetros ao componente. Esses parâmetros podem ser usados para filtrar, classificar ou transformar os dados exibidos no componente.
Por exemplo, se você tiver uma `Products` entidade com campos como `Name` `Description``Price`,, `Category` e. Você pode adicionar um parâmetro chamado `category` a um componente da tabela que exibe a lista de produtos. Quando os usuários selecionam uma categoria em uma lista suspensa, a tabela é atualizada automaticamente para mostrar somente os produtos pertencentes à categoria selecionada, usando a `{{params.category}}` expressão na ação de dados.
#### Expressão
Selecione **Expressão** como fonte de dados para inserir expressões ou cálculos personalizados para gerar os dados do componente dinamicamente. Isso é útil quando você precisa realizar transformações, combinar dados de várias fontes ou gerar dados com base em uma lógica comercial específica.
Quando usar a fonte de dados **Expression**:
+ Quando você precisa calcular ou derivar dados que não estão diretamente disponíveis em seu modelo de dados (por exemplo, calcular o valor total do pedido com base na quantidade e no preço).
+ Quando você quiser combinar dados de várias entidades ou fontes de dados para criar uma visualização composta (por exemplo, exibir o histórico de pedidos de um cliente junto com suas informações de contato).
+ Quando você precisa gerar dados com base em regras ou condições específicas (por exemplo, exibir uma lista de “Produtos recomendados” com base no histórico de navegação do usuário).
Por exemplo, se você tiver um *Metrics* componente que precise exibir a receita total do mês atual, poderá usar uma expressão como a seguinte para calcular e exibir a receita mensal:
```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```
##### Automação
Selecione **Automação** como fonte de dados para conectar o componente a uma automação ou fluxo de trabalho existente em seu aplicativo. Isso é útil quando os dados ou a funcionalidade do componente são gerados ou atualizados como parte de um processo ou fluxo de trabalho específico.
Quando usar a fonte **de dados de automação**:
+ Quando os dados exibidos no componente são o resultado de uma automação ou fluxo de trabalho específico (por exemplo, uma tabela de “Aprovações pendentes” que é atualizada como parte de um processo de aprovação).
+ Quando você quiser acionar ações ou atualizações no componente com base em eventos ou condições dentro de uma automação (por exemplo, atualizar uma métrica com os números de vendas mais recentes de um SKU).
+ Quando você precisa integrar o componente a outros serviços ou sistemas em seu aplicativo por meio de uma automação (por exemplo, buscar dados de uma API de terceiros e exibi-los em uma tabela).
Por exemplo, se você tiver um componente de fluxo de etapas que orienta os usuários em um processo de solicitação de emprego. O componente stepflow pode ser conectado a uma automação que lida com o envio da solicitação de emprego, a verificação de antecedentes e a geração de ofertas. À medida que a automação avança por essas etapas, o componente stepflow pode ser atualizado dinamicamente para refletir o status atual do aplicativo.
Ao selecionar cuidadosamente a fonte de dados apropriada para cada componente, você pode garantir que a interface de usuário do seu aplicativo seja alimentada pelos dados e pela lógica corretos, fornecendo uma experiência perfeita e envolvente para seus usuários.
### Visível se
Use a propriedade **Visible if** para mostrar ou ocultar componentes ou elementos com base em condições específicas ou valores de dados. Isso é útil quando você deseja controlar dinamicamente a visibilidade de determinadas partes da interface de usuário do seu aplicativo.
A propriedade **Visible if** usa a seguinte sintaxe:
```
{{expression ? true : false}}
```
or
```
{{expression}}
```
Onde *expression* é uma expressão booleana que é avaliada como ou. `true` `false`
Se a expressão for avaliada como`true`, o componente ficará visível. Se a expressão for avaliada como`false`, o componente ficará oculto. A expressão pode referenciar valores de outros componentes, fontes de dados ou variáveis em seu aplicativo.
#### Exemplos de expressões visíveis
##### Exemplo: mostrar ou ocultar um campo de entrada de senha com base em uma entrada de e-mail
Imagine que você tenha um formulário de login com um campo de entrada de e-mail e um campo de entrada de senha. Você deseja mostrar o campo de entrada da senha somente se o usuário tiver inserido um endereço de e-mail. Você pode usar a seguinte expressão Visible if:
```
{{ui.emailInput.value !== ""}}
```
Essa expressão verifica se o valor do `emailInput` componente não é uma string vazia. Se o usuário tiver inserido um endereço de e-mail, a expressão será avaliada como `true` e o campo de entrada da senha ficará visível. Se o campo de e-mail estiver vazio, a expressão será avaliada como `false` e o campo de entrada da senha ficará oculto.
##### Exemplo: exibição de campos de formulário adicionais com base em uma seleção suspensa
Digamos que você tenha um formulário em que os usuários possam selecionar uma categoria em uma lista suspensa. Dependendo da categoria selecionada, você deseja mostrar ou ocultar campos adicionais do formulário para coletar informações mais específicas.
Por exemplo, se o usuário selecionar a *Products* categoria, você poderá usar a seguinte expressão para mostrar um *Product Details* campo adicional:
```
{{ui.categoryDropdown.value === "Products"}}
```
Se o usuário selecionar as *Consulting* categorias *Services* ou, você poderá usar essa expressão para mostrar um conjunto diferente de campos adicionais:
```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```
##### Exemplos: Outros
Para tornar o componente visível se o valor do `textInput1` componente não for uma string vazia:
```
{{ui.textInput1.value === "" ? false : true}}
```
Para tornar o componente sempre visível:
```
{{true}}
```
Para tornar o componente visível se o valor do `emailInput` componente não for uma string vazia:
```
{{ui.emailInput.value !== ""}}
```
### Desativado se
O recurso **Desativado if** permite que você ative ou desative condicionalmente um componente com base em condições específicas ou valores de dados. Isso é obtido usando a propriedade **Disabled if**, que aceita uma expressão booleana que determina se o componente deve ser ativado ou desativado.
A propriedade **Disabled if** usa a seguinte sintaxe:
```
{{expression ? true : false}}
```
or
```
{{expression}}
```
#### Desabilitado se houver exemplos de expressão
##### Exemplo: desabilitar um botão de envio com base na validação do formulário
Se você tiver um formulário com vários campos de entrada e quiser desativar o botão de envio até que todos os campos obrigatórios sejam preenchidos corretamente, você pode usar a seguinte expressão **Disabled If**:
```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```
Essa expressão verifica se algum dos campos de entrada obrigatórios (`nameInput`,`emailInput`,`passwordInput`) está vazio. Se algum dos campos estiver vazio, a expressão será avaliada como e o botão de envio será desativado. `true` Depois que todos os campos obrigatórios forem preenchidos, a `false` expressão será avaliada como e o botão de envio será ativado.
Ao usar esses tipos de expressões condicionais nas propriedades **Visible if** e **Disabled ff**, você pode criar interfaces de usuário dinâmicas e responsivas que se adaptam à entrada do usuário, fornecendo uma experiência mais simplificada e relevante para os usuários do seu aplicativo.
Onde *expression* está uma expressão booleana que é avaliada como verdadeira ou falsa.
Exemplo:
```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```
#### Layouts de contêineres
As propriedades do layout determinam como o conteúdo ou os elementos dentro de um componente são organizados e posicionados. Várias opções de layout estão disponíveis, cada uma representada por um ícone:
+ **Layout da coluna**: esse layout organiza o conteúdo ou os elementos verticalmente, em uma única coluna.
+ **Layout de duas colunas**: esse layout divide o componente em duas colunas de largura igual, permitindo que você posicione conteúdo ou elementos lado a lado.
+ **Layout de linha**: esse layout organiza o conteúdo ou os elementos horizontalmente, em uma única linha.
##### Orientation (Orientação)
+ **Horizontal**: esse layout organiza o conteúdo ou os elementos horizontalmente, em uma única linha.
+ **Vertical**: esse layout organiza o conteúdo ou os elementos verticalmente, em uma única coluna.
+ **Quebrado em linha**: esse layout organiza o conteúdo ou os elementos horizontalmente, mas passa para a próxima linha se os elementos excederem a largura disponível.
##### Alinhamento
+ **Esquerda**: alinha o conteúdo ou os elementos no lado esquerdo do componente.
+ **Centralizar**: centraliza o conteúdo ou os elementos horizontalmente dentro do componente.
+ **Direita**: alinha o conteúdo ou os elementos no lado direito do componente.
##### Largura
A propriedade **Largura** especifica o tamanho horizontal do componente. Você pode inserir um valor percentual entre 0% e 100%, representando a largura do componente em relação ao contêiner principal ou ao espaço disponível.
##### Altura
A propriedade **Altura** especifica o tamanho vertical do componente. O valor “auto” ajusta automaticamente a altura do componente com base em seu conteúdo ou no espaço disponível.
##### Espaço entre
A propriedade **Espaço entre** determina o espaçamento ou a lacuna entre o conteúdo ou os elementos dentro do componente. Você pode selecionar um valor de 0px (sem espaçamento) a 64px, com incrementos de 4px (por exemplo, 4px, 8px, 12px, etc.).
##### Padding
A propriedade **Padding** controla o espaço entre o conteúdo ou os elementos e as bordas do componente. Você pode selecionar um valor de 0px (sem preenchimento) a 64px, com incrementos de 4px (por exemplo, 4px, 8px, 12px, etc.).
##### Contexto
O **Plano de fundo** ativa ou desativa uma cor ou estilo de fundo para o componente.
Essas propriedades de layout oferecem flexibilidade na organização e no posicionamento do conteúdo em um componente, além de controlar o tamanho, o espaçamento e a aparência visual do próprio componente.
## Componentes de dados
Esta seção aborda os vários componentes de dados disponíveis no estúdio de aplicativos, incluindo os componentes **Tabela**, **Detalhe**, **Métrica**, **Formulário** e **Repetidor**. Esses componentes são usados para exibir, reunir e manipular dados em seu aplicativo.
### Tabela
O componente **Tabela** exibe dados em formato tabular, com linhas e colunas. Ele é usado para apresentar dados estruturados, como listas de itens ou registros de um banco de dados, de easy-to-read forma organizada.
#### Propriedades da tabela
O componente **Tabela** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
Além das propriedades comuns, o componente **Tabela** tem propriedades e opções de configuração específicas`Columns`, incluindo`Search and export`, `Expressions` e.
##### Columns
Nesta seção, você pode definir as colunas a serem exibidas na tabela. Cada coluna pode ser configurada com as seguintes propriedades:
+ **Formato**: o tipo de dados do campo, por exemplo: texto, número, data.
+ **Rótulo da coluna**: o texto do cabeçalho da coluna.
+ **Valor**: O campo da fonte de dados que deve ser exibido nessa coluna.
Esse campo permite especificar o valor ou a expressão que deve ser exibida nas células da coluna. Você pode usar expressões para referenciar dados da fonte conectada ou de outros componentes.
Exemplo: `{{currentRow.title}}` - Essa expressão exibirá o valor do *title* campo da linha atual nas células da coluna.
+ **Ativar classificação**: essa opção permite ativar ou desativar a funcionalidade de classificação para a coluna específica. Quando ativado, os usuários podem classificar os dados da tabela com base nos valores dessa coluna.
##### Pesquisar e exportar
O componente **Tabela** fornece as seguintes opções para ativar ou desativar a funcionalidade de pesquisa e exportação:
+ **Mostrar pesquisa** Quando ativada, essa opção adiciona um campo de entrada de pesquisa à tabela, permitindo que os usuários pesquisem e filtrem os dados exibidos.
+ **Mostrar exportação** Quando ativada, essa opção adiciona uma opção de exportação à tabela, permitindo que os usuários baixem os dados da tabela em vários formatos, por exemplo: CSV.
**nota**
Por padrão, a funcionalidade de pesquisa é limitada aos dados que foram carregados na tabela. Para usar a pesquisa exaustivamente, você precisará carregar todas as páginas de dados.
##### Linhas por página
Você pode especificar o número de linhas a serem exibidas por página na tabela. Os usuários podem então navegar entre as páginas para ver o conjunto de dados completo.
##### Limite de pré-busca
Especifique o número máximo de registros a serem pré-buscados em cada solicitação de consulta. O máximo é 3000.
##### Ações
Na seção **Ações**, configure as seguintes propriedades:
+ **Local da ação**: quando a opção **Fixar à direita** está ativada, todas as ações adicionadas sempre serão exibidas à direita da tabela, independentemente da rolagem do usuário.
+ **Ações**: adicione botões de ação à tabela. Você pode configurar esses botões para realizar ações específicas quando clicados por um usuário, como:
+ Executar uma ação de componente
+ Navegue até uma página diferente
+ Invocar uma ação de dados
+ Execute de forma personalizada JavaScript
+ Invoque uma automação
##### Expressões
O componente **Tabela** fornece várias áreas para usar expressões e recursos de ação em nível de linha que permitem personalizar e aprimorar a funcionalidade e a interatividade da tabela. Eles permitem que você referencie e exiba dados dinamicamente na tabela. Ao aproveitar esses campos de expressão, você pode criar colunas dinâmicas, passar dados para ações em nível de linha e referenciar dados de tabelas de outros componentes ou expressões em seu aplicativo.
##### Exemplos: referenciando valores de linha
`{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` Essas expressões permitem que você faça referência ao valor de uma coluna específica para a linha atual que está sendo renderizada. *Column Name*Substitua *columnName* ou pelo nome real da coluna que você deseja referenciar.
Exemplos:
+ `{{currentRow.productName}}`Exibe o nome do produto para a linha atual.
+ `{{currentRow["Supplier Name"]}}`Exibe o nome do fornecedor da linha atual, onde está o cabeçalho da coluna*Supplier Name*.
+ `{{currentRow.orderDate}}`Exibe a data do pedido para a linha atual.
##### Exemplos: referenciando a linha selecionada
`{{ui.table1.selectedRow["columnName"]}}`Essa expressão permite que você faça referência ao valor de uma coluna específica para a linha atualmente selecionada na tabela com o ID*table1*. *table1*Substitua pela ID real do componente da tabela e *columnName* pelo nome da coluna que você deseja referenciar.
Exemplos:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Exibe o valor total da linha atualmente selecionada na tabela com o ID*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Exibe o endereço de e-mail da linha atualmente selecionada na tabela com o ID*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Exibe o departamento da linha atualmente selecionada na tabela com o ID*employeesTable*.
##### Exemplos: criação de colunas personalizadas
Você pode adicionar colunas personalizadas a uma tabela com base nos dados retornados da ação, automação ou expressão de dados subjacente. Você pode usar valores e JavaScript expressões de coluna existentes para criar novas colunas.
Exemplos:
+ `{{currentRow.quantity * currentRow.unitPrice}}`Cria uma nova coluna exibindo o preço total multiplicando as colunas de quantidade e preço unitário.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Cria uma nova coluna exibindo a data do pedido em um formato mais legível.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Cria uma nova coluna exibindo o nome completo e o endereço de e-mail de cada linha.
##### Exemplos: personalização dos valores de exibição da coluna:
Você pode personalizar o valor de exibição de um campo em uma coluna da tabela definindo o `Value` campo do mapeamento da coluna. Isso permite que você aplique formatação ou transformações personalizadas aos dados exibidos.
Exemplos:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Exibe emojis de estrelas com base no valor da classificação de cada linha.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Exibe o valor da categoria com cada palavra em maiúscula para cada linha.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: exibe um emoji de círculo colorido e um texto com base no valor do status de cada linha.
##### Ações do botão em nível de linha
`{{currentRow.columnName}}`ou `{{currentRow["Column Name"]}}` Você pode usar essas expressões para transmitir o contexto da linha referenciada em uma ação em nível de linha, como navegar para outra página com os dados da linha selecionada ou acionar uma automação com os dados da linha.
Exemplos:
+ Se você tiver um botão de edição na coluna de ação da linha, poderá passar `{{currentRow.orderId}}` como parâmetro para navegar até uma página de edição do pedido com o ID do pedido selecionado.
+ Se você tiver um botão de exclusão na coluna de ação da linha, poderá passar `{{currentRow.customerName}}` para uma automação que envia um e-mail de confirmação ao cliente antes de excluir o pedido.
+ Se você tiver um botão de visualização de detalhes na coluna de ação da linha, poderá passar `{{currentRow.employeeId}}` para uma automação que registra o funcionário que visualizou os detalhes do pedido.
Ao aproveitar esses campos de expressão e recursos de ação em nível de linha, você pode criar tabelas altamente personalizadas e interativas que exibem e manipulam dados com base em seus requisitos específicos. Além disso, você pode conectar ações em nível de linha a outros componentes ou automações em seu aplicativo, permitindo fluxo de dados e funcionalidade contínuos.
### Detalhes
O componente **Detalhe** foi projetado para exibir informações detalhadas sobre um registro ou item específico. Ele fornece um espaço dedicado para apresentar dados abrangentes relacionados a uma única entidade ou linha, tornando-o ideal para mostrar detalhes detalhados ou facilitar as tarefas de entrada e edição de dados.
#### Propriedades detalhadas
O componente **Detalhe** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
O componente **Detalhe** também tem propriedades e opções de configuração específicas `Fields``Layout`, incluindo, `Expressions` e.
#### Layout
A seção **Layout** permite que você personalize a organização e a apresentação dos campos no componente **Detalhe**. Você pode configurar opções como:
+ **Número de colunas**: especifique o número de colunas nas quais os campos serão exibidos.
+ **Ordenação dos campos**: arraste e solte os campos para reordenar sua aparência.
+ **Espaçamento e alinhamento**: ajuste o espaçamento e o alinhamento dos campos dentro do componente.
#### Expressões e exemplos
O componente **Detalhe** fornece vários campos de expressão que permitem referenciar e exibir dados dentro do componente dinamicamente. Essas expressões permitem que você crie componentes **detalhados** personalizados e interativos que se conectam perfeitamente aos dados e à lógica do seu aplicativo.
##### Exemplo: dados de referência
`{{ui.details.data[0]?.["colName"]}}`: Essa expressão permite referenciar o valor da coluna chamada “colName” para o primeiro item (índice 0) na matriz de dados conectada ao componente **Detalhe** com a ID “detalhes”. Substitua “ColName” pelo nome real da coluna que você deseja referenciar. Por exemplo, a expressão a seguir exibirá o valor da coluna “customerName” para o primeiro item na matriz de dados conectada ao componente “details”:
```
{{ui.details.data[0]?.["customerName"]}}
```
**nota**
Essa expressão é útil quando o componente **Detalhe** está na mesma página da tabela que está sendo referenciada e você deseja exibir dados da primeira linha da tabela no componente **Detalhe**.
##### Exemplo: renderização condicional
`{{ui.table1.selectedRow["colName"]}}`: Essa expressão retornará verdadeira se a linha selecionada na tabela com o ID *table1* tiver dados para a coluna nomeada*colName*. Ele pode ser usado para mostrar ou ocultar condicionalmente o componente **Detalhe** com base no fato de a linha selecionada da tabela estar vazia ou não.
Exemplo:
Você pode usar essa expressão na `Visible if` propriedade do componente **Detalhe** para mostrá-la ou ocultá-la condicionalmente com base na linha selecionada na tabela.
```
{{ui.table1.selectedRow["customerName"]}}
```
Se essa expressão for avaliada como verdadeira (a linha selecionada no *table1* componente tem um valor para a *customerName* coluna), o componente **Detalhe** ficará visível. Se a expressão for avaliada como falsa (ou seja, a linha selecionada estiver vazia ou não tiver um valor para “CustomerName”), **o** componente Detalhe ficará oculto.
##### Exemplo: exibição condicional
`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: essa expressão exibe condicionalmente um emoji com base no valor de um componente ou campo de dados.
Detalhamento:
+ `ui.Component.value`: faz referência ao valor de um componente com o ID*Component*.
+ `=== "green"`: verifica se o valor do componente é igual à string “green”.
+ `? "🟢"`: Se a condição for verdadeira, exibe o emoji de círculo verde.
+ `: ui.Component.value === "yellow" ? "🟡"`: se a primeira condição for falsa, verifica se o valor do componente é igual à string “yellow”.
+ `? "🟡"`: Se a segunda condição for verdadeira, exibirá o emoji quadrado amarelo.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: se ambas as condições forem falsas, ela fará referência ao valor CustomerStatus "" do primeiro item na matriz de dados conectada ao componente Detalhe com a ID “detail1".
Essa expressão pode ser usada para exibir um emoji ou um valor específico com base no valor de um componente ou campo de dados dentro do componente **Detalhe**.
### Metrics
O componente **Métricas** é um elemento visual que exibe as principais métricas ou pontos de dados em um formato semelhante a um cartão. Ele foi projetado para fornecer uma forma concisa e visualmente atraente de apresentar informações importantes ou indicadores de desempenho.
#### Propriedades das métricas
O componente **Métricas** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
#### Tendência
O recurso de tendência das métricas permite que você exiba um indicador visual do desempenho ou da mudança ao longo do tempo para a métrica que está sendo exibida.
##### Valor da tendência
Esse campo permite especificar o valor ou a expressão que deve ser usada para determinar a direção e a magnitude da tendência. Normalmente, esse seria um valor que representa a mudança ou o desempenho em um período específico.
Exemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```
Essa expressão recupera o valor da month-over-month receita do primeiro item nos dados conectados às métricas “SalesMetrics”.
##### Tendência positiva
Esse campo permite inserir uma expressão que define a condição para uma tendência positiva. A expressão deve ser avaliada como verdadeira ou falsa.
Exemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```
Essa expressão verifica se o valor da month-over-month receita é maior que 0, indicando uma tendência positiva.
##### Tendência negativa
Esse campo permite inserir uma expressão que define a condição para uma tendência negativa. A expressão deve ser avaliada como verdadeira ou falsa.
Exemplo:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```
Essa expressão verifica se o valor da month-over-month receita é menor que 0, indicando uma tendência negativa.
##### Barra de cores
Essa opção permite ativar ou desativar a exibição de uma barra colorida para indicar visualmente o status da tendência.
##### Exemplos de barras de cores:
##### Exemplo: tendência das métricas de vendas
+ **Valor da tendência**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Tendência positiva**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Tendência negativa**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Barra de cores**: Ativada
##### Exemplo: tendência de métricas de inventário
+ **Valor da tendência**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendência positiva**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tendência negativa**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Barra de cores: ativada**
##### Exemplo: tendência de satisfação do cliente
+ **Valor da tendência**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Tendência positiva**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Tendência negativa**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Barra de cores**: Ativada
Ao configurar essas propriedades relacionadas à tendência, você pode criar componentes de **métricas** que fornecem uma representação visual do desempenho ou da mudança ao longo do tempo para a métrica que está sendo exibida.
Ao aproveitar essas expressões, você pode criar componentes de métricas altamente personalizados e interativos que referenciam e exibem dados dinamicamente, permitindo que você mostre as principais métricas, indicadores de desempenho e visualizações orientadas por dados em seu aplicativo.
#### Exemplos de expressão de métricas
No painel de propriedades, você pode inserir expressões para exibir o título, o valor primário, o valor secundário e a legenda do valor para exibir dinamicamente um valor.
##### Exemplo: referenciando o valor primário
`{{ui.metric1.primaryValue}}`: essa expressão permite que você faça referência ao valor principal do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página.
Exemplo: `{{ui.salesMetrics.primaryValue}}` exibirá o valor principal do componente *salesMetrics* **Métricas**.
##### Exemplo: referenciando um valor secundário
`{{ui.metric1.secondaryValue}}`: essa expressão permite que você faça referência ao valor secundário do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página.
Exemplo: `{{ui.revenueMetrics.secondaryValue}}` exibirá o valor secundário do componente *revenueMetrics* **Métricas**.
##### Exemplo: dados de referência
`{{ui.metric1.data}}`: essa expressão permite que você faça referência aos dados do componente **Métricas** com a ID *metric1* de outros componentes ou expressões na mesma página.
Exemplo: `{{ui.kpiMetrics.data}}` fará referência aos dados conectados ao componente *kpiMetrics* **Métricas**.
##### Exemplo: Exibição de valores de dados específicos:
`{{ui.metric1.data?.[0]?.id}}`: essa expressão é um exemplo de como exibir uma informação específica dos dados conectados ao componente **Métricas** com o ID*metric1*. É útil quando você deseja exibir uma propriedade específica do primeiro item nos dados.
Detalhamento:
+ `ui.metric1`: faz referência ao componente **Métricas** com o ID*metric1*.
+ `data`: refere-se às informações ou ao conjunto de dados conectado a esse componente.
+ `?.[0]`: significa o primeiro item ou entrada nesse conjunto de dados.
+ `?.id`: exibe o *id* valor ou identificador desse primeiro item ou entrada.
Exemplo: `{{ui.orderMetrics.data?.[0]?.orderId}}` exibirá o *orderId* valor do primeiro item nos dados conectados ao componente *orderMetrics* **Métricas**.
##### Exemplo: Exibição do comprimento dos dados
`{{ui.metric1.data?.length}}`: essa expressão demonstra como exibir o comprimento (número de itens) nos dados conectados ao componente **Métricas** com o ID*metric1*. É útil quando você deseja exibir o número de itens nos dados.
Detalhamento:
+ `ui.metric1.data`: faz referência ao conjunto de dados conectado ao componente.
+ `?.length`: acessa a contagem total ou o número de itens ou entradas nesse conjunto de dados.
Exemplo: `{{ui.productMetrics.data?.length}}` exibirá o número de itens nos dados conectados ao componente *productMetrics* **Métricas**.
### Repetidor
O componente **Repeater** é um componente dinâmico que permite gerar e exibir uma coleção de elementos com base em uma fonte de dados fornecida. Ele foi projetado para facilitar a criação de listas, grades ou padrões repetidos na interface de usuário do seu aplicativo. Alguns exemplos de casos de uso incluem:
+ Exibindo um cartão para cada usuário em uma conta
+ Mostrando uma lista de produtos que incluem imagens e um botão para adicioná-los ao carrinho
+ Mostrando uma lista de arquivos que o usuário pode acessar
O componente **Repetidor** se diferencia do componente **Tabela** com conteúdo rico. Um componente **Tabela** tem um formato estrito de linha e coluna. O **repetidor** pode exibir seus dados com mais flexibilidade.
#### Propriedades do repetidor
O componente **Repetidor** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, e. `Actions` Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
Além das propriedades comuns, o componente **Repetidor** tem as seguintes propriedades adicionais e opções de configuração.
#### Modelo de item
O **modelo de item** é um contêiner onde você pode definir a estrutura e os componentes que serão repetidos para cada item na fonte de dados. Você pode arrastar e soltar outros componentes nesse contêiner, como **texto**, **imagem**, **botão** ou qualquer outro componente necessário para representar cada item.
No **modelo de item**, você pode referenciar propriedades ou valores do item atual usando expressões no formato`{{currentItem.propertyName}}`.
Por exemplo, se sua fonte de dados contiver uma `itemName` propriedade, você poderá usá-la `{{currentItem.itemName}}` para exibir os nomes dos itens do item atual.
#### Layout
A seção **Layout** permite que você configure a disposição dos elementos repetidos dentro do componente repetidor.
##### Orientation (Orientação)
+ **Lista**: organiza os elementos repetidos verticalmente em uma única coluna.
+ **Grade**: organiza os elementos repetidos em um layout de grade com várias colunas.
##### Linhas por página
Especifique o número de linhas a serem exibidas por página no layout da lista. A paginação é fornecida para itens que ultrapassam o número especificado de linhas.
##### Colunas e linhas por página (grade)
+ **Colunas**: especifique o número de colunas no layout da grade.
+ **Linhas por página**: especifique o número de linhas a serem exibidas por página no layout da grade. A paginação é fornecida para itens que ultrapassam as dimensões especificadas da grade.
#### Expressões e exemplos
O componente **Repetidor** fornece vários campos de expressão que permitem referenciar e exibir dados dentro do componente dinamicamente. Essas expressões permitem que você crie componentes de **repetidor** personalizados e interativos que se conectam perfeitamente aos dados e à lógica do seu aplicativo.
##### Exemplo: referenciando itens
+ `{{currentItem.propertyName}}`: faça referência às propriedades ou valores do item atual no **Modelo do Item**.
+ `{{ui.repeaterID[index]}}`: faça referência a um item específico no componente repetidor por seu índice.
##### Exemplo: renderização de uma lista de produtos
+ **Fonte**: selecione a *Products* entidade como fonte de dados.
+ **Modelo de item**: adicione um componente de **contêiner** com um componente de **texto** interno para exibir o nome do produto (`{{currentItem.productName}}`) e um componente de **imagem** para exibir a imagem do produto (`{{currentItem.productImageUrl}}`).
+ **Layout**: `Orientation` defina o para `List` e ajuste o `Rows per Page` conforme desejado.
##### Exemplo: geração de uma grade de avatares de usuários
+ **Fonte**: use uma expressão para gerar uma matriz de dados do usuário (por exemplo,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Modelo de item**: adicione um componente de **imagem** e defina sua `Source` propriedade como`{{currentItem.avatarUrl}}`.
+ **Layout**: `Orientation` defina como`Grid`, especifique o número de `Columns` e `Rows per Page` e ajuste o `Space Between` e `Padding` conforme necessário.
Ao usar o `Repeater` componente, você pode criar interfaces de usuário dinâmicas e orientadas por dados, simplificando o processo de renderização de coleções de elementos e reduzindo a necessidade de repetição manual ou codificação permanente.
### Formulário
O componente Formulário foi projetado para capturar a entrada do usuário e facilitar as tarefas de entrada de dados em seu aplicativo. Ele fornece um layout estruturado para exibir campos de entrada, menus suspensos, caixas de seleção e outros controles de formulário, permitindo que os usuários insiram ou modifiquem dados sem problemas. Você pode aninhar outros componentes dentro de um componente de formulário, como uma tabela.
#### Propriedades do formulário
O componente **Formulário** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Actions` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
#### Gerar formulário
O recurso **Gerar formulário** facilita a criação rápida de campos de formulário preenchendo-os automaticamente com base em uma fonte de dados selecionada. Isso pode economizar tempo e esforço ao criar formulários que precisam exibir um grande número de campos.
**Para usar o recurso **Gerar formulário**:**
1. Nas propriedades do componente **Formulário**, localize a seção **Gerar formulário**.
1. Selecione a fonte de dados que você deseja usar para gerar os campos do formulário. Isso pode ser uma entidade, um fluxo de trabalho ou qualquer outra fonte de dados disponível em seu aplicativo.
1. Os campos do formulário serão gerados automaticamente com base na fonte de dados selecionada, incluindo rótulos de campo, tipos e mapeamentos de dados.
1. Revise os campos gerados e faça as personalizações necessárias, como adicionar regras de validação ou alterar a ordem dos campos.
1. Quando estiver satisfeito com a configuração do formulário, escolha **Enviar** para aplicar os campos gerados ao seu componente **Formulário**.
O recurso **Gerar formulário** é particularmente útil quando você tem um modelo de dados bem definido ou um conjunto de entidades em seu aplicativo para o qual você precisa capturar a entrada do usuário. Ao gerar automaticamente os campos do formulário, você pode economizar tempo e garantir a consistência em todos os formulários de sua inscrição.
Depois de usar o recurso **Gerar formulário**, você pode personalizar ainda mais o layout, as ações e as expressões do componente **Formulário** para atender às suas necessidades específicas.
#### Expressões e exemplos
Como outros componentes, você pode usar expressões para referenciar e exibir dados no componente **Formulário**. Por exemplo:
+ `{{ui.userForm.data.email}}`: faz referência ao valor do `email` campo da fonte de dados conectada ao componente **Formulário** com o ID`userForm`.
**nota**
Consulte [Propriedades comuns dos componentes](#common-properties) para obter mais exemplos de expressão das propriedades comuns.
Ao configurar essas propriedades e aproveitar as expressões, você pode criar componentes de formulário personalizados e interativos que se integram perfeitamente às fontes de dados e à lógica do seu aplicativo. Esses componentes podem ser usados para capturar a entrada do usuário, exibir dados pré-preenchidos e acionar ações com base nos envios de formulários ou nas interações do usuário.
### Fluxo escalonado
O componente **Stepflow** foi projetado para orientar os usuários por meio de processos ou fluxos de trabalho de várias etapas em seu aplicativo. Ele fornece uma interface estruturada e intuitiva para apresentar uma sequência de etapas, cada uma com seu próprio conjunto de entradas, validações e ações.
O componente Stepflow compartilha várias propriedades comuns com outros componentes, como `Name``Source`, e. `Actions` Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
O componente **Stepflow** tem propriedades e opções de configuração adicionais, como `Step Navigation``Validation`, e. `Expressions`
## Componentes de IA
### Geração AI
O componente **Gen AI** é um contêiner de agrupamento usado para agrupar componentes e a lógica que os acompanha para editá-los facilmente com IA usando o chat no estúdio de aplicativos. Quando você usa o chat para criar componentes, eles serão agrupados em um contêiner **Gen AI**. Para obter informações sobre como editar ou usar esse componente, consulte[Criando ou editando seu aplicativo](generative-ai.md#generative-ai-build-app).
## Componentes de texto e número
### Entrada de texto
O componente **de entrada de texto** permite que os usuários insiram e enviem dados de texto em seu aplicativo. Ele fornece uma maneira simples e intuitiva de capturar a entrada do usuário, como nomes, endereços ou qualquer outra informação textual.
+ `{{ui.inputTextID.value}}`: retorna o valor fornecido no campo de entrada.
+ `{{ui.inputTextID.isValid}}`: retorna a validade do valor fornecido no campo de entrada.
### Texto
O componente **Texto** é usado para exibir informações textuais em seu aplicativo. Ele pode ser usado para mostrar texto estático, valores dinâmicos ou conteúdo gerado a partir de expressões.
### Área de texto
O componente **Área de texto** foi projetado para capturar a entrada de texto de várias linhas dos usuários. Ele fornece uma área de campo de entrada maior para que os usuários insiram entradas de texto mais longas, como descrições, notas ou comentários.
+ `{{ui.textAreaID.value}}`: retorna o valor fornecido na área de texto.
+ `{{ui.textAreaID.isValid}}`: retorna a validade do valor fornecido na área de texto.
### E-mail
O componente **E-mail** é um campo de entrada especializado projetado para capturar endereços de e-mail dos usuários. Ele pode aplicar regras de validação específicas para garantir que o valor inserido esteja de acordo com o formato de e-mail correto.
+ `{{ui.emailID.value}}`: retorna o valor fornecido no campo de entrada do e-mail.
+ `{{ui.emailID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do e-mail.
### Senha
O componente **Senha** é um campo de entrada projetado especificamente para que os usuários insiram informações confidenciais, como senhas ou códigos PIN. Ele mascara os caracteres inseridos para manter a privacidade e a segurança.
+ `{{ui.passwordID.value}}`: retorna o valor fornecido no campo de entrada da senha.
+ `{{ui.passwordID.isValid}}`: retorna a validade do valor fornecido no campo de entrada da senha.
### Pesquisa
O componente **Pesquisar** fornece aos usuários um campo de entrada dedicado para realizar consultas de pesquisa ou inserir termos de pesquisa nos dados preenchidos no aplicativo.
+ `{{ui.searchID.value}}`: retorna o valor fornecido no campo de pesquisa.
### Telefone
O componente **Telefone** é um campo de entrada personalizado para capturar números de telefone ou outras informações de contato dos usuários. Ele pode incluir regras de validação específicas e opções de formatação para garantir que o valor inserido esteja de acordo com o formato correto do número de telefone.
+ `{{ui.phoneID.value}}`: retorna o valor fornecido no campo de entrada do telefone.
+ `{{ui.phoneID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do telefone.
### Número
O componente **Número** é um campo de entrada projetado especificamente para que os usuários insiram valores numéricos. Ele pode aplicar regras de validação para garantir que o valor inserido seja um número válido dentro de um intervalo ou formato especificado.
+ `{{ui.numberID.value}}`: retorna o valor fornecido no campo de entrada numérica.
+ `{{ui.numberID.isValid}}`: retorna a validade do valor fornecido no campo de entrada do número.
### Moeda
O componente **Moeda** é um campo de entrada especializado para capturar valores ou quantias monetárias. Ele pode incluir opções de formatação para exibir símbolos monetários, separadores decimais e aplicar regras de validação específicas às entradas monetárias.
+ `{{ui.currencyID.value}}`: retorna o valor fornecido no campo de entrada da moeda.
+ `{{ui.currencyID.isValid}}`: retorna a validade do valor fornecido no campo de entrada da moeda.
### Par de detalhes
O componente **Detail pair** é usado para exibir pares de valores-chave ou pares de informações relacionadas em um formato estruturado e legível. É comumente usado para apresentar detalhes ou metadados associados a um item ou entidade específica.
## Componentes de seleção
### Switch
O componente **Switch** é um controle de interface de usuário que permite aos usuários alternar entre dois estados ou opções, como. on/off, true/false, or enabled/disabled Ele fornece uma representação visual do estado atual e permite que os usuários o alterem com um único clique ou toque.
### Trocar de grupo
O componente do **grupo Switch** é uma coleção de controles de switch individuais que permitem aos usuários selecionar uma ou mais opções de um conjunto predefinido. Ele fornece uma representação visual das opções selecionadas e não selecionadas, facilitando a compreensão e a interação dos usuários com as opções disponíveis.
#### Alternar campos de expressão de grupo
+ `{{ui.switchGroupID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada opção ativada pelo usuário do aplicativo.
### Grupo de caixas de seleção
O componente **Grupo de caixas de seleção** apresenta aos usuários um grupo de caixas de seleção, permitindo que eles selecionem várias opções simultaneamente. É útil quando você deseja fornecer aos usuários a capacidade de escolher um ou mais itens em uma lista de opções.
#### Campos de expressão do grupo de caixas de seleção
+ `{{ui.checkboxGroupID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada caixa de seleção selecionada pelo usuário do aplicativo.
### Grupo de rádio
O componente **Grupo de rádio** é um conjunto de botões de rádio que permitem aos usuários selecionar uma única opção dentre várias opções mutuamente exclusivas. Ele garante que apenas uma opção possa ser selecionada por vez, fornecendo uma maneira clara e inequívoca para os usuários fazerem uma seleção.
#### Campos de expressão de grupos de rádio
Os campos a seguir podem ser usados em expressões.
+ `{{ui.radioGroupID.value}}`: retorna o valor do botão de rádio selecionado pelo usuário do aplicativo.
### Seleção única
O componente **Seleção única** apresenta aos usuários uma lista de opções, a partir da qual eles podem selecionar um único item. É comumente usado em cenários em que os usuários precisam escolher entre um conjunto predefinido de opções, como selecionar uma categoria, um local ou uma preferência.
#### Campos de expressão de seleção única
+ `{{ui.singleSelectID.value}}`: retorna o valor do item da lista selecionado pelo usuário do aplicativo.
### Seleção múltipla
O componente de **seleção múltipla** é semelhante ao componente de **seleção única**, mas permite que os usuários selecionem várias opções simultaneamente em uma lista de opções. É útil quando os usuários precisam fazer várias seleções a partir de um conjunto predefinido de opções, como selecionar várias tags, interesses ou preferências.
#### Campos de expressão de seleção múltipla
+ `{{ui.multiSelectID.value}}`: retorna uma matriz de cadeias de caracteres contendo o valor de cada item da lista selecionado pelo usuário do aplicativo.
## Botões e componentes de navegação
O estúdio de aplicativos fornece uma variedade de componentes de botão e navegação para permitir que os usuários acionem ações e naveguem em seu aplicativo.
### Componentes do botão
Os componentes de botão disponíveis são:
+ Button
+ Botão delineado
+ Botão de ícone
+ Botão de texto
Esses componentes de botão compartilham as seguintes propriedades comuns:
#### Conteúdo
+ **Rótulo do botão**: o texto a ser exibido no botão.
#### Tipo
+ **Botão**: um botão padrão.
+ **Esboçado**: um botão com um estilo delineado.
+ **Ícone**: um botão com um ícone.
+ **Texto**: um botão somente de texto.
#### Tamanho
O tamanho do botão. Os valores possíveis são `Small`, `Medium` e `Large`.
#### Ícone
Você pode selecionar entre uma variedade de ícones a serem exibidos no botão, incluindo:
+ Envelope fechado
+ Bell
+ Pessoa
+ Menu de hambúrgu
+ Pesquisa
+ Informações circuladas
+ Engrenagem
+ Chevron Esquerda
+ Chevron à direita
+ Pontos horizontais
+ Lixeira
+ Edição
+ Verificar
+ Fechar
+ Início
+ Plus
#### Acionadores
Quando o botão é clicado, você pode configurar uma ou mais ações a serem acionadas. Os tipos de ação disponíveis são:
+ **Básico**
+ Executar ação do componente: executa uma ação específica dentro de um componente.
+ Navegar: navega até outra página ou exibição.
+ Ação de invocação de dados: aciona uma ação relacionada a dados, como criar, atualizar ou excluir um registro.
+ **Advanced (Avançado)**
+ JavaScript: executa JavaScript código personalizado.
+ Invoke Automation: inicia uma automação ou fluxo de trabalho existente.
#### JavaScript propriedades do botão de ação
Selecione o tipo de `JavaScript` ação para executar o JavaScript código personalizado ao clicar no botão.
##### Código-fonte
No `Source code` campo, você pode inserir sua JavaScript expressão ou função. Por exemplo:
```
return "Hello World";
```
Isso simplesmente retornará a string `Hello World` quando o botão for clicado.
##### Condição: Executar se
Você também pode fornecer uma expressão booleana que determine se a JavaScript ação deve ser executada ou não. Neste caso, usa-se a seguinte sintaxe:
```
{{ui.textinput1.value !== ""}}
```
Neste exemplo, a JavaScript ação só será executada se o valor do `textinput1` componente não for uma string vazia.
Ao usar essas opções avançadas de acionamento, você pode criar comportamentos de botão altamente personalizados que se integram diretamente à lógica e aos dados do seu aplicativo. Isso permite que você estenda a funcionalidade integrada dos botões e adapte a experiência do usuário às suas necessidades específicas.
**nota**
Sempre teste minuciosamente suas JavaScript ações para garantir que estejam funcionando conforme o esperado.
### Hiperlink
O componente **Hyperlink** fornece um link clicável para navegar pelas rotas externas URLs ou internas do aplicativo.
#### Propriedades do hiperlink
##### Conteúdo
+ **Rótulo do hiperlink**: o texto a ser exibido como rótulo do hiperlink.
##### URL
O URL de destino do hiperlink, que pode ser um site externo ou uma rota de aplicativo interna.
##### Acionadores
Quando o hiperlink é clicado, você pode configurar uma ou mais ações a serem acionadas. Os tipos de ação disponíveis são os mesmos dos componentes do botão.
## Componentes de data e hora
### Data
O componente **Data** permite que os usuários selecionem e insiram datas.
O componente **Data** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
Além das propriedades comuns, o componente **Data** tem as seguintes propriedades específicas:
#### Propriedades de data
##### Formato
+ **YYYY/MM/DD**,, **DD/MM/YYYY**, **YYYY/MM/DD**YYYY/DD/MM****, **MM/DD**, **DD/MM**: O formato no qual a data deve ser exibida.
##### Valor
+ **AAAA-MM-DD**: O formato no qual o valor da data é armazenado internamente.
##### Data mínima
+ **AAAA-MM-DD**: A data mínima que pode ser selecionada.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Data máxima
+ **AAAA-MM-DD**: A data máxima que pode ser selecionada.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Tipo de calendário
+ **1 mês**, **2 meses**: o tipo de interface do usuário do calendário a ser exibida.
##### Datas para deficientes
+ **Fonte**: A fonte de dados para as datas que devem ser desativadas. Por exemplo: Nenhum, Expressão.
+ **Datas desativadas**: uma expressão que determina quais datas devem ser desativadas, como:
+ `{{currentRow.column}}`: desativa as datas que correspondem à avaliação dessa expressão.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Desativa datas anteriores a 1º de janeiro de 2023
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Desativa fins de semana.
##### Comportamento
+ **Visível se**: Uma expressão que determina a visibilidade do componente **Data**.
+ **Desativar se**: Uma expressão que determina se o componente **Data** deve ser desativado.
#### Validação
A seção **Validação** permite que você defina regras e restrições adicionais para a entrada da data. Ao configurar essas regras de validação, você pode garantir que os valores de data inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo. Você pode adicionar os seguintes tipos de validações:
+ **Obrigatório**: Essa opção garante que o usuário insira um valor de data antes de enviar o formulário.
+ **Personalizado**: você pode criar regras de validação personalizadas usando JavaScript expressões. Por exemplo:
```
{{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
```
Essa expressão verifica se a data inserida é anterior a 1º de janeiro de 2023. Se a condição for verdadeira, a validação falhará.
Você também pode fornecer uma mensagem de validação personalizada para ser exibida quando a validação não for atendida:
```
"Validation not met. The date must be on or after January 1, 2023."
```
Ao configurar essas regras de validação, você pode garantir que os valores de data inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo.
#### Expressões e exemplos
O componente **Data** fornece o seguinte campo de expressão:
+ `{{ui.dateID.value}}`: retorna o valor da data inserido pelo usuário no formato`YYYY-MM-DD`.
### Hora
O componente **Tempo** permite que os usuários selecionem e insiram valores de tempo. Ao configurar as várias propriedades do componente **Time**, você pode criar campos de entrada de tempo que atendam aos requisitos específicos do seu aplicativo, como restringir o intervalo de tempo selecionável, desativar determinados horários e controlar a visibilidade e a interatividade do componente.
#### Propriedades do tempo
O componente **Time** compartilha várias propriedades comuns com outros componentes`Name`, como`Source`, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
Além das propriedades comuns, o componente **Time** tem as seguintes propriedades específicas:
##### Intervalos de tempo
+ **5 minutos**, **10 minutos**, **15 minutos**, **20 minutos**, **25 minutos**, **30 minutos**, **60 minutos**: os intervalos disponíveis para selecionar a hora.
##### Valor
+ **HH:MM AA**: O formato no qual o valor da hora é armazenado internamente.
**nota**
Esse valor deve corresponder ao formato de`HH:MM AA`.
##### Placeholder
+ **Configurações do calendário**: o texto do espaço reservado exibido quando o campo de hora está vazio.
##### Tempo mínimo
+ **HH:MM AA**: O tempo mínimo que pode ser selecionado.
**nota**
Esse valor deve corresponder ao formato de`HH:MM AA`.
##### Tempo máximo
+ **HH:MM AA**: O tempo máximo que pode ser selecionado.
**nota**
Esse valor deve corresponder ao formato de`HH:MM AA`.
##### Horários para deficientes
+ **Fonte**: A fonte de dados para os horários que devem ser desativados (por exemplo, Nenhum, Expressão).
+ **Horários desativados**: uma expressão que determina quais horários devem ser desativados, como`{{currentRow.column}}`.
##### Configuração de horários desativada
Você pode usar a seção **Horários desativados** para especificar quais valores de tempo não devem estar disponíveis para seleção.
##### Fonte
+ **Nenhum**: Nenhum horário está desativado.
+ **Expressão**: você pode usar uma JavaScript expressão para determinar quais horários devem ser desativados, como`{{currentRow.column}}`.
##### Exemplo de expressão:
```
{{currentRow.column === "Lunch Break"}}
```
Essa expressão desativaria qualquer momento em que a coluna “Pausa para o almoço” fosse verdadeira para a linha atual.
Ao configurar essas regras de validação e expressões de tempo desativadas, você pode garantir que os valores de tempo inseridos pelos usuários atendam aos requisitos específicos do seu aplicativo.
##### Comportamento
+ **Visível se**: uma expressão que determina a visibilidade do componente Time.
+ **Desabilitar if**: uma expressão que determina se o componente Time deve ser desativado.
##### Validação
+ **Obrigatório**: uma opção que garante que o usuário insira um valor de tempo antes de enviar o formulário.
+ **Personalizado**: permite criar regras de validação personalizadas usando JavaScript expressões.
**Mensagem de validação personalizada**: a mensagem a ser exibida quando a validação personalizada não for atendida.
Por exemplo:
```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```
Essa expressão verifica se a hora inserida é 9:00 AM ou 9:30 AM. Se a condição for verdadeira, a validação falhará.
Você também pode fornecer uma mensagem de validação personalizada para ser exibida quando a validação não for atendida:
```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```
#### Expressões e exemplos
O componente Time fornece o seguinte campo de expressão:
+ `{{ui.timeID.value}}`: retorna o valor da hora inserido pelo usuário no formato HH:MM AA.
##### Exemplo: valor do tempo
+ `{{ui.timeID.value}}`: retorna o valor do tempo inserido pelo usuário no formato`HH:MM AA`.
##### Exemplo: comparação de tempo
+ `{{ui.timeInput.value > "10:00 AM"}}`: Verifica se o valor do horário é maior que 10:00 da manhã.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Verifica se o valor do horário é menor que 17:00.
### Intervalo de datas
O componente **Intervalo de datas** permite que os usuários selecionem e insiram um intervalo de datas. Ao configurar as várias propriedades do componente Intervalo de datas, você pode criar campos de entrada de intervalo de datas que atendam aos requisitos específicos do seu aplicativo, como restringir o intervalo de datas selecionável, desativar determinadas datas e controlar a visibilidade e a interatividade do componente.
#### Propriedades do intervalo de datas
O componente **Intervalo de datas** compartilha várias propriedades comuns com outros componentes `Name``Source`, como, `Validation` e. Para obter mais informações sobre essas propriedades, consulte[Propriedades comuns dos componentes](#common-properties).
Além das propriedades comuns, o componente **Intervalo de datas** tem as seguintes propriedades específicas:
##### Formato
+ **MM/DD/YYYY**: o formato no qual o intervalo de datas deve ser exibido.
##### Data de início
+ **AAAA-MM-DD**: A data mínima que pode ser selecionada como o início do intervalo.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Data de término
+ **AAAA-MM-DD**: A data máxima que pode ser selecionada como o final do intervalo.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Placeholder
+ **Configurações do calendário**: o texto do espaço reservado exibido quando o campo do intervalo de datas está vazio.
##### Data mínima
+ **AAAA-MM-DD**: A data mínima que pode ser selecionada.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Data máxima
+ **AAAA-MM-DD**: A data máxima que pode ser selecionada.
**nota**
Esse valor deve corresponder ao formato de`YYYY-MM-DD`.
##### Tipo de calendário
+ **1 mês**: o tipo de interface de usuário do calendário a ser exibida. Por exemplo, um único mês.
+ **2 meses**: o tipo de interface de usuário do calendário a ser exibida. Por exemplo, dois meses.
##### Dias obrigatórios selecionados
+ **0**: O número de dias obrigatórios que devem ser selecionados dentro do intervalo de datas.
##### Datas para deficientes
+ **Fonte**: A fonte de dados para as datas que devem ser desativadas (por exemplo, Nenhuma, Expressão, Entidade ou Automação).
+ **Datas desativadas**: uma expressão que determina quais datas devem ser desativadas, como`{{currentRow.column}}`.
##### Validação
A seção **Validação** permite que você defina regras e restrições adicionais para a entrada do intervalo de datas.
#### Expressões e exemplos
O componente **Intervalo de datas** fornece os seguintes campos de expressão:
+ `{{ui.dateRangeID.startDate}}`: retorna a data de início do intervalo selecionado no formato`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: retorna a data final do intervalo selecionado no formato`YYYY-MM-DD`.
##### Exemplo: cálculo da diferença de datas
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Calcula o número de dias entre as datas de início e término.
##### Exemplo: visibilidade condicional com base no intervalo de datas
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Verifica se o intervalo de datas selecionado está fora do ano de 2023.
##### Exemplo: datas desativadas com base nos dados da linha atual
+ `{{currentRow.isHoliday}}`Desativa as datas em que a coluna “IsHoliday” na linha atual é verdadeira.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Desativa as datas anteriores a 1º de janeiro de 2023 com base na “DateColumn” na linha atual.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Desativa os fins de semana com base na “DateColumn” na linha atual.
##### Validação personalizada
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Verifica se a data de início é posterior à data de término, o que falharia na validação personalizada.
## Componentes de mídia
O estúdio de aplicativos fornece vários componentes para incorporar e exibir vários tipos de mídia em seu aplicativo.
### Incorporação do iFrame
O componente de **incorporação do iFrame** permite que você incorpore conteúdo externo da Web ou aplicativos em seu aplicativo usando um iFrame.
#### Propriedades de incorporação do iFrame
##### URL
**nota**
A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md).
O URL do conteúdo externo ou do aplicativo que você deseja incorporar.
##### Layout
+ **Largura**: a largura do iFrame, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 300 px).
+ **Altura**: a altura do iFrame, especificada como uma porcentagem (%) ou um valor fixo de pixels.
### Upload do S3
O componente de **upload do S3** permite que os usuários façam upload de arquivos para um bucket do Amazon S3. Ao configurar o componente **S3 Upload**, você pode permitir que os usuários carreguem facilmente arquivos para o armazenamento Amazon S3 do seu aplicativo e, em seguida, aproveitem as informações do arquivo carregado na lógica e na interface do usuário do seu aplicativo.
**nota**
Lembre-se de garantir que as permissões necessárias e as configurações de bucket do Amazon S3 estejam em vigor para suportar os requisitos de upload e armazenamento de arquivos do seu aplicativo.
#### Propriedades de upload do S3
##### Configuração S3
+ **Conector**: selecione o conector Amazon S3 pré-configurado para usar nos uploads de arquivos.
+ **Bucket**: O bucket do Amazon S3 em que os arquivos serão carregados.
+ **Pasta**: a pasta dentro do bucket do Amazon S3 em que os arquivos serão armazenados.
+ **Nome do arquivo**: a convenção de nomenclatura para os arquivos enviados.
##### Configuração de upload de arquivo
+ **Rótulo**: O rótulo ou as instruções exibidas acima da área de carregamento do arquivo.
+ **Descrição**: instruções ou informações adicionais sobre o upload do arquivo.
+ **Tipo de arquivo**: o tipo de arquivo que pode ser carregado. Por exemplo: imagem, documento ou vídeo.
+ **Tamanho**: o tamanho máximo dos arquivos individuais que podem ser enviados.
+ **Rótulo do botão**: o texto exibido no botão de seleção do arquivo.
+ **Estilo do botão**: o estilo do botão de seleção de arquivos. Por exemplo, delineado ou preenchido.
+ **Tamanho do botão**: o tamanho do botão de seleção do arquivo.
##### Validação
+ **Número máximo de arquivos**: o número máximo de arquivos que podem ser enviados de uma vez.
+ **Tamanho máximo do arquivo**: o tamanho máximo permitido para cada arquivo individual.
##### Acionadores
+ **Em caso de sucesso**: ações a serem acionadas quando o upload de um arquivo for bem-sucedido.
+ **Em caso de falha**: ações a serem acionadas quando o upload de um arquivo falhar.
#### Campos de expressão de upload do S3
O componente de **upload do S3** fornece os seguintes campos de expressão:
+ `{{ui.s3uploadID.files}}`: retorna uma matriz dos arquivos que foram enviados.
+ `{{ui.s3uploadID.files[0]?.size}}`: retorna o tamanho do arquivo no índice designado.
+ `{{ui.s3uploadID.files[0]?.type}}`: retorna o tipo do arquivo no índice designado.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: retorna o nome do arquivo, sem sufixo de extensão, no índice designado.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: retorna o nome do arquivo com seu sufixo de extensão no índice designado.
#### Expressões e exemplos
##### Exemplo: acessar arquivos enviados
+ `{{ui.s3uploadID.files.length}}`: retorna o número de arquivos que foram enviados.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: retorna uma lista separada por vírgulas dos nomes dos arquivos que foram enviados.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: retorna uma matriz somente dos arquivos de imagem que foram enviados.
##### Exemplo: validação de uploads de arquivos
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: verifica se algum dos arquivos enviados tem mais de 5 MB de tamanho.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: verifica se todos os arquivos enviados são imagens PNG.
+ `{{ui.s3uploadID.files.length > 3}}`: verifica se mais de 3 arquivos foram enviados.
##### Exemplo: acionando ações
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: exibe uma mensagem de sucesso se pelo menos um arquivo tiver sido carregado.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: aciona uma automação de processamento de vídeo se algum arquivo de vídeo tiver sido carregado.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: recupera URLs os arquivos enviados, que podem ser usados para exibir ou processar posteriormente os arquivos.
Essas expressões permitem acessar os arquivos enviados, validar os uploads dos arquivos e acionar ações com base nos resultados do upload do arquivo. Ao utilizar essas expressões, você pode criar um comportamento mais dinâmico e inteligente na funcionalidade de upload de arquivos do seu aplicativo.
**nota**
*s3uploadID*Substitua pelo ID do seu componente de **upload do S3**.
### Componente de visualização de PDF
O componente **visualizador de PDF** permite que os usuários visualizem e interajam com documentos PDF em seu aplicativo. O App Studio oferece suporte a esses diferentes tipos de entrada para a fonte PDF. O componente **visualizador de PDF** oferece flexibilidade na forma como você pode integrar documentos PDF ao seu aplicativo, seja a partir de um URL estático, de um URI de dados embutido ou de conteúdo gerado dinamicamente.
#### Propriedades do visualizador de PDF
##### Fonte
**nota**
A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md).
A fonte do documento PDF, que pode ser uma expressão, entidade, URL ou automação.
##### Expressão
Use uma expressão para gerar dinamicamente a fonte em PDF.
##### Entidade
Conecte o componente do **visualizador de PDF** a uma entidade de dados que contém o documento PDF.
##### URL
Especifique o URL do documento PDF.
##### URL
Você pode inserir uma URL que aponte para o documento PDF que você deseja exibir. Isso pode ser um URL público da web ou um URL dentro do seu próprio aplicativo.
Exemplo: `https://example.com/document.pdf`
##### URI de dados
Um **URI de dados** é uma forma compacta de incluir pequenos arquivos de dados (como imagens ou PDFs) embutidos em seu aplicativo. O documento PDF é codificado como uma string base64 e incluído diretamente na configuração do componente.
##### Bolha ou ArrayBuffer
Você também pode fornecer o documento PDF como um Blob ou ArrayBuffer objeto, o que permite gerar ou recuperar dinamicamente os dados PDF de várias fontes em seu aplicativo.
##### Automação
Conecte o componente do **visualizador de PDF** a uma automação que fornece o documento PDF.
##### Ações
+ **Download**: adiciona um botão ou link que permite aos usuários baixar o documento PDF.
##### Layout
+ **Largura**: a largura do Visualizador de PDF, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 600 px).
+ **Altura**: a altura do Visualizador de PDF, especificada como um valor fixo em pixels.
### Visualizador de imagens
O componente **Visualizador de imagens** permite que os usuários visualizem e interajam com arquivos de imagem em seu aplicativo.
#### Propriedades do visualizador de imagens
##### Fonte
**nota**
A fonte da mídia exibida nesse componente deve ser permitida nas configurações de segurança de conteúdo do seu aplicativo. Para obter mais informações, consulte [Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo](app-content-security-settings-csp.md).
+ **Entidade**: Conecte o componente **Visualizador de imagens** a uma entidade de dados que contém o arquivo de imagem.
+ **URL**: especifique a URL do arquivo de imagem.
+ **Expressão**: use uma expressão para gerar dinamicamente a fonte da imagem.
+ **Automação**: Conecte o componente **Visualizador de imagens** a uma automação que fornece o arquivo de imagem.
##### Texto alternativo
A descrição em texto alternativo da imagem, usada para fins de acessibilidade.
##### Layout
+ **Ajuste da imagem**: determina como a imagem deve ser redimensionada e exibida dentro do componente. Por exemplo: `Contain`, `Cover` ou `Fill`.
+ **Largura**: a largura do componente **Visualizador de imagens**, especificada como uma porcentagem (%) ou um valor fixo de pixels (por exemplo, 300 px).
+ **Altura**: a altura do componente **Visualizador de imagens**, especificada como um valor fixo em pixels.
+ **Plano de fundo**: permite que você defina uma cor ou imagem de fundo para o componente **Visualizador de imagens**.
# Automações e ações: defina a lógica de negócios do seu aplicativo
**As automações** são a forma como você define a lógica de negócios do seu aplicativo. Os principais componentes de uma automação são: gatilhos que iniciam a automação, uma sequência de uma ou mais ações, parâmetros de entrada usados para passar dados para a automação e uma saída.
**Topics**
+ [Conceitos de automação](automations-concepts.md)
+ [Criação, edição e exclusão de automações](automations-create-edit-delete.md)
+ [Adicionar, editar e excluir ações de automação](automations-actions-add-edit-delete.md)
+ [Referência de ações do Automation](automations-actions-reference.md)
# Conceitos de automação
Aqui estão alguns conceitos e termos que você deve conhecer ao definir e configurar a lógica de negócios do seu aplicativo usando automações no App Studio.
## Automações
**As automações** são a forma como você define a lógica de negócios do seu aplicativo. Os principais componentes de uma automação são: gatilhos que iniciam a automação, uma sequência de uma ou mais ações, parâmetros de entrada usados para passar dados para a automação e uma saída.
## Ações
Uma ação de automação, comumente chamada de **ação**, é uma etapa individual da lógica que compõe uma automação. Cada ação executa uma tarefa específica, seja enviando um e-mail, criando um registro de dados, invocando uma função Lambda ou chamando. APIs As ações são adicionadas às automações da biblioteca de ações e podem ser agrupadas em instruções condicionais ou loops.
## Parâmetros de entrada de automação
Os **parâmetros de entrada de automação** são valores de entrada dinâmicos que você pode passar dos componentes para as automações para torná-las flexíveis e reutilizáveis. Pense nos parâmetros como variáveis para sua automação. Em vez de codificar valores em uma automação, você pode definir parâmetros e fornecer valores diferentes quando necessário. Os parâmetros permitem que você use a mesma automação com entradas diferentes cada vez que ela é executada.
## Saída simulada
Algumas ações interagem com recursos ou serviços externos usando conectores. Ao usar o ambiente de pré-visualização, os aplicativos não interagem com serviços externos. Para testar ações que usam conectores no ambiente de visualização, você pode usar a saída **simulada para simular o comportamento e a saída** do conector. A saída simulada é configurada usando JavaScript, e o resultado é armazenado nos resultados de uma ação, assim como a resposta do conector é armazenada em um aplicativo publicado.
Ao usar a simulação, você pode usar o ambiente de visualização para testar vários cenários e seu impacto em outras ações com a automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem chamar o serviço externo por meio de conectores.
## Saída de automação
Uma **saída de automação** é usada para passar valores de uma automação para outros recursos de um aplicativo, como componentes ou outras automações. As saídas de automação são configuradas como expressões, e a expressão pode retornar um valor estático ou dinâmico calculado a partir de parâmetros e ações de automação. Por padrão, as automações não retornam nenhum dado, incluindo os resultados das ações dentro da automação.
Alguns exemplos de como as saídas de automação podem ser usadas:
+ Você pode configurar uma saída de automação para retornar uma matriz e passar essa matriz para preencher um componente de dados.
+ Você pode usar uma automação para calcular um valor e passar esse valor para várias outras automações como forma de centralizar e reutilizar a lógica de negócios.
## Acionadores
Um **gatilho** determina quando e em quais condições uma automação será executada. Alguns exemplos de acionadores são `On click` para botões e `On select` entradas de texto. O tipo de componente determina a lista de acionadores disponíveis para esse componente. Os acionadores são adicionados aos [componentes](concepts.md#concepts-component) e configurados no estúdio de aplicativos.
# Criação, edição e exclusão de automações
**Contents**
+ [Criando uma automação](#automations-create)
+ [Visualizando ou editando propriedades de automação](#automations-edit)
+ [Excluindo uma automação](#automations-delete)
## Criando uma automação
Use o procedimento a seguir para criar uma automação em um aplicativo do App Studio. Depois de criada, uma automação deve ser configurada editando suas propriedades e adicionando ações a ela.
**Para criar uma automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. Se você não tiver automações, escolha **\$1 Adicionar automação** na tela. **Caso contrário, no menu **Automações** do lado esquerdo, escolha \$1 Adicionar.**
1. Uma nova automação será criada e você poderá começar a editar suas propriedades ou adicionar e configurar ações para definir a lógica de negócios do seu aplicativo.
## Visualizando ou editando propriedades de automação
Use o procedimento a seguir para visualizar ou editar propriedades de automação.
**Para visualizar ou editar propriedades de automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. **No menu **Automações** à esquerda, escolha a automação para a qual você deseja visualizar ou editar propriedades para abrir o menu Propriedades do lado direito.**
1. No menu **Propriedades**, você pode ver as seguintes propriedades:
+ **Identificador de automação**: o nome exclusivo da automação. Para editá-lo, insira um novo identificador no campo de texto.
+ **Parâmetros** de automação: os parâmetros de automação são usados para transmitir valores dinâmicos da interface do usuário do seu aplicativo para ações de automação e dados. Para adicionar um parâmetro, escolha **\$1 Adicionar**. Escolha o ícone de lápis para alterar o nome, a descrição ou o tipo do parâmetro. Para remover um parâmetro, escolha o ícone da lixeira.
**dica**
Você também pode adicionar parâmetros de automação diretamente da tela.
+ **Saída de automação**: A saída de automação é usada para configurar quais dados da automação podem ser referenciados em outras automações ou componentes. Por padrão, as automações não criam uma saída. Para adicionar uma saída de automação, escolha **\$1 Adicionar**. Para remover a saída, escolha o ícone da lixeira.
1. Você define o que uma automação faz adicionando e configurando ações. Para obter mais informações sobre ações, consulte [Adicionar, editar e excluir ações de automação](automations-actions-add-edit-delete.md) [Referência de ações do Automation](automations-actions-reference.md) e.
## Excluindo uma automação
Use o procedimento a seguir para excluir uma automação em um aplicativo do App Studio.
**Para excluir uma automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. **No menu **Automações** do lado esquerdo, escolha o menu de elipses da automação que você deseja excluir e escolha Excluir.** Como alternativa, você pode escolher o ícone da lixeira no menu **Propriedades** do lado direito da automação.
1. Na caixa de diálogo de confirmação, escolha **Excluir**.
# Adicionar, editar e excluir ações de automação
Uma ação de automação, comumente chamada de **ação**, é uma etapa individual da lógica que compõe uma automação. Cada ação executa uma tarefa específica, seja enviando um e-mail, criando um registro de dados, invocando uma função Lambda ou chamando. APIs As ações são adicionadas às automações da biblioteca de ações e podem ser agrupadas em instruções condicionais ou loops.
**Contents**
+ [Adicionando uma ação de automação](#automations-actions-add)
+ [Visualizando e editando propriedades da ação de automação](#automations-actions-edit)
+ [Excluindo uma ação de automação](#automations-actions-delete)
## Adicionando uma ação de automação
Use o procedimento a seguir para adicionar uma ação a uma automação em um aplicativo do App Studio.
**Para adicionar uma ação de automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. No menu **Automações** do lado esquerdo, escolha a automação à qual você deseja adicionar uma ação.
1. No menu **Ação** à direita, escolha a ação que você deseja adicionar ou arraste e solte a ação na tela. Depois que a ação é criada, você pode escolher a ação para configurar as propriedades da ação para definir a funcionalidade da ação. Para obter mais informações sobre propriedades de ação e como configurá-las, consulte[Referência de ações do Automation](automations-actions-reference.md).
## Visualizando e editando propriedades da ação de automação
Use o procedimento a seguir para visualizar ou editar as propriedades de uma ação de automação em um aplicativo do App Studio.
**Para visualizar ou editar as propriedades da ação de automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. No menu **Automações** do lado esquerdo, escolha a ação da qual você deseja visualizar ou editar propriedades. Como alternativa, você pode escolher a ação na tela ao visualizar a automação que a contém.
1. Você pode visualizar ou editar as propriedades da ação no menu **Propriedades** do lado direito. As propriedades de uma ação são diferentes para cada tipo de ação. Para obter mais informações sobre propriedades de ação e como configurá-las, consulte[Referência de ações do Automation](automations-actions-reference.md).
## Excluindo uma ação de automação
Use o procedimento a seguir para excluir uma ação de uma automação em um aplicativo do App Studio.
**Para excluir uma ação de automação**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Escolha a guia **Alocações**.
1. No menu **Automações** do lado esquerdo, escolha a automação que contém a ação que você deseja excluir.
1. Na tela, escolha o ícone da lixeira na ação que você deseja excluir e escolha **Excluir**.
# Referência de ações do Automation
Veja a seguir a documentação de referência para ações de automação usadas no App Studio.
Uma ação de automação, comumente chamada de **ação**, é uma etapa individual da lógica que compõe uma automação. Cada ação executa uma tarefa específica, seja enviando um e-mail, criando um registro de dados, invocando uma função Lambda ou chamando. APIs As ações são adicionadas às automações da biblioteca de ações e podem ser agrupadas em instruções condicionais ou loops.
Para obter informações sobre como criar e configurar automações e suas ações, consulte os tópicos em. [Automações e ações: defina a lógica de negócios do seu aplicativo](automations.md)
## Invoque a API
Invoca uma solicitação da API REST HTTP. Os criadores podem usar essa ação para enviar solicitações do App Studio para outros sistemas ou serviços com APIs. Por exemplo, você pode usá-lo para se conectar a sistemas de terceiros ou aplicativos internos para acessar dados comerciais essenciais ou invocar endpoints de API que não podem ser chamados por ações dedicadas do App Studio.
Para obter mais informações sobre REST APIs, consulte [O que é uma RESTful API?](https://aws.amazon.com/what-is/restful-api/) .
### Propriedades
#### Conector
O **conector** a ser usado para as solicitações de API feitas por essa ação. A lista suspensa de conectores contém somente conectores dos seguintes tipos: e. `API Connector` `OpenAPI Connector` Dependendo de como o conector está configurado, ele pode conter informações importantes, como credenciais e cabeçalhos padrão ou parâmetros de consulta.
Para obter mais informações sobre conectores de API, incluindo uma comparação entre o uso `API Connector` `OpenAPI Connector` de e. [Conecte-se a serviços de terceiros](add-connector-third-party.md)
#### Propriedades de configuração da solicitação de API
Escolha **Configurar solicitação de API** no painel de propriedades para abrir a caixa de diálogo de configuração da solicitação. Se um **conector de API** for selecionado, a caixa de diálogo incluirá informações sobre o conector.
**Método:** O método para a chamada da API. Os valores possíveis são:
+ `DELETE`: exclui um recurso especificado.
+ `GET`: recupera informações ou dados.
+ `HEAD`: recupera somente os cabeçalhos de uma resposta sem o corpo.
+ `POST`: envia dados para serem processados.
+ `PUSH`: envia dados para serem processados.
+ `PATCH`: atualiza parcialmente um recurso especificado.
**Caminho:** o caminho relativo até o recurso.
**Cabeçalhos:** quaisquer cabeçalhos na forma de pares de valores-chave a serem enviados com a solicitação da API. Se um conector for selecionado, seus cabeçalhos configurados serão adicionados automaticamente e não poderão ser removidos. Os cabeçalhos configurados não podem ser editados, mas você pode substituí-los adicionando outro cabeçalho com o mesmo nome.
**Parâmetros de consulta:** qualquer parâmetro de consulta na forma de pares de valores-chave a serem enviados com a solicitação da API. Se um conector for selecionado, seus parâmetros de consulta configurados serão adicionados automaticamente e não poderão ser editados nem removidos.
**Corpo:** informações a serem enviadas com a solicitação da API no formato JSON. Não há corpo para `GET` solicitações.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Invocar AWS
Invoca uma operação de um AWS serviço. Essa é uma ação geral para chamar AWS serviços ou operações e deve ser usada se não houver uma ação dedicada para o AWS serviço ou operação desejada.
### Propriedades
#### Serviço
O AWS serviço que contém a operação a ser executada.
#### Operation
A operação a ser executada.
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
A entrada JSON a ser usada ao executar a operação especificada. Para obter mais informações sobre como configurar entradas para AWS operações, consulte o. [AWS SDK para JavaScript](https://docs.aws.amazon.com/sdk-for-javascript)
## invocar o Lambda
Invoca uma função Lambda existente.
### Propriedades
#### Conector
O conector a ser usado para as funções Lambda executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para acessar a função Lambda e outras informações de configuração, como AWS a região que contém a função Lambda. Para obter mais informações sobre como configurar um conector para Lambda, consulte. [Etapa 3: Criar o conector Lambda](connectors-lambda.md#connectors-lambda-create-connector)
#### Nome da função
O nome da função Lambda a ser executada. Observe que esse é o nome da função e não o ARN (Amazon Resource Name).
#### Evento de função
Pares de valores-chave a serem passados para sua função Lambda como carga útil do evento.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Loop
Executa ações aninhadas repetidamente para percorrer uma lista de itens, um item por vez. Por exemplo, adicione a [Criar registro](#automations-actions-reference-create-record) ação a uma ação de loop para criar vários registros.
A ação do loop pode ser aninhada em outros loops ou ações condicionais. As ações do loop são executadas sequencialmente e não em paralelo. Os resultados de cada ação dentro do loop só podem ser acessados para ações subsequentes dentro da mesma iteração do loop. Eles não podem ser acessados fora do loop ou em diferentes iterações do loop.
### Propriedades
#### Fonte
A lista de itens a serem percorridos, um item por vez. A origem pode ser o resultado de uma ação anterior ou de uma lista estática de cadeias de caracteres, números ou objetos que você pode fornecer usando uma JavaScript expressão.
##### Exemplos
A lista a seguir contém exemplos de entradas de origem.
+ Resultados de uma ação anterior: `{{results.actionName.data}}`
+ Uma lista de números: `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ Uma lista de sequências de caracteres: `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ Um valor computado: `{{params.actionName.split("\n")}}`
#### Nome do item atual
O nome da variável que pode ser usada para referenciar o item atual que está sendo iterado. O nome do item atual é configurável para que você possa aninhar dois ou mais loops e acessar variáveis de cada loop. Por exemplo, se você estiver percorrendo países e cidades com dois loops, poderá configurar e referenciar e. `currentCountry` `currentCity`
## Condição
Executa ações com base no resultado de uma ou mais condições lógicas especificadas que são avaliadas quando a automação é executada. A ação condicional é composta pelos seguintes componentes:
+ Um campo de *condição*, usado para fornecer uma JavaScript expressão avaliada como `true` ou`false`.
+ Uma *ramificação verdadeira*, que contém ações que são executadas se a condição for avaliada como. `true`
+ Uma *ramificação falsa*, que contém ações que são executadas se a condição for avaliada como. `false`
Adicione ações às ramificações verdadeiras e falsas arrastando-as para a ação condicional.
### Propriedades
#### Condição
A JavaScript expressão a ser avaliada quando a ação é executada.
## Criar registro
Cria um registro em uma entidade existente do App Studio.
### Propriedades
#### Entidade
A entidade na qual um registro deve ser criado. Depois que uma entidade é selecionada, os valores devem ser adicionados aos campos da entidade para que o registro seja criado. Os tipos dos campos e se os campos são obrigatórios ou opcionais são definidos na entidade.
## Atualizar registro
Atualiza um registro existente em uma entidade do App Studio.
### Propriedades
#### Entidade
A entidade que contém os registros a serem atualizados.
#### Condições
Os critérios que definem quais registros são atualizados pela ação. Você pode agrupar condições para criar uma declaração lógica. Você pode combinar grupos ou condições com `AND` nossas `OR` declarações.
#### Campos
Os campos a serem atualizados nos registros especificados pelas condições.
#### Valores
Os valores a serem atualizados nos campos especificados.
## Excluir registro
Exclui um registro de uma entidade do App Studio.
### Propriedades
#### Entidade
A entidade que contém os registros a serem excluídos.
#### Condições
Os critérios que definem quais registros são excluídos pela ação. Você pode agrupar condições para criar uma declaração lógica. Você pode combinar grupos ou condições com `AND` nossas `OR` declarações.
## Invocar ação de dados
Executa uma ação de dados com parâmetros opcionais.
### Propriedades
#### Ação de dados
A ação de dados a ser executada pela ação.
#### Parâmetros
Parâmetros de ação de dados a serem usados pela ação de dados. Os parâmetros de ação de dados são usados para enviar valores que são usados como entradas para ações de dados. Os parâmetros de ação de dados podem ser adicionados ao configurar a ação de automação, mas devem ser editados na guia **Dados**.
#### Configurações avançadas
A `Invoke data action` ação contém as seguintes configurações avançadas:
+ **Tamanho da página:** o número máximo de registros a serem buscados em cada consulta. O valor padrão é 500 e o valor máximo é 3000.
+ **Token de paginação:** o token usado para buscar registros adicionais de uma consulta. Por exemplo, se `Page size` estiver definido como 500, mas houver mais de 500 registros, passar o token de paginação para uma consulta subsequente obterá os próximos 500. O token ficará indefinido se não existirem mais registros ou páginas.
## Amazon S3: Coloque o objeto
Usa a `Amazon S3 PutObject` operação para adicionar um objeto identificado por uma chave (caminho de arquivo) a um bucket específico do Amazon S3.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais apropriadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
As opções necessárias para serem usadas no `PutObject` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon S3 PutObject` operação, consulte a *Referência [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)de API do Amazon Simple Storage Service*.
+ **Bucket:** o nome do bucket do Amazon S3 no qual colocar um objeto.
+ **Chave:** O nome exclusivo do objeto a ser colocado no bucket do Amazon S3.
+ **Corpo:** o conteúdo do objeto a ser colocado no bucket do Amazon S3.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon S3: Excluir objeto
Usa a `Amazon S3 DeleteObject` operação para excluir um objeto identificado por uma chave (caminho de arquivo) de um bucket específico do Amazon S3.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
As opções necessárias para serem usadas no `DeleteObject` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon S3 DeleteObject` operação, consulte a *Referência [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)de API do Amazon Simple Storage Service*.
+ **Bucket:** o nome do bucket do Amazon S3 do qual excluir um objeto.
+ **Chave:** O nome exclusivo do objeto a ser excluído do bucket do Amazon S3.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon S3: Obter objeto
Usa a `Amazon S3 GetObject` operação para recuperar um objeto identificado por uma chave (caminho de arquivo) de um bucket específico do Amazon S3.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
As opções necessárias para serem usadas no `GetObject` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon S3 GetObject` operação, consulte a *Referência [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)de API do Amazon Simple Storage Service*.
+ **Bucket:** o nome do bucket do Amazon S3 do qual recuperar um objeto.
+ **Chave:** O nome exclusivo do objeto a ser recuperado do bucket do Amazon S3.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon S3: Listar objetos
Usa a `Amazon S3 ListObjects` operação para listar objetos em um bucket específico do Amazon S3.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
As opções necessárias para serem usadas no `ListObjects` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon S3 ListObjects` operação, consulte a *Referência [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)de API do Amazon Simple Storage Service*.
+ **Bucket:** o nome do bucket do Amazon S3 a partir do qual listar objetos.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Textract: analise o documento
Usa a `Amazon Textract AnalyzeDocument` operação para analisar um documento de entrada quanto às relações entre os itens detectados.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `AnalyzeDocument` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon Textract AnalyzeDocument` operação, consulte [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)o *Amazon Textract Developer* Guide.
+ **Document/S3Object/Bucket:** O nome do bucket Amazon S3. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Nome:** O nome do arquivo do documento de entrada. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Versão:** Se o bucket do Amazon S3 tiver o versionamento ativado, você poderá especificar a versão do objeto. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **FeatureTypes:** Uma lista dos tipos de análise a serem executados. Os valores válidos são: `TABLES`, `FORMS`, `QUERIES`, `SIGNATURES` e `LAYOUT`.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Textract: analise despesas
Usa a `Amazon Textract AnalyzeExpense` operação para analisar um documento de entrada em busca de relações financeiras entre texto.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `AnalyzeExpense` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon Textract AnalyzeExpense` operação, consulte [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)o *Amazon Textract Developer* Guide.
+ **Document/S3Object/Bucket:** O nome do bucket Amazon S3. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Nome:** O nome do arquivo do documento de entrada. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Versão:** Se o bucket do Amazon S3 tiver o versionamento ativado, você poderá especificar a versão do objeto. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Textract: Analise o ID
Usa a `Amazon Textract AnalyzeID` operação para analisar um documento de identidade em busca de informações relevantes.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `AnalyzeID` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon Textract AnalyzeID` operação, consulte [AnalyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html) no *Amazon Textract Developer* Guide.
+ **Document/S3Object/Bucket:** O nome do bucket Amazon S3. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Nome:** O nome do arquivo do documento de entrada. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Versão:** Se o bucket do Amazon S3 tiver o versionamento ativado, você poderá especificar a versão do objeto. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Textract: detecte texto de documentos
Usa a `Amazon Textract DetectDocumentText` operação para detectar linhas de texto e as palavras que compõem uma linha de texto em um documento de entrada.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `DetectDocumentText` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon Textract DetectDocumentText` operação, consulte [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)o *Amazon Textract Developer* Guide.
+ **Document/S3Object/Bucket:** O nome do bucket Amazon S3. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Nome:** O nome do arquivo do documento de entrada. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
+ **Documento/S3Object/Versão:** Se o bucket do Amazon S3 tiver o versionamento ativado, você poderá especificar a versão do objeto. Esse parâmetro pode ser deixado em branco se um arquivo for passado para a ação com o componente de **upload do S3**.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Bedrock: GenAI Prompt
Usa a InvokeModel operação [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) para executar inferência usando os parâmetros de prompt e inferência fornecidos nas propriedades da ação. A ação pode gerar texto, imagens e incorporações.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. Para usar essa ação com sucesso, o conector deve ser configurado com o **Amazon Bedrock Runtime** como serviço. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Modelo
O modelo básico a ser usado pelo Amazon Bedrock para processar a solicitação. Para obter mais informações sobre modelos no Amazon Bedrock, consulte as informações do [modelo da Amazon Bedrock Foundation no Guia](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html) do usuário do *Amazon Bedrock*.
#### Tipo de entrada
O tipo de entrada da entrada enviada para o modelo Amazon Bedrock. Os valores possíveis são **Texto**, **Documento** e **Imagem**. Se um tipo de entrada não estiver disponível para seleção, provavelmente não é suportado pelo modelo configurado.
#### Solicitação do usuário
A solicitação a ser enviada ao modelo Amazon Bedrock para ser processada para gerar uma resposta. Você pode inserir texto estático ou transmitir uma entrada de outra parte do seu aplicativo, como de um componente usando parâmetros, uma ação anterior na automação ou outra automação. Os exemplos a seguir mostram como transmitir um valor de um componente ou de uma ação anterior:
+ Para passar um valor de um componente usando parâmetros: `{{params.paramName}}`
+ Para passar um valor de uma ação anterior: `{{results.actionName}}`
#### Prompt do sistema (modelos Claude)
O sistema solicita que seja usado pelo modelo Amazon Bedrock ao processar a solicitação. O prompt do sistema é usado para fornecer contexto, instruções ou diretrizes aos modelos Claude.
#### Configurações de solicitação
Defina várias configurações de solicitação e parâmetros de inferência do modelo. Agora, é possível definir as seguintes configurações:
+ **Temperatura**: a temperatura a ser usada pelo modelo Amazon Bedrock ao processar a solicitação. A temperatura determina a aleatoriedade ou criatividade da saída do modelo Bedrock. Quanto mais alta a temperatura, mais criativa e menos analítica será a resposta. Os valores possíveis são`[0-10]`.
+ **Máximo de tokens**: limite o comprimento da saída do modelo Amazon Bedrock.
+ **TopP****: Na amostragem de núcleo, o modelo calcula a distribuição cumulativa de todas as opções para cada token subsequente em ordem decrescente de probabilidade e a interrompe quando atinge uma probabilidade específica especificada pelo TopP.** Você deve alterar a **temperatura** ou o **TopP**, mas não ambos
+ **Sequências de parada**: sequências que fazem com que o modelo pare de processar a solicitação e gerar a saída.
Para obter mais informações, consulte [Parâmetros de solicitação de inferência e campos de resposta para modelos básicos no Guia](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html) do *usuário do Amazon Bedrock*.
#### Sequências de parada
**Insira uma **ID** e uma versão do Amazon Bedrock Guardrail.** As grades de proteção são usadas para implementar proteções com base em seus casos de uso e políticas responsáveis de IA. Para obter mais informações, consulte [Impeça conteúdo nocivo em modelos usando o Amazon Bedrock Guardrails no Guia do usuário](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html) do *Amazon Bedrock*.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## Amazon Bedrock: modelo Invoke
Usa a InvokeModel operação [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) para executar inferência usando os parâmetros de prompt e inferência fornecidos no corpo da solicitação. Você usa a inferência de modelos para gerar texto, imagens e incorporações.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. Para usar essa ação com sucesso, o conector deve ser configurado com o **Amazon Bedrock Runtime** como serviço. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `InvokeModel` comando.
**nota**
Para obter mais informações sobre a `Amazon Bedrock InvokeModel` operação, incluindo comandos de exemplo, consulte [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)a *Amazon Bedrock API Reference*.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
## JavaScript
Executa uma JavaScript função personalizada para retornar um valor especificado.
**Importante**
O App Studio não oferece suporte ao uso de JavaScript bibliotecas personalizadas ou de terceiros.
### Propriedades
#### Código-fonte
O trecho de JavaScript código a ser executado pela ação.
**dica**
Você pode usar a IA para ajudar a gerar JavaScript para você executando as seguintes etapas:
Escolha o ícone de expansão para abrir o JavaScript editor expandido.
(Opcional): ative a opção **Modificar código** para modificar qualquer código existente. JavaScript Caso contrário, a IA substituirá qualquer existente JavaScript.
Em **Gerar JavaScript**, descreva o que você quer fazer com JavaScript, por exemplo:**Add two numbers**.
Escolha o ícone de envio para gerar seu JavaScript.
## Invoque a automação
Executa uma automação especificada.
### Propriedades
#### Invoque a automação
A automação a ser executada pela ação.
## Enviar e-mail
Usa a `Amazon SES SendEmail` operação para enviar um e-mail.
### Propriedades
#### Conector
O conector a ser usado para as operações executadas por essa ação. O conector configurado deve ser configurado com as credenciais adequadas para executar a operação e outras informações de configuração, como a AWS região que contém os recursos referenciados na operação.
#### Configuração
O conteúdo da solicitação a ser usada no `SendEmail` comando. As opções são as seguintes:
**nota**
Para obter mais informações sobre a `Amazon SES SendEmail` operação, consulte [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)a *Referência da API do Amazon Simple Email Service*.
#### Saída simulada
As ações não interagem com serviços ou recursos externos no ambiente de pré-visualização. O campo **de saída simulada** é usado para fornecer uma expressão JSON que simula o comportamento de um conector no ambiente de visualização para fins de teste. Esse trecho é armazenado no `results` mapa da ação, assim como a resposta do conector seria para um aplicativo publicado no ambiente ativo.
Com esse campo, você pode testar vários cenários e seu impacto em outras ações dentro da automação, como simular diferentes valores de resultados, cenários de erro, casos extremos ou caminhos insatisfatórios sem se comunicar com serviços externos por meio de conectores.
# Entidades e ações de dados: configure o modelo de dados do seu aplicativo
**As entidades** são tabelas de dados no App Studio. As entidades interagem diretamente com as tabelas nas fontes de dados. As entidades incluem campos para descrever os dados neles contidos, consultas para localizar e retornar dados e mapeamento para conectar os campos da entidade às colunas de uma fonte de dados.
**Topics**
+ [Melhores práticas ao projetar modelos de dados](data-model-best-practices.md)
+ [Criação de uma entidade em um aplicativo do App Studio](data-entities-create.md)
+ [Configurando ou editando uma entidade em um aplicativo do App Studio](data-entities-edit.md)
+ [Excluindo uma entidade](data-entities-delete.md)
+ [Entidades de dados gerenciadas no AWS App Studio](managed-data-entities.md)
# Melhores práticas ao projetar modelos de dados
Use as práticas recomendadas a seguir para criar um modelo de dados relacional robusto, escalável e seguro AWS para uso em seu aplicativo do App Studio que atenda aos requisitos do seu aplicativo e garanta a confiabilidade e o desempenho de longo prazo de sua infraestrutura de dados.
+ **Escolha o serviço de AWS dados certo:** dependendo de suas necessidades, escolha o serviço de AWS dados apropriado. Por exemplo, para um aplicativo de processamento de transações on-line (OLTP), você pode considerar um banco de dados (DB) como o Amazon Aurora, que é um serviço de banco de dados nativo da nuvem, relacional e totalmente gerenciado que oferece suporte a vários mecanismos de banco de dados, como MySQL e PostgreSQL. Para ver uma lista completa das versões do Aurora suportadas pelo App Studio, consulte. [Conecte-se ao Amazon Aurora](connectors-aurora.md) Por outro lado, para casos de uso de processamento analítico on-line (OLAP), considere usar o Amazon Redshift, que é um data warehouse na nuvem que permite executar consultas complexas em conjuntos de dados muito grandes. Essas consultas geralmente podem levar tempo (vários segundos) para serem concluídas, tornando o Amazon Redshift menos adequado para aplicativos OLTP que exigem acesso a dados de baixa latência.
+ **Design para escalabilidade:** planeje seu modelo de dados pensando no crescimento e na escalabilidade futuros. Considere fatores como volume de dados esperado, padrões de acesso e requisitos de desempenho ao escolher um serviço de dados adequado e tipo e configuração de instância de banco de dados (como capacidade provisionada).
+ Para obter mais informações sobre escalabilidade com o Aurora sem servidor, [consulte Desempenho e escalabilidade do Aurora Serverless V2.](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html)
+ **Normalize seus dados:** siga os princípios da normalização do banco de dados para minimizar a redundância dos dados e melhorar a integridade dos dados. Isso inclui criar tabelas apropriadas, definir chaves primárias e estrangeiras e estabelecer relacionamentos entre entidades. No App Studio, ao consultar dados de uma entidade, você pode recuperar dados relacionados de outra entidade especificando uma `join` cláusula na consulta.
+ **Implemente a indexação apropriada:** identifique as consultas e os padrões de acesso mais importantes e crie índices apropriados para otimizar o desempenho.
+ **Aproveite AWS os recursos dos serviços de dados:** aproveite os recursos oferecidos pelo serviço de AWS dados que você escolher, como backups automatizados, implantações Multi-AZ e atualizações automáticas de software.
+ **Proteja seus dados:** implemente medidas de segurança robustas, como políticas IAM (AWS Identity and Access Management), criação de usuários de banco de dados com permissões restritas a tabelas e esquemas e aplique criptografia em repouso e em trânsito.
+ **Monitore e otimize o desempenho:** monitore continuamente o desempenho do seu banco de dados e faça ajustes conforme necessário, como escalar recursos, otimizar consultas ou ajustar as configurações do banco de dados.
+ **Automatize o gerenciamento do banco de dados:** utilize AWS serviços como o Aurora Autoscaling, o Performance Insights for Aurora e o AWS Database Migration Service para automatizar as tarefas de gerenciamento do banco de dados e reduzir a sobrecarga operacional.
+ **Implemente estratégias de recuperação de desastres e backup:** garanta que você tenha um plano de backup e recuperação bem definido, aproveitando recursos como backups automatizados do Aurora, point-in-time recuperação e configurações de réplica entre regiões.
+ **Siga as AWS melhores práticas e a documentação:** fique up-to-date com as AWS melhores práticas, diretrizes e documentação mais recentes do serviço de dados escolhido para garantir que seu modelo de dados e sua implementação estejam alinhados às AWS recomendações.
Para obter orientações mais detalhadas de cada serviço de AWS dados, consulte os tópicos a seguir:
+ [Melhores práticas com o Amazon Aurora](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Melhores práticas com o Amazon Aurora MySQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Ajuste de desempenho de consultas do Amazon Redshift](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Melhores práticas para consultar e escanear dados no Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)
# Criação de uma entidade em um aplicativo do App Studio
Há quatro métodos para criar uma entidade em um aplicativo do App Studio. A lista a seguir contém cada método, seus benefícios e um link para as instruções de uso desse método para criar e depois configurar a entidade.
+ [Criação de uma entidade a partir de uma fonte de dados existente](#data-entities-create-existing-data-source): crie automaticamente uma entidade e seus campos a partir de uma tabela de fonte de dados existente e mapeie os campos para as colunas da tabela de fonte de dados. Essa opção é preferível se você tiver uma fonte de dados existente que queira usar no seu aplicativo do App Studio.
+ [Criação de uma entidade com uma fonte de dados gerenciada do App Studio](#data-entities-create-managed-data-source): crie uma entidade e uma tabela do DynamoDB que o App Studio gerencie para você. A tabela do DynamoDB é atualizada automaticamente à medida que você atualiza sua entidade. Com essa opção, você não precisa criar, gerenciar ou conectar manualmente uma fonte de dados de terceiros nem designar o mapeamento dos campos da entidade para as colunas da tabela. Toda a modelagem e configuração de dados do seu aplicativo são feitas no App Studio. Essa opção é preferível se você não quiser gerenciar suas próprias fontes de dados e uma tabela do DynamoDB. Sua funcionalidade é suficiente para seu aplicativo.
+ [Criando uma entidade vazia](#data-entities-create-empty): Crie uma entidade vazia inteiramente do zero. Essa opção é preferível se você não tiver nenhuma fonte de dados ou conectores existentes criados por um administrador e quiser projetar com flexibilidade o modelo de dados do seu aplicativo sem ser limitado por fontes de dados externas. Você pode conectar a entidade a uma fonte de dados após a criação.
+ [Criação de uma entidade com IA](#data-entities-create-with-ai): gere uma entidade, campos, ações de dados e dados de amostra com base no nome da entidade especificada. Essa opção é preferível se você tiver uma ideia do modelo de dados do seu aplicativo, mas quiser ajuda para traduzi-lo em uma entidade.
## Criação de uma entidade a partir de uma fonte de dados existente
Use uma tabela de uma fonte de dados para criar automaticamente uma entidade e seus campos e mapear os campos da entidade para as colunas da tabela. Essa opção é preferível se você tiver uma fonte de dados existente que queira usar no seu aplicativo do App Studio.
1. Se necessário, navegue até seu aplicativo.
1. Escolha a guia **Dados** na parte superior da tela.
1. Se não houver entidades em seu aplicativo, escolha **\$1 Criar entidade**. Caso contrário, no menu **Entidades** do lado esquerdo, escolha **\$1** Adicionar.
1. Selecione **Usar uma tabela de uma fonte de dados existente**.
1. Em **Conector**, selecione o conector que contém a tabela que você deseja usar para criar sua entidade.
1. Em **Tabela**, escolha a tabela que você deseja usar para criar sua entidade.
1. Marque a caixa de seleção **Criar ações de dados** para criar ações de dados.
1. Escolha **Create entity (Criar entidade)**. Sua entidade agora está criada e você pode vê-la no painel **Entidades** à esquerda.
1. Configure sua nova entidade seguindo os procedimentos em[Configurando ou editando uma entidade em um aplicativo do App Studio](data-entities-edit.md). Observe que, como sua entidade foi criada com uma fonte de dados existente, algumas propriedades ou recursos já foram criados, como campos, a fonte de dados conectada e o mapeamento de campos. Além disso, sua entidade conterá ações de dados se você marcar a caixa de seleção **Criar ações de dados** durante a criação.
## Criação de uma entidade com uma fonte de dados gerenciada do App Studio
Crie uma entidade gerenciada e uma tabela correspondente do DynamoDB gerenciada pelo App Studio. Embora a tabela do DynamoDB exista na conta AWS associada, quando são feitas alterações na entidade no aplicativo App Studio, a tabela do DynamoDB é atualizada automaticamente. Com essa opção, você não precisa criar, gerenciar ou conectar manualmente uma fonte de dados de terceiros nem designar o mapeamento dos campos da entidade para as colunas da tabela. Essa opção é preferível se você não quiser gerenciar suas próprias fontes de dados e uma tabela do DynamoDB. Sua funcionalidade é suficiente para seu aplicativo. Para obter mais informações sobre entidades gerenciadas, consulte[Entidades de dados gerenciadas no AWS App Studio](managed-data-entities.md).
Você pode usar as mesmas entidades gerenciadas em vários aplicativos. Para instruções, consulte [Criação de uma entidade a partir de uma fonte de dados existente](#data-entities-create-existing-data-source).
1. Se necessário, navegue até seu aplicativo.
1. Escolha a guia **Dados** na parte superior da tela.
1. Se não houver entidades em seu aplicativo, escolha **\$1 Criar entidade**. Caso contrário, no menu **Entidades** do lado esquerdo, escolha **\$1** Adicionar.
1. Selecione **Criar entidade gerenciada do App Studio**.
1. Em **Nome da entidade**, forneça um nome para sua entidade.
1. Em **Chave primária**, forneça um nome para a chave primária da sua entidade. A chave primária é o identificador exclusivo da entidade e não pode ser alterada após a criação da entidade.
1. Em **Tipo de dados de chave primária**, selecione o tipo de dados da chave primária da sua entidade. O tipo de dados não pode ser alterado após a criação da entidade.
1. Escolha **Create entity (Criar entidade)**. Sua entidade agora está criada e você pode vê-la no painel **Entidades** à esquerda.
1. Configure sua nova entidade seguindo os procedimentos em[Configurando ou editando uma entidade em um aplicativo do App Studio](data-entities-edit.md). Observe que, como sua entidade foi criada com dados gerenciados, algumas propriedades ou recursos já foram criados, como o campo da chave primária e a fonte de dados conectada.
## Criando uma entidade vazia
Crie uma entidade vazia inteiramente do zero. Essa opção é preferível se você não tiver nenhuma fonte de dados ou conectores existentes criados por um administrador. Criar uma entidade vazia oferece flexibilidade, pois você pode projetar sua entidade dentro do aplicativo do App Studio sem ser limitado por fontes de dados externas. Depois de criar o modelo de dados do seu aplicativo e configurar a entidade adequadamente, você ainda poderá conectá-la a uma fonte de dados externa posteriormente.
1. Se necessário, navegue até seu aplicativo.
1. Escolha a guia **Dados** na parte superior da tela.
1. Se não houver entidades em seu aplicativo, escolha **\$1 Criar entidade**. Caso contrário, no menu **Entidades** do lado esquerdo, escolha **\$1** Adicionar.
1. Selecione **Criar uma entidade**.
1. Escolha **Create entity (Criar entidade)**. Sua entidade agora está criada e você pode vê-la no painel **Entidades** à esquerda.
1. Configure sua nova entidade seguindo os procedimentos em[Configurando ou editando uma entidade em um aplicativo do App Studio](data-entities-edit.md).
## Criação de uma entidade com IA
Gere uma entidade, campos, ações de dados e dados de amostra com base no nome da entidade especificada. Essa opção é preferível se você tiver uma ideia do modelo de dados do seu aplicativo, mas quiser ajuda para traduzi-lo em uma entidade.
1. Se necessário, navegue até seu aplicativo.
1. Escolha a guia **Dados** na parte superior da tela.
1. Se não houver entidades em seu aplicativo, escolha **\$1 Criar entidade**. Caso contrário, no menu **Entidades** do lado esquerdo, escolha **\$1** Adicionar.
1. Selecione **Criar uma entidade com IA**.
1. Em **Nome da entidade**, forneça um nome para sua entidade. Esse nome é usado para gerar os campos, ações de dados e dados de amostra da sua entidade.
1. Marque a caixa de seleção **Criar ações de dados** para criar ações de dados.
1. Escolha **Gerar uma entidade**. Sua entidade agora está criada e você pode vê-la no painel **Entidades** à esquerda.
1. Configure sua nova entidade seguindo os procedimentos em[Configurando ou editando uma entidade em um aplicativo do App Studio](data-entities-edit.md). Observe que, como sua entidade foi criada com IA, ela já conterá campos gerados. Além disso, sua entidade conterá ações de dados se você marcar a caixa de seleção **Criar ações de dados** durante a criação.
# Configurando ou editando uma entidade em um aplicativo do App Studio
Use os tópicos a seguir para configurar uma entidade em um aplicativo do App Studio.
**Topics**
+ [Editando o nome da entidade](data-entities-edit-name.md)
+ [Adicionar, editar ou excluir campos de entidade](data-entities-edit-fields.md)
+ [Criando, editando ou excluindo ações de dados](data-entities-edit-data-actions.md)
+ [Adicionar ou excluir dados de amostra](data-entities-edit-sample-data.md)
+ [Adicionar ou editar campos conectados da fonte de dados e do mapa](data-entities-edit-connection.md)
# Editando o nome da entidade
1. Se necessário, navegue até a entidade que você deseja editar.
1. Na guia **Configuração**, em **Nome da entidade**, atualize o nome da entidade e escolha fora da caixa de texto para salvar suas alterações.
# Adicionar, editar ou excluir campos de entidade
**dica**
Você pode pressionar CTRL\$1Z para desfazer a alteração mais recente em sua entidade.
1. Se necessário, navegue até a entidade que você deseja editar.
1. Na guia **Configuração**, em **Campos**, você visualiza uma tabela dos campos da sua entidade. Os campos de entidade têm as seguintes colunas:
+ **Nome de exibição:** o nome de exibição é semelhante a um cabeçalho de tabela ou campo de formulário e pode ser visualizado pelos usuários do aplicativo. Ele pode conter espaços e caracteres especiais, mas deve ser exclusivo dentro de uma entidade.
+ **Nome do sistema:** o nome do sistema é um identificador exclusivo usado no código para referenciar um campo. Ao mapear para uma coluna em uma tabela do Amazon Redshift, ela deve corresponder ao nome da coluna da tabela do Amazon Redshift.
+ **Tipo de dados:** o tipo de dados que será armazenado nesse campo, como `Integer``Boolean`, ou`String`.
1. Para adicionar campos:
1. Para usar a IA para gerar campos com base no nome da entidade e na fonte de dados conectada, escolha **Gerar mais campos**.
1. Para adicionar um único campo, escolha **\$1 Adicionar campo**.
1. Para editar um campo:
1. Para editar o nome de exibição, insira o valor desejado na caixa de texto **Nome de exibição**. Se o nome do sistema do campo não tiver sido editado, ele será atualizado para o novo valor do nome de exibição.
1. Para editar o nome do sistema, insira o valor desejado na caixa de texto **Nome do sistema**.
1. Para editar o tipo de dados, escolha o menu suspenso **Tipo de dados** e selecione o tipo desejado na lista.
1. Para editar as propriedades do campo, escolha o ícone de engrenagem do campo. A lista a seguir detalha as propriedades do campo:
+ **Obrigatório**: ative essa opção se o campo for exigido pela sua fonte de dados.
+ **Chave primária**: ative essa opção se o campo estiver mapeado para uma chave primária na sua fonte de dados.
+ **Exclusivo**: ative essa opção se o valor desse campo precisar ser exclusivo.
+ **Usar fonte de dados padrão**: ative essa opção se o valor do campo for fornecido pela fonte de dados, como o uso de incremento automático ou um carimbo de data e hora do evento.
+ **Opções de tipo de dados**: campos de determinados tipos de dados podem ser configurados com opções de tipo de dados, como valores mínimos ou máximos.
1. Para excluir um campo, escolha o ícone da lixeira do campo que você deseja excluir.
# Criando, editando ou excluindo ações de dados
As ações de dados são usadas em aplicativos para executar ações nos dados de uma entidade, como buscar todos os registros ou buscar um registro por ID. As ações de dados podem ser usadas para localizar e retornar dados que correspondam às condições especificadas para serem visualizados em componentes como tabelas ou visualizações de detalhes.
**Contents**
+ [Criação de ações de dados](#data-entities-data-action-add)
+ [Editando ou configurando ações de dados](#data-entities-data-action-edit)
+ [Operadores e exemplos de condições de ação de dados](#data-entities-data-action-operators)
+ [Suporte ao operador de condições por banco de dados](#data-entities-data-action-operators-support)
+ [Exemplos de condições de ação de dados](#data-entities-data-action-operators-examples)
+ [Excluindo ações de dados](#data-entities-data-action-delete)
## Criação de ações de dados
**dica**
Você pode pressionar CTRL\$1Z para desfazer a alteração mais recente em sua entidade.
1. Se necessário, navegue até a entidade para a qual você deseja criar ações de dados.
1. Escolha a guia **Ações de dados**.
1. Há dois métodos para criar ações de dados:
+ (Recomendado) Para usar a IA para gerar ações de dados para você, com base no nome da entidade, nos campos e na fonte de dados conectada, escolha **Gerar ações de dados**. As seguintes ações serão geradas:
1. `getAll`: recupera todos os registros de uma entidade. Essa ação é útil quando você precisa exibir uma lista de registros ou realizar operações em vários registros ao mesmo tempo.
1. `getByID`: recupera um único registro de uma entidade com base em seu identificador exclusivo (ID ou chave primária). Essa ação é útil quando você precisa exibir ou executar operações em um registro específico.
+ Para adicionar uma única ação de dados, escolha **\$1 Adicionar ação de dados**.
1. Para visualizar ou configurar a nova ação de dados, consulte a seção a seguir,[Editando ou configurando ações de dados](#data-entities-data-action-edit).
## Editando ou configurando ações de dados
1. Se necessário, navegue até a entidade para a qual você deseja criar ações de dados.
1. Escolha a guia **Ações de dados**.
1. Em **Campos**, configure os campos a serem retornados pela consulta. Por padrão, todos os campos configurados na entidade são selecionados.
Você também pode adicionar **junções** à ação de dados executando as seguintes etapas:
1. Escolha **\$1 Adicionar união** para abrir uma caixa de diálogo.
1. Em **Entidade relacionada**, selecione a entidade que você deseja unir à entidade atual.
1. Em **Alias**, opcionalmente, insira um nome de alias temporário para a entidade relacionada.
1. Em **Tipo de união**, selecione o tipo de união desejado.
1. Defina a cláusula de junção selecionando os campos de cada entidade.
1. Escolha **Adicionar** para criar a união.
Depois de criada, a união será exibida na seção **Junções**, disponibilizando campos adicionais no menu **suspenso Campos a serem retornados**. Você pode adicionar várias uniões, incluindo uniões encadeadas entre entidades. Você também pode filtrar e classificar por campos de entidades unidas.
Para excluir uma união, escolha o ícone da lixeira ao lado dela. Isso removerá todos os campos dessa junção e quebrará todas as junções ou restrições dependentes usando esses campos.
1. Em **Condições**, adicione, edite ou remova regras que filtram a saída da consulta. Você pode organizar as regras em grupos e agrupar várias regras com `AND` ou `OR` declarações. Para obter mais informações sobre os operadores que você pode usar, consulte[Operadores e exemplos de condições de ação de dados](#data-entities-data-action-operators).
1. Em **Classificação**, configure como os resultados da consulta são classificados escolhendo um atributo e escolhendo a ordem crescente ou decrescente. Você pode remover a configuração de classificação escolhendo o ícone de lixeira ao lado da regra de classificação.
1. Em **Transformar resultados**, você pode inserir resultados personalizados JavaScript para modificar ou formatar os resultados antes que eles sejam exibidos ou enviados para as automações.
1. Em **Visualização de saída**, visualize uma tabela de visualização da saída da consulta com base nos campos, filtros, classificação e. JavaScript
## Operadores e exemplos de condições de ação de dados
Você pode usar operadores de condição para comparar um valor de expressão configurado com uma coluna de entidade para retornar um subconjunto de objetos do banco de dados. Os operadores que você pode usar dependem do tipo de dados da coluna e do tipo de banco de dados ao qual a entidade está conectada, como Amazon Redshift, Amazon Aurora ou Amazon DynamoDB.
Os seguintes operadores de condição podem ser usados com todos os serviços de banco de dados:
+ `=`e`!=`: Disponível para todos os tipos de dados (exceto colunas de chave primária).
+ `<=`,`>=`,`<`, e`>=`: Disponível somente para colunas numéricas.
+ `IS NULL`e`IS NOT NULL`: Usado para combinar colunas que têm valores nulos ou vazios. Os valores nulos geralmente são interpretados de forma diferente em cada banco de dados. No entanto, no App Studio, o `NULL` operador corresponde e retorna registros que têm valores nulos na tabela do banco de dados conectado.
Os operadores de condição a seguir só podem ser usados em entidades conectadas a serviços de banco de dados que os suportam:
+ `LIKE`e `NOT LIKE` (Redshift, Aurora): usado para realizar consultas baseadas em padrões no banco de dados conectado. O `LIKE` operador oferece flexibilidade na funcionalidade de pesquisa porque encontra e retorna registros que se encaixam nos padrões especificados. Você define os padrões usando caracteres curinga que correspondem a qualquer caractere ou sequência de caracteres dentro do padrão. Cada sistema de gerenciamento de banco de dados tem um conjunto exclusivo de caracteres curinga, mas os dois mais populares são `%` representar qualquer número de caracteres (incluindo 0) e `_` representar um único caractere.
+ `Contains`e `Not Contains` (DynamoDB): usado para realizar uma pesquisa com distinção entre maiúsculas e minúsculas para determinar se o texto fornecido é encontrado nos valores da coluna.
+ `Starts With`e `Not Starts With` (DynamoDB): usado para realizar uma pesquisa com distinção entre maiúsculas e minúsculas para determinar se o texto fornecido é encontrado no início dos valores da coluna.
### Suporte ao operador de condições por banco de dados
A tabela a seguir mostra quais operadores de condição de ação de dados são compatíveis com cada banco de dados que pode se conectar ao App Studio.
| | =, \$1=, <, >, <=, >= | COMO, NÃO COMO | Contém, não contém | Começa com, não começa com | É NULO, NÃO É NULO |
| --- | --- | --- | --- | --- | --- |
| **DynamoDB** | Sim | Não | Sim | Sim | Sim |
| **Aurora** | Sim | Sim | Não | Não | Sim |
| **Redshift** | Sim | Sim | Não | Não | Sim |
### Exemplos de condições de ação de dados
Considere a tabela de banco de dados a seguir, que inclui vários itens com `name``city`, e `hireDate` campos.
| name | cidade | Data de contratação |
| --- | --- | --- |
| Adão | Seattle | 2025-03-01 |
| Adrienne | Boston | 2025-03-05 |
| Bob | Albuquerque | 2025-03-06 |
| Carlos | Chicago | 2025-03-10 |
| Caroline | NULL | 2025-03-12 |
| Rita | Miami | 2025-03-15 |
Agora, considere criar ações de dados no App Studio que retornem o `name` campo para itens que correspondam às condições especificadas. A lista a seguir contém exemplos de condições e os valores que a tabela retorna para cada uma.
**nota**
Os exemplos são formatados como exemplos de SQL. Eles podem não aparecer como no App Studio, mas são usados para ilustrar o comportamento dos operadores.
+ `WHERE name LIKE 'Adam'`: Devoluções`Adam`.
+ `WHERE name LIKE 'A%'`: Devoluções `Adam` `Adrienne` e.
+ `WHERE name NOT LIKE 'B_B'`: Retorna `Adam` `Adrienne``Carlos`,`Caroline`,, `Rita` e.
+ `WHERE contains(name, 'ita')`: Devoluções`Rita`.
+ `WHERE begins_with(name, 'Car')`: Devoluções `Carlos` `Caroline` e.
+ `WHERE city IS NULL`: Devoluções`Caroline`.
+ `WHERE hireDate < "2025-03-06"`: Devoluções `Adam` `Adrienne` e.
+ `WHERE hireDate >= DateTime.now().toISODate()`: Observe que `DateTime.now().toISODate()` retorna a data atual. Em um cenário em que a data atual é 2025-03-10, a expressão retorna`Carlos`, e. `Caroline` `Rita`
**dica**
Para obter mais informações sobre como comparar datas e horas em expressões, consulte[Data e hora](expressions.md#expressions-date-time).
## Excluindo ações de dados
Use o procedimento a seguir para excluir ações de dados de uma entidade do App Studio.
1. Se necessário, navegue até a entidade da qual você deseja excluir ações de dados.
1. Escolha a guia **Ações de dados**.
1. **Para cada ação de dados que você deseja excluir, escolha o menu suspenso ao lado de **Editar** e escolha Excluir.**
1. Escolha **Confirmar** na caixa de diálogo.
# Adicionar ou excluir dados de amostra
Você pode adicionar dados de amostra às entidades em um aplicativo do App Studio. Como os aplicativos não se comunicam com serviços externos até serem publicados, os dados de amostra podem ser usados para testar seu aplicativo e sua entidade em ambientes de pré-visualização.
1. Se necessário, navegue até a entidade que você deseja editar.
1. Escolha a guia **Dados de amostra**.
1. Para gerar dados de amostra, escolha **Gerar mais dados de amostra**.
1. Para excluir dados de amostra, marque as caixas de seleção dos dados que você deseja excluir e pressione a tecla Delete ou Backspace. Escolha **Salvar** para salvar as alterações.
# Adicionar ou editar campos conectados da fonte de dados e do mapa
**dica**
Você pode pressionar CTRL\$1Z para desfazer a alteração mais recente em sua entidade.
1. Se necessário, navegue até a entidade que você deseja editar.
1. Escolha a guia **Conexão** para visualizar ou gerenciar a conexão entre a entidade e uma tabela de fonte de dados na qual os dados são armazenados quando seu aplicativo é publicado. Depois que uma tabela de fonte de dados estiver conectada, você poderá mapear os campos da entidade para as colunas da tabela.
1. Em **Conector**, escolha o conector que contém uma conexão com a tabela da fonte de dados desejada. Para obter mais informações sobre conectores, consulte[Conecte o App Studio a outros serviços com conectores](connectors.md).
1. Em **Tabela**, escolha a tabela que você deseja usar como fonte de dados para a entidade.
1. A tabela mostra os campos da entidade e a coluna da fonte de dados para a qual eles são mapeados. Escolha **Mapa automático para mapear** automaticamente os campos da entidade com as colunas da fonte de dados. Você também pode mapear campos manualmente na tabela escolhendo a coluna da fonte de dados na lista suspensa para cada campo da entidade.
# Excluindo uma entidade
Use o procedimento a seguir para excluir uma entidade de um aplicativo do App Studio.
**nota**
A exclusão de uma entidade de um aplicativo do App Studio não exclui a tabela da fonte de dados conectada, incluindo a tabela correspondente de entidades gerenciadas do DynamoDB. As tabelas da fonte de dados permanecerão na AWS conta associada e precisarão ser excluídas do serviço correspondente, se desejado.
**Para excluir uma entidade**
1. Se necessário, navegue até seu aplicativo.
1. Escolha a guia **Dados**.
1. **No menu **Entidades** à esquerda, escolha o menu de elipses ao lado da entidade que você deseja excluir e escolha Excluir.**
1. Revise as informações na caixa de diálogo, insira **confirm** e escolha **Excluir** para excluir a entidade.
# Entidades de dados gerenciadas no AWS App Studio
Normalmente, você configura uma entidade no App Studio com uma conexão com uma tabela de banco de dados externa e precisa criar e mapear cada campo de entidade com uma coluna na tabela do banco de dados conectado. Quando você faz uma alteração no modelo de dados, a tabela do banco de dados externo e a entidade devem ser atualizadas e os campos alterados devem ser remapeados. Embora esse método seja flexível e permita o uso de diferentes tipos de fontes de dados, ele exige um planejamento mais antecipado e uma manutenção contínua.
Uma *entidade gerenciada* é um tipo de entidade para a qual o App Studio gerencia todo o processo de armazenamento e configuração de dados para você. Quando você cria uma entidade gerenciada, uma tabela correspondente do DynamoDB é criada na conta associada. AWS Isso garante o gerenciamento seguro e transparente dos dados internos AWS. Com uma entidade gerenciada, você configura o esquema da entidade no App Studio, e a tabela correspondente do DynamoDB também é atualizada automaticamente.
## Usando entidades gerenciadas em vários aplicativos
Depois de criar uma entidade gerenciada em um aplicativo do App Studio, essa entidade pode ser usada em outros aplicativos do App Studio. Isso é útil para configurar o armazenamento de dados para aplicativos com modelos e esquemas de dados idênticos, fornecendo um único recurso subjacente para manutenção.
Ao usar uma entidade gerenciada em vários aplicativos, todas as atualizações de esquema na tabela correspondente do DynamoDB devem ser feitas usando o aplicativo original no qual a entidade gerenciada foi criada. Qualquer alteração de esquema feita na entidade em outros aplicativos não atualizará a tabela correspondente do DynamoDB.
## Limitações da entidade gerenciada
**Restrições de atualização da chave primária**: você não pode alterar o nome ou o tipo da chave primária da entidade após sua criação, pois essa é uma alteração destrutiva no DynamoDB e resultaria na perda dos dados existentes.
**Renomear colunas**: ao renomear uma coluna no DynamoDB, você realmente cria uma nova coluna enquanto a coluna original permanece com os dados originais. Os dados originais não são copiados automaticamente para a nova coluna nem excluídos da coluna original. Você pode renomear os campos da entidade gerenciada, conhecidos como *nome do sistema*, mas perderá o acesso à coluna original e seus dados. Não há restrições em renomear o nome de exibição.
**Alteração do tipo de dados**: embora o DynamoDB permita flexibilidade para modificar os tipos de dados da coluna após a criação da tabela, essas alterações podem afetar gravemente os dados existentes, bem como a lógica e a precisão da consulta. As mudanças no tipo de dados exigem a transformação de todos os dados existentes para que estejam em conformidade com o novo formato, que é complexo para tabelas grandes e ativas. Além disso, as ações de dados podem retornar resultados inesperados até que a migração dos dados seja concluída. Você pode alternar os tipos de dados dos campos, mas os dados existentes não serão migrados para o novo tipo de dados.
**Coluna de classificação**: o DynamoDB permite a recuperação de dados classificados por meio de chaves de classificação. As chaves de classificação devem ser definidas como parte das chaves primárias compostas junto com a chave de partição. As limitações incluem chave de classificação obrigatória, classificação confinada em uma partição e nenhuma classificação global entre partições. É necessária uma modelagem cuidadosa dos dados das chaves de classificação para evitar partições ativas. Não daremos suporte ao marco Sorting for Preview.
**Junções**: não há suporte para junções no DynamoDB. As tabelas são desnormalizadas por design para evitar operações de junção caras. Para modelar one-to-many relacionamentos, a tabela secundária contém um atributo que faz referência à chave primária da tabela principal. As consultas de dados de várias tabelas envolvem a pesquisa de itens da tabela principal para recuperar detalhes. Não daremos suporte a junções nativas para entidades gerenciadas como parte do marco do Preview. Como solução alternativa, apresentaremos uma etapa de automação que pode realizar uma mesclagem de dados de duas entidades. Isso será muito semelhante a uma pesquisa de um nível. Não daremos suporte ao marco Sorting for Preview.
**Env Stage**: permitiremos que a publicação seja testada, mas usaremos o mesmo armazenamento gerenciado em ambos os ambientes
# Parâmetros de página e automação
Os parâmetros são um recurso poderoso no AWS App Studio usado para transmitir valores dinâmicos entre diferentes componentes, páginas e automações em seu aplicativo. Usando parâmetros, você pode criar experiências flexíveis e sensíveis ao contexto, tornando seus aplicativos mais responsivos e personalizados. Este artigo aborda dois tipos de parâmetros: parâmetros de página e parâmetros de automação.
**Topics**
+ [Parâmetros da página](parameters-page.md)
+ [Parâmetros de automação](parameters-automation.md)
# Parâmetros da página
Os parâmetros de página são uma forma de enviar informações entre páginas e geralmente são usados ao navegar de uma página para outra em um aplicativo do App Studio para manter o contexto ou transmitir dados. Os parâmetros da página geralmente consistem em um nome e um valor.
## Casos de uso de parâmetros de página
Os parâmetros de página são usados para transmitir dados entre páginas e componentes diferentes em seus aplicativos do App Studio. Eles são particularmente úteis para os seguintes casos de uso:
1. Pesquisa **e filtragem: quando os usuários pesquisam** na página inicial do seu aplicativo, os termos de pesquisa podem ser passados como parâmetros para a página de resultados, permitindo que ela exiba somente os itens filtrados relevantes. Por exemplo, se um usuário pesquisar*noise-cancelling headphones*, o parâmetro com o valor *noise-cancelling headphones* poderá ser passado para a página de listagem do produto.
1. **Visualização dos detalhes do item**: se um usuário clicar em um anúncio, como um produto, o identificador exclusivo desse item poderá ser passado como parâmetro para a página de detalhes. Isso permite que a página de detalhes exiba todas as informações sobre o item específico. Por exemplo, quando um usuário clica em um produto de fone de ouvido, o ID exclusivo do produto é passado como parâmetro para a página de detalhes do produto.
1. **Transmitir o contexto do usuário na navegação da página**: à medida que os usuários navegam entre as páginas, os parâmetros podem transmitir contextos importantes, como a localização do usuário, as categorias de produtos preferidas, o conteúdo do carrinho de compras e outras configurações. Por exemplo, quando um usuário navega por diferentes categorias de produtos em seu aplicativo, sua localização e categorias preferidas são mantidas como parâmetros, proporcionando uma experiência personalizada e consistente.
1. **Links diretos**: use os parâmetros da página para compartilhar ou marcar um link para uma página específica dentro do aplicativo.
1. **Ações de dados**: você pode criar ações de dados que aceitem valores de parâmetros para filtrar e consultar suas fontes de dados com base nos parâmetros passados. Por exemplo, na página de listagem de produtos, você pode criar uma ação de dados que aceite `category` parâmetros para buscar os produtos relevantes.
## Considerações sobre a segurança dos parâmetros da página
Embora os parâmetros da página forneçam uma maneira poderosa de transmitir dados entre páginas, você deve usá-los com cuidado, pois eles podem expor informações confidenciais se não forem usados adequadamente. Aqui estão algumas considerações de segurança importantes que você deve ter em mente:
1. **Evite expor dados confidenciais em URLs**
1. **Risco**: URLs, incluindo parâmetros de ação de dados, geralmente são visíveis nos registros do servidor, no histórico do navegador e em outros lugares. Dessa forma, é essencial evitar a exposição de dados confidenciais, como credenciais do usuário, informações pessoais identificáveis (PII) ou quaisquer outros dados confidenciais, nos valores dos parâmetros da página.
1. **Atenuação**: considere o uso de identificadores que possam ser mapeados com segurança para os dados confidenciais. Por exemplo, em vez de passar o nome ou endereço de e-mail de um usuário como parâmetro, você pode passar um identificador exclusivo aleatório que pode ser usado para buscar o nome ou o e-mail do usuário.
# Parâmetros de automação
Os parâmetros de automação são um recurso poderoso no App Studio que pode ser usado para criar automações flexíveis e reutilizáveis ao transmitir valores dinâmicos de várias fontes, como a interface do usuário, outras automações ou ações de dados. Eles atuam como espaços reservados que são substituídos por valores reais quando a automação é executada, permitindo que você use a mesma automação com entradas diferentes a cada vez.
Em uma automação, os parâmetros têm nomes exclusivos e você pode referenciar o valor de um parâmetro usando a variável params seguida pelo nome do parâmetro, por exemplo,`{{params.customerId}}`.
Este artigo fornece uma compreensão aprofundada dos parâmetros de automação, incluindo seus conceitos fundamentais, uso e melhores práticas.
## Benefícios dos parâmetros de automação
Os parâmetros de automação oferecem vários benefícios, incluindo a lista a seguir:
1. **Reutilização**: ao usar parâmetros, você pode criar automações reutilizáveis que podem ser personalizadas com valores de entrada diferentes, permitindo reutilizar a mesma lógica de automação com entradas diferentes.
1. **Flexibilidade**: em vez de codificar valores em uma automação, você pode definir parâmetros e fornecer valores diferentes quando necessário, tornando suas automações mais dinâmicas e adaptáveis.
1. **Separação de preocupações**: os parâmetros ajudam a separar a lógica de automação dos valores específicos usados, promovendo a organização e a capacidade de manutenção do código.
1. **Validação**: cada parâmetro tem um tipo de dados, como string, número ou booleano, que é validado em tempo de execução. Isso garante que as solicitações com tipos de dados incorretos sejam rejeitadas sem a necessidade de um código de validação personalizado.
1. **Parâmetros opcionais e obrigatórios**: você pode designar os parâmetros de automação como opcionais ou obrigatórios. Os parâmetros necessários devem ser fornecidos ao executar a automação, enquanto os parâmetros opcionais podem ter valores padrão ou ser omitidos. Essa flexibilidade permite criar automações mais versáteis que podem lidar com diferentes cenários com base nos parâmetros fornecidos.
## Cenários e casos de uso
### Cenário: recuperação de detalhes do produto
Imagine que você tenha uma automação que recupera detalhes do produto de um banco de dados com base em uma ID do produto. Essa automação pode ter um parâmetro chamado`productId`.
O `productId` parâmetro atua como um espaço reservado que você pode preencher com o valor real do ID do produto ao executar a automação. Em vez de codificar uma ID de produto específica na automação, você pode definir o `productId` parâmetro e passar valores de ID de produto diferentes sempre que executar a automação.
Você pode chamar essa automação da fonte de dados de um componente, passando o ID do produto selecionado como `productId` parâmetro usando a sintaxe de colchetes duplos:. `{{ui.productsTable.selectedRow.id}}` Dessa forma, quando um usuário seleciona um produto de uma tabela (`ui.productsTable`), a automação recuperará os detalhes do produto selecionado passando o id da linha selecionada como parâmetro. `productId`
Como alternativa, você pode invocar essa automação a partir de outra automação que percorre uma lista de produtos e recupera os detalhes de cada produto passando o ID do produto como parâmetro. `productId` Nesse cenário, o valor do `productId` parâmetro seria fornecido dinamicamente pela `{{product.id}}` expressão em cada iteração do loop.
Usando o `productId` parâmetro e a sintaxe de colchetes duplos, você pode tornar essa automação mais flexível e reutilizável. Em vez de criar automações separadas para cada produto, você pode ter uma única automação que pode recuperar detalhes de qualquer produto simplesmente fornecendo o ID do produto apropriado como valor do parâmetro de diferentes fontes, como componentes de interface do usuário ou outras automações.
### Cenário: manipulação de parâmetros opcionais com valores alternativos
Vamos considerar um cenário em que você tem uma entidade “Tarefa” com uma coluna “Proprietário” obrigatória, mas deseja que esse campo seja opcional na automação e forneça um valor alternativo se o proprietário não for selecionado.
1. Crie uma automação com um parâmetro chamado `Owner` que mapeia para o `Owner` campo da `Task` entidade.
1. Como o `Owner` campo é obrigatório na entidade, o `Owner` parâmetro será sincronizado com a configuração necessária.
1. Para tornar o `Owner` parâmetro opcional na automação, desative a `required` configuração desse parâmetro.
1. Em sua lógica de automação, você pode usar uma expressão como`{{params.Owner || currentUser.userId}}`. Essa expressão verifica se o `Owner` parâmetro é fornecido. Se não for fornecido, ele retornará ao ID do usuário atual como proprietário.
1. Dessa forma, se o usuário não selecionar um proprietário em um formulário ou componente, a automação atribuirá automaticamente o usuário atual como proprietário da tarefa.
Ao alternar a `required` configuração do `Owner` parâmetro e usar uma expressão alternativa, você pode desacoplá-la do requisito do campo da entidade, torná-la opcional na automação e fornecer um valor padrão quando o parâmetro não for fornecido.
## Definindo tipos de parâmetros de automação
Ao usar tipos de parâmetros para especificar tipos de dados e definir requisitos, você pode controlar as entradas para suas automações. Isso ajuda a garantir que suas automações sejam executadas de forma confiável com as entradas esperadas.
### Sincronizando tipos de uma entidade
A sincronização dinâmica dos tipos de parâmetros e requisitos das definições do campo da entidade simplifica a criação de automações que interagem com os dados da entidade, garantindo que o parâmetro sempre reflita o tipo e os requisitos mais recentes do campo da entidade.
O procedimento a seguir detalha as etapas gerais para sincronizar tipos de parâmetros de uma entidade:
1. Crie uma entidade com campos digitados (por exemplo, booleano, número etc.) e marque os campos conforme necessário.
1. Crie uma nova automação.
1. Adicione parâmetros à automação e, ao escolher o **Tipo**, escolha o campo de entidade com o qual você deseja sincronizar. O tipo de dados e a configuração necessária serão sincronizados automaticamente a partir do campo da entidade mapeada
1. Se necessário, você pode substituir a configuração “obrigatória” alternando-a on/off para cada parâmetro. Isso significa que o status necessário não será mantido em sincronia com o campo da entidade, mas, caso contrário, permanecerá sincronizado.
### Definindo tipos manualmente
Você também pode definir tipos de parâmetros manualmente sem sincronizar a partir de uma entidade
Ao definir tipos de parâmetros personalizados, você pode criar automações que aceitam tipos de entrada específicos e manipulam parâmetros opcionais ou obrigatórios conforme necessário, sem depender de mapeamentos de campos de entidades.
1. Crie uma entidade com campos digitados (por exemplo, booleano, número etc.) e marque os campos conforme necessário.
1. Crie uma nova automação.
1. Adicione parâmetros à automação e, ao escolher o **Tipo**, escolha o tipo desejado.
## Configurando valores dinâmicos a serem passados para parâmetros de automação
Depois de definir os parâmetros para uma automação, você pode passar valores para eles ao invocar a automação. Você pode passar valores de parâmetros de duas maneiras:
1. **Acionadores de componentes**: se você estiver invocando a automação a partir de um acionador de componente, como um clique em um botão, poderá usar JavaScript expressões para transmitir valores do contexto do componente. Por exemplo, se você tiver um campo de entrada de texto chamado`emailInput`, você pode passar seu valor para o parâmetro email com a seguinte expressão:`ui.emailInput.value`.
1. **Outras automações**: se você estiver invocando a automação de outra automação, poderá usar JavaScript expressões para transmitir valores do contexto de automação. Por exemplo, você pode passar o valor de outro parâmetro ou o resultado de uma etapa de ação anterior.
## Tipo de segurança
Ao definir parâmetros com tipos de dados específicos, como String, Number ou Boolean, você pode garantir que os valores passados para sua automação sejam do tipo esperado.
**nota**
No App Studio, as datas são datas de sequência de caracteres ISO e também serão validadas.
Essa segurança de tipo ajuda a evitar incompatibilidades de tipos, o que pode levar a erros ou comportamentos inesperados em sua lógica de automação. Por exemplo, se você definir um parâmetro como a`Number`, pode ter certeza de que qualquer valor passado para esse parâmetro será um número e não precisará realizar verificações de tipo ou conversões adicionais em sua automação.
## Validação
Você pode adicionar regras de validação aos seus parâmetros, garantindo que os valores passados para sua automação atendam a determinados critérios.
Embora o App Studio não forneça configurações de validação integradas para parâmetros, você pode implementar validações personalizadas adicionando uma JavaScript ação à sua automação que gera um erro se restrições específicas forem violadas.
Para campos de entidade, há suporte para um subconjunto de regras de validação, como minimum/maximum valores. No entanto, eles não são validados no nível de automação, somente na camada de dados, ao executar ações de Create/Update/Delete registro.
## Melhores práticas para parâmetros de automação
Para garantir que seus parâmetros de automação sejam bem projetados, fáceis de manter e fáceis de usar, siga estas melhores práticas:
1. **Use nomes de parâmetros descritivos**: escolha nomes de parâmetros que descrevam claramente a finalidade ou o contexto do parâmetro.
1. **Forneça descrições de parâmetros**: aproveite o campo **Descrição** ao definir parâmetros para explicar sua finalidade, restrições e expectativas. Essas descrições aparecerão nos JSDoc comentários ao fazer referência ao parâmetro, bem como em qualquer interface de usuário em que os usuários precisem fornecer valores para os parâmetros ao invocar a automação.
1. **Use os tipos de dados apropriados**: considere cuidadosamente o tipo de dados de cada parâmetro com base nos valores de entrada esperados, por exemplo: String, Number, Boolean, Object.
1. **Valide os valores dos parâmetros**: implemente verificações de validação apropriadas em sua automação para garantir que os valores dos parâmetros atendam aos requisitos específicos antes de prosseguir com outras ações.
1. **Use valores alternativos ou padrão**: embora o App Studio atualmente não ofereça suporte à configuração de valores padrão para parâmetros, você pode implementar valores alternativos ou padrão ao consumir os parâmetros em sua lógica de automação. Por exemplo, você pode usar uma expressão como `{{ params.param1 || "default value" }}` para fornecer um valor padrão se o `param1` parâmetro não for fornecido ou tiver um valor falso.
1. **Mantenha a consistência dos parâmetros**: se você tiver várias automações que exigem parâmetros semelhantes, tente manter a consistência nos nomes dos parâmetros e nos tipos de dados dessas automações.
1. **Documente o uso de parâmetros**: mantenha uma documentação clara para suas automações, incluindo descrições de cada parâmetro, sua finalidade, valores esperados e quaisquer exemplos relevantes ou casos extremos.
1. **Revise e refatore com frequência**: revise periodicamente suas automações e seus parâmetros, refatorando ou consolidando os parâmetros conforme necessário para melhorar a clareza, a capacidade de manutenção e a reutilização.
1. **Limite o número de parâmetros**: embora os parâmetros ofereçam flexibilidade, muitos parâmetros podem tornar a automação complexa e difícil de usar. Procure encontrar um equilíbrio entre flexibilidade e simplicidade, limitando o número de parâmetros apenas ao necessário.
1. **Considere o agrupamento de parâmetros: se você estiver definindo vários parâmetros relacionados, considere agrupá-los em um único *Object* parâmetro**.
1. **Preocupações separadas**: evite usar um único parâmetro para várias finalidades ou combinar valores não relacionados em um único parâmetro. Cada parâmetro deve representar uma preocupação ou dado distinto.
1. **Use aliases de parâmetros**: se você tiver parâmetros com nomes longos ou complexos, considere usar aliases ou versões abreviadas dentro da lógica de automação para melhor legibilidade e facilidade de manutenção.
Ao seguir essas melhores práticas, você pode garantir que seus parâmetros de automação sejam bem projetados, fáceis de manter e fáceis de usar, melhorando, em última análise, a qualidade e a eficiência gerais de suas automações.
# Usando JavaScript para escrever expressões no App Studio
No AWS App Studio, você pode usar JavaScript expressões para controlar dinamicamente o comportamento e a aparência dos seus aplicativos. As JavaScript expressões de linha única são escritas entre chaves duplas e podem ser usadas em vários contextos`{{ }}`, como automações, componentes de interface do usuário e consultas de dados. Essas expressões são avaliadas em tempo de execução e podem ser usadas para realizar cálculos, manipular dados e controlar a lógica do aplicativo.
O App Studio fornece suporte nativo para três bibliotecas de código JavaScript aberto: Luxon, UUID, Lodash, bem como integrações de SDK para detectar erros de JavaScript sintaxe e verificação de tipos nas configurações do seu aplicativo.
**Importante**
O App Studio não oferece suporte ao uso de JavaScript bibliotecas personalizadas ou de terceiros.
## Sintaxe básica
JavaScript as expressões podem incluir variáveis, literais, operadores e chamadas de função. As expressões são comumente usadas para realizar cálculos ou avaliar condições.
Veja os exemplos a seguir:
+ `{{ 2 + 3 }}`será avaliado em 5.
+ `{{ "Hello, " + "World!" }}`será avaliado como “Hello, World\$1”.
+ `{{ Math.max(5, 10) }}`será avaliado em 10.
+ `{{ Math.random() * 10 }}`retorna um número aleatório (com decimais) entre [0-10).
## Interpolação
Você também pode usar JavaScript para interpolar valores dinâmicos em texto estático. Isso é obtido colocando a JavaScript expressão entre colchetes duplos, como no exemplo a seguir:
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
Neste exemplo, `currentUser.firstName` é uma JavaScript expressão que recupera o primeiro nome do usuário atual, que é então inserido dinamicamente na mensagem de saudação.
## Concatenação
Você pode concatenar cadeias de caracteres e variáveis usando o `+` operador in JavaScript, como no exemplo a seguir.
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
Essa expressão combina os valores de `currentRow.FirstName` e `currentRow.LastName` com um espaço entre eles, resultando no nome completo da linha atual. Por exemplo, se `currentRow.FirstName` for `John` e `currentRow.LastName` for`Doe`, a expressão resolveria para`John Doe`.
## Data e hora
JavaScript fornece várias funções e objetos para trabalhar com datas e horas. Por exemplo:
+ `{{ new Date().toLocaleDateString() }}`: retorna a data atual em um formato localizado.
+ `{{ DateTime.now().toISODate() }}`: retorna a data atual em YYYY-MM-DD formato, para uso no componente Data.
### Comparação de data e hora
Use operadores como`=`,,`>`, `<``>=`, ou `<=` para comparar valores de data ou hora. Por exemplo:
+ `{{ui.timeInput.value > "10:00 AM"}}`: Verifica se o horário é depois das 10h.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Verifica se o horário é às 17h ou antes.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: verifica se a hora é posterior à hora atual.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: verifica se a data é anterior à data atual.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: Verifica se a data é de pelo menos 5 dias a partir da data atual.
## Blocos de código
Além das expressões, você também pode escrever blocos de JavaScript código de várias linhas. Diferentemente das expressões, os blocos de código não precisam de chaves curvas. Em vez disso, você pode escrever seu JavaScript código diretamente no editor do bloco de código.
**nota**
Enquanto as expressões são avaliadas e seus valores são exibidos, os blocos de código são executados e sua saída (se houver) é exibida.
## Variáveis e funções globais
O App Studio fornece acesso a determinadas variáveis e funções globais que podem ser usadas em suas JavaScript expressões e blocos de código. Por exemplo, `currentUser` é uma variável global que representa o usuário atualmente conectado, e você pode acessar propriedades como recuperar `currentUser.role` a função do usuário.
## Referenciando ou atualizando os valores dos componentes da interface do usuário
Você pode usar expressões em componentes e ações de automação para referenciar e atualizar os valores dos componentes da interface do usuário. Ao referenciar e atualizar programaticamente os valores dos componentes, você pode criar interfaces de usuário dinâmicas e interativas que respondam às entradas do usuário e às alterações nos dados.
### Fazendo referência aos valores dos componentes da interface do usuário
Você pode criar aplicativos interativos e orientados por dados implementando o comportamento dinâmico acessando valores dos componentes da interface do usuário.
Você pode acessar valores e propriedades dos componentes da interface do usuário na mesma página usando o `ui` namespace nas expressões. Ao referenciar o nome de um componente, você pode recuperar seu valor ou realizar operações com base em seu estado.
**nota**
O `ui` namespace mostrará somente componentes na página atual, pois os componentes têm como escopo suas respectivas páginas.
A sintaxe básica para se referir aos componentes em um aplicativo do App Studio é:`{{ui.componentName}}`.
A lista a seguir contém exemplos de uso do `ui` namespace para acessar os valores dos componentes da interface do usuário:
+ `{{ui.textInputName.value}}`: representa o valor de um componente de entrada de texto chamado*textInputName*.
+ `{{ui.formName.isValid}}`: verifique se todos os campos no formulário nomeado *formName* são válidos com base nos critérios de validação fornecidos.
+ `{{ui.tableName.currentRow.columnName}}`: representa o valor de uma coluna específica na linha atual de um componente de tabela chamado*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: representa o valor do campo especificado na linha selecionada em um componente de tabela chamado*tableName*. Em seguida, você pode acrescentar um nome de campo, como `ID` (`{{ui.tableName.selectedRowData.ID}}`), para referenciar o valor desse campo na linha selecionada.
A lista a seguir contém exemplos mais específicos de valores de componentes de referência:
+ `{{ui.inputText1.value.trim().length > 0}}`: verifique se o valor do *inputText1* componente, depois de cortar qualquer espaço em branco à esquerda ou à direita, tem uma string não vazia. Isso pode ser útil para validar a entrada do usuário ou enabling/disabling outros componentes com base no valor do campo de texto de entrada.
+ `{{ui.multiSelect1.value.join(", ")}}`: para um componente de seleção múltipla chamado*multiSelect1*, essa expressão converte a matriz de valores de opção selecionados em uma string separada por vírgula. Isso pode ser útil para exibir as opções selecionadas em um formato fácil de usar ou passar as seleções para outro componente ou automação.
+ `{{ui.multiSelect1.value.includes("option1")}}`: essa expressão verifica se o valor *option1* está incluído na matriz de opções selecionadas para o *multiSelect1* componente. Ele retorna verdadeiro se *option1* for selecionado e falso caso contrário. Isso pode ser útil para renderizar componentes condicionalmente ou realizar ações com base em seleções de opções específicas.
+ `{{ui.s3Upload1.files.length > 0}}`: Para um componente de upload de arquivos do Amazon S3 chamado*s3Upload1*, essa expressão verifica se algum arquivo foi carregado verificando o tamanho da matriz de arquivos. Ele pode ser útil para enabling/disabling outros componentes ou ações com base no fato de os arquivos terem sido carregados.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: essa expressão filtra a lista de arquivos enviados no *s3Upload1* componente para incluir somente arquivos de imagem PNG e retorna a contagem desses arquivos. Isso pode ser útil para validar ou exibir informações sobre os tipos de arquivos enviados.
### Atualização dos valores dos componentes da interface do usuário
Para atualizar ou manipular o valor de um componente, use o `RunComponentAction` dentro de uma automação. Aqui está um exemplo da sintaxe que você pode usar para atualizar o valor de um componente de entrada de texto chamado *myInput* usando a `RunComponentAction` ação:
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
Neste exemplo, a `RunComponentAction` etapa chama a `setValue` ação no *myInput* componente, passando o novo valor,*New Value*.
## Trabalhando com dados da tabela
Você pode acessar dados e valores da tabela para realizar operações. Você pode usar as seguintes expressões para acessar os dados da tabela:
+ `currentRow`: usado para acessar os dados da tabela a partir da linha atual dentro da tabela. Por exemplo, definir o nome de uma ação de tabela, enviar um valor da linha para uma automação iniciada a partir de uma ação ou usar valores de colunas existentes em uma tabela para criar uma nova coluna.
+ `ui.tableName.selectedRow`e ambos `ui.tableName.selectedRowData` são usados para acessar dados da tabela de outros componentes na página. Por exemplo, definir o nome de um botão fora da tabela com base na linha selecionada. Os valores retornados são os mesmos, mas as diferenças entre `selectedRow` e `selectedRowData` são as seguintes:
+ `selectedRow`: esse namespace inclui o nome mostrado no cabeçalho da coluna de cada campo. Você deve usar `selectedRow` ao referenciar um valor de uma coluna visível na tabela. Por exemplo, se você tiver uma coluna personalizada ou computada em sua tabela que não existe como um campo na entidade.
+ `selectedRowData`: esse namespace inclui os campos na entidade usada como fonte para a tabela. Você deve usar `selectedRowData` para referenciar um valor da entidade que não está visível na tabela, mas é útil para outros componentes ou automações em seu aplicativo.
A lista a seguir contém exemplos de como acessar dados da tabela em expressões:
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: retorna o valor da *columnNameWithNoSpace* coluna da linha selecionada na tabela.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: retorna o valor da *Column Name With Space* coluna da linha selecionada na tabela.
+ `{{ui.tableName.selectedRowData.fieldName}}`: retorna o valor do campo da *fieldName* entidade da linha selecionada na tabela.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: faça referência ao nome da coluna da linha selecionada a partir de outros componentes ou expressões na mesma página.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: concatene valores de várias colunas para criar uma nova coluna em uma tabela.
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: personalize o valor de exibição de um campo em uma tabela com base no valor de status armazenado.
+ `{{currentRow.colName}}`,`{{currentRow["First Name"]}}`,`{{currentRow}}`, ou`{{ui.tableName.selectedRows[0]}}`: passe o contexto da linha referenciada em uma ação de linha.
## Acessando automações
Você pode usar automações para executar a lógica e as operações do lado do servidor no App Studio. Nas ações de automação, você pode usar expressões para processar dados, gerar valores dinâmicos e incorporar resultados de ações anteriores.
### Acessando parâmetros de automação
Você pode passar valores dinâmicos dos componentes da interface do usuário e de outras automações para as automações, tornando-as reutilizáveis e flexíveis. Isso é feito usando parâmetros de automação com o `params` namespace da seguinte forma:
`{{params.parameterName}}`: faça referência a um valor passado para a automação a partir de um componente de interface do usuário ou de outra fonte. Por exemplo, `{{params.ID}}` faria referência a um parâmetro chamado*ID*.
#### Manipulando parâmetros de automação
Você pode usar JavaScript para manipular parâmetros de automação. Veja os exemplos a seguir:
+ `{{params.firstName}} {{params.lastName}}`: concatene valores passados como parâmetros.
+ `{{params.numberParam1 + params.numberParam2}}`: adicione dois parâmetros numéricos.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: verifique se um parâmetro não é nulo ou indefinido e tem um comprimento diferente de zero. Se verdadeiro, use o valor fornecido; caso contrário, defina um valor padrão.
+ `{{params.rootCause || "No root cause provided"}}`: se o `params.rootCause` parâmetro for falso (nulo, indefinido ou uma string vazia), use o valor padrão fornecido.
+ `{{Math.min(params.numberOfProducts, 100)}}`: restrinja o valor de um parâmetro a um valor máximo (nesse caso,`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: se o `params.startDate` parâmetro for`"2023-06-15T10:30:00.000Z"`, essa expressão será avaliada como`"2023-06-22T10:30:00.000Z"`, que é a data uma semana após a data de início.
### Acessando resultados de automação de uma ação anterior
As automações permitem que o aplicativo execute operações e lógicas do lado do servidor, como consultar bancos de dados, interagir APIs ou realizar transformações de dados. O `results` namespace fornece acesso às saídas e aos dados retornados por ações anteriores dentro da mesma automação. Observe os seguintes pontos sobre o acesso aos resultados da automação:
1. Você só pode acessar os resultados das etapas de automação anteriores dentro da mesma automação.
1. Se você tiver ações nomeadas *action1* e *action2* nessa ordem, *action1* não poderá referenciar nenhum resultado e só *action2* poderá acessar`results.action1`.
1. Isso também funciona em ações do lado do cliente. Por exemplo, se você tiver um botão que aciona uma automação usando a `InvokeAutomation` ação. Em seguida, você pode ter uma etapa de navegação com uma `Run If` condição como navegar `results.myInvokeAutomation1.fileType === "pdf"` até uma página com um visualizador de PDF se a automação indicar que o arquivo é um PDF.
A lista a seguir contém a sintaxe para acessar os resultados de automação de uma ação anterior usando o `results` namespace.
+ `{{results.stepName.data}}`: recupere a matriz de dados de uma etapa de automação chamada*stepName*.
+ `{{results.stepName.output}}`: recupere a saída de uma etapa de automação chamada*stepName*.
A forma como você acessa os resultados de uma etapa de automação depende do tipo de ação e dos dados que ela retorna. Ações diferentes podem retornar propriedades ou estruturas de dados diferentes. Veja aqui alguns exemplos comuns:
+ Para uma ação de dados, você pode acessar a matriz de dados retornada usando`results.stepName.data`.
+ Para uma ação de chamada de API, você pode acessar o corpo da resposta usando`results.stepName.body`.
+ Para uma ação do Amazon S3, você pode acessar o conteúdo do arquivo usando. `results.stepName.Body.transformToWebStream()`
Consulte a documentação dos tipos de ação específicos que você está usando para entender a forma dos dados que eles retornam e como acessá-los dentro do `results` namespace. A lista a seguir contém alguns exemplos
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: supondo que *getDataStep* seja uma ação de `Invoke Data Action` automação que retorna uma matriz de linhas de dados, essa expressão filtra a matriz de dados para incluir somente linhas em que o campo de status seja igual e retorna o comprimento (contagem) da matriz filtrada. `pending` Isso pode ser útil para consultar ou processar dados com base em condições específicas.
+ `{{params.email.split("@")[0]}}`: se o `params.email` parâmetro contiver um endereço de e-mail, essa expressão dividirá a string no símbolo @ e retornará a parte antes do símbolo @, extraindo efetivamente a parte do nome de usuário do endereço de e-mail.
+ `{{new Date(params.timestamp * 1000)}}`: essa expressão usa um parâmetro de carimbo de data/hora do Unix (`params.timestamp`) e o converte em um objeto Date. JavaScript Ele assume que o timestamp está em segundos, então ele o multiplica por 1000 para convertê-lo em milissegundos, que é o formato esperado pelo construtor. `Date` Isso pode ser útil para trabalhar com valores de data e hora em automações.
+ `{{results.stepName.Body}}`: para uma ação de `Amazon S3 GetObject` automação chamada*stepName*, essa expressão recupera o conteúdo do arquivo, que pode ser consumido por componentes da interface do usuário, como **Visualizador de **imagens** ou PDF**, para exibir o arquivo recuperado. Observe que essa expressão precisaria ser configurada na **saída de automação** da automação para ser usada em componentes.
# Dependências de dados e considerações de tempo
Ao criar aplicativos complexos no App Studio, é fundamental entender e gerenciar as dependências de dados entre diferentes componentes de dados, como formulários, visualizações de detalhes e componentes baseados em automação. Os componentes de dados e as automações podem não concluir sua recuperação ou execução de dados ao mesmo tempo, o que pode levar a problemas de tempo, erros e comportamentos inesperados. Ao estar ciente dos possíveis problemas de temporização e seguir as melhores práticas, você pode criar experiências de usuário mais confiáveis e consistentes em seus aplicativos do App Studio.
Alguns possíveis problemas são os seguintes:
1. **Conflitos de tempo de renderização:** os componentes de dados podem ser renderizados em uma ordem que não está alinhada com suas dependências de dados, o que pode causar inconsistências ou erros visuais.
1. **Tempo de execução da automação:** as tarefas de automação podem ser concluídas antes que os componentes sejam totalmente carregados, levando a erros de execução do tempo de execução.
1. **Falhas de componentes:** componentes alimentados por automações podem falhar em respostas inválidas ou quando a automação não termina de ser executada.
## Exemplo: detalhes do pedido e informações do cliente
Este exemplo demonstra como dependências entre componentes de dados podem levar a problemas de tempo e possíveis erros na exibição de dados.
Considere um aplicativo com os dois componentes de dados a seguir na mesma página:
+ Um componente Detail (`orderDetails`) que busca dados do pedido.
+ Um componente detalhado (`customerDetails`) que exibe detalhes do cliente relacionados ao pedido.
Nesse aplicativo, há dois campos no componente de `orderDetails` detalhes, configurados com os seguintes valores:
```
// 2 text fields within the orderDetails detail component
// Info from orderDetails Component
{{ui.orderDetails.data[0].name}}
// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```
Neste exemplo, o `orderDetails` componente está tentando exibir o nome do cliente fazendo referência aos dados do `customerDetails` componente. Isso é problemático, pois o `orderDetails` componente pode renderizar antes que o `customerDetails` componente tenha buscado seus dados. Se a busca de dados do `customerDetails` componente for atrasada ou falhar, o `orderDetails` componente exibirá informações incompletas ou incorretas.
## Práticas recomendadas de dependência e tempo de dados
Use as seguintes práticas recomendadas para reduzir a dependência de dados e os problemas de tempo em seu aplicativo do App Studio:
1. **Use renderização condicional:** somente renderize componentes ou exiba dados quando você confirmar que eles estão disponíveis. Use declarações condicionais para verificar a presença de dados antes de exibi-los. O trecho a seguir mostra um exemplo de declaração condicional:
```
{{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
```
1. **Gerencie a visibilidade de componentes secundários:** para componentes como Stepflow, Form ou Detail, que renderizam filhos antes de seus dados serem carregados, defina manualmente a visibilidade dos componentes secundários. O trecho a seguir mostra um exemplo de configuração de visibilidade com base na disponibilidade de dados do componente principal:
```
{{ui.parentComponent.data ? true : false}}
```
1. **Use consultas de junção:** quando possível, use consultas de junção para buscar dados relacionados em uma única consulta. Isso reduz o número de buscas de dados separadas e minimiza os problemas de tempo entre os componentes de dados.
1. **Implemente o tratamento de erros em automações:** implemente um tratamento robusto de erros em suas automações para gerenciar com elegância cenários em que os dados esperados não estejam disponíveis ou respostas inválidas sejam recebidas.
1. **Use o encadeamento opcional:** ao acessar propriedades aninhadas, use o encadeamento opcional para evitar erros se uma propriedade principal for indefinida. O trecho a seguir mostra um exemplo de encadeamento opcional:
```
{{ui.component.data?.[0]?.fieldSystemName}}
```
# Criando um aplicativo com vários usuários
Vários usuários podem trabalhar em um único aplicativo do App Studio, mas somente um usuário pode editar um aplicativo por vez. Consulte as seções a seguir para obter informações sobre como convidar outros usuários para editar um aplicativo e o comportamento quando vários usuários tentam editar um aplicativo ao mesmo tempo.
## Convide criadores para editar um aplicativo
Use as instruções a seguir para convidar outros criadores a editar um aplicativo do App Studio.
**Para convidar outros criadores para editar um aplicativo**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo.
1. Selecione **Share**.
1. Na guia **Desenvolvimento**, use a caixa de texto para pesquisar e selecionar grupos ou usuários individuais que você deseja convidar para editar o aplicativo.
1. Para cada usuário ou grupo, escolha a lista suspensa e selecione as permissões a serem concedidas a esse usuário ou grupo.
+ **Coproprietário**: os coproprietários têm as mesmas permissões que os proprietários do aplicativo.
+ **Somente edição**: os usuários com a função **Somente edição** têm as mesmas permissões dos proprietários e coproprietários, exceto pelo seguinte:
+ Eles não podem convidar outros usuários para editar o aplicativo.
+ Eles não podem publicar o aplicativo nos ambientes de teste ou produção.
+ Eles não podem adicionar fontes de dados ao aplicativo.
+ Eles não podem excluir ou duplicar o aplicativo.
## Tentativa de editar um aplicativo que está sendo editado por outro usuário
Um único aplicativo do App Studio só pode ser editado por um usuário por vez. Veja o exemplo a seguir para entender o que acontece quando vários usuários tentam editar um aplicativo ao mesmo tempo.
Neste exemplo, `User A` está editando um aplicativo no momento e o compartilhou com`User B`. `User B`em seguida, tenta editar o aplicativo que está sendo editado pelo`User A`.
Ao `User B` tentar editar o aplicativo, uma caixa de diálogo aparecerá informando que `User A` está editando o aplicativo no momento, que a continuação será `User A` excluída do estúdio de aplicativos e todas as alterações serão salvas. `User B`pode optar por cancelar e deixar `User A` continuar, ou continuar e entrar no estúdio de aplicativos para editar o aplicativo. Neste exemplo, eles optam por editar o aplicativo.
Quando `User B` escolhe editar o aplicativo, `User A` recebe uma notificação que `User B` começou a editar o aplicativo e a sessão foi encerrada. Observe que, `User A` se o aplicativo estiver aberto em uma guia inativa do navegador, eles podem não receber a notificação. Nesse caso, se eles tentarem voltar ao aplicativo e tentar fazer uma edição, receberão uma mensagem de erro e serão orientados a atualizar a página, o que os retornará à lista de aplicativos.
# Visualizando ou atualizando as configurações de segurança de conteúdo do seu aplicativo
Cada aplicativo no App Studio tem configurações de segurança de conteúdo que podem ser usadas para impedir que mídias ou recursos externos, como imagens, iFrames, sejam carregados ou permitidos somente de domínios específicos URLs (incluindo buckets do Amazon S3). PDFs Você também pode especificar os domínios para os quais seu aplicativo pode carregar objetos para o Amazon S3.
As configurações padrão de segurança de conteúdo para todos os aplicativos são bloquear o carregamento de todas as mídias de fontes externas, incluindo buckets do Amazon S3, e bloquear o upload de objetos para o Amazon S3. Portanto, para carregar imagens, iFrames ou mídia similar, você deve editar as configurações para permitir as fontes da mídia. PDFs Além disso, para permitir o upload de objetos para o Amazon S3, você deve editar as configurações para permitir que os domínios possam ser carregados.
**nota**
As configurações de segurança de conteúdo são usadas para configurar os cabeçalhos da Política de Segurança de Conteúdo (CSP) em seu aplicativo. O CSP é um padrão de segurança que ajuda a proteger seu aplicativo contra scripts entre sites (XSS), clickjacking e outros ataques de injeção de código. Para obter mais informações sobre CSP, consulte [Política de Segurança de Conteúdo (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) no MDN Web Docs.
**Para atualizar as configurações de segurança de conteúdo do seu aplicativo**
1. Se necessário, navegue até o estúdio de aplicativos do seu aplicativo escolhendo editá-lo na lista de aplicativos.
1. Escolha **Configurações do aplicativo**.
1. Escolha a guia **Configurações de segurança de conteúdo** para visualizar as seguintes configurações:
+ **Fonte de quadros**: usada para gerenciar os domínios dos quais seu aplicativo pode carregar frames e iframes (como conteúdo interativo ou PDFs). Essa configuração afeta os seguintes componentes ou recursos do aplicativo:
+ Componente de incorporação do iFrame
+ Componente de visualização de PDF
+ **Fonte da imagem**: usada para gerenciar os domínios dos quais seu aplicativo pode carregar imagens. Essa configuração afeta os seguintes componentes ou recursos do aplicativo:
+ Logotipo e banner do aplicativo
+ Componente visualizador de imagens
+ **Connect source**: usado para gerenciar os domínios para os quais seu aplicativo pode carregar objetos do Amazon S3.
1. Para cada configuração, escolha a configuração desejada no menu suspenso:
+ **Bloquear tudo frames/images/connections**: não permita que nenhuma mídia (imagens, molduras PDFs) seja carregada ou que nenhum objeto seja carregado para o Amazon S3.
+ **Permitir tudo frames/images/connections**: permitir que todas as mídias (imagens, molduras PDFs) de todos os domínios sejam carregadas ou permita o upload de objetos para o Amazon S3 para todos os domínios.
+ **Permitir domínios específicos**: permitir o carregamento de mídia de ou o upload de mídia para domínios especificados. Domínios ou URLs são especificados como uma lista de expressões separadas por espaços, em que curingas (`*`) podem ser usados para subdomínios, endereço de host ou número de porta para indicar que todos os valores legais de cada um são válidos. A especificação `http` também corresponde`https`. A lista a seguir contém exemplos de entradas válidas:
+ `blob:`: corresponde a todos os blobs, o que inclui dados de arquivos retornados por ações de automação, como `GetObject` devolução de itens de buckets do Amazon S3 ou imagens geradas pelo Amazon Bedrock.
**Importante**
Você deve incluir na expressão fornecida `blob:` para permitir que os dados do arquivo sejam retornados por ações, mesmo que sua expressão seja`*`, você deve atualizá-la para `* blob:`
+ `http://*.example.com`: corresponde a todas as tentativas de carregamento de qualquer subdomínio do`example.com`. Também combina `https` recursos.
+ `https://source1.example.com https//source2.example.com`: corresponde a todas as tentativas de carregamento de ambos `https://source1.example.com` e `https://source2.example.com`
+ `https://example.com/subdirectory/`: corresponde a todas as tentativas de carregar arquivos no diretório do subdiretório. Por exemplo, .`https://example.com/subdirectory/path/to/file.jpeg` Não coincide`https://example.com/path/to/file.jpeg`.
1. Escolha **Salvar** para salvar as alterações.