Apps ontwikkelen die geschikt zijn voor offlinegebruik met PowerAppsDevelop offline-capable apps with PowerApps

Een van de meest voorkomende scenario's waarmee u als ontwikkelaar van mobiele apps te maken hebt, is uw gebruikers productief te laten zijn wanneer er beperkte of helemaal geen connectiviteit is.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 heeft een reeks functies en gedragingen waarmee u apps kunt ontwikkelen die geschikt zijn voor offlinegebruik.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. U kunt:You can:

  • De mobiele PowerApps-app gebruiken wanneer u offline bent.Launch the PowerApps mobile app when offline.
  • Apps die u ontwikkelt uitvoeren wanneer u offline bent.Run apps you develop when offline.
  • Het signaalobject Verbinding gebruiken om te bepalen of een app offline is, online is of gebruikmaakt van een verbinding met een datalimiet.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Verzamelingen en functies zoals LoadData en SaveData gebruiken voor basisgegevensopslag wanneer u offline bent.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Apps bouwen die geschikt zijn voor offlinegebruikHow to build offline capable apps

Het eerste waaraan u moet denken in offlinescenario's is hoe uw apps met gegevens werken.The first thing to think about in offline scenarios is how your apps work with data. Apps in PowerApps krijgen voornamelijk toegang tot gegevens via een reeks connectors die het platform biedt, zoals SharePoint, Office 365 en 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. U kunt ook aangepaste connectors bouwen waarmee apps toegang kunnen krijgen tot elke service die een RESTful-eindpunt biedt.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Dit kan een web-API of een service zoals Azure Functions zijn.This could be a Web API or a service such as Azure Functions. Al deze connectors gebruiken HTTPS via het internet, wat betekent dat uw gebruikers online moeten zijn om toegang te kunnen krijgen tot gegevens en andere functionaliteiten die een service biedt.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-app met connectors

Offlinegegevens verwerkenHandling offline data

Een van de meest interessante aspecten van PowerApps is de reeks functionaliteiten en formules waarmee u op een consistente manier gegevens kunt filteren, zoeken, sorteren, samenvoegen en manipuleren, ongeacht de gegevensbron.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. Bronnen variëren van verzamelingen in het geheugen in de app tot SharePoint-lijsten, SQL-databases en Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Dankzij deze consistentie kunt u een app gemakkelijk opnieuw targeten om een andere back-end te gebruiken.This consistency enables you to easily retarget an app to use a different backend. Bovenal stelt het u in staat lokale verzamelingen te gebruiken voor gegevensbeheer met vrijwel geen veranderingen in de logica van een app.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Lokale verzamelingen zijn zelfs het primaire mechanisme voor het verwerken van offlinegegevens.In fact, local collections are the primary mechanism for handling offline data.

Een offline Twitter-app bouwenBuilding an offline Twitter app

Om de focus op de offlineaspecten van app-ontwikkeling te houden, zullen we u een eenvoudig scenario met betrekking tot Twitter laten zien.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. We zullen een app bouwen waarmee u tweets kunt lezen en indienen terwijl u offline bent.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. De app post tweets en laadt de lokale gegevens wanneer de app online gaat.When the app comes online, the app posts tweets and reloads the local data.

Op een hoog niveau doet de app het volgende:At a high level, the app does the following:

  1. Bij het starten van de app (gebaseerd op de eigenschap OnVisible op het eerste scherm):On app startup (based on the first screen's OnVisible property):

    • Als het apparaat online is, verkrijgen we rechtstreeks toegang tot de Twitter-connector om gegevens op te halen en vullen we een verzameling met die gegevens.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Als het apparaat offline is, laden we de gegevens uit een lokaal cachebestand met behulp van LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • We stellen de gebruiker in staat tweets in te dienen. Als het apparaat online is, posten we die rechtstreeks op Twitter en vernieuwen we de lokale cache.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Elke 5 minuten (indien online):Every 5 minutes, if online:

    • Posten we tweets die in de lokale cache staan.We post any tweets that we have in the local cache.
    • Vernieuwen we de lokale cache en slaan we deze op met behulp van SaveData.We refresh the local cache and save it using SaveData.

Stap 1: Een nieuwe telefoon-app makenStep 1: Create a new phone app

  1. Open PowerApps Studio.Open PowerApps Studio.
  2. Klik of tik op Nieuw > Lege app > Telefoonindeling.Click or tap New > Blank app > Phone layout.

    Lege app, telefoonindeling

Stap 2: Een Twitter-verbinding toevoegenStep 2: Add a Twitter connection

  1. Klik of tik op Inhoud > Gegevensbronnen en kies vervolgens Gegevensbron toevoegen in het deelvenster Gegevensbronnen.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Klik of tik op Nieuwe verbinding, selecteer Twitter en klik of tik op Maken.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Voer uw referenties in en maak de verbinding.Enter your credentials, and create the connection.

    Een Twitter-verbinding toevoegen

Stap 3: Tweets laden in een LocalTweets-verzameling bij het starten van de appStep 3: Load tweets into a LocalTweets collection on app startup

Selecteer de eigenschap OnVisible voor Screen1 in de app, en kopieer en plak de volgende formule: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")

Formule voor het laden van tweets

Deze formule controleert of het apparaat online is:This formula checks if the device is online:

  • Als het apparaat online is, laadt het maximaal 100 tweets in een LocalTweets-verzameling met de zoekterm "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Als het apparaat offline is, laadt het de lokale cache uit een bestand genaamd "Tweets", indien beschikbaar.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Voeg een nieuwe galerie met flexibele hoogte in: Invoegen > Galerie > Lege flexibele hoogte.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Stel de eigenschap Items in op LocalTweets.Set the Items property to LocalTweets.
  3. Voeg vier besturingselementen van het type Label toe om gegevens uit elke tweet weer te geven en stel de Text-eigenschappen in op: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. Voeg een besturingselement van het type Afbeelding toe en stel de eigenschap Image in op ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Stap 5: Een verbindingsstatuslabel toevoegenStep 5: Add a connection status label

Voeg een nieuw besturingselement van het type Label in en stel de bijbehorende eigenschap Text in op de volgende formule:Insert a new Label control, and set its Text property to the following formula:

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

Deze formule controleert of het apparaat online is.This formula checks if the device is online. Zo ja, dan is de tekst van het label "Connected". Zo niet, dan is de tekst "Offline".If it is, the text of the label is "Connected", otherwise it's "Offline".

Stap 6: Tekstinvoer toevoegen om nieuwe tweets op te stellenStep 6: Add a text input to compose new tweets

  1. Voeg een nieuw besturingselement van het type Tekstinvoer genaamd "NewTweetTextInput" in.Insert a new Text input control named "NewTweetTextInput".
  2. Stel de eigenschap Reset van de tekstinvoer in op resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Stap 7: Een knop toevoegen om de tweet te postenStep 7: Add a button to post the tweet

  1. Voeg een besturingselement van het type Knop toe en stel de eigenschap Text in op "Tweet".Add a Button control, and set the Text property to "Tweet".
  2. Stel de eigenschap OnSelect in op de volgende formule: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})
    

