Développer des applications pouvant fonctionner hors connexion avec PowerAppsDevelop offline-capable apps with PowerApps

Un des scénarios les plus courants auquel vous devez faire face en tant que développeur d’applications mobiles est de permettre à vos utilisateurs d’être productifs quand la connectivité est limitée ou qu’il n’y a aucune connectivité.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 a un ensemble de fonctionnalités et de comportements qui vous aident à développer des applications pouvant fonctionner hors connexion.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Vous pouvez :You can:

  • Lancer l’application mobile PowerApps quand vous êtes hors connexion.Launch the PowerApps mobile app when offline.
  • Exécuter des applications que vous développez quand vous êtes hors connexion.Run apps you develop when offline.
  • Déterminer quand une application est hors connexion, en ligne ou avec une connexion limitée en utilisant l’objet de signal Connection.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Utilisez des collections et tirez parti de fonctions comme LoadData et SaveData pour stocker des données en mode hors connexion.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Guide pratique pour créer des applications pouvant fonctionner hors connexionHow to build offline capable apps

La première chose à laquelle il faut penser dans les scénarios hors connexion est la façon dont vos applications utilisent les données.The first thing to think about in offline scenarios is how your apps work with data. Les applications dans PowerApps accèdent aux données principalement via un ensemble de connecteurs fournis par la plate-forme, comme SharePoint, Office 365 et 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. Vous pouvez également créer des connecteurs personnalisés qui permettent aux applications d’accéder à un service qui fournit un point de terminaison RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Il peut s’agir d’une API web ou d’un service comme Azure Functions.This could be a Web API or a service such as Azure Functions. Tous ces connecteurs utilisent HTTPS sur Internet, ce qui signifie que vos utilisateurs doivent être en ligne pour accéder aux données et aux autres fonctionnalités offertes par un service.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.

Application PowerApps avec des connecteurs

Gestion des données hors connexionHandling offline data

Un des aspects les plus intéressants de PowerApps est son ensemble de fonctionnalités et de formules qui vous permettent de filtrer, rechercher, trier, agréger et manipuler les données de façon cohérente, quelle que soit la source de données.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. Les sources vont de collections en mémoire dans l’application à des listes SharePoint, en passant par des bases de données SQL et Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Cette cohérence vous permet de recibler facilement une application pour utiliser un autre back-end.This consistency enables you to easily retarget an app to use a different backend. Plus important encore, elle vous permet aussi d’utiliser des collections locales pour la gestion des données presque sans modifications de la logique d’une application.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. En fait, les collections locales sont le mécanisme principal de gestion des données hors connexion.In fact, local collections are the primary mechanism for handling offline data.

Création d’une application Twitter hors connexionBuilding an offline Twitter app

Pour rester sur les aspects du développement d’applications liés au mode hors connexion, nous allons vous montrer un scénario simple centré sur Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Nous allons créer une application qui vous permet de lire des posts Twitter et d’envoyer des tweets tout en étant hors connexion.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Quand l’application est en ligne, l’application publie des tweets et recharge les données locales.When the app comes online, the app posts tweets and reloads the local data.

Globalement, l’application effectue les opérations suivantes :At a high level, the app does the following:

  1. Au démarrage de l’application (en fonction de la propriété OnVisible du premier écran) :On app startup (based on the first screen's OnVisible property):

    • Si l’appareil est en ligne, nous accédons directement au connecteur Twitter pour extraire des données et nous remplissons une collection avec ces données.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Si l’appareil est hors connexion, nous chargeons les données à partir d’un fichier de cache local en utilisant LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Nous permettons à l’utilisateur d’envoyer des tweets : si l’appareil est en ligne, nous publions directement sur Twitter et nous actualisons le cache local.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Toutes les 5 minutes, si l’appareil est en ligne :Every 5 minutes, if online:

    • Nous publions les tweets qui se trouvent dans le cache local.We post any tweets that we have in the local cache.
    • Nous actualisons le cache local et nous l’enregistrons en utilisant SaveData.We refresh the local cache and save it using SaveData.

Étape 1 : Créer une application pour téléphoneStep 1: Create a new phone app

  1. Ouvrez PowerApps Studio.Open PowerApps Studio.
  2. Cliquez ou appuyez sur Nouveau > Application vide > Mode téléphone.Click or tap New > Blank app > Phone layout.

    Application vide, Mode téléphone

Étape 2 : Ajouter une connexion TwitterStep 2: Add a Twitter connection

  1. Cliquez ou appuyez sur Contenu > Sources de données, puis choisissez Ajouter une source de données dans le panneau Sources de données.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Cliquez ou appuyez sur Nouvelle connexion, sélectionnez Twitter, puis cliquez ou appuyez sur Créer.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Entrez vos informations d’identification et créez la connexion.Enter your credentials, and create the connection.

    Ajouter une connexion Twitter

Étape 3 : Charger les tweets dans une collection LocalTweets au démarrage de l’applicationStep 3: Load tweets into a LocalTweets collection on app startup

Sélectionnez la propriété OnVisible pour Screen1 dans l’application et copiez-y la formule suivante :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 pour charger les tweets

Cette formule vérifie si l’appareil est en ligne :This formula checks if the device is online:

  • Si l’appareil est en ligne, il charge dans une collection LocalTweets jusqu’à 100 tweets avec le terme de recherche « PowerApps ».If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Si l’appareil est hors connexion, il charge le cache local à partir d’un fichier appelé « Tweets », s’il est disponible.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Insérez une nouvelle galerie avec hauteur flexible : Insérer > Gallery > Blank flexible height.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Définissez la propriété Items sur LocalTweets.Set the Items property to LocalTweets.
  3. Ajoutez quatre contrôles Label pour afficher les données de chaque tweet et définissez les propriétés Text sur :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. Ajoutez un contrôle Image et définissez la propriété Image sur ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Étape 5 : Ajouter une étiquette d’état de la connexionStep 5: Add a connection status label

Insérez un nouveau contrôle Label et définissez sa propriété Text sur la formule suivante :Insert a new Label control, and set its Text property to the following formula:

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

Cette formule vérifie si l’appareil est en ligne.This formula checks if the device is online. Si c’est le cas, le texte de l’étiquette est « Connected », sinon il est « Offline ».If it is, the text of the label is "Connected", otherwise it's "Offline".

Étape 6 : Ajouter une entrée de texte pour composer les nouveaux tweetsStep 6: Add a text input to compose new tweets

  1. Insérez un nouveau contrôle Text input nommé « NewTweetTextInput ».Insert a new Text input control named "NewTweetTextInput".
  2. Définissez la propriété Reset de l’entrée de texte sur resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Étape 7 : Ajouter un bouton pour publier le tweetStep 7: Add a button to post the tweet

  1. Ajoutez un contrôle Button et définissez sa propriété Text sur « Tweet ».Add a Button control, and set the Text property to "Tweet".
  2. Définissez la propriété OnSelect sur la formule suivante :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})
    

Cette formule vérifie si l’appareil est en ligne :This formula checks if the device is online:

  • Si l’appareil est en ligne, il tweete immédiatement le texte.If the device is online, it tweets the text immediately.
  • Si l’appareil est hors connexion, il capture le tweet dans une collection LocalTweetsToPost et l’enregistre dans l’application.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

La formule réinitialise ensuite le texte dans la zone de texte.Then the formula resets the text in the text box.

Étape 8 : Ajouter un minuteur pour vérifier les tweets toutes les cinq minutesStep 8: Add a timer to check for tweets every five minutes

Ajoutez un nouveau contrôle Timer :Add a new Timer control:

  • Définissez la propriété Duration sur 300000.Set the Duration property to 300000.
  • Définissez la propriété AutoStart sur true.Set the AutoStart property to true.
  • Définissez OnTimerEnd sur la formule suivante :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"})
    )
    

Cette formule vérifie si l’appareil est en ligne.This formula checks if the device is online. Si c’est le cas, l’application tweete tous les éléments de la LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Elle efface ensuite la collection.Then it clears the collection.

Maintenant que l’application est terminée, voyons à quoi elle ressemble avant de passer aux tests.Now that the app is finished, let's check out how it looks before we move on to testing. À gauche, l’application est connectée. À droite, elle est hors connexion, avec un tweet prêt à être publié dès que l’appareil est à nouveau en ligne.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.

Application terminée avec les modes en ligne et hors connexion

Test de l’applicationTesting the app

Utilisez les étapes suivantes pour tester l’application :Use the following steps to test the app:

  1. Exécutez PowerApps sur un appareil mobile en ligne.Run PowerApps on a mobile device while online.

    Vous devez exécuter une application au moins une fois en étant en ligne pour pouvoir télécharger l’application sur l’appareil.You must run an app at least once while being online, so you can download the app to the device.

  2. Lancez l’application Twitter.Launch the Twitter app.
  3. Notez que les tweets sont chargés et que l’état indique Connected.Notice that the tweets are loaded, and that the status shows Connected.
  4. Fermez PowerApps complètement.Close PowerApps completely.
  5. Définissez le mode Avion pour être sûr qu’il est hors connexion.Set the device to airplane mode to ensure that it's offline.
  6. Exécutez PowerApps.Run PowerApps.

    Vous pouvez maintenant exécuter l’application Twitter hors connexion, et vous avez accès à toutes les autres applications que vous avez exécutées précédemment sur cet appareil quand il est en ligne (PowerApps masque toutes les applications qui n’ont pas encore été téléchargées sur votre appareil).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. Réexécutez l’application.Run the app again.
  8. Notez qu’elle reflète correctement l’état de la connexion, avec l’état Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Écrivez un nouveau tweet.Write a new tweet. Il sera stocké localement dans la collection LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Quittez le mode Avion.Exit airplane mode. Une fois que le minuteur déclenché, l’application publie le tweet.After the timer triggers, the app posts the tweet.

Nous espérons que cet article vous a donné une idée des fonctionnalités de PowerApps pour créer des applications hors connexion.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Comme toujours, vous pouvez fournir des commentaires dans notre forum et partager vos exemples d’applications hors connexion dans le blog de la communauté PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.