Capítulo 6: Usando a API Web no aplicativo

Artigo
09/29/2023

Maria e Kiana estão prontas para combinar o aplicativo com a API Web. No entanto, antes de prosseguir, elas decidem consultar Preeti, a gerente de operações de TI.

Noções básicas sobre os requisitos de gerenciamento de operações de TI para a API Web

Preeti se preocupa quanto à segurança do aplicativo e da API Web, pois fornecem acesso a dados confidenciais armazenados em vários bancos de dados. Preeti quer garantias de que poderá incluir autenticação e autorização para evitar acesso indevido às informações. Preeti também está ciente de que a empresa está se expandindo rapidamente e que é provável que o volume de dados envolvidos no gerenciamento de clientes, nos compromissos, nas peças e na base de dados de conhecimento aumentará exponencialmente no curto prazo. Consequentemente, a solução precisa ser escalonável.

Kiana explica a Preeti que a API Web está atualmente implementada com o Serviço de Aplicativo do Azure. Este serviço oferece suporte a vários provedores de autenticação, que Preeti pode configurar usando o portal do Azure. Preeti está especialmente interessada na ID do Microsoft Entra porque VanArsdel está procurando implementar essa forma de autenticação em muitos de seus outros sistemas corporativos em um futuro próximo.

Configuração de autenticação do serviço de aplicativo.

O Serviço de Aplicativo também oferece escalabilidade horizontal e vertical. Se necessário, Preeti pode escalar verticalmente os recursos disponíveis para a API Web, atualizando o plano do serviço de aplicativo para o aplicativo Web:

Escala vertical do serviço de aplicativo.

Preeti também pode fazer com que o sistema seja escalado verticalmente configurando o dimensionamento automático. O Serviço de Aplicativo permite que um gerente de operações defina regras de dimensionamento automático que determinam as condições sob as quais o sistema deve ser escalado verticalmente em mais instâncias quando a carga aumenta ou novamente quando a demanda diminui. Preeti também pode configurar o dimensionamento automático preventivo para ocorrer de acordo com um agendamento:

Expansão do serviço de aplicativo.

Uma parte importante da função de um gerente de operações de TI é observar como os sistemas podem evoluir e garantir que as estruturas de suporte subjacentes lidem com futuras expansões e mudanças. Preeti sabe que a API Web desenvolvida por Kiana pode ser estendida e reutilizada por outros sistemas da VanArsdel no futuro. Preeti precisa ser capaz de gerenciar e controlar a maneira como os desenvolvedores solicitam o uso da API Web, protegê-la como um recurso valioso e monitorar seu uso. Portanto, Preeti decide proteger a API Web por trás do serviço de gerenciamento de API do Azure.

O gerenciamento de API fornece uma camada extra de segurança para uma API Web, além de permitir o monitoramento detalhado e o controle sobre quais clientes podem acessar quais operações. Usando o Gerenciamento de API, Preeti pode gerenciar a utilização de recursos e restringir o desempenho de clientes de baixa prioridade para garantir que aplicativos críticos de alta prioridade sejam atendidos mais rapidamente.

Para obter informações sobre os serviços que o Gerenciamento de API fornece, acesse Sobre o gerenciamento de API.

Criando um serviço de gerenciamento de API

Preeti criou o serviço de gerenciamento de API por meio do portal do Azure, usando as seguintes etapas:

Entre no Portal do Azure e, na Página Inicial, selecione Criar um recurso.
Na caixa de texto Pesquisar no Marketplace, insira Gerenciamento de API e, em seguida, selecione Inserir.
Na página Gerenciamento de API, selecione Criar.
Na página Criar Gerenciamento de API, insira os seguintes valores e selecione Analisar + criar:
- Assinatura: selecione sua assinatura
- Grupo de recursos: webapi_rg (este é o mesmo grupo de recursos que você criou para o serviço de aplicativo)
- Região: selecione sua região mais próxima
- Nome do recurso: insira um nome exclusivo para o serviço
- Nome da organização: VanArsdel
- Email do administrador: itadmin@vanarsdel.com
- Tipo de preço: Desenvolvedor (sem SLA)
Observação

