Vývoj plátnových aplikácií fungujúcich offline so službou PowerAppsDevelop offline-capable canvas apps with PowerApps

Jedným z najbežnejších scenárov, s akými sa ako vývojár mobilných aplikácií stretnete, je ten, ako používateľom umožniť, aby boli produktívni aj pri obmedzenom alebo dokonca vôbec žiadnom internetovom pripojení.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. Služba PowerApps ponúka skupinu funkcií a správaní, ktoré vám pomôžu vytvoriť plátnové aplikácie fungujúce v režime offline.PowerApps has a set of features and behaviors that help you to develop offline-capable canvas apps. Môžete:You can:

  • Spustiť aplikáciu PowerApps Mobile, keď ste v režime offline.Launch PowerApps Mobile when offline.
  • Spúšťať aplikácie, ktoré vyvíjate, keď ste offline.Run apps that you develop when offline.
  • Zistiť, kedy je aplikácia offline, online alebo v pripojení účtovanom podľa objemu údajov pomocou signalizačného objektu Pripojenie.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Na základné ukladanie údajov v režime offline môžete využiť kolekcie a také funkcie, ako sú napríklad LoadData a SaveData.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Vytvorenie aplikácií fungujúcich v režime offlineHow to build offline capable apps

Prvá vec, nad ktorou sa v prípade offline scenárov musíte zamyslieť, je spôsob, akým vaše aplikácie pracujú s údajmi.The first thing to think about in offline scenarios is how your apps work with data. Aplikácie PowerApps pristupujú k údajom predovšetkým prostredníctvom množiny konektorov, ktoré platforma ponúka, napríklad SharePoint, Office 365 a 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. Môžete tiež vytvoriť vlastné konektory, ktoré umožnia aplikáciám pristupovať k akejkoľvek službe, ktorá poskytuje koncový bod RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Môže to byť webové rozhranie API alebo služba, napríklad Azure Functions.This could be a Web API or a service such as Azure Functions. Všetky tieto konektory používajú HTTPS na internete, čo znamená, že používatelia musia byť online, aby konektory mohli pristupovať k údajom a iným funkciám, ktoré táto služba ponúka.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.

Aplikácia PowerApps s konektormi

Manipulácia s offline údajmiHandling offline data

Jedným z najzaujímavejších aspektov PowerApps je množina funkcií a vzorcov, ktoré vám umožnia filtrovať, vyhľadávať, zoraďovať, agregovať a spracovávať údaje konzistentným spôsobom bez ohľadu na zdroj údajov.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. Zdrojom môže byť kolekcia v pamäti v aplikácii, sharepointový zoznam, databáza SQL alebo Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Táto konzistencia vám umožňuje jednoducho opakovane meniť cielenie aplikácie tak, aby používala iný koncový server.This consistency enables you to easily retarget an app to use a different backend. Dôležitejšie je však to, že vám tiež umožňuje používať miestne kolekcie pre správu údajov s takmer žiadnymi zmenami v logike aplikácie.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. V skutočnosti sú miestne kolekcie hlavným mechanizmom na spracovanie údajov v režime offline.In fact, local collections are the primary mechanism for handling offline data.

Vytvorenie offline aplikácie pre TwitterBuilding an offline Twitter app

Teraz sa sústredíme na offline aspekty vývoja aplikácií a ukážeme vám jednoduchý scenár zameraný na Twitteri.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Vytvoríme aplikáciu, ktorá vám umožní čítať twitterové príspevky a odosielať tweety, aj keď ste v režime offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Keď aplikácia prejde do režimu online, uverejní tweety a opätovne načíta miestne údaje.When the app comes online, the app posts tweets and reloads the local data.

