Interazione con Amazon Simple Storage Service con componenti e automazioni

Per creare un'applicazione vuota

1. Nel riquadro di navigazione, scegli Le mie applicazioni.

2. Scegli + Crea app.

3. Nella finestra di dialogo Crea app, dai un nome all'applicazione, scegli Inizia da zero e scegli Avanti.

4. Nella finestra di dialogo Connetti a dati esistenti, scegli Ignora per creare l'applicazione.

5. Scegliete Modifica app per accedere all'area di disegno della nuova app, dove potete utilizzare componenti, automazioni e dati per configurare l'aspetto e il funzionamento dell'applicazione.

Per creare pagine

1. Se necessario, scegli la scheda Pagine nella parte superiore dell'area di disegno.

2. Nella barra di navigazione a sinistra, c'è una sola pagina creata con la tua app. Scegli + Aggiungi due volte per creare altre due pagine. Il pannello di navigazione dovrebbe mostrare tre pagine totali.

3. Aggiorna il nome della pagina Page1 effettuando le seguenti operazioni:

   1. Scegliete l'icona con i puntini di sospensione e scegliete Proprietà della pagina.

   2. Nel menu Proprietà a destra, scegli l'icona a forma di matita per modificare il nome.

   3. Entra FileList e premi Invio.

4. Ripeti i passaggi precedenti per aggiornare la seconda e la terza pagina come segue:

   • Rinomina Page2 in. UploadFile

   • Rinomina Page3 in. FailUpload

1. Scegli la scheda Automazioni nella parte superiore dell'area di disegno.

2. Scegli + Aggiungi automazione.

3. Nel pannello a destra, scegli Proprietà.

4. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci getFiles e premi Invio.

5. Aggiungi un'azione Elenca oggetti eseguendo i passaggi seguenti:

   1. Nel pannello a destra, scegli Azioni.

   2. Scegli Elenca oggetti per aggiungere un'azione. L'azione deve avere un nomeListObjects1.

6. Configura l'azione eseguendo i passaggi seguenti:

   1. Scegliete l'azione dall'area di disegno per aprire il menu Proprietà sulla destra.

   2. Per Connector, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.

   3. Per la configurazione, inserisci il testo seguente, sostituendolo bucket_name 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.

7. L'output di questa automazione verrà utilizzato per popolare un componente della 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.

   2. Nel menu Proprietà a destra, in Output di automazione, scegli + Aggiungi output.

   3. Per Output, inserisci{{results.ListObjects1.Contents}}. Questa espressione restituisce il contenuto dell'azione e può ora essere utilizzata per popolare un componente della tabella.

1. Nel pannello Automazioni a sinistra, scegli + Aggiungi.

2. Scegli + Aggiungi automazione.

3. Nel pannello a destra, scegli Proprietà.

4. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci deleteFile e premi Invio.

5. Aggiungi un parametro di automazione, utilizzato per passare i dati a un'automazione, eseguendo i passaggi seguenti:

   1. Nel menu Proprietà a destra, in Parametri di automazione, scegli + Aggiungi.

   2. Scegli l'icona a forma di matita per modificare il parametro di automazione. Aggiorna il nome del parametro fileName e premi Invio.

6. Aggiungete un'azione Elimina oggetto effettuando le seguenti operazioni:

   1. Nel pannello a destra, scegli Azioni.

   2. Scegli Elimina oggetto per aggiungere un'azione. L'azione deve avere un nomeDeleteObject1.

7. Configura l'azione eseguendo i passaggi seguenti:

   1. Scegliete l'azione dall'area di disegno per aprire il menu Proprietà sulla destra.

   2. Per Connector, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.

   3. Per la configurazione, inserisci il testo seguente, sostituendolo bucket_name con il bucket che hai creato nei prerequisiti:

      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }

1. Nel pannello Automazioni a sinistra, scegli + Aggiungi.

2. Scegli + Aggiungi automazione.

3. Nel pannello a destra, scegli Proprietà.

4. Aggiorna il nome dell'automazione scegliendo l'icona a forma di matita. Inserisci viewFile e premi Invio.

5. Aggiungi un parametro di automazione, utilizzato per passare i dati a un'automazione, eseguendo i passaggi seguenti:

   1. Nel menu Proprietà a destra, in Parametri di automazione, scegli + Aggiungi.

   2. Scegli l'icona a forma di matita per modificare il parametro di automazione. Aggiorna il nome del parametro fileName e premi Invio.

6. Aggiungete un'azione Ottieni oggetto effettuando le seguenti operazioni:

   1. Nel pannello a destra, scegli Azioni.

   2. Scegli Ottieni oggetto per aggiungere un'azione. L'azione deve avere un nomeGetObject1.

7. Configura l'azione eseguendo i passaggi seguenti:

   1. Scegliete l'azione dall'area di disegno per aprire il menu Proprietà sulla destra.

   2. Per Connector, scegli il connettore Amazon S3 che hai creato tra i prerequisiti.

   3. Per la configurazione, inserisci il testo seguente, sostituendolo bucket_name con il bucket che hai creato nei prerequisiti:

      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }

8. 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 ViewFile.

   2. Nel menu Proprietà a destra, in Output di automazione, scegli + Aggiungi output.

   3. Per Output, inserisci{{results.GetObject1.Body.transformToWebStream()}}. 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 origine dati di un componente di visualizzazione di immagini o PDF. Può essere utilizzato anche come input per un'altra operazione, ad esempioS3 PutObject.

      • transformToString: restituisce i dati grezzi dell'automazione e deve essere utilizzato in un' JavaScript azione se i file contengono contenuti 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 ha lo 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();

Per aggiungere componenti a FileList page

1. Scegli la scheda Pagine nella parte superiore dell'area di disegno.

2. Nel pannello Pagine a sinistra, scegli la FileList pagina.

3. Nella pagina Componenti a destra, trova il componente Tabella e trascinalo al centro dell'area di disegno.

4. Scegli il componente della tabella che hai appena aggiunto alla pagina.

5. Nel menu Proprietà a destra, scegli il menu a discesa Sorgente e seleziona Automazione.

6. Scegli il menu a discesa Automazione e seleziona l'automazione GetFiles. La tabella utilizzerà l'output dell'automazione GetFiles come contenuto.

7. Aggiungi una colonna da riempire con il nome del file.

   1. Nel menu Proprietà a destra, accanto a Colonne, scegli + Aggiungi.

   2. Scegli l'icona a forma di freccia a destra della colonna Column1 che è stata appena aggiunta.

   3. Per Etichetta colonna, rinomina la colonna in. Filename

   4. In Valore, specifica {{currentRow.Key}}.

   5. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello principale delle Proprietà.

8. Aggiungete un'azione nella tabella per eliminare il file in una riga.

   1. Nel menu Proprietà a destra, accanto ad Azioni, scegli + Aggiungi.

   2. In Azioni, rinomina Button in. Delete

   3. Scegli l'icona a forma di freccia a destra dell'azione Elimina che è stata appena rinominata.

   4. In Con un clic, scegli + Aggiungi azione e scegli Invoca automazione.

   5. Scegli l'azione che è stata aggiunta per configurarla.

   6. Per Nome azione immetti DeleteRecord.

   7. In Invoke automation, selezionadeleteFile.

   8. Nella casella di testo del parametro, immettete{{currentRow.Key}}.

   9. In Valore, specifica {{currentRow.Key}}.

9. Nel pannello a destra, scegliete Componenti per visualizzare il menu dei componenti. Sono disponibili due opzioni per mostrare i file:

   • Un visualizzatore di immagini per visualizzare i 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.

10. 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.

    2. Scegli il componente di visualizzazione PDF che è stato appena aggiunto.

    3. Nel menu Proprietà a destra, scegli il menu a discesa Sorgente e seleziona Automazione.

    4. Scegli il menu a discesa Automazione e seleziona l'automazione ViewFile. La tabella utilizzerà l'output dell'automazione ViewFile come contenuto.

    5. Nella casella di testo del parametro, immettete{{ui.table1.selectedRow["Filename"]}}.

    6. 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:{{ui.table1.selectedRow["Filename"]}}.

1. Nel pannello Pagine a sinistra, scegli la pagina. UploadFile

2. Nella pagina Componenti a destra, trova il componente di caricamento S3 e trascinalo al centro dell'area di disegno.

3. Scegli il componente di caricamento S3 che hai appena aggiunto alla pagina.

4. Nel menu Proprietà a destra, configura il componente:

   1. Nel menu a discesa Connector, seleziona il connettore Amazon S3 creato nei prerequisiti.

   2. Per Bucket, inserisci il nome del tuo bucket Amazon S3.

   3. Per Nome file, inserisci. {{ui.s3Upload1.files[0]?.nameWithExtension}}

   4. Per Dimensione massima del file, inserisci 5 nella casella di testo e assicurati che MB sia selezionato nel menu a discesa.

   5. Nella sezione Trigger, aggiungi le azioni che vengono eseguite dopo i caricamenti riusciti o non riusciti eseguendo i seguenti passaggi:

      Per aggiungere un'azione che viene eseguita dopo il completamento dei caricamenti:

      1. In caso di successo, scegli + Aggiungi azione e seleziona Naviga.

      2. Scegli l'azione che è stata aggiunta per configurarla.

      3. Per Tipo di navigazione, scegli Pagina.

      4. Per Naviga verso, scegliFileList.

      5. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello principale delle Proprietà.

      Per aggiungere un'azione che viene eseguita dopo i caricamenti non riusciti:

      1. In caso di errore, scegli + Aggiungi azione e seleziona Naviga.

      2. Scegli l'azione che è stata aggiunta per configurarla.

      3. Per Tipo di navigazione, scegli Pagina.

      4. Per Naviga verso, scegliFailUpload.

      5. Scegliete l'icona a forma di freccia nella parte superiore del pannello per tornare al pannello principale delle Proprietà.

1. Nel pannello Pagine a sinistra, scegli la pagina. FailUpload

2. Nella pagina Componenti a destra, trova il componente Testo e trascinalo al centro dell'area di disegno.

3. Scegli il componente di testo che hai appena aggiunto alla pagina.

4. Nel menu Proprietà a destra, in Valore, inserisciFailed to upload, try again.

Per consentire ai domini di caricare oggetti su Amazon S3

1. Scegli la scheda Impostazioni dell'app.

2. Scegli la scheda Impostazioni di sicurezza dei contenuti.

3. Per Connect source, scegli Consenti tutte le connessioni.

4. Selezionare Salva.