Não use o tipo de preço Desenvolvedor para um sistema de produção.
Na página de validação, selecione Criar e aguarde enquanto o serviço de gerenciamento de API é criado.

Observação

Pode levar 30 minutos ou mais para o serviço de gerenciamento de API ser provisionado; seja paciente.

Publicação da API Web por meio do gerenciamento de API

Depois que o serviço de gerenciamento de API foi criado, Preeti publicou a API Web para torná-la acessível a outros serviços e aplicativos seguindo as seguintes etapas:

No portal do Azure, vá para o serviço de gerenciamento de API.
Na página Serviço de Gerenciamento de API, no painel esquerdo em APIs, selecione APIs:
No painel Adicionar uma nova API, selecione OpenAPI:
Na caixa de diálogo Criar com base na especificação de OpenAPI, insira os seguintes valores e, em seguida, selecione Criar:
- Especificação de OpenAPI: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, onde <webapp name> é o nome do Serviço de Aplicativo que hospeda sua API Web
- Nome de exibição: API de Engenheiro de Campo
- Nome: field-engineer-api
- Sufixo de URL da API: deixe em branco
- URL base: use a URL padrão
Quando a API de Engenheiro de Campo for criada, selecione a guia Configurações da API, defina a URL do Serviço Web como https://<webapp name>.azurewebsites.net e, em seguida, selecione Salvar:
Na guia Testar, selecione o URI de GET api/Compromissos e selecione Enviar:
Verifique se a solicitação foi bem-sucedida (o código de retorno HTTP é 200 OK) e que retorna um resultado que contém uma lista de compromissos no corpo da resposta:

Conectando-se ao gerenciamento de API a partir do aplicativo

Kiana e Maria agora podem trabalhar juntas para conectar o aplicativo criado usando o Power Apps para a API Web por meio do serviço de gerenciamento de API.

A primeira tarefa é criar um conector personalizado que é usado pelo aplicativo para se comunicar com o Gerenciamento de API. Isso envolve a exportação da API para o ambiente do Power Apps usado para criar o aplicativo, que Kiana faz da seguinte maneira:

No portal do Azure, vá para a página do serviço de gerenciamento de API que Preeti criou.
No painel esquerdo, em APIs, selecione APIs.
Selecione o botão de reticências da API de Engenheiro de Campo e, em seguida, selecione Exportar.
No painel API de Exportação, selecione o Power Apps e o Power Automate:
No painel Exportar API para o PowerApps, selecione o ambiente do Power Apps em que você criou o aplicativo protótipo (Maria na imagem a seguir) e, em seguida, selecione Exportar.
Depois que a API for exportada, selecione a API de Engenheiro de Campo. Na página Definições, role para baixo até a seção Assinaturas, desmarque Assinatura obrigatória e, em seguida, selecione Salvar.

O aplicativo protótipo usou pastas de trabalho do Excel para as fontes de dados. Agora que o conector personalizado para a API Web está disponível, Maria executa as seguintes etapas para adicionar o conector ao aplicativo:

Entre no Power Apps.
No painel esquerdo, expanda Dados e selecione Conectores Personalizados. O conector personalizado field-engineer-api deve ser listado. Selecione Criar conexão.
Na caixa de diálogo field-engineer-api, selecione Criar.
Quando a conexão for criada, verifique se ela aparece na lista de conexões disponíveis.
No painel esquerdo, selecione Aplicativos, selecione VanArsdelApp e, em seguida, selecione Editar.
No painel esquerdo, selecione a guia Dados, selecione Adicionar dados, o botão de reticências dos Conectores e, em seguida, Atualizar.
Na lista de conectores, selecione o conector field-engineer-api.
Na caixa de diálogo field-engineer-api, selecione o conector field-engineer-api.
No painel Dados, verifique se o conector FieldEngineerApi está listado.

Atualizando o aplicativo para usar o conector: gerenciamento de inventário de campo

Agora que a conexão foi adicionada ao aplicativo, Maria pode modificar as telas para usá-la a fim de substituir as pastas de trabalho do Excel. Isso envolve trabalhar em cada tela metodicamente e alterar a fonte de dados. Nenhuma outra mudança deve ser necessária. Maria começa com as telas BrowseParts e PartDetails, da seguinte maneira:

