Schnellstart: Erstellen einer Demo-App im Azure-Portal

Artikel
01/17/2024

In diesem Azure KI Search-Schnellstart 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 dieser Schnellstartanleitung werden die integrierten Immobilienbeispieldaten und der zugehörige Index verwendet, da sie Miniaturbilder enthalten. (Vom Assistenten wird das Hinzufügen von Bildern zur Ergebnisseite unterstützt.) Führen Sie zum Erstellen des in dieser Übung verwendeten Index den Assistenten Daten importieren aus, und verwenden Sie die Datenquelle realestate-us-sample.

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

Starten des Assistenten

Melden Sie sich mit Ihrem Azure-Konto beim Azure-Portal an.
Suchen Sie Ihren Suchdienst, und wählen Sie auf der Übersichtsseite über die Links in der Mitte der Seite Indizes aus.
Wählen Sie in der Liste mit den bereits vorhandenen Indizes den Index realestate-us-sample-index aus.
Wählen Sie oben auf der Indexseite die Option Demo-App erstellen (Vorschau) aus, um den Assistenten zu starten.
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.

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.

Wählen Sie unter „Miniaturbild“ das Feld thumbnail des Index realestate-us-sample aus. Dieses Beispiel enthält Miniaturbilder in Form von Bildern mit einer URL-Adresse, die in einem Feld namens thumbnail gespeichert sind. Sollte Ihr Index keine Bilder enthalten, lassen Sie dieses Feld leer.
Wählen Sie unter „Titel“ ein Feld aus, das die Eindeutigkeit des jeweiligen Dokuments vermittelt. In diesem Beispiel ist die Angebots-ID eine gute Wahl.
Wählen Sie unter „Beschreibung“ ein Feld mit Details aus, auf deren Grundlage Benutzer ggf. besser entscheiden können, ob sie zu diesem speziellen Dokument navigieren möchten.

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

Das vollständige Indexschema kann im Portal angezeigt werden. Suchen Sie auf der Übersichtsseite des jeweiligen Index nach dem Link Indexdefinition (JSON) . Für die Facettennavigation geeignete Felder verfügen über die Attribute „filterable: true“ und „facetable: true“.

Wählen Sie im Assistenten oben auf der Seite die Registerkarte Seitenleiste aus. Eine Liste aller Felder wird angezeigt, die im Index durch Attribute als filterbar und facettierbar gekennzeichnet sind.
Akzeptieren Sie die aktuelle Auswahl von Facettenfeldern, und wechseln Sie zur nächsten Seite.

Hinzufügen von Typeahead

Die Typeahead-Funktion steht in Form von AutoVervollständigen und Abfragevorschlägen zur Verfügung. Der Assistent unterstützt Abfragevorschläge. Der Suchdienst gibt auf der Grundlage der Tastatureingaben des Benutzers eine Liste vervollständigter Abfragezeichenfolgen zurück, die als Eingabe ausgewählt werden können.

Vorschläge werden für bestimmte Felddefinitionen aktiviert. Der Assistent bietet Optionen, mit denen Sie den Informationsumfang in einem Vorschlag konfigurieren können.

Im folgenden Screenshot werden die Optionen im Assistenten einer gerenderten Seite in der App gegenübergestellt. Sie sehen, wie die Feldauswahl verwendet und wie mithilfe von „Feldname anzeigen“ gesteuert wird, ob die Beschriftung in den Vorschlag einbezogen wird.

Hinzufügen von Vorschlägen

Vorschläge beziehen sich auf automatisierte Abfrageaufforderungen, die an das Suchfeld angefügt sind. Azure KI Search unterstützt zwei davon: automatische Vervollständigung eines teilweise eingegebenen Suchbegriffs und Vorschläge für eine Dropdownliste möglicherweise übereinstimmender Dokumente.

Der Assistent unterstützt Vorschläge, und die Felder, die vorgeschlagene Ergebnisse bereitstellen können, werden von einem Suggesters-Konstrukt im Index abgeleitet:

  "suggesters": [
    {
      "name": "sg",
      "searchMode": "analyzingInfixMatching",
      "sourceFields": [
        "number",
        "street",
        "city",
        "region",
        "postCode",
        "tags"
      ]
    }
  ]

Wählen Sie im Assistenten oben auf der Seite die Registerkarte Vorschläge aus. Eine Liste aller Felder wird angezeigt, die im Indexschema als Vorschlagsanbieter festgelegt sind.
Akzeptieren Sie die aktuelle Auswahl, und wechseln Sie zur nächsten Seite.

Erstellen, Herunterladen und Ausführen

Wählen Sie unten auf der Seite Demo-App erstellen aus, um die HTML-Datei zu generieren.
Wählen Sie nach entsprechender Aufforderung die Option Download your app (App herunterladen) aus, um die Datei herunterzuladen.
Ö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. Geben Sie einen Begriff ein, und grenzen Sie die Ergebnisse mithilfe von Filtern ein.

Der zugrunde liegende Index besteht aus fiktiven, generierten, dokumentenübergreifend duplizierten Daten, und die Beschreibungen passen manchmal nicht zum Bild. Wenn Sie eine App auf der Grundlage Ihrer eigenen Indizes erstellen, können Sie ein stimmigeres Ergebnis erwarten.

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 entweder einzelne Ressourcen oder aber die Ressourcengruppe löschen, um den gesamten Ressourcensatz zu entfernen.

Ressourcen können im Portal über den Link Alle Ressourcen oder Ressourcengruppen im linken Navigationsbereich gesucht und verwaltet werden.

Denken Sie daran, dass ein kostenloser Dienst auf drei Indizes, Indexer und Datenquellen beschränkt ist. Sie können einzelne Elemente über das Portal löschen, um unter dem Limit 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:

Hinzufügen von Suchfunktionen zu Web-Apps

Teilen über