Vývoj aplikací fungujících offlineDevelop offline-capable apps with PowerApps

Jedním z nejčastějších scénářů, s nimiž se jako vývojář mobilních aplikací setkáte, je způsob, jak uživatelům zajistit možnost být produktivní, i když mají omezené nebo dokonce vůbec žádné připojení k internetu.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 nabízí sadu funkcí a chování, které vám pomohou s vývojem aplikací fungujících offline.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Můžete:You can:

  • Spustit mobilní aplikaci PowerApps, když jste offline.Launch the PowerApps mobile app when offline.
  • Spouštět vyvíjené aplikace, když jste offline.Run apps you develop when offline.
  • Zjistit, kdy je aplikace offline, online nebo v připojení účtovaném podle objemu dat pomocí signalizačního objektu Připojení.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Pro základní ukládání dat v režimu offline můžete využít kolekce a funkce, jako jsou třeba LoadData a SaveData.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Vytvoření aplikací fungujících offlineHow to build offline capable apps

První, nad čím se v případě offline scénářů musíte zamyslet, je způsob, jak vaše aplikace pracují s daty.The first thing to think about in offline scenarios is how your apps work with data. Aplikace PowerApps přistupují k datům především přes sadu konektorů, které platforma nabízí, jako jsou napří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 si také vytvořit vlastní konektory, které aplikacím umožní přistupovat k libovolné službě poskytující koncový bod RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Může se jednat o webové rozhraní API nebo službu, třeba Azure Functions.This could be a Web API or a service such as Azure Functions. Všechny tyto konektory používají HTTPS přes internet, což znamená, že uživatelé musí být online, aby konektory mohly přistupovat k datům a dalším funkcím, které služba nabízí.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.

Aplikace PowerApps s konektory

Manipulace s offline datyHandling offline data

Jedním z nejzajímavějších aspektů PowerApps je sada funkcí a vzorců, které vám umožňují filtrovat, hledat, řadit, agregovat a zpracovávat data konzistentním způsobem bez ohledu na používaný zdroj dat.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. Zdrojem může být kolekce v paměti v aplikaci, sharepointový seznam, databáze SQL nebo Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Tato konzistence vám umožňuje snadno opakovaně měnit cílení aplikace tak, aby používala jiný back-end.This consistency enables you to easily retarget an app to use a different backend. Důležitější tady ale je to, že vám také umožňuje používat místní kolekce pro správu dat s naprosto minimem změn v logice aplikace.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Ve skutečnosti místní kolekce představují hlavní mechanismus pro zpracování offline dat.In fact, local collections are the primary mechanism for handling offline data.

Vytvoření offline aplikace pro TwitterBuilding an offline Twitter app

Pokud chcete obrátit pozornost na offline aspekty vývoje aplikací, předvedeme vám jednoduchý scénář zaměřený na Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Vytvoříme aplikaci, která vám umožní číst twitterové příspěvky a odesílat tweety, i když jste offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Jakmile aplikace bude zase online, zveřejní tweety a znovu načte místní data.When the app comes online, the app posts tweets and reloads the local data.

