Разработка приложений, поддерживающих автономный режим работы, с помощью PowerAppsDevelop offline-capable apps with PowerApps

Один из наиболее распространенных сценариев, с которым сталкивается разработчик мобильного приложения, — это обеспечение продуктивности пользователей в случае ограниченного подключения или его отсутствия.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 включает набор функций и режимов, которые помогут вам в разработке приложений, поддерживающих автономный режим.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Вы сможете:You can:

  • запускать мобильное приложение PowerApps в автономном режиме;Launch the PowerApps mobile app when offline.
  • запускать в автономном режиме приложение, которые вы разрабатываете;Run apps you develop when offline.
  • определять режим приложения (интерактивный, автономный или режим лимитного подключения) с помощью объекта сигнала подключения;Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • использовать коллекции и функции, например LoadData и SaveData, для основного хранилища данных в автономном режиме.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Как создать приложение, поддерживающее автономный режим работыHow to build offline capable apps

При создании сценариев с поддержкой автономного режима работы необходимо в первую очередь подумать о том, как ваше приложение будет работать с данными.The first thing to think about in offline scenarios is how your apps work with data. Приложения в PowerApps преимущественно получают доступ к данным с помощью набора соединителей, обеспечиваемых платформой, например SharePoint, Office 365 и 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. Вы можете также создать настраиваемые соединители, которые позволят приложениям получить доступ к любой службе, предоставляющей конечную точку RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Это может быть веб-API или такая служба, как Функции Azure.This could be a Web API or a service such as Azure Functions. Все эти соединители используют протокол HTTPS через Интернет. Это означает, что пользователи должны быть в сети, чтобы получить доступ к данным и любым другим возможностям, предлагаемым службой.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.

Приложение PowerApps и соединители

Управление данными в автономном режимеHandling offline data

Одним из наиболее интересных аспектов PowerApps является ее набор функций и формул, позволяющих выполнять согласованные фильтрацию, поиск, сортировку, статистическое вычисление и обработку данных независимо от источника данных.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. Источники в приложении варьируются от коллекций в памяти до списков SharePoint, баз данных SQL и Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Эта согласованность позволяет легко перенаправить приложение для использования другой серверной части.This consistency enables you to easily retarget an app to use a different backend. Что еще более важно, благодаря такой согласованности вы можете использовать локальные коллекции для управления данными, практически не изменяя логику приложения.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Фактически локальные коллекции представляют собой основной механизм обработки данных в автономном режиме.In fact, local collections are the primary mechanism for handling offline data.

Создание приложения Twitter, поддерживающего автономный режим работыBuilding an offline Twitter app

Сосредотачиваясь на аспектах автономного режима работы при разработке приложения, мы рассмотрим простой сценарий для Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Мы создадим приложение, которое позволит читать записи Twitter, а также отправлять твиты в автономном режиме.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. При переходе в интерактивный режим приложение будет публиковать твиты и перезагружать локальные данные.When the app comes online, the app posts tweets and reloads the local data.

Приложение выполняет следующие основные действия:At a high level, the app does the following:

  1. При запуске приложения (на основе свойства OnVisible первого экрана):On app startup (based on the first screen's OnVisible property):

    • Если устройство подключено к сети, мы напрямую получим доступ к соединителю Twitter, чтобы извлечь данные и заполнить ими коллекцию.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Если устройство находится в автономном режиме, мы загрузим данные из локального файла кэша с помощью функции LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Мы позволим пользователям отправлять твиты: если они будут в сети — то напрямую в Twitter и с обновлением локального кэша.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Через каждые 5 минут (при сетевом подключении):Every 5 minutes, if online:

    • Мы опубликуем все твиты, которые находятся в локальном кэше.We post any tweets that we have in the local cache.
    • Мы обновим локальный кэш и сохраним его с помощью функции SaveData.We refresh the local cache and save it using SaveData.

Шаг 1. Создание нового мобильного приложенияStep 1: Create a new phone app

  1. Откройте PowerApps Studio.Open PowerApps Studio.
  2. Щелкните Создать > Пустое приложение > Макет для телефона.Click or tap New > Blank app > Phone layout.

    Пустое приложение, макет для телефона

Шаг 2. Добавление подключения к TwitterStep 2: Add a Twitter connection

  1. Щелкните Содержимое > Источники данных, а затем выберите Добавление источника данных на панели Источники данных.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Щелкните Новое подключение, выберите Twitter и щелкните Создать.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Введите свои учетные данные и создайте подключение.Enter your credentials, and create the connection.

    Добавление подключения к Twitter

Шаг 3. Загрузка твитов в коллекцию LocalTweets при запуске приложенияStep 3: Load tweets into a LocalTweets collection on app startup

Выберите свойство OnVisible для экрана 1 в приложении, а затем скопируйте его в следующую формулу: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")

Формула для загрузки твитов

Эта формула проверяет, подключено ли устройство к сети.This formula checks if the device is online:

  • Если устройство подключено к сети, формула загружает в коллекцию LocalTweets до 100 твитов, соответствующих поисковому запросу "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Если устройство находится в автономном режиме, формула загружает локальный кэш из файла с именем Tweets, если он доступен.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Вставьте новую коллекцию с изменяющейся высотой — Вставить > Коллекция > Пустая, горизонтальная, высота.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Задайте свойству Items значение LocalTweets.Set the Items property to LocalTweets.
  3. Добавьте четыре элемента управления Метка, чтобы отобразить данные каждого твита, а затем задайте для их свойства Text такие значения: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. Добавьте элемент управления Изображение, а затем задайте для свойства Image значение ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Шаг 5. Добавление метки состояния подключенияStep 5: Add a connection status label

Вставьте новый элемент управления Метка, а затем задайте для свойства Text следующую формулу:Insert a new Label control, and set its Text property to the following formula:

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

Эта формула проверяет, подключено ли устройство к сети.This formula checks if the device is online. Если оно подключено, отобразится текст метки "Подключено". В противном случае — "В автономном режиме".If it is, the text of the label is "Connected", otherwise it's "Offline".

Шаг 6. Добавление текстового поля для создания новых твитовStep 6: Add a text input to compose new tweets

  1. Вставьте новый элемент управления Текстовое поле с именем "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".
  2. Задайте для его свойства Reset значение resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Шаг 7. Добавление кнопки для отправки твитаStep 7: Add a button to post the tweet

  1. Добавьте элемент управления Кнопка и задайте для свойства Text значение Tweet.Add a Button control, and set the Text property to "Tweet".
  2. Задайте для свойства OnSelect следующую формулу: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})
    

