Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Este tutorial constrói um site que pesquisa um catálogo de livros e depois implementa o site numa Azure Static Web App.
O que faz a amostra?
Este site de exemplo fornece acesso a um catálogo de 10.000 livros. Você pode pesquisar o catálogo inserindo texto na barra de pesquisa. Enquanto você insere texto, o site usa o recurso de sugestão do índice de pesquisa para preencher automaticamente o texto. Quando a consulta termina, o site mostra a lista de livros com uma parte dos detalhes. Você pode selecionar um livro para ver todos os detalhes, armazenados no índice de pesquisa, do livro.
A experiência de pesquisa inclui:
- Pesquisa – fornece funcionalidade de pesquisa para o aplicativo.
- Sugerir – fornece sugestões à medida que o utilizador escreve 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 está organizada a amostra?
O código de exemplo inclui os seguintes componentes:
| Aplicação | Propósito | GitHub Repositório Localização |
|---|---|---|
| cliente | Aplicativo React (camada de apresentação) para exibir livros, com pesquisa. Ele chama o aplicativo Azure Function. | /azure-search-static-web-app/client |
| api | Aplicativo Azure .NET Function (camada de negócios) - chama a API de Pesquisa do Azure AI usando o SDK do .NET | /azure-search-static-web-app/api |
| inserção a granel | Projeto .NET para criar o índice e adicionar documentos a ele. | /azure-search-static-web-app/bulk-insert |
Configurar o ambiente de desenvolvimento
Crie serviços e instale o seguinte software para o seu ambiente de desenvolvimento local.
- Azure AI Search, qualquer região ou camada
- .NET 9 ou versão mais recente
- Git
- Código do Visual Studio
- Extensão C# Dev Tools para Visual Studio Code
- Extensão do Aplicativo Web Estático do Azure para Visual Studio Code
Este tutorial não executa a API de Funções do Azure localmente. Se quiser executar localmente, instale azure-functions-core-tools.
Fork e clone o exemplo de pesquisa com git
Para implementar a Static Web App, precisas de fazer um fork do repositório de exemplos. As aplicações web usam a localização do fork do GitHub para decidir as ações de build e o conteúdo de implementação. A execução de código na Static Web App ocorre remotamente, com o Azure Static Web Apps a ler o código do seu exemplo forkado.
No GitHub, faça um fork do repositório azure-search-static-web-app.
Conclua o processo de fork no seu navegador da Web com a sua conta do GitHub. Este tutorial utiliza o seu fork como parte da implementação em uma Aplicação Web Estática do Azure.
Em um terminal Bash, baixe seu aplicativo de amostra bifurcado para seu computador local.
Substitua
YOUR-GITHUB-ALIASpelo seu alias do GitHub.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.gitNo mesmo terminal Bash, vá para o seu repositório bifurcado para este exemplo de pesquisa no site:
cd azure-search-static-web-appUse o comando do Visual Studio Code
code .para abrir o seu repositório bifurcado. Realiza as restantes tarefas a partir de Visual Studio Code, a menos que seja especificado de outra forma.code .