1 – A keresés webhelyhez való hozzáadásának áttekintése
Ebben az Azure AI Search-oktatóanyagban hozzon létre egy webalkalmazást, amely könyvek katalógusán keresztül keres, majd helyezze üzembe a webhelyet egy Azure Static Web Apps-erőforrásban.
Ez az oktatóanyag JavaScript-fejlesztőknek szól, akik olyan előtérbeli ügyfélalkalmazást szeretnének létrehozni, amely olyan keresési műveleteket tartalmaz, mint a faceted navigation, typeahead és pagination. Emellett az Azure SDK for JavaScript kódtárát is bemutatja @azure/search-documents az Azure AI Search szolgáltatásba irányuló hívásokhoz, amelyek indexelési és lekérdezési munkafolyamatokat keresnek a háttérrendszeren.
Mit csinál a minta?
Ez a mintaweboldal 10 000 könyvből álló katalógushoz biztosít hozzáférést. A felhasználó kereshet a katalógusban, ha szöveget ír be a keresősávba. Miközben a felhasználó szöveget ír be, a webhely a keresési index javaslati funkcióját használja a szöveg befejezéséhez. Miután a lekérdezés befejeződött, a könyvek listája megjelenik a részletek egy részével. A felhasználó kiválaszthat egy könyvet, hogy megtekintse a könyv keresési indexében tárolt összes részletet.
A keresési felület a következőket tartalmazza:
- Keresés – keresési funkciókat biztosít az alkalmazáshoz.
- Javaslat – javaslatokat ad, miközben a felhasználó beírja a keresősávot.
- Aspektusok és szűrők – olyan strukturált navigációs struktúrát biztosít, amely szerző vagy nyelv szerint szűr.
- Lapszámozott eredmények – lapozási vezérlőket biztosít az eredmények görgetéshez.
- Dokumentumkeresés – megkeres egy dokumentumot azonosító alapján, hogy lekérje a részletek lap összes tartalmát.
Hogyan van rendszerezve a minta?
A mintakód a következő összetevőket tartalmazza:
| App | Cél | GitHub Adattár Hely |
|---|---|---|
| Client | A React alkalmazás (bemutató réteg) a könyvek kereséssel való megjelenítéséhez. Meghívja az Azure-függvényalkalmazást. | /search-website-functions-v4/client |
| Kiszolgáló | Azure-függvényalkalmazás (üzleti réteg) – meghívja az Azure AI Search API-t JavaScript SDK használatával | /search-website-functions-v4/api |
| Tömeges beszúrás | JavaScript-fájl az index létrehozásához és dokumentumok hozzáadásához. | /search-website-functions-v4/bulk-insert |
A fejlesztési környezet beállítása
Telepítse a következő szoftvert a helyi fejlesztési környezetben.
-
- Válassza ki a legújabb futtatókörnyezetet és verziót a támogatott nyelvi verziók listájából.
- Ha a Node.js másik verziója van telepítve a helyi számítógépen, fontolja meg a Node Version Manager (
nvm) vagy egy Docker-tároló használatát.
Visual Studio Code és a következő bővítmények
- Azure Static Web App
- A parancssori műveletekhez használja az integrált terminált.
Választható:
- Ez az oktatóanyag nem futtatja helyileg az Azure Function API-t. Ha helyileg szeretné futtatni, globálisan telepítenie kell az azure-functions-core-toolst a következő bash-paranccsal:
npm install -g azure-functions-core-tools@4
A keresési minta elágazása és klónozása a gittel
A mintaadattár elágaztatása kritikus fontosságú a statikus webalkalmazás üzembe helyezéséhez. A statikus webalkalmazás a saját GitHub-elágazása alapján határozza meg a buildelési műveleteket és az üzembe helyezési tartalmakat. A statikus webalkalmazásban a kódvégrehajtás távoli, és a statikus webalkalmazás az elágazott mintában lévő kódból olvas be.
A GitHubon fordozza el a mintaadattárat.
Fejezze be az elágazással kapcsolatos folyamatot a webböngészőben a GitHub-fiókjával. Ez az oktatóanyag az elágazást használja az Azure Static Web App üzembe helyezésének részeként.
A bash-terminálon töltse le az elágazott mintaalkalmazást a helyi számítógépre.
Cserélje le
YOUR-GITHUB-ALIASa GitHub-aliasát.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesUgyanabban a Bash-terminálban lépjen az elágazott adattárba a webhely keresési példájához:
cd azure-search-javascript-samplesA Visual Studio Code paranccsal
code .nyissa meg az elágazott adattárat. A fennmaradó feladatok a Visual Studio Code-ból lesznek végrehajtva, kivéve, ha meg vannak adva.code .
Erőforráscsoport létrehozása az Azure-erőforrásokhoz
A Visual Studio Code-ban nyissa meg a Tevékenységsávot, és válassza az Azure ikont.
Jelentkezzen be az Azure-ba, ha még nincs bejelentkezve.
Az Erőforrások szakaszban válassza a Hozzáadás (+), majd az Erőforráscsoport létrehozása lehetőséget.
Adjon meg egy erőforráscsoportnevet, például
cognitive-search-demo-rg.Adjon meg egy régiót:
- Node.js esetén válassza a
West US 2lehetőséget. Ez a javasolt régió az Azure Functions programozási modell (PM) v4 előzetes verziójához. - A C# és a Python esetében a következő régiókat javasoljuk, amelyeket az Azure Static Web Apps támogat az írás során:
West US 2,East US 2, ,West Europe,Central USEast Asia
- Node.js esetén válassza a
Használja ezt az erőforráscsoportot az oktatóanyag során létrehozott összes erőforráshoz. Az erőforráscsoportok egy logikai egységet adnak az erőforrások kezeléséhez, beleértve az erőforrások törlését is, ha végzett.