Na tela Página Inicial do aplicativo, selecione o botão Peças. Defina a propriedade de ação OnSelect com a fórmula a seguir.
```
ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());

Navigate(BrowseParts, ScreenTransition.Fade)
```
A função ClearCollect cria uma nova coleção chamada partsCollection e a preenche com os dados resultantes da chamada da operação getboilerparts na conexão FieldEngineerAP.

Observação

É uma boa prática recuperar os dados em uma coleção e fazer referência a essa coleção em quaisquer telas que precisem das informações. Essa abordagem pode evitar que telas diferentes executem repetidamente a mesma consulta e busquem os mesmos dados.
Selecione F5 para visualizar o aplicativo.
Na tela Página Inicial, selecione Peças. Esta ação criará a coleção partsCollection. Feche a janela de visualização e retorne ao Power Apps Studio.

Observação

O objetivo desta etapa é permitir que você veja os dados enquanto edita a tela BrowseParts nas etapas a seguir.
Selecione o controle BrowseGallery1 na tela BrowseParts. Na fórmula da propriedade Itens, substitua a referência à fonte de dados [@Table1] por partsCollection.

Essa alteração resultará em alguns erros. Isso ocorre porque os nomes dos campos na pasta de trabalho original do Excel usavam letras maiúsculas (Nome, CategoryID e Visão Geral), enquanto as propriedades retornadas no corpo da resposta da API Web são nomeadas em letras minúsculas. Altere essas referências para usar letras minúsculas. A fórmula deve ser semelhante à seguinte.
```
SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
```
No painel Exibição de árvore, selecione o controle IconRefresh1. Altere a ação OnSelect da fórmula ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts()).

Observação

A fórmula original desta ação chama a função Atualizar para preencher novamente os dados usando a conexão com a fonte de dados original. Não é possível usar Atualizar com uma conexão que executa uma função para recuperar os dados, por isso não funcionará com FieldEngineerApi.getapiboilerparts(). A solução nesta etapa preenche novamente a coleção partsCollection com os dados mais recentes.
No painel Exibição de árvore, expanda o controle BrowseGallery1 e selecione o controle Body1. Altere a propriedade Texto para ThisItem.overview.
No painel Exibição de árvore, selecione o controle Subtitle1. Altere a propriedade Texto para ThisItem.categoryId.
No painel Exibição de árvore, selecione o controle Título. Altere a propriedade Texto para ThisItem.name.
No painel Exibição de árvore, selecione o controle DetailForm1 na tela PartDetails. Altere a propriedade DataSource de [@Table1] para partsCollection.
No painel Exibição de árvore, selecione o controle Name_DataCard1 em DetailForm1. Altere a propriedade Padrão para ThisItem.name.
Altere a propriedade Padrão do controle CategoryID_DataCard1 para ThisItem.categoryId.
Altere a propriedade Padrão do controle Overview_DataCard1 para ThisItem.overview.
Altere a propriedade Padrão do controle Price_DataCard1 para ThisItem.price.
Altere a propriedade Padrão do controle NumberInStock_DataCard1 para ThisItem.numberInStock.
Altere a propriedade Padrão do controle Image_DataCard1 para ThisItem.imageUrl.
No painel esquerdo da guia Dados, clique com o botão direito na conexão de dados Table1 e, em seguida, selecione Remover para excluí-la do aplicativo. Esta conexão não é mais necessária.
Salve o aplicativo.

Observação

Você pode salvar o aplicativo rapidamente sem usar o menu Arquivo selecionando Ctrl+S.
Selecione F5 para visualizar o aplicativo. As telas Procurar Peças e Detalhes da Peça devem operar exatamente como antes, exceto que desta vez estão recuperando dados do banco de dados InventoryDB SQL do Azure por meio da API Web, em vez de um arquivo local do Excel.
Feche a janela de visualização e retorne ao Power Apps Studio.

Atualizando o aplicativo para usar o conector: agendamento de campo e notas

