Stap 1: Overzicht van het toevoegen van zoekopdrachten aan een statische web-app met .NET
In deze zelfstudie wordt een website gebouwd om door een catalogus met boeken te zoeken en vervolgens de website te implementeren in een statische Azure-web-app.
Wat doet het voorbeeld?
Deze voorbeeldwebsite biedt toegang tot een catalogus van 10.000 boeken. U kunt in de catalogus zoeken door tekst in te voeren in de zoekbalk. Terwijl u tekst invoert, gebruikt de website de suggestiefunctie van de zoekindex om de tekst automatisch aan te vullen. Zodra de query is voltooid, wordt de lijst met boeken weergegeven met een gedeelte van de details. U kunt een boek selecteren om alle details, opgeslagen in de zoekindex, van het boek weer te geven.
De zoekervaring omvat:
- Zoeken : biedt zoekfunctionaliteit voor de toepassing.
- Suggesties : geeft suggesties terwijl de gebruiker in de zoekbalk typt.
- Facetten en filters : biedt een facetnavigatiestructuur die filtert op auteur of taal.
- Gepagineerde resultaten - biedt pagineringsbesturingselementen voor het bladeren door resultaten.
- Documentzoekactie : zoekt een document op basis van id op om alle inhoud van het document op te halen voor de detailpagina.
Hoe is het voorbeeld ingedeeld?
De voorbeeldcode bevat de volgende onderdelen:
| App | Doel | GitHub Opslagplaats Locatie |
|---|---|---|
| client | React-app (presentatielaag) om boeken weer te geven, met zoeken. Hiermee wordt de Azure Function-app aangeroepen. | /azure-search-static-web-app/client |
| api | Azure .NET Function-app (bedrijfslaag): roept de Azure AI Search-API aan met behulp van .NET SDK | /azure-search-static-web-app/api |
| bulksgewijs invoegen | .NET-project om de index te maken en er documenten aan toe te voegen. | /azure-search-static-web-app/bulk-insert |
De ontwikkelomgeving instellen
Maak services en installeer de volgende software voor uw lokale ontwikkelomgeving.
- Azure AI Search, elke regio of laag
- .NET 6 of hoger
- Git
- Visual Studio Code
- C# Dev Tools-extensie voor Visual Studio Code
- Azure Static Web App-extensie voor Visual Studio Code
In deze zelfstudie wordt de Azure Function-API niet lokaal uitgevoerd, maar als u deze lokaal wilt uitvoeren, installeert u azure-functions-core-tools.
Fork en kloon het zoekvoorbeeld met Git
Het maken van een forking van de voorbeeldopslagplaats is essentieel om de statische web-app te kunnen implementeren. De web-apps bepalen de buildacties en implementatie-inhoud op basis van uw eigen GitHub-fork-locatie. Code-uitvoering in de statische web-app is extern, met Azure Static Web Apps die lezen uit de code in uw geforkte voorbeeld.
Fork op GitHub de opslagplaats azure-search-static-web-app.
Voltooi het forkproces in uw webbrowser met uw GitHub-account. In deze zelfstudie wordt uw fork gebruikt als onderdeel van de implementatie in een Statische Azure-web-app.
Download in een Bash-terminal uw geforkte voorbeeldtoepassing naar uw lokale computer.
Vervang door
YOUR-GITHUB-ALIASuw GitHub-alias.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.gitGa in dezelfde Bash-terminal naar uw geforkte opslagplaats voor het zoekvoorbeeld van deze website:
cd azure-search-static-web-appGebruik de opdracht
code .Visual Studio Code om uw geforkte opslagplaats te openen. De resterende taken worden uitgevoerd vanuit Visual Studio Code, tenzij opgegeven.code .