[教學文章分享] 突破 App Inventor 30 MB 限制 Part 2
App Inventor,  免費資源分享

[教學文章分享] 突破 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/

這是我等等要載到 App 的四個圖檔

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 副程式,繼續下載下一筆資料。



2-5 最後再設定顯示圖片


App 到這就撰寫完畢囉!





App 完整程式方塊





App Inventor 專案程式檔下載

點我下載





App 專案執行範例

手機端執行畫面:


模擬器端執行畫面:




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

發表迴響