Utveckla offline-kompatibla appar med PowerAppsDevelop offline-capable apps with PowerApps

Ett av de vanligaste scenarier du möter som utvecklare av mobila appar är att göra det möjligt för dina användare att vara produktiva när det är begränsad eller ingen anslutning alls.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 uppsättning funktioner och beteenden som hjälper dig att utveckla offline-kompatibla appar.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Du kan:You can:

  • Starta PowerApps mobila app när du är offline.Launch the PowerApps mobile app when offline.
  • Kör appar som du utvecklar offline.Run apps you develop when offline.
  • Fastställ när en app är offline, online eller i en anslutning med datapriser med hjälp av signalobjektet Anslutning.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Använd samlingar och utnyttja funktioner såsom LoadData och SaveData för lagring av grundläggande data offline.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Skapa offline-kompatibla apparHow to build offline capable apps

Det första du tänker om offline-scenarier är hur dina appar arbetar med data.The first thing to think about in offline scenarios is how your apps work with data. Appar i PowerApps kommer främst åt data via en uppsättning anslutningsappar som ingår i plattformen, såsom SharePoint, Office 365 och 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 också skapa anpassade anslutningsappar som ger appar åtkomst till en tjänst som tillhandahåller en RESTful-slutpunkt.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Detta kan vara en webb-API eller en tjänst, till exempel Azure Functions.This could be a Web API or a service such as Azure Functions. Dessa anslutningar använder HTTPS via Internet, vilket innebär att användarna måste vara online för att komma åt data och andra funktioner som en tjänst erbjuder.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 anslutningsappar

Hantering av data offlineHandling offline data

En av de mest intressanta aspekterna av PowerApps är en uppsättning funktioner och formler som gör att du kan filtrera, söka, sortera, sammanställa och manipulera data på ett konsekvent sätt oavsett datakälla.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. Datakällor kan vara allt från InMemory-samlingar i appen, till SharePoint-listor, till SQL-databaser och Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Den här konsekvensen gör att du enkelt kan omdirigera en app till att använda en annan serverdel.This consistency enables you to easily retarget an app to use a different backend. Viktigare här är att du också kan använda lokala samlingar för datahantering, nästan utan ändringar av 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. Faktum är att lokala samlingar är den primära mekanismen för datahantering offline.In fact, local collections are the primary mechanism for handling offline data.

Skapa en offline-app för TwitterBuilding an offline Twitter app

Om du vill behålla fokus på offline-aspekter vid utveckling av appar, visar vi dig ett enkelt scenario för Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Vi ska skapa en app som gör att du kan läsa Twitter-inlägg och skicka tweets när du är offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. När appen är online, skickar appen tweets och läser in lokala data på nytt.When the app comes online, the app posts tweets and reloads the local data.

På en hög nivå gör appen följande:At a high level, the app does the following:

  1. Vid start av appen (baserat på den första skärmens egenskap OnVisible):On app startup (based on the first screen's OnVisible property):

    • Om enheten är online, får vi tillgång till Twitter-anslutningsappen direkt för att hämta data och fylla i en samling med dessa data.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Om enheten är offline, läser vi in data från en lokal cache-fil med LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Vi möjliggör för användaren att skicka tweets – om hen är online publicerar vi direkt till Twitter och uppdaterar den lokala cachen.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Var femte minut, om online:Every 5 minutes, if online:

    • Publicerar vi alla tweets som vi har i den lokala cachen.We post any tweets that we have in the local cache.
    • Uppdaterar vi den lokala cachen och sparar den med SaveData.We refresh the local cache and save it using SaveData.

Steg 1: Skapa en ny telefonappStep 1: Create a new phone app

  1. Starta PowerApps Studio.Open PowerApps Studio.
  2. Klicka eller tryck på Ny > Tom app > Telefonlayout.Click or tap New > Blank app > Phone layout.

    Tom app, telefonlayout

Steg 2: Lägg till en Twitter-anslutningStep 2: Add a Twitter connection

  1. Klicka eller tryck på Innehåll > Datakällor och välj sedan Lägg till datakällan på panelen Datakällor.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.

  2. Klicka eller tryck på Ny anslutning, välj Twitter och klicka eller tryck på Skapa.Click or tap New Connection , select Twitter , and click or tap Create.

  3. Ange dina autentiseringsuppgifter och skapa anslutningen.Enter your credentials, and create the connection.

    Lägg till en Twitter-anslutning

Steg 3: Läs in tweets i en LocalTweets-samling vid start av appenStep 3: Load tweets into a LocalTweets collection on app startup

Välj egenskapen OnVisible för Screen1 i appen och kopiera i följande 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 för att läsa in tweets

Den här formeln kontrollerar om enheten är online:This formula checks if the device is online:

  • Om enheten är online, laddar den upp till 100 tweets med söktermen "PowerApps" till en LocalTweets-samling.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Om enheten är offline, laddas den lokala cachen från en fil med namnet "Tweets" om tillgänglig.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Infoga ett nytt galleri med flexibel höjd: Infoga > Galleri > Tom flexibel höjd.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.

  2. Ange egenskapen Objekt till LocalTweets.Set the Items property to LocalTweets.

  3. Lägg till fyra Etikett-kontroller för att visa data från varje tweets och ange egenskapen Text till: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. Lägg till en Avbildnings-kontroll och ange egenskapen Avbildning till ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Steg 5: Lägg till en statusetikett för anslutningStep 5: Add a connection status label

Infoga en ny Etikett-kontroll och ange dess Text-egenskap till följande formel:Insert a new Label control, and set its Text property to the following formula:

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

Den här formeln kontrollerar om enheten är online.This formula checks if the device is online. Om den är online är texten i etiketten "Ansluten", annars är den "Offline".If it is, the text of the label is "Connected", otherwise it's "Offline".

Steg 6: Lägg till en textinmatning för att skapa nya tweetsStep 6: Add a text input to compose new tweets

  1. Infoga en ny kontroll för Textinmatning med namnet "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".

  2. Ange egenskapen Återställ för textinmatningen till resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Steg 7: Lägg till en knapp för att publicera en tweetStep 7: Add a button to post the tweet

  1. Lägg till en Knapp-kontroll och ställ in dess Text-egenskap till ”Tweet”.Add a Button control, and set the Text property to "Tweet".
  2. Ange egenskapen OnSelect till följande 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})
    

