오프라인에서 사용 가능한 캔버스 앱 개발Develop offline-capable canvas apps

모바일 사용자 생산성을 높이도록 할 경우가 제한 된 경우 또는 연결 되지 않은 합니다.Mobile users often need to be productive even when they have limited or no connectivity. 캔버스 앱을 빌드할 때 이러한 작업을 수행할 수 있습니다.When you build a canvas app, you can perform these tasks:

  • PowerApps Mobile 열고 오프 라인 상태인 경우 앱을 실행 합니다.Open PowerApps Mobile and run apps when offline.
  • 연결 신호 개체를 사용하여 앱이 오프라인 상태인지, 온라인 상태인지, 요금제 연결인지를 확인합니다.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • 컬렉션을 사용하고 오프라인에서 기본 데이터 스토리지에 LoadData 및 SaveData와 같은 기능을 활용합니다.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

제한 사항Limitations

LoadDataSaveData는 결합하여 로컬 장치에 적은 양의 데이터를 저장하는 간단한 메커니즘을 형성합니다.LoadData and SaveData combine to form a simple mechanism to store small amounts of data on a local device. 이러한 함수를 사용하여 앱에 간단한 오프라인 기능을 추가할 수 있습니다.By using these functions, you can add simple offline capabilities to your app.

이러한 함수는 메모리 내 컬렉션에서 작동하기 때문에 사용 가능한 앱 메모리 양의 제한을 받습니다.These functions are limited by the amount of available app memory because they operate on an in-memory collection. 사용 가능한 메모리는 장치, 운영 체제, PowerApps Mobile이 사용하는 메모리 및 화면 및 컨트롤 측면에서의 앱의 복잡성에 따라 달라질 수 있습니다.Available memory can vary depending on the device, the operating system, the memory that PowerApps Mobile uses, and the complexity of the app in terms of screens and controls. 겨우 몇 메가바이트의 데이터를 저장하는 경우 예상 실행 장치에 필요한 시나리오를 사용하여 앱을 테스트합니다.If you store more than a few megabytes of data, test your app with expected scenarios on the devices on which you expect it to run. 일반적으로 사용 가능한 메모리의 30-70 메가바이트 해야 합니다.You'll generally have 30-70 megabytes of available memory.

함수 수도 없는 자동으로 병합 충돌을 해결할 장치가 온라인 상태가 되 면 합니다.The functions also don't automatically resolve merge conflicts when a device comes online. 저장 되는 데이터와 다시 연결을 처리 하는 방법에 대 한 구성 작성자 최대 경우 식을 작성 합니다.Configuration on what data is saved and how to handle reconnection is up to the maker when writing expressions.

오프 라인 기능에 대 한 업데이트를이 항목에 돌아와서 구독할 합니다 PowerApps 블로그합니다.For updates on offline capabilities, return to this topic, and subscribe to the PowerApps blog.

개요Overview

오프 라인 시나리오를 디자인할 때 데이터를 사용 하 여 앱이 어떻게 작동를 먼저 고려해 야 합니다.When you design offline scenarios, you should first consider how your apps work with data. PowerApps에서 앱의 집합을 통해 데이터를 주로 액세스할 커넥터 SharePoint, Office 365 및 Common Data Service와 같은 플랫폼에서 제공 하는 합니다.Apps in PowerApps primarily access data through a set of connectors that the platform provides, such as SharePoint, Office 365, and Common Data Service. 앱이 RESTful 엔드포인트를 제공하는 모든 서비스에 액세스할 수 있도록 사용자 지정 커넥터를 빌드할 수 있습니다.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Web API 또는 Azure Functions와 같은 서비스일 수 있습니다.This could be a Web API or a service such as Azure Functions. 이러한 모든 커넥터는 인터넷을 통해 HTTPS를 사용합니다. 즉, 사용자가 서비스에서 제공하는 데이터 및 모든 기능에 액세스하려면 온라인 상태여야 합니다.All these connectors use HTTPS over the Internet, which means your users must be online for them to access data and any other capabilities that a service offers.

커넥터를 포함하는 PowerApps 앱

