오프라인에서 사용 가능한 캔버스 앱 개발

아티클
04/20/2024

모바일 사용자는 연결이 제한되거나 연결할 수 없는 경우에도 생산성을 유지해야 하는 경우가 많습니다. 캔버스 앱을 빌드할 때 다음을 할 수 있습니다.

Power Apps Mobile을 열고 장치가 네트워크에 연결되어 있지 않을 때 앱을 실행합니다.
Connection 신호 개체를 사용하여 앱이 오프라인 상태인지, 온라인 상태인지, 요금제 연결인지를 확인합니다.
장치와 서버 간의 데이터를 동기화합니다.

앱이 Dataverse에 연결되면 오프라인 지원은 기본 제공입니다. Power Apps를 사용하면 데이터를 장치에 다운로드하고 변경 사항을 Dataverse에 다시 업로드할 수 있습니다. 앱이 Dataverse를 사용하지 않는 경우 컬렉션을 사용하고 오프라인일 때 기본 저장소로 LoadData 및 SaveData 함수를 활용할 수 있습니다.

참고

iOS, Android 및 Windows에서 네이티브 Power Apps Mobile 플레이어를 사용하여 앱을 실행하는 동안 캔버스 앱의 오프라인 기능을 사용할 수 있습니다.
웹 브라우저에서 실행되는 캔버스 앱은 모바일 디바이스에서 웹 브라우저를 사용하는 경우에도 오프라인으로 실행할 수 없습니다.
Teams의 캔버스 앱은 LoadData 및 SaveData 함수를 통해 1MB의 데이터로 제한됩니다—이는 적은 수의 텍스트 문자열, 숫자 및 날짜에 유용합니다. 이미지나 기타 매체의 사용은 이 제한에 적합하지 않습니다. 추가 정보: LoadData 및 SaveData 함수 참조

Dataverse 기반 캔버스 앱에서 오프라인 지원 활성화

Microsoft Dataverse 기반 캔버스 앱의 경우 오프라인 우선 환경에 내장된 오프라인 기능을 사용해야 합니다. 자세한 내용은 캔버스 앱에 대한 모바일 오프라인 설정 및 캔버스 앱 오프라인 작업을 참조하세요. 스위치를 켜면 네트워크 연결 여부에 관계없이 어디에서나 앱에서 Dataverse 데이터로 작업할 수 있습니다. 표준 Power Fx 수식으로 앱을 구축하면 오프라인 기능이 모든 복잡성을 처리해 줍니다.

다른 모든 커넥터에는 LoadData 및 SaveData를 사용하십시오.

이 섹션에는 Twitter 데이터를 사용한 예가 포함되어 있습니다. 연결이 필요하지 않은 더 간단한 예는 LoadData 및 SaveData 함수 참조에 있습니다.

Dataverse 데이터를 사용하지 않는 오프라인 지원 캔버스 앱을 만드는 방법을 알아보려면 이 비디오를 시청하십시오.

제한 사항

LoadData와 SaveData는 함께 로컬 장치에 소량의 데이터를 저장하는 간단한 메커니즘을 형성합니다. 이러한 함수를 사용하여 간단한 오프라인 기능을 앱에 추가할 수 있습니다.

이러한 함수는 메모리 내 컬렉션에서 작동하기 때문에 사용 가능한 앱 메모리 양이 제한됩니다. 사용 가능한 메모리는 장치, 운영 체제, Power Apps Mobile이 사용하는 메모리, 화면과 제어 측면의 앱 복잡성에 따라 달라질 수 있습니다. 몇 메가바이트 이상의 데이터를 저장할 경우 실행될 것으로 예상되는 장치에서 예상되는 상황으로 앱을 테스트하십시오. 일반적으로 사용 가능한 메모리는 30~70MB입니다.

함수는 장치가 온라인 상태가 될 때의 병합 충돌을 자동으로 해결하지 않습니다. 저장되는 데이터와 재연결을 처리하기 위한 구성은 식을 작성하는 개발자에 달려 있습니다.

오프라인 기능에 대한 업데이트된 내용을 보려면 이 항목으로 돌아가 Power Apps 블로그에 가입하십시오.

개요

