Sviluppare app con supporto offline con PowerAppsDevelop offline-capable apps with PowerApps

Uno degli scenari più comuni che gli sviluppatori delle app per dispositivi mobili si trovano ad affrontare consiste nel favorire la produttività degli utenti quando la connettività è limitata o addirittura assente.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 offre un set di funzionalità e comportamenti che consentono di sviluppare app con supporto offline.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Puoi:You can:

  • Avviare l'app PowerApps per dispositivi mobili quando offline.Launch the PowerApps mobile app when offline.
  • Eseguire applicazioni sviluppate quando offline.Run apps you develop when offline.
  • Determinare quando un'app è offline, online o in una connessione a consumo usando l'oggetto segnale Connessione.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Usare raccolte e sfruttare le funzioni come LoadData e SaveData per l'archiviazione dei dati di base quando offline.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Come creare app con supporto offlineHow to build offline capable apps

La prima cosa da considerare negli scenari offline è l'utilizzo dei dati nelle app.The first thing to think about in offline scenarios is how your apps work with data. Le app in PowerApps accedono principalmente ai dati attraverso un set di connettori offerto dalla piattaforma, ad esempio SharePoint, Office 365 e 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. È anche possibile creare connettori personalizzati che consentono alle app di accedere a qualsiasi servizio che fornisca un endpoint RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Potrebbe trattarsi di un'API Web o di un servizio, ad esempio Funzioni di Azure.This could be a Web API or a service such as Azure Functions. Tutti questi connettori usano HTTPS tramite Internet, quindi gli utenti devono essere online per poter accedere ai dati e a qualsiasi altra funzionalità offerta da un servizio.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.

App PowerApps con i connettori

Gestione dei dati offlineHandling offline data

Uno degli aspetti più interessanti di PowerApps è un set di funzionalità e formule che consentono di filtrare, cercare, ordinare, aggregare e modificare i dati in modo coerente, indipendentemente dall'origine dati.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. Le origini vanno dalle raccolte in memoria nell'app agli elenchi di SharePoint, ai database SQL e a Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Questa coerenza consente di ridestinare facilmente un'app all'uso di un back-end diverso.This consistency enables you to easily retarget an app to use a different backend. Ancora più importante in questo caso, consente anche di usare le raccolte locali per la gestione dei dati quasi senza quasi apportare modifiche alla logica di un'app.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Le raccolte locali sono, in effetti, il meccanismo principale per la gestione dei dati offline.In fact, local collections are the primary mechanism for handling offline data.

Creazione di un'applicazione Twitter offlineBuilding an offline Twitter app

Per continuare ad analizzare gli aspetto offline dello sviluppo di app verrà ora mostrato un semplice scenario basato su Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Verrà creata un'app che consente di leggere post su Twitter e inviare tweet quando offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Quando l'app torna online, pubblica tweet e ricarica i dati locali.When the app comes online, the app posts tweets and reloads the local data.

A livello principale, l'app effettua le seguenti operazioni:At a high level, the app does the following:

  1. All'avvio dell'app (in base alla proprietà OnVisible nella prima schermata):On app startup (based on the first screen's OnVisible property):

    • Se il dispositivo è online, si accede direttamente al connettore Twitter per recuperare i dati e, con questi, popolare una raccolta.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Se il dispositivo è offline, si caricano i dati da un file della cache locale usando LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Si consente all'utente di inviare tweet: se online, pubblicandoli direttamente su Twitter e aggiornando la cache locale.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Ogni 5 minuti, se online:Every 5 minutes, if online:

    • Si pubblicano tutti i tweet presenti nella cache locale.We post any tweets that we have in the local cache.
    • Si aggiorna la cache locale e la si salva con SaveData.We refresh the local cache and save it using SaveData.

Passaggio 1: Creare una nuova app per smartphoneStep 1: Create a new phone app

  1. Aprire PowerApps Studio.Open PowerApps Studio.
  2. Scegliere o toccare Nuovo > App vuota > Layout del telefono.Click or tap New > Blank app > Phone layout.

    App vuota, layout del telefono

Passaggio 2: Aggiungere una connessione a TwitterStep 2: Add a Twitter connection

  1. Scegliere o toccare Contenuto > Origini dati, quindi scegliere Aggiungi origine dati nel pannello Origini dati.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Scegliere o toccare Nuova connessione, selezionare Twitter e scegliere o toccare Crea.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Immettere le credenziali e creare la connessione.Enter your credentials, and create the connection.

    Aggiungere una connessione a Twitter

Passaggio 3: Caricare i tweet in una raccolta LocalTweets all'avvio dell'appStep 3: Load tweets into a LocalTweets collection on app startup

Selezionare la proprietà OnVisible per Screen1 nell'app e copiare la formula seguente: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")

Formula per caricare tweet

Questa formula controlla se il dispositivo è online:This formula checks if the device is online:

  • Se il dispositivo è online, carica una raccolta LocalTweets che contiene fino a 100 tweet con il termine di ricerca "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Se il dispositivo è offline, carica la cache locale da un file denominato "Tweet", se disponibile.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Inserire una nuova raccolta ad altezza dinamica: Inserisci > Raccolta > Vuota ad altezza dinamica.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Impostare la proprietà Items su LocalTweets.Set the Items property to LocalTweets.
  3. Aggiungere quattro controlli Etichetta per visualizzare i dati da ciascun tweet e impostare le proprietà Text su: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. Aggiungere un controllo Immagine e impostare la proprietà Image su ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Passaggio 5: Aggiungere un'etichetta di stato di connessioneStep 5: Add a connection status label

Inserire un nuovo controllo Etichetta e impostarne la proprietà Text sulle formule seguenti:Insert a new Label control, and set its Text property to the following formula:

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

Questa formula controlla se il dispositivo è online.This formula checks if the device is online. Se lo è, il testo dell'etichetta è "Connesso", in caso contrario è "Offline".If it is, the text of the label is "Connected", otherwise it's "Offline".

Passaggio 6: Aggiungere un input di testo per comporre nuovi tweetStep 6: Add a text input to compose new tweets

  1. Inserire un nuovo controllo Input di testo denominato "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".
  2. Impostare la proprietà Reset dell'input di testo su resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Passaggio 7: Aggiungere un pulsante per pubblicare il tweetStep 7: Add a button to post the tweet

  1. Aggiungere un controllo Pulsante e impostarne la proprietà Text su "Tweet".Add a Button control, and set the Text property to "Tweet".
  2. Impostare la proprietà OnSelect sulla formula seguente: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})
    

