Programar aplicações com funcionalidade offline com o PowerAppsDevelop offline-capable apps with PowerApps

Uma das situações mais comuns que enfrenta como um programador de aplicações móveis é permitir que os utilizadores sejam produtivos quando existe conectividade limitada ou nenhuma conectividade.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. O PowerApps inclui um conjunto de funcionalidades e comportamentos que o ajudam a programar aplicações com funcionalidade offline.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Pode:You can:

  • Iniciar a aplicação móvel do PowerApps quando estiver offline.Launch the PowerApps mobile app when offline.
  • Executar as aplicações que desenvolver quando estiver offline.Run apps you develop when offline.
  • Determinar quando uma aplicação está offline, online ou numa ligação limitada, com o objeto do sinal de Ligação.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Utilizar coleções e tirar partido de funções, como LoadData e SaveData para armazenamento de dados básico quando estiver offline.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Como criar aplicações com funcionalidade offlineHow to build offline capable apps

O primeiro aspeto a considerar em cenários offline é a forma como as suas aplicações trabalham com os dados.The first thing to think about in offline scenarios is how your apps work with data. As aplicações do PowerApps acedem aos dados, principalmente, através de um conjunto de Conectores que a plataforma fornece, como o SharePoint, Office 365 e o 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. Também pode criar conectores personalizados que permitem às aplicações aceder a qualquer serviço que forneça um ponto de final RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Isto pode ser uma API Web ou um serviço, como as Funções do Azure.This could be a Web API or a service such as Azure Functions. Todos estes conectores utilizam HTTPS na Internet, o que significa que os utilizadores têm de estar online para acederem aos dados e a outras funcionalidades oferecidas por um serviço.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.

Aplicação do PowerApps com conectores

Processar dados offlineHandling offline data

Um dos aspetos mais interessantes do PowerApps é o conjunto de capacidades e as fórmulas que lhe permitem filtrar, pesquisar, ordenar, agregar e manipular dados de forma consistente, independentemente da origem de dados.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. As origens vão desde coleções dentro da memória da aplicação até listas do SharePoint, bases de dados SQL e o Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Este consistência permite-lhe facilmente redirecionar uma aplicação para que utilize um back-end diferente.This consistency enables you to easily retarget an app to use a different backend. Mais importante ainda, também permite utilizar coleções locais para a gestão de dados, quase sem alterações à lógica da aplicação.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. De facto, as coleções locais são o mecanismo primário para processar dados offline.In fact, local collections are the primary mechanism for handling offline data.

Criar uma aplicação offline do TwitterBuilding an offline Twitter app

Para manter o foco nos aspetos offline de desenvolvimento de aplicações, vamos mostrar-lhe um simples cenário centrado no Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Iremos criar uma aplicação que lhe permite ler mensagens do Twitter e submeter tweets quando estiver offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Quando a aplicação ficar online, a aplicação publica os tweets e recarrega os dados locais.When the app comes online, the app posts tweets and reloads the local data.

Num nível elevado, a aplicação faz o seguinte:At a high level, the app does the following:

  1. No arranque de aplicação (com base na propriedade OnVisible do primeiro ecrã):On app startup (based on the first screen's OnVisible property):

    • Se o dispositivo estiver online, acedemos diretamente ao conector do Twitter para obter dados e preencher uma coleção com esses dados.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Se o dispositivo estiver offline, carregamos os dados de um ficheiro da cache local com LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Iremos permitir ao utilizador submeter tweets - se estivermos online, publicamos diretamente no Twitter e atualizamos a cache local.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. A cada 5 minutos, se estiver online:Every 5 minutes, if online:

    • Publicamos qualquer tweets que tivermos na cache local.We post any tweets that we have in the local cache.
    • Atualizamos a cache local e guardámo-la com SaveData.We refresh the local cache and save it using SaveData.

Passo 1: criar uma nova aplicação para telemóvelStep 1: Create a new phone app

  1. Abra o PowerApps Studio.Open PowerApps Studio.
  2. Clique ou toque em Novo > Aplicação em branco > Esquema de telemóvel.Click or tap New > Blank app > Phone layout.

    Aplicação em branco, esquema de telemóvel

Passo 2: adicionar uma ligação do TwitterStep 2: Add a Twitter connection

  1. Clique ou toque em Conteúdo > Origens de dados e escolha Adicionar origem de dados no painel Origens de dados.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.

  2. Clique ou toque em Nova Ligação , selecione Twitter e clique ou toque em Criar.Click or tap New Connection , select Twitter , and click or tap Create.

  3. Introduza as suas credenciais e crie a ligação.Enter your credentials, and create the connection.

    Adicionar uma ligação do Twitter

Passo 3: carregar tweets para uma coleção de LocalTweets no arranque de aplicaçãoStep 3: Load tweets into a LocalTweets collection on app startup

Selecione a propriedade OnVisible do Screen1 da aplicação e copie a fórmula seguinte: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")

Fórmula para carregar tweets

Esta fórmula verifica se o dispositivo está online:This formula checks if the device is online:

  • Se o dispositivo estiver online, carrega para uma coleção LocalTweets até 100 tweets com o termo de pesquisa "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Se o dispositivo estiver offline, carrega a cache local de um ficheiro chamado "Tweets", se estiver disponível.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Insira uma nova galeria de altura flexível: inserir > Galeria > Altura flexível em branco.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.

  2. Defina a propriedade Items para LocalTweets.Set the Items property to LocalTweets.

  3. Adicione quatro controlos Etiqueta para apresentar os dados de cada tweet e defina as propriedades Texto para: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. Adicione um controlo Imagem e defina a propriedade Imagem para ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Passo 5: adicionar uma etiqueta de estado da ligaçãoStep 5: Add a connection status label

Insira um novo controlo Etiqueta e defina a respetiva propriedade Texto para a fórmula seguinte:Insert a new Label control, and set its Text property to the following formula:

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

Esta fórmula verifica se o dispositivo está online.This formula checks if the device is online. Se estiver, o texto da etiqueta é "Ligado", caso contrário, é "Offline".If it is, the text of the label is "Connected", otherwise it's "Offline".

Passo 6: adicionar uma introdução de texto para compor novos tweetsStep 6: Add a text input to compose new tweets

  1. Insira um novo controlo Introdução de texto com o nome "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".

  2. Defina a propriedade Repor da introdução de texto para resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Passo 7: adicionar um botão para publicar o tweetStep 7: Add a button to post the tweet

  1. Adicione um controlo Botão e defina a propriedade Texto para “Tweet”.Add a Button control, and set the Text property to "Tweet".
  2. Defina a propriedade OnSelect para a fórmula seguinte: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})
    

