PowerApps를 사용하여 오프라인에서 사용 가능한 앱 개발Develop offline-capable apps with PowerApps

모바일 앱 개발자 권한으로 직면하는 가장 일반적인 시나리오 중 하나는 제한된 연결 또는 연결되지 않았을 때 사용자가 생산성을 사용해야 하는 경우입니다.One of the most common scenarios you face as a mobile app developer is enabling your users to be productive when there is limited connectivity or no connectivity at all. PowerApps에는 오프라인에서 사용 가능한 앱을 개발하는 데 도움이 되는 기능 및 동작의 집합이 있습니다.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. 다음이 가능합니다.You can:

  • 오프라인에서 PowerApps 모바일 앱을 시작합니다.Launch the PowerApps mobile app when offline.
  • 오프라인에서 개발한 앱을 실행합니다.Run apps you develop 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.

오프라인에서 사용 가능한 앱을 빌드하는 방법How to build offline capable apps

오프라인 시나리오에서 가장 먼저 고려할 점은 앱에서 데이터를 사용하는 방법입니다.The first thing to think about in offline scenarios is 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 the 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의 가장 흥미로운 측면 중 하나는 데이터 원본에 관계 없이 일관된 방식으로 데이터를 필터, 검색, 정렬, 집계 및 조작할 수 있는 해당 집합의 기능 및 수식입니다.One of the most interesting aspects of PowerApps is its set of capabilities and formulas that enable you to 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 the Common Data Service. 이러한 일관성을 사용하면 앱 대상을 쉽게 변경하여 다른 백 엔드를 사용할 수 있습니다.This consistency enables you to easily retarget an app to use a different backend. 또한 무엇보다도 앱 논리를 거의 변경하지 않고 데이터를 관리하기 위해 로컬 컬렉션을 사용할 수 있습니다.More importantly here, it also enables you to 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.

오프라인에서 Twitter 앱 빌드Building an offline Twitter app

