Interaktion mit Amazon Simple Storage Service mit Komponenten und Automatisierungen

Um eine leere Anwendung zu erstellen

1. Wählen Sie im Navigationsbereich Meine Anwendungen aus.

2. Wählen Sie + App erstellen.

3. Geben Sie Ihrer Anwendung im Dialogfeld „App erstellen“ einen Namen, wählen Sie „Von vorne beginnen“ und dann „Weiter“.

4. Wählen Sie im Dialogfeld „Mit vorhandenen Daten verbinden“ die Option „Überspringen“, um die Anwendung zu erstellen.

5. Wählen Sie App bearbeiten, um zur Arbeitsfläche Ihrer neuen App zu gelangen, wo Sie Komponenten, Automatisierungen und Daten verwenden können, um das Aussehen und die Funktion Ihrer Anwendung zu konfigurieren.

Um Seiten zu erstellen

1. Wählen Sie bei Bedarf oben auf der Arbeitsfläche den Tab Seiten aus.

2. In der linken Navigationsleiste befindet sich eine einzelne Seite, die mit Ihrer App erstellt wurde. Wähle + Zweimal hinzufügen, um zwei weitere Seiten zu erstellen. Im Navigationsbereich sollten insgesamt drei Seiten angezeigt werden.

3. Aktualisieren Sie den Namen der Seite Page1, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie das Ellipsensymbol und dann Seiteneigenschaften aus.

   2. Wählen Sie im Eigenschaftenmenü auf der rechten Seite das Stiftsymbol, um den Namen zu bearbeiten.

   3. Geben Sie ein FileList und drücken Sie die Eingabetaste.

4. Wiederholen Sie die vorherigen Schritte, um die zweite und dritte Seite wie folgt zu aktualisieren:

   • Benennen Sie Seite 2 um in. UploadFile

   • Benennen Sie Page3 um in. FailUpload

1. Wählen Sie oben auf der Arbeitsfläche die Registerkarte Automatisierungen aus.

2. Wähle + Automatisierung hinzufügen.

3. Wählen Sie im rechten Bereich „Eigenschaften“.

4. Aktualisieren Sie den Namen der Automatisierung, indem Sie auf das Stiftsymbol klicken. Geben Sie ein getFiles und drücken Sie die Eingabetaste.

5. Fügen Sie eine Aktion „Objekte auflisten“ hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich Aktionen aus.

   2. Wählen Sie „Objekte auflisten“, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werdenListObjects1.

6. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das Eigenschaftenmenü auf der rechten Seite zu öffnen.

   2. Wählen Sie für Connector den Amazon S3-Connector aus, den Sie anhand der Voraussetzungen erstellt haben.

   3. Geben Sie für Konfiguration den folgenden Text ein und bucket_name ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

      {
        "Bucket": "bucket_name",
        "Prefix": ""
      }

      Anmerkung

      Sie können das Prefix Feld verwenden, um die Antwort auf Objekte zu beschränken, die mit der angegebenen Zeichenfolge beginnen.

7. Die Ausgabe dieser Automatisierung wird verwendet, um eine Tabellenkomponente mit Objekten aus Ihrem Amazon S3-Bucket zu füllen. Standardmäßig erstellen Automatisierungen jedoch keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass eine Automatisierungsausgabe erstellt wird, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie in der linken Navigationsleiste die GetFiles-Automatisierung aus.

   2. Wählen Sie im Eigenschaftenmenü auf der rechten Seite unter Automationsausgabe die Option + Ausgabe hinzufügen.

   3. Geben {{results.ListObjects1.Contents}} Sie für Ausgabe den Wert ein. Dieser Ausdruck gibt den Inhalt der Aktion zurück und kann jetzt zum Füllen einer Tabellenkomponente verwendet werden.

1. Wählen Sie im linken Bereich „Automatisierungen“ die Option + Hinzufügen.

2. Wähle + Automatisierung hinzufügen.

3. Wählen Sie im rechten Bereich „Eigenschaften“.

4. Aktualisieren Sie den Namen der Automatisierung, indem Sie auf das Stiftsymbol klicken. Geben Sie ein deleteFile und drücken Sie die Eingabetaste.

5. Fügen Sie einen Automatisierungsparameter hinzu, der verwendet wird, um Daten an eine Automatisierung zu übergeben, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Eigenschaftenmenü unter Automatisierungsparameter die Option + Hinzufügen.

   2. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf fileName und drücken Sie die Eingabetaste.

6. Fügen Sie eine Aktion „Objekt löschen“ hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich Aktionen aus.

   2. Wählen Sie Objekt löschen, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werdenDeleteObject1.

7. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das Eigenschaftenmenü auf der rechten Seite zu öffnen.

   2. Wählen Sie für Connector den Amazon S3-Connector aus, den Sie anhand der Voraussetzungen erstellt haben.

   3. Geben Sie für Konfiguration den folgenden Text ein und bucket_name ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

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

