Condividi tramite


Passaggio 1 - Panoramica dell'aggiunta della ricerca a un'app Web statica con .NET

Questa esercitazione crea un sito Web che esegue ricerche in un catalogo di libri e quindi distribuisce il sito Web in un'app Web statica di Azure.

Funzionamento del campione

Questo sito Web campione consente di accedere a un catalogo di 10.000 libri. È possibile eseguire ricerche nel catalogo immettendo del testo nella barra di ricerca. Mentre si immette testo, il sito Web usa la funzionalità di suggerimento dell'indice di ricerca per completare automaticamente il testo. Al termine della query, il sito Web visualizza l'elenco dei libri con una parte dei dettagli. È possibile selezionare un libro per visualizzare tutti i dettagli, archiviati nell'indice di ricerca, del libro.

Screenshot dell'app campione in una finestra del browser.

L'esperienza di ricerca include:

  • Ricerca: fornisce funzionalità di ricerca per l'applicazione.
  • Suggerimenti: fornisce suggerimenti quando l'utente digita nella barra di ricerca.
  • Facce e filtri: fornisce una struttura di navigazione sfaccettata che filtra per autore o 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.

Com'è organizzato il campione di esempio?

Il codice di esempio include i componenti seguenti:

App Scopo GitHub
Repository
Posizione
cliente App React (livello presentazione) per visualizzare i libri, con la ricerca. La pagina richiama l'app per le funzioni di Azure. /azure-search-static-web-app/client
interfaccia di programmazione delle applicazioni (API) App per le funzioni .NET di Azure (livello aziendale): richiama l'API Azure AI Search con .NET SDK /azure-search-static-web-app/api
inserimento massivo Progetto .NET per creare l'indice e aggiungervi documenti. /azure-search-static-web-app/bulk-insert

Configurare l'ambiente di sviluppo

Creare servizi e installare il software seguente per l'ambiente di sviluppo locale.

Questa esercitazione non esegue l'API per le funzioni di Azure in locale. Se si vuole eseguirlo in locale, installare azure-functions-core-tools.

Fare un fork e clonare l'esempio di ricerca con git

Per distribuire l'app Web statica, è necessario creare una copia tramite fork del repository di esempio. Le applicazioni Web usano il percorso di fork di GitHub per decidere le azioni di compilazione e il contenuto da distribuire. L'esecuzione del codice nell'app Web statica avviene in modalità remota, con l'app Web statica di Azure che legge il codice dal codice di esempio forkato.

  1. Su GitHub, creare una copia tramite fork del repository azure-search-static-web-app.

    Completare il processo di fork nel Web browser con il proprio account GitHub. Questa esercitazione utilizza il tuo fork come parte della distribuzione in un'app Web statica di Azure.

  2. Nel terminale Bash, scarica la tua applicazione di esempio forkata nel computer locale.

    Sostituire YOUR-GITHUB-ALIAS con il nome del proprio alias GitHub.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
    
  3. Nello stesso terminale Bash, accedere al repository forkato per questo esempio di ricerca sul sito.

    cd azure-search-static-web-app
    
  4. Usare il comando di Visual Studio Code code . per aprire il repository forkato. È possibile eseguire le attività rimanenti da Visual Studio Code, a meno che non sia specificato.

    code .
    

Passaggi successivi