Na vyššej úrovni aplikácia funguje takto:At a high level, the app does the following:

  1. Pri spustení aplikácie (na základe vlastnosti OnVisible prvej obrazovky):On app startup (based on the first screen's OnVisible property):

    • Ak je zariadenie v režime online, načítame údaje priamo z konektoru Twittera a naplníme nimi kolekciu.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Ak je zariadenie v režime offline, načítame údaje zo súboru miestnej vyrovnávacej pamäte pomocou funkcie LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Umožníme používateľovi odoslať tweety - v prípade režimu online budeme uverejňujeme príspevky priamo na sieti Twitter a obnovíme miestnu vyrovnávaciu pamäť.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. V režime online každých 5 minút:Every 5 minutes, if online:

    • Uverejníme všetky tweety, ktoré máme v miestnej vyrovnávacej pamäti.We post any tweets that we have in the local cache.
    • Obnovíme miestnu vyrovnávaciu pamäť a uložíme ju pomocou funkcie SaveData.We refresh the local cache and save it using SaveData.

Krok 1: Vytvorenie novej aplikácie pre telefónStep 1: Create a new phone app

  1. Otvorte aplikáciu PowerApps Studio.Open PowerApps Studio.

  2. Kliknite alebo ťuknite na Nová > Prázdna aplikácia > Rozloženie pre telefón.Click or tap New > Blank app > Phone layout.

    Prázdna aplikácia, rozloženie pre telefón

Krok 2: Pridanie pripojenia k TwitteruStep 2: Add a Twitter connection

  1. Kliknite alebo ťuknite na Obsah > Zdroje údajov, potom vyberte Pridať zdroj údajov na paneli Zdroje údajov.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.

  2. Kliknite alebo ťuknite na Nové pripojenie , vyberte Twitter a potom kliknite alebo ťuknite na Vytvoriť.Click or tap New Connection , select Twitter , and click or tap Create.

  3. Zadajte svoje prihlasovacie údaje a vytvorte pripojenie.Enter your credentials, and create the connection.

    Pridajte pripojenie k Twitteru

Krok 3: Načítanie tweetov do kolekcie LocalTweets pri spustení aplikácieStep 3: Load tweets into a LocalTweets collection on app startup

V aplikácii vyberte pre Screen1 vlastnosť OnVisible a skopírujte nasledujúci vzorec: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")

Vzorec pre načítanie tweetov

Tento vzorec skontroluje, či je zariadenie online:This formula checks if the device is online:

  • Ak je zariadenie online, načíta do kolekcie LocalTweets až 100 tweetov s hľadaným výrazom PowerApps.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Ak je zariadenie offline, načíta miestnu vyrovnávaciu pamäť zo súboru s názvom Tweety, ak je k dispozícii.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Vložte novú galériu s prispôsobiteľnou výškou: Vložiť > Galéria > Prázdna s prispôsobiteľnou výškou.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.

  2. Nastavte vlastnosťItems na LocalTweets.Set the Items property to LocalTweets.

  3. Pridajte štyri ovládacie prvky Označenie na zobrazenie údajov z jednotlivých tweetov a nastavte vlastnosti Text na: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. Pridajte ovládací prvok Obrázok a nastavte vlastnosť Image na ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Krok 5: Pridanie označenia stavu pripojeniaStep 5: Add a connection status label

Vložte nový ovládací prvok Označenie a pre jeho vlastnosť Text nastavte tento vzorec:Insert a new Label control, and set its Text property to the following formula:

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

Tento vzorec skontroluje, či je zariadenie online.This formula checks if the device is online. Ak áno, text označenia je Connected (Pripojený), v opačnom prípade je Offline.If it is, the text of the label is "Connected", otherwise it's "Offline".

Krok 6: Pridanie textového vstupu na vytvorenie nových tweetovStep 6: Add a text input to compose new tweets

  1. Vložte nový ovládací prvok Textový vstup s názvom "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".

  2. Nastavte vlastnosť Reset textového vstupu na resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Krok 7: Pridanie tlačidla na uverejnenie tweetuStep 7: Add a button to post the tweet

  1. Pridajte ovládací prvok Tlačidlo a jeho vlastnosť Text nastavte na Tweet.Add a Button control, and set the Text property to "Tweet".

  2. Vlastnosť OnSelect nastavte na tento vzorec: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})
    

Tento vzorec skontroluje, či je zariadenie online:This formula checks if the device is online:

  • Ak je zariadenie online, text sa okamžite uverejní ako tweet.If the device is online, it tweets the text immediately.
  • Ak je zariadenie offline, zachytí tweet v kolekcii LocalTweetsToPost a uloží ho do aplikácie.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Vzorec potom resetuje text v textovom poli.Then the formula resets the text in the text box.

Krok 8: Pridať časovač na vyhľadávanie tweetov každých 5 minútStep 8: Add a timer to check for tweets every five minutes

Pridajte nový ovládací prvok Časovač:Add a new Timer control:

  • Vlastnosť Duration nastavte na 300 000.Set the Duration property to 300000.

  • Vlastnosť AutoStart nastavte na true.Set the AutoStart property to true.

  • Vlastnosť OnTimerEnd nastavte na nasledujúci vzorec: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"})
    )
    

Tento vzorec skontroluje, či je zariadenie online.This formula checks if the device is online. Ak áno, aplikácia tweetuje všetky položky v kolekcii LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Potom kolekciu vymaže.Then it clears the collection.

Teraz je aplikácia už dokončená, ale skôr ako sa pustíme do testovania, pozrime sa ako vyzerá.Now that the app is finished, let's check out how it looks before we move on to testing. Naľavo je pripojená aplikácia a napravo je aplikácia offline s jedným tweetom pripraveným na uverejnenie, keď bude znovu 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.

Dokončená aplikácia s režimami online a offline

Testovanie aplikácieTesting the app

Aplikáciu otestujete podľa tohto postupu:Use the following steps to test the app:

  1. Spustite PowerApps v mobilnom zariadení, ktoré je online.Run PowerApps on a mobile device while online. Aplikáciu musíte spustiť aspoň jedenkrát počas režimu online, aby mohla byť stiahnutá do zariadenia.You must run an app at least once while being online, so you can download the app to the device.
  2. Spustite aplikáciu pre Twitter.Launch the Twitter app.
  3. Všimnite si, že tweety sú načítané a stav je Connected (Pripojené).Notice that the tweets are loaded, and that the status shows Connected.
  4. Úplne zatvorte PowerApps.Close PowerApps completely.
  5. Aby ste mali istotu, že zariadenie je offline, nastavte ho do režimu V lietadle.Set the device to airplane mode to ensure that it's offline.
  6. Spustite PowerApps.Run PowerApps. Teraz môžete spustiť aplikáciu pre Twitter offline, a budete mať prístup ku všetkým aplikáciám, ktoré ste predtým spustili v tomto zariadení počas online režimu (t. j. PowerApps skryje všetky aplikácie, ktoré ste si ešte do zariadenia nestiahli).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. Spustite aplikáciu znovu.Run the app again.
  8. Všimnite si, že správne odráža stav pripojenia - Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Napíšte nový tweet.Write a new tweet. Tweet sa uloží miestne do kolekcie LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Ukončite režim V lietadle.Exit airplane mode. Po aktivácii časovača aplikácia tweet uverejní.After the timer triggers, the app posts the tweet.

Dúfame, že vám tento článok poskytol dobrú predstavu o tom, aké možnosti PowerApps ponúka pri vytváraní offline aplikácií.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Ako vždy nám môžete do fóra poslať svoje pripomienky a v blogu komunity PowerApps sa s ostatnými môžete podeliť o ukážky svojich offline aplikácií.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.