Quickstart: Criar uma app de demonstração no portal (Azure Cognitive Search)

Neste quickstart, você usará o assistente de demo da portal do Azure's Create para gerar uma aplicação web de estilo "localhost" que funciona num navegador. Dependendo da sua configuração, a aplicação gerada está operacional na primeira utilização, com uma ligação apenas de leitura ao vivo a um índice no seu serviço de pesquisa. Uma aplicação predefinitiva pode incluir uma barra de pesquisa, área de resultados, filtros de barra lateral e suporte de tipa.

Uma aplicação de demonstração pode ajudá-lo a visualizar como um índice irá funcionar numa aplicação de clientes, mas não se destina a cenários de produção. As aplicações de produção devem incluir segurança, manipulação de erros e lógica de hospedagem que a app de demonstração não fornece.

Pré-requisitos

Antes de começar, tenha os seguintes pré-requisitos no lugar:

  • Uma conta do Azure com uma subscrição ativa. Crie uma conta gratuita.

  • Um serviço Azure Cognitive Search. Crie um serviço ou encontre um serviço existente sob a sua subscrição atual. Pode utilizar um serviço gratuito para este arranque rápido.

  • Microsoft Edge (versão mais recente) ou Google Chrome.

  • Um índice de pesquisa para usar como base da sua aplicação gerada.

    Este quickstart utiliza os dados e índices de amostras de imóveis incorporados porque tem imagens de miniatura (o assistente suporta adicionar imagens à página de resultados). Para criar o índice utilizado neste exercício, executar o assistente de dados de importação , escolhendo a fonte de dados de amostra de estado-estado ..

    página de origem de dados para dados de amostra

Quando o índice estiver pronto a ser utilizado, passe para o passo seguinte.

Inicie o assistente

  1. Inicie sessão no portal do Azure com a sua conta do Azure.

  2. Encontre o seu serviço de pesquisa e na página 'Vista Geral', a partir dos links no meio da página, selecione Índices.

  3. Escolha o índice de amostra de estado-americano da lista de índices existentes.

  4. Na página de índice, no topo, selecione Criar app de demonstração (pré-visualização) para iniciar o assistente.

  5. Na primeira página de assistente, selecione Ativar a partilha de recursos de origem cruzada (CORS) para adicionar suporte CORS à definição de índice. Este passo é opcional, mas a sua aplicação web local não se liga ao índice remoto sem ele.

Configure os resultados da pesquisa

O assistente fornece um layout básico para resultados de pesquisa renderizados que inclui espaço para uma imagem de miniatura, um título e descrição. Apoiar cada um destes elementos é um campo no seu índice que fornece os dados.

  1. Em Miniatura, escolha o campo de miniaturas no índice de amostra realestate-us . Esta amostra inclui miniaturas de imagem sob a forma de imagens endereçadas por URL armazenadas num campo chamado miniatura. Se o seu índice não tiver imagens, deixe este campo em branco.

  2. Em Título, escolha um campo que transmita a singularidade de cada documento. Nesta amostra, o ID de listagem é uma seleção razoável.

  3. Em Descrição, escolha um campo que forneça detalhes que possam ajudar alguém a decidir se deve clicar nesse documento em particular.

    configure os resultados para os dados da amostra

Adicione uma barra lateral

O serviço de pesquisa suporta a navegação virada para o lado, que é muitas vezes renderizada como uma barra lateral. As facetas baseiam-se em campos filtrados e facetable, conforme expresso no esquema de índice.

Em Azure Cognitive Search, a navegação facetada é uma experiência de filtragem cumulativa. Dentro de uma categoria, selecionar vários filtros expande os resultados (por exemplo, selecionando Seattle e Bellevue dentro do City). Em categorias, selecionar vários filtros reduz os resultados.

Dica

Pode ver o esquema de índice completo no portal. Procure o link de definição de índice (JSON) na página geral de cada índice. Os campos que se qualificam para a navegação facetada têm atributos "filtrados: verdadeiros" e "facetable: verdadeiros".

  1. No assistente, selecione o separador Sidebar no topo da página. Você verá uma lista de todos os campos que são atribuídos como filtrados e facetable no índice.

  2. Aceite a atual seleção de campos facetados e continue para a página seguinte.

Adicionar cabeça de tipo

A funcionalidade Typeahead está disponível sob a forma de sugestões de consulta automática e consulta. O assistente suporta sugestões de consulta. Com base nas entradas de teclas fornecidas pelo utilizador, o serviço de pesquisa devolve uma lista de cadeias de consulta "completas" que podem ser selecionadas como entrada.

As sugestões são ativadas em definições de campo específicas. O assistente dá-lhe opções para configurar a quantidade de informação incluída numa sugestão.

A imagem que se segue mostra opções no assistente, justtaposas com uma página renderizada na aplicação. Pode ver como as seleções de campo são usadas e como "Show Field Name" é usado para incluir ou excluir a rotulagem dentro da sugestão.

Configuração da sugestão de consulta

Adicionar sugestões

As sugestões referem-se a pedidos de consulta automatizados que estão anexados à caixa de pesquisa. A Pesquisa Cognitiva suporta dois: auto-preconção de um termo de pesquisa parcialmente introduzido, e sugestões para uma lista de desistências de potenciais documentos correspondentes baseados.

O assistente suporta sugestões, e os campos que podem fornecer resultados sugeridos são derivados de uma Suggesters construção no índice:

  "suggesters": [
    {
      "name": "sg",
      "searchMode": "analyzingInfixMatching",
      "sourceFields": [
        "number",
        "street",
        "city",
        "region",
        "postCode",
        "tags"
      ]
  1. No assistente, selecione o separador Sugestões no topo da página. Você verá uma lista de todos os campos que são designados no esquema de índice como fornecedores de sugestões.

  2. Aceite a seleção atual e continue para a página seguinte.

Criar, transferir e executar

  1. Selecione Criar a aplicação de demonstração na parte inferior da página para gerar o ficheiro HTML.

  2. Quando solicitado, selecione Descarregue a sua aplicação para descarregar o ficheiro.

  3. Abra o ficheiro e clique no botão Procurar. Esta ação executa uma consulta, que pode ser uma consulta vazia (*) que devolve um conjunto de resultados arbitrário. A página deve ser semelhante à seguinte imagem. Introduza um termo e utilize filtros para reduzir os resultados.

O índice subjacente é composto por dados fictícios gerados que foram duplicados entre documentos, e as descrições às vezes não correspondem à imagem. Pode esperar uma experiência mais coesa quando criar uma app baseada nos seus próprios índices.

Executar a aplicação

Limpar os recursos

Ao trabalhar na sua própria subscrição, recomendamos que verifique, depois de concluir um projeto, se irá precisar dos recursos que criou. Os recursos que deixar em execução podem custar-lhe dinheiro. Pode eliminar recursos individualmente ou eliminar o grupo de recursos para eliminar todo o conjunto de recursos.

Pode encontrar e gerir recursos no portal, utilizando a ligação de todos os recursos ou grupos de recursos no painel de navegação à esquerda.

Se estiver a utilizar um serviço gratuito, lembre-se que está limitado a três índices, indexadores e fontes de dados. Pode eliminar itens individuais no portal para ficar abaixo do limite.

Passos seguintes

A aplicação de demonstração é útil para prototipagem porque pode simular uma experiência de utilizador final sem ter de escrever JavaScript ou código frontal, mas à medida que se aproxima da prova de conceito no seu próprio projeto, reveja uma das amostras de código de ponta a ponta que está mais próxima de uma aplicação de palavras reais: