Entwickeln von offlinefähigen Apps mit PowerAppsDevelop offline-capable apps with PowerApps

Eins der häufigsten Szenarien, denen Sie als Entwickler von mobilen Apps begegnen, besteht darin, Ihren Benutzern produktives Arbeiten in Umgebungen mit eingeschränkter Konnektivität oder ohne Konnektivität zu ermöglichen.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 weist eine Reihe von Funktionen und Verhaltensweisen auf, die Sie bei der Entwicklung von Apps mit Offlinefähigkeit unterstützen.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Sie haben folgende Möglichkeiten:You can:

  • Starten der mobilen PowerApps-App ohne Onlineverbindung.Launch the PowerApps mobile app when offline.
  • Ausführen von Apps, die offline entwickelt wurden.Run apps you develop when offline.
  • Mithilfe des Signalobjekts Connection bestimmen, ob eine App offline, online oder in einer getakteten Verbindung ist.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Verwenden von Sammlungen und Nutzung von Funktionen wie LoadData und SaveData, um offline grundlegende Datenspeicherung zur Verfügung zu machen.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Erstellen von offlinefähigen AppsHow to build offline capable apps

Das Erste, was Sie bei Offlineszenarien bedenken müssen, ist die Weise, in der Ihre Apps mit Daten umgehen.The first thing to think about in offline scenarios is how your apps work with data. Apps in PowerApps greifen auf Daten hauptsächlich mithilfe einer Sammlung von Connectors zu, die von der Plattform bereitgestellt werden, wie etwa SharePoint, Office 365 und 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. Darüber hinaus können Sie benutzerdefinierte Connectors erstellen, die Apps den Zugriff auf jeden Dienst ermöglichen, der einen RESTful-Endpunkt bereitstellt.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Dabei kann es sich um eine Web-API oder um einen Dienst handeln, wie etwa Azure Functions.This could be a Web API or a service such as Azure Functions. Alle diese Connectors verwenden HTTPS im Internet, was bedeutet, dass Ihre Benutzer online sein müssen, damit sie auf Daten und andere Funktionen zugreifen können, die von einem Dienst bereitgestellt werden.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 mit Connectors

Verarbeitung von OfflinedatenHandling offline data

Einer der interessantesten Aspekte von PowerApps ist die Sammlung von Funktionen und Formeln, mit deren Hilfe Sie Daten unabhängig von der Datenquelle auf konsistente Weise filtern, durchsuchen, aggregieren und bearbeiten können.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. Die Quellen reichen von im Arbeitsspeicher vorhandenen App-internen Sammlungen über SharePoint-Listen bis hin zu SQL-Datenbanken und dem Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Diese Konsistenz ermöglicht es Ihnen, eine App auf einfache Weise für die Verwendung eines anderen Back-Ends als Ziel zu ändern.This consistency enables you to easily retarget an app to use a different backend. Wichtiger noch ist in diesem Zusammenhang, dass Sie dadurch fast ohne Änderungen an der Logik einer App lokale Sammlungen für die Datenverwaltung verwenden können.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Tatsächlich stellen lokale Sammlungen den wichtigsten Mechanismus in der Verarbeitung von Offlinedaten dar.In fact, local collections are the primary mechanism for handling offline data.

Erstellen einer Twitter-Offline-AppBuilding an offline Twitter app

Um den Schwerpunkt bei den Offlineaspekten der App-Entwicklung zu belassen, zeigen wir Ihnen ein einfaches Szenario, das sich auf Twitter konzentriert.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Wir erstellen eine App, mit der Sie Twitter-Beiträge lesen und Tweets absenden können, während Sie offline sind.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Wenn die App Zugang zu einer Onlineverbindung erhält, veröffentlicht sie die Tweets und lädt die lokalen Daten erneut.When the app comes online, the app posts tweets and reloads the local data.

