연습 - 캔버스 앱에 데이터 원본 추가 및 기능 페이지 디자인

8분

Power Apps에서 데이터를 기존 애플리케이션 또는 처음부터 빌드하는 애플리케이션에 연결할 수 있습니다. 앱은 SharePoint, Microsoft Dataverse, Salesforce, OneDrive 또는 기타 데이터 원본에 연결할 수 있습니다.

이 애플리케이션의 기본 데이터 원본으로 SharePoint를 사용할 예정입니다. SharePoint 사이트에 연결하여 사용자 지정 목록에서 앱을 자동으로 생성하거나, 기존 앱에 데이터를 추가하기 전에 연결을 만들거나, 처음부터 앱을 빌드할 수 있습니다.

SharePoint 사이트 만들기

Microsoft 조직 자격 증명을 사용하여 SharePoint 포털 에 로그인합니다.
SharePoint 시작 페이지에서 + 사이트 만들기 를 선택하여 SharePoint 사이트를 만듭니다.
SharePoint 시작 페이지에서 다음 정보를 찾을 수 있습니다.
- 사이트 유형을 선택합니다. 선택 항목은 커뮤니케이션 사이트 또는 팀 사이트입니다. 통신 사이트를 선택합니다.
- 사이트에 적합한 이름을 입력합니다. 예를 들어 Easy Sales입니다.
- 필요한 경우 사이트 설명을 추가합니다(선택 사항).
- 드롭다운에서 원하는 언어 를 선택합니다.
마침을 선택하여 데이터를 로드할 SharePoint 사이트를 만듭니다.

최신 SharePoint 사이트가 만들어지고 몇 초 안에 사용할 준비가 된 것입니다. 이제 새로 만든 사이트에서 목록, 문서 라이브러리, 페이지 등을 만들 수 있습니다.

비고

팀 사이트를 선택한 경우 Microsoft 365 그룹도 만들어집니다.

SharePoint 목록 만들기

SharePoint 목록은 테이블, 스프레드시트 또는 단순 데이터베이스와 유사한 구조로 데이터를 수집합니다. 숫자, 텍스트, 첨부 파일, 이미지 등 다양한 유형의 정보를 포함할 수 있습니다.

Easy Sales 애플리케이션의 경우 소파, 의자, 테이블, 카펫 등 모든 제품 범주에 대한 세부 정보가 포함된 목록을 만듭니다.

간편 판매라는 이름으로 새로 만든 SharePoint 사이트에서 + 새 드롭다운을 선택한 다음 목록을 선택하여 SharePoint 목록을 만듭니다.
목록 만들기 창에서 빈 목록을 선택하여 SharePoint 목록을 처음부터 만듭니다.
다음과 같이 만들기 창을 구성합니다.
- 목록에 적합한 이름을 입력합니다. 예를 들어 Easy Sales입니다.
- 필요한 경우 설명을 입력합니다(선택 사항).
- 사이트 탐색에 표시 확인란을 선택한 상태로 둡니다.
- 선택하고생성합니다.

SharePoint 목록에 데이터 추가

목록이 만들어지면 데이터를 추가해야 합니다. 여기서 "데이터"는 특정 제품의 세부 정보를 의미합니다. 제품 세부 정보에는 다음과 같은 정보가 포함됩니다: 이름, 이미지, 가격, 크기, 무게, 색상, 주요 재료, 영역, 높이 및 혼합 현실에서 볼 수 있는 3D 모델/이미지.

만든 간편 판매 목록에서 + 열 추가 를 선택하여 특정 형식의 열을 추가합니다. 아래 목록에서는 열 이름 - 열 형식 형식의 이름과 형식을 사용하여 만들어야 하는 열을 보여 줍니다.
- 이름: 텍스트 한 줄
- ImageLink: 텍스트 한 줄
- 가격: 한 줄 텍스트
- 차원: 텍스트 한 줄
- 가중치: 텍스트 한 줄
- 색: 텍스트 한 줄
- PrimaryMaterial: 텍스트 한 줄
- 높이: 숫자
- 깊이: 숫자
- 너비: 숫자
- 가격/cm2: 숫자
- ProductCategory: 텍스트 한 줄
- FileType: 텍스트 한 줄
드롭다운에서 열 형식을 선택합니다. 예를 들어 한 줄의 텍스트를 선택합니다.

열 만들기 탭에 열 의 세부 정보를 입력하고 저장을 선택합니다.

