1: Übersicht über das Hinzufügen von Suchfunktionen zu einer Website
In diesem Azure KI Search-Tutorial erstellen Sie eine Web-App, die einen Katalog von Büchern durchsucht, und stellen dann die Website in einer Azure Static Web Apps-Ressource bereit.
Dieses Tutorial richtet sich an JavaScript-Entwickler*innen, die eine Front-End-Client-App erstellen möchten, die Suchinteraktionen wie Facettennavigation, Eingabevorschläge (Typeahead) und Paginierung enthält. Außerdem wird die @azure/search-documents-Bibliothek im Azure SDK für JavaScript für Aufrufe von Azure KI Search für Indizierungs- und Abfrageworkflows im Back-End vorgestellt.
Wozu dient das Beispiel?
Diese Beispielwebsite bietet Zugriff auf einen Katalog mit 10.000 Büchern. Ein Benutzer kann den Katalog durchsuchen, indem er Text in die Suchleiste eingibt. Während der Texteingabe durch den Benutzer verwendet die Website das Vorschlagfeature des Suchindexes, um den Text zu vervollständigen. Sobald die Abfrage abgeschlossen ist, wird die Liste der Bücher mit einem Teil der Details angezeigt. Ein Benutzer kann ein Buch auswählen, um alle im Suchindex gespeicherten Details des Buchs anzuzeigen.
Die Suchfunktion umfasst Folgendes:
- Suche: Stellt Suchfunktionen für die Anwendung bereit.
- Vorschlag: Gibt während der Benutzereingabe über die Suchleiste Vorschläge an.
- Facetten und Filter: Stellt eine Facettennavigationsstruktur bereit, die nach Ersteller*in oder Sprache gefiltert wird.
- Paginierte Ergebnisse: Stellt Paginierungssteuerelemente zum Scrollen durch Ergebnisse bereit.
- Dokumentsuche: Sucht ein Dokument anhand der ID, um den gesamten Inhalt für die Detailseite abzurufen.
Wie ist das Beispiel organisiert?
Der Beispielcode enthält die folgenden Komponenten:
| App | Zweck | GitHub Repository Standort |
|---|---|---|
| Client | React-App (Darstellungsebene) zum Anzeigen von Büchern mit der Suche. Sie ruft die Azure-Funktions-App auf. | /search-website-functions-v4/client |
| Server | Azure-Funktions-App (Geschäftsebene): Ruft die Azure KI Search-API mithilfe des JavaScript SDK auf. | /search-website-functions-v4/api |
| Masseneinfügung | JavaScript-Datei zum Erstellen des Indexes und zum Hinzufügen von Dokumenten zu diesem Index | /search-website-functions-v4/bulk-insert |
Einrichten der Entwicklungsumgebung
Installieren Sie die folgende Software in Ihrer lokalen Entwicklungsumgebung:
-
- Wählen Sie die neueste Runtime und Version aus dieser Liste der unterstützten Sprachversionen aus.
- Wenn eine andere Version von Node.js auf dem lokalen Computer installiert ist, sollten Sie die Verwendung des Node-Versions-Managers (
nvm) oder eines Docker-Containers in Erwägung ziehen.
Visual Studio Code und die folgenden Erweiterungen:
- Statische Azure-Web-App
- Verwenden Sie das integrierte Terminal für Befehlszeilenvorgänge.
Optional:
- In diesem Tutorial wird die Azure-Funktions-API nicht lokal ausgeführt. Wenn Sie sie jedoch lokal ausführen möchten, müssen Sie azure-functions-core-tools mit dem folgenden Bash-Befehl global installieren:
npm install -g azure-functions-core-tools@4
Forken und Klonen des Suchbeispiels mit Git
Das Forken des Beispielrepositorys ist wichtig, um die statische Web-App bereitstellen zu können. Die statische Web-Apps bestimmen die Buildaktionen und Bereitstellungsinhalte basierend auf Ihrem eigenen GitHub-Fork-Speicherort. Die Codeausführung in der statischen Web-App erfolgt remote. Dabei liest die statische Web-App aus dem Code in Ihrem geforkten Beispiel.
Forken Sie das Beispielrepository auf GitHub.
Schließen Sie den Fork-Prozess in Ihrem Webbrowser mit Ihrem GitHub-Konto ab. In diesem Tutorial wird der Fork als Teil der Bereitstellung in einer statischen Azure-Web-App verwendet.
Laden Sie in einem Bash-Terminal Ihre verzweigte Beispielanwendung auf Ihren lokalen Computer herunter.
Ersetzen Sie
YOUR-GITHUB-ALIASdurch Ihren GitHub-Alias.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesWechseln Sie im gleichen Bash-Terminal in Ihr verzweigtes Repository für dieses Beispiel zur Websitesuche:
cd azure-search-javascript-samplesVerwenden Sie den Visual Studio Code-Befehl
code ., um Ihr verzweigtes Repository zu öffnen. Die übrigen Aufgaben werden über Visual Studio Code ausgeführt, sofern nicht anders angegeben.code .
Erstellen einer Ressourcengruppe für Ihre Azure-Ressourcen
Öffnen Sie in Visual Studio Code die Aktivitätsleiste, und wählen Sie das Azure-Symbol aus.
Melden Sie sich bei Azure an, falls Sie noch nicht angemeldet sind.
Wählen Sie im Abschnitt Ressourcen die Option „Hinzufügen“ (+) und dann Ressourcengruppe erstellen aus.
Geben Sie einen Ressourcengruppennamen ein, etwa
cognitive-search-demo-rg.Geben Sie eine Region ein:
- Wählen Sie für Node.js
West US 2aus. Dies ist die empfohlene Region für die Vorschauversion von Azure Function Programming Model (PM) v4. - Für C# und Python empfehlen wir die folgenden Regionen, die zum Zeitpunkt dieser Veröffentlichung von Azure Static Web Apps unterstützt werden:
West US 2,East US 2,West Europe,Central US,East Asia
- Wählen Sie für Node.js
Verwenden Sie diese Ressourcengruppe für alle in diesem Tutorial erstellten Ressourcen. Durch eine Ressourcengruppe erhalten Sie eine logische Einheit zum Verwalten der Ressourcen. Sie können sie auch löschen, wenn Sie fertig sind.