1 – Översikt över att lägga till sökning på en webbplats

Den här självstudien skapar en webbplats för att söka igenom en katalog med böcker och distribuerar sedan webbplatsen till en statisk Azure-webbapp.

Programmet är tillgängligt:

• Exempel
• Demowebbplats – aka.ms/azs-good-books

Vad gör exemplet?

Den här exempelwebbplatsen ger åtkomst till en katalog med 10 000 böcker. En användare kan söka i katalogen genom att ange text i sökfältet. När användaren anger text använder webbplatsen funktionen Förslag på sökindex för att slutföra texten. När frågan är klar visas listan med böcker med en del av informationen. En användare kan välja en bok för att se all information som lagras i sökindexet för boken.

Sökupplevelsen omfattar:

• Search – tillhandahåller sökfunktioner för programmet.
• Föreslå – ger förslag när användaren skriver i sökfältet.
• Dokumentuppslag – söker efter ett dokument efter ID för att hämta allt dess innehåll för informationssidan.

Hur organiseras exemplet?

Exemplet innehåller följande:

Ställt in din utvecklingsmiljö

Installera följande för din lokala utvecklingsmiljö.

• Node.js 12 eller 14

  • Om du har en annan version av Node.js på din lokala dator bör du överväga att använda Node Version Manager (nvm) eller en Docker-container.

• Git

• Visual Studio Code och följande tillägg

  • Azure-resurser
  • Azure Cognitive Search 0.2.0+
  • Azure Static Web App

• Valfritt:

  • Den här självstudien kör inte Azure Functions-API:et lokalt, men om du tänker köra det lokalt måste du installera azure-functions-core-tools globalt med följande bash-kommando:

  npm install -g azure-functions-core-tools
  

Föra och klona sökexempel med git

Att förföra exempeldatabasen är viktigt för att kunna distribuera den statiska webbappen. Webbapparna avgör byggåtgärderna och distributionsinnehållet baserat på din egen GitHub-förkplats. Kodkörningen i den statiska webbappen är fjärransluten, Azure Static Web Apps kan läsa från koden i det förförda exemplet.

1. På GitHub förför du exempeldatabasen.

   Slutför förloppsprocessen i webbläsaren med ditt GitHub-konto. I den här självstudien används din föring som en del av distributionen till en statisk Azure-webbapp.

2. Ladda ned exempelprogrammet till din lokala dator i en bash-terminal.

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

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

3. I Visual Studio Code öppnar du den lokala mappen för den klonade lagringsplatsen. De återstående uppgifterna utförs från Visual Studio Code, om inget annat anges.

Skapa en resursgrupp för dina Azure-resurser

1. I Visual Studio Code öppnar du Aktivitetsfältetoch väljer Azure-ikonen.

2. I sidofältet högerklickar du på din Azure-prenumeration under Resource Groups området och väljer Skapa resursgrupp.

   

3. Ange ett resursgruppsnamn, till exempel cognitive-search-website-tutorial .

4. Välj en plats nära dig.

5. När du skapar resurserna Cognitive Search Static Web App senare i självstudien använder du den här resursgruppen.

   När du skapar en resursgrupp får du en logisk enhet för att hantera resurserna, inklusive att ta bort dem när du är klar med dem.

Nästa steg

• Skapa ett sökindex och läsa in med dokument
• Distribuera din statiska webbapp