Maria continua com as telas BrowseAppointments, AppointmentDetails e EditAppointment. Os dados apresentados por essas telas atualmente se originam da tabela Compromissos em outra pasta de trabalho do Excel.

Na tela Página Inicial do aplicativo, defina a ação OnVisible para a fórmula a seguir.
```
ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime))
```
Esta fórmula recupera dados de compromissos na coleção appointmentsCollection. Os compromissos são filtrados para recuperar as visitas agendadas na data atual ou após essa data.
Selecione o controle de rótulo que exibe a hora do próximo compromisso. Defina a propriedade Texto como Text(First(appointmentsCollection).startDateTime, ShortTime24).
Selecione o controle de rótulo que exibe a data do próximo compromisso. Defina a propriedade Text como Text(First(appointmentsCollection).startDateTime, LongDate).
Selecione o controle de rótulo que exibe o nome do cliente para o próximo compromisso. Defina a propriedade Text como First(appointmentsCollection).customer.name.
Selecione F5 para visualizar o aplicativo. Na tela Página Inicial, selecione Compromissos. Esta ação criará a coleção appointmentsCollection. Feche a janela de visualização e retorne ao Power Apps Studio.
No painel Exibição de árvore, selecione o controle BrowseAppointmentsGallery na tela BrowseAppointments. Altere a fórmula na propriedade Itens para a fórmula a seguir.
```
Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
```
Esta fórmula filtra os dados exibidos na tela por nome do cliente, permitindo que o usuário insira o nome de um cliente. Os compromissos são exibidos em ordem de data e hora.
No painel Exibição de árvore, expanda o controle BrowseAppointmentsGallery e selecione o controle Title1_1. Altere a propriedade Texto para a seguinte.
```
Text(ThisItem.startDateTime, LongDate)
```
Esta fórmula exibe a parte da data do campo startDateTime do compromisso.
No painel Exibição de árvore, expanda o controle BrowseAppointmentsGallery e selecione o controle Subtitle1_1. Altere a propriedade Texto para a seguinte.
```
Text(ThisItem.startDateTime, ShortTime24)
```

Esta fórmula exibe o elemento de tempo do campo startDateTime.

No painel Exibição de árvore, expanda o controle BrowseAppointmentsGallery e selecione o controle Body1_1. Altere a propriedade Texto para a seguinte.
```
ThisItem.customer.name
```

No painel Exibição de árvore, selecione o controle IconRefresh1_1 na tela BrowseAppointments. Defina a ação OnSelect com a fórmula a seguir.

ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime));

No painel Exibição de árvore, expanda a tela AppointmentDetails e selecione o controle DetailForm1_1. Defina a propriedade DataSource como appointmentsCollection.
No painel Exibição de árvore, selecione o controle IconEdit1. Modifique a fórmula na propriedade DisplayMode para testar a coleção appoinmentsCollection.
```
If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
```
No painel Exibição de árvore, expanda a tela DetailForm1_1 e selecione o controle Customer Name_DataCard1. Altere a propriedade Padrão para ThisItem.customer.name.
Altere as propriedades Padrão dos cartões de dados restantes da seguinte forma:
- Customer Address_DataCard1: ThisItem.customer.address
- Contact Number_DataCard1: ThisItem.customer.contactNumber
- Problem Details_DataCard1: ThisItem.problemDetails
- Status_DataCard1: ThisItem.appointmentStatus.statusName
- Notes_DataCard1: ThisItem.notes
- Image_DataCard1_1: ThisItem.imageUrl
No painel Exibição de árvore, expanda a tela EditAppointment e selecione o controle EditForm1. Defina a propriedade DataSource como appointmentsCollection.
No painel Exibição de árvore, expanda o controle EditForm1 e selecione o controle Customer Name_DataCard3. Altere a propriedade Padrão para ThisItem.customer.name.
Altere as propriedades Padrão dos cartões de dados restantes da seguinte forma:

Contact Number_DataCard2: ThisItem.customer.contactNumber; além disso, altere a propriedade MaxLength para 20
Problem Details_DataCard2: ThisItem.problemDetails
Status_DataCard5: ThisItem.appointmentStatus.statusName
Notes_DataCard3: ThisItem.notes
Image_DataCard2: ThisItem.imageUrl

