Compartilhar via


Etapa 1 – Visão geral da adição de pesquisa a um aplicativo Web estático com .NET

Este tutorial cria um site de pesquisa em um catálogo de livros e, em seguida, o implanta em um aplicativo Web estático do Azure.

O que o exemplo faz?

Este site de exemplo fornece acesso a um catálogo de dez mil livros. Você pode pesquisar o catálogo digitando texto na barra de pesquisa. Enquanto você insere texto, o site usa o recurso de sugestão do índice de pesquisa para preenchimento automático do texto. Depois que a consulta é concluída, a lista de livros é exibida com uma parte dos detalhes. Você pode selecionar um livro para ver todos os detalhes armazenados no índice de pesquisa do livro.

Captura de tela do aplicativo de exemplo em execução no Azure.

A experiência de pesquisa inclui:

  • Pesquisa – fornece funcionalidade de pesquisa para o aplicativo.
  • Sugerir – fornece sugestões enquanto o usuário digita na barra de pesquisa.
  • Facetas e filtros - fornece uma estrutura de navegação facetada que filtra por autor ou idioma.
  • Resultados paginados - fornece controles de paginação para rolar pelos resultados.
  • Pesquisa de documentos – procura um documento por ID para recuperar todo o seu conteúdo para a página de detalhes.

Como o exemplo é organizado?

O código de exemplo inclui os seguintes componentes:

Apl Finalidade GitHub
Repositório
Location
cliente Aplicativo React (camada de apresentação) para exibir livros, com a pesquisa. Ele chama o aplicativo de funções do Azure. /azure-search-static-web-app/client
api Aplicativo de funções do Azure para .NET (camada de negócios): chama a API do Azure AI Search usando o SDK do .NET /azure-search-static-web-app/api
inserção em massa Projeto .NET para criar o índice e adicionar documentos a ele. /azure-search-static-web-app/bulk-insert

Configurar seu ambiente de desenvolvimento

Crie serviços e instale o software a seguir para seu ambiente de desenvolvimento local.

Este tutorial não executa a API do Azure Functions localmente, mas se você pretende executá-lo localmente, instale ferramentas básicas de funções do Azure.

Criar um fork e clonar o exemplo de pesquisa com o Git

A criação de um fork do repositório de exemplos é crítica para a implantação do Aplicativo Web Estático. Os aplicativos Web determinam as ações de build e o conteúdo de implantação com base na localização do seu fork do GitHub. A execução de código no Aplicativo Web Estático é remota, com os Aplicativos Web Estáticos do Azure fazendo a leitura do código no seu exemplo com fork.

  1. No GitHub, bifurque o repositório azure-search-static-web-app.

    Conclua o processo de fork em seu navegador com sua conta GitHub. Este tutorial usa seu fork como parte da implantação em um Aplicativo Web Estático do Azure.

  2. Em um terminal do Bash, baixe o aplicativo de exemplo bifurcado no computador local.

    Substitua YOUR-GITHUB-ALIAS pelo seu alias do GitHub.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
    
  3. No mesmo terminal bash, acesse seu repositório bifurcado para este exemplo de pesquisa de site:

    cd azure-search-static-web-app
    
  4. Use o comando code . do Visual Studio Code para abrir o repositório bifurcado. As tarefas restantes são executadas no Visual Studio Code, a menos que especificado.

    code .
    

Próximas etapas