Questa formula controlla se il dispositivo è online:This formula checks if the device is online:

  • Se il dispositivo è online, twitta il testo immediatamente.If the device is online, it tweets the text immediately.
  • Se il dispositivo è offline, acquisisce il tweet in una raccolta LocalTweetsToPost e lo salva l'applicazione.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Quindi, la formula reimposta il testo nella casella di testo.Then the formula resets the text in the text box.

Passaggio 8: Aggiungere un timer per verificare se ci sono tweet ogni cinque minutiStep 8: Add a timer to check for tweets every five minutes

Aggiungere un nuovo controllo Timer:Add a new Timer control:

  • Impostare la proprietà Duration su 300000.Set the Duration property to 300000.
  • Impostare la proprietà AutoStart su true.Set the AutoStart property to true.
  • Impostare la proprietà OnTimerEnd sulla formula seguente: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"})
    )
    

Questa formula controlla se il dispositivo è online.This formula checks if the device is online. Se lo è, l'app twitta tutti gli elementi nella raccolta LocalTweetsToPost,If it is, the app tweets all the items in the LocalTweetsToPost collection. quindi ne cancella il contenuto.Then it clears the collection.

Ora che l'app è completata, se ne valuterà l'aspetto prima di procedere all'esecuzione di test.Now that the app is finished, let's check out how it looks before we move on to testing. A sinistra, l'app è connessa; a destra, è offline, con un tweet pronto per la pubblicazione quando sarà nuovamente online.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.

App completata in modalità online e offline

Test dell'appTesting the app

Per testare l'app, procedere come segue:Use the following steps to test the app:

  1. Eseguire PowerApps in un dispositivo mobile in modalità online.Run PowerApps on a mobile device while online.

    È necessario eseguire un'app almeno una volta in modalità online, per poter scaricare l'app nel dispositivo.You must run an app at least once while being online, so you can download the app to the device.

  2. Avviare l'app Twitter.Launch the Twitter app.
  3. Si noti che vengono caricati i tweet e che lo stato è Connesso.Notice that the tweets are loaded, and that the status shows Connected.
  4. Chiudere PowerApps completamente.Close PowerApps completely.
  5. Impostare il dispositivo in modalità aereo per assicurarsi che sia offline.Set the device to airplane mode to ensure that it's offline.
  6. Eseguire PowerApps.Run PowerApps.

    È ora possibile eseguire l'app Twitter offline e sarà possibile accedere alle altre app che sono stati eseguite in precedenza su questo dispositivo mentre online (cioè PowerApps nasconde le app che non sono ancora state scaricate sul dispositivo).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. Eseguire nuovamente l'app.Run the app again.
  8. Si noti come riflette correttamente lo stato di connessione, con lo stato Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Scrivere un nuovo tweet,Write a new tweet. che verrà archiviato in locale nella raccolta LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Uscire dalla modalità aereo.Exit airplane mode. Dopo che viene attivato il timer, l'app pubblica il tweet.After the timer triggers, the app posts the tweet.

Ci auguriamo che questo articolo offra un'idea delle funzionalità di PowerApps per la creazione di app offline.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Come sempre, invitiamo gli utenti a fornire commenti e suggerimenti nel forum e a condividere gli esempi di app offline nel blog della community di PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.