1 – Visão geral da adição da pesquisa a um site
Nesse tutorial do Azure AI Search, crie um aplicativo Web que pesquise por um catálogo de livros e, em seguida, implante o site em um recurso dos Aplicativos Web Estáticos do Azure.
Esse tutorial é para desenvolvedores de JavaScript que desejam criar um aplicativo cliente de front-end que inclui interações de pesquisa, como navegação facetada, typeahead e paginação. Ele também demonstra a biblioteca @azure/search-documents
no SDK do Azure para JavaScript para chamadas ao Azure AI Search para indexação e fluxos de trabalho de consulta no back-end.
O que o exemplo faz?
Este site de exemplo fornece acesso a um catálogo de dez mil livros. Um usuário pode pesquisar o catálogo inserindo um texto na barra de pesquisa. Enquanto o usuário digita o texto, o site usa o recurso de sugestão de índice de pesquisa para completá-lo. Depois que a consulta é concluída, a lista de livros é exibida com uma parte dos detalhes. Um usuário pode escolher um livro para ver todos os detalhes do livro, armazenados no índice de pesquisa.
A experiência de pesquisa inclui:
- Pesquisa: fornece a funcionalidade de pesquisa para o aplicativo.
- Sugestão: fornece sugestões enquanto o usuário digita um texto 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 percorrer os resultados.
- Pesquisa de documento: procura um documento pela ID para recuperar todo o conteúdo dele na 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. | /search-website-functions-v4/client |
Servidor | Aplicativo de funções do Azure (camada de negócios): chama a API do Azure AI Search usando o SDK do JavaScript | /search-website-functions-v4/api |
Bulk Insert | Arquivo JavaScript para criar o índice e adicionar documentos a ele. | /search-website-functions-v4/bulk-insert |
Configurar seu ambiente de desenvolvimento
Instale os softwares a seguir no ambiente de desenvolvimento local.
-
- Selecione o runtime e a versão mais recentes nesta lista de versões de linguagem com suporte.
- Se você tiver outra versão do Node.js instalada no computador local, considere a possibilidade de usar o Gerenciador de Versão do Node (
nvm
) ou um contêiner do Docker.
Visual Studio Code e as extensões a seguir
- Aplicativo Web Estático do Azure
- Use o terminal integrado para operações de linha de comando.
Opcional:
- Este tutorial não executa a API do Azure Function localmente. Se você pretende executá-la localmente, instale o azure-functions-core-tools globalmente com o seguinte comando do Bash:
npm install -g azure-functions-core-tools@4
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 estáticos 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 bifurcado.
No GitHub, crie um fork do repositório de exemplos.
Conclua o processo de fork no navegador da Web com a sua conta do GitHub. Este tutorial usa seu fork como parte da implantação em um Aplicativo Web Estático do Azure.
Em um terminal 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-javascript-samples
No mesmo terminal bash, acesse seu repositório bifurcado para este exemplo de pesquisa de site:
cd azure-search-javascript-samples
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 .
Criar um grupo de recursos para seus recursos do Azure
No Visual Studio Code, abra a Barra de atividades e selecione o ícone do Azure.
Entre no Azure, se ainda não estiver conectado.
Na seção Recursos, selecione Adicionar (+) e selecione Criar Grupo de Recursos.
Insira um nome de grupo de recursos, como
cognitive-search-demo-rg
.Insira uma região:
- Para Node.js, selecione
West US 2
. Essa é a região recomendada para a versão preliminar do modelo de programação (PM) do Azure Function v4. - Para C# e Python, recomendamos as seguintes regiões, compatíveis com Aplicativos Web Estáticos do Azure a partir dessa escrita:
West US 2
,East US 2
,West Europe
,Central US
,East Asia
- Para Node.js, selecione
Use esse grupo de recursos para todos os recursos criados durante este tutorial. Um grupo de recursos fornece uma unidade lógica para gerenciar os recursos, incluindo a exclusão deles quando você terminar de usá-los.