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

  • Artikel
  • 2 minuten om te lezen

In deze zelfstudie bouwt u een website om te zoeken in een catalogus met boeken en implementeert u de website vervolgens in een Azure Static Web App.

De toepassing is beschikbaar:

Wat doet het voorbeeld?

Deze voorbeeldwebsite biedt toegang tot een catalogus van 10.000 boeken. Een gebruiker kan in de catalogus zoeken door tekst in de zoekbalk in te invoeren. Terwijl de gebruiker tekst invoert, gebruikt de website de functie Voor suggesties van de zoekindex om de tekst te voltooien. Zodra de query is uitgevoerd, wordt de lijst met boeken weergegeven met een deel van de details. Een gebruiker kan een boek selecteren om alle details van het boek weer te geven die zijn opgeslagen in de zoekindex.

Deze voorbeeldwebsite biedt toegang tot een catalogus van 10.000 boeken. Een gebruiker kan in de catalogus zoeken door tekst in de zoekbalk in te invoeren. Terwijl de gebruiker tekst invoert, gebruikt de website de functie Voor suggesties van de zoekindex om de tekst te voltooien. Zodra de zoekopdracht is voltooien, wordt de lijst met boeken weergegeven met een deel van de details. Een gebruiker kan een boek selecteren om alle details van het boek weer te geven die zijn opgeslagen in de zoekindex.

De zoekervaring omvat:

  • Zoeken: biedt zoekfunctionaliteit voor de toepassing.
  • Voorstellen: geeft suggesties terwijl de gebruiker in de zoekbalk typt.
  • Document opzoekactie: zoekt een document op id om alle inhoud voor de detailpagina op te halen.

Hoe wordt het voorbeeld georganiseerd?

Het voorbeeld bevat het volgende:

App Doel GitHub
Opslagplaats
Locatie
Client React-app (presentatielaag) om boeken weer te geven, met zoeken. De Azure-functie-app wordt aanroepen. /search-website/src
Server Azure .NET Function-app (bedrijfslaag) - roept de Azure Cognitive Search API aan met behulp van .NET SDK /search-website/api
Bulksgewijs invoeren .NET-bestand om de index te maken en er documenten aan toe te voegen. /search-website/bulk-insert

De ontwikkelomgeving instellen

Installeer het volgende voor uw lokale ontwikkelomgeving.

Het zoekvoorbeeld vorken en klonen met git

Het forken 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-forklocatie. Het uitvoeren van code in de statische web-app is extern, met Azure Static Web Apps uit de code in uw gevorkte 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 naar een Azure Static Web App.

  2. Download in een bash-terminal de voorbeeldtoepassing naar uw lokale computer.

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

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

  3. Open in Visual Studio Code de lokale map van de gekloonde opslagplaats. De resterende taken worden uitgevoerd vanuit Visual Studio Code, tenzij opgegeven.

Een resourcegroep maken voor uw Azure-resources

  1. Open Visual Studio Code de balk Activiteiten selecteer het pictogram Azure.

  2. Klik in de zijbalk met de rechtermuisknop op uw Azure-abonnement onder het gebied en selecteer Resource Groups Resourcegroep maken.

    Klik in de zijbalk **met de rechtermuisknop op uw Azure-abonnement** onder het gebied Resourcegroepen en selecteer **Resourcegroep maken**.

  3. Voer een resourcegroepnaam in, zoals cognitive-search-website-tutorial .

  4. Selecteer een locatie bij u in de buurt.

  5. Wanneer u de resources Cognitive Search statische web-app maakt, gebruikt u deze resourcegroep verder in de zelfstudie.

    Als u een resourcegroep maakt, krijgt u een logische eenheid voor het beheren van de resources, inclusief het verwijderen ervan wanneer u klaar bent met het gebruik ervan.

Volgende stappen