1 - Overzicht van het toevoegen van zoekopdrachten aan een website
In deze zelfstudie over Azure AI Search maakt u een web-app die door een catalogus met boeken zoekt en vervolgens de website implementeert in een Azure Static Web Apps-resource.
Deze zelfstudie is bedoeld voor JavaScript-ontwikkelaars die een front-endclient-app willen maken met zoekinteracties zoals facetnavigatie, typeahead en paginering. Ook wordt de @azure/search-documents bibliotheek in de Azure SDK voor JavaScript gedemonstreert voor aanroepen naar Azure AI Search voor indexering en querywerkstromen op de back-end.
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.
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 Location |
|---|---|---|
| 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 Function-app (bedrijfslaag): roept de Azure AI Search-API aan met behulp van JavaScript SDK | /search-website-functions-v4/api |
| Bulksgewijs invoeren | JavaScript-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 in uw lokale ontwikkelomgeving.
-
- Selecteer de meest recente runtime en versie in deze lijst met ondersteunde taalversies.
- Als u een andere versie van Node.js op uw lokale computer hebt geïnstalleerd, kunt u overwegen Node Version Manager (
nvm) of een Docker-container te gebruiken.
Visual Studio Code en de volgende extensies
- Azure Static Web App
- Gebruik de geïntegreerde terminal voor opdrachtregelbewerkingen.
Optioneel:
- In deze zelfstudie wordt de Azure Function-API niet lokaal uitgevoerd. Als u deze lokaal wilt uitvoeren, moet u azure-functions-core-tools globaal installeren met de volgende bash-opdracht:
npm install -g azure-functions-core-tools@4
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 statische web-app bepaalt de buildacties en implementatie-inhoud op basis van uw eigen GitHub-forklocatie. Code-uitvoering in de statische web-app is extern, waarbij de statische web-app wordt gelezen uit de code in uw geforkte voorbeeld.
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.
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-javascript-samplesGa in dezelfde bash-terminal naar uw geforkte opslagplaats voor dit zoekvoorbeeld van de website:
cd azure-search-javascript-samplesGebruik 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
Open in Visual Studio Code de activiteitenbalk en selecteer het Azure-pictogram.
Meld u aan bij Azure als u nog niet bent aangemeld.
Selecteer In de sectie Resources de optie Toevoegen (+) en selecteer vervolgens Resourcegroep maken.
Voer de naam van een resourcegroep in, zoals
cognitive-search-demo-rg.Voer een regio in:
- Selecteer voor Node.js de optie
West US 2. 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
- Selecteer voor Node.js de optie
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.