No painel Exibição de árvore, expanda o controle Problem Details_Card2. Renomeie o campo DataCardValueX (X será um número) sob este controle para ProblemDetailsValue. Repita este processo para os controles DataCardValueX nos seguintes cartões de dados:
- Status_DataCard5: StatusValue
- Notes_DataCard3: NotesValue
Observação

O controle da imagem será abordado no próximo capítulo.
Selecione ProblemDetailsValue e defina a propriedade MaxLength como 100.
No painel Exibição de árvore, selecione o controle IconAccept1 na tela EditAppointment. Defina a propriedade de ação OnSelect com a fórmula a seguir.
```
FieldEngineerAPI.putapiappointmentsid(BrowseAppointmentsGallery.Selected.id, {problemDetails:ProblemDetailsValue.Text, statusName:StatusValue.Selected.Value, notes:NotesValue.Text, imageUrl:""});

Remove(appointmentsCollection, First(Filter(appointmentsCollection, id=BrowseAppointmentsGallery.Selected.id)));

Set(appointmentRec, FieldEngineerAPI.getapiappointmentsid(BrowseAppointmentsGallery.Selected.id));

Collect(appointmentsCollection, appointmentRec);

Navigate(AppointmentDetails, ScreenTransition.None);
```
Esta fórmula chama a operação PUT para o controlador Compromissos na API Web. Ele passa a ID do compromisso para o compromisso atual como o primeiro parâmetro, seguido pelos detalhes que o usuário pode ter modificado na tela. Os detalhes são transmitidos como um objeto JSON. As instruções Remove, Set e Collect atualizam a coleção appointmentsCollection com os dados salvos no banco de dados.

Observação

Não use a função ClearCollect para excluir e atualizar toda a coleção em situações como esta, porque seria um desperdício se — por exemplo — apenas um registro fosse alterado.
No painel Exibição de árvore, selecione o controle IconAccept1 na tela EditAppointment. Defina a propriedade de ação OnSelect da seguinte forma.
```
ResetForm(EditForm1);

Navigate(AppointmentDetails, ScreenTransition.None);
```
No painel esquerdo da guia Dados, clique com o botão direito na conexão de dados Compromissos e, em seguida, selecione Remover para excluí-la do aplicativo.
Salve o aplicativo.
Selecione F5 para visualizar o aplicativo. Na tela Página Inicial, vá para a tela Compromissos, selecione e edite um compromisso e, em seguida, salve as alterações. Verifique se o compromisso foi atualizado.
Feche a janela de visualização e retorne ao Power Apps Studio.

Criando o serviço de Pesquisa Cognitiva do Azure para a Base de Dados de Conhecimento de Campo

A tela da Base de dados de conhecimento no aplicativo não está conectada a nenhuma fonte de dados atualmente. A API Web inclui operações para consultar e atualizar as tabelas Dicas, BoilerParts e Engenheiros no banco de dados KnowledgeDB. No entanto, o objetivo da tela Consultar no aplicativo é oferecer suporte a pesquisas em todas essas tabelas. O volume de dados nessas tabelas provavelmente aumentará rapidamente, por isso Maria, Kiana e Preeti decidem implantar a Pesquisa Cognitiva do Azure para oferecer suporte a esse recurso. Um aplicativo pode enviar consultas e receber resultados da Pesquisa Cognitiva do Azure por meio de um conector personalizado.

A Pesquisa Cognitiva do Azure funciona melhor se os dados a serem pesquisados estiverem contidos em uma única entidade de banco de dados. Kiana cria uma exibição no banco de dados KnowledgeDB que apresenta uma exibição unificada das tabelas Dicas, BoilerParts e Engenheiros, da seguinte maneira:

No portal do Azure, vá para a página KnowledgeDB SQL Database.
No painel esquerdo, selecione Editor de Consultas e entre no banco de dados como sqladmin, usando a senha Pa55w.rd.

Na janela de consulta, insira a instrução a seguir e selecione Executar.