이전 목록의 나머지 열에 대해 동일한 절차를 반복합니다.

비고

SharePoint 목록을 만든 후 이름 이름을 바꿀 수 있는 기본 제목 열이 만들어집니다.
열을 추가한 후에는 이러한 열 아래에 실제 데이터를 추가해야 합니다. 네 개의 목록 모두에 대한 모든 제품 세부 정보가 포함된 사용자 지정 폴더를 다운로드하여 열에 데이터 추가를 시작합니다. 데이터에 액세스하려면 다음 링크를 선택하고 페이지의 오른쪽 위에 있는 추가 파일 작업 단추(...)를 선택하고 다운로드를 선택합니다.

Power Apps 사용자 지정 폴더
+ 새로 만들기를 선택하여 항목을 추가한 다음 다운로드한 Excel 파일에 제공된 대로 필요한 세부 정보를 입력합니다. 저장을 선택하여 입력한 세부 정보를 저장합니다.

비고

그리드 보기를 사용하면 다양한 행 또는 열에 정보를 자유롭게 추가할 수 있습니다.
그림과 같이 해당 열에 데이터를 추가하기 시작합니다.

비고

자신의 이미지를 포함하려는 경우 ImageLink 열 아래에 인터넷에서 사용할 수 있는 공용 이미지의 이미지 링크를 추가할 수 있습니다. 이미지 주소 복사 옵션을 마우스 오른쪽 단추로 클릭하고 선택하여 이미지 링크를 가져올 수 있습니다.

비고

카펫 범주 목록에 높이, 깊이 및 너비 값이 필요하지 않습니다. 이 제품 범주는 MR 세션의 측정값 중에 측정된 영역 값을 차지하며 계산된 영역에 따라 카펫의 가격을 제공합니다. 그러나 계산 프로세스를 지원하기 위해 Price/cm2 열을 추가했습니다.

연결 만들기

이제 애플리케이션에 필요한 모든 데이터가 SharePoint 목록에 저장되므로 Power Apps에서 연결을 설정합니다. 연결이 설정되면 애플리케이션을 통해 SharePoint 데이터에 쉽게 액세스할 수 있습니다.

연결 만들기를 시작하려면 Power Apps 에 로그인하고 왼쪽 탐색 모음에서 연결을 선택합니다. 그런 다음, 왼쪽 위 모서리 근처에서 + 새 연결을 선택합니다.
SharePoint를 선택합니다. SharePoint 목록에 필요한 데이터를 저장했으므로 SharePoint를 선택합니다.
SharePoint Online에 연결하려면 직접 연결(클라우드 서비스)을 선택한 다음 만들기를 선택한 다음 메시지가 표시되면 자격 증명을 제공합니다.
연결이 만들어지고 처음부터 앱을 빌드할 수 있습니다.

비고

연결을 만든 경우에도 SharePoint 목록에 저장된 데이터를 추가, 편집 및 삭제할 수 있습니다. 모든 변경 내용은 연결을 통해 애플리케이션에 반영됩니다.

SharePoint 데이터를 기반으로 Easy Sales 애플리케이션을 빌드한 다음 원하는 경우 다른 원본의 데이터를 추가해 보겠습니다. 이 절차에 따라 애플리케이션의 기본 페이지 중 일부를 디자인할 수 있습니다. 예를 들어 시작 화면, 제품 페이지 및 제품 목록 페이지를 디자인하는 방법을 알아봅니다. Power Apps 갤러리 컨트롤을 통해 SharePoint 목록에 저장된 데이터에도 액세스할 수 있습니다.

빈 앱 열기

Power Apps 홈 페이지로 이동한 다음, 왼쪽 메뉴에서 만들기를 선택합니다. 빈 앱을 선택한 다음, 빈 캔버스 앱에서 만들기를 클릭합니다.
앱의 이름을 지정합니다. 예를 들어 Easy-Sales입니다. 휴대폰을 선택한 다음 만들기를 선택합니다.

Power Apps Studio는 휴대폰용 빈 앱을 만듭니다.

비고

다양한 디바이스에 대한 앱을 처음부터 디자인할 수 있지만 이 항목에서는 휴대폰용 앱을 디자인하는 데 중점을 둡니다.
Power Apps Studio 시작 대화 상자가 열리면 건너뛰기를 선택합니다.

데이터에 연결

Power App에 데이터를 포함하려면 애플리케이션의 커넥터를 통해 데이터에 연결해야 합니다. 모든 데이터를 SharePoint 목록에 저장했으므로 커넥터 중 하나로 SharePoint 를 선택합니다.

