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é. PowerApps a un ensemble de fonctionnalités et de comportements qui vous aident à développer des applications pouvant fonctionner hors connexion. Vous pouvez :

  • Lancer l’application mobile PowerApps quand vous êtes hors connexion.
  • Exécuter des applications que vous développez quand vous êtes hors connexion.
  • Déterminer quand une application est hors connexion, en ligne ou avec une connexion limitée en utilisant l’objet de signal Connection.
  • Utilisez des collections et tirez parti de fonctions comme LoadData et SaveData pour stocker des données en mode hors connexion.

Guide pratique pour créer des applications pouvant fonctionner hors connexion

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. 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. 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. Il peut s’agir d’une API web ou d’un service comme 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.

Application PowerApps avec des connecteurs

Gestion des données hors connexion

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. 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. Cette cohérence vous permet de recibler facilement une application pour utiliser un autre back-end. 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. En fait, les collections locales sont le mécanisme principal de gestion des données hors connexion.

Création d’une application Twitter hors connexion

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. Nous allons créer une application qui vous permet de lire des posts Twitter et d’envoyer des tweets tout en étant hors connexion. Quand l’application est en ligne, l’application publie des tweets et recharge les données locales.

Globalement, l’application effectue les opérations suivantes :

  1. Au démarrage de l’application (en fonction de la propriété OnVisible du premier écran) :

    • 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.
    • Si l’appareil est hors connexion, nous chargeons les données à partir d’un fichier de cache local en utilisant 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.
  2. Toutes les 5 minutes, si l’appareil est en ligne :

    • Nous publions les tweets qui se trouvent dans le cache local.
    • Nous actualisons le cache local et nous l’enregistrons en utilisant SaveData.

Étape 1 : Créer une application pour téléphone

  1. Ouvrez PowerApps Studio.
  2. Cliquez ou appuyez sur Nouveau > Application vide > Mode téléphone.

    Application vide, Mode téléphone

Étape 2 : Ajouter une connexion Twitter

  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.
  2. Cliquez ou appuyez sur Nouvelle connexion, sélectionnez Twitter, puis cliquez ou appuyez sur Créer.
  3. Entrez vos informations d’identification et créez la connexion.

    Ajouter une connexion Twitter

Étape 3 : Charger les tweets dans une collection LocalTweets au démarrage de l’application

Sélectionnez la propriété OnVisible pour Screen1 dans l’application et copiez-y la formule suivante :

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 :

  • Si l’appareil est en ligne, il charge dans une collection LocalTweets jusqu’à 100 tweets avec le terme de recherche « PowerApps ».
  • Si l’appareil est hors connexion, il charge le cache local à partir d’un fichier appelé « Tweets », s’il est disponible.

Étape 4 : Ajouter une galerie et la lier à la collection LocalTweets

  1. Insérez une nouvelle galerie avec hauteur flexible : Insérer > Gallery > Blank flexible height.
  2. Définissez la propriété Items sur LocalTweets.
  3. Ajoutez quatre contrôles Label pour afficher les données de chaque tweet et définissez les propriétés Text sur :
    • ThisItem.TweetText
    • ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
    • "RT: " & ThisItem.RetweetCount
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
  4. Ajoutez un contrôle Image et définissez la propriété Image sur ThisItem.UserDetails.ProfileImageUrl.

Étape 5 : Ajouter une étiquette d’état de la connexion

Insérez un nouveau contrôle Label et définissez sa propriété Text sur la formule suivante :

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

Cette formule vérifie si l’appareil est en ligne. Si c’est le cas, le texte de l’étiquette est « Connected », sinon il est « Offline ».

Étape 6 : Ajouter une entrée de texte pour composer les nouveaux tweets

  1. Insérez un nouveau contrôle Text input nommé « NewTweetTextInput ».
  2. Définissez la propriété Reset de l’entrée de texte sur resetNewTweet.

Étape 7 : Ajouter un bouton pour publier le tweet

  1. Ajoutez un contrôle Button et définissez sa propriété Text sur « Tweet ».
  2. Définissez la propriété OnSelect sur la formule suivante :

    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 :

  • Si l’appareil est en ligne, il tweete immédiatement le texte.
  • Si l’appareil est hors connexion, il capture le tweet dans une collection LocalTweetsToPost et l’enregistre dans l’application.

La formule réinitialise ensuite le texte dans la zone de texte.

Étape 8 : Ajouter un minuteur pour vérifier les tweets toutes les cinq minutes

Ajoutez un nouveau contrôle Timer :

  • Définissez la propriété Duration sur 300000.
  • Définissez la propriété AutoStart sur true.
  • Définissez OnTimerEnd sur la formule suivante :

    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. Si c’est le cas, l’application tweete tous les éléments de la LocalTweetsToPost. Elle efface ensuite la collection.

Maintenant que l’application est terminée, voyons à quoi elle ressemble avant de passer aux tests. À 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.

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

Test de l’application

Utilisez les étapes suivantes pour tester l’application :

  1. Exécutez PowerApps sur un appareil mobile en ligne.

    Vous devez exécuter une application au moins une fois en étant en ligne pour pouvoir télécharger l’application sur l’appareil.

  2. Lancez l’application Twitter.

  3. Notez que les tweets sont chargés et que l’état indique Connected.

  4. Fermez PowerApps complètement.

  5. Définissez le mode Avion pour être sûr qu’il est hors connexion.

  6. Exécutez 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).

  7. Réexécutez l’application.

  8. Notez qu’elle reflète correctement l’état de la connexion, avec l’état Offline.

  9. Écrivez un nouveau tweet. Il sera stocké localement dans la collection LocalTweetsToPost.

  10. Quittez le mode Avion. Une fois que le minuteur déclenché, l’application publie le 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. 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.