Teilen über


Schnellstart: Erstellen einer Demo-App für die Suche im Azure-Portal

In diesem Schnellstart für Azure KI-Suche verwenden Sie den Assistenten zum Erstellen einer Demo-App im Azure-Portal, um eine herunterladbare, localhost-ähnliche Web-App zu generieren, die in einem Browser ausgeführt wird. Die generierte App ist abhängig von ihrer Konfiguration sofort einsatzbereit und verfügt über eine schreibgeschützte Liveverbindung mit einem Index in Ihrem Suchdienst. Eine Standard-App kann eine Suchleiste, einen Ergebnisbereich, Randleistenfilter und Typeahead-Unterstützung beinhalten.

Mit einer Demo-App können Sie visualisieren, wie ein Index in einer Client-App funktioniert, sie ist jedoch nicht für Produktionsszenarien bestimmt. Produktions-Apps sollten Logik für Sicherheit, Fehlerbehandlung und Hosting enthalten, die von der Demo-App nicht bereitgestellt wird.

Voraussetzungen

Bevor Sie beginnen können, müssen die folgenden Voraussetzungen erfüllt werden:

  • Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.

  • Ein Azure KI Search-Dienst. Erstellen Sie einen Dienst, oder suchen Sie in Ihrem aktuellen Abonnement nach einem vorhandenen Dienst. Für diesen Schnellstart können Sie einen kostenlosen Dienst verwenden.

  • Microsoft Edge (neueste Version) oder Google Chrome

  • Ein Suchindex als Grundlage für Ihre generierte Anwendung

    In diesem Schnellstart werden die integrierten Beispieldatasets für Hotels verwendet. Um den in dieser Übung verwendeten Index zu erstellen, führen Sie den Assistenten für den Datenimport aus, wählen als Quelle hotels-sample aus und übernehmen alle Standardwerte.

    Screenshot der Seite „Datenquelle“ für Stichprobendaten

Wenn der Index bereit ist, fahren Sie mit dem nächsten Schritt fort.

Starten des Assistenten

  1. Melden Sie sich mit Ihrem Azure-Konto beim Azure-Portal an, und suchen Sie Ihren Suchdienst.

  2. Unter Suchverwaltung>Indizes

  3. Wählen Sie hotels-sample-index aus.

  4. Wählen Sie oben auf der Indexseite die Option Demo-App erstellen aus, um den Assistenten zu starten.

  5. Wählen Sie auf der ersten Seite des Assistenten CORS aktivieren (Cross-Origin Resource Sharing; Ressourcenfreigabe zwischen verschiedenen Ursprüngen) aus, um Ihrer Indexdefinition CORS-Unterstützung hinzuzufügen. Dieser Schritt ist zwar optional, ohne ihn stellt Ihre lokale Web-App jedoch keine Verbindung mit dem Remoteindex her.

    Screenshot der Aktion „CORS aktivieren“

Konfigurieren von Suchergebnissen

Der Assistent bietet ein einfaches Layout für gerenderte Suchergebnisse mit Platz für ein Miniaturbild, einen Titel und eine Beschreibung. Diesen Elementen liegt jeweils ein Feld in Ihrem Index zugrunde, das die Daten liefert.

  1. Überspringen Sie die Miniaturansicht, da dieser Index keine Bilder enthält. Wenn Sie aber ein Indexfeld haben, das mit URLs aufgefüllt wird, die in öffentlich verfügbare Bilder aufgelöst werden, sollten Sie dieses Feld für den Miniaturansichtsbereich angeben. Sollte Ihr Index keine Bilder-URLs enthalten, lassen Sie dieses Feld leer.

  2. Wählen Sie unter „Titel“ ein Feld aus, das die Eindeutigkeit des jeweiligen Dokuments vermittelt. In diesem Beispiel ist der Hotelname eine gute Wahl.

  3. Wählen Sie unter „Beschreibung“ ein Feld mit Details aus, auf deren Grundlage Personen besser entscheiden können, ob sie einen Drilldown zu diesem speziellen Dokument ausführen möchten. In diesem Beispiel ist die Beschreibung eine gute Wahl.

    Screenshot der Konfigurationsseite für Suchergebnisse

Hinzufügen einer Randleiste

Der Suchdienst unterstützt die Facettennavigation, und diese wird häufig als Randleiste gerendert. Facetten basieren auf filter- und facettierbaren Feldern, die im Indexschema ausgedrückt werden.

