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. PowerApps tiene un conjunto de características y comportamientos que le ayudarán a desarrollar aplicaciones que puedan ejecutarse sin conexión. Podrá:

  • Iniciar la aplicación móvil de PowerApps cuando esté sin conexión.
  • Ejecutar las aplicaciones que desarrolle cuando esté sin conexión.
  • 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.
  • Usar colecciones y aprovechar funciones como LoadData y SaveData para el almacenamiento de datos básico cuando esté sin conexión.

Cómo crear aplicaciones que puedan ejecutarse sin conexión

Lo primero que hay que pensar en escenarios sin conexión es cómo trabajan las aplicaciones con los datos. 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. También puede crear conectores personalizados que permiten a las aplicaciones tener acceso a cualquier servicio que proporcione un punto de conexión REST. Podría tratarse de una API web o un servicio como 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.

Aplicación de PowerApps con conectores

Administrar datos sin conexión

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. 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. Esta coherencia permite redirigir fácilmente una aplicación para que use un back-end diferente. 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. De hecho, las colecciones locales son el mecanismo principal para administrar datos sin conexión.

Crear una aplicación de Twitter sin conexión

Para centrarnos en los aspectos del desarrollo de aplicaciones sin conexión, mostraremos un sencillo escenario centrado en Twitter. Vamos a crear una aplicación que permite leer entradas de Twitter y enviar tweets mientras está sin conexión. Cuando la aplicación se conecta, la aplicación envía los tweets y vuelve a cargar los datos locales.

De forma general, la aplicación hace lo siguiente:

  1. En el inicio de la aplicación (en función de la propiedad AlEstarVisible de la primera pantalla):

    • 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.
    • Si el dispositivo está sin conexión, se cargan los datos desde un archivo de caché local mediante 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.
  2. Cada 5 minutos, en está en línea:

    • Se envían los tweets que tenemos en la memoria caché local.
    • Se actualiza la memoria caché local y se guarda con SaveData.

Paso 1: Crear una nueva aplicación de teléfono

  1. Abra PowerApps Studio.
  2. Pulse o haga clic en Nuevo > Aplicación en blanco > Diseño de teléfono.

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

Paso 2: Agregar una conexión de Twitter

  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.
  2. Pulse o haga clic en Nueva conexión, seleccione Twitter y pulse o haga clic en Crear.
  3. Escriba sus credenciales y cree la conexión.

    Agregar una conexión de Twitter

Paso 3: Cargar los tweets en la colección LocalTweets en el inicio de la aplicación

Seleccione la propiedad AlEstarVisible de Pantalla1 en la aplicación y copie en ella la siguiente fórmula:

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:

  • 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".
  • Si el dispositivo está sin conexión, se carga la memoria caché local desde un archivo denominado "Tweets", si está disponible.

Paso 4: Agregar una galería y enlazarla a la colección LocalTweets

  1. Inserte una nueva galería de alto flexible: Insertar > Galería > Galería de altura flexible en blanco.
  2. Establezca la propiedad Items en LocalTweets.
  3. Agregue cuatro controles Label para mostrar los datos de cada tweet y establezca sus propiedades Texto en:
    • ThisItem.TweetText
    • ThisItem.UserDetails.FullName & " @" & ThisItem.UserDetails.UserName
    • "RT: " & ThisItem.RetweetCount
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
  4. Agregue un control Imagen y establezca la propiedad Image en ThisItem.UserDetails.ProfileImageUrl.

Paso 5: Agregar una etiqueta de estado de conexión

Inserte un nuevo control Label y establezca su propiedad Texto en la fórmula siguiente:

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

Esta fórmula comprueba si el dispositivo está en línea. Si lo está, el texto de la etiqueta es "Conectado", en caso contrario es "Sin conexión".

Paso 6: Agregar una entrada de texto para redactar nuevos tweets

  1. Inserte un nuevo control Entrada de texto denominado "NewTweetTextInput".
  2. Establezca la propiedad Reset de la entrada de texto a resetNewTweet.

Paso 7: Agregar un botón para enviar el tweet

  1. Agregue un control Botón y establezca la propiedad Texto en "Tweet".
  2. Establezca la propiedad AlSeleccionar en la fórmula siguiente:

    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:

  • Si el dispositivo está en línea, envía el tweet inmediatamente.
  • Si el dispositivo está sin conexión, captura el tweet en la colección LocalTweetsToPost y la guarda en la aplicación.

A continuación, la fórmula restablece el texto en el cuadro de texto.

Paso 8: Agregar un temporizador para comprobar los tweets cada cinco minutos

Agregue un nuevo control Temporizador:

  • Establezca la propiedad Duration en 300 000.
  • Establezca la propiedad AutoStart en true.
  • Establezca OnTimerEnd en la fórmula siguiente:

    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. Si es así, la aplicación envía los tweets de todos los elementos de la colección LocalTweetsToPost. A continuación, borra la colección.

Ahora que la aplicación está terminada, comprobemos su aspecto antes de comenzar con las pruebas. 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.

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

Probar la aplicación

Para probar la aplicación, siga estos pasos:

  1. Ejecute PowerApps en un dispositivo móvil que esté en línea.

    Debe ejecutar la aplicación estando en línea al menos una vez para que la aplicación pueda descargarse en el dispositivo.

  2. Inicie la aplicación de Twitter.

  3. Observe que se cargan los tweets y que muestra el estado Conectado.

  4. Cierre PowerApps completamente.

  5. Establezca el dispositivo en modo de avión para asegurarse de que está sin conexión.

  6. Ejecute 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).

  7. Vuelva a ejecutar la aplicación.

  8. Observe que refleja correctamente el estado de conexión, con un estado de Sin conexión.

  9. Escriba un nuevo tweet. Se almacenará localmente en la colección LocalTweetsToPost.

  10. Salga del modo avión. Después de que se active el temporizador, la aplicación envía el 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. 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.