Na vyšší úrovni aplikace provádí toto:At a high level, the app does the following:

  1. Při spuštění aplikace (na základě vlastnosti OnVisible první obrazovky):On app startup (based on the first screen's OnVisible property):

    • Pokud je zařízení online, načteme data přímo z konektoru Twitteru a těmito daty naplníme kolekci.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Pokud je zařízení offline, načteme data ze souboru místní paměti pomocí funkce LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Umožníme uživateli odesílat tweety – v případě režimu online budeme zveřejňovat příspěvky přímo na Twitteru a aktualizujeme místní mezipaměť.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. V online režimu každých 5 minut:Every 5 minutes, if online:

    • Zveřejníme všechny tweety, které máme v místní mezipaměti.We post any tweets that we have in the local cache.
    • Aktualizujeme místní mezipaměť a uložíme ji pomocí funkce SaveData.We refresh the local cache and save it using SaveData.

Krok 1: Vytvoření nové aplikace pro telefonStep 1: Create a new phone app

  1. Otevřete PowerApps Studio.Open PowerApps Studio.
  2. Klikněte nebo klepněte na Nová > Prázdná aplikace > Rozložení pro telefon.Click or tap New > Blank app > Phone layout.

    Prázdná aplikace – rozložení pro telefon

Krok 2: Přidání připojení k TwitteruStep 2: Add a Twitter connection

  1. Klikněte nebo klepněte na Obsah > Zdroje dat a potom zvolte Přidat zdroj dat na panelu Zdroje dat.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Klikněte nebo klepněte na Nové připojení, vyberte Twitter a klikněte nebo klepněte na Vytvořit.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Zadejte přihlašovací údaje a vytvořte připojení.Enter your credentials, and create the connection.

    Přidání připojení k Twitteru

Krok 3: Načtení tweetů do kolekce LocalTweets při spuštění aplikaceStep 3: Load tweets into a LocalTweets collection on app startup

V aplikaci pro Screen1 vyberte vlastnost OnVisible a zkopírujte následující 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 pro načtení tweetů

Tento vzorec zkontroluje, zda je zařízení online:This formula checks if the device is online:

  • Pokud je zařízení online, načte do kolekce LocalTweets až 100 tweetů s hledaným termínem „PowerApps“.If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Pokud je zařízení offline, načte místní mezipaměť ze souboru s názvem Tweety, pokud je k dispozici.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Vložte novou galerii s proměnlivou výškou: Vložit > Galerie > Prázdná s proměnlivou výškou.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Nastavte vlastnost Items na LocalTweets.Set the Items property to LocalTweets.
  3. Přidejte čtyři ovládací prvky Popisek pro zobrazení dat z jednotlivých tweetů 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. Přidejte ovládací prvek Obrázek a nastavte vlastnost Image na ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Krok 5: Přidání popisku stavu připojeníStep 5: Add a connection status label

Vložte nový ovládací prvek Popisek a pro jeho vlastnost 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 zkontroluje, zda je zařízení online.This formula checks if the device is online. Pokud je online, text popisku je Connected (Připojeno), v opačném případě je Offline.If it is, the text of the label is "Connected", otherwise it's "Offline".

Krok 6: Přidání textového zadání pro vytvoření nových tweetůStep 6: Add a text input to compose new tweets

  1. Vložte nový ovládací prvek Textové zadání s názvem NewTweetTextInput.Insert a new Text input control named "NewTweetTextInput".
  2. Nastavte vlastnost Reset textového zadání na resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Krok 7: Přidání tlačítka pro zveřejnění tweetuStep 7: Add a button to post the tweet

  1. Přidejte ovládací prvek Tlačítko a jeho vlastnost Text nastavte na Tweet.Add a Button control, and set the Text property to "Tweet".
  2. Vlastnost 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 zkontroluje, zda je zařízení online:This formula checks if the device is online:

  • Pokud je zařízení online, text se okamžitě zveřejní jako tweet.If the device is online, it tweets the text immediately.
  • V offline režimu zařízení zachytí tweet v kolekci LocalTweetsToPost a uloží ho do aplikace.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Vzorec potom resetuje text v textovém poli.Then the formula resets the text in the text box.

Krok 8: Přidání časovače pro vyhledávání tweetů každých pět minutStep 8: Add a timer to check for tweets every five minutes

Přidejte nový ovládací prvek Časovač:Add a new Timer control:

  • Vlastnost Duration nastavte na 300000.Set the Duration property to 300000.
  • Vlastnost AutoStart nastavte na true.Set the AutoStart property to true.
  • Vlastnost OnTimerEnd nastavte na následující 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 zkontroluje, zda je zařízení online.This formula checks if the device is online. Pokud je zařízení online, aplikace tweetuje všechny položky v kolekci LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Potom kolekci vymaže.Then it clears the collection.

Teď máme aplikaci hotovou a než se pustíme do testování, podíváme se, jak vypadá.Now that the app is finished, let's check out how it looks before we move on to testing. Nalevo je připojená aplikace a napravo aplikace, která je offline a která obsahuje jeden tweet připravený ke zveřejnění, jakmile bude zase 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á aplikace s režimy online a offline

Otestování aplikaceTesting the app

Aplikaci otestujte podle tohoto postupu:Use the following steps to test the app:

  1. Spusťte PowerApps na mobilním zařízení, které je online.Run PowerApps on a mobile device while online.

    Aplikaci musíte spustit minimálně jednou, když je zařízení online, abyste si ji mohli stáhnout do zařízení.You must run an app at least once while being online, so you can download the app to the device.

  2. Spusťte aplikaci pro Twitter.Launch the Twitter app.
  3. Všimněte si, že tweety jsou načtené a stav zobrazuje Connected (Připojeno).Notice that the tweets are loaded, and that the status shows Connected.
  4. Úplně zavřete PowerApps.Close PowerApps completely.
  5. Nastavte zařízení do režimu v letadle, abyste měli jistotu, že je offline.Set the device to airplane mode to ensure that it's offline.
  6. Spusťte PowerApps.Run PowerApps.

    Teď můžete spustit aplikaci pro Twitter offline. Máte přístup ke všem aplikacím, které jste dříve spustili na tomto zařízení, když bylo online (tj. PowerApps skryje všechny aplikace, které jste si ještě do zařízení nestáhli).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. Spusťte aplikaci znovu.Run the app again.
  8. Všimněte si, že správně odráží stav připojení – Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Napište nový tweet.Write a new tweet. Tweet se uloží místně do kolekce LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Ukončete režim v letadle.Exit airplane mode. Po aktivaci časovače aplikace tweet zveřejní.After the timer triggers, the app posts the tweet.

Doufáme, že jste z tohoto článku získali představu o možnostech, které PowerApps nabízí pro vytváření offline aplikací.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Jako vždy nám můžete do fóra poslat svůj názor a podělit se o ukázky svých offline aplikací na blogu komunity PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.