1 - Panoramica dell'aggiunta della ricerca a un sito Web
In questa esercitazione di Ricerca intelligenza artificiale di Azure creare un'app Web che esegue ricerche in un catalogo di libri e quindi distribuire il sito Web in una risorsa App Web statiche di Azure.
Questa esercitazione è destinata agli sviluppatori JavaScript che vogliono creare un'app client front-end che include interazioni di ricerca come spostamento in base a facet, typeahead e paginazione. Illustra anche la @azure/search-documents libreria in Azure SDK per JavaScript per le chiamate a Ricerca di intelligenza artificiale di Azure per l'indicizzazione e le query sui flussi di lavoro nel back-end.
Cosa fa l'esempio?
Questo sito Web di esempio consente di accedere a un catalogo di 10.000 libri. Un utente può eseguire ricerche nel catalogo immettendo testo nella barra di ricerca. Mentre l'utente immette testo, il sito Web usa la funzionalità di suggerimento dell'indice di ricerca per completare il testo. Al termine della query, l'elenco dei libri viene visualizzato con una parte dei dettagli. Un utente può selezionare un libro per visualizzare tutti i dettagli, archiviati nell'indice di ricerca, del libro.
L'esperienza di ricerca include:
- Ricerca: fornisce la funzionalità di ricerca per l'applicazione.
- Suggerisci: fornisce suggerimenti quando l'utente digita nella barra di ricerca.
- Facet e filtri: fornisce una struttura di spostamento in base a facet che filtra in base all'autore o alla lingua.
- Risultati impaginati: fornisce controlli di paging per lo scorrimento dei risultati.
- Ricerca documento: cerca un documento in base all'ID per recuperare tutto il relativo contenuto per la pagina dei dettagli.
Come è organizzato l'esempio?
Il codice di esempio include i componenti seguenti:
| App | Scopo | GitHub Repository Ubicazione |
|---|---|---|
| Client | App React (livello presentazione) per visualizzare i libri, con la ricerca. Chiama l'app per le funzioni di Azure. | /search-website-functions-v4/client |
| Server | App per le funzioni di Azure (livello aziendale): chiama l'API Ricerca di intelligenza artificiale di Azure con JavaScript SDK | /search-website-functions-v4/api |
| Inserimento in blocco | File JavaScript per creare l'indice e aggiungerlo. | /search-website-functions-v4/bulk-insert |
Configurare l'ambiente di sviluppo
Installare il software seguente nell'ambiente di sviluppo locale.
-
- Selezionare il runtime e la versione più recenti da questo elenco di versioni del linguaggio supportate.
- Se nel computer locale è installata una versione diversa di Node.js, è consigliabile usare Node Version Manager (
nvm) o un contenitore Docker.
Visual Studio Code e le estensioni seguenti
- App Web statica di Azure
- Usare il terminale integrato per le operazioni della riga di comando.
Facoltativi:
- Questa esercitazione non esegue l'API per le funzioni di Azure in locale. Se si intende eseguirlo in locale, è necessario installare azure-functions-core-tools a livello globale con il comando bash seguente:
npm install -g azure-functions-core-tools@4
Creare una copia tramite fork e clonare l'esempio di ricerca con Git
La creazione di fork del repository di esempio è fondamentale per poter distribuire l'app Web statica. L'app Web statica determina le azioni di compilazione e il contenuto della distribuzione in base al percorso di fork di GitHub. L'esecuzione del codice nell'app Web statica è remota, con l'app Web statica che legge dal codice nell'esempio di copia tramite fork.
In GitHub creare una copia tramite fork del repository di esempio.
Completare il processo di fork nel Web browser con l'account GitHub. Questa esercitazione usa il fork come parte della distribuzione in un'app Web statica di Azure.
In un terminale bash scaricare l'applicazione di esempio con fork nel computer locale.
Sostituire
YOUR-GITHUB-ALIAScon l'alias GitHub.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesNello stesso terminale bash passare al repository con fork per questo esempio di ricerca del sito Web:
cd azure-search-javascript-samplesUsare il comando
code .di Visual Studio Code per aprire il repository con fork. Le attività rimanenti vengono eseguite da Visual Studio Code, a meno che non sia specificato.code .
Creare un gruppo di risorse per le risorse di Azure
In Visual Studio Code aprire la barra attività e selezionare l'icona di Azure.
Accedere ad Azure, se non si è già connessi.
Nella sezione Risorse selezionare Aggiungi (+) e quindi crea gruppo di risorse.
Immettere un nome del gruppo di risorse, ad esempio
cognitive-search-demo-rg.Immettere un'area:
- Per Node.js selezionare
West US 2. Questa è l'area consigliata per l'anteprima del modello di programmazione delle funzioni di Azure v4. - Per C# e Python, è consigliabile usare le aree seguenti, supportate da App Web statiche di Azure a partire da questa scrittura:
West US 2,East US 2,West Europe,Central USEast Asia
- Per Node.js selezionare
Usare questo gruppo di risorse per tutte le risorse create durante questa esercitazione. Un gruppo di risorse offre un'unità logica per gestire le risorse, inclusa l'eliminazione al termine.