Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
# Lernprogramme
**Topics**
+ [Erstellen Sie mit Amazon Bedrock eine KI-App zur Textzusammenfassung](tutorial-conversational-bedrock.md)
+ [Interaktion mit Amazon Simple Storage Service mit Komponenten und Automatisierungen](automations-s3.md)
+ [Lambda-Funktionen in einer App Studio-App aufrufen](tutorial-lambda.md)
# Erstellen Sie mit Amazon Bedrock eine KI-App zur Textzusammenfassung
In diesem Tutorial erstellen Sie eine Anwendung in App Studio, die Amazon Bedrock verwendet, um präzise Zusammenfassungen der Texteingaben von Endbenutzern bereitzustellen. Die Anwendung enthält eine einfache Benutzeroberfläche, über die Benutzer beliebigen Text eingeben können, den sie zusammenfassen möchten. Dies können Besprechungsnotizen, Artikelinhalte, Forschungsergebnisse oder andere Textinformationen sein. Nachdem Benutzer den Text eingegeben haben, können sie eine Taste drücken, um den Text an Amazon Bedrock zu senden. Amazon Bedrock verarbeitet ihn mit dem Modell Claude 3 Sonnet und sendet eine zusammengefasste Version zurück.
**Contents**
+ [Voraussetzungen](#tutorial-conversational-bedrock-prerequisites)
+ [Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Schritt 2: Erstellen Sie eine Anwendung](#tutorial-conversational-bedrock-steps-create-application)
+ [Schritt 3: Erstellen und konfigurieren Sie eine Automatisierung](#tutorial-conversational-bedrock-steps-create-automation)
+ [Schritt 4: Seiten und Komponenten erstellen](#tutorial-conversational-bedrock-steps-user-interface)
+ [Benennen Sie die Standardseite um](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Fügen Sie der Seite Komponenten hinzu](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Konfigurieren Sie die Seitenkomponenten](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Schritt 5: Veröffentlichen Sie die Anwendung in der **Testumgebung**](#tutorial-conversational-bedrock-steps-publish)
+ [(Optional) Bereinigen](#tutorial-conversational-bedrock-steps-cleanup)
## Voraussetzungen
Bevor Sie beginnen, sollten Sie die folgenden Voraussetzungen überprüfen und erfüllen:
+ Zugriff auf AWS App Studio. Beachten Sie, dass Sie in diesem Tutorial über die Administratorrolle verfügen müssen, um einen Connector zu erstellen.
+ Optional: Lesen [AWS App Studio-Konzepte](concepts.md) und dann[Tutorial: Beginne mit dem Erstellen von einer leeren App](getting-started-tutorial-empty.md), um sich mit wichtigen App Studio-Konzepten vertraut zu machen.
## Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector
Um App Studio Zugriff auf Amazon Bedrock-Modelle zu gewähren, müssen Sie:
1. Aktivieren Sie die Amazon Bedrock-Modelle, die Sie in Ihrer App verwenden möchten. Für dieses Tutorial verwenden Sie **Claude 3 Sonnet**. Stellen Sie also sicher, dass Sie dieses Modell aktivieren.
1. Erstellen Sie eine IAM-Rolle mit den entsprechenden Berechtigungen für Amazon Bedrock.
1. Erstellen Sie einen App Studio-Connector mit der IAM-Rolle, die in Ihrer App verwendet wird.
[Connect zu Amazon Bedrock her](connectors-bedrock.md)Ausführliche Anweisungen finden Sie unter und kehren Sie zu diesem Tutorial zurück, nachdem Sie die Schritte ausgeführt und den Connector erstellt haben.
## Schritt 2: Erstellen Sie eine Anwendung
Gehen Sie wie folgt vor, um in App Studio eine leere App zu erstellen, die Sie in die Textzusammenfassungs-App integrieren.
1. Melden Sie sich bei App Studio an.
1. Navigieren Sie zum Builder-Hub und wählen Sie **\$1 App erstellen**.
1. Wählen Sie **Von vorne beginnen**.
1. Geben Sie im Feld **App-Name** einen Namen für Ihre App ein, z. **Text Summarizer** B.
1. Wenn Sie aufgefordert werden, Datenquellen oder einen Connector auszuwählen, wählen Sie für die Zwecke dieses Tutorials die Option **Überspringen**.
1. Wählen Sie **Weiter** aus, um fortzufahren.
1. (Optional): Sehen Sie sich das Video-Tutorial an, um einen schnellen Überblick über die Erstellung von Apps in App Studio zu erhalten.
1. Wählen Sie **App bearbeiten**, um zum Anwendungsstudio zu gelangen.
## Schritt 3: Erstellen und konfigurieren Sie eine Automatisierung
Sie definieren die Logik und das Verhalten einer App Studio-App in *Automatisierungen.* Automatisierungen bestehen aus einzelnen Schritten, den sogenannten *Aktionen*, *Parametern*, mit denen Daten aus anderen Ressourcen an die Aktion übergeben werden, und einer *Ausgabe*, die von anderen Automatisierungen oder Komponenten verwendet werden kann. In diesem Schritt erstellen Sie eine Automatisierung, die die Interaktion mit Amazon Bedrock wie folgt abwickelt:
+ Eingaben: Ein Parameter, um die Texteingabe vom Benutzer an die Automatisierung weiterzuleiten.
+ Aktionen: Eine **GenAI Prompt-Aktion**, die die Texteingabe an Amazon Bedrock sendet und die ausgegebene Textzusammenfassung zurückgibt.
+ Ausgaben: Eine Automatisierungsausgabe, die aus der verarbeiteten Zusammenfassung von Amazon Bedrock besteht und in Ihrer App verwendet werden kann.
**Um eine Automatisierung zu erstellen und zu konfigurieren, die eine Aufforderung an Amazon Bedrock sendet und eine Zusammenfassung verarbeitet und zurücksendet**
1. Wählen Sie oben auf der Leinwand die Registerkarte **Automationen** aus.
1. Wählen Sie **\$1 Automatisierung hinzufügen**.
1. Wählen Sie im rechten Bereich **Eigenschaften**.
1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **InvokeBedrock** und drücken **Sie die Eingabetaste**.
1. Fügen Sie der Automatisierung einen Parameter hinzu, der verwendet wird, um die Eingabeaufforderungseingabe des Benutzers an die Automatisierung weiterzuleiten, die in der Anfrage an Amazon Bedrock verwendet werden soll, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie auf der Leinwand im Parameterfeld **\$1 Hinzufügen** aus.
1. Geben Sie unter **Name** **input** ein.
1. **Geben Sie im Feld Beschreibung eine beliebige Beschreibung ein, z. **Text to be sent to Amazon Bedrock** B.**
1. Wählen Sie **unter Typ** die Option **Zeichenfolge** aus.
1. Wählen Sie **Hinzufügen**, um den Parameter zu erstellen.
1. Fügen Sie eine **GenAI Prompt-Aktion** hinzu, indem Sie die folgenden Schritte ausführen:
1. **Wählen Sie im rechten Bereich Aktionen aus.**
1. Wählen Sie **GenAI Prompt**, um eine Aktion hinzuzufügen.
1. 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.
1. Benennen Sie die Aktion um in, **PromptBedrock** indem Sie das Stiftsymbol wählen, den Namen eingeben und die Eingabetaste drücken.
1. Wählen Sie unter **Connector** den Connector aus, der in erstellt wurde[Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Wählen Sie unter **Modell** das Amazon Bedrock-Modell aus, das Sie für die Verarbeitung der Aufforderung verwenden möchten. In diesem Tutorial wählen Sie **Claude 3.5 Sonnet**.
1. Geben `{{params.input}}` Sie im Feld **Benutzeraufforderung** den Wert ein. Dies stellt den `input` Parameter dar, den Sie zuvor erstellt haben, und enthält die Texteingabe Ihrer App-Benutzer.
1. Geben Sie unter **Systemaufforderung** die Anweisungen zur Systemaufforderung ein, die Sie an Amazon Bedrock senden möchten. Geben Sie für dieses Tutorial Folgendes ein:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Wählen Sie **„Einstellungen anfordern“**, um es zu erweitern, und aktualisieren Sie die folgenden Felder:
+ Geben Sie im Feld **Temperatur** den Wert ein`0`. Die Temperatur bestimmt die Zufälligkeit oder Kreativität der Ausgabe auf einer Skala von 0 bis 10. Je höher die Zahl, desto kreativer ist die Reaktion.
+ Geben Sie im Feld **Max. Tokens** ein, `4096` um die Länge der Antwort zu begrenzen.
1. Die Ausgabe dieser Automatisierung ist der zusammengefasste Text, jedoch erzeugen Automatisierungen standardmäßig keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie in der linken Navigationsleiste die **InvokeBedrock**Automatisierung aus.
1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Ausgabe** die Option **\$1** Hinzufügen.
1. Geben **\$1\$1results.PromptBedrock.text\$1\$1** Sie im Feld **Ausgabe** den Wert ein. Dieser Ausdruck gibt den Inhalt der `processResults` Aktion zurück.
## Schritt 4: Seiten und Komponenten erstellen
In App Studio stellt jede Seite einen Bildschirm der Benutzeroberfläche (UI) Ihrer Anwendung dar, mit dem Ihre Benutzer interagieren werden. Auf diesen Seiten können Sie verschiedene Komponenten wie Tabellen, Formulare, Schaltflächen und mehr hinzufügen, um das gewünschte Layout und die gewünschte Funktionalität zu erstellen.
### Benennen Sie die Standardseite um
Die Textzusammenfassungs-App in diesem Tutorial wird nur eine Seite enthalten. Neu erstellte Anwendungen verfügen über eine Standardseite, sodass Sie diese umbenennen, anstatt eine hinzuzufügen.
**Um die Standardseite umzubenennen**
1. Wählen Sie im Navigationsmenü der oberen Leiste die Option **Seiten** aus.
1. Wählen Sie im linken Bereich **Page1** und dann im rechten Bereich das **Eigenschaften-Panel** aus.
1. **Wählen Sie das Stiftsymbol, geben Sie die Eingabetaste ein und drücken Sie **TextSummarizationTool** die Eingabetaste.**
1. Geben Sie in der **Navigationsbeschriftung** ein**TextSummarizationTool**.
### Fügen Sie der Seite Komponenten hinzu
Für dieses Tutorial hat die Textzusammenfassungs-App eine Seite, die die folgenden Komponenten enthält:
+ Eine **Texteingabekomponente**, mit der Endbenutzer eine Aufforderung zur Zusammenfassung eingeben.
+ Eine **Button-Komponente**, die verwendet wird, um die Aufforderung an Amazon Bedrock zu senden.
+ Eine **Textbereichskomponente**, die die Zusammenfassung von Amazon Bedrock anzeigt.
Fügen Sie der Seite eine **Texteingabekomponente** hinzu, über die Benutzer eine Texteingabeaufforderung zur Zusammenfassung eingeben.
**Um eine Texteingabekomponente hinzuzufügen**
1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Texteingabekomponente** und ziehen Sie sie auf die Leinwand.
1. Wählen Sie die Texteingabe auf der Leinwand aus, um sie auszuwählen.
1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:
1. Wählen Sie das Stiftsymbol, in das Sie die Texteingabe umbenennen möchten**inputPrompt**.
1. Geben Sie im Feld **Bezeichnung** den Wert ein**Prompt**.
1. Geben **Enter text to be summarized** Sie im Feld **Platzhalter** den Wert ein.
Fügen Sie nun eine **Button-Komponente** hinzu, mit der Benutzer die Aufforderung an Amazon Bedrock senden können.
**Um eine Button-Komponente hinzuzufügen**
1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Button-Komponente** und ziehen Sie sie auf die Arbeitsfläche.
1. Wählen Sie die Schaltfläche auf der Leinwand aus, um sie auszuwählen.
1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:
1. Wählen Sie das Stiftsymbol, in das Sie die Schaltfläche umbenennen möchten**sendButton**.
1. Geben **Sie im Feld Schaltflächenbezeichnung** den Wert ein**Send**.
Fügen Sie nun eine **Textbereichskomponente** hinzu, die die von Amazon Bedrock zurückgegebene Zusammenfassung anzeigt.
**Um eine Textbereichskomponente hinzuzufügen**
1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Textbereichskomponente** und ziehen Sie sie auf die Leinwand.
1. Wählen Sie den Textbereich auf der Leinwand aus, um ihn auszuwählen.
1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:
1. Wählen Sie das Stiftsymbol, in das Sie die Schaltfläche umbenennen möchten**textSummary**.
1. Geben Sie im Feld **Bezeichnung** den Wert ein**Summary**.
### Konfigurieren Sie die Seitenkomponenten
Da die App nun eine Seite mit Komponenten enthält, besteht der nächste Schritt darin, die Komponenten so zu konfigurieren, dass sie das entsprechende Verhalten ausführen. Um eine Komponente, z. B. eine Schaltfläche, so zu konfigurieren, dass sie Aktionen ausführt, wenn mit ihr interagiert wird, müssen Sie ihr einen *Auslöser* hinzufügen. Für die App in diesem Tutorial fügen Sie der `sendButton` Schaltfläche zwei Auslöser hinzu, um Folgendes zu tun:
+ Der erste Trigger sendet den Text in der `textPrompt` Komponente zur Analyse an Amazon Bedrock.
+ Der zweite Auslöser zeigt die von Amazon Bedrock zurückgegebene Zusammenfassung in der `textSummary` Komponente an.
**Um einen Auslöser hinzuzufügen, der die Aufforderung an Amazon Bedrock sendet**
1. Wählen Sie die Schaltfläche auf der Leinwand, um sie auszuwählen.
1. Wählen Sie im **Eigenschaftenfenster** auf der rechten Seite im Bereich **Auslöser** die Option **\$1 Hinzufügen**.
1. Wählen Sie „**Automatisierung aufrufen**“.
1. Wählen Sie den einen **InvokeAutomationTrigger** aus, der erstellt wurde, um ihn zu konfigurieren.
1. Geben Sie im Feld **Aktionsname** den Wert ein**invokeBedrockAutomation**.
1. Wählen Sie unter **Invoke Automation** die **InvokeBedrock**Automatisierung aus, die zuvor erstellt wurde.
1. Geben Sie im Parameterfeld in den **Eingabeparameter**, der zuvor erstellt wurde, den Text ein**\$1\$1ui.inputPrompt.value\$1\$1**, der den Inhalt der `inputPrompt` Texteingabekomponente übergibt.
1. Klicken Sie oben im Bedienfeld auf den Linkspfeil, um zum Menü mit den Komponenteneigenschaften zurückzukehren.
Jetzt haben Sie einen Trigger konfiguriert, der die Automatisierung zum Senden einer Anfrage an Amazon Bedrock aufruft, wenn auf die Schaltfläche geklickt wird. Der nächste Schritt besteht darin, einen zweiten Trigger zu konfigurieren, der die Ergebnisse in der Komponente anzeigt. `textSummary`
**Um einen Trigger hinzuzufügen, der die Amazon Bedrock-Ergebnisse in der Textbereichskomponente anzeigt**
1. Wählen Sie auf der rechten Seite des **Eigenschaftenfensters** der Schaltfläche im Bereich **Auslöser** die Option **\$1** Hinzufügen.
1. Wählen Sie „**Komponentenaktion ausführen**“.
1. Wählen Sie den **Runcomponentaction1-Trigger** aus, der für die Konfiguration erstellt wurde.
1. Geben Sie im Feld **Aktionsname** den Wert ein. **setTextSummary**
1. Wählen Sie unter **Komponente** die **TextSummary-Komponente** aus.
1. Wählen Sie unter **Aktion** die Option **Wert festlegen** aus.
1. Geben **Sie im Feld Wert setzen auf** ein**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Schritt 5: Veröffentlichen Sie die Anwendung in der **Testumgebung**
Während der Entwicklung einer App empfiehlt es sich in der Regel, eine Vorschau der App anzusehen, um zu sehen, wie sie aussieht, und erste Tests ihrer Funktionalität durchzuführen. Da Anwendungen in der Vorschauumgebung jedoch nicht mit externen Diensten interagieren, veröffentlichen Sie die App stattdessen in der Testumgebung, um das Senden von Anfragen und das Empfangen von Antworten von Amazon Bedrock testen zu können.
**Um Ihre App in der Testumgebung zu veröffentlichen**
1. Wählen Sie in der oberen rechten Ecke des App Builders die Option **Veröffentlichen** aus.
1. Fügen Sie eine Versionsbeschreibung für die Testumgebung hinzu.
1. Überprüfen Sie das Kontrollkästchen für das SLA und aktivieren Sie es.
1. Wählen Sie **Starten**. Die Veröffentlichung kann bis zu 15 Minuten dauern.
1. (Optional) Wenn Sie bereit sind, können Sie anderen Zugriff gewähren, indem Sie „**Teilen**“ wählen und den Anweisungen folgen. Weitere Informationen zum Teilen von App Studio-Apps finden Sie unter[Gemeinsame Nutzung veröffentlichter Anwendungen](application-share.md).
Wählen Sie nach dem Testen Ihrer Anwendung erneut **Veröffentlichen**, um die Anwendung in die Produktionsumgebung hochzustufen. Beachten Sie, dass Apps in der Produktionsumgebung für Endbenutzer erst verfügbar sind, wenn sie gemeinsam genutzt werden. Weitere Informationen zu den verschiedenen Anwendungsumgebungen finden Sie unter[Anwendungsumgebungen](applications-publish.md#application-environments).
## (Optional) Bereinigen
Sie haben das Tutorial nun erfolgreich abgeschlossen und mit Amazon Bedrock eine App zur Textzusammenfassung in App Studio erstellt. Sie können Ihre App weiterhin verwenden oder die Ressourcen bereinigen, die in diesem Tutorial erstellt wurden. Die folgende Liste enthält eine Liste der Ressourcen, die bereinigt werden müssen:
+ Der in App Studio erstellte Amazon Bedrock-Connector. Weitere Informationen finden Sie unter [Konnektoren anzeigen, bearbeiten und löschen](viewing-deleting-connectors.md).
+ Die Textzusammenfassungs-App in App Studio. Weitere Informationen finden Sie unter [Löschen einer Anwendung](applications-delete.md).
+ Die in der IAM-Konsole erstellte IAM-Rolle. Weitere Informationen finden Sie im *AWS Identity and Access Management Benutzerhandbuch* unter [Löschen von Rollen oder Instanzprofilen](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html).
+ Wenn Sie Modellzugriff für Claude 3 Sonnet beantragt haben und den Zugriff rückgängig machen möchten, finden Sie weitere Informationen unter [Zugriff auf Amazon Bedrock Foundation-Modelle verwalten](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) im *Amazon Bedrock-Benutzerhandbuch*.
# Interaktion mit Amazon Simple Storage Service mit Komponenten und Automatisierungen
Sie können verschiedene Amazon S3 S3-Operationen von einer App Studio-App aus aufrufen. Sie könnten beispielsweise ein einfaches Admin-Panel erstellen, um Ihre Benutzer und Bestellungen zu verwalten und Ihre Medien von Amazon S3 aus anzuzeigen. Sie können zwar jeden Amazon S3 S3-Vorgang mit der AWS Aktion **Aufrufen aufrufen**, es gibt jedoch vier spezielle Amazon S3 S3-Aktionen, die Sie zu Automatisierungen in Ihrer App hinzufügen können, um allgemeine Operationen an Amazon S3 S3-Buckets und -Objekten durchzuführen. Die vier Aktionen und ihre Operationen lauten wie folgt:
+ **Objekt platzieren**: Verwendet den `Amazon S3 PutObject` Vorgang, um ein Objekt zu einem Amazon S3 S3-Bucket hinzuzufügen.
+ **Objekt abrufen**: Verwendet den `Amazon S3 GetObject` Vorgang, um ein Objekt aus einem Amazon S3 S3-Bucket abzurufen.
+ **Objekte auflisten**: Verwendet den `Amazon S3 ListObjects` Vorgang, um Objekte in einem Amazon S3 S3-Bucket aufzulisten.
+ **Objekt löschen**: Verwendet den `Amazon S3 DeleteObject` Vorgang, um ein Objekt aus einem Amazon S3 S3-Bucket zu löschen.
Zusätzlich zu den Aktionen gibt es eine **S3-Upload-Komponente**, die Sie Seiten in Anwendungen hinzufügen können. Benutzer können diese Komponente verwenden, um eine Datei zum Hochladen auszuwählen, und die Komponente ruft `Amazon S3 PutObject` auf, um die Datei in den konfigurierten Bucket und Ordner hochzuladen. In diesem Tutorial wird diese Komponente anstelle der eigenständigen Automatisierungsaktion „**Objekt platzieren**“ verwendet. (Die eigenständige Aktion sollte in komplexeren Szenarien verwendet werden, die zusätzliche Logik oder Aktionen beinhalten, die vor oder nach dem Hochladen ausgeführt werden müssen.)
## Voraussetzungen
In diesem Handbuch wird davon ausgegangen, dass Sie die folgenden Voraussetzungen erfüllt haben:
1. Erstellung und Konfiguration eines Amazon S3-Buckets, einer IAM-Rolle und -Richtlinie sowie eines Amazon S3 S3-Connectors, um Amazon S3 erfolgreich in App Studio zu integrieren. Um einen Connector zu erstellen, benötigen Sie die Administratorrolle. Weitere Informationen finden Sie unter [Connect zu Amazon Simple Storage Service (Amazon S3) her](connectors-s3.md).
## Erstellen Sie eine leere Anwendung
Erstellen Sie eine leere Anwendung, die Sie in diesem Handbuch verwenden können, indem Sie die folgenden Schritte ausführen.
**Um eine leere Anwendung zu erstellen**
1. Wählen Sie im Navigationsbereich **Meine Anwendungen** aus.
1. Wählen Sie **\$1 App erstellen**.
1. Geben Sie Ihrer Anwendung im Dialogfeld „**App erstellen**“ einen Namen, wählen Sie „**Von vorne beginnen**“ und **dann „Weiter**“.
1. Wählen **Sie im Dialogfeld Mit vorhandenen Daten verbinden** die Option **Überspringen** aus, um die Anwendung zu erstellen.
1. 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.
## Seiten erstellen
Erstellen Sie drei Seiten in Ihrer Anwendung, um Informationen zu sammeln oder anzuzeigen.
**Um Seiten zu erstellen**
1. Wählen Sie bei Bedarf den Tab **Seiten** oben auf der Leinwand aus.
1. In der linken Navigation befindet sich eine einzelne Seite, die mit Ihrer App erstellt wurde. Wählen Sie zweimal **\$1 Hinzufügen**, um zwei weitere Seiten zu erstellen. Im Navigationsbereich sollten insgesamt drei Seiten angezeigt werden.
1. Aktualisieren Sie den Namen der Seite **Page1**, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie das Ellipsensymbol und dann **Seiteneigenschaften.**
1. Wählen Sie im rechten **Eigenschaftenmenü** das Stiftsymbol, um den Namen zu bearbeiten.
1. Geben Sie die Eingabetaste ein **FileList** und drücken Sie die **Eingabetaste**.
1. Wiederholen Sie die vorherigen Schritte, um die zweite und dritte Seite wie folgt zu aktualisieren:
+ Benennen Sie **Page2** um in. **UploadFile**
+ Benennen Sie **Seite3** um in. **FailUpload**
Jetzt sollte Ihre App drei Seiten mit den Namen **FileList**, und haben **UploadFile**FailUpload****, die im **Seitenmenü** auf der linken Seite angezeigt werden.
Als Nächstes erstellen und konfigurieren Sie die Automatisierungen, die mit Amazon S3 interagieren.
## Automatisierungen erstellen und konfigurieren
Erstellen Sie die Automatisierungen Ihrer Anwendung, die mit Amazon S3 interagieren. Verwenden Sie die folgenden Verfahren, um die folgenden Automatisierungen zu erstellen:
+ Eine **GetFiles-Automatisierung**, die die Objekte in Ihrem Amazon S3 S3-Bucket auflistet, die zum Füllen einer Tabellenkomponente verwendet werden.
+ Eine **DeleteFile-Automatisierung**, die ein Objekt aus Ihrem Amazon S3 S3-Bucket löscht, das verwendet wird, um einer Tabellenkomponente eine Löschschaltfläche hinzuzufügen.
+ Eine **ViewFile-Automatisierung**, die ein Objekt aus Ihrem Amazon S3 S3-Bucket abruft und anzeigt. Dies wird verwendet, um weitere Details zu einem einzelnen Objekt anzuzeigen, das aus einer Tabellenkomponente ausgewählt wurde.
### Erstellen Sie eine Automatisierung `getFiles`
Erstellen Sie eine Automatisierung, die die Dateien in einem bestimmten Amazon S3 S3-Bucket auflistet.
1. Wählen Sie oben auf der Leinwand die Registerkarte **Automationen** aus.
1. Wählen Sie **\$1 Automatisierung hinzufügen**.
1. Wählen Sie im rechten Bereich **Eigenschaften** aus.
1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **getFiles** und drücken **Sie die Eingabetaste**.
1. Fügen Sie eine Aktion **Objekte auflisten** hinzu, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie im rechten Bereich **Aktionen** aus.
1. Wählen Sie **Objekte auflisten**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`ListObjects1`.
1. 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.
1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.
1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* 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.
1. Die Ausgabe dieser Automatisierung wird verwendet, um eine Tabellenkomponente mit Objekten aus Ihrem Amazon S3 S3-Bucket zu füllen. Standardmäßig erzeugen Automatisierungen jedoch keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie in der linken Navigationsleiste die **GetFiles-Automatisierung** aus.
1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automationsausgabe** die Option **\$1** Ausgabe hinzufügen.
1. Geben **\$1\$1results.ListObjects1.Contents\$1\$1** Sie für **Ausgabe** den Wert ein. Dieser Ausdruck gibt den Inhalt der Aktion zurück und kann nun zum Auffüllen einer Tabellenkomponente verwendet werden.
### Erstellen Sie eine Automatisierung `deleteFile`
Erstellen Sie eine Automatisierung, die ein Objekt aus einem angegebenen Amazon S3 S3-Bucket löscht.
1. **Wählen Sie im **Automationsbereich** auf der linken Seite die Option \$1 Hinzufügen.**
1. Wählen Sie **\$1 Automatisierung hinzufügen**.
1. Wählen Sie im rechten Bereich **Eigenschaften** aus.
1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **deleteFile** und drücken **Sie die Eingabetaste**.
1. 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 **\$1 Hinzufügen** aus.
1. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf **fileName** und drücken Sie **die Eingabetaste**.
1. 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.
1. Wählen Sie **Objekt löschen**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`DeleteObject1`.
1. 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.
1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.
1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Erstellen Sie eine `viewFile` Automatisierung
Erstellen Sie eine Automatisierung, die ein einzelnes Objekt aus einem bestimmten Amazon S3 S3-Bucket abruft. Später werden Sie diese Automatisierung mit einer Datei-Viewer-Komponente konfigurieren, um das Objekt anzuzeigen.
1. Wählen Sie im **Automationsbereich** auf der linken Seite die Option **\$1** Hinzufügen.
1. Wählen Sie **\$1 Automatisierung hinzufügen**.
1. Wählen Sie im rechten Bereich **Eigenschaften** aus.
1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **viewFile** und drücken **Sie die Eingabetaste**.
1. 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 **\$1 Hinzufügen** aus.
1. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf **fileName** und drücken Sie **die Eingabetaste**.
1. Fügen Sie eine Aktion „**Objekt abrufen**“ hinzu, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie im rechten Bereich **Aktionen** aus.
1. Wählen Sie **Objekt abrufen**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`GetObject1`.
1. 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.
1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.
1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. Standardmäßig erzeugen Automatisierungen keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie in der linken Navigationsleiste die **ViewFile-Automatisierung** aus.
1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automationsausgabe** die Option **\$1** Ausgabe hinzufügen.
1. Geben **\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1** 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 zum Abrufen der Daten verbraucht werden muss. Wenn sie als Automatisierungsausgabe verwendet wird, verarbeitet die Automatisierung dies, und die Ausgabe kann als Datenquelle für eine Bild- oder PDF-Viewer-Komponente verwendet werden. Sie kann auch als Eingabe für eine andere Operation verwendet werden, z. `S3 PutObject`
`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();`
Als Nächstes fügen Sie den Seiten, die Sie zuvor erstellt haben, Komponenten hinzu und konfigurieren sie mit Ihren Automatisierungen, sodass Benutzer Ihre App zum Anzeigen und Löschen von Dateien verwenden können.
## Fügen Sie Seitenkomponenten hinzu und konfigurieren Sie sie
Nachdem Sie nun die Automatisierungen erstellt haben, die die Geschäftslogik und Funktionalität Ihrer App definieren, werden Sie Komponenten erstellen und beide miteinander verbinden.
### Fügen Sie der Seite Komponenten hinzu **FileList**
Die **FileList**Seite, die Sie zuvor erstellt haben, wird verwendet, um eine Liste der Dateien im konfigurierten Amazon S3 S3-Bucket und weitere Details zu jeder Datei anzuzeigen, die aus der Liste ausgewählt wurde. Gehen Sie dazu wie folgt vor:
1. Erstellen Sie eine Tabellenkomponente, um die Liste der Dateien anzuzeigen. Sie konfigurieren die Zeilen der Tabelle so, dass sie mit der Ausgabe der **GetFiles-Automatisierung** gefüllt werden, die Sie zuvor erstellt haben.
1. Erstellen Sie eine PDF-Viewer-Komponente, um ein einzelnes PDF anzuzeigen. Sie konfigurieren die Komponente so, dass sie eine aus der Tabelle ausgewählte Datei anzeigt, und verwenden dabei die **ViewFile-Automatisierung**, die Sie zuvor erstellt haben, um die Datei aus Ihrem Bucket abzurufen.
**Um Komponenten zur Seite hinzuzufügen **FileList****
1. Wählen Sie oben auf der Leinwand den Tab **Seiten**.
1. Wählen Sie im **Seitenbedienfeld auf** der linken **FileList**Seite die Seite aus.
1. Suchen Sie auf der rechten **Komponentenseite** nach der **Tabellenkomponente** und ziehen Sie sie in die Mitte der Arbeitsfläche.
1. Wählen Sie die Tabellenkomponente aus, die Sie der Seite gerade hinzugefügt haben.
1. **Wählen Sie im rechten **Eigenschaftenmenü** die Dropdownliste **Quelle** und dann Automatisierung aus.**
1. **Wählen Sie das **Drop-down-Menü Automatisierung** und wählen Sie die GetFiles-Automatisierung aus.** Die Tabelle verwendet die Ausgabe der **GetFiles-Automatisierung** als Inhalt.
1. Fügen Sie eine Spalte hinzu, die mit dem Namen der Datei gefüllt werden soll.
1. Wählen Sie auf der rechten Seite im **Eigenschaftenmenü** neben **Spalten** die Option **\$1 Hinzufügen**.
1. Wählen Sie das Pfeilsymbol rechts neben der **Spalte Spalte1**, die gerade hinzugefügt wurde.
1. Benennen Sie die **Spalte für Spaltenbezeichnung** in um. **Filename**
1. Geben Sie für **Wert** **\$1\$1currentRow.Key\$1\$1** ein.
1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**Eigenschaften**“ zurückzukehren.
1. Fügen Sie eine Tabellenaktion hinzu, um die Datei nacheinander zu löschen.
1. Wählen Sie auf der rechten Seite im **Eigenschaftenmenü** neben **Aktionen** die Option **\$1 Hinzufügen** aus.
1. Benennen Sie **Button** unter **Aktionen** in um**Delete**.
1. Wählen Sie das Pfeilsymbol rechts neben der Aktion **Löschen**, die gerade umbenannt wurde.
1. Wählen **Sie unter Beim Klicken** die Option **\$1 Aktion hinzufügen** und dann **Automatisierung aufrufen** aus.
1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.
1. Für **Aktionsname** geben Sie **DeleteRecord** ein.
1. Wählen Sie unter **Automatisierung aufrufen** die Option aus**deleteFile**.
1. Geben **\$1\$1currentRow.Key\$1\$1** Sie in das Textfeld für den Parameter ein.
1. Geben Sie für **Wert** **\$1\$1currentRow.Key\$1\$1** ein.
1. Wählen Sie im rechten Bereich „**Komponenten**“, um das Komponentenmenü aufzurufen. 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 werden Sie die **PDF-Viewer-Komponente** hinzufügen und konfigurieren.
1. 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.
1. Wählen Sie die **PDF-Viewer-Komponente** aus, die gerade hinzugefügt wurde.
1. **Wählen Sie im rechten **Eigenschaftenmenü** die Dropdownliste **Quelle** und dann Automatisierung aus.**
1. **Wählen Sie das **Drop-down-Menü Automatisierung** und dann die ViewFile-Automatisierung aus.** Die Tabelle verwendet die Ausgabe der **ViewFile-Automatisierung** als Inhalt.
1. Geben **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1** Sie in das Parametertextfeld ein.
1. 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 denselben Text wie im vorherigen Schritt ein:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### Fügen Sie der **UploadFile**Seite Komponenten hinzu
Die **UploadFile**Seite wird eine Dateiauswahl enthalten, mit der Sie eine Datei auswählen und in den konfigurierten Amazon S3 S3-Bucket hochladen können. Sie fügen der Seite die **S3-Upload-Komponente** hinzu, mit der Benutzer eine Datei auswählen und hochladen können.
1. Wählen Sie im **Seitenbereich auf** der linken **UploadFile**Seite die Seite aus.
1. Suchen Sie auf der rechten **Komponentenseite** nach der **S3-Upload-Komponente** und ziehen Sie sie in die Mitte der Arbeitsfläche.
1. Wählen Sie die S3-Upload-Komponente aus, die Sie der Seite gerade hinzugefügt haben.
1. Konfigurieren Sie im rechten **Eigenschaftenmenü** die Komponente:
1. Wählen Sie in der Dropdownliste **Connector** den Amazon S3 S3-Connector aus, der in den Voraussetzungen erstellt wurde.
1. Geben Sie für **Bucket** den Namen Ihres Amazon S3 S3-Buckets ein.
1. Geben Sie als **Dateiname** ein**\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. Geben Sie unter **Max. Dateigröße** den Wert **5** in das Textfeld ein und stellen Sie sicher, dass dieser Wert in der Dropdownliste ausgewählt **MB** ist.
1. Fügen Sie im Abschnitt **Trigger** Aktionen hinzu, die nach erfolgreichen oder erfolglosen Uploads ausgeführt werden, indem Sie die folgenden Schritte ausführen:
Um eine Aktion hinzuzufügen, die nach erfolgreichen Uploads ausgeführt wird:
1. Wählen Sie **unter Bei Erfolg** die Option **\$1 Aktion hinzufügen** und anschließend **Navigieren** aus.
1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.
1. Wählen Sie als **Navigationstyp** die Option **Seite** aus.
1. Wählen **Sie für Navigieren zu** die Option**FileList**.
1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**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 **\$1 Aktion hinzufügen** und anschließend **Navigieren** aus.
1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.
1. Wählen Sie als **Navigationstyp** die Option **Seite** aus.
1. Wählen **Sie für Navigieren zu** die Option**FailUpload**.
1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**Eigenschaften**“ zurückzukehren.
### Fügen Sie der **FailUpload**Seite Komponenten hinzu
Die **FailUpload**Seite ist eine einfache Seite mit einem Textfeld, das Benutzer darüber informiert, dass ihr Upload fehlgeschlagen ist.
1. Wählen Sie im **Seitenmenü auf** der linken **FailUpload**Seite die Seite aus.
1. Suchen Sie auf der rechten **Komponentenseite** nach der **Textkomponente** und ziehen Sie sie in die Mitte der Leinwand.
1. Wählen Sie die Textkomponente aus, die Sie der Seite gerade hinzugefügt haben.
1. Geben Sie im rechten **Eigenschaftenmenü** im Feld **Wert den** Text ein**Failed to upload, try again**.
## Aktualisieren Sie Ihre App-Sicherheitseinstellungen
Jede Anwendung in App Studio verfügt über Inhaltssicherheitseinstellungen, mit denen Sie externe Medien oder Ressourcen einschränken oder festlegen können, in welche Domänen in Amazon S3 Sie Objekte hochladen können. Die Standardeinstellung ist das Blockieren aller Domains. Um Objekte aus Ihrer Anwendung nach Amazon S3 hochzuladen, müssen Sie die Einstellung aktualisieren, um die Domains zuzulassen, in die Sie Objekte hochladen möchten.
**Um Domains für das Hochladen von Objekten auf Amazon S3 zuzulassen**
1. Wählen Sie den Tab **App-Einstellungen**.
1. Wählen Sie den Tab **Content Security Settings**.
1. Wählen **Sie für Quelle verbinden** die Option **Alle Verbindungen zulassen** aus.
1. Wählen Sie **Speichern**.
## Nächste Schritte: Zeigen Sie eine Vorschau der Anwendung an und veröffentlichen Sie sie zum Testen
Die Anwendung ist jetzt bereit zum Testen. Weitere Informationen zur Vorschau und Veröffentlichung von Anwendungen finden Sie unter[Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen](applications-preview-publish-share.md).
# Lambda-Funktionen in einer App Studio-App aufrufen
Dieses Tutorial zeigt Ihnen, wie Sie App Studio mit Lambda verbinden und Lambda-Funktionen aus Ihren Apps aufrufen.
## Voraussetzungen
In diesem Handbuch wird davon ausgegangen, dass Sie die folgenden Voraussetzungen erfüllt haben:
1. Eine App Studio-App erstellt. Wenn Sie noch keine haben, können Sie eine leere App erstellen, die Sie im Tutorial verwenden können. Weitere Informationen finden Sie unter [Erstellen einer Anwendung](applications-create.md).
**Anmerkung**
Sie benötigen zwar keine Lambda-Funktion, um diesem Tutorial zu folgen und zu lernen, wie man sie konfiguriert, aber es kann hilfreich sein, eine zu haben, um sicherzustellen, dass Sie die App korrekt konfiguriert haben. [Dieses Tutorial enthält keine Informationen zum Erstellen von Lambda-Funktionen. Weitere Informationen finden Sie im AWS Lambda Entwicklerhandbuch.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Erstellen Sie einen Lambda-Konnektor
Um Lambda-Funktionen in Ihrer App Studio-App verwenden zu können, müssen Sie einen Connector verwenden, um App Studio mit Lambda zu verbinden, um Zugriff auf Ihre Funktionen zu gewähren. Sie müssen Administrator sein, um Connectors in App Studio erstellen zu können. Weitere Informationen zum Erstellen von Lambda-Konnektoren, einschließlich der Schritte zum Erstellen eines solchen, finden Sie unter[Verbinden mit AWS Lambda](connectors-lambda.md).
## Erstellen und konfigurieren Sie eine Automatisierung
Automatisierungen werden verwendet, um die Logik Ihrer Anwendung zu definieren und bestehen aus Aktionen. Um eine Lambda-Funktion in Ihrer App aufzurufen, fügen Sie zunächst eine Aktion „*Lambda aufrufen“ zu einer Automatisierung* hinzu und konfigurieren sie. Gehen Sie wie folgt vor, um eine Automatisierung zu erstellen und ihr die Aktion „*Lambda aufrufen*“ hinzuzufügen.
1. Wählen Sie bei der Bearbeitung Ihrer App den Tab **Automatisierungen**.
1. Wählen Sie **\$1 Automatisierung hinzufügen**.
1. Wählen Sie im rechten **Aktionsmenü** die Option **Lambda aufrufen**, um den Schritt zu Ihrer Automatisierung hinzuzufügen.
1. Wählen Sie den neuen Lambda-Schritt auf der Arbeitsfläche aus, um seine Eigenschaften anzuzeigen und zu konfigurieren.
1. Konfigurieren Sie den Schritt im rechten **Eigenschaftenmenü**, indem Sie die folgenden Schritte ausführen:
1. Wählen Sie unter **Connector** den Connector aus, der erstellt wurde, um App Studio mit Ihren Lambda-Funktionen zu verbinden.
1. Geben Sie im Feld **Funktionsname** den Namen Ihrer Lambda-Funktion ein.
1. Geben Sie im Feld **Funktionsereignis** das Ereignis ein, das an die Lambda-Funktion übergeben werden soll. In der folgenden Liste sind einige gängige Anwendungsfälle aufgeführt:
+ Übergeben des Werts eines Automatisierungsparameters, z. B. eines Dateinamens oder einer anderen Zeichenfolge: `varName: params.paramName`
+ Übergabe des Ergebnisses einer vorherigen Aktion: `varName: results.actionName1.data[0].fieldName`
+ Wenn Sie innerhalb einer *Loop-Aktion* eine Aktion „*Lambda aufrufen*“ hinzufügen, können Sie Felder von jedem iterierten Element senden, die Parametern ähneln: `varName: currentItem.fieldName`
1. Das **Ausgabefeld Mocked** kann verwendet werden, um eine Scheinausgabe bereitzustellen, um die App während der Vorschau zu testen, wenn die Konnektoren nicht aktiv sind.
## Konfigurieren Sie ein UI-Element, um die Automatisierung auszuführen
Da Sie nun über eine Automatisierung verfügen, die mit einer Aktion zum Aufrufen Ihrer Lambda-Funktion konfiguriert ist, können Sie ein UI-Element konfigurieren, um die Automatisierung auszuführen. In diesem Tutorial erstellen Sie eine Schaltfläche, die die Automatisierung ausführt, wenn Sie darauf klicken.
**Tipp**
Mit der Aktion Automatisierung *aufrufen* können Sie auch Automatisierungen von anderen Automatisierungen aus ausführen.
**Um Ihre Automatisierung über eine Schaltfläche auszuführen**
1. Wählen Sie bei der Bearbeitung Ihrer App den Tab **Seiten**.
1. Wählen Sie im Menü auf der rechten Seite die **Button-Komponente** aus, um der Seite eine Schaltfläche hinzuzufügen.
1. Wählen Sie die neue Schaltfläche, um sie zu konfigurieren.
1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Trigger** die Option **\$1 Hinzufügen** und dann Automatisierung **aufrufen** aus.
1. Wählen Sie den neuen Auslöser für den Automatisierungsaufruf aus, um ihn zu konfigurieren.
1. Wählen Sie unter **Automatisierung aufrufen** die Automatisierung aus, die Ihre Lambda-Funktion aufruft, und konfigurieren Sie alle Parameter, die Sie an die Automatisierung senden möchten.
Jetzt veranlasst jeder Benutzer, der diese Schaltfläche in Ihrer App auswählt, die konfigurierte Automatisierung auszuführen.
## Nächste Schritte: Zeigen Sie eine Vorschau der Anwendung an und veröffentlichen Sie sie zum Testen
Ihre Anwendung ist jetzt bereit zum Testen. Bei der Vorschau Ihrer App in der Entwicklungsumgebung sind Konnektoren nicht aktiv, sodass Sie die Automatisierung nicht während der Vorschau testen können, da sie einen Connector verwendet, um eine Verbindung herzustellen. AWS Lambda Um die Funktionalität Ihrer App zu testen, die von Konnektoren abhängt, müssen Sie die App in der Testumgebung veröffentlichen. Weitere Informationen zur Vorschau und Veröffentlichung von Anwendungen finden Sie unter[Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen](applications-preview-publish-share.md).