오프라인 데이터 처리Handling offline data

PowerApps에서 있습니다 수 필터링, 검색, 정렬, 집계 및 데이터 소스에 관계 없이 일관 된 방식으로 데이터를 조작 합니다.In PowerApps, you can filter, search, sort, aggregate, and manipulate data in a consistent way regardless of the data source. SharePoint 목록 SQL databases 및 Common Data Service에 앱에서 메모리 내 컬렉션에서 범위를 원본입니다.Sources range from in-memory collections in the app to SharePoint lists to SQL databases and Common Data Service. 쉽게이 일관성으로 인해 앱이 다른 데이터 원본을 사용 하 여 대상을 변경할 수 있습니다.Because of this consistency, you can easily retarget an app to use a different data source. 무엇 보다도 오프 라인 시나리오를 사용할 수 있습니다 로컬 컬렉션 데이터 관리를 위한 응용 프로그램의 논리를 거의 변경 하지 않고 있습니다.More importantly for offline scenarios, you can use local collections for data management with almost no changes to an app's logic. 실제로 로컬 컬렉션은 오프라인 데이터를 처리하기 위한 기본 메커니즘입니다.In fact, local collections are the primary mechanism for handling offline data.

오프 라인 앱 빌드Build an offline app

앱 개발의 오프 라인 측면에 초점을를이 항목에서는 Twitter에 기반한 간단한 시나리오를 보여 줍니다.To keep the focus on the offline aspects of app development, this topic illustrates a simple scenario focused around Twitter. Twitter 게시물을 읽고, 동시에 오프 라인 트 윗을 제출할 수 있는 앱을 빌드합니다.You'll build an app that enables you to read Twitter posts and submit tweets while being offline. 앱이 온라인 상태가 되면 앱은 트윗을 게시하고 로컬 데이터를 다시 로드합니다.When the app comes online, the app posts tweets and reloads the local data.

높은 수준에서 앱이이 작업을 수행합니다.At a high level, the app performs these tasks:

  • 사용자가 앱을 열 때:When the user opens the app:

    • 장치가 온라인 상태인 경우 앱에서 Twitter 커넥터를 통해 데이터를 인출 하 고 해당 데이터를 사용 하 여 컬렉션을 채웁니다.If the device is online, the app fetches data through the Twitter connector and populates a collection with that data.
    • 장치가 오프 라인 상태인 경우 앱 데이터를 로컬 캐시 파일에서 사용 하 여 로드 된 LoadData 함수입니다.If the device is offline, the app loads the data from a local cache file by using the LoadData function.
    • 사용자는 트 윗을 제출할 수 있습니다.The user can submit tweets. 앱이 온라인 상태인 경우 직접 Twitter에 트 윗을 게시 하 고 로컬 캐시를 새로 고칩니다.If the app is online, it posts the tweets directly to Twitter and refreshes the local cache.
  • 5 분 마다 앱 온라인 상태일 때:Every five minutes while the app is online:

    • 앱의 로컬 캐시에서 모든 트 윗을 게시합니다.The app posts any tweets in the local cache.
    • 앱 로컬 캐시 새로 고침 및 사용 하 여 저장 합니다 SaveData 함수입니다.The app refreshes the local cache and saves it by using the SaveData function.

1 단계: 비어 있는 휴대폰 앱에 Twitter 추가Step 1: Add Twitter to a blank phone app

  1. PowerApps Studio 선택 파일 > 새로 만들기합니다.In PowerApps Studio, select File > New.
  2. 빈 앱 타일에서 전화 레이아웃을 선택합니다.On the Blank app tile, select Phone layout.
  3. 보기에서 데이터 원본을 선택합니다.On the View tab, select Data sources.
  4. 데이터데이터 원본 추가합니다.In the Data pane, select Add data source.
  5. 선택 새 연결 > Twitter > 만들기합니다.Select New Connection > Twitter > Create.
  6. 자격 증명을 입력 한 연결을 만들고 다음 닫습니다 합니다 데이터 창입니다.Enter your credentials, create the connection, and then close the Data pane.

