Desenvolver aplicativos com capacidade offline com o PowerAppsDevelop offline-capable apps with PowerApps

Um dos cenários mais comuns que você enfrenta como desenvolvedor de aplicativo móvel é permitir aos usuários ser produtivos quando há 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 tem um conjunto de recursos e comportamentos que ajudam você a desenvolver aplicativos com capacidade offline.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Você pode:You can:

  • Iniciar o aplicativo móvel do PowerApps quando estiver offline.Launch the PowerApps mobile app when offline.
  • Executar os aplicativos desenvolvidos quando estiver offline.Run apps you develop when offline.
  • Determinar quando um aplicativo está offline, online ou em uma conexão limitada usando o objeto de sinal Conexão.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Usar coleções e funções como LoadData e SaveData para o armazenamento básico de dados quando estiver offline.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Como criar aplicativos com capacidade offlineHow to build offline capable apps

A primeira coisa a pensar em cenários offline é como seus aplicativos funcionam com os dados.The first thing to think about in offline scenarios is how your apps work with data. Basicamente, os aplicativos no PowerApps acessam dados por meio de um conjunto de conectores fornecidos pela plataforma, como 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. Você também pode criar conectores personalizados que permitem aos aplicativos acessar qualquer serviço que fornece um ponto de extremidade RESTful.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Isso pode ser uma API Web ou um serviço como o Azure Functions.This could be a Web API or a service such as Azure Functions. Todos esses conectores usam o HTTPS na Internet, o que significa que os usuários devem estar online para acessar dados e 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.

Aplicativo do PowerApps com conectores

Manipulando dados offlineHandling offline data

Um dos aspectos mais interessantes do PowerApps é seu conjunto de funcionalidades e fórmulas, que possibilitam filtrar, pesquisar, classificar, agregar e manipular dados de forma consistente, independentemente da fonte 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 fontes variam de coleções em memória no aplicativo a listas do SharePoint, bancos 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. Essa consistência permite redirecionar um aplicativo com facilidade para usar outro back-end.This consistency enables you to easily retarget an app to use a different backend. O mais importante aqui é que ela também permite usar coleções locais para o gerenciamento de dados, quase sem nenhuma alteração à lógica de um aplicativo.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. Na verdade, as coleções locais são o principal mecanismo para a manipulação de dados offline.In fact, local collections are the primary mechanism for handling offline data.

Criando um aplicativo do Twitter offlineBuilding an offline Twitter app

Para manter o foco nos aspectos offline do desenvolvimento de aplicativos, mostraremos um cenário simples centrado no Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Criaremos um aplicativo que permite ler as postagens do Twitter e enviar tweets mesmo quando estiver offline.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Quando o aplicativo fica online, o aplicativo posta os tweets e recarrega os dados locais.When the app comes online, the app posts tweets and reloads the local data.