Esta fórmula verifica se o dispositivo está online:This formula checks if the device is online:

  • Se o dispositivo estiver online, envia imediatamente um tweet do texto.If the device is online, it tweets the text immediately.
  • Se o dispositivo estiver offline, o tweet é capturado numa coleção LocalTweetsToPost e guardado na aplicação.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

Em seguida, a fórmula repõe o texto na caixa de texto.Then the formula resets the text in the text box.

Passo 8: adicionar um temporizador para verificar a existência de tweets a cada cinco minutosStep 8: Add a timer to check for tweets every five minutes

Adicione um novo controlo Temporizador:Add a new Timer control:

  • Defina a propriedade Duração para 300000.Set the Duration property to 300000.

  • Defina a propriedade AutoStart para verdadeiro.Set the AutoStart property to true.

  • Defina OnTimerEnd para a fórmula seguinte: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"})
    )
    

Esta fórmula verifica se o dispositivo está online.This formula checks if the device is online. Se estiver, a aplicação envia tweets de todos os itens na coleção LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Em seguida, limpa a coleção.Then it clears the collection.

Agora que a aplicação está concluída, vamos ver o seu aspeto antes de avançarmos para testes.Now that the app is finished, let's check out how it looks before we move on to testing. À esquerda, a aplicação está ligada; e, à direita, está offline, com um tweet pronto para ser publicado quando estiver online novamente.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.

Aplicação concluída com os modos online e offline

Testar a aplicaçãoTesting the app

Utilize os seguintes passos para testar a aplicação:Use the following steps to test the app:

  1. Execute o PowerApps num dispositivo móvel quando estiver online.Run PowerApps on a mobile device while online. Tem de executar uma aplicação, pelo menos, uma vez quando estiver online, para que possa transferir a aplicação para o dispositivo.You must run an app at least once while being online, so you can download the app to the device.
  2. Inicie a aplicação do Twitter.Launch the Twitter app.
  3. Repare que os tweets estão carregados e que o estado mostra Ligado.Notice that the tweets are loaded, and that the status shows Connected.
  4. Feche o PowerApps completamente.Close PowerApps completely.
  5. Defina o dispositivo para o modo de avião para garantir que está offline.Set the device to airplane mode to ensure that it's offline.
  6. Execute o PowerApps.Run PowerApps. Agora, pode executar a aplicação do Twitter offline e ter acesso a todas as outras aplicações que executou anteriormente neste dispositivo enquanto esteve online (ou seja, o PowerApps oculta todas as aplicações que ainda não foram transferidas para o seu 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. Execute novamente a aplicação.Run the app again.
  8. Repare como a aplicação reflete corretamente o estado da ligação, com o estado Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Escreva um novo tweet.Write a new tweet. Este será armazenado localmente na coleção LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Saia do modo de avião.Exit airplane mode. Depois de o temporizador ser acionado, a aplicação publica o tweet.After the timer triggers, the app posts the tweet.

Esperamos que este artigo lhe proporcione uma noção das funcionalidades do PowerApps para criar aplicações offline.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Como sempre, introduza comentários no nosso fórum e partilhe os seus exemplos de aplicações offline no Blogue da comunidade do PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.