2단계: 기존 트 윗을 수집Step 2: Collect existing tweets

  1. 트리 뷰에서를 설정한 후 해당 OnStart 속성을 다음이 수식:In the Tree view pane, select App, and then set its OnStart property to this formula:

    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" );
    

    트 윗을 로드 하는 수식Formula to load tweets

  2. 트리 보기 창에 대 한 줄임표 메뉴를 선택는 개체를 선택한 후 OnStart 실행 해당 수식을 실행 합니다.In the Tree view pane, select the ellipsis menu for the App object, and then select Run OnStart to run that formula.

    트 윗을 로드 하는 수식을 실행 합니다.Run formula to load tweets

    참고

    합니다 LoadData 하 고 SaveData 브라우저를 지원 하지 않으므로 함수 PowerApps Studio 오류가 표시 될 수 있습니다.The LoadData and SaveData functions might show an error in PowerApps Studio because browsers don't support them. 그러나에서는 수행 하며 일반적으로 장치에이 앱을 배포한 후 합니다.However, they'll perform normally after you deploy this app to a device.

이 수식은 장치가 온라인 인지 여부를 확인 합니다.This formula checks whether the device is online:

  • 장치가 온라인 상태인 경우 수식을 로드 검색어 "PowerApps"를 사용 하 여 최대 10 개의 트 윗을 LocalTweets 컬렉션입니다.If the device is online, the formula loads up to 10 tweets with the search term "PowerApps" into a LocalTweets collection.
  • 장치가 오프 라인 상태인 경우 수식을 사용할 수 있으면 "LocalTweets" 라는 파일에서 로컬 캐시를 로드 합니다.If the device is offline, the formula loads the local cache from a file called "LocalTweets" if it's available.
  1. 삽입 탭을 선택 갤러리 > 유연한 높이 비워 두면합니다.On the Insert tab, select Gallery > Blank flexible height.

  2. 설정 합니다 항목 의 속성을 갤러리 컨트롤을 LocalTweets입니다.Set the Items property of the Gallery control to LocalTweets.

  3. 갤러리 템플릿 3 개를 추가 레이블을 컨트롤을 설정 하 고는 텍스트 다음이 값 중 하나에 각 레이블의 속성:In the gallery template, add three Label controls, and set the Text property of each label to one of these values:

    • ThisItem.UserDetails.FullName & " (@" & ThisItem.UserDetails.UserName & ")"
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
    • ThisItem.TweetText
  4. 텍스트를 굵게 마지막 레이블에 갤러리에는이 예제와 유사 합니다.Make the text in the last label bold so that the gallery resembles this example.

    샘플 트 윗을 보여 주는 갤러리Gallery showing sample tweets

4단계: 연결 상태를 표시 합니다.Step 4: Show connection status

  1. 갤러리 아래의 레이블을 넣고 설정한 해당 Color 속성을 Red합니다.Under the gallery, insert a label, and then set its Color property to Red.

  2. 최신 레이블 설정 텍스트 속성을 다음이 수식:Set the newest label's Text property to this formula:

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

이 수식은 장치가 온라인 인지 여부를 결정 합니다.This formula determines whether the device is online. 이 경우 레이블을 연결 됨이 고, 그렇지 않으면 표시 오프 라인.If it is, the label shows Connected; otherwise, it shows Offline.

5단계: 트 윗을 작성 하는 상자를 추가 합니다.Step 5: Add a box to compose tweets

  1. 연결 상태 레이블 아래 삽입을 텍스트 입력 컨트롤을 바꾸거나 NewTweetTextInput합니다.Under the connection-status label, insert a Text input control, and rename it NewTweetTextInput.

  2. 텍스트 입력 상자를 설정 기본 속성을 ""입니다.Set the text-input box's Default property to "".

    상태 정보 및 텍스트 입력 상자는 갤러리Gallery over status info and text-input box