1. Wählen Sie im linken Bereich „Automatisierungen“ die Option + Hinzufügen.

2. Wähle + Automatisierung hinzufügen.

3. Wählen Sie im rechten Bereich „Eigenschaften“.

4. Aktualisieren Sie den Namen der Automatisierung, indem Sie auf das Stiftsymbol klicken. Geben Sie ein viewFile und drücken Sie die Eingabetaste.

5. Fügen Sie einen Automatisierungsparameter hinzu, der verwendet wird, um Daten an eine Automatisierung zu übergeben, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Eigenschaftenmenü unter Automatisierungsparameter die Option + Hinzufügen.

   2. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf fileName und drücken Sie die Eingabetaste.

6. Fügen Sie eine Aktion „Objekt abrufen“ hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich Aktionen aus.

   2. Wählen Sie Objekt abrufen, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werdenGetObject1.

7. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das Eigenschaftenmenü auf der rechten Seite zu öffnen.

   2. Wählen Sie für Connector den Amazon S3-Connector aus, den Sie anhand der Voraussetzungen erstellt haben.

   3. Geben Sie für Konfiguration den folgenden Text ein und bucket_name ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

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

8. Standardmäßig erstellen Automatisierungen keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass eine Automatisierungsausgabe erstellt wird, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie in der linken Navigationsleiste die ViewFile-Automatisierung aus.

   2. Wählen Sie im rechten Eigenschaftenmenü unter Automationsausgabe die Option + Ausgabe hinzufügen.

   3. Geben {{results.GetObject1.Body.transformToWebStream()}} Sie für Ausgabe den Wert ein. Dieser Ausdruck gibt den Inhalt der Aktion zurück.

      Anmerkung

      Sie können die Antwort von auf folgende S3 GetObject Weise lesen:

      • transformToWebStream: Gibt einen Stream zurück, der verbraucht werden muss, um die Daten abzurufen. Wenn die Ausgabe als Automatisierungsausgabe verwendet wird, kümmert sich die Automatisierung darum, und die Ausgabe kann als Datenquelle einer Bild- oder PDF-Viewer-Komponente verwendet werden. Es kann auch als Eingabe für eine andere Operation verwendet werden, z. S3 PutObject B.

      • transformToString: Gibt die Rohdaten der Automatisierung zurück und sollte in einer JavaScript Aktion verwendet werden, wenn Ihre Dateien Textinhalte wie JSON-Daten enthalten. Muss abgewartet werden, zum Beispiel: await results.GetObject1.Body.transformToString();

      • transformToByteArray: Gibt ein Array von 8-Bit-Ganzzahlen ohne Vorzeichen zurück. Diese Antwort dient dem Zweck eines Byte-Arrays, das das Speichern und Bearbeiten von Binärdaten ermöglicht. Muss abgewartet werden, zum Beispiel: await results.GetObject1.Body.transformToByteArray();

Um Komponenten zum hinzuzufügen FileList angezeigten

1. Wählen Sie oben auf der Leinwand den Tab Seiten.

2. Wählen Sie im linken Seitenbereich die FileList Seite aus.

3. Suchen Sie auf der rechten Seite „Komponenten“ die Komponente „Tabelle“ und ziehen Sie sie in die Mitte der Arbeitsfläche.

4. Wählen Sie die Tabellenkomponente aus, die Sie gerade zur Seite hinzugefügt haben.

5. Wählen Sie im Eigenschaftenmenü auf der rechten Seite das Dropdownmenü Quelle und dann Automatisierung aus.

6. Wählen Sie das Drop-down-Menü Automatisierung und dann die GetFiles-Automatisierung aus. Die Tabelle verwendet die Ausgabe der GetFiles-Automatisierung als Inhalt.

7. Fügen Sie eine Spalte hinzu, die mit dem Namen der Datei gefüllt werden soll.

   1. Wählen Sie im Eigenschaftenmenü auf der rechten Seite neben Spalten die Option + Hinzufügen.

   2. Wählen Sie das Pfeilsymbol rechts neben der Spalte Column1, die gerade hinzugefügt wurde.

   3. Benennen Sie die Spalte für die Spaltenbezeichnung in um. Filename

   4. Geben Sie für Wert {{currentRow.Key}} ein.

   5. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptbereich „Eigenschaften“ zurückzukehren.

8. Fügen Sie eine Tabellenaktion hinzu, um die Datei nacheinander zu löschen.

   1. Wählen Sie im Eigenschaftenmenü auf der rechten Seite neben Aktionen die Option + Hinzufügen.

   2. Benennen Sie unter Aktionen die Schaltfläche in umDelete.

   3. Wählen Sie das Pfeilsymbol rechts neben der Aktion Löschen, die gerade umbenannt wurde.

   4. Wählen Sie unter Bei Klick die Option + Aktion hinzufügen und dann Automatisierung aufrufen aus.

   5. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

   6. Für Aktionsname geben Sie DeleteRecord ein.

   7. Wählen Sie unter Automatisierung aufrufen die Option ausdeleteFile.

   8. Geben {{currentRow.Key}} Sie in das Parameter-Textfeld ein.

   9. Geben Sie für Wert {{currentRow.Key}} ein.