Power Apps Studio의 왼쪽에서 데이터 옵션을 선택합니다.
데이터 창을 연 후 데이터 추가 단추를 선택하여 데이터에 연결합니다.
데이터 원본 선택 창에서 커넥터 섹션을 확장하고 SharePoint 옵션을 선택합니다.
이전 연습에서는 이미 연결을 만들었습니다. 만든 연결을 선택하여 애플리케이션에 데이터를 추가합니다. Easy Sales라는 이름으로 만든 SharePoint 사이트를 선택합니다.
Easy Sales SharePoint 사이트를 선택하면 해당 사이트에서 만든 모든 목록이 표시됩니다. 다음으로 애플리케이션과 관련하여 만든 SharePoint 목록을 선택하고 연결을 클릭합니다.
필요한 모든 데이터가 연결되고 애플리케이션에서 사용할 준비가 된 것입니다. 이제 애플리케이션 빌드를 시작할 수 있습니다.

시작 화면 만들기

Power Apps Studio 왼쪽에서 트리 보기 옵션을 선택합니다. Power Apps Studio에 이미 빈 화면이 있어야 합니다. 그렇지 않은 경우 홈 탭에서 화면 유형 목록을 여는 새 화면 옆의 아래쪽 화살표를 선택합니다. 그런 다음 공백 을 선택하여 빈 화면을 만듭니다.
화면 이름 옆에 있는 세 점 아이콘(...)을 선택한 후, 이름 바꾸기 옵션을 선택하여 화면 이름을 Splash 화면으로 변경합니다.
새로 만든 화면을 선택하여 화면 오른쪽의 속성 탭에서 속성을 변경합니다.
배경 이미지 속성 옆에 있는 드롭다운을 선택하여 화면에 이미지를 추가합니다. + 이미지 파일 추가를 선택하여 다운로드한 로고 파일을 선택합니다.
이미지 위치를 맞춤 으로 설정하여 전체 이미지가 지정된 크기에 맞도록 합니다. 맞춤 옵션은 이미지의 크기를 비례적으로 조정하고 이미지를 자르지 않습니다.
삽입 탭에서 입력 드롭다운을 확장하고 타이머를 선택합니다. 그런 다음 화면에서 단추를 끌어 원하는 위치에 배치합니다.
타이머 속성 중 일부를 편집하려면 왼쪽 위 모서리에 있는 속성 드롭다운을 사용하거나 속성 창을 사용할 수 있습니다. 다음과 같이 속성을 설정합니다.
- 자동 시작: true
- 기간: 2000
- 표시: false
  
  비고
  
  기본적으로 기간은 밀리초 단위로 측정됩니다. 1초 = 1000밀리초 이후 기간 값으로 2000을 입력합니다.
시작 화면을 2초 동안만 표시한 다음 홈 페이지로 전환하려고 합니다. 이전 단계에서 수행한 것처럼 빈 화면을 만들고 이름을 홈 페이지로 바꿉니다. 나중에 시작 화면에 추가된 타이머 단추를 선택하고 OnTimerEnd 속성을 구성합니다. false를 다음 콘텐츠로 바꿉다.
```
Navigate('Home Page',ScreenTransition.Fade)
```
파일> 저장으로 이동하여 애플리케이션을저장합니다. 다음으로 클라우드 옵션을 선택하고 저장을 선택합니다.

홈 페이지 만들기

이전에 만든 홈 페이지를 선택합니다. 4개의 단추를 삽입하려면 삽입 탭 으로 이동하고 단추 옵션을 선택하여 화면에 단추를 추가합니다. 필요에 따라 이러한 단추의 크기와 위치를 조정합니다. 각각 Sofas_button, Chairs_button, Tables_button 및 Carpets_button 이름을 바꿉니다.
단추의 표시 텍스트를 변경하여 소파, 의자, 테이블 및 카펫과 같은 제품 범주를 나타냅니다.
이러한 단추를 사용하여 다양한 범주의 제품 목록으로 이동합니다. 이렇게 하려면 제품 범주에 따라 SharePoint 목록에서 제품을 필터링해야 합니다. 두 개의 새 빈 화면을 만들고 이름을 각각 제품 및 카펫으로 바꿉니다.
새로 만든 Sofas_button 단추를 선택하고 OnSelect 속성을 구성합니다. 단추를 선택한 후에는 이전 단계에서 만든 제품 목록 페이지로 이동해야 합니다. false를 다음 코드로 바꿉다.
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
비고