6단계: 트윗을 게시하는 단추 추가Step 6: Add a button to post the tweet

  1. 텍스트 입력 상자 아래에 추가 된 단추 설정 해당 텍스트 속성을이 값:Under the text-input box, add a Button control, and set its Text property to this value:

    "Tweet"

  2. 설정 단추 OnSelect 속성을 다음이 수식:Set the button's OnSelect property to this formula:

    If( Connection.Connected,
        Twitter.Tweet( "", {tweetText: NewTweetTextInput.Text} ),
        Collect( LocalTweetsToPost, {tweetText: NewTweetTextInput.Text} );
            SaveData( LocalTweetsToPost, "LocalTweetsToPost" )
    );
    Reset( NewTweetTextInput );
    
  3. OnStart 에 대 한 속성을 , 수식의 끝 줄을 추가:In the OnStart property for the App, add a line at the end of the formula:

    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
    

    주석 처리가 제거 된 줄을 사용 하 여 트 윗을 로드 하는 수식을 실행 합니다.Run formula to load tweets with uncommented line

이 수식은 장치가 온라인 인지 여부를 결정 합니다.This formula determines whether the device is online:

  • 장치가 온라인 상태인 경우 트 윗 즉시 게시 합니다.If the device is online, it posts the tweet immediately.
  • 트 윗을 캡처하고 장치가 오프 라인 상태인 경우는 LocalTweetsToPost 컬렉션 장치에 저장 합니다.If the device is offline, it captures the tweet in a LocalTweetsToPost collection and saves it to the device.

다음 수식은 텍스트 입력 상자에 텍스트를 다시 설정합니다.Then the formula resets the text in the text-input box.

7단계: 새 트 윗에 대 한 확인Step 7: Check for new tweets

  1. 단추 오른쪽에 추가 된 타이머 제어 합니다.On the right side of the button, add a Timer control.

    최종 앱Final apps

  2. 타이머를 설정할 기간 속성을 300000합니다.Set the timer's Duration property to 300000.

  3. 타이머를 설정할 AutoStart 하 고 반복 속성을 true합니다.Set the timer's AutoStart and Repeat properties to true.

  4. 타이머를 설정할 OnTimerEnd 을 다음이 수식으로:Set the timer's OnTimerEnd to this formula:

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

이 수식은 장치가 온라인 인지 여부를 결정 합니다.This formula determines whether the device is online. 앱의 모든 항목을 트 윗 인 경우는 LocalTweetsToPost 컬렉션 컬렉션을 지웁니다.If it is, the app tweets all the items in the LocalTweetsToPost collection and then clears the collection.

앱 테스트Test the app

  1. 인터넷에 연결 된 모바일 장치에서 앱을 엽니다.Open the app on a mobile device that's connected to the Internet.

    기존 트 윗 갤러리에 표시 되 고 상태가 Connected합니다.Existing tweets appear in the gallery, and the status shows Connected.

  2. 장치의 비행기 모드를 사용 하도록 설정 하 고 wifi를 사용 하지 않도록 설정 하 여 인터넷에서 장치를 분리 합니다.Disconnect the device from the Internet by enabling the device's airplane mode and disabling wi-fi.

    상태 레이블 앱 임을 보여 줍니다 오프 라인합니다.The status label shows that the app is Offline.

  3. 장치가 오프 라인 상태인 동안 쓰기를 포함 하는 트 윗 PowerApps를 선택한 후 합니다 트 윗 단추입니다.While the device is offline, write a tweet that includes PowerApps, and then select the Tweet button.

    트 윗에서 로컬로 저장 되는 LocalTweetsToPost 컬렉션입니다.The tweet is stored locally in the LocalTweetsToPost collection.

  4. 장치의 비행기 모드를 사용 하지 않도록 설정 하 고 wifi를 사용 하도록 설정 하 여 인터넷에 장치를 다시 연결 합니다.Reconnect the device to the Internet by disabling the device's airplane mode and enabling wi-fi.

    5 분 내에 앱 갤러리에 표시 되는 트 윗을 게시 합니다.Within five minutes, the app posts the tweet, which appears in the gallery.

이 문서를 통해 오프라인 앱을 빌드하기 위해 PowerApps에 있는 기능을 살펴보세요.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. 언제든지 포럼에 피드백을 보내고 PowerApps 커뮤니티 블로그에서 오프라인 앱의 예제를 공유해 주세요.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.