Deze formule controleert of het apparaat online is:This formula checks if the device is online:

  • Als het apparaat online is, wordt de tekst onmiddellijk getweet.If the device is online, it tweets the text immediately.
  • Als het apparaat offline is, wordt de tweet vastgelegd in een LocalTweetsToPost-verzameling en opgeslagen in de app.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Vervolgens stelt de formule de tekst in het tekstvak opnieuw in.Then the formula resets the text in the text box.

Stap 8: Een timer toevoegen om elke vijf minuten op tweets te controlerenStep 8: Add a timer to check for tweets every five minutes

Voeg een nieuw besturingselement van het type Timer toe:Add a new Timer control:

  • Stel de eigenschap Duration in op 300000.Set the Duration property to 300000.
  • Stel de eigenschap AutoStart in op 'true'.Set the AutoStart property to true.
  • Stel de eigenschap OnTimerEnd in op de volgende formule: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"})
    )
    

Deze formule controleert of het apparaat online is.This formula checks if the device is online. Zo ja, dan tweet de app alle items in de LocalTweetsToPost-verzameling.If it is, the app tweets all the items in the LocalTweetsToPost collection. Vervolgens wist de app de verzameling.Then it clears the collection.

Nu de app klaar is, laten we zien hoe deze eruitziet voordat we deze gaan testen.Now that the app is finished, let's check out how it looks before we move on to testing. Links is de app online, en rechts is de app offline en staat er één tweet klaar om te posten zodra de app weer online is.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.

Voltooide app met online- en offlinemodus

De app testenTesting the app

Gebruik de volgende stappen om de app te testen:Use the following steps to test the app:

  1. Voer PowerApps uit op een mobiel apparaat terwijl u online bent.Run PowerApps on a mobile device while online.

    U moet de app ten minste eenmaal uitvoeren terwijl u online bent, zodat u de app op het apparaat kunt downloaden.You must run an app at least once while being online, so you can download the app to the device.

  2. Start de Twitter-app.Launch the Twitter app.
  3. U ziet dat de tweets worden geladen en dat de status Connected is.Notice that the tweets are loaded, and that the status shows Connected.
  4. Sluit PowerApps volledig.Close PowerApps completely.
  5. Zet het apparaat in vliegtuigmodus om te verzekeren dat het offline is.Set the device to airplane mode to ensure that it's offline.
  6. Voer PowerApps uit.Run PowerApps.

    U kunt de Twitter-app nu offline uitvoeren, en u hebt toegang tot alle andere apps die u eerder op dit apparaat hebt uitgevoerd terwijl u online was (d.w.z. PowerApps verbergt alle apps die nog niet op uw apparaat zijn gedownload).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. Voer de app nogmaals uit.Run the app again.
  8. Merk op hoe de app de verbindingsstatus Offline correct weergeeft.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Stel een nieuwe tweet op.Write a new tweet. De tweet wordt lokaal opgeslagen in de LocalTweetsToPost-verzameling.It will be stored locally in the LocalTweetsToPost collection.
  10. Schakel de vliegtuigmodus uit.Exit airplane mode. Nadat de timer is geactiveerd, post de app de tweet.After the timer triggers, the app posts the tweet.

We hopen dat dit artikel u een idee geeft van de mogelijkheden die PowerApps biedt voor het bouwen van offline-apps.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Zoals altijd kunt u feedback geven in ons forum en uw voorbeelden van offline-apps delen in de PowerApps-communityblog.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.