Udvikl apps, der kan køres offline, med PowerAppsDevelop offline-capable apps with PowerApps

Et af de mest almindelige scenarier, du står overfor som udvikler af mobilapps, er at gøre det muligt for brugerne at være produktive, når der er begrænset forbindelse eller ingen forbindelse overhovedet.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 har en række funktioner og funktionsmåder, der hjælper dig med at udvikle apps, der kan køres offline.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Du kan:You can:

  • Starte PowerApps-mobilappen, når du er offline.Launch the PowerApps mobile app when offline.
  • Køre apps, du udvikler, når du arbejder offline.Run apps you develop when offline.
  • Fastslå, om en app er offline, online eller en del af en forbindelse, der afregnes efter forbrug, vha. signalobjektet Forbindelse.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Brug samlinger, og udnyt funktioner som LoadData og SaveData til lagring af grundlæggende data, når du arbejder offline.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Sådan bygger du apps, der kan køres offlineHow to build offline capable apps

Det første, du skal overveje i forbindelse med offlinescenarier, er, hvordan dine programmer arbejder med data.The first thing to think about in offline scenarios is how your apps work with data. Apps i PowerApps har primært adgang til data via en række connectorer, som stilles til rådighed af platformen, f.eks. SharePoint, Office 365 og 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. Du kan også bygge brugerdefinerede connectorer, der gør det muligt for apps at få adgang til alle tjenester, der har et RESTful-slutpunkt.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Det kan f.eks. være en web-API eller en tjeneste som Azure Functions.This could be a Web API or a service such as Azure Functions. Alle disse connectorer bruger HTTPS via internettet, hvilket betyder, at brugerne skal være online for at få adgang til data og andre faciliteter, en tjeneste tilbyder.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 med connectorer

Håndtering af offlinedataHandling offline data

Et af de mest interessante aspekter ved PowerApps er sættet af egenskaber og formler, der gør det muligt at filtrere, søge, sortere, samle og ændre data på en ensartet måde, uanset datakilde.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. Kilderne spænder fra samlinger i appens hukommelse til SharePoint-lister, SQL-databaser og Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Med denne konsekvens kan du nemt målrette en app igen, hvis du vil bruge en anden back-end.This consistency enables you to easily retarget an app to use a different backend. Men hvad vigtigere er, du kan også bruge lokale samlinger til datastyring næsten uden ændringer af en apps logik.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Lokale samlinger er faktisk den primære mekanisme til håndtering af offlinedata.In fact, local collections are the primary mechanism for handling offline data.

Opbygning af en offline Twitter-appBuilding an offline Twitter app

For at bevare fokus på de offline aspekter af appudvikling viser vi dig et enkelt scenarie, hvor der fokuseres på Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Vi bygger en app, der gør det muligt at læse Twitter-opslag og sende tweets, mens du er offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Når appen kommer online, sendes tweets, og lokale data genindlæses.When the app comes online, the app posts tweets and reloads the local data.

På et højt niveau gør appen følgende:At a high level, the app does the following:

  1. Når appen åbnes (baseret egenskaben OnVisible på det første skærmbillede):On app startup (based on the first screen's OnVisible property):

    • Hvis enheden er online, opretter vi adgang direkte til Twitter-connectoren for at hente data og udfylde en samling med de pågældende data.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Hvis enheden er offline, indlæser vi dataene fra en lokal cachefil vha. LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Vi gør det muligt at sende tweets – og hvis appen er online, postes opslag direkte på Twitter og den lokale cache opdateres.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Hvert 5. minut, hvis appen er online:Every 5 minutes, if online:

    • Vi poster de tweets, der ligger i den lokale cache.We post any tweets that we have in the local cache.
    • Vi opdaterer den lokale cache og gemmer den vha. SaveData.We refresh the local cache and save it using SaveData.

Trin 1: Opret en ny telefonappStep 1: Create a new phone app

  1. Åbn PowerApps Studio.Open PowerApps Studio.
  2. Klik eller tryk på New > Blank app > Phone layout.Click or tap New > Blank app > Phone layout.

    Tom app, telefonlayout

Trin 2: Tilføj en Twitter-forbindelseStep 2: Add a Twitter connection

  1. Klik eller tryk på Content > Data sources, vælg derefter Add data source på panelet Data sources.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Klik eller tryk på New Connection, vælg Twitter, og klik eller tryk på Create.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Angiv dine legitimationsoplysninger, og opret forbindelse.Enter your credentials, and create the connection.

    Tilføj en Twitter-forbindelse

Trin 3: Indlæs tweets i en LocalTweets-samling, når appen åbnesStep 3: Load tweets into a LocalTweets collection on app startup

Vælg egenskaben OnVisible for Screen1 i appen, og indsæt følgende formel: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")

Formel til indlæsning af tweets

Denne formel kontrollerer, om enheden er online:This formula checks if the device is online:

  • Hvis enheden er online, indlæses op til 100 tweets i en samling af typen LocalTweets vha. søgeordet "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Hvis enheden er offline, indlæses den lokale cache fra en fil med navnet "Tweets", hvis den er tilgængelig.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Indsæt et nyt galleri med fleksibel højde: Insert > Gallery > Blank flexible height.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Angiv egenskaben Items til LocalTweets.Set the Items property to LocalTweets.
  3. Tilføj fire kontrolelementer af typen Label for at få vist data fra hvert enkelt tweet, og angiv egenskaberne for Text til: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. Tilføj et kontrolelement af typen Image, og angiv egenskaben Image til ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Trin 5: Tilføj en statusetiket for forbindelsenStep 5: Add a connection status label

Indsæt et nyt kontrolelement af typen Label, og angiv egenskaben Text til følgende formel:Insert a new Label control, and set its Text property to the following formula:

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

Denne formel kontrollerer, om enheden er online.This formula checks if the device is online. Hvis enheden er online, er teksten for etiketten "Connected", og hvis ikke, er teksten "Offline".If it is, the text of the label is "Connected", otherwise it's "Offline".

Trin 6: Tilføj et tekstinput for at oprette nye tweetsStep 6: Add a text input to compose new tweets

  1. Indsæt et nyt kontrolelement af typen Text input med navnet "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".
  2. Angiv værdien for egenskaben Reset for tekstinputtet til resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Trin 7: Tilføj en knap for at poste tweetetStep 7: Add a button to post the tweet

  1. Tilføj et kontrolelement af typen Button, og angiv egenskaben Text til "Tweet".Add a Button control, and set the Text property to "Tweet".
  2. Angiv egenskaben OnSelect til følgende formel: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})
    