오프라인 시나리오를 설계할 때는 먼저 앱이 데이터를 사용하는 방식을 고려해야 합니다. Power Apps의 앱은 주로 SharePoint, Office 365, Microsoft Dataverse와 같이 플랫폼에서 제공하는 커넥터 집합을 통해 데이터에 액세스합니다. 또한 앱이 RESTful 엔드포인트를 제공하는 서비스에 액세스할 수 있도록 사용자 지정 커넥터를 제작할 수도 있습니다. 이는 웹 API나 Azure Functions와 같은 서비스일 수 있습니다. 이러한 모든 커넥터는 인터넷을 통해 HTTPS를 사용합니다. 따라서 서비스에서 제공하는 데이터와 기타 기능에 액세스하려면 사용자가 온라인 상태여야 합니다.

Power Apps 앱과 커넥터.

오프라인 데이터 처리

Power Apps에서 데이터 원본에 관계없이 일관된 방식으로 데이터를 필터링, 검색, 정렬, 집계, 조작할 수 있습니다. 원본은 앱의 메모리 내 컬렉션에서 Microsoft Lists, SQL 데이터베이스 및 Dataverse를 사용하여 만든 목록에 이르기까지 다양합니다. 이러한 일관성 덕분에 다른 데이터 원본을 사용하도록 앱의 데이터 원본을 쉽게 다시 지정할 수 있습니다. 오프라인 시나리오에서는 무엇보다 중요한 것은 로컬 컬렉션을 사용하여 앱의 논리를 거의 변경하지 않고 데이터를 관리할 수 있다는 것입니다 실제로 로컬 컬렉션은 오프라인 데이터를 처리하기 위한 기본 메커니즘입니다.

오프라인 앱 빌드

이 항목에서는 앱 개발의 오프라인 측면에 초점을 맞추기 위해 Twitter를 사용한 간단한 시나리오를 설명합니다. 오프라인 상태로 유지되는 동안 Twitter 게시물을 읽고 트윗을 보낼 수 있는 앱을 빌드할 것입니다. 앱이 온라인 상태가 되면 앱은 트윗을 게시하고 로컬 데이터를 다시 로드합니다.

간략하게 설명하면 앱은 다음 작업을 합니다.

사용자가 앱을 열었을 때:
- 장치가 온라인 상태이면 앱은 Twitter 커넥터를 통해 데이터를 가져오고 이 데이터로 컬렉션을 채웁니다.
- 장치가 오프라인 상태이면 LoadData 함수를 사용하여 앱이 로컬 캐시 파일에서 데이터를 로드합니다.
- 사용자는 트윗을 보낼 수 있습니다. 앱이 온라인 상태이면 트윗을 Twitter에 직접 게시하고 로컬 캐시를 새로 고칩니다.
앱이 온라인 상태이면 5분마다 다음 작업을 합니다.
- 앱이 로컬 캐시에 트윗을 게시합니다.
- 앱이 로컬 캐시를 새로 고치고 SaveData 함수를 사용하여 저장합니다.

1단계: 빈 휴대폰 앱에 Twitter 추가

Phone 레이아웃으로 빈 캔버스 앱을 만듭니다.
보기 탭에서 데이터 원본을 선택합니다.
데이터 창에서 데이터 원본 추가를 선택합니다.
새 연결 > Twitter > 만들기를 선택합니다.
자격 증명을 입력하고 연결한 다음 데이터 창을 닫습니다.

2단계: 기존 트윗 수집

트리 보기 창에서 앱을 선택한 다음 OnStart 속성을 다음 수식으로 설정합니다.

If( Connection.Connected,
    ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
        Set( statusText, "Online data" ),
    LoadData( LocalTweets, "LocalTweets", true );
        Set( statusText, "Local data" )
);
SaveData( LocalTweets, "LocalTweets" );

트윗을 로드하는 수식.

트리 보기 창에서 앱 개체의 줄임표 메뉴를 선택한 다음 OnStart 실행을 선택하여 수식을 실행합니다.

참고

LoadData와 SaveData 함수를 브라우저에서 지원하지 않으면 Power Apps Studio에 오류가 표시될 수 있습니다. 그러나 이 앱을 장치에 배포한 후에는 정상적으로 실행됩니다.

이 수식은 장치가 온라인 상태인지 확인합니다.

장치가 온라인이면 이 수식은 "PowerApps" 검색어가 포함된 트윗을 최대 10개까지 LocalTweets 컬렉션에 로드합니다.
장치가 오프라인이면 수식은 사용 가능한 경우 "LocalTweets" 파일에서 로컬 캐시를 로드합니다.

3단계: 갤러리에 트윗 표시

