1. Přehled přidání vyhledávání na web

V tomto kurzu azure AI Search vytvořte webovou aplikaci, která prohledává katalog knih, a pak web nasadíte do prostředku Azure Static Web Apps.

Tento kurz je určený pro vývojáře v JavaScriptu, kteří chtějí vytvořit front-endovou klientskou aplikaci, která zahrnuje interakce vyhledávání, jako je fasetová navigace, typová hlava a stránkování. Ukazuje také knihovnu @azure/search-documents v sadě Azure SDK pro JavaScript pro volání služby Azure AI Search pro indexování a dotazování pracovních postupů v back-endu.

Co ukázka dělá?

Tento ukázkový web poskytuje přístup k katalogu 10 000 knih. Uživatel může katalog prohledávat zadáním textu na panelu hledání. Když uživatel zadá text, web k dokončení textu použije funkci návrhu vyhledávacího indexu. Po dokončení dotazu se zobrazí seznam knih s částí podrobností. Uživatel může vybrat knihu, aby se zobrazily všechny podrobnosti uložené v indexu vyhledávání knihy.

Screenshot of the sample app in a browser window.

Vyhledávací prostředí zahrnuje:

  • Vyhledávání – poskytuje funkci vyhledávání pro aplikaci.
  • Navrhnout – poskytuje návrhy, když uživatel píše na panelu hledání.
  • Fasety a filtry – poskytuje fasetovou navigační strukturu, která filtruje podle autora nebo jazyka.
  • Stránkované výsledky – poskytuje ovládací prvky stránkování pro posouvání výsledků.
  • Vyhledávání dokumentů – vyhledá dokument podle ID a načte veškerý jeho obsah stránky podrobností.

Jak je ukázka uspořádaná?

Vzorový kód obsahuje následující komponenty:

Aplikace Účel GitHubu
Úložiště
Poloha
Klient Aplikace React (prezentační vrstva) k zobrazení knih s hledáním Volá aplikaci Funkcí Azure. /search-website-functions-v4/client
Server Aplikace funkcí Azure (obchodní vrstva) – volá rozhraní API služby Azure AI Search pomocí sady JavaScript SDK. /search-website-functions-v4/api
Hromadné vložení (Bulk insert) Soubor JavaScriptu pro vytvoření indexu a přidání dokumentů do něj. /search-website-functions-v4/bulk-insert

Nastavení vývojového prostředí

Do místního vývojového prostředí nainstalujte následující software.

Vytvoření forku a naklonování ukázky hledání pomocí Gitu

Vytvoření forku ukázkového úložiště je důležité, aby bylo možné nasadit statickou webovou aplikaci. Statická webová aplikace určuje akce sestavení a obsah nasazení na základě vlastního umístění forku GitHubu. Provádění kódu ve statické webové aplikaci je vzdálené, přičemž statická webová aplikace čte z kódu ve vaší forkované ukázce.

  1. Na GitHubu forkujte ukázkové úložiště.

    Dokončete proces forku ve webovém prohlížeči pomocí účtu GitHub. Tento kurz používá váš fork jako součást nasazení do azure Static Web Appu.

  2. V terminálu Bash si stáhněte rozvětvovanou ukázkovou aplikaci do místního počítače.

    Nahraďte YOUR-GITHUB-ALIAS aliasem GitHubu.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
    
  3. Ve stejném terminálu Bash přejděte do vašeho forku úložiště pro tento příklad vyhledávání na webu:

    cd azure-search-javascript-samples
    
  4. K otevření rozvětvovaného úložiště použijte příkaz code . editoru Visual Studio Code. Zbývající úlohy se provádějí v editoru Visual Studio Code, pokud nejsou zadané.

    code .
    

Vytvoření skupiny prostředků pro prostředky Azure

  1. V editoru Visual Studio Code otevřete panel aktivit a vyberte ikonu Azure.

  2. Pokud ještě nejste přihlášení, přihlaste se k Azure.

  3. V části Zdroje vyberte Přidat (+) a pak vyberte Vytvořit skupinu prostředků.

    Screenshot of Visual Studio Code, in Azure explorer, showing **Create Resource Group** option.

  4. Zadejte název skupiny prostředků, například cognitive-search-demo-rg.

  5. Zadejte oblast:

    • Jako Node.js vyberte West US 2. Toto je doporučená oblast pro programovací model funkce Azure (PM) v4 Preview.
    • Pro C# a Python doporučujeme následující oblasti podporované službou Azure Static Web Apps od tohoto psaní: West US 2, East US 2, West Europe, Central USEast Asia

Tuto skupinu prostředků použijte pro všechny prostředky vytvořené během tohoto kurzu. Skupina prostředků poskytuje logickou jednotku pro správu prostředků, včetně jejich odstranění po dokončení.

Další kroky

Vytvoření indexu vyhledávání a načtení s dokumenty