Stap 1: Overzicht van het toevoegen van zoekopdrachten aan een website met .NET

  • Artikel

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. Een gebruiker kan de catalogus doorzoeken door tekst in te voeren in de zoekbalk. Terwijl de gebruiker tekst invoert, gebruikt de website de functie suggesties van de zoekindex om de tekst te voltooien. Zodra de query is voltooid, wordt de lijst met boeken weergegeven met een gedeelte van de details. Een gebruiker kan een boek selecteren om alle details te zien, opgeslagen in de zoekindex, van het boek.

Schermopname van de voorbeeld-app in een browservenster.

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 mappen:

App Doel GitHub
Opslagplaats
Locatie
Klant React-app (presentatielaag) om boeken weer te geven, met zoeken. Hiermee wordt de Azure Function-app aangeroepen. /search-website-functions-v4/client
Server Azure .NET Function-app (bedrijfslaag): roept de Azure AI Search-API aan met behulp van .NET SDK /search-website-functions-v4/api
Bulksgewijs invoeren .NET-bestand om de index te maken en er documenten aan toe te voegen. /search-website-functions-v4/bulk-insert

De ontwikkelomgeving instellen

Installeer de volgende software voor uw lokale ontwikkelomgeving.

  • .NET 6 of hoger
  • Git
  • Visual Studio Code en de volgende extensies
  • Optionele:
    • In deze zelfstudie wordt de Azure Function-API niet lokaal uitgevoerd, maar als u deze lokaal wilt uitvoeren, moet u azure-functions-core-tools installeren.

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.

  1. Fork op GitHub de voorbeeldopslagplaats.

    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.

  2. Download in een Bash-terminal uw geforkte voorbeeldtoepassing naar uw lokale computer.

    Vervang door YOUR-GITHUB-ALIAS uw GitHub-alias.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-dotnet-samples

  3. Ga in dezelfde Bash-terminal naar uw geforkte opslagplaats voor het zoekvoorbeeld van deze website:

    cd azure-search-dotnet-samples

  4. Gebruik de opdracht code . Visual Studio Code om uw geforkte opslagplaats te openen. De resterende taken worden uitgevoerd vanuit Visual Studio Code, tenzij opgegeven.

    code .

Een resourcegroep maken voor uw Azure-resources

  1. Open in Visual Studio Code de activiteitenbalk en selecteer het Azure-pictogram.

  2. Meld u aan bij Azure als u nog niet bent aangemeld.

  3. Selecteer In de sectie Resources de optie Toevoegen (+) en selecteer vervolgens Resourcegroep maken.

    Schermopname van Visual Studio Code, in Azure Explorer, met de optie **Resourcegroep maken**.

  4. Voer de naam van een resourcegroep in, zoals cognitive-search-demo-rg.

  5. Voer een regio in:

    • Selecteer West US 2voor Node.js . Dit is de aanbevolen regio voor de preview van het Azure Function-programmeermodel (PM) v4.
    • Voor C# en Python raden we de volgende regio's aan die vanaf dit schrijven door Azure Static Web Apps worden ondersteund: West US 2, East US 2, West Europe, , Central US, East Asia

Gebruik deze resourcegroep voor alle resources die tijdens deze zelfstudie zijn gemaakt. Een resourcegroep biedt u een logische eenheid voor het beheren van de resources, inclusief het verwijderen ervan wanneer u klaar bent.

Volgende stappen