CREATE OR ALTER VIEW [dbo].[Knowledge] AS
SELECT T.Id, T.Subject, T.Body, B.Name, B.Overview
FROM [dbo].[Tips] T INNER JOIN [dbo].[BoilerParts] B
ON B.Id=T.KnowledgeBaseBoilerPartId

Criar a exibição "Conhecimento"

Verifique se a exibição, Conhecimento, foi criada com sucesso.

No painel esquerdo, selecione Cadeias de conexão. Anote a cadeia de conexão ADO.NET, você precisará dela ao configurar a Pesquisa Cognitiva do Azure.

Trabalhando com Kiana, Preeti configura uma nova instância do serviço de Pesquisa Cognitiva do Azure para realizar pesquisas em linhas na exibição Conhecimento, da seguinte forma:

Na Página Inicial, no portal do Azure, selecione + Criar um recurso, insira Pesquisa Cognitiva do Azure, selecione Inserir e, em seguida, selecione Criar.
Na página Novo Serviço de Pesquisa, insira as seguintes configurações e selecione Analisar + criar:
- Assinatura: selecione sua assinatura do Azure
- Grupo de recursos: webapi_rg
- Nome do serviço: insira um nome exclusivo para o serviço
- Nome do local: selecione sua região mais próxima
- Tipo de preço: Gratuito
Na página de validação, selecione Criar e aguarde enquanto o serviço é provisionado.
Vá para a página do novo serviço de pesquisa, selecione Visão geral, anote o Url (você precisará disso mais tarde, quando criar o conector personalizado para o Power Apps) e, em seguida, selecione Importar dados.
Na página Importar dados, na caixa de lista suspensa Fonte de Dados, selecione Banco de dados SQL do Azure.
Na página Conectar-se a seus dados, especifique as seguintes configurações:
- Fonte de dados: Banco de Dados SQL do Azure
- Nome da fonte de dados: base de dados de conhecimento
- Cadeia de conexão: insira a cadeia de conexão do Banco de Dados SQL do Azure para o banco de dados KnowledgDB que você registrou anteriormente. Nesta cadeia de caracteres, certifique-se de definir a senha como Pa55w.rd
- Deixe os campos ID do usuário e Senha com seus valores padrão; esses itens são recuperados da cadeia de conexão
Selecione Testar conectividade. Certifique-se de que o teste foi bem sucedido, selecione [Conhecimento] na caixa de lista suspensa Tabela/Exibição e, em seguida, selecione Próximo: adicionar habilidades cognitivas (opcional).
Na página Adicionar habilidades cognitivas (opcional), selecione Pular para: personalizar o índice de destino.
Na página Personalizar o índice de destino, selecione Recuperável para todas as colunas e Pesquisável para Assunto, Corpo, Nome e Visão geral. Selecione Próximo: criar um indexador.
Na página Criar um indexador, mude o indexador Nome para knowledgebase-indexer. No Agendamento, selecione Por Hora, defina a Coluna de marca d'água alta como ID e, em seguida, selecione Enviar:
Para testar o indexador, na página Visão geral do serviço de pesquisa, selecione Gerenciador de Pesquisa:
No campo Cadeia de consulta, insira uma palavra a ser pesquisada na base de dados de conhecimento e selecione Pesquisar. O serviço de pesquisa deve gerar uma lista de documentos com uma correspondência nos campos Assunto, Corpo, Nome ou Visão geral e exibi-los no painel Resultados. Anote a URL da solicitação e o exemplo Resultados; você precisará desses itens posteriormente como um exemplo de solicitação e resposta ao configurar o conector personalizado do Power Apps.

Criando o conector personalizado para o serviço de Pesquisa Cognitiva do Azure

Kiana agora pode criar um conector personalizado que o Power Apps usa para enviar solicitações de pesquisa ao serviço de pesquisa. Kiana faz isso usando o Power Apps Studio, da seguinte maneira:

