Steg 1 – Översikt över att lägga till sökning i en statisk webbapp med .NET

I den här guiden skapas en webbplats som söker igenom en bokdatabas och därefter distribuerar webbplatsen till en Azure Static Web App.

Vad gör exemplet?

Den här exempelwebbplatsen ger åtkomst till en katalog med 10 000 böcker. Du kan söka i katalogen genom att ange text i sökfältet. När du anger text använder webbplatsen sökindexets förslagsfunktion för att komplettera texten automatiskt. När frågan är klar visar webbplatsen listan över böcker med en del av informationen. Du kan välja en bok för att se all information, lagrad i sökindexet, för boken.

Sökupplevelsen omfattar:

• Sök – tillhandahåller sökfunktioner för programmet.
• Föreslå – innehåller förslag när användaren skriver i sökfältet.
• Fasetter och filter – ger en fasetterad navigeringsstruktur som filtrerar efter författare eller språk.
• Sidnumrerade resultat – ger växlingskontroller för rullning genom resultat.
• Dokumentsökning – söker upp ett dokument efter ID för att hämta allt dess innehåll för informationssidan.

Hur organiseras exemplet?

Exempelkoden innehåller följande komponenter:

Konfigurera utvecklingsmiljön

Skapa tjänster och installera följande programvara för din lokala utvecklingsmiljö.

• Azure AI Search, valfri region eller nivå
• .NET 9 eller den senaste versionen
• Git
• Visual Studio Code
• C# Dev Tools-tillägg för Visual Studio Code
• Azure Static Web App-tillägg för Visual Studio Code

Den här självstudien kör inte Azure Function API lokalt. Om du vill köra den lokalt installerar du azure-functions-core-tools.

Förgrena och klona sökexemplet med git

Om du vill distribuera den statiska webbappen måste du förgrena exempellagringsplatsen. Webbapparna använder din GitHub-förgreningsplats för att bestämma byggåtgärder och distributionsinnehåll. Kodkörning i den statiska webbappen sker via fjärranslutning, där Azure Static Web Apps läser koden från ditt förgrenade exempel.

1. På GitHub förgrenar du lagringsplatsen azure-search-static-web-app.

   Slutför förgreningsprocessen i webbläsaren med ditt GitHub-konto. I den här självstudien används din förgrening som en del av distributionen till en Azure Static Web App.

2. I en Bash-terminal laddar du ned ditt förgrenade exempelprogram till din lokala dator.

   Ersätt YOUR-GITHUB-ALIAS med ditt GitHub-alias.

   git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
   

3. I samma Bash-terminal går du till din förgrenade lagringsplats för det här webbplatssökningsexemplet:

   cd azure-search-static-web-app
   

4. Använd Visual Studio Code-kommandot code . för att öppna din förgrenade lagringsplats. Du utför de återstående uppgifterna från Visual Studio Code, såvida det inte anges.

   code .
   

Nästa steg

• Skapa ett index och läs in det med dokument
• Distribuera din statiska webbapp