Allgemein betrachtet, führt die App die folgenden Funktionen aus:At a high level, the app does the following:

  1. Beim Starten der App (basierend auf der Eigenschaft OnVisible des ersten Bildschirms):On app startup (based on the first screen's OnVisible property):

    • Wenn das Gerät über Onlinezugriff verfügt, erfolgt der Zugriff auf den Twitter-Connector direkt, um Daten abzurufen und eine Sammlung mit diesen Daten aufzufüllen.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Wenn das Gerät offline ist, laden wir die Daten mithilfe von LoadData aus einer lokalen Cachedatei.If the device is offline, we load the data from a local cache file using LoadData.
    • Wir ermöglichen dem Benutzer das Übermitteln von Tweets – wenn die App online ist, erfolgt sofort die Veröffentlichung auf Twitter, und der lokale Cache wird aktualisiert.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Im Onlinemodus geschieht alle 5 Minuten Folgendes:Every 5 minutes, if online:

    • Wir veröffentlichen alle Tweets, die sich im lokalen Cache befinden.We post any tweets that we have in the local cache.
    • Wir aktualisieren den lokalen Cache und speichern ihn mithilfe von SaveData.We refresh the local cache and save it using SaveData.

Schritt 1: Erstellen einer neuen Smartphone-AppStep 1: Create a new phone app

  1. Öffnen Sie PowerApps Studio.Open PowerApps Studio.
  2. Klicken oder tippen Sie auf Neu > Leere App > Smartphonelayout.Click or tap New > Blank app > Phone layout.

    Leere App, Smartphonelayout

Schritt 2: Hinzufügen einer Twitter-VerbindungStep 2: Add a Twitter connection

  1. Klicken oder tippen Sie auf Inhalt > Datenquellen, und wählen Sie dann im Bereich Datenquellen Datenquelle hinzufügen aus.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Klicken oder tippen Sie auf Neue Verbindung, wählen Sie Twitter aus, und klicken oder tippen Sie dann auf Erstellen.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Geben Sie Ihre Anmeldeinformationen ein, und erstellen Sie die Verbindung.Enter your credentials, and create the connection.

    Hinzufügen einer Twitter-Verbindung

Schritt 3: Laden von Tweets in eine LocalTweets-Sammlung beim StartStep 3: Load tweets into a LocalTweets collection on app startup

Wählen Sie in der App die OnVisible-Eigenschaft für Screen1 aus, und kopieren Sie die folgende 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 zum Laden von Tweets

Diese Formel überprüft, ob das Gerät online ist:This formula checks if the device is online:

  • Wenn das Gerät online ist, lädt es mit dem Suchausdruck „PowerApps“ bis zu 100 Tweets in eine LocalTweets-Sammlung.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Wenn das Gerät offline ist, lädt es den lokalen Cache aus einer Datei mit dem Namen „Tweets“, sofern diese verfügbar ist.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Fügen Sie einen neuen Katalog mit flexibler Höhe hinzu: Einfügen > Katalog > Leer flexible Höhe.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Legen Sie die Eigenschaft Items auf LocalTweets fest.Set the Items property to LocalTweets.
  3. Fügen Sie vier Label-Steuerelemente hinzu, um Daten aus den einzelnen Tweets anzuzeigen, und legen Sie die Eigenschaft Text wie folgt fest: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. Fügen Sie ein Image-Steuerelement hinzu, und legen Sie die Image-Eigenschaft auf ThisItem.UserDetails.ProfileImageUrl fest.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Schritt 5: Hinzufügen einer VerbindungsstatusbezeichnungStep 5: Add a connection status label

Fügen Sie ein neues Label-Steuerelement hinzu, und legen Sie dessen Eigenschaft Text auf die folgende Formel fest:Insert a new Label control, and set its Text property to the following formula:

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

Diese Formel überprüft, ob das Gerät online ist.This formula checks if the device is online. Wenn dies der Fall ist, lautet der Text der Bezeichnung „Verbunden“, andernfalls „Offline“.If it is, the text of the label is "Connected", otherwise it's "Offline".

Schritt 6: Hinzufügen einer Texteingabe zum Verfassen neuer TweetsStep 6: Add a text input to compose new tweets

  1. Fügen Sie ein neues Text input-Steuerelement mit dem Namen „NewTweetTextInput“ hinzu.Insert a new Text input control named "NewTweetTextInput".
  2. Legen Sie die Reset-Eigenschaft der Texteingabe auf resetNewTweet fest.Set the Reset property of the text input to resetNewTweet.

Schritt 7: Hinzufügen einer Schaltfläche zum Veröffentlichen des TweetsStep 7: Add a button to post the tweet

  1. Fügen Sie ein Button-Steuerelement hinzu, und legen Sie die Eigenschaft Text auf „Tweet“ fest.Add a Button control, and set the Text property to "Tweet".
  2. Legen Sie die OnSelect-Eigenschaft auf die folgende Formel fest: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})
    

