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à.
# 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).