Denne formel kontrollerer, om enheden er online:This formula checks if the device is online:

  • Hvis enheden er online, tweetes teksten med det samme.If the device is online, it tweets the text immediately.
  • Hvis enheden er offline, indsamles tweetet i samlingen LocalTweetsToPost og gemmes i appen.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Formlen nulstiller derefter teksten i tekstfeltet.Then the formula resets the text in the text box.

Trin 8: Tilføj en timer for at søge efter tweets hvert femte minutStep 8: Add a timer to check for tweets every five minutes

Tilføj et nyt kontrolelement af typen Timer:Add a new Timer control:

  • Angiv egenskaben Duration til 300000.Set the Duration property to 300000.
  • Angiv egenskaben AutoStart til true.Set the AutoStart property to true.
  • Angiv følgende formel for 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"})
    )
    

Denne formel kontrollerer, om enheden er online.This formula checks if the device is online. Hvis enheden er online, tweeter appen alle elementerne i samlingen LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Derefter ryddes samlingen.Then it clears the collection.

Lad os se, hvordan det ser ud, nu hvor appen er færdig, før vi går videre til test.Now that the app is finished, let's check out how it looks before we move on to testing. Til venstre er appen online, og til højre er den offline, og den har et tweet, der er klar til at blive postet, når den er online igen.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.

Den færdige app i online- og offlinetilstand

Test af appenTesting the app

Brug følgende trin til at teste appen:Use the following steps to test the app:

  1. Kør PowerApps på en mobilenhed, mens appen er online.Run PowerApps on a mobile device while online.

    Du skal køre en app mindst én gang, mens du er online, så du kan downloade appen på enheden.You must run an app at least once while being online, so you can download the app to the device.

  2. Start Twitter-appen.Launch the Twitter app.
  3. Bemærk at tweets indlæses, og status er Connected.Notice that the tweets are loaded, and that the status shows Connected.
  4. Luk PowerApps helt.Close PowerApps completely.
  5. Angiv enheden til flytilstand for at sikre, at den er offline.Set the device to airplane mode to ensure that it's offline.
  6. Kør PowerApps.Run PowerApps.

    Du kan nu køre Twitter-appen offline, og du har adgang til andre apps, som du tidligere har kørt på denne enhed, mens den var online (dvs. PowerApps skjuler alle apps, der endnu ikke er downloadet på enheden).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. Kør appen igen.Run the app again.
  8. Bemærk, hvordan den korrekt afspejler forbindelsestilstanden med statussen Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Skriv et nyt tweet.Write a new tweet. Det gemmes lokalt i samlingen LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Afslut flytilstand.Exit airplane mode. Når timeren udløses, postes tweetet af appen.After the timer triggers, the app posts the tweet.

Vi håber, at denne artikel giver dig et overblik over de funktioner i PowerApps, du kan bruge til at bygge offline apps.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Som altid må du meget gerne give feedback i vores forum og dele dine eksempler på offline apps på bloggen i PowerApps-community'et.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.