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à.
# Esercitazioni
**Topics**
+ [Crea un'app di riepilogo di testo basata sull'intelligenza artificiale con Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interazione con Amazon Simple Storage Service con componenti e automazioni](automations-s3.md)
+ [Richiamo delle funzioni Lambda in un'app App Studio](tutorial-lambda.md)
# Crea un'app di riepilogo di testo basata sull'intelligenza artificiale con Amazon Bedrock
In questo tutorial, creerai un'applicazione in App Studio che utilizza Amazon Bedrock per fornire riepiloghi concisi degli input di testo da parte degli utenti finali. L'applicazione contiene una semplice interfaccia utente in cui gli utenti possono inserire qualsiasi testo che desiderano riepilogare. Potrebbe trattarsi di appunti di riunioni, contenuti di articoli, risultati di ricerche o qualsiasi altra informazione testuale. Dopo aver inserito il testo, gli utenti possono premere un pulsante per inviarlo ad Amazon Bedrock, che lo elaborerà utilizzando il modello Claude 3 Sonnet e restituirà una versione riepilogativa.
**Contents**
+ [Prerequisiti](#tutorial-conversational-bedrock-prerequisites)
+ [Passaggio 1: creare e configurare un ruolo IAM e un connettore App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Fase 2: Creare un'applicazione](#tutorial-conversational-bedrock-steps-create-application)
+ [Passaggio 3: creare e configurare un'automazione](#tutorial-conversational-bedrock-steps-create-automation)
+ [Fase 4: Creare pagine e componenti](#tutorial-conversational-bedrock-steps-user-interface)
+ [Rinomina la pagina predefinita](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Aggiungi componenti alla pagina](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configura i componenti della pagina](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Fase 5: Pubblicare l'applicazione nell'ambiente **di test**](#tutorial-conversational-bedrock-steps-publish)
+ [(Facoltativo) Pulizia](#tutorial-conversational-bedrock-steps-cleanup)
## Prerequisiti
Prima di iniziare, esamina e completa i seguenti prerequisiti:
+ Accesso ad AWS App Studio. Tieni presente che devi avere il ruolo di amministratore per creare un connettore in questo tutorial.
+ Facoltativo: [AWS Concetti di App Studio](concepts.md) consulta [Tutorial: inizia a creare da un'app vuota](getting-started-tutorial-empty.md) e acquisisci familiarità con importanti concetti di App Studio.
## Passaggio 1: creare e configurare un ruolo IAM e un connettore App Studio
Per fornire ad App Studio l'accesso ai modelli Amazon Bedrock, devi:
1. Abilita i modelli Amazon Bedrock che desideri utilizzare nella tua app. Per questo tutorial, utilizzerai **Claude 3 Sonnet**, quindi assicurati di abilitare quel modello.
1. Crea un ruolo IAM con autorizzazioni appropriate per Amazon Bedrock.
1. Crea un connettore App Studio con il ruolo IAM che verrà utilizzato nella tua app.
Consulta [Connect ad Amazon Bedrock](connectors-bedrock.md) le istruzioni dettagliate e torna a questo tutorial dopo aver seguito i passaggi e creato il connettore.
## Fase 2: Creare un'applicazione
Utilizza la seguente procedura per creare un'app vuota in App Studio da inserire nell'app di riepilogo del testo.
1. Accedi ad App Studio.
1. Vai al Builder Hub e scegli **\$1 Crea app**.
1. Scegli **Inizia da zero.**
1. Nel campo **Nome app**, fornisci un nome per la tua app, ad esempio**Text Summarizer**.
1. Se ti viene chiesto di selezionare fonti di dati o un connettore, scegli **Ignora** ai fini di questo tutorial.
1. Scegli **Successivo** per continuare.
1. (Facoltativo): guarda il video tutorial per una rapida panoramica sulla creazione di app in App Studio.
1. Scegli **Modifica app**, che ti porterà allo studio dell'applicazione.
## Passaggio 3: creare e configurare un'automazione
Sei tu a definire la logica e il comportamento di un'app App Studio nelle *automazioni*. Le automazioni consistono in singoli passaggi noti come *azioni*, *parametri* utilizzati per trasferire dati all'azione da altre risorse e un *output* che può essere utilizzato da altre automazioni o componenti. In questa fase, creerai un'automazione che gestisce l'interazione con Amazon Bedrock con quanto segue:
+ Input: un parametro per passare il testo immesso dall'utente all'automazione.
+ Azioni: un'azione **GenAI Prompt** che invia l'input di testo ad Amazon Bedrock e restituisce il riepilogo del testo in uscita.
+ Output: un output di automazione costituito dal riepilogo elaborato da Amazon Bedrock, che può essere utilizzato nella tua app.
**Per creare e configurare un'automazione che invii un prompt ad Amazon Bedrock ed elabori e restituisca un riepilogo**
1. Scegli la scheda **Automazioni** nella parte superiore dell'area di disegno.
1. Scegli **\$1 Aggiungi automazione**.
1. Nel pannello di destra, scegli **Proprietà**.
1. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci **InvokeBedrock** e premi **Invio**.
1. Aggiungi un parametro all'automazione che verrà utilizzato per passare l'input del prompt di testo dall'utente all'automazione da utilizzare nella richiesta ad Amazon Bedrock eseguendo i seguenti passaggi:
1. Nell'area di disegno, nella casella dei parametri, scegli **\$1** Aggiungi.
1. In **Nome**, inserisci **input**.
1. In **Descrizione**, inserisci una descrizione, ad esempio**Text to be sent to Amazon Bedrock**.
1. In **Tipo**, selezionate **Stringa**.
1. **Scegliete Aggiungi** per creare il parametro.
1. Aggiungi un'azione **GenAI Prompt** eseguendo i seguenti passaggi:
1. **Nel pannello di destra, scegli Azioni.**
1. Scegli **GenAI Prompt** per aggiungere un'azione.
1. Configura l'azione eseguendo i seguenti passaggi:
1. Scegli l'azione dall'area di disegno per aprire il menu **Proprietà** a destra.
1. Rinomina l'azione **PromptBedrock** scegliendo l'icona a forma di matita, inserendo il nome e premendo invio.
1. In **Connettore**, seleziona il connettore che è stato creato in[Passaggio 1: creare e configurare un ruolo IAM e un connettore App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. In **Modello**, scegli il modello Amazon Bedrock che desideri utilizzare per elaborare la richiesta. In questo tutorial, sceglierai **Claude** 3.5 Sonnet.
1. Nel **prompt dell'utente**, inserisci. `{{params.input}}` Rappresenta il `input` parametro creato in precedenza e conterrà il testo inserito dagli utenti dell'app.
1. In **Prompt di sistema**, inserisci le istruzioni del prompt di sistema che desideri inviare ad Amazon Bedrock. Per questo tutorial, inserisci quanto segue:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Scegli **Impostazioni di richiesta** per espanderla e aggiorna i seguenti campi:
+ In **Temperatura**, inserisci`0`. La temperatura determina la casualità o la creatività dell'output su una scala da 0 a 10. Più alto è il numero, più creativa è la risposta.
+ In **Max Tokens**, inserisci `4096` per limitare la lunghezza della risposta.
1. L'output di questa automazione sarà il testo riepilogato, tuttavia, per impostazione predefinita le automazioni non creano output. Configura l'automazione per creare un output di automazione eseguendo i seguenti passaggi:
1. Nella barra di navigazione a sinistra, scegli l'**InvokeBedrock**automazione.
1. **Nel menu **Proprietà** a destra, in **Output**, scegli \$1 Aggiungi.**
1. In **Output**, immettete**\$1\$1results.PromptBedrock.text\$1\$1**. Questa espressione restituisce il contenuto dell'`processResults`azione.
## Fase 4: Creare pagine e componenti
In App Studio, ogni pagina rappresenta una schermata dell'interfaccia utente (UI) dell'applicazione con cui gli utenti interagiranno. All'interno di queste pagine, puoi aggiungere vari componenti come tabelle, moduli, pulsanti e altro per creare il layout e la funzionalità desiderati.
### Rinomina la pagina predefinita
L'app di riepilogo del testo in questo tutorial conterrà solo una pagina. Le applicazioni appena create hanno una pagina predefinita, quindi rinominerai quella invece di aggiungerne una.
**Per rinominare la pagina predefinita**
1. Nel menu di navigazione della barra superiore, scegli **Pagine**.
1. Nel pannello a sinistra, scegli **Pagina1** e scegli il pannello **Proprietà** nel pannello a destra.
1. **Scegliete l'icona a forma di matita, immettete e premete Invio**TextSummarizationTool**.**
1. Nell'**etichetta di navigazione** inserisci**TextSummarizationTool**.
### Aggiungi componenti alla pagina
Per questo tutorial, l'app di riepilogo del testo ha una pagina che contiene i seguenti componenti:
+ Un componente **di immissione di testo** che gli utenti finali utilizzano per inserire un prompt da riepilogare.
+ Un componente **Button** utilizzato per inviare il prompt ad Amazon Bedrock.
+ Un componente **dell'area di testo** che visualizza il riepilogo di Amazon Bedrock.
Aggiungi un componente **di immissione di testo** alla pagina che gli utenti utilizzeranno per inserire un prompt di testo da riepilogare.
**Per aggiungere un componente di immissione di testo**
1. Nel pannello **Componenti** a destra, individuate il componente di **immissione del testo** e trascinatelo sull'area di disegno.
1. Scegliete l'input di testo nell'area di disegno per selezionarlo.
1. Nel pannello **Proprietà** a destra, aggiorna le seguenti impostazioni:
1. Scegliete l'icona a forma di matita per rinominare il testo inserito. **inputPrompt**
1. In **Etichetta**, inserisci**Prompt**.
1. In **Placeholder**, immettete. **Enter text to be summarized**
Ora aggiungi un componente **Button** a cui gli utenti sceglieranno di inviare il prompt ad Amazon Bedrock.
**Per aggiungere un componente pulsante**
1. Nel pannello **Componenti** a destra, individuate il componente **Button** e trascinatelo sull'area di disegno.
1. Scegliete il pulsante nell'area di disegno per selezionarlo.
1. Nel pannello **Proprietà** a destra, aggiorna le seguenti impostazioni:
1. Scegliete l'icona a forma di matita per rinominare il pulsante. **sendButton**
1. In **Etichetta del pulsante**, inserisci**Send**.
Ora aggiungi un componente **Text area** che mostrerà il riepilogo restituito da Amazon Bedrock.
**Per aggiungere un componente dell'area di testo**
1. Nel pannello **Componenti** a destra, individuate il componente **Area di testo** e trascinatelo sull'area di disegno.
1. Scegliete l'area di testo nell'area di disegno per selezionarla.
1. Nel pannello **Proprietà** a destra, aggiorna le seguenti impostazioni:
1. Scegliete l'icona a forma di matita per rinominare il pulsante. **textSummary**
1. In **Etichetta**, inserisci**Summary**.
### Configura i componenti della pagina
Ora che l'app contiene una pagina con i componenti, il passaggio successivo consiste nel configurare i componenti per eseguire il comportamento appropriato. Per configurare un componente, ad esempio un pulsante, in modo che agisca quando interagisce con esso, è necessario aggiungervi un *trigger*. Per l'app di questo tutorial, aggiungerai due trigger al `sendButton` pulsante per effettuare le seguenti operazioni:
+ Il primo trigger invia il testo nel `textPrompt` componente ad Amazon Bedrock per essere analizzato.
+ Il secondo trigger mostra il riepilogo restituito da Amazon Bedrock nel `textSummary` componente.
**Per aggiungere un trigger che invii il prompt ad Amazon Bedrock**
1. Scegli il pulsante nell'area di disegno per selezionarlo.
1. Nel pannello **Proprietà** a destra, nella sezione **Trigger**, scegli **\$1** Aggiungi.
1. Scegli **Invoke Automation**.
1. Scegli il **InvokeAutomation1** trigger che è stato creato per configurarlo.
1. In **Nome azione**, inserisci**invokeBedrockAutomation**.
1. In **Invoke Automation**, seleziona l'**InvokeBedrock**automazione creata in precedenza.
1. Nella casella dei parametri, nel parametro **di input** creato in precedenza, immettete**\$1\$1ui.inputPrompt.value\$1\$1**, che passa il contenuto del componente di immissione del `inputPrompt` testo.
1. Fate clic sulla freccia sinistra nella parte superiore del pannello per tornare al menu delle proprietà del componente.
Ora, hai configurato un trigger che richiama l'automazione per inviare una richiesta ad Amazon Bedrock quando si fa clic sul pulsante, il passaggio successivo consiste nel configurare un secondo trigger che mostri i risultati nel componente. `textSummary`
**Per aggiungere un trigger che mostri i risultati di Amazon Bedrock nel componente dell'area di testo**
1. **Nel pannello **Proprietà** a destra del pulsante, nella sezione **Trigger**, scegli \$1 Aggiungi.**
1. Scegli **Esegui azione del componente**.
1. Scegli il trigger **Runcomponentaction1** che è stato creato per configurarlo.
1. In Nome **azione, immettere.** **setTextSummary**
1. In **Componente**, selezionate il componente **TextSummary**.
1. In **Azione**, seleziona **Imposta valore**.
1. In **Imposta valore su**, inserisci**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Fase 5: Pubblicare l'applicazione nell'ambiente **di test**
In genere, durante la creazione di un'app, è buona norma visualizzarne l'anteprima per vederne l'aspetto ed eseguire i test iniziali sulla sua funzionalità. Tuttavia, poiché le applicazioni non interagiscono con i servizi esterni nell'ambiente di anteprima, pubblicherai l'app nell'ambiente di test per poter testare l'invio di richieste e la ricezione di risposte da Amazon Bedrock.
**Per pubblicare la tua app nell'ambiente di test**
1. **Nell'angolo in alto a destra dell'app builder, scegli Pubblica.**
1. Aggiungi una descrizione della versione per l'ambiente di test.
1. Controlla e seleziona la casella di controllo relativa allo SLA.
1. Scegli **Avvia**. La pubblicazione può richiedere fino a 15 minuti.
1. (Facoltativo) Quando sei pronto, puoi concedere l'accesso ad altri utenti scegliendo **Condividi** e seguendo le istruzioni. Per ulteriori informazioni sulla condivisione delle app App Studio, consulta. [Condivisione di applicazioni pubblicate](application-share.md)
Dopo aver testato l'applicazione, scegli nuovamente **Pubblica** per promuovere l'applicazione nell'ambiente di produzione. Tieni presente che le app nell'ambiente di produzione non sono disponibili per gli utenti finali finché non vengono condivise. Per ulteriori informazioni sui diversi ambienti applicativi, consulta[Ambienti applicativi](applications-publish.md#application-environments).
## (Facoltativo) Pulizia
Ora hai completato con successo il tutorial e creato un'app per il riepilogo del testo in App Studio con Amazon Bedrock. Puoi continuare a utilizzare la tua app oppure puoi ripulire le risorse create in questo tutorial. L'elenco seguente contiene un elenco di risorse da pulire:
+ Il connettore Amazon Bedrock creato in App Studio. Per ulteriori informazioni, consulta [Visualizzazione, modifica ed eliminazione dei connettori](viewing-deleting-connectors.md).
+ L'app di riepilogo del testo in App Studio. Per ulteriori informazioni, consulta [Eliminazione di un’applicazione](applications-delete.md).
+ Il ruolo IAM creato nella console IAM. Per ulteriori informazioni, consulta [Eliminare ruoli o profili di istanza](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) nella *Guida AWS Identity and Access Management per l'utente*.
+ *Se hai richiesto l'accesso al modello per usare Claude 3 Sonnet e desideri ripristinare l'accesso, consulta [Gestire l'accesso ai modelli Amazon Bedrock Foundation nella Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) User Guide.*
# Interazione con Amazon Simple Storage Service con componenti e automazioni
Puoi richiamare diverse operazioni Amazon S3 da un'app App Studio. Ad esempio, puoi creare un semplice pannello di amministrazione per gestire gli utenti e gli ordini e visualizzare i contenuti multimediali da Amazon S3. Sebbene sia possibile richiamare qualsiasi operazione Amazon S3 utilizzando **l'**azione AWS Invoke, ci sono quattro azioni Amazon S3 dedicate che puoi aggiungere alle automazioni della tua app per eseguire operazioni comuni su bucket e oggetti Amazon S3. Le quattro azioni e le relative operazioni sono le seguenti:
+ **Put Object**: utilizza l'`Amazon S3 PutObject`operazione per aggiungere un oggetto a un bucket Amazon S3.
+ **Ottieni oggetto**: utilizza l'`Amazon S3 GetObject`operazione per recuperare un oggetto da un bucket Amazon S3.
+ **Elenca oggetti**: utilizza l'`Amazon S3 ListObjects`operazione per elencare gli oggetti in un bucket Amazon S3.
+ **Elimina oggetto**: utilizza l'`Amazon S3 DeleteObject`operazione per eliminare un oggetto da un bucket Amazon S3.
Oltre alle azioni, è disponibile un componente di **caricamento S3** che puoi aggiungere alle pagine delle applicazioni. Gli utenti possono utilizzare questo componente per scegliere un file da caricare e il componente chiama `Amazon S3 PutObject` per caricare il file nel bucket e nella cartella configurati. Questo tutorial utilizzerà questo componente al posto dell'azione di automazione autonoma **Put Object**. (L'azione autonoma dovrebbe essere utilizzata in scenari più complessi che implicano logica o azioni aggiuntive da intraprendere prima o dopo il caricamento.)
## Prerequisiti
Questa guida presuppone che tu abbia soddisfatto i seguenti prerequisiti:
1. Ha creato e configurato un bucket Amazon S3, un ruolo e una policy IAM e un connettore Amazon S3 per integrare correttamente Amazon S3 con App Studio. Per creare un connettore, devi avere il ruolo di amministratore. Per ulteriori informazioni, consulta [Connect ad Amazon Simple Storage Service (Amazon S3) Simple Storage Service S3](connectors-s3.md).
## Creare un'applicazione vuota
Crea un'applicazione vuota da utilizzare in questa guida eseguendo i seguenti passaggi.
**Per creare un'applicazione vuota**
1. Nel riquadro di navigazione, scegli **Le mie applicazioni**.
1. Scegli **\$1 Crea app**.
1. Nella finestra di dialogo **Crea app**, assegna un nome all'applicazione, scegli **Inizia da zero** e scegli **Avanti**.
1. Nella finestra di dialogo **Connetti a dati esistenti**, scegliete **Ignora** per creare l'applicazione.
1. Scegliete **Modifica app** per accedere all'area di disegno della nuova app, dove potete utilizzare componenti, automazioni e dati per configurare l'aspetto e la funzione dell'applicazione.
## Crea pagine
Crea tre pagine nell'applicazione per raccogliere o mostrare informazioni.
**Per creare pagine**
1. Se necessario, scegli la scheda **Pagine** nella parte superiore dell'area di disegno.
1. Nella barra di navigazione a sinistra, c'è una singola pagina creata con la tua app. Scegli **\$1 Aggiungi** due volte per creare altre due pagine. Il riquadro di navigazione dovrebbe mostrare tre pagine totali.
1. Aggiorna il nome della pagina **Page1** effettuando le seguenti operazioni:
1. **Scegliete l'icona con i puntini di sospensione e scegliete Proprietà della pagina.**
1. Nel menu **Proprietà** a destra, scegli l'icona a forma di matita per modificare il nome.
1. Entra **FileList** e premi **Invio**.
1. Ripeti i passaggi precedenti per aggiornare la seconda e la terza pagina come segue:
+ Rinomina **Page2** in. **UploadFile**
+ **Rinomina Page3 in.** **FailUpload**
**Ora, l'app dovrebbe avere tre pagine denominate, e **FileList**UploadFile**FailUpload******, che sono mostrate nel pannello Pagine a sinistra.**
Successivamente, creerai e configurerai le automazioni che interagiscono con Amazon S3.
## Crea e configura automazioni
Crea le automazioni della tua applicazione che interagiscono con Amazon S3. Utilizza le seguenti procedure per creare le seguenti automazioni:
+ Un'automazione **GetFiles** che elenca gli oggetti nel tuo bucket Amazon S3, che verranno utilizzati per riempire un componente della tabella.
+ Un'automazione **DeleteFile** che elimina un oggetto dal bucket Amazon S3, che verrà utilizzato per aggiungere un pulsante di eliminazione a un componente della tabella.
+ Un'automazione **ViewFile** che ottiene un oggetto dal tuo bucket Amazon S3 e lo visualizza, che verrà utilizzata per mostrare maggiori dettagli su un singolo oggetto selezionato da un componente della tabella.
### Crea un'automazione `getFiles`
Crea un'automazione che elencherà i file in un bucket Amazon S3 specificato.
1. Scegli la scheda **Automazioni** nella parte superiore dell'area di disegno.
1. Scegli **\$1 Aggiungi automazione**.
1. Nel pannello di destra, scegli **Proprietà**.
1. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci **getFiles** e premi **Invio**.
1. Aggiungere un'azione **Elenco oggetti** eseguendo le seguenti operazioni:
1. Nel pannello di destra, scegli **Azioni**.
1. Scegli **Elenca oggetti** per aggiungere un'azione. L'azione deve avere un nome`ListObjects1`.
1. Configura l'azione eseguendo i seguenti passaggi:
1. Scegli l'azione dall'area di disegno per aprire il menu **Proprietà** a destra.
1. Per **Connector**, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.
1. Per **Configurazione**, inserisci il seguente testo, sostituendolo *bucket\$1name* con il bucket che hai creato nei prerequisiti:
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**Nota**
È possibile utilizzare il `Prefix` campo per limitare la risposta agli oggetti che iniziano con la stringa specificata.
1. L'output di questa automazione verrà utilizzato per popolare un componente di tabella con oggetti del tuo bucket Amazon S3. Tuttavia, per impostazione predefinita, le automazioni non creano output. Configura l'automazione per creare un output di automazione eseguendo i seguenti passaggi:
1. Nella barra di navigazione a sinistra, scegli l'automazione **GetFiles**.
1. **Nel menu **Proprietà** a destra, in **Automation output, scegli \$1 Aggiungi output**.**
1. Per **Output**, immettete**\$1\$1results.ListObjects1.Contents\$1\$1**. Questa espressione restituisce il contenuto dell'azione e ora può essere utilizzata per popolare un componente della tabella.
### Crea un'automazione `deleteFile`
Crea un'automazione che elimini un oggetto da un bucket Amazon S3 specificato.
1. **Nel pannello **Automazioni** a sinistra, scegli \$1 Aggiungi.**
1. Scegli **\$1 Aggiungi automazione**.
1. Nel pannello di destra, scegli **Proprietà**.
1. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci **deleteFile** e premi **Invio**.
1. Aggiungi un parametro di automazione, utilizzato per passare dati a un'automazione, eseguendo i seguenti passaggi:
1. Nel menu **Proprietà** a destra, in **Parametri di automazione**, scegli **\$1 Aggiungi**.
1. Scegli l'icona a forma di matita per modificare il parametro di automazione. Aggiorna il nome del parametro **fileName** e premi **Invio**.
1. Aggiungere un'azione **Elimina oggetto** effettuando le seguenti operazioni:
1. Nel pannello di destra, scegli **Azioni**.
1. Scegli **Elimina oggetto** per aggiungere un'azione. L'azione deve avere un nome`DeleteObject1`.
1. Configura l'azione eseguendo i seguenti passaggi:
1. Scegli l'azione dall'area di disegno per aprire il menu **Proprietà** a destra.
1. Per **Connector**, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.
1. Per **Configurazione**, inserisci il seguente testo, sostituendolo *bucket\$1name* con il bucket che hai creato nei prerequisiti:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Crea un'automazione `viewFile`
Crea un'automazione che recuperi un singolo oggetto da un bucket Amazon S3 specificato. Successivamente, configurerai questa automazione con un componente di visualizzazione di file per visualizzare l'oggetto.
1. **Nel pannello **Automazioni** a sinistra, scegli \$1 Aggiungi.**
1. Scegli **\$1 Aggiungi automazione**.
1. Nel pannello di destra, scegli **Proprietà**.
1. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci **viewFile** e premi **Invio**.
1. Aggiungi un parametro di automazione, utilizzato per passare dati a un'automazione, eseguendo i seguenti passaggi:
1. Nel menu **Proprietà** a destra, in **Parametri di automazione**, scegli **\$1 Aggiungi**.
1. Scegli l'icona a forma di matita per modificare il parametro di automazione. Aggiorna il nome del parametro **fileName** e premi **Invio**.
1. Aggiungete un'azione **Ottieni oggetto** effettuando le seguenti operazioni:
1. Nel pannello di destra, scegli **Azioni**.
1. Scegli **Ottieni oggetto** per aggiungere un'azione. L'azione deve avere un nome`GetObject1`.
1. Configura l'azione eseguendo i seguenti passaggi:
1. Scegli l'azione dall'area di disegno per aprire il menu **Proprietà** a destra.
1. Per **Connector**, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.
1. Per **Configurazione**, inserisci il seguente testo, sostituendolo *bucket\$1name* con il bucket che hai creato nei prerequisiti:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. Per impostazione predefinita, le automazioni non creano output. Configura l'automazione per creare un output di automazione eseguendo i seguenti passaggi:
1. Nella navigazione a sinistra, scegli l'automazione **ViewFile**.
1. **Nel menu **Proprietà** a destra, in Output di **automazione, scegli \$1 Aggiungi output**.**
1. Per **Output**, immettete**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. Questa espressione restituisce il contenuto dell'azione.
**Nota**
È possibile leggere la risposta di `S3 GetObject` nei seguenti modi:
`transformToWebStream`: restituisce uno stream, che deve essere consumato per recuperare i dati. Se utilizzato come output di automazione, l'automazione lo gestisce e l'output può essere utilizzato come fonte di dati di un componente di visualizzazione di immagini o PDF. Può anche essere usato come input per un'altra operazione, ad esempio`S3 PutObject`.
`transformToString`: restituisce i dati grezzi dell'automazione e deve essere utilizzato in un' JavaScript azione se i file contengono contenuto di testo, ad esempio dati JSON. Deve essere atteso, ad esempio: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: restituisce un array di numeri interi senza segno a 8 bit. Questa risposta serve allo scopo di un array di byte, che consente l'archiviazione e la manipolazione di dati binari. Deve essere atteso, ad esempio: `await results.GetObject1.Body.transformToByteArray();`
Successivamente, aggiungerai componenti alle pagine che hai creato in precedenza e li configurerai con le tue automazioni in modo che gli utenti possano utilizzare la tua app per visualizzare ed eliminare file.
## Aggiungi e configura i componenti della pagina
Ora che hai creato le automazioni che definiscono la logica di business e la funzionalità della tua app, potrai creare componenti e connetterli entrambi.
### Aggiungi componenti alla pagina **FileList**
La **FileList**pagina creata in precedenza verrà utilizzata per visualizzare un elenco di file nel bucket Amazon S3 configurato e ulteriori dettagli su qualsiasi file scelto dall'elenco. Per farlo, dovrai fare quanto segue:
1. Create un componente di tabella per visualizzare l'elenco dei file. Configurerai le righe della tabella da riempire con l'output dell'automazione **GetFiles** che hai creato in precedenza.
1. Crea un componente di visualizzazione PDF per visualizzare un singolo PDF. Configurerai il componente per visualizzare un file selezionato dalla tabella, utilizzando l'automazione **ViewFile** che hai creato in precedenza per recuperare il file dal tuo bucket.
**Per aggiungere componenti alla pagina **FileList****
1. Scegli la scheda **Pagine** nella parte superiore dell'area di disegno.
1. Nel pannello **Pagine** a sinistra, scegli la **FileList**pagina.
1. Nella pagina **Componenti** a destra, trova il componente **Tabella** e trascinalo al centro dell'area di disegno.
1. Scegli il componente della tabella che hai appena aggiunto alla pagina.
1. **Nel menu **Proprietà** a destra, scegli il menu a discesa **Sorgente** e seleziona Automazione.**
1. **Scegli il menu a discesa **Automazione** e seleziona l'automazione GetFiles.** La tabella utilizzerà l'output dell'automazione **GetFiles** come contenuto.
1. Aggiungi una colonna da riempire con il nome del file.
1. Nel menu **Proprietà** a destra, accanto a **Colonne**, scegli **\$1 Aggiungi**.
1. Scegli l'icona a forma di freccia a destra della **colonna Colonna1** che è stata appena aggiunta.
1. Per l'**etichetta Column**, rinomina la colonna in. **Filename**
1. In **Valore**, specifica **\$1\$1currentRow.Key\$1\$1**.
1. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello **Proprietà** principale.
1. Aggiungete un'azione di tabella per eliminare il file in una riga.
1. Nel menu **Proprietà** a destra, accanto ad **Azioni**, scegli **\$1 Aggiungi**.
1. In **Azioni**, rinomina **Button** in. **Delete**
1. Scegli l'icona a forma di freccia a destra dell'azione **Elimina** che è stata appena rinominata.
1. In **Un clic**, scegli **\$1 Aggiungi azione** e scegli **Invoke automation**.
1. Scegli l'azione che è stata aggiunta per configurarla.
1. Per **Nome azione** immetti **DeleteRecord**.
1. In **Invoke automation**, seleziona**deleteFile**.
1. Nella casella di testo del parametro, immettete**\$1\$1currentRow.Key\$1\$1**.
1. In **Valore**, specifica **\$1\$1currentRow.Key\$1\$1**.
1. Nel pannello di destra, scegliete **Componenti** per visualizzare il menu dei componenti. Sono disponibili due opzioni per visualizzare i file:
+ Un **visualizzatore di immagini** per visualizzare file con `.jpg` estensione `.png``.jpeg`, o.
+ Un componente di **visualizzazione PDF** per visualizzare i file PDF.
In questo tutorial, aggiungerai e configurerai il componente di **visualizzazione PDF**.
1. Aggiungi il componente **visualizzatore PDF**.
1. Nella pagina **Componenti** a destra, trova il componente del **visualizzatore PDF** e trascinalo nell'area di disegno, sotto il componente della tabella.
1. Scegli il componente di **visualizzazione PDF** che è stato appena aggiunto.
1. **Nel menu **Proprietà** a destra, scegli il menu a discesa **Sorgente** e seleziona Automazione.**
1. **Scegli il menu a discesa **Automazione** e seleziona l'automazione ViewFile.** La tabella utilizzerà l'output dell'automazione **ViewFile** come contenuto.
1. Nella casella di testo del parametro, immettete**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. Nel pannello di destra, c'è anche un campo **Nome file**. Il valore di questo campo viene utilizzato come intestazione per il componente di visualizzazione PDF. Inserisci lo stesso testo del passaggio precedente:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### Aggiungi componenti alla **UploadFile**pagina
La **UploadFile**pagina conterrà un selettore di file che può essere utilizzato per selezionare e caricare un file nel bucket Amazon S3 configurato. Aggiungerai il componente di **caricamento S3** alla pagina, che gli utenti possono utilizzare per selezionare e caricare un file.
1. Nel pannello **Pagine** a sinistra, scegli la pagina. **UploadFile**
1. Nella pagina **Componenti** a destra, trova il componente di **caricamento S3** e trascinalo al centro dell'area di disegno.
1. Scegli il componente di caricamento S3 che hai appena aggiunto alla pagina.
1. Nel menu **Proprietà** a destra, configura il componente:
1. Nel menu a discesa **Connettore**, seleziona il connettore Amazon S3 creato nei prerequisiti.
1. Per **Bucket**, inserisci il nome del tuo bucket Amazon S3.
1. Per **Nome file**, inserisci. **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**
1. Per **Dimensione massima del file**, inseriscilo **5** nella casella di testo e assicurati che **MB** sia selezionato nel menu a discesa.
1. Nella sezione **Trigger**, aggiungi le azioni che vengono eseguite dopo caricamenti riusciti o non riusciti eseguendo i seguenti passaggi:
Per aggiungere un'azione che viene eseguita dopo un caricamento riuscito:
1. **In caso di successo**, scegli **\$1 Aggiungi azione** e seleziona **Naviga**.
1. Scegli l'azione che è stata aggiunta per configurarla.
1. Per **Tipo di navigazione**, scegli **Pagina**.
1. Per **Naviga verso**, scegli**FileList**.
1. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello principale **Proprietà**.
Per aggiungere un'azione che viene eseguita dopo caricamenti non riusciti:
1. **In **caso di errore**, scegli **\$1 Aggiungi azione** e seleziona Naviga.**
1. Scegli l'azione che è stata aggiunta per configurarla.
1. Per **Tipo di navigazione**, scegli **Pagina**.
1. Per **Naviga verso**, scegli**FailUpload**.
1. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello principale **Proprietà**.
### Aggiungi componenti alla **FailUpload**pagina
La **FailUpload**pagina è una pagina semplice contenente una casella di testo che informa gli utenti che il caricamento non è riuscito.
1. Nel pannello **Pagine** a sinistra, scegli la pagina. **FailUpload**
1. Nella pagina **Componenti** a destra, trova il componente **Testo** e trascinalo al centro dell'area di disegno.
1. Scegli il componente di testo che hai appena aggiunto alla pagina.
1. Nel menu **Proprietà** a destra, in **Valore**, immettete**Failed to upload, try again**.
## Aggiorna le impostazioni di sicurezza dell'app
Ogni applicazione in App Studio dispone di impostazioni di sicurezza dei contenuti che puoi utilizzare per limitare contenuti o risorse esterne o su quali domini di Amazon S3 puoi caricare oggetti. L'impostazione predefinita prevede il blocco di tutti i domini. Per caricare oggetti su Amazon S3 dalla tua applicazione, devi aggiornare l'impostazione per consentire ai domini su cui desideri caricare oggetti.
**Per consentire ai domini di caricare oggetti su Amazon S3**
1. Scegli la scheda Impostazioni dell'**app**.
1. Scegli la scheda **Impostazioni di sicurezza dei contenuti**.
1. Per **Connect source**, scegli **Consenti tutte le connessioni**.
1. Scegli **Save** (Salva).
## Passaggi successivi: visualizza in anteprima e pubblica l'applicazione per il test
L'applicazione è ora pronta per il test. Per ulteriori informazioni sull'anteprima e la pubblicazione delle applicazioni, consulta[Visualizzazione in anteprima, pubblicazione e condivisione delle applicazioni](applications-preview-publish-share.md).
# Richiamo delle funzioni Lambda in un'app App Studio
Questo tutorial mostra come connettere App Studio a Lambda e richiamare le funzioni Lambda dalle tue app.
## Prerequisiti
Questa guida presuppone che tu abbia soddisfatto i seguenti prerequisiti:
1. Hai creato un'app App Studio. Se non ne hai una, puoi creare un'app vuota da utilizzare nel tutorial. Per ulteriori informazioni, consulta [Creazione di un’applicazione](applications-create.md).
**Nota**
Sebbene non sia necessaria una funzione Lambda per seguire questo tutorial e imparare a configurarla, può essere utile averne una per assicurarsi di aver configurato correttamente l'app. [Questo tutorial non contiene informazioni sulla creazione di funzioni Lambda. Per ulteriori informazioni, consulta la Guida per gli AWS Lambda sviluppatori.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Creare un connettore Lambda
Per utilizzare le funzioni Lambda nella tua app App Studio, devi utilizzare un connettore per connettere App Studio a Lambda e fornire l'accesso alle tue funzioni. Devi essere un amministratore per creare connettori in App Studio. Per ulteriori informazioni sulla creazione di connettori Lambda, inclusi i passaggi per crearne uno, vedere. [Connect a AWS Lambda](connectors-lambda.md)
## Creare e configurare un'automazione
Le automazioni vengono utilizzate per definire la logica dell'applicazione e sono costituite da azioni. Per richiamare una funzione Lambda nella tua app, devi prima aggiungere e configurare un'azione *Invoke Lambda* a un'automazione. Utilizza i passaggi seguenti per creare un'automazione e aggiungervi l'azione *Invoke Lambda*.
1. Durante la modifica dell'app, scegli la scheda **Automazioni**.
1. Scegli **\$1 Aggiungi automazione**.
1. Nel menu **Azioni** a destra, scegli **Invoke Lambda** per aggiungere il passaggio all'automazione.
1. Scegli il nuovo passaggio Lambda nell'area di disegno per visualizzarne e configurarne le proprietà.
1. Nel menu **Proprietà** a destra, configura il passaggio eseguendo i seguenti passaggi:
1. In **Connector**, seleziona il connettore creato per connettere App Studio alle tue funzioni Lambda.
1. In **Nome funzione**, inserisci il nome della tua funzione Lambda.
1. In **Evento funzione**, inserisci l'evento da passare alla funzione Lambda. Nell'elenco seguente sono riportati alcuni esempi di casi d'uso comuni:
+ Passare il valore di un parametro di automazione, ad esempio un nome di file o un'altra stringa: `varName: params.paramName`
+ Trasmissione del risultato di un'azione precedente: `varName: results.actionName1.data[0].fieldName`
+ *Se aggiungi un'azione *Invoke Lambda* all'interno di un'azione Loop, puoi inviare campi da ogni elemento iterato simili ai parametri:* `varName: currentItem.fieldName`
1. Il campo **Mocked output** può essere utilizzato per fornire un output fittizio per testare l'app durante l'anteprima, dove i connettori non sono attivi.
## Configura un elemento dell'interfaccia utente per eseguire l'automazione
Ora che hai un'automazione configurata con un'azione per richiamare la funzione Lambda, puoi configurare un elemento dell'interfaccia utente per eseguire l'automazione. In questo tutorial, creerai un pulsante che esegue l'automazione quando viene premuto.
**Suggerimento**
Puoi anche eseguire automazioni da altre automazioni con l'azione *Invoke* automation.
**Per eseguire l'automazione da un pulsante**
1. Durante la modifica dell'app, scegli la scheda **Pagine**.
1. Nel menu a destra, scegli il componente **Button** per aggiungere un pulsante alla pagina.
1. Scegli il nuovo pulsante per configurarlo.
1. Nel menu **Proprietà** a destra, in **Trigger**, scegli **\$1 Aggiungi** e scegli **Invoke** automation.
1. Scegli il nuovo trigger di richiamo dell'automazione per configurarlo.
1. In **Invoke automation**, seleziona l'automazione che richiama la tua funzione Lambda e configura tutti i parametri che desideri inviare all'automazione.
Ora, qualsiasi utente che sceglie questo pulsante nell'app provocherà l'esecuzione dell'automazione configurata.
## Passaggi successivi: visualizza in anteprima e pubblica l'applicazione per il test
L'applicazione è ora pronta per il test. Quando si visualizza l'anteprima dell'app nell'ambiente di sviluppo, i connettori non sono attivi, quindi non è possibile testare l'automazione durante l'anteprima poiché utilizza un connettore a cui connettersi. AWS Lambda Per testare la funzionalità dell'app che dipende dai connettori, devi pubblicare l'app nell'ambiente di test. Per ulteriori informazioni sull'anteprima e la pubblicazione delle applicazioni, consulta[Visualizzazione in anteprima, pubblicazione e condivisione delle applicazioni](applications-preview-publish-share.md).