[教學文章分享] 突破 App Inventor 30 MB 限制 Part 2

之前我有寫過一篇「突破 App Inventor 30 MB 限制」的教學文章，而這次我在 Pura Vida Apps 網站上，看到一篇相關的教學，它大致上是在說，把我們需要用到的檔案資源先放在網路上 (可以放在 000WebHost 或是 Google、Dropbox 雲端)，當執行 App 後再把檔案下載到我們的手機裡，我把文章分享在這裡給大家看「App Inventor Tutorials and Examples: Webprefetch File by File | Pura Vida Apps」，同時會將我修改的一部份方塊程式，公開給讀者參考參考！

1. 首先準備幾張圖檔，然後將圖片上傳到妳的網站伺服器。(我是傳到 000WebHost，如果不清楚的話，可以參考我之前的教學。)

我在 000WebHost 主機的網址：
「https://jamesbang.000webhostapp.com/AppInventor/ImageFiles/」

P.S. 妳如果要直接用我的網址也行，但是在 App Inventor 裡變數的圖檔名稱，就要跟我一樣。

2. 開啟 App Inventor，並新增一個專案「DownloadFile」。

如要元件畫面如下：

2-1 切換到程式設計

要新增的方塊，和文章教的基本上一樣，只是我有改一些參數。

先新增以下變數：

intCounter 和 intDownloaded 變數：存放檔案下載的次數。(不是一個檔案下載幾次！！而是現在下載到我們的第幾個檔案。)

strPath 變數：檔案下載的路徑 (這裡跟教學文章不同)

strUrl 變數：剛剛圖片上傳到伺服器的資料夾網址

listFilename 變數：我們圖檔的名稱 (注意！！檔名要和我們上傳到伺服器的圖檔名稱一樣，包括副檔名。)

2-2 接著新增當下載按鈕被點選的方塊，如下：

每當按鈕被點選，就把這兩個變數設為 0，這樣等下載完後，還要重複測試的話，App 才不會出錯。

再來判斷 TinyDB 的資料是否為空，如果沒有資料，才要進行下載的動作。(所以如果要重複測試的話，記得要把 tag 的資料改掉。這裡要注意的是，並不是把圖檔存到 TinyDB，tag 和裡面的值，都可以隨便填，因為重點是，我們要看這個 tag 有沒有資料，有就代表我們曾經有載過圖檔，不用再下載一次了。)

如果要下載資料，我們就設定 Web 元件的 SaveResponse 為 True，然後執行 nextFile 副程式，開始進行下載，反之則執行 ready 副程式，告知檔案已經存過了！

2-3 新增兩個副程式，如下：

nextFile 副程式一開始執行後，先將 intCounter 變數加 1，代表要下載第一個檔案。

再來用區域變數 filename，暫時存放目前要下載的檔案名稱。

Web 元件的 ResponseFileName 要設定為 strPath + filename，這樣下載下來才會在 AppInventor/assets 的資料夾裡，而且圖檔名稱也才會跟原本的一樣。

再來是 Web 元件的網址，當然就是我們的伺服器網址加檔名啦！！！這樣才是我們放在網路上，用瀏覽器查看圖片時的完整路徑。

最後就是執行 Get 請求

2-4 當 Web 元件取得檔案後，如下：

取得檔案後，也是先將 intDownloaded 變數加一，這個變數主要是用在計算下載的進度條的。(沒有進度條這種元件，所以只好用 Label 代替，那個教學文章應該也是這樣。)

區域變數 numberOfFiles 存放我們總檔案的數量，我這個範例用四個圖檔，所以這個變數就都是 4，這個變數也是要計算下載的進度條和 % 數。

lblDownloadingText 和 lblDownloadingBar 兩個的算法是一樣的 (這個需要我講解的話，再到文章底下留言喔~~)

最後判斷，如果現在下載數和我的檔案總數量相同的話，我們就呼叫 TinyDB ，給這個 Tag 隨意一個資料，這樣下次再開啟 App 就不會重複再下載了！(這裡 TinyDB 的 Tag 要和一開始的一樣)
反之，就呼叫 nextFile 副程式，繼續下載下一筆資料。