Эта формула проверяет, подключено ли устройство к сети.This formula checks if the device is online:

  • Если устройство подключено к сети, текст сразу же отобразится.If the device is online, it tweets the text immediately.
  • Если устройство находится в автономном режиме, твит будет помещен в коллекцию LocalTweetsToPost, а также сохранен в приложении.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Затем формула сбрасывает текст в текстовом поле.Then the formula resets the text in the text box.

Шаг 8. Добавление таймера для проверки на новые твиты каждые пять минутStep 8: Add a timer to check for tweets every five minutes

Добавьте новый элемент управления Таймер:Add a new Timer control:

  • Задайте свойству Duration значение 300 000.Set the Duration property to 300000.
  • Установите для свойства AutoStart значение true.Set the AutoStart property to true.
  • Задайте для свойства OnTimerEnd следующую формулу: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"})
    )
    

Эта формула проверяет, подключено ли устройство к сети.This formula checks if the device is online. Если оно подключено, приложение отправит все элементы, размещенные в коллекции LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Затем коллекция будет очищена.Then it clears the collection.

Теперь, когда работа приложения завершена, давайте посмотрим, как оно выглядит, а затем перейдем к проверке.Now that the app is finished, let's check out how it looks before we move on to testing. На изображении слева приложение в интерактивном режиме, а справа в автономном. Приложение справа также содержит твит для отправки при переключении режима.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.

Готовое приложение с интерактивным и автономным режимами

Проверка приложенияTesting the app

Чтобы протестировать приложение, сделайте следующее:Use the following steps to test the app:

  1. Запустите PowerApps на мобильном устройстве, подключенном к сети.Run PowerApps on a mobile device while online.

    Приложение необходимо запустить по крайней мере один раз при активном подключении к сети, чтобы вы могли загрузить его на устройство.You must run an app at least once while being online, so you can download the app to the device.

  2. Запустите приложение Twitter.Launch the Twitter app.
  3. При этом начнут загружаться твиты, а состояние изменится на Подключено.Notice that the tweets are loaded, and that the status shows Connected.
  4. Полностью закройте PowerApps.Close PowerApps completely.
  5. Установите для устройства режим "в самолете", чтобы оно находилось в автономном режиме.Set the device to airplane mode to ensure that it's offline.
  6. Запустите PowerApps.Run PowerApps.

    Теперь можно запустить приложение Twitter автономно, и у вас также будет доступ к любым другим приложениям, ранее запущенным на этом устройстве при подключении к сети (PowerApps скрывает все приложения, которые еще не загружены на устройство).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. Запустите приложение снова.Run the app again.
  8. Обратите внимание, что теперь отображается состояние подключения Не в сети.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Напишите новый твит.Write a new tweet. Он сохранится локально в коллекции LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Выйдите из режима "самолета".Exit airplane mode. После запуска таймера приложение отправит твит.After the timer triggers, the app posts the tweet.

Мы надеемся, что из этой статьи вы получили представление о возможностях PowerApps для создания приложений, поддерживающих автономный режим работы.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Как всегда, вы можете оставить свой отзыв на форуме, а также поделиться своими примерами приложений, поддерживающих работу в автономном режиме. Для этого используйте блог сообщества PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.