삽입 탭에서 갤러리 > 유연한 높이(비어 있음) 를 선택합니다.
갤러리 컨트롤의 Items 속성을 LocalTweets로 설정합니다.
갤러리 템플릿에서 세 개의 레이블 컨트롤을 추가하고 각 레이블의 Text 속성을 다음 값 중 하나로 설정합니다.
- ThisItem.UserDetails.FullName & " (@" & ThisItem.UserDetails.UserName & ")"
- Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
- ThisItem.TweetText
갤러리가 이 예시와 비슷하도록 마지막 레이블의 텍스트를 굵게 표시하십시오.

4단계: 연결 상태 표시

갤러리에 레이블을 삽입한 다음 Color 속성을 Red로 설정합니다.
가장 최근 레이블의 Text 속성을 다음 수식으로 설정합니다.

If( Connection.Connected, "Connected", "Offline" )

이 수식은 장치가 온라인 상태인지 확인합니다. 온라인일 경우 레이블에는 연결됨이 표시되고, 그렇지 않으면 오프라인이 표시됩니다.

5단계: 트윗을 작성할 상자 추가

연결 상태 레이블에 텍스트 입력 컨트롤을 삽입하고 이름을 NewTweatTextInput으로 바꿉니다.
텍스트 입력 상자의 Default 속성을 ""로 설정합니다.

6단계: 트윗을 게시하는 버튼 추가

텍스트 입력 상자에 버튼 컨트롤을 추가하고 Text 속성을 다음 값으로 설정합니다.

"Tweet"

버튼의 OnSelect 속성을 다음 수식으로 설정합니다.

If( Connection.Connected,
    Twitter.Tweet( "", {tweetText: NewTweetTextInput.Text} ),
    Collect( LocalTweetsToPost, {tweetText: NewTweetTextInput.Text} );
        SaveData( LocalTweetsToPost, "LocalTweetsToPost" )
);
Reset( NewTweetTextInput );

앱의 OnStart 속성에서 수식 끝에 줄을 추가합니다.

If( Connection.Connected,
    ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 100} ) );
        Set( statusText, "Online data" ),
    LoadData( LocalTweets, "LocalTweets", true );
        Set( statusText, "Local data" )
);
SaveData( LocalTweets, "LocalTweets" );
LoadData( LocalTweetsToPost, "LocalTweetsToPost", true );  // added line

수식을 실행하여 댓글이 없는 트윗 로드.

이 수식은 장치가 온라인 상태인지 확인합니다.

장치가 온라인이면 즉시 트윗을 게시합니다.
장치가 오프라인이면 LocalTweetsToPost 컬렉션의 트윗을 캡처하여 장치에 저장합니다.

그런 다음 수식이 텍스트 입력 상자의 텍스트를 다시 설정합니다.

7단계: 새 트윗 확인

버튼 오른쪽에 타이머 컨트롤을 추가합니다.
타이머의 Duration 속성을 300000으로 설정합니다.
타이머의 AutoStart과 Repeat 속성을 true로 설정합니다.

타이머의 OnTimerEnd를 다음 수식으로 설정합니다.

If( Connection.Connected,
    ForAll( LocalTweetsToPost, Twitter.Tweet( "", {tweetText: tweetText} ) );
    Clear( LocalTweetsToPost );
    ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
    SaveData( LocalTweets, "LocalTweets" );
)

이 수식은 장치가 온라인 상태인지 확인합니다. 온라인이면 앱이 LocalTweetsToPost 컬렉션의 모든 항목을 트윗한 다음 컬렉션을 지웁니다.

앱 테스트

인터넷에 연결된 모바일 디바이스에서 Power Apps Mobile을 사용하여 앱을 엽니다.

기존 트윗이 갤러리에 나타나고 상태가 연결됨으로 표시됩니다.
장치의 비행기 모드를 키고 Wi-Fi를 꺼서 장치의 인터넷 연결을 끊습니다.

상태 레이블에 앱이 오프라인 상태로 표시됩니다.
장치가 오프라인 상태일 때 Power Apps이라는 단어가 있는 트윗을 작성한 다음 Tweet 버튼을 선택합니다.

트윗이 LocalTweetsToPost 컬렉션에 로컬로 저장됩니다.
장치의 비행기 모드를 끄고 Wi-Fi를 켜서 장치를 인터넷에 다시 연결합니다.

5분 안에 앱이 갤러리에 있는 트윗을 게시하게 됩니다.

이 문서로 Power Apps이 오프라인 앱을 빌드하기 위한 어떤 기능이 있는지 이해했기를 바랍니다. 언제든지 포럼에 피드백을 보내고 Power Apps 커뮤니티 블로그에서 오프라인 앱의 샘플을 공유해 주세요.

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).