Die Facettennavigation in Azure KI Search ist eine kumulative Filterfunktion. Durch Auswählen mehrerer Filter innerhalb einer einzelnen Kategorie – beispielsweise „Seattle“ und „Bellevue“ unter „City“ (Ort) – werden die Ergebnisse ausgeweitet. Wenn Sie mehrere kategorieübergreifende Filter auswählen, werden die Ergebnisse eingegrenzt.

Tipp

Sie können die Feldattribute auf der Registerkarte Felder des Index im Azure-Portal anzeigen. Auf der Randleiste können Felder verwendet werden, die als filterbar und facettierbar gekennzeichnet sind.

  1. Wählen Sie im Assistenten oben auf der Seite die Registerkarte Seitenleiste aus. Es sollte eine Liste aller Felder angezeigt werden, die im Index durch Attribute als filterbar und facettierbar gekennzeichnet sind.

  2. Entfernen Sie einige der Felder, um die Randleiste zu kürzen, damit Sie in der fertigen App nicht scrollen müssen.

Hinzufügen von Vorschlägen

Vorschläge beziehen sich auf automatisierte Abfrageaufforderungen, die an das Suchfeld angefügt sind. Die Demo-App unterstützt Vorschläge, die eine Dropdownliste potenziell übereinstimmender Dokumente basierend auf teilweise eingegebenem Text bereitstellen.

Wählen Sie auf dieser Seite Felder aus, für die vorgeschlagene Abfragen bereitgestellt werden. Sie sollten Felder mit kürzeren Zeichenfolgen auswählen. Vermeiden Sie umfangreiche Felder wie Beschreibungen.

Der folgende Screenshot zeigt die Seite „Vorschläge“ mit einer gerenderten Seite in der App. Sie sehen, wie die Feldauswahl verwendet und wie mithilfe von „Feldname anzeigen“ gesteuert wird, ob die Beschriftung in den Vorschlag einbezogen wird.

Screenshot der Konfigurationsseite für Vorschläge

Erstellen, Herunterladen und Ausführen

  1. Wählen Sie unten auf der Seite Demo-App erstellen aus, um die HTML-Datei zu generieren.

  2. Wählen Sie nach entsprechender Aufforderung die Option Download your app (App herunterladen) aus, um die Datei herunterzuladen.

  3. Öffnen Sie die Datei, und wählen Sie die Schaltfläche Suchen aus. Mit dieser Aktion wird eine Abfrage ausgeführt. Dabei kann es sich um eine leere Abfrage (*) handeln, die ein beliebiges Resultset zurückgibt. Die Seite sollte in etwa dem folgenden Screenshot entsprechen.

  4. Geben Sie einen Begriff ein, und grenzen Sie die Ergebnisse mithilfe von Filtern ein. Wenn keine vorgeschlagenen Abfragen angezeigt werden, überprüfen Sie die Browsereinstellungen, oder versuchen Sie es mit einem anderen Browser.

Screenshot der Suchanwendung in einem Browserfenster

Bereinigen von Ressourcen

Wenn Sie in Ihrem eigenen Abonnement arbeiten, sollten Sie sich am Ende eines Projekts überlegen, ob Sie die erstellten Ressourcen noch benötigen. Ressourcen, die weiterhin ausgeführt werden, können Sie Geld kosten. Sie können einzelne Ressourcen oder die gesamte Ressourcengruppe mit allen darin enthaltenen Ressourcen löschen.

Sie können Ressourcen im Azure-Portal über den Link Alle Ressourcen oder Ressourcengruppen im linken Navigationsbereich suchen und verwalten.

Denken Sie daran, dass ein kostenloser Dienst auf drei Indizes, Indexer und Datenquellen beschränkt ist. Sie können einzelne Elemente über das Azure-Portal löschen, um unter dem Grenzwert zu bleiben.

Nächste Schritte

Die Demo-App ist nützlich für die Prototyperstellung, da Sie eine Endbenutzererfahrung simulieren können, ohne JavaScript- oder Front-End-Code schreiben zu müssen. Wenn Sie sich jedoch dem Proof of Concept für Ihr eigenes Projekt nähern, sehen Sie sich eines der End-to-End-Codebeispiele an, das einer echten App näher kommt: