기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 자습서
**Topics**
+ [Amazon Bedrock을 사용하여 AI 텍스트 요약기 앱 구축](tutorial-conversational-bedrock.md)
+ [Amazon Simple Storage Service와 구성 요소 및 자동화의 상호 작용](automations-s3.md)
+ [App Studio 앱에서 Lambda 함수 호출](tutorial-lambda.md)
# Amazon Bedrock을 사용하여 AI 텍스트 요약기 앱 구축
이 자습서에서는 Amazon Bedrock을 사용하여 최종 사용자의 텍스트 입력에 대한 간결한 요약을 제공하는 애플리케이션을 App Studio에서 빌드합니다. 애플리케이션에는 사용자가 요약하려는 텍스트를 입력할 수 있는 간단한 사용자 인터페이스가 포함되어 있습니다. 회의 기록, 기사 내용, 연구 결과 또는 기타 텍스트 정보일 수 있습니다. 사용자가 텍스트를 입력한 후 버튼을 눌러 Amazon Bedrock으로 텍스트를 전송할 수 있습니다. 그러면 Claude 3 Sonnet 모델을 사용하여 텍스트를 처리하고 요약된 버전을 반환합니다.
**Contents**
+ [사전 조건](#tutorial-conversational-bedrock-prerequisites)
+ [1단계: IAM 역할 및 App Studio 커넥터 생성 및 구성](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [2단계: 애플리케이션 생성](#tutorial-conversational-bedrock-steps-create-application)
+ [3단계: 자동화 생성 및 구성](#tutorial-conversational-bedrock-steps-create-automation)
+ [4단계: 페이지 및 구성 요소 생성](#tutorial-conversational-bedrock-steps-user-interface)
+ [기본 페이지 이름 바꾸기](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [페이지에 구성 요소 추가](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [페이지 구성 요소 구성](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [5단계: 애플리케이션을 **테스트** 환경에 게시](#tutorial-conversational-bedrock-steps-publish)
+ [(선택 사항) 정리](#tutorial-conversational-bedrock-steps-cleanup)
## 사전 조건
시작하기 전에 다음 사전 조건을 검토하고 완료합니다.
+ AWS App Studio에 대한 액세스. 이 자습서에서는 커넥터를 생성하려면 관리자 역할이 있어야 합니다.
+ 선택 사항: [AWS App Studio 개념](concepts.md) 및를 검토하여 중요한 App Studio 개념[자습서: 빈 앱에서 빌드 시작](getting-started-tutorial-empty.md)을 숙지합니다.
## 1단계: IAM 역할 및 App Studio 커넥터 생성 및 구성
Amazon Bedrock 모델에 App Studio 액세스 권한을 제공하려면 다음을 수행해야 합니다.
1. 앱에서 사용하려는 Amazon Bedrock 모델을 활성화합니다. 이 자습서에서는 **Claude 3 Sonnet**을 사용하므로 해당 모델을 활성화해야 합니다.
1. Amazon Bedrock에 대한 적절한 권한이 있는 IAM 역할을 생성합니다.
1. 앱에서 사용할 IAM 역할을 사용하여 App Studio 커넥터를 생성합니다.
[Amazon Bedrock에 연결](connectors-bedrock.md) 자세한 지침은 로 이동하여 단계를 수행하고 커넥터를 생성한 후이 자습서로 돌아갑니다.
## 2단계: 애플리케이션 생성
다음 절차에 따라 App Studio에서 텍스트 요약기 앱에 빌드할 빈 앱을 생성합니다.
1. App Studio에 로그인합니다.
1. 빌더 허브로 이동하여 **\$1 앱 생성을** 선택합니다.
1. **처음부터 시작**을 선택합니다.
1. **앱 이름** 필드에와 같은 앱 이름을 입력합니다**Text Summarizer**.
1. 데이터 소스 또는 커넥터를 선택하라는 메시지가 표시되면이 자습서에서 **건너뛰**기를 선택합니다.
1. **다음**을 선택하여 계속 진행합니다.
1. (선택 사항): App Studio에서 앱을 빌드하는 방법에 대한 간략한 개요를 보려면 비디오 자습서를 시청하세요.
1. **앱 편집**을 선택하면 애플리케이션 스튜디오로 이동합니다.
## 3단계: 자동화 생성 및 구성
*자동화*에서 App Studio 앱의 로직과 동작을 정의합니다. 자동화는 *작업*, 다른 리소스의 작업에 데이터를 전달하는 데 사용되는 *파라미터*, 다른 자동화 또는 구성 요소에서 사용할 수 있는 *출력*이라고 하는 개별 단계로 구성됩니다. 이 단계에서는 다음과 함께 Amazon Bedrock과의 상호 작용을 처리하는 자동화를 생성합니다.
+ 입력: 사용자로부터 자동화로 텍스트 입력을 전달하는 파라미터입니다.
+ 작업: 텍스트 입력을 Amazon Bedrock으로 보내고 출력 텍스트 요약을 반환하는 하나의 **GenAI 프롬프트** 작업입니다.
+ 출력: 앱에서 사용할 수 있는 Amazon Bedrock에서 처리된 요약으로 구성된 자동화 출력입니다.
**Amazon Bedrock에 프롬프트를 보내고 요약을 처리하고 반환하는 자동화를 생성 및 구성하려면**
1. 캔버스 상단의 **자동화** 탭을 선택합니다.
1. **\$1 자동화 추가**를 선택합니다.
1. 오른쪽 패널에서 **속성을** 선택합니다.
1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **InvokeBedrock**를 입력하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 사용자의 텍스트 프롬프트 입력을 요청에 사용할 자동화에 전달하는 데 사용할 파라미터를 Amazon Bedrock에 추가합니다.
1. 캔버스의 파라미터 상자에서 **\$1 추가**를 선택합니다.
1. **이름**에 **input**를 입력합니다.
1. **설명**에와 같은 설명을 입력합니다**Text to be sent to Amazon Bedrock**.
1. **유형**에서 **문자열을** 선택합니다.
1. **추가**를 선택하여 파라미터를 생성합니다.
1. 다음 단계를 수행하여 **GenAI 프롬프트** 작업을 추가합니다.
1. 오른쪽 패널에서 **작업을** 선택합니다.
1. **GenAI 프롬프트**를 선택하여 작업을 추가합니다.
1. 다음 단계를 수행하여 작업을 구성합니다.
1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.
1. 연필 아이콘을 선택하고 이름을 입력한 다음 Enter 키를 눌러 작업의 이름을 **PromptBedrock**로 바꿉니다.
1. **커넥터**에서에서 생성된 커넥터를 선택합니다[1단계: IAM 역할 및 App Studio 커넥터 생성 및 구성](#tutorial-conversational-bedrock-steps-create-role-connector).
1. **모델에서** 프롬프트를 처리하는 데 사용할 Amazon Bedrock 모델을 선택합니다. 이 자습서에서는 **Claude 3.5 Sonnet**을 선택합니다.
1. **사용자 프롬프트**에를 입력합니다`{{params.input}}`. 이는 이전에 생성한 `input` 파라미터를 나타내며 앱 사용자의 텍스트 입력을 포함합니다.
1. **시스템 프롬프트**에 Amazon Bedrock으로 전송할 시스템 프롬프트 지침을 입력합니다. 이 자습서에서는 다음을 입력합니다.
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. 설정을 확장하려면 요청 **설정을** 선택하고 다음 필드를 업데이트합니다.
+ **온도**에를 입력합니다`0`. tempearture는 출력의 무작위성 또는 창의성을 0\$110의 척도로 결정합니다. 숫자가 높을수록 응답의 창의성이 높아집니다.
+ **최대 토큰**에서 `4096`를 입력하여 응답 길이를 제한합니다.
1. 이 자동화의 출력은 요약된 텍스트이지만 기본적으로 자동화는 출력을 생성하지 않습니다. 다음 단계를 수행하여 자동화 출력을 생성하도록 자동화를 구성합니다.
1. 왼쪽 탐색에서 **InvokeBedrock** 자동화를 선택합니다.
1. 오른쪽 **속성** 메뉴의 **출력**에서 **\$1 추가**를 선택합니다.
1. **출력**에를 입력합니다**\$1\$1results.PromptBedrock.text\$1\$1**. 이 표현식은 `processResults` 작업의 내용을 반환합니다.
## 4단계: 페이지 및 구성 요소 생성
App Studio에서 각 페이지는 사용자가 상호 작용할 애플리케이션의 사용자 인터페이스(UI) 화면을 나타냅니다. 이러한 페이지 내에서 테이블, 양식, 버튼 등과 같은 다양한 구성 요소를 추가하여 원하는 레이아웃과 기능을 생성할 수 있습니다.
### 기본 페이지 이름 바꾸기
이 자습서의 텍스트 요약기 앱에는 한 페이지만 포함됩니다. 새로 생성된 애플리케이션은 기본 페이지와 함께 제공되므로 애플리케이션을 추가하는 대신 이름을 바꿉니다.
**기본 페이지의 이름을 바꾸려면**
1. 상단 표시줄 탐색 메뉴에서 **페이지를** 선택합니다.
1. 왼쪽 패널에서 **Page1**을 선택하고 오른쪽 패널에서 **속성** 패널을 선택합니다.
1. 연필 아이콘을 선택하고를 입력한 다음 **Enter** **TextSummarizationTool**키를 누릅니다.
1. **탐색 레이블**에를 입력합니다**TextSummarizationTool**.
### 페이지에 구성 요소 추가
이 자습서에서는 텍스트 요약기 앱에 다음 구성 요소가 포함된 페이지가 하나 있습니다.
+ 최종 사용자가 요약할 프롬프트를 입력하는 데 사용하는 **텍스트** 입력 구성 요소입니다.
+ Amazon Bedrock으로 프롬프트를 보내는 데 사용되는 **버튼** 구성 요소입니다.
+ Amazon Bedrock의 요약을 표시하는 **텍스트 영역** 구성 요소입니다.
사용자가 요약할 **텍스트** 프롬프트를 입력하는 데 사용할 페이지에 텍스트 입력 구성 요소를 추가합니다.
**텍스트 입력 구성 요소를 추가하려면**
1. 오른쪽 **구성 요소** 패널에서 **텍스트 입력** 구성 요소를 찾아 캔버스로 끕니다.
1. 캔버스에서 텍스트 입력을 선택하여 선택합니다.
1. 오른쪽 **속성** 패널에서 다음 설정을 업데이트합니다.
1. 연필 아이콘을 선택하여 텍스트 입력의 이름을 로 변경합니다**inputPrompt**.
1. **레이블**에를 입력합니다**Prompt**.
1. **자리 표시**자에를 입력합니다**Enter text to be summarized**.
이제 사용자가 Amazon Bedrock에 프롬프트를 전송하도록 선택할 **버튼** 구성 요소를 추가합니다.
**버튼 구성 요소를 추가하려면**
1. 오른쪽 **구성 요소** 패널에서 **버튼** 구성 요소를 찾아 캔버스로 끕니다.
1. 캔버스에서 버튼을 선택하여 선택합니다.
1. 오른쪽 **속성** 패널에서 다음 설정을 업데이트합니다.
1. 연필 아이콘을 선택하여 버튼의 이름을 로 변경합니다**sendButton**.
1. **버튼 레이블**에를 입력합니다**Send**.
이제 Amazon Bedrock에서 반환한 요약을 표시할 **텍스트 영역** 구성 요소를 추가합니다.
**텍스트 영역 구성 요소를 추가하려면**
1. 오른쪽 **구성 요소** 패널에서 **텍스트 영역** 구성 요소를 찾아 캔버스로 끕니다.
1. 캔버스에서 텍스트 영역을 선택하여 선택합니다.
1. 오른쪽 **속성** 패널에서 다음 설정을 업데이트합니다.
1. 연필 아이콘을 선택하여 버튼의 이름을 로 변경합니다**textSummary**.
1. **레이블**에를 입력합니다**Summary**.
### 페이지 구성 요소 구성
이제 앱에 구성 요소가 포함된 페이지가 포함되어 있으므로 다음 단계는 적절한 동작을 수행하도록 구성 요소를 구성하는 것입니다. 버튼과 같은 구성 요소가 상호 작용할 때 작업을 수행하도록 구성하려면 *트리거*를 추가해야 합니다. 이 자습서의 앱의 경우 `sendButton` 버튼에 트리거 2개를 추가하여 다음을 수행합니다.
+ 첫 번째 트리거는 구성 `textPrompt` 요소의 텍스트를 Amazon Bedrock으로 전송하여 분석합니다.
+ 두 번째 트리거는 Amazon Bedrock에서 반환된 요약을 `textSummary` 구성 요소에 표시합니다.
**Amazon Bedrock으로 프롬프트를 보내는 트리거를 추가하려면**
1. 캔버스에서 버튼을 선택하여 선택합니다.
1. 오른쪽 **속성** 패널의 **트리거** 섹션에서 **\$1 추가**를 선택합니다.
1. **자동화 호출을** 선택합니다.
1. 생성된 **InvokeAutomation1** 트리거를 선택하여 구성합니다.
1. **작업 이름**에를 입력합니다**invokeBedrockAutomation**.
1. **자동화 호출**에서 이전에 생성된 **InvokeBedrock** 자동화를 선택합니다.
1. 파라미터 상자의 이전에 생성된 **입력** 파라미터에 `inputPrompt` 텍스트 입력 구성 요소의 콘텐츠를 **\$1\$1ui.inputPrompt.value\$1\$1**전달하는를 입력합니다.
1. 패널 상단의 왼쪽 화살표를 선택하여 구성 요소 속성 메뉴로 돌아갑니다.
이제 버튼을 클릭할 때 Amazon Bedrock에 요청을 보내도록 자동화를 호출하는 트리거를 구성했습니다. 다음 단계는 `textSummary` 구성 요소에 결과를 표시하는 두 번째 트리거를 구성하는 것입니다.
**텍스트 영역 구성 요소에 Amazon Bedrock 결과를 표시하는 트리거를 추가하려면**
1. 버튼의 오른쪽 **속성** 패널에서 **트리거** 섹션에서 **\$1 추가**를 선택합니다.
1. **구성 요소 작업 실행**을 선택합니다.
1. 생성된 **Runcomponentaction1** 트리거를 선택하여 구성합니다.
1. **작업 이름**에를 입력합니다**setTextSummary**.
1. **구성 요소**에서 **textSummary** 구성 요소를 선택합니다.
1. **작업**에서 **값 설정을** 선택합니다.
1. **값을 로 설정**에서를 입력합니다**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## 5단계: 애플리케이션을 **테스트** 환경에 게시
일반적으로 앱을 빌드하는 동안 앱을 미리 보고 앱의 모양을 확인하고 기능에 대한 초기 테스트를 수행하는 것이 좋습니다. 그러나 애플리케이션이 미리 보기 환경에서 외부 서비스와 상호 작용하지 않으므로 대신 앱을 테스트 환경에 게시하여 Amazon Bedrock의 전송 요청 및 응답 수신을 테스트할 수 있습니다.
**앱을 테스트 환경에 게시하려면**
1. 앱 빌더의 오른쪽 상단 모서리에서 **게시**를 선택합니다.
1. 테스트 환경에 대한 버전 설명을 추가합니다.
1. SLA와 관련된 확인란을 검토하고 선택합니다.
1. **시작**을 선택합니다. 게시에는 최대 15분이 걸릴 수 있습니다.
1. (선택 사항) 준비가 되면 **공유**를 선택하고 프롬프트에 따라 다른 사용자에게 액세스 권한을 부여할 수 있습니다. App Studio 앱 공유에 대한 자세한 내용은 섹션을 참조하세요[게시된 애플리케이션 공유](application-share.md).
애플리케이션을 테스트한 후 **게시**를 다시 선택하여 애플리케이션을 프로덕션 환경으로 승격합니다. 프로덕션 환경의 앱은 공유될 때까지 최종 사용자가 사용할 수 없습니다. 다양한 애플리케이션 환경에 대한 자세한 내용은 섹션을 참조하세요[애플리케이션 환경](applications-publish.md#application-environments).
## (선택 사항) 정리
이제 자습서를 성공적으로 완료하고 Amazon Bedrock을 사용하여 App Studio에서 텍스트 요약 앱을 구축했습니다. 앱을 계속 사용하거나이 자습서에서 생성된 리소스를 정리할 수 있습니다. 다음 목록에는 정리할 리소스 목록이 포함되어 있습니다.
+ App Studio에서 생성된 Amazon Bedrock 커넥터입니다. 자세한 내용은 [커넥터 보기, 편집 및 삭제](viewing-deleting-connectors.md) 단원을 참조하십시오.
+ App Studio의 텍스트 요약기 앱입니다. 자세한 내용은 [애플리케이션 삭제](applications-delete.md) 단원을 참조하십시오.
+ IAM 콘솔에서 생성된 IAM 역할입니다. 자세한 내용은 *AWS Identity and Access Management 사용 설명서*의 [역할 또는 인스턴스 프로파일 삭제](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)를 참조하세요.
+ Claude 3 Sonnet을 사용하도록 모델 액세스를 요청하고 액세스를 되돌리려면 [Amazon Bedrock 사용 설명서의 Amazon Bedrock 파운데이션 모델에 대한 액세스 관리를](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) 참조하세요. **
# Amazon Simple Storage Service와 구성 요소 및 자동화의 상호 작용
App Studio 앱에서 다양한 Amazon S3 작업을 호출할 수 있습니다. 예를 들어 간단한 관리자 패널을 생성하여 사용자 및 주문을 관리하고 Amazon S3에서 미디어를 표시할 수 있습니다. 간접 호출 작업을 사용하여 모든 Amazon S3 작업을 **간접 호출 AWS**할 수 있지만, Amazon S3 버킷 및 객체에서 공통 작업을 수행하기 위해 앱의 자동화에 추가할 수 있는 4개의 전용 Amazon S3 작업이 있습니다. 네 가지 작업과 해당 작업은 다음과 같습니다.
+ **객체 넣기**: `Amazon S3 PutObject` 작업을 사용하여 Amazon S3 버킷에 객체를 추가합니다.
+ **객체 가져오기**: `Amazon S3 GetObject` 작업을 사용하여 Amazon S3 버킷에서 객체를 검색합니다.
+ **객체 나열**: `Amazon S3 ListObjects` 작업을 사용하여 Amazon S3 버킷의 객체를 나열합니다.
+ **객체 삭제**: `Amazon S3 DeleteObject` 작업을 사용하여 Amazon S3 버킷에서 객체를 삭제합니다.
작업 외에도 애플리케이션의 페이지에 추가할 수 있는 **S3 업로드** 구성 요소가 있습니다. 사용자는이 구성 요소를 사용하여 업로드할 파일을 선택할 수 있으며 구성 요소는를 호출`Amazon S3 PutObject`하여 구성된 버킷 및 폴더에 파일을 업로드합니다. 이 자습서에서는 독립 실행형 **Put Object** 자동화 작업 대신이 구성 요소를 사용합니다. (독립 실행형 작업은 업로드 전후에 수행할 추가 로직 또는 작업이 포함된 보다 복잡한 시나리오에서 사용해야 합니다.)
## 사전 조건
이 안내서에서는 다음 사전 조건을 완료했다고 가정합니다.
1. Amazon S3를 App Studio와 성공적으로 통합하기 위해 Amazon S3 버킷, IAM 역할 및 정책, Amazon S3 커넥터를 생성하고 구성했습니다. 커넥터를 생성하려면 관리자 역할이 있어야 합니다. 자세한 내용은 [Amazon Simple Storage Service(Amazon S3)에 연결](connectors-s3.md) 단원을 참조하십시오.
## 빈 애플리케이션 생성
다음 단계를 수행하여이 가이드 전체에서 사용할 빈 애플리케이션을 생성합니다.
**빈 애플리케이션을 생성하려면**
1. 탐색 창에서 **내 애플리케이션을** 선택합니다.
1. **\$1 앱 생성을** 선택합니다.
1. **앱 생성** 대화 상자에서 애플리케이션에 이름을 지정하고 **처음부터 시작**을 선택한 **다음 다음을** 선택합니다.
1. **기존 데이터에 연결** 대화 상자에서 **건너뛰기를** 선택하여 애플리케이션을 생성합니다.
1. 새 **앱의 캔버스로 이동할 앱 편집**을 선택하면 구성 요소, 자동화 및 데이터를 사용하여 애플리케이션의 모양과 기능을 구성할 수 있습니다.
## 페이지 생성
애플리케이션에서 3페이지를 생성하여 정보를 수집하거나 표시합니다.
**페이지를 생성하려면**
1. 필요한 경우 캔버스 상단의 **페이지** 탭을 선택합니다.
1. 왼쪽 탐색에는 앱으로 생성된 단일 페이지가 있습니다. **\$1 추가**를 두 번 선택하여 두 개의 페이지를 더 생성합니다. 탐색 창에 총 3개의 페이지가 표시되어야 합니다.
1. 다음 단계를 수행하여 **Page1** 페이지의 이름을 업데이트합니다.
1. 줄임표 아이콘을 선택하고 **페이지 속성을** 선택합니다.
1. 오른쪽 **속성** 메뉴에서 연필 아이콘을 선택하여 이름을 편집합니다.
1. **FileList**를 입력하고 **Enter** 키를 누릅니다.
1. 이전 단계를 반복하여 다음과 같이 두 번째 및 세 번째 페이지를 업데이트합니다.
+ **Page2**의 이름을 로 바꿉니다**UploadFile**.
+ **Page3**의 이름을 로 바꿉니다**FailUpload**.
이제 앱에는 왼쪽 페이지 패널에 표시된 **FileList**, **UploadFile** 및 **FailUpload**라는 세 페이지가 있어야 **합니다**.
다음으로 Amazon S3와 상호 작용하는 자동화를 생성하고 구성합니다.
## 자동화 생성 및 구성
Amazon S3와 상호 작용하는 애플리케이션의 자동화를 생성합니다. 다음 절차에 따라 다음 자동화를 생성합니다.
+ 테이블 구성 요소를 채우는 데 사용되는 Amazon S3 버킷의 객체를 나열하는 **getFiles** 자동화입니다.
+ 테이블 구성 요소에 삭제 버튼을 추가하는 데 사용되는 Amazon S3 버킷에서 객체를 삭제하는 **deleteFile** 자동화입니다.
+ Amazon S3 버킷에서 객체를 가져와 표시하는 **viewFile** 자동화로, 테이블 구성 요소에서 선택한 단일 객체에 대한 세부 정보를 표시하는 데 사용됩니다.
### `getFiles` 자동화 생성
지정된 Amazon S3 버킷의 파일을 나열하는 자동화를 생성합니다.
1. 캔버스 상단의 **자동화** 탭을 선택합니다.
1. **\$1 자동화 추가**를 선택합니다.
1. 오른쪽 패널에서 **속성을** 선택합니다.
1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **getFiles**를 입력하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 **객체 나열** 작업을 추가합니다.
1. 오른쪽 패널에서 **작업을** 선택합니다.
1. **객체 나열**을 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`ListObjects1`.
1. 다음 단계를 수행하여 작업을 구성합니다.
1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.
1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.
1. **구성**에 다음 텍스트를 입력하고 *bucket\$1name*을 사전 조건에서 생성한 버킷으로 바꿉니다.
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**참고**
`Prefix` 필드를 사용하여 지정된 문자열로 시작하는 객체에 대한 응답을 제한할 수 있습니다.
1. 이 자동화의 출력은 테이블 구성 요소를 Amazon S3 버킷의 객체로 채우는 데 사용됩니다. 그러나 자동화는 기본적으로 출력을 생성하지 않습니다. 다음 단계를 수행하여 자동화 출력을 생성하도록 자동화를 구성합니다.
1. 왼쪽 탐색에서 **getFiles** 자동화를 선택합니다.
1. 오른쪽 **속성** 메뉴의 **자동화 출력**에서 **\$1 출력 추가**를 선택합니다.
1. **출력**에를 입력합니다**\$1\$1results.ListObjects1.Contents\$1\$1**. 이 표현식은 작업의 내용을 반환하며 이제 테이블 구성 요소를 채우는 데 사용할 수 있습니다.
### `deleteFile` 자동화 생성
지정된 Amazon S3 버킷에서 객체를 삭제하는 자동화를 생성합니다.
1. 왼쪽 **자동화** 패널에서 **\$1 추가**를 선택합니다.
1. **\$1 자동화 추가**를 선택합니다.
1. 오른쪽 패널에서 **속성을** 선택합니다.
1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **deleteFile**를 입력하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 자동화에 데이터를 전달하는 데 사용되는 자동화 파라미터를 추가합니다.
1. 오른쪽 **속성** 메뉴의 **자동화 파라미터**에서 **\$1 추가**를 선택합니다.
1. 연필 아이콘을 선택하여 자동화 파라미터를 편집합니다. 파라미터 이름을 로 업데이트**fileName**하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 **객체 삭제** 작업을 추가합니다.
1. 오른쪽 패널에서 **작업을** 선택합니다.
1. **객체 삭제**를 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`DeleteObject1`.
1. 다음 단계를 수행하여 작업을 구성합니다.
1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.
1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.
1. **구성**에 다음 텍스트를 입력하고 *bucket\$1name*을 사전 조건에서 생성한 버킷으로 바꿉니다.
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### `viewFile` 자동화 생성
지정된 Amazon S3 버킷에서 단일 객체를 검색하는 자동화를 생성합니다. 나중에 객체를 표시하도록 파일 뷰어 구성 요소로이 자동화를 구성합니다.
1. 왼쪽 **자동화** 패널에서 **\$1 추가**를 선택합니다.
1. **\$1 자동화 추가**를 선택합니다.
1. 오른쪽 패널에서 **속성을** 선택합니다.
1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **viewFile**를 입력하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 자동화에 데이터를 전달하는 데 사용되는 자동화 파라미터를 추가합니다.
1. 오른쪽 **속성** 메뉴의 **자동화 파라미터**에서 **\$1 추가**를 선택합니다.
1. 연필 아이콘을 선택하여 자동화 파라미터를 편집합니다. 파라미터 이름을 로 업데이트**fileName**하고 **Enter** 키를 누릅니다.
1. 다음 단계를 수행하여 **객체 가져오기** 작업을 추가합니다.
1. 오른쪽 패널에서 **작업을** 선택합니다.
1. **객체 가져오기**를 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`GetObject1`.
1. 다음 단계를 수행하여 작업을 구성합니다.
1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.
1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.
1. **구성**에 다음 텍스트를 입력하고 *bucket\$1name*을 사전 조건에서 생성한 버킷으로 바꿉니다.
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. 기본적으로 자동화는 출력을 생성하지 않습니다. 다음 단계를 수행하여 자동화 출력을 생성하도록 자동화를 구성합니다.
1. 왼쪽 탐색에서 **viewFile** 자동화를 선택합니다.
1. 오른쪽 **속성** 메뉴의 **자동화 출력**에서 **\$1 출력 추가**를 선택합니다.
1. **출력**에를 입력합니다**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. 이 표현식은 작업의 내용을 반환합니다.
**참고**
다음과 같은 `S3 GetObject` 방법으로의 응답을 읽을 수 있습니다.
`transformToWebStream`: 데이터를 검색하는 데 사용해야 하는 스트림을 반환합니다. 자동화 출력으로 사용되는 경우 자동화가 이를 처리하고 출력을 이미지 또는 PDF 뷰어 구성 요소의 데이터 소스로 사용할 수 있습니다. 와 같은 다른 작업에 대한 입력으로도 사용할 수 있습니다`S3 PutObject`.
`transformToString`: 자동화의 원시 데이터를 반환하며, 파일에 JSON 데이터와 같은 텍스트 콘텐츠가 포함된 경우 JavaScript 작업에 사용해야 합니다. 다음과 같이 대기해야 합니다. `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: 부호 없는 8비트 정수의 배열을 반환합니다. 이 응답은 바이너리 데이터의 저장 및 조작을 허용하는 바이트 배열의 목적을 수행합니다. 다음과 같이 대기해야 합니다. `await results.GetObject1.Body.transformToByteArray();`
그런 다음 이전에 생성한 페이지에 구성 요소를 추가하고 사용자가 앱을 사용하여 파일을 보고 삭제할 수 있도록 자동화로 구성해야 합니다.
## 페이지 구성 요소 추가 및 구성
이제 앱의 비즈니스 로직과 기능을 정의하는 자동화를 생성했으므로 구성 요소를 생성하고 둘 다 연결합니다.
### **FileList** 페이지에 구성 요소 추가
이전에 생성한 **FileList** 페이지는 구성된 Amazon S3 버킷의 파일 목록과 목록에서 선택한 파일에 대한 세부 정보를 표시하는 데 사용됩니다. 이렇게 하려면 다음을 수행합니다.
1. 테이블 구성 요소를 생성하여 파일 목록을 표시합니다. 이전에 생성한 **getFiles** 자동화의 출력으로 채워지도록 테이블의 행을 구성합니다.
1. PDF 뷰어 구성 요소를 생성하여 단일 PDF를 표시합니다. 버킷에서 파일을 가져오기 위해 이전에 생성한 **viewFile** 자동화를 사용하여 테이블에서 선택한 파일을 보도록 구성 요소를 구성합니다.
****FileList** 페이지에 구성 요소를 추가하려면**
1. 캔버스 상단의 **페이지** 탭을 선택합니다.
1. 왼쪽 **페이지** 패널에서 **FileList** 페이지를 선택합니다.
1. 오른쪽 **구성 요소** 페이지에서 **테이블** 구성 요소를 찾아 캔버스 중앙으로 끕니다.
1. 페이지에 방금 추가한 테이블 구성 요소를 선택합니다.
1. 오른쪽 **속성** 메뉴에서 **소스** 드롭다운을 선택하고 **자동화**를 선택합니다.
1. **자동화** 드롭다운을 선택하고 **getFiles** 자동화를 선택합니다. 테이블은 **getFiles** 자동화의 출력을 콘텐츠로 사용합니다.
1. 파일 이름으로 채울 열을 추가합니다.
1. 오른쪽 **속성** 메뉴의 **열** 옆에 있는 **\$1 추가**를 선택합니다.
1. 방금 추가된 **Column1** 열 오른쪽에 있는 화살표 아이콘을 선택합니다.
1. **열 레이블**의 경우 열의 이름을 로 바꿉니다**Filename**.
1. **값**에 **\$1\$1currentRow.Key\$1\$1**를 입력합니다.
1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.
1. 테이블 작업을 추가하여 행에서 파일을 삭제합니다.
1. 오른쪽 **속성** 메뉴의 **작업** 옆에 있는 **\$1 추가**를 선택합니다.
1. **작업**에서 **버튼**의 이름을 로 변경합니다**Delete**.
1. 방금 이름이 변경된 **삭제** 작업 오른쪽에 있는 화살표 아이콘을 선택합니다.
1. **클릭 시** **\$1 작업 추가**를 선택하고 **자동화 호출을** 선택합니다.
1. 추가한 작업을 선택하여 구성합니다.
1. **함수 이름**에 **DeleteRecord**를 입력합니다.
1. **자동화 호출**에서를 선택합니다**deleteFile**.
1. 파라미터 텍스트 상자에를 입력합니다**\$1\$1currentRow.Key\$1\$1**.
1. **값**에 **\$1\$1currentRow.Key\$1\$1**를 입력합니다.
1. 오른쪽 패널에서 **구성 요소를** 선택하여 구성 요소 메뉴를 봅니다. 파일을 표시하는 두 가지 옵션이 있습니다.
+ `.png`, `.jpeg`또는 `.jpg` 확장자가 있는 파일을 볼 수 있는 **이미지 뷰어**입니다.
+ **PDF 파일을 볼 수 있는 PDF 뷰어** 구성 요소입니다.
이 자습서에서는 **PDF 뷰어** 구성 요소를 추가하고 구성합니다.
1. **PDF 뷰어** 구성 요소를 추가합니다.
1. 오른쪽 **구성 요소** 페이지에서 **PDF 뷰어** 구성 요소를 찾아 테이블 구성 요소 아래의 캔버스로 끕니다.
1. 방금 추가된 **PDF 뷰어** 구성 요소를 선택합니다.
1. 오른쪽 **속성** 메뉴에서 **소스** 드롭다운을 선택하고 **자동화**를 선택합니다.
1. **자동화** 드롭다운을 선택하고 **viewFile** 자동화를 선택합니다. 테이블은 **viewFile** 자동화의 출력을 콘텐츠로 사용합니다.
1. 파라미터 텍스트 상자에를 입력합니다**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. 오른쪽 패널에는 **파일 이름** 필드도 있습니다. 이 필드의 값은 PDF 뷰어 구성 요소의 헤더로 사용됩니다. 이전 단계와 동일한 텍스트를 입력합니다**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### **UploadFile** 페이지에 구성 요소 추가
**UploadFile** 페이지에는 구성된 Amazon S3 버킷에 파일을 선택하고 업로드하는 데 사용할 수 있는 파일 선택기가 포함되어 있습니다. 사용자가 파일을 선택하고 **업로드하는 데 사용할 수 있는 S3 ** 업로드 구성 요소를 페이지에 추가합니다.
1. 왼쪽 **페이지** 패널에서 **UploadFile** 페이지를 선택합니다.
1. 오른쪽 **구성 요소** 페이지에서 **S3 업로드** 구성 요소를 찾아 캔버스 중앙으로 끕니다.
1. 페이지에 방금 추가한 S3 업로드 구성 요소를 선택합니다.
1. 오른쪽 **속성** 메뉴에서 구성 요소를 구성합니다.
1. **커넥터** 드롭다운에서 사전 요구 사항에서 생성된 Amazon S3 커넥터를 선택합니다.
1. **버킷**에 Amazon S3 버킷의 이름을 입력합니다.
1. **파일 이름**에 **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**를 입력합니다.
1. **최대 파일 크기****5**에 텍스트 상자에를 입력하고 드롭다운에서 **MB**가 선택되어 있는지 확인합니다.
1. **트리거** 섹션에서 다음 단계를 수행하여 업로드 성공 또는 실패 후 실행되는 작업을 추가합니다.
업로드 성공 후 실행되는 작업을 추가하려면:
1. **성공 시** **\$1 작업 추가**를 선택하고 **탐색**을 선택합니다.
1. 추가한 작업을 선택하여 구성합니다.
1. **탐색 유형**에서 **페이지를** 선택합니다.
1. **이동에서**를 선택합니다**FileList**.
1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.
업로드 실패 후 실행되는 작업을 추가하려면:
1. **실패 시** **\$1 작업 추가**를 선택하고 **탐색**을 선택합니다.
1. 추가한 작업을 선택하여 구성합니다.
1. **탐색 유형**에서 **페이지를** 선택합니다.
1. **이동에서**를 선택합니다**FailUpload**.
1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.
### **FailUpload** 페이지에 구성 요소 추가
**FailUpload** 페이지는 사용자에게 업로드 실패를 알리는 텍스트 상자가 포함된 간단한 페이지입니다.
1. 왼쪽 **페이지** 패널에서 **FailUpload** 페이지를 선택합니다.
1. 오른쪽 **구성 요소** 페이지에서 **텍스트** 구성 요소를 찾아 캔버스 중앙으로 끕니다.
1. 페이지에 방금 추가한 텍스트 구성 요소를 선택합니다.
1. 오른쪽 **속성** 메뉴의 **값에**를 입력합니다**Failed to upload, try again**.
## 앱 보안 설정 업데이트
App Studio의 모든 애플리케이션에는 외부 미디어 또는 리소스를 제한하는 데 사용할 수 있는 콘텐츠 보안 설정 또는 객체를 업로드할 수 있는 Amazon S3의 도메인이 있습니다. 기본 설정은 모든 도메인을 차단하는 것입니다. 애플리케이션에서 Amazon S3에 객체를 업로드하려면 객체를 업로드할 도메인을 허용하도록 설정을 업데이트해야 합니다.
**도메인이 Amazon S3에 객체를 업로드하도록 허용하려면**
1. **앱 설정** 탭을 선택합니다.
1. **콘텐츠 보안 설정** 탭을 선택합니다.
1. **Connect 소스**에서 **모든 연결 허용**을 선택합니다.
1. **저장**을 선택합니다.
## 다음 단계: 테스트용 애플리케이션 미리 보기 및 게시
이제 애플리케이션을 테스트할 준비가 되었습니다. 애플리케이션 미리 보기 및 게시에 대한 자세한 내용은 섹션을 참조하세요[애플리케이션 미리 보기, 게시 및 공유](applications-preview-publish-share.md).
# App Studio 앱에서 Lambda 함수 호출
이 자습서에서는 App Studio를 Lambda에 연결하고 앱에서 Lambda 함수를 호출하는 방법을 보여줍니다.
## 사전 조건
이 안내서에서는 다음 사전 조건을 완료했다고 가정합니다.
1. App Studio 앱을 생성했습니다. 없는 경우 자습서에서 사용할 빈 앱을 생성할 수 있습니다. 자세한 내용은 [애플리케이션 생성](applications-create.md) 단원을 참조하십시오.
**참고**
이 자습서를 따르고 구성하는 방법을 배우는 데 Lambda 함수가 필요하지 않지만 앱을 올바르게 구성했는지 확인하는 데 Lambda 함수가 있으면 도움이 될 수 있습니다. 이 자습서에는 Lambda 함수 생성에 대한 정보가 포함되어 있지 않습니다. 자세한 내용은 [AWS Lambda 개발자 안내서](https://docs.aws.amazon.com/lambda/latest/dg/)를 참조하세요.
## Lambda 커넥터 생성
App Studio 앱에서 Lambda 함수를 사용하려면 커넥터를 사용하여 App Studio를 Lambda에 연결하여 함수에 대한 액세스를 제공해야 합니다. App Studio에서 커넥터를 생성하려면 관리자여야 합니다. Lambda 커넥터 생성 단계를 포함하여 Lambda 커넥터 생성에 대한 자세한 내용은 섹션을 참조하세요[에 연결 AWS Lambda](connectors-lambda.md).
## 자동화 생성 및 구성
자동화는 애플리케이션의 로직을 정의하는 데 사용되며 작업으로 구성됩니다. 앱에서 Lambda 함수를 호출하려면 먼저 자동화에 *Lambda 호출* 작업을 추가하고 구성합니다. 다음 단계에 따라 자동화를 생성하고 *Lambda 호출* 작업을 추가합니다.
1. 앱을 편집하는 동안 **자동화** 탭을 선택합니다.
1. **\$1 자동화 추가**를 선택합니다.
1. 오른쪽 **작업** 메뉴에서 **Lambda 호출**을 선택하여 자동화에 단계를 추가합니다.
1. 캔버스에서 새 Lambda 단계를 선택하여 속성을 보고 구성합니다.
1. 오른쪽 **속성** 메뉴에서 다음 단계를 수행하여 단계를 구성합니다.
1. **커넥터**에서 App Studio를 Lambda 함수에 연결하기 위해 생성된 커넥터를 선택합니다.
1. **함수 이름**에 Lambda 함수의 이름을 입력합니다.
1. **함수**에서 Lambda 함수에 전달할 이벤트를 입력합니다. 몇 가지 일반적인 사용 사례 예제는 다음 목록에 나와 있습니다.
+ 파일 이름 또는 기타 문자열과 같은 자동화 파라미터의 값 전달: `varName: params.paramName`
+ 이전 작업의 결과 전달: `varName: results.actionName1.data[0].fieldName`
+ *루프* 작업 내에 *Lambda 호출* 작업을 추가하는 경우 파라미터와 유사한 각 반복 항목에서 필드를 보낼 수 있습니다. `varName: currentItem.fieldName`
1. **모의 출력** 필드는 커넥터가 활성화되지 않은 미리 보기 중에 앱을 테스트하기 위한 모의 출력을 제공하는 데 사용할 수 있습니다.
## 자동화를 실행하도록 UI 요소 구성
이제 Lambda 함수를 호출하는 작업으로 구성된 자동화가 있으므로 자동화를 실행하도록 UI 요소를 구성할 수 있습니다. 이 자습서에서는 클릭 시 자동화를 실행하는 버튼을 생성합니다.
**작은 정보**
자동화 *호출 작업을 사용하여 다른 자동화에서 자동화*를 실행할 수도 있습니다.
**버튼에서 자동화를 실행하려면**
1. 앱을 편집하는 동안 **페이지** 탭을 선택합니다.
1. 오른쪽 메뉴에서 **버튼** 구성 요소를 선택하여 페이지에 버튼을 추가합니다.
1. 새 버튼을 선택하여 구성합니다.
1. 오른쪽 **속성** 메뉴**의 트리거**에서 **\$1 추가**를 선택하고 **자동화 호출을** 선택합니다.
1. 새 자동화 호출 트리거를 선택하여 구성합니다.
1. **자동화 호출**에서 Lambda 함수를 호출하는 자동화를 선택하고 자동화에 전송할 파라미터를 구성합니다.
이제 앱에서이 버튼을 선택하면 구성된 자동화가 실행됩니다.
## 다음 단계: 테스트용 애플리케이션 미리 보기 및 게시
이제 애플리케이션을 테스트할 준비가 되었습니다. 개발 환경에서 앱을 미리 볼 때 커넥터는 활성화되지 않으므로 커넥터로 연결할 수 있으므로 미리 보는 동안 자동화를 테스트할 수 없습니다 AWS Lambda. 커넥터에 의존하는 앱의 기능을 테스트하려면 앱을 테스트 환경에 게시해야 합니다. 애플리케이션 미리 보기 및 게시에 대한 자세한 내용은 섹션을 참조하세요[애플리케이션 미리 보기, 게시 및 공유](applications-preview-publish-share.md).