ID는 일부 할당된 값을 가진 컨텍스트 변수입니다. 이 값은 Navigate 함수에 언급된 대상 페이지에 전달됩니다. 변수에 할당된 값은 제품 범주를 기준으로 제품을 필터링합니다.
다른 세 개의 단추에 대해 동일한 절차를 반복합니다. 다시 Navigate 함수에서 적절한 화면 이름을 제공해야 합니다. 예를 들어 의자, 테이블, 카펫 버튼의 OnSelect 속성을 구성하려면 다음과 같이 Navigate 함수를 사용합니다.
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
팁 (조언)

진행률을 저장하려면 맨 위에 있는 파일 탭을 선택하고 저장 옵션을 선택합니다. Ctrl+S를 사용하여 진행률을 저장할 수도 있습니다.
비고

Navigate 함수의 기본 구문은 Navigate(Screen [, Transition [, UpdateContextRecord]])입니다.
- 화면: 필수. 표시할 화면입니다.
- 전환: 선택 사항입니다. 현재 화면과 다음 화면 사이에 사용할 시각적 전환입니다. 기본값은 None입니다.
- UpdateContextRecord: 선택 사항입니다. 열 하나 이상의 이름 및 각 열의 값을 포함하는 레코드입니다. 이 레코드는 UpdateContext 함수에 전달된 것처럼 새 화면의 컨텍스트 변수를 업데이트합니다.
팁 (조언)

키보드에서 F5 키를 누르거나 Power Apps Studio의 오른쪽 위 모서리에 있는 재생 단추를 클릭하여 애플리케이션을 테스트할 수 있습니다.

갤러리 컨트롤 사용

이제 제품 범주를 추가했으므로 각 범주에 제품 목록을 표시합니다. Power Apps에서는 갤러리 컨트롤 을 사용하여 데이터 레코드를 확인합니다.

제품 화면의 삽입 탭에서 갤러리>세로를 선택하여 갤러리 컨트롤을 화면에 추가합니다.
이름을 Gallery_products로 변경하십시오. 왼쪽 창의 속성 탭에서 다음과 같이 Items 속성을 구성합니다.
```
If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))
```
제품 범주에 따라 SharePoint 목록에 저장된 제품을 필터링합니다. 컨텍스트 변수는 필터링 프로세스에 사용됩니다.
[편집]을 선택하여 > 창에서 갤러리필드 속성을 구성합니다.
- Subtitle1 제목에 가격을 할당합니다.
- Title1 제목에 제목을 할당합니다.
이전 필드를 할당하면 갤러리에 데이터가 반영되는 것을 볼 수 있습니다.
필요에 따라 Gallery_products 크기를 조정합니다. ImageLink를 Image1 제목에 추가하려면 갤러리에서 이미지를 선택하고 이 코드 줄을 추가하여 속성 탭에서 이미지 속성을 구성합니다.
```
ThisItem.ImageLink
```
이제 레이블 옵션을 선택하여 화면 맨 위에 레이블 을 삽입해 보겠습니다. 그런 다음 그림과 같이 위치, 색 및 텍스트 표시를 사용자 지정합니다.
사용자가 필요할 때 홈페이지로 이동할 수 있도록 이전에 추가한 레이블 위에 뒤로 아이콘을 추가합니다. 뒤로 아이콘을 추가하려면 아이콘 드롭다운을 확장하고 뒤로 아이콘을 선택합니다.
뒤로 아이콘을 올바르게 배치하고 필요한 경우 표시 색을 변경합니다. 다음을 추가하여 OnSelect 속성을 구성합니다.
```
Navigate('Home Page',ScreenTransition.Cover)
```
카펫 페이지에 대해 동일한 절차를 따릅니다. 다음과 같은 방법으로 Carpets 페이지에 추가된 갤러리의 Items 속성을 구성합니다.
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
팁 (조언)

진행률을 저장하려면 맨 위에 있는 파일 탭을 선택하고 저장 옵션을 선택합니다. Ctrl+S를 사용하여 진행률을 저장할 수도 있습니다.

이전 단계를 구현한 후 애플리케이션의 모양은 다음과 같습니다. 응용 프로그램에는 훌륭한 시작 화면, 홈 페이지 및 제품을 찾아보는 제품 인벤토리가 포함됩니다.

피드백

이 페이지가 도움이 되었나요?