9. Wählen Sie im rechten Bereich Komponenten, um das Komponentenmenü anzuzeigen. Es gibt zwei Möglichkeiten, Dateien anzuzeigen:

   • Ein Bildbetrachter zum Anzeigen von Dateien mit der .jpg Erweiterung .png.jpeg,, oder.

   • Eine PDF-Viewer-Komponente zum Anzeigen von PDF-Dateien.

   In diesem Tutorial fügen Sie die PDF-Viewer-Komponente hinzu und konfigurieren sie.

10. Fügen Sie die PDF-Viewer-Komponente hinzu.

    1. Suchen Sie auf der rechten Komponentenseite nach der PDF-Viewer-Komponente und ziehen Sie sie auf die Arbeitsfläche unter der Tabellenkomponente.

    2. Wählen Sie die gerade hinzugefügte PDF-Viewer-Komponente aus.

    3. Wählen Sie im Eigenschaftenmenü auf der rechten Seite das Dropdownmenü Quelle und dann Automatisierung aus.

    4. Wählen Sie das Drop-down-Menü Automatisierung und wählen Sie die ViewFile-Automatisierung aus. Die Tabelle verwendet die Ausgabe der ViewFile-Automatisierung als Inhalt.

    5. Geben {{ui.table1.selectedRow["Filename"]}} Sie in das Parametertextfeld ein.

    6. Im rechten Bereich befindet sich auch ein Feld für den Dateinamen. Der Wert dieses Felds wird als Header für die PDF-Viewer-Komponente verwendet. Geben Sie den gleichen Text wie im vorherigen Schritt ein:{{ui.table1.selectedRow["Filename"]}}.

1. Wählen Sie im linken Seitenbereich die UploadFile Seite aus.

2. Suchen Sie auf der rechten Seite „Komponenten“ nach der S3-Upload-Komponente und ziehen Sie sie in die Mitte der Arbeitsfläche.

3. Wählen Sie die S3-Upload-Komponente aus, die Sie gerade zur Seite hinzugefügt haben.

4. Konfigurieren Sie im Eigenschaftenmenü auf der rechten Seite die Komponente:

   1. Wählen Sie in der Dropdownliste Connector den Amazon S3-Connector aus, der unter den Voraussetzungen erstellt wurde.

   2. Geben Sie für Bucket den Namen Ihres Amazon S3-Buckets ein.

   3. Geben Sie als Dateiname ein{{ui.s3Upload1.files[0]?.nameWithExtension}}.

   4. Geben Sie für Max file size den Wert 5 in das Textfeld ein, und stellen Sie sicher, dass dieser MB Wert in der Dropdownliste ausgewählt ist.

   5. Fügen Sie im Abschnitt Auslöser Aktionen hinzu, die nach erfolgreichen oder erfolglosen Uploads ausgeführt werden, indem Sie die folgenden Schritte ausführen:

      So fügst du eine Aktion hinzu, die nach erfolgreichen Uploads ausgeführt wird:

      1. Wählen Sie unter Bei Erfolg die Option + Aktion hinzufügen und dann Navigieren aus.

      2. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

      3. Wählen Sie als Navigationstyp die Option Seite aus.

      4. Wählen Sie für Navigieren zu FileList.

      5. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptbereich „Eigenschaften“ zurückzukehren.

      Um eine Aktion hinzuzufügen, die nach erfolglosen Uploads ausgeführt wird:

      1. Wählen Sie unter Bei einem Fehler die Option + Aktion hinzufügen und dann Navigieren aus.

      2. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

      3. Wählen Sie als Navigationstyp die Option Seite aus.

      4. Wählen Sie für Navigieren zu FailUpload.

      5. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptbereich „Eigenschaften“ zurückzukehren.

1. Wählen Sie im linken Seitenbereich die FailUpload Seite aus.

2. Suchen Sie auf der rechten Seite mit den Komponenten nach der Textkomponente und ziehen Sie sie in die Mitte der Arbeitsfläche.

3. Wählen Sie die Textkomponente aus, die Sie gerade zur Seite hinzugefügt haben.

4. Geben Sie im Eigenschaftenmenü auf der rechten Seite im Feld Failed to upload, try again Wert den Wert ein.

Um Domänen das Hochladen von Objekten auf Amazon S3 zuzulassen

1. Wählen Sie den Tab App-Einstellungen.

2. Wählen Sie den Tab Content Security Settings.

3. Wählen Sie für Verbindungsquelle die Option Alle Verbindungen zulassen aus.

4. Wählen Sie Speichern.