Entre no Power Apps.
No painel esquerdo, expanda Dados e selecione Conectores Personalizados. No painel direito, selecione + Novo conector personalizado e Criar do zero.
Na caixa de diálogo Criar do zero, defina o novo nome do conector como VanArsdelKBConnector e, em seguida, selecione Continuar:
Na página Informações gerais, insira uma descrição e defina o Esquema como HTTPS. Na caixa Hosts, digite a URL do serviço de pesquisa (você anotou esta URL anteriormente), mas sem o prefixo https:// e, em seguida, selecione Segurança.
Na página Segurança, na caixa de lista suspensa Autenticação, selecione Chave de API. No campo Rótulo de parâmetro, insira api-key. No campo Nome do parâmetro, insira api-key. Selecione Definição.
Na página Definição, selecione Nova ação. No campo Resumo, insira Consulta. No campo Descrição, insira Consultar a base de dados de conhecimento. No campo Operation ID, insira Consulta. Em Solicitação, selecione + Importar do exemplo.
Na caixa de diálogo Importar do exemplo, insira os seguintes valores e selecione Importar:
- Verbo: GET
- URL: forneça a URL de solicitação de exemplo que você anotou quando testou o serviço de pesquisa no gerenciador de pesquisa anteriormente
- Cabeçalhos: Content-type
De volta à página Definição, role para baixo até a seção Consulta, selecione o botão de reticências ao lado de pesquisar e, em seguida, selecione Editar.
Na tela de edição, no campo Valor padrão da seção Parâmetros, digite um asterisco (*). Deixe os outros campos com seus valores padrão e selecione Voltar.
Na página Definição, na seção Consulta, selecione o botão de reticências ao lado de api-version e, em seguida, selecione Editar.
Na tela de edição, na seção Parâmetros, no campo Valor padrão, insira 2020-06-30-Preview (esta é a versão associada à versão atual da Pesquisa Cognitiva do Azure; é possível ver a versão na URL de solicitação que você anotou anteriormente). Defina É necessário como Sim e defina Visibilidade como interna. Deixe os outros campos com seus valores padrão e selecione Voltar.
Na página Definição, role para baixo até a seção Resposta e selecione + Adicionar resposta padrão.

]
Na caixa de diálogo Importar do exemplo, no campo Cabeçalhos, insira o texto Content-type. No campo Corpo, insira os resultados de exemplo que você registrou ao testar o serviço de pesquisa e, em seguida, selecione Importar.
Na página Definição, selecione a resposta padrão.
No campo Descrição da resposta Tipo de conteúdo, insira application/json e, em seguida, selecione Voltar.

Observação

A seção Corpo nesta página deve exibir os campos da resposta, como Corpo, ID, Nome, Visão geral e Assunto, se foi analisada com sucesso.
Selecione Criar conector.

O conector deve ser criado sem relatar erros ou avisos.

Atualizando o aplicativo para usar a Pesquisa Cognitiva do Azure: base de dados de conhecimento de campo

Maria agora pode usar o conector personalizado no aplicativo. Mas, primeiro, é necessário ter uma chave que conceda a Maria os privilégios necessários para se conectar ao serviço de Pesquisa Cognitiva do Azure. Preeti obtém a chave na página Chaves do serviço no portal do Azure e a fornece a Maria.

Chave de serviço de pesquisa no portal do Azure.

Maria edita o aplicativo no Power Apps Studio e executa as seguintes tarefas:

Abra o aplicativo VanArsdelApp para edição.
No menu Exibição, selecione Fontes de dados e, em seguida, selecione Adicionar dados.
Na caixa Procurar, em Selecionar uma fonte de dados, insira Van. O conector VanArdelKBConnector deve ser listado.
Selecione o conector VanArdelKBConnector. No painel VanArdelKBConnector, insira a chave que Preeti forneceu para o serviço de pesquisa e, em seguida, selecione Conectar.
No menu Arquivo, salve e feche o aplicativo e, em seguida, abra-o novamente. Você pode ser solicitado a autorizar o uso do conector personalizado quando o aplicativo for reaberto.

Observação

