雲端資源專題3

2016/07/15 謝碧景(c)編製更新

學習目標

  • 學會Connectivity(通訊)類別中【Web網路】元件讀取 JSON 之資料結構，與{鍵:值}讀取之應用。

  • 學會Connectivity(通訊)類別中【ActivityStarter啟動器】元件加入超連結的設計與應用。

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

◆專題3：多媒體動畫影片作品展示。

  • 先『選取動畫影片』名稱，再按下『播放』，若按下『結束』則結束App應用程式。【重點：學會Google試算表之雲端資源及『Web網路、ActivityStarter啟動器】元件之設計與專題應用】。(專案名稱：video.aia) ※建議：部分元件需實機操作。

一、專題介紹

  • 同學可將高中學習歷程檔案以Google試算表彙整，例如：上傳YouTube之影片分享網址、建置之網站、專題報告數位連結等，以App設計並展示學習歷程創作，以數位說故事呈現自己之學習特色與創作，增添創意亮點。本專題將引導同學透過Google試算表彙整動畫影片之YouTube網址，以利程式分析、播放應用。

二、專題發想

三、雲端資源應用

(一)以『Google試算表』彙整佳作相關資料

1.先進入Google『 雲端硬碟 https://drive.google.com→新增→Google試算表 』如下圖，輸入『A欄→topic、B欄→url』再分別輸入『動畫影片標題 』及上傳YouTube創作之『分享網址』。＊參閱： 上傳影片至YouTube。

  • YouTube影片下方【分享】即分享網址。

(二)將『Google試算表』發佈到網路

2.如下左圖，選取【檔案→發佈到網路】，即如下中圖，按下【發佈】，接著如下右圖，合按【Ctrl+C】即可複製連結網址，測試顯示試算表資料。

＊註：發佈的網址。

https://docs.google.com/spreadsheets/d/18AsfeLFfdWY_RiofEJgEA5I71qrtnIfLBGA8lz3Qsgc/pubhtml

(三)將『Google試算表』發佈格式轉為JSON

3.因Google試算表發佈之資料，在App Inventor 2 無法直接讀取，故需轉為App Inventor 2可讀取之JSON格式。

  • 以剛發佈的Google試算表為例，如下圖，在雲端硬碟右上方點選【清單檢視】，接著在試算表檔名上按右滑鼠→選取『取得檔案共用連結』→即可複製下圖 id=後面的 編號。

4.轉為JSON格式，其網址格式如下：

https://spreadsheets.google.com/feeds/list/試算表ID編號/od6/public/values?alt=json

  • 將試算表ID加入後如下，在瀏覽器即可檢視『Google試算表』以JSON格式之發佈。

https://spreadsheets.google.com/feeds/list/18AsfeLFfdWY_RiofEJgEA5I71qrtnIfLBGA8lz3Qsgc/od6/public/values?alt=json

(四)在App Inventor 2 讀取JSON 資料：(專案名稱：p4_json.aia)

5.透過 Code Beautify 線上工具可檢視資料結構：先進入 JSON Viewer→選取【Load Url→輸入『Google試算表』以JSON格式之發佈網址】，如下圖，右側視窗(Result : Tree Viewer)中呈現樹狀結構之資料，在資料結構中顯示位於【feed\entry】下每筆資料有2個欄位，分別為動畫名稱(gsx$topic)、及影片網址(gsx$url)。

＊註：尋找關鍵字『gsx$topic』→找到『動畫名稱』代碼，該資料為清單，故需再以關鍵字『$t』找到『代碼』資料。

6.測試：以【Web網路】元件讀取JSON格式資料。

(五)【ActivityStarter啟動器】元件播放影片

  • (專案名稱：p4_YouTube.aia) ※建議：以實機操作。

7. 測試：透過【ActivityStarter啟動器】元件以開啟網頁方式播放YouTube影片。參閱： App Inventor 2 指令中文化→ActivityStarter元件。

＊註：【ActivityStarter啟動器】元件可呼叫其他應用程式，含App Inventor 2 撰寫之程式、手機內建應用程式及一般手機應用程式，部分應用程式會傳回值，目前【ActivityStarter啟動器】僅接收回傳文字資料。

  • 元件主要屬性及方法如下：

8.測試題：程式設計。

9.執行結果：按下按鈕→即開始播放影片。

四、 畫面編排(Designer)頁面

(一)使用元件及其屬性設定：(專案名稱：video.aia)

(二)介面配置

    • 主畫面設計：

五、程式設計(Blocks)頁面

(一)定義全域變數

(1) vlist 以清單儲存讀取之雲端資料。

(2) topic 以清單儲存『動畫名稱』。

(3) url 以清單儲存動畫影片上傳YouTube之分享『網址』

(二)以【Web網路】元件讀取雲端資源

    • Screen1初始化設定【Web網路】元件要讀取的網址，用【Google試算表以JSON格式發佈的網址】來執行讀取請求。

(三)以【Web網路】元件讀取資料並解碼JSON文字

    • 如下圖：當回應程式碼為200，則代表讀取成功，即可開始資料整理分類，以利後續使用。

(1) 讀取之文字透過【解碼JSON文字】將『回應內容』轉為清單：以關鍵字『feed』找到資料→再以關鍵字『entry』找到所有資料，並儲存至vlist清單中。

(2) 接著在vlist清單中循序讀取：分別如下

以關鍵字『gsx$topic』→找到『動畫名稱』代碼，但資料仍為清單，故再以關鍵字『$t』找到『代碼』資料，並新增到topic清單中。

以關鍵字『gsx$url』→再以關鍵字『$t』→找到動畫上傳到YouTube之分享『網址』→並新增到url清單中。

(3) 將『topic』清單內容→設定給『lpSelect』清單選擇器之元素內容。

(4) 若『labTopic』沒有文字內容，即尚未選取『動畫名稱』，則打開『lpSelect』清單選擇器選框，以供選取『動畫名稱』。

(四)【請選擇動畫】清單選擇器設定：

    • 當選取清單選擇器中動畫名稱後，依其選擇顯示動畫名稱及URL網址。

(五)【播放】按鈕設定：

  • 當按下播放按鈕，系統會以預設的瀏覽器開啟影片網址，並播放動畫影片。 參閱：講義〈感測器&通信連接〉

(六)【結束】按鈕設定：

    • 當按下結束按鈕，就會以結束程序結束應用程式，『退出程式』方塊請實機測試。

(七)延伸應用：

  • 在程式中增加【Notifier(對話框)】元件應用及設計，請實機測試。

  • 程式執行中，若按行動裝置上的【返回＜】鍵，會彈出結束應用程式對話方塊，接著按下『結束程式』按鈕就關閉本應用程式，按下『取消』按鈕則又返回應用程式繼續執行。

六、下載 .apk

  • 先以QR碼掃瞄器掃描二維條碼，接著下載*.apk檔，安裝至手機執行結果：選取功能列【打包apk→打包apk並顯示二維條碼】(註：此二維條碼僅維持2小時)。

七、錄製畫面

    • 手機螢幕錄影 Android App: AZ Screen Recorder【摘自：電腦玩物】