Den här formeln kontrollerar om enheten är online:This formula checks if the device is online:

  • Om enheten är online, publiceras tweets-texten omedelbart.If the device is online, it tweets the text immediately.
  • Om enheten är offline, läggs tweets-texten i en LocalTweetsToPost-samling och sparas till appen.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Formeln återställer sedan texten i textrutan.Then the formula resets the text in the text box.

Steg 8: Lägg till en timer för att söka efter tweets var femte minutStep 8: Add a timer to check for tweets every five minutes

Lägg till en ny Timer-kontroll:Add a new Timer control:

  • Ange egenskapen Varaktighet till 300000.Set the Duration property to 300000.

  • Ange egenskapen AutoStart till true.Set the AutoStart property to true.

  • Ange OnTimerEnd till följande formel: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"})
    )
    

Den här formeln kontrollerar om enheten är online.This formula checks if the device is online. Om den är online publicerar appen tweets för alla objekt i LocalTweetsToPost-samlingen.If it is, the app tweets all the items in the LocalTweetsToPost collection. Sedan tar den bort samlingen.Then it clears the collection.

Nu när appen är klar ska vi se hur den ser ut innan vi går vidare till att testa den.Now that the app is finished, let's check out how it looks before we move on to testing. Till vänster är appen ansluten; till höger är den offline, med en tweets som är redo att publiceras när den är 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.

Färdig app med online- och offline-läge

Testa appenTesting the app

Använd följande steg för att testa appen:Use the following steps to test the app:

  1. Kör PowerApps på en mobil enhet när du är online.Run PowerApps on a mobile device while online. Du måste köra en app minst en gång när du är online, så att du kan ladda ned appen till enheten.You must run an app at least once while being online, so you can download the app to the device.
  2. Starta Twitter-appen.Launch the Twitter app.
  3. Observera att tweets läses in och att statusen är Ansluten.Notice that the tweets are loaded, and that the status shows Connected.
  4. Stäng PowerApps helt.Close PowerApps completely.
  5. Sätt enheten i flygplansläge så att den är offline.Set the device to airplane mode to ensure that it's offline.
  6. Kör PowerApps.Run PowerApps. Du kan nu köra Twitter-appen offline och du har åtkomst till andra appar som du tidigare har kört på enheten när du var online (d.v.s. PowerApps döljer alla appar som ännu inte har hämtats till din enhet).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. Observera hur den korrekt avspeglar anslutningsstatusen som Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Skriv en ny tweet.Write a new tweet. Den kommer att lagras lokalt i samlingen LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Avsluta flygplansläget.Exit airplane mode. När timern utlöses publicerar appen tweets.After the timer triggers, the app posts the tweet.

Vi hoppas att denna artikel ger dig en uppfattning om PowerApps funktioner för att skapa offline-appar.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Som alltid kan du lämna feedback i våra forum och dela dina exempel på offline-appar i PowerApps community-blogg.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.