Em um alto nível, o aplicativo faz o seguinte:At a high level, the app does the following:

  1. Na inicialização do aplicativo (com base na propriedade OnVisible da primeira tela):On app startup (based on the first screen's OnVisible property):

    • Se o dispositivo estiver online, acessamos o conector do Twitter diretamente para buscar dados e populamos 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 arquivo de cache local usando LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Permitimos ao usuário enviar tweets – se estiver online, postaremos diretamente no Twitter e atualizaremos o 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:

    • Postaremos todos os tweets que temos no cache local.We post any tweets that we have in the local cache.
    • Atualizaremos o cache local e o salvaremos usando SaveData.We refresh the local cache and save it using SaveData.

Etapa 1: Criar um novo aplicativo de telefoneStep 1: Create a new phone app

  1. Abra o PowerApps Studio.Open PowerApps Studio.
  2. Clique ou toque em Novo > Aplicativo em branco > Layout de telefone.Click or tap New > Blank app > Phone layout.

    Aplicativo em branco, layout de telefone

Etapa 2: Adicionar uma conexão do TwitterStep 2: Add a Twitter connection

  1. Clique ou toque em Conteúdo > Fontes de dados e escolha Adicionar fonte de dados no painel Fontes de dados.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Clique ou toque em Nova Conexão, selecione Twitter e clique ou toque em Criar.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Insira suas credenciais e crie a conexão.Enter your credentials, and create the connection.

    Adicionar uma conexão do Twitter

Etapa 3: Carregar tweets em uma coleção LocalTweets durante a inicialização do aplicativoStep 3: Load tweets into a LocalTweets collection on app startup

Selecione a propriedade OnVisible em Screen1 no aplicativo e copie a seguinte fórmula: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, ele carregará até 100 tweets em uma coleção LocalTweets 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, ele carregará o cache local de um arquivo chamado “Tweets”, caso esteja 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 com uma 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 como LocalTweets.Set the Items property to LocalTweets.
  3. Adicione quatro controles Rótulo para exibir dados de cada tweet e defina a propriedades Text como: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 controle Imagem e defina a propriedade Image como ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Etapa 5: Adicionar um rótulo de status de conexãoStep 5: Add a connection status label

Insira um novo controle Rótulo e defina sua propriedade Text com a seguinte fórmula:Insert a new Label control, and set its Text property to the following formula:

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

Essa fórmula verifica se o dispositivo está online.This formula checks if the device is online. Se ele estiver, o texto do rótulo indicará “Conectado”; caso contrário, “Offline”.If it is, the text of the label is "Connected", otherwise it's "Offline".

Etapa 6: Adicionar uma entrada de texto para escrever novos tweetsStep 6: Add a text input to compose new tweets

  1. Insira um novo controle Entrada de texto chamado “NewTweetTextInput”.Insert a new Text input control named "NewTweetTextInput".
  2. Defina a propriedade Reset da entrada de texto como resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Etapa 7: Adicionar um botão para postar o tweetStep 7: Add a button to post the tweet

  1. Adicione um controle Botão e defina sua propriedade Text como “Tweet”.Add a Button control, and set the Text property to "Tweet".
  2. Defina a propriedade OnSelect com a seguinte fórmula: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, ele enviará tweets do texto imediatamente.If the device is online, it tweets the text immediately.
  • Se o dispositivo estiver offline, ele capturará o tweet em uma coleção LocalTweetsToPost e o salvará no aplicativo.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

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

Etapa 8: Adicionar um temporizador para verificar se há tweets a cada cinco minutosStep 8: Add a timer to check for tweets every five minutes

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

  • Defina a propriedade Duration como 300000.Set the Duration property to 300000.
  • Defina a propriedade AutoStart como verdadeiro.Set the AutoStart property to true.
  • Defina OnTimerEnd com a seguinte fórmula: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"})
    )
    

Essa fórmula verifica se o dispositivo está online.This formula checks if the device is online. Se ele estiver, o aplicativo enviará tweets de todos os itens da coleção LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. Em seguida, ela limpará a coleção.Then it clears the collection.

Agora que o aplicativo foi concluído, vamos ver sua aparência antes de passarmos ao teste.Now that the app is finished, let's check out how it looks before we move on to testing. À esquerda, o aplicativo está conectado; e, à direita, ele está offline, com um tweet pronto para ser postado 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.

Aplicativo concluído com os modos online e offline

Testando o aplicativoTesting the app

Use as seguintes etapas para testar o aplicativo:Use the following steps to test the app:

  1. Execute o PowerApps em um dispositivo móvel quando estiver online.Run PowerApps on a mobile device while online.

    É necessário executar um aplicativo pelo menos uma vez quando estiver online, de forma que você possa baixar o aplicativo no dispositivo.You must run an app at least once while being online, so you can download the app to the device.

  2. Inicie o aplicativo do Twitter.Launch the Twitter app.
  3. Observe que os tweets são carregados e que o status mostra Conectado.Notice that the tweets are loaded, and that the status shows Connected.
  4. Feche o PowerApps completamente.Close PowerApps completely.
  5. Coloque o dispositivo no modo avião para garantir que ele está offline.Set the device to airplane mode to ensure that it's offline.
  6. Execute o PowerApps.Run PowerApps.

    Agora, é possível executar o aplicativo do Twitter offline e você tem acesso aos outros aplicativos que executou anteriormente nesse dispositivo quando estava online (ou seja, o PowerApps oculta todos os aplicativos que ainda não foram baixados no 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 o aplicativo novamente.Run the app again.
  8. Observe como ele reflete o estado de conexão corretamente, com o status Offline.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Escreva um novo tweet.Write a new tweet. Ele será armazenado localmente na coleção LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Saia do modo avião.Exit airplane mode. Depois que o temporizador for disparado, o aplicativo postará o tweet.After the timer triggers, the app posts the tweet.

Esperamos que este artigo forneça uma ideia das funcionalidades contidas no PowerApps para a criação de aplicativos offline.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Como sempre, forneça comentários em nosso fórum e compartilhe seus exemplos de aplicativos offline no blog da comunidade do PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.