Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Distribuzione di Amazon Kendra
Quando arriva il momento di implementareAmazon Kendrase effettui una ricerca sul tuo sito web, forniamo il codice sorgente che puoi usare con React per iniziare a usare la tua applicazione con un vantaggio. Il codice sorgente viene fornito gratuitamente con una licenza MIT modificata. Puoi usarlo così com'è o modificarlo per le tue esigenze. L'app React fornita è un esempio per aiutarti a iniziare. Non è un'app pronta per la produzione.
Per implementare un'applicazione di ricerca senza codice e generare un URL endpoint per la pagina di ricerca con controllo dell'accesso, consultaAmazon KendraGeneratore di esperienze.
Il codice di esempio seguente aggiungeAmazon Kendracerca in un'applicazione web React esistente:
-
https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip
—File di esempio che gli sviluppatori possono utilizzare per creare un'esperienza di ricerca funzionale nella loro applicazione web React esistente.
Gli esempi sono modellati sulla pagina di ricerca diAmazon Kendraconsolle. Hanno le stesse funzionalità per la ricerca e la visualizzazione dei risultati di ricerca. È possibile utilizzare l'intero esempio oppure scegliere solo una delle funzionalità per uso personale.
Per visualizzare i tre componenti della pagina di ricerca nellaAmazon Kendraconsole, scegli l'icona del codice (</>) dal menu a destra. Passa il puntatore su ogni sezione per visualizzare una breve descrizione del componente e per ottenere l'URL della fonte del componente.
Argomenti
Panoramica
Aggiungi il codice di esempio a un'applicazione web React esistente per attivare la ricerca. Il codice di esempio include un file Readme con i passaggi per configurare un nuovo ambiente di sviluppo React. I dati di esempio contenuti nell'esempio di codice possono essere utilizzati per dimostrare una ricerca. I file di ricerca e i componenti nel codice di esempio sono strutturati come segue:
-
Pagina di ricerca principale (
Search.tsx
): questa è la pagina principale che contiene tutti i componenti. Qui è possibile integrare l'applicazione conAmazon KendraAPI. -
Barra di ricerca: questo è il componente in cui un utente inserisce un termine di ricerca e richiama la funzione di ricerca.
-
Risultati: questo è il componente che visualizza i risultati diAmazon Kendra. Ha tre componenti: risposte suggerite, risultati delle domande frequenti e documenti consigliati.
-
Sfaccettature: questo è il componente che mostra le sfaccettature nei risultati della ricerca e consente di scegliere una sfaccettatura per restringere la ricerca.
-
Impaginazione: questo è il componente da cui viene impaginata la rispostaAmazon Kendra.
Prerequisiti
Prima di iniziare, avrai bisogno di:
-
Node.js e npminstallato
. È richiesta la versione 19 o precedente di Node.js. -
Python 3 o Python 2scaricato e installato
. -
SDK for JavaoAWS SDK for JavaScriptper l'invio di chiamate API aAmazon Kendra.
-
Un'applicazione web React esistente. Il codice di esempio include un file Readme con i passaggi su come configurare un nuovo ambiente di sviluppo React, incluso l'utilizzo di framework/librerie richiesti. Puoi anche seguire le istruzioni per l'utente.Documentazione di React sulla creazione di un'app web React
. -
Le librerie e le dipendenze richieste configurate nell'ambiente di sviluppo. Il codice di esempio include un file Readme che elenca le librerie e le dipendenze dei pacchetti richieste. Si noti che
sass
è obbligatorio, comenode-sass
è obsoleto. Se l'hai installato in precedenzanode-sass
, disinstallalo e installasass
.
Configurazione dell'esempio
Una procedura completa per l'aggiuntaAmazon Kendrala ricerca in un'applicazione React si trova nel file Readme incluso nell'esempio di codice.
Per iniziare a utilizzare kendrasamples-react-app.zip
-
Assicurati di aver completato laPrerequisiti, incluso il download e l'installazione di Node.js e npm.
-
Scarica kendrasamples-react-app.zip e unzip.
-
Apri il tuo terminale e vai a
aws-kendra-example-react-app/src/services/
. Apertalocal-dev-credentials.json
e fornisci le tue credenziali. Non aggiungete questo file a nessun archivio pubblico. -
Vai a
aws-kendra-example-react-app
e installa le dipendenze inpackage.json
. Eseguinpm install
. -
Avvia una versione demo della tua app sul tuo server. Esegui
npm start
. Puoi fermare il server locale accedendo alla tastieraCmd/Ctrl + C
. -
Puoi cambiare la porta o l'host (ad esempio, l'indirizzo IP) accedendo a
package.json
e aggiorna l'host e la porta:"start": "HOST=[host] PORT=[port] react-scripts start"
. Se usi Windows:"start": "set HOST=[host] && set PORT=[port] && react-scripts start"
. -
Se disponi di un dominio web registrato, puoi specificarlo in
package.json
dopo il nome della tua app. Ad esempio,"homepage": "https://mywebsite.com"
. Devi correrenpm install
di nuovo per aggiornare le nuove dipendenze, quindi eseguirenpm start
. -
Per creare l'app, esegui
npm build
. Carica il contenuto della directory di compilazione sul tuo provider di hosting.avvertimento
L'app React ènonpronto per la produzione. È un esempio di implementazione di un'app perAmazon Kendraricerca.
Pagina di ricerca principale
La pagina di ricerca principale (Search.tsx
) contiene tutti i componenti di ricerca di esempio. Include il componente della barra di ricerca per l'output, i componenti dei risultati per visualizzare la risposta diQueryAPI e un componente di impaginazione per sfogliare la risposta.
Componente per la ricerca
Il componente di ricerca fornisce una casella di testo per inserire il testo della query. IlonSearch
la funzione è un hook che richiama la funzione principale inSearch.tsx
per laAmazon Kendra interrogazioneChiamata per l'utente.
Componente per i risultati
Il componente dei risultati mostra la risposta delQuery
API. I risultati sono mostrati in tre aree separate.
-
Risposte suggerite: questi sono i migliori risultati restituiti da
Query
API. Contiene fino a tre risposte suggerite. Nella risposta, hanno il tipo di risultatoANSWER
. -
Risposte alle domande frequenti: questi sono i risultati delle domande frequenti restituiti dalla risposta. Le domande frequenti vengono aggiunte all'indice separatamente. Nella risposta, hanno il tipo
QUESTION_ANSWER
. Per ulteriori informazioni, consulta la paginaDomande e risposte. -
Documenti consigliati: si tratta di documenti aggiuntivi cheAmazon Kendraritorna nella risposta. Nella risposta del
Query
API, hanno il tipoDOCUMENT
.
I componenti dei risultati condividono un set di componenti per funzionalità come evidenziazione, titoli, link e altro. I componenti condivisi devono essere presenti affinché i componenti dei risultati funzionino.
Componente Facets
Il componente sfaccettature elenca le sfaccettature disponibili nei risultati della ricerca. Ogni sfaccettatura classifica la risposta in base a una dimensione specifica, ad esempio l'autore. Puoi affinare la ricerca a un aspetto specifico scegliendone uno dall'elenco.
Dopo aver selezionato un facet, il componente chiamaQuery
con un filtro di attributi che limita la ricerca ai documenti che corrispondono al facet.
componente di impaginazione
Il componente di impaginazione consente di visualizzare i risultati della ricerca dalQuery
API in più pagine. Chiama ilQuery
API conPageSize
ePageNumber
parametri per ottenere una pagina specifica di risultati.