Diese Formel überprüft, ob das Gerät online ist:This formula checks if the device is online:

  • Wenn das Gerät online ist, veröffentlicht es den Text sofort als Tweet.If the device is online, it tweets the text immediately.
  • Wenn das Gerät offline ist, erfasst es den Tweet in einer Sammlung LocalTweetsToPost und speichert ihn in der App.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Anschließend setzt die Formel den Text im Textfeld zurück.Then the formula resets the text in the text box.

Schritt 8: Hinzufügen eines Timers zum Abrufen von Tweets alle fünf MinutenStep 8: Add a timer to check for tweets every five minutes

Fügen Sie ein neues Timer-Steuerelement hinzu:Add a new Timer control:

  • Legen Sie die Duration-Eigenschaft auf 300000 fest.Set the Duration property to 300000.
  • Legen Sie die AutoStart-Eigenschaft auf „true“ fest.Set the AutoStart property to true.
  • Legen Sie OnTimerEnd auf die folgende Formel fest: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"})
    )
    

Diese Formel überprüft, ob das Gerät online ist.This formula checks if the device is online. Wenn das der Fall ist, veröffentlicht die App alle Elemente in der Sammlung LocalTweetsToPost als Tweets.If it is, the app tweets all the items in the LocalTweetsToPost collection. Anschließend wird die Auflistung gelöscht.Then it clears the collection.

Da die App jetzt fertiggestellt ist, sehen wir sie uns einmal an, bevor wir mit Tests fortfahren.Now that the app is finished, let's check out how it looks before we move on to testing. Auf der linken Seite verfügt die App über eine Verbindung; auf der rechten Seite ist sie offline und verfügt über einen Tweet, der sofort beim Wechsel in den Onlinezustand veröffentlicht wird.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.

Fertiggestellte App mit Online- und Offlinemodi

Testen der AppTesting the app

Gehen Sie folgendermaßen vor, um die App zu testen:Use the following steps to test the app:

  1. Führen Sie PowerApps bei bestehender Onlineverbindung auf einem mobilen Gerät aus.Run PowerApps on a mobile device while online.

    Sie müssen eine App zumindest einmal online ausführen, damit Sie die App auf das Gerät herunterladen können.You must run an app at least once while being online, so you can download the app to the device.

  2. Starten Sie die Twitter-App.Launch the Twitter app.
  3. Beachten Sie, dass die Tweets geladen werden und der Status Verbunden anzeigt.Notice that the tweets are loaded, and that the status shows Connected.
  4. Schließen Sie PowerApps vollständig.Close PowerApps completely.
  5. Legen Sie den Flugmodus für das Gerät fest, um sicherzustellen, dass es offline arbeitet.Set the device to airplane mode to ensure that it's offline.
  6. Führen Sie PowerApps aus.Run PowerApps.

    Sie können die Twitter-App jetzt offline ausführen und besitzen Zugriff auf alle anderen Apps, die Sie zuvor online auf dem betreffenden Gerät ausgeführt haben (d.h., PowerApps blendet alle Apps aus, die nicht auf Ihr Gerät heruntergeladen wurden).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. Führen Sie die App erneut aus.Run the app again.
  8. Beachten Sie ,dass sie den Verbindungsstatus ordnungsgemäß als Offline angibt.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Schreiben Sie einen neuen Tweet.Write a new tweet. Er wird lokal in der Sammlung LocalTweetsToPost gespeichert.It will be stored locally in the LocalTweetsToPost collection.
  10. Beenden Sie den Flugmodus.Exit airplane mode. Nach dem Auslösen des Timers veröffentlicht die App den Tweet.After the timer triggers, the app posts the tweet.

Wir hoffen, dass dieser Artikel Ihnen eine Vorstellung von den Möglichkeiten gegeben hat, die PowerApps für das Erstellen von Offline-Apps bietet.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Wie immer freuen wir uns über Ihr Feedback in unserem Forum und über Ihre Beispiele für Offline-Apps im PowerApps Community-Blog.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.