앱 개발의 오프라인 측면에 초점을 두기 위해 Twitter에 기반한 간단한 시나리오를 보여줍니다.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. 오프라인 상태로 유지되는 동안 Twitter 게시물을 읽고 트윗을 제출할 수 있도록 하는 앱을 빌드합니다.We'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 does the following:

  1. 앱 시작 시(첫 번째 화면의 OnVisible 속성에 따라):On app startup (based on the first screen's OnVisible property):

    • 장치가 온라인 상태인 경우 직접 Twitter 커넥터에 액세스하여 데이터를 인출하고 해당 데이터를 사용하여 컬렉션을 채웁니다.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • 장치가 오프라인 상태인 경우 LoadData를 사용하여 로컬 캐시 파일에서 데이터를 로드했습니다.If the device is offline, we load the data from a local cache file using LoadData.
    • 온라인으로 Twitter에 직접 게시하고 로컬 캐시를 새로 고칠 경우 사용자가 트윗을 제출할 수 있습니다.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. 5분마다 온라인 상태인 경우:Every 5 minutes, if online:

    • 로컬 캐시에 있는 모든 트윗을 게시합니다.We post any tweets that we have in the local cache.
    • 로컬 캐시를 새로 고치고 SaveData를 사용하여 저장합니다.We refresh the local cache and save it using SaveData.

1단계: 새 휴대폰 앱 만들기Step 1: Create a new phone app

  1. PowerApps Studio를 엽니다.Open PowerApps Studio.
  2. 새로 만들기 > 비어 있는 앱 > 휴대폰 레이아웃을 클릭하거나 누릅니다.Click or tap New > Blank app > Phone layout.

    비어 있는 앱, 휴대폰 레이아웃

2단계: Twitter 연결 추가Step 2: Add a Twitter connection

  1. 콘텐츠 > 데이터 원본을 클릭하거나 누르고 데이터 원본 패널에서 데이터 원본 추가를 선택합니다.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. 새 연결을 클릭하거나 누르고, Twitter를 선택하고, 만들기를 클릭하거나 누릅니다.Click or tap New Connection , select Twitter , and click or tap Create.
  3. 자격 증명을 입력하고 연결을 만듭니다.Enter your credentials, and create the connection.

    Twitter 연결 추가

3단계: 앱 시작 시 LocalTweets 컬렉션으로 트윗 로드Step 3: Load tweets into a LocalTweets collection on app startup

앱에서 Screen1OnVisible 속성을 선택하고, 다음 수식을 복사합니다.Select the OnVisible property for Screen1 in the app, and copy in the following formula:

If(Connection.Connected,

    ClearCollect(LocalTweets, Twitter.SearchTweet("PowerApps", {maxResults: 100}));

    UpdateContext({statusText: "Online data"})

    ,

    LoadData(LocalTweets, "Tweets", true);

    UpdateContext({statusText: "Local data"})

);

LoadData(LocalTweetsToPost, "LocalTweets", true);

SaveData(LocalTweets, "Tweets")

트윗을 로드하는 수식

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

  • 장치가 온라인 상태인 경우 LocalTweets 컬렉션에 "PowerApps"라는 검색 단어를 포함하는 최대 100개의 트윗을 로드합니다.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • 장치가 오프라인 상태인 경우 사용할 수 있다면 "트윗"이라는 파일에서 로컬 캐시를 로드합니다.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. 새로운 높이 조정 가능 갤러리를 삽입합니다. 삽입 > 갤러리 > 높이 조정 가능(비어 있음)Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. 항목 속성을 LocalTweets으로 설정합니다.Set the Items property to LocalTweets.
  3. 4개의 레이블을 추가하고, 각 트윗에서 데이터를 표시하고, 텍스트 속성을 다음으로 설정합니다.Add four Label controls to display data from each tweet, and set the Text properties to:
    • ThisItem.TweetTextThisItem.TweetText
    • ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserNameThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
    • "RT: " & ThisItem.RetweetCount"RT: " & ThisItem.RetweetCount
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
  4. 이미지 컨트롤을 추가하고, 이미지 속성을 ThisItem.UserDetails.ProfileImageUrl로 설정합니다.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

5단계: 연결 상태 레이블 추가Step 5: Add a connection status label

레이블 컨트롤을 삽입하고 텍스트 속성을 다음 수식으로 설정합니다.Insert a new Label control, and set its Text property to the following formula:

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

이 수식은 장치가 온라인 상태인지를 확인합니다.This formula checks if the device is online. 이러한 경우 레이블 텍스트가 "연결됨"이고, 그렇지 않으면 "오프라인"입니다.If it is, the text of the label is "Connected", otherwise it's "Offline".

6단계: 새 트윗을 작성하는 텍스트 입력 추가Step 6: Add a text input to compose new tweets

  1. "NewTweetTextInput"이라는 새 텍스트 입력 컨트롤을 삽입합니다.Insert a new Text input control named "NewTweetTextInput".
  2. 텍스트 입력의 재설정 속성을 resetNewTweet으로 설정합니다.Set the Reset property of the text input to resetNewTweet.

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

  1. 단추 컨트롤을 추가하고 Text 속성을 "트윗"으로 설정합니다.Add a Button control, and set the Text property to "Tweet".
  2. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to the following formula:

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

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

  • 장치가 온라인 상태인 경우 해당 텍스트를 즉시 트윗합니다.If the device is online, it tweets the text immediately.
  • 장치가 오프라인 상태인 경우 LocalTweetsToPost 컬렉션에서 트윗을 캡처하고, 앱에 저장합니다.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

그런 다음 수식은 텍스트 상자에서 텍스트를 다시 설정합니다.Then the formula resets the text in the text box.

8단계: 5분마다 트윗을 확인하도록 타이머 추가Step 8: Add a timer to check for tweets every five minutes

타이머 컨트롤을 추가합니다.Add a new Timer control:

  • 기간 속성을 300000으로 설정합니다.Set the Duration property to 300000.
  • 자동 시작 속성을 true로 설정합니다.Set the AutoStart property to true.
  • OnTimerEnd를 다음 수식으로 설정합니다.Set the OnTimerEnd to the following formula:

    If(Connection.Connected,
    
        ForAll(LocalTweetsToPost, Twitter.Tweet("", {tweetText: tweetText}));
    
        Clear(LocalTweetsToPost);
    
        Collect(LocalTweetsToPost, {tweetText: NewTweetTextInput.Text});
    
        SaveData(LocalTweetsToPost, "LocalTweetsToPost");
    
        UpdateContext({statusText: "Online data"})
    )
    

이 수식은 장치가 온라인 상태인지를 확인합니다.This formula checks if the device is online. 그러한 경우 앱은 LocalTweetsToPost 컬렉션에 있는 모든 항목을 트윗합니다.If it is, the app tweets all the items in the LocalTweetsToPost collection. 그런 다음 컬렉션을 지웁니다.Then it clears the collection.

이제 앱이 완료되었으므로 테스트하기 전에 모양을 확인하겠습니다.Now that the app is finished, let's check out how it looks before we move on to testing. 앱이 왼쪽에서는 연결된 상태이고 오른쪽에서는 오프라인이며 다시 온라인 상태가 되면 하나의 트윗을 게시할 준비가 된 상태입니다.On the left, the app is connected; and on the right, it's offline, with one tweet ready to post when it's online again.

온라인 및 오프라인 모드에서 완성된 앱

앱 테스트Testing the app

다음 단계를 사용하여 앱을 테스트합니다.Use the following steps to test the app:

  1. 온라인 상태인 모바일 장치에서 PowerApps를 실행합니다.Run PowerApps on a mobile device while online.

    장치에 앱을 다운로드할 수 있도록 온라인 상태가 되면 앱을 한 번 이상 실행해야 합니다.You must run an app at least once while being online, so you can download the app to the device.

  2. Twitter 앱을 시작합니다.Launch the Twitter app.
  3. 트윗이 로드되면 상태가 연결됨으로 표시됩니다.Notice that the tweets are loaded, and that the status shows Connected.
  4. PowerApps를 완전히 닫습니다.Close PowerApps completely.
  5. 장치를 비행기 모드로 설정하여 오프라인 상태인지 확인합니다.Set the device to airplane mode to ensure that it's offline.
  6. PowerApps를 실행합니다.Run PowerApps.

    이제 Twitter 앱을 오프라인으로 실행할 수 있고 온라인 상태로 이 장치에서 이전에 실행한 다른 모든 앱에 액세스할 수 있습니다. (예: PowerApps은 장치에 아직 다운로드되지 않은 앱을 숨깁니다.)You can now run the Twitter app offline, and you have access to any other apps that you have previously run on this device while online (i.e. PowerApps hides any apps that haven't yet been downloaded to your device).

  7. 앱을 다시 실행합니다.Run the app again.
  8. 오프라인 상태에서 연결 상태를 올바르게 반영하는 방법을 확인합니다.Notice how it correctly reflects the connection state, with a status of Offline.
  9. 새 트윗을 작성합니다.Write a new tweet. 로컬로 LocalTweetsToPost 컬렉션에 저장됩니다.It will be stored locally in the LocalTweetsToPost collection.
  10. 비행기 모드를 종료합니다.Exit airplane mode. 타이머가 트리거된 후에 앱은 트윗을 게시합니다.After the timer triggers, the app posts the tweet.

이 문서를 통해 오프라인 앱을 빌드하기 위해 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.