Esta etapa é necessária para habilitar o conector personalizado.
No painel Exibição de árvore, expanda a tela Base de Dados de Conhecimento e selecione o controle TextSearchBox2. Insira a fórmula a seguir para a ação OnChange.
```
If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
```
Esta fórmula chama a operação Consulta do conector personalizado pesquisando itens que correspondam ao termo que o usuário digita na caixa de pesquisa. Os resultados são armazenados em uma coleção chamada azResult.
No painel Exibição de árvore, na tela Base de Dados de Conhecimento, selecione o controle BrowseGallery2. Defina a propriedade Itens como azResult.
Expanda o controle BrowseGallery2 e remova o controle Image4.
Selecione o controle Title2. Defina as seguintes propriedades:
- Texto: ThisItem.Subject
- X: 24
- Largura: Parent.TemplateWidth - 104
Selecione o controle Subtitle2. Defina a propriedade Texto como ThisItem.Body.
Selecione F5 para visualizar o aplicativo. Na tela Base de Dados de Conhecimento, insira um termo de pesquisa e selecione Inserir. Os artigos correspondentes da base de dados de conhecimento devem ser exibidos.

Observação

A tela de detalhes ainda não foi criada, portanto, selecionar o ícone > ao lado de um artigo não funciona.
Feche a janela de visualização e retorne ao Power Apps Studio.
No painel Exibição de árvore, clique com o botão direito na tela PartDetails e selecione Tela duplicada. Esta ação adicionará outra tela ao aplicativo, chamada PartDetails_1.
No painel Exibição de árvore, renomeie a tela PartDetails_1 como KnowledgebaseDetails.

Selecione o controle LblAppNameX na tela; defina a propriedade Texto como "Detalhes do Artigo" (incluindo as aspas).
No painel Exibição de árvore, selecione o controle DetailFormX na tela. Defina as seguintes propriedades:
- DataSource: azResult
- Item: BrowseGallery2.Selected
Observação

BrowseGallery2 é a galeria de navegação na tela Base de Dados de Conhecimento. Em seu aplicativo, esta galeria pode ter um nome diferente.
No painel Exibição de árvore, expanda o formulário DetailFormX e, em seguida, altere os nomes dos seguintes controles do cartão de dados:
- Name_DataCard1_1: Name_DataCard
- CategoryID_DataCard1_1: Subject_DataCard
- Overview_DataCard1_1: Overview_DataCard
- Price_DataCard1_1: Body_DataCard
Exclua os controles NumberInStock_DataCard1_1 e Image_DataCard1_1.
Selecione o controle Name_DataCard. Defina a propriedade Padrão como ThisItem.Name.
Selecione o controle Subject_DataCard. Defina as seguintes propriedades:
- DataField: "Assunto"
- Nome em Exibição: "Assunto"
- Padrão: ThisItem.Subject
Selecione o controle Overview_DataCard. Defina a propriedade Padrão como ThisItem.Overview.
Selecione o controle Body_DataCard. Defina as seguintes propriedades:
- DataField: "Corpo"
- DisplayName: "Corpo"
- Padrão: ThisItem.Body
Selecione o controle DataCardValueX no controle Body_DataCard. Defina a propriedade Texto como Parent.Default.
Redimensione cada um dos controles do cartão de dados para distribuí-los pela tela.
Selecione a seta para voltar no cabeçalho da tela. Altere a propriedade de ação OnSelect para Navigate(Knowledgebase, ScreenTransition.None).
No painel Exibição de árvore, selecione a tela Base de Dados de Conhecimento e, em seguida, selecione o controle BrowseGalleryX. Altere a propriedade de ação OnSelect para Navigate(KnowledgebaseDetails, ScreenTransition.None). Esta ação exibe a tela de detalhes para o artigo da base de dados de conhecimento quando o usuário seleciona o ícone > para uma entrada na tela de navegação.
Salve o aplicativo.
Selecione F5 para visualizar o aplicativo. Na tela Base de Dados de Conhecimento, insira um termo de pesquisa e selecione Inserir. Selecione um artigo e verifique se seus detalhes são exibidos. Verifique se o ícone Voltar retorna o usuário à tela de navegação.
Feche a janela de visualização e retorne ao Power Apps Studio.

Maria, Kiana e Preeti incorporaram com sucesso a API Web e a Pesquisa Cognitiva do Azure ao aplicativo.

Anterior Próximo

Compartilhar via