Desarrollar aplicaciones que puedan ejecutarse sin conexión con PowerAppsDevelop offline-capable apps with PowerApps

Uno de los escenarios más comunes a los que se enfrenta como desarrollador de aplicaciones móviles es posibilitar que sus usuarios puedan ser productivos cuando hay conectividad limitada o no hay ninguna conectividad.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 tiene un conjunto de características y comportamientos que le ayudarán a desarrollar aplicaciones que puedan ejecutarse sin conexión.PowerApps has a set of features and behaviors that help you to develop offline-capable apps. Podrá:You can:

  • Iniciar la aplicación móvil de PowerApps cuando esté sin conexión.Launch the PowerApps mobile app when offline.
  • Ejecutar las aplicaciones que desarrolle cuando esté sin conexión.Run apps you develop when offline.
  • Determinar si una aplicación está sin conexión, en línea o en una conexión de uso medido mediante el objeto de señal conexión.Determine when an app is offline, online, or in a metered connection by using the Connection signal object.
  • Usar colecciones y aprovechar funciones como LoadData y SaveData para el almacenamiento de datos básico cuando esté sin conexión.Use collections and leverage functions such as LoadData and SaveData for basic data storage when offline.

Cómo crear aplicaciones que puedan ejecutarse sin conexiónHow to build offline capable apps

Lo primero que hay que pensar en escenarios sin conexión es cómo trabajan las aplicaciones con los datos.The first thing to think about in offline scenarios is how your apps work with data. Las aplicaciones en PowerApps tienen acceso a los datos principalmente a través de un conjunto de conectores que proporciona la plataforma, como SharePoint, Office 365 y 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. También puede crear conectores personalizados que permiten a las aplicaciones tener acceso a cualquier servicio que proporcione un punto de conexión REST.You can also build custom connectors that enable apps to access any service that provides a RESTful endpoint. Podría tratarse de una API web o un servicio como Azure Functions.This could be a Web API or a service such as Azure Functions. Todos estos conectores usan HTTPS a través de Internet, lo que significa que los usuarios deben estar en línea para acceder a los datos y otras funcionalidades que ofrece un servicio.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.

Aplicación de PowerApps con conectores

Administrar datos sin conexiónHandling offline data

Uno de los aspectos más interesantes de PowerApps es su conjunto de funcionalidades y fórmulas que le permiten filtrar, buscar y ordenar, agregar y manipular los datos de una manera coherente independientemente del origen de datos.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. Estos orígenes varían desde colecciones en memoria en la aplicación a listas de SharePoint, bases de datos SQL o Common Data Service.Sources range from in-memory collections in the app, to SharePoint lists, to SQL databases and the Common Data Service. Esta coherencia permite redirigir fácilmente una aplicación para que use un back-end diferente.This consistency enables you to easily retarget an app to use a different backend. Lo más importante es que, en este caso, también permite usar colecciones locales para la administración de datos sin realizar apenas cambios en la lógica de la aplicación.More importantly here, it also enables you to use local collections for data management with almost no changes to an app's logic. De hecho, las colecciones locales son el mecanismo principal para administrar datos sin conexión.In fact, local collections are the primary mechanism for handling offline data.

Crear una aplicación de Twitter sin conexiónBuilding an offline Twitter app

Para centrarnos en los aspectos del desarrollo de aplicaciones sin conexión, mostraremos un sencillo escenario centrado en Twitter.To keep the focus on the offline aspects of app development, we'll show you a simple scenario focused around Twitter. Vamos a crear una aplicación que permite leer entradas de Twitter y enviar tweets mientras está sin conexión.We'll build an app that enables you to read Twitter posts and submit tweets while being offline. Cuando la aplicación se conecta, la aplicación envía los tweets y vuelve a cargar los datos locales.When the app comes online, the app posts tweets and reloads the local data.

