開發可離線使用的畫布應用程式

行動使用者即使在連線受限或沒有連線時,仍須經常保持生產力。 建置畫布應用程式時,您可以執行下列工作:

  • 離線時開啟 Power Apps Mobile 並執行應用程式。
  • 使用連線訊號物件判斷應用程式是在離線、線上還是付費連線狀態。
  • 離線時,使用集合並運用 LoadDataSaveData 函式進行基本資料儲存。

注意

本文包含使用 Twitter 資料的範例。 在 LoadDataSaveData 函數參考中,還隨附了不需要連線的更簡單範例。

觀看此影片瞭解如何建立可離線使用的畫布應用程式:

限制

LoadDataSaveData 結合在一起,形成可在本機裝置儲存少量資料的簡單機制。 您可以使用這些函式,將簡單的離線功能新增至應用程式。

這些函式受到可用應用程式記憶體數量的限制,因為這些函式是在記憶體內集合上運作。 根據裝置、作業系統、Power Apps Mobile 所用記憶體,以及應用程式在畫面和控制項方面的複雜度,可用記憶體可能會有所不同。 如果儲存的資料超過數 MB,請在您的應用程式可望執行所在的裝置上,使用預期的案例測試該應用程式。 您通常會有 30-70 MB 的可用記憶體。

當裝置上線時,這些函式也不會自動解決合併衝突。 有關儲存什麼資料以及如何處理重新連線的組態設定,是由製作者在撰寫運算式時決定。

如需離線功能的更新,請返回本主題並訂閱 Power Apps 部落格

概觀

設計離線案例時,您首先要考慮應用程式如何使用資料。 Power Apps 中的應用程式主要透過平台 (例如 SharePoint、Office 365 和 Microsoft Dataverse) 所提供的一組連接器來存取資料。 您也可以建置自訂連接器,允許應用程式存取任何提供 RESTful 端點的服務。 這可以是 Web API 或服務 (例如 Azure Functions)。 所有這些連接器都透過網際網路使用 HTTPS,即表示使用者必須在線上,才能存取資料以及服務所提供的任何其他功能。

Power Apps 應用程式搭配連接器。

處理離線資料

在 Power Apps 中,不論資料來源為何,您都可以透過一致的方式篩選、搜尋、排序、彙總,和操作資料。 來源範圍從應用程式中的記憶體集合到使用 Microsoft Lists 建立的清單,再到 SQL 資料庫和 Dataverse。 由於這種一致性,您可以輕鬆地將應用程式的目標改變為使用不同的資料來源。 對離線案例更重要的是,您還可以使用本機集合進行資料管理,幾乎不必變更應用程式的邏輯。 事實上,本機集合是處理離線資料的主要機制。

建置離線應用程式

為了將注意力集中在應用程式開發的離線方面,本主題說明一個以 Twitter 為主要內容的簡單案例。 您將建置一個可讓您在離線時讀取 Twitter 文章和提交推文的應用程式。 應用程式上線時,應用程式會張貼推文,並重新載入本機資料。

在較高層級上,應用程式會執行下列工作:

  • 使用者開啟應用程式時:

    • 如果裝置在線上,應用程式會透過 Twitter 連接器擷取資料,並將該資料填入集合中。
    • 如果裝置離線,應用程式會使用 LoadData 函式,從本機快取檔案載入資料。
    • 使用者可以提交推文。 如果應用程式在線上,則會直接將推文張貼至 Twitter,並重新整理本機快取。
  • 應用程式在線上時,每隔五分鐘執行下列工作:

    • 應用程式在本機快取中張貼任何推文。
    • 應用程式重新整理本機快取,並使用 SaveData 函數來儲存。

步驟 1:將 Twitter 新增至空白手機應用程式

  1. 建立包含手機配置的空白畫布應用程式
  2. 檢視表索引標籤上,選取資料來源
  3. 資料窗格中,選取新增資料來源
  4. 選取新增連線 > Twitter > 建立
  5. 輸入您的認證、建立連線,然後關閉資料窗格。

步驟 2:收集現有的推文

  1. 樹狀檢視窗格中,選取應用程式,然後將其 OnStart 屬性設定為此公式:

    If( Connection.Connected,
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
            Set( statusText, "Online data" ),
        LoadData( LocalTweets, "LocalTweets", true );
            Set( statusText, "Local data" )
    );
    SaveData( LocalTweets, "LocalTweets" );
    

    用於載入推文的公式。

  2. 樹狀檢視窗格中,選取應用程式物件的省略符號功能表,然後選取執行 OnStart 以執行該公式。

    執行公式以載入推文。

    注意

    LoadDataSaveData 函式可能會在 Power Apps Studio 中顯示錯誤,因為瀏覽器不支援這些函式。 不過,將此應用程式部署至裝置之後,函式就會正常執行。