De forma general, la aplicación hace lo siguiente:At a high level, the app does the following:

  1. En el inicio de la aplicación (en función de la propiedad AlEstarVisible de la primera pantalla):On app startup (based on the first screen's OnVisible property):

    • Si el dispositivo está en línea, se accede directamente al conector de Twitter para recuperar los datos y se rellena una colección con esos datos.If the device is online, we access the Twitter connector directly to fetch data, and populate a collection with that data.
    • Si el dispositivo está sin conexión, se cargan los datos desde un archivo de caché local mediante LoadData.If the device is offline, we load the data from a local cache file using LoadData.
    • Se permite al usuario enviar tweets; si está en línea, se envían directamente a Twitter y se actualiza la memoria caché local.We enable the user to submit tweets - if online we post directly to Twitter and refresh the local cache.
  2. Cada 5 minutos, en está en línea:Every 5 minutes, if online:

    • Se envían los tweets que tenemos en la memoria caché local.We post any tweets that we have in the local cache.
    • Se actualiza la memoria caché local y se guarda con SaveData.We refresh the local cache and save it using SaveData.

Paso 1: Crear una nueva aplicación de teléfonoStep 1: Create a new phone app

  1. Abra PowerApps Studio.Open PowerApps Studio.
  2. Pulse o haga clic en Nuevo > Aplicación en blanco > Diseño de teléfono.Click or tap New > Blank app > Phone layout.

    Aplicación en blanco, diseño de teléfono

Paso 2: Agregar una conexión de TwitterStep 2: Add a Twitter connection

  1. Pulse o haga clic en Contenido > Orígenes de datos; a continuación, elija Agregar origen de datos en el panel Orígenes de datos.Click or tap Content > Data sources, then choose Add data source on the Data sources panel.
  2. Pulse o haga clic en Nueva conexión, seleccione Twitter y pulse o haga clic en Crear.Click or tap New Connection , select Twitter , and click or tap Create.
  3. Escriba sus credenciales y cree la conexión.Enter your credentials, and create the connection.

    Agregar una conexión de Twitter

Paso 3: Cargar los tweets en la colección LocalTweets en el inicio de la aplicaciónStep 3: Load tweets into a LocalTweets collection on app startup

Seleccione la propiedad AlEstarVisible de Pantalla1 en la aplicación y copie en ella la siguiente 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 cargar tweets

Esta fórmula comprueba si el dispositivo está en línea:This formula checks if the device is online:

  • Si el dispositivo está en línea, se cargan en la colección LocalTweets hasta 100 tweets con el término de búsqueda "PowerApps".If the device is online, it loads into a LocalTweets collection up to 100 tweets with the search term "PowerApps".
  • Si el dispositivo está sin conexión, se carga la memoria caché local desde un archivo denominado "Tweets", si está disponible.If the device is offline, it loads the local cache from a file called "Tweets," if it's available.
  1. Inserte una nueva galería de alto flexible: Insertar > Galería > Galería de altura flexible en blanco.Insert a new flexible height gallery: Insert > Gallery > Blank flexible height.
  2. Establezca la propiedad Items en LocalTweets.Set the Items property to LocalTweets.
  3. Agregue cuatro controles Label para mostrar los datos de cada tweet y establezca sus propiedades Texto en: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. Agregue un control Imagen y establezca la propiedad Image en ThisItem.UserDetails.ProfileImageUrl.Add an Image control, and set the Image property to ThisItem.UserDetails.ProfileImageUrl.

Paso 5: Agregar una etiqueta de estado de conexiónStep 5: Add a connection status label

Inserte un nuevo control Label y establezca su propiedad Texto en la fórmula siguiente:Insert a new Label control, and set its Text property to the following formula:

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

Esta fórmula comprueba si el dispositivo está en línea.This formula checks if the device is online. Si lo está, el texto de la etiqueta es "Conectado", en caso contrario es "Sin conexión".If it is, the text of the label is "Connected", otherwise it's "Offline".

Paso 6: Agregar una entrada de texto para redactar nuevos tweetsStep 6: Add a text input to compose new tweets

  1. Inserte un nuevo control Entrada de texto denominado "NewTweetTextInput".Insert a new Text input control named "NewTweetTextInput".
  2. Establezca la propiedad Reset de la entrada de texto a resetNewTweet.Set the Reset property of the text input to resetNewTweet.

Paso 7: Agregar un botón para enviar el tweetStep 7: Add a button to post the tweet

  1. Agregue un control Botón y establezca la propiedad Texto en "Tweet".Add a Button control, and set the Text property to "Tweet".
  2. Establezca la propiedad AlSeleccionar en la fórmula siguiente: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 comprueba si el dispositivo está en línea:This formula checks if the device is online:

  • Si el dispositivo está en línea, envía el tweet inmediatamente.If the device is online, it tweets the text immediately.
  • Si el dispositivo está sin conexión, captura el tweet en la colección LocalTweetsToPost y la guarda en la aplicación.If the device is offline, it captures the tweet in a LocalTweetsToPost collection, and saves it to the app.

A continuación, la fórmula restablece el texto en el cuadro de texto.Then the formula resets the text in the text box.

Paso 8: Agregar un temporizador para comprobar los tweets cada cinco minutosStep 8: Add a timer to check for tweets every five minutes

Agregue un nuevo control Temporizador:Add a new Timer control:

  • Establezca la propiedad Duration en 300 000.Set the Duration property to 300000.
  • Establezca la propiedad AutoStart en true.Set the AutoStart property to true.
  • Establezca OnTimerEnd en la fórmula siguiente: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 comprueba si el dispositivo está en línea.This formula checks if the device is online. Si es así, la aplicación envía los tweets de todos los elementos de la colección LocalTweetsToPost.If it is, the app tweets all the items in the LocalTweetsToPost collection. A continuación, borra la colección.Then it clears the collection.

Ahora que la aplicación está terminada, comprobemos su aspecto antes de comenzar con las pruebas.Now that the app is finished, let's check out how it looks before we move on to testing. A la izquierda, la aplicación está conectada; y a la derecha, está sin conexión, con un tweet listo para su envío cuando esté en línea nuevo.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.

Aplicación finalizada con los modos en línea y sin conexión

Probar la aplicaciónTesting the app

Para probar la aplicación, siga estos pasos:Use the following steps to test the app:

  1. Ejecute PowerApps en un dispositivo móvil que esté en línea.Run PowerApps on a mobile device while online.

    Debe ejecutar la aplicación estando en línea al menos una vez para que la aplicación pueda descargarse en el dispositivo.You must run an app at least once while being online, so you can download the app to the device.

  2. Inicie la aplicación de Twitter.Launch the Twitter app.
  3. Observe que se cargan los tweets y que muestra el estado Conectado.Notice that the tweets are loaded, and that the status shows Connected.
  4. Cierre PowerApps completamente.Close PowerApps completely.
  5. Establezca el dispositivo en modo de avión para asegurarse de que está sin conexión.Set the device to airplane mode to ensure that it's offline.
  6. Ejecute PowerApps.Run PowerApps.

    Ahora puede ejecutar la aplicación de Twitter sin conexión y tener acceso a cualquier otra aplicación que ya haya ejecutado en este dispositivo mientras estaba en línea (es decir, PowerApps oculta las aplicaciones que aún no se ha descargado en el 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. Vuelva a ejecutar la aplicación.Run the app again.
  8. Observe que refleja correctamente el estado de conexión, con un estado de Sin conexión.Notice how it correctly reflects the connection state, with a status of Offline.
  9. Escriba un nuevo tweet.Write a new tweet. Se almacenará localmente en la colección LocalTweetsToPost.It will be stored locally in the LocalTweetsToPost collection.
  10. Salga del modo avión.Exit airplane mode. Después de que se active el temporizador, la aplicación envía el tweet.After the timer triggers, the app posts the tweet.

Esperamos que este artículo le haya proporcionado una idea de las funcionalidades que tiene PowerApps para la creación de aplicaciones sin conexión.We hope this article gives you an idea of the capabilities that PowerApps has for building offline apps. Como siempre, proporcione sus comentarios en nuestro foro y comparta sus ejemplos de aplicaciones sin conexión en el Blog de la Comunidad de PowerApps.As always, please provide feedback in our forum and share your examples of offline apps in the PowerApps community blog.