此公式會檢查裝置是否在線上︰

  • 如果裝置在線上,公司會將最多 10 則包含搜尋字詞「PowerApps」的推文載入 LocalTweets 集合中。
  • 如果裝置離線,公式會從名為「LocalTweets」的檔案 (若有的話) 載入本機快取。
  1. 插入索引標籤 中,選取資源庫 > 空白彈性高度

  2. 資源庫控制項的項目屬性設定為 LocalTweets

  3. 在資源庫範本中,新增三個標籤控制項,並將每個標籤的文字屬性設定為下列其中一個值:

    • ThisItem.UserDetails.FullName & " (@" & ThisItem.UserDetails.UserName & ")"
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
    • ThisItem.TweetText
  4. 將最後一個標籤中的文字設為粗體,讓資源庫看起來像這個範例一樣。

    顯示範例推文的資源庫。

步驟 4:顯示連線狀態

  1. 在資源庫底下插入標籤,然後將其色彩屬性設定為紅色

  2. 將最新標籤的文字屬性設定為此公式:

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

此公式會判斷裝置是否在線上。 如果在線上,標籤會顯示已連線,否則顯示離線

步驟 5:新增方塊以撰寫推文

  1. 在連線狀態標籤底下,插入文字輸入控制項,然後將其重新命名為 NewTweetTextInput

  2. 將文字輸入方塊的預設值屬性設定為 ""

    狀態資訊和文字輸入方塊上方的資源庫。

步驟 6︰新增用於張貼推文的按鈕

  1. 在文字輸入方塊底下,新增按鈕控制項,並將其文字屬性設定為此值:

    "Tweet"

  2. 將按鈕的 OnSelect 屬性設為此公式:

    If( Connection.Connected,
        Twitter.Tweet( "", {tweetText: NewTweetTextInput.Text} ),
        Collect( LocalTweetsToPost, {tweetText: NewTweetTextInput.Text} );
            SaveData( LocalTweetsToPost, "LocalTweetsToPost" )
    );
    Reset( NewTweetTextInput );
    
  3. 應用程式OnStart 屬性中,將一行新增至公式結尾:

    If( Connection.Connected,
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 100} ) );
            Set( statusText, "Online data" ),
        LoadData( LocalTweets, "LocalTweets", true );
            Set( statusText, "Local data" )
    );
    SaveData( LocalTweets, "LocalTweets" );
    LoadData( LocalTweetsToPost, "LocalTweetsToPost", true );  // added line
    

    執行公式以載入包含已取消註解之程式碼行的推文。

此公式會判斷裝置是否在線上:

  • 如果裝置在線上,就會立即張貼推文。
  • 如果裝置已離線,則擷取 LocalTweetsToPost 集合中的推文,並將其儲存至裝置。

此公式接著重設文字輸入方塊中的文字。

步驟 7:檢查是否有新推文

  1. 在按鈕右側,新增計時器控制項。

    最終的應用程式。

  2. 將計時器的 Duration 屬性設為 300000

  3. 將計時器的 AutoStartRepeat 屬性設定為 true

  4. 將計時器的 OnTimerEnd 屬性設定為下列公式:

    If( Connection.Connected,
        ForAll( LocalTweetsToPost, Twitter.Tweet( "", {tweetText: tweetText} ) );
        Clear( LocalTweetsToPost );
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
        SaveData( LocalTweets, "LocalTweets" );
    )
    

此公式會判斷裝置是否在線上。 如果在線上,則應用程式會發表 LocalTweetsToPost 集合中所有項目的推文,然後清除該集合。

測試應用程式

  1. 在連線到網際網路的行動裝置上使用 Power Apps Mobile開啟應用程式。

    現有的推文會顯示在資源庫中,而狀態顯示已連線

  2. 啟用裝置的飛航模式並停用 Wi-Fi,將裝置與網際網路中斷連接。

    狀態標籤會顯示應用程式的狀態為離線

  3. 裝置離線時,撰寫包含 Power Apps 的推文,然後選取推文按鈕。

    推文會在本機儲存推於 LocalTweetsToPost 集合中。

  4. 停用裝置的飛航模式並啟用 Wi-Fi,將裝置重新連線至網際網路。

    在五分鐘之內,應用程式就會張貼推文,而這將出現在資源庫中。

希望本文能幫助您了解 Power Apps 建置離線應用程式的功能。 一如往常,請在我們的論壇提供意見反應,並在 Power Apps 社群部落格中分享您的離線應用程式範例。

注意

是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。