Embedded Files
2016/07/15 謝碧景(c)編製更新
學習目標
學習目標
學會Connectivity通訊類別中【ActivityStarter啟動器】元件加入超連結的設計與應用。
學會Connectivity通訊類別中【Web網路】元件擷取網頁資料的設計與應用。
學會App Inventor 2 讀取JSON資料結構與【鍵:值】讀取之應用。
學會結合User Interface使用者介面類別中【WebViewer網路瀏覽器】元件嵌入網頁的設計與應用。
學會Sensors感測器類別中【LocationSensor位置感測器】、【Clock計時器】元件的設計與應用。
◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)
一、ActivityStarter(啟動器元件)
一、ActivityStarter(啟動器元件)
在 Connectivity(通訊)類別中【ActivityStarter啟動器】元件可呼叫其他應用程式，含App Inventor 2 撰寫之程式、手機內建應用程式及一般手機應用程式，部分應用程式會傳回值，目前【ActivityStarter啟動器】僅接收回傳文字資料。元件主要屬性及方法如下：※建議：【ActivityStarter啟動器】元件以行動設備(即實機)操作。
※重要應用：
練習14：播放 YouTube 音樂。【重點：學會Connectivity(通訊)類別中『ActivityStarter啟動器』元件的設計與應用】。(檔名：YouTube.aia)。
(一) 畫面編排(Designer)頁面：透過【ActivityStarter啟動器】元件以開啟網頁方式播放YouTube影片。參閱： App Inventor 2 指令中文化→ActivityStarter元件。
(二) 程式設計(Blocks)頁面：
(二) 程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
(三) 執行結果：按下【播放】按鈕即開始播放影片，按下【結束】按鈕即結束程式，註：『退出程式』需在行動設備(即實機)操作才能發揮功能。
延伸思考：請以多頁面製作學校簡介(專案名稱：School.aia)，或個人之高中學習歷程作品展示。【重點：學會Connectivity(通訊)類別中『ActivityStarter啟動器』及 使用者介面類別中『WebViewer網路瀏覽器』元件的設計與應用】(專案名稱：ePo.aia)。
例：學校簡介。(註： 影像處理軟體 PhotoImpact → 元件設計師、路徑繪圖工具)
Screen1
Screen2→『美麗的山』頁面
二、Web網路元件擷取網頁資料
二、Web網路元件擷取網頁資料
以『取得文字』事件取得資料：
如下圖：當【執行GET請求】方法讀取時，會觸發取得文字事件(預設讀取的資料格式為純文字)，並以參數回應內容取得資料，參數回應類型為取得的資料型態，而參數回應程式碼代表讀取狀況，若等於200，表示已成功取得資料。
擷取json資料：上述，預設讀取的資料格式為純文字，若資料為json格式，如下圖方法轉換。資料是以清單方式傳回，若要取得指定欄位資料，需再從清單中再次擷取。
＊註：JSON資料格式的讀取。 JSON 維基百科。
1.JSON資料結構：JSON（JavaScript Object Notation）是一種輕量級的資料交換語言，JSON利用資料物件(object)及清單陣列(Array)描述資料內容，簡述如下：
(1)資料物件：為描述單筆資料，內容以{...}符號框住，一個物件包含一系列非排序的鍵(名稱):值對，以『:』隔開鍵/值對，若多個鍵/值對，則以『,』分隔。
{鍵1(名稱):值對,鍵2(名稱):值對,鍵3(名稱):值對,...}
(2)清單陣列：為描述多筆資料，內容以[... ]符號框住，每筆資料之間以『,』分隔。
例：班級成績：
2.讀取JSON
(1)使用Web網路元件讀取資料來源(例:網址)，當讀取完文字後，利用【解碼JSON文字】方塊將讀取的內容轉為清單。
(2)利用【在鍵值對中尋找關鍵字】方塊，搜尋資料物件的名稱，即可取回其值。
＊註：取得Dropbox 分享連結時，須將網址前方的『www』改為『dl』，下載連結才能成功。
3.可透過 Code Beautify→ JSON Viewer 線上工具可檢視其資料結構。
三、LocationSensor(位置感測器元件)
三、LocationSensor(位置感測器元件)
位置感測器元件是非視覺元件，為偵測行動裝置的位置，以行動裝置之GPS(優先)或以無線網路、行動基地台來定位。其位置包含經度、緯度、海拔高度、地址等。該元件主要屬性及事件如下：部分功能需視使用之行動裝置及地區是否有提供。
＊註：若使用GPS定位，提供者名稱之屬性值為gps；若使用無線網路或行動基地台定位，提供者名稱之屬性值為network。
練習15：以 GPS 取得目前位置，當使用者按下【顯示位置】按鈕，即顯示目前定位方式，及目前之經緯度。【學會Sensors(感測器)類別中『LocationSensor(位置感測器)』元件的設計與應用】。(檔名：gps.aia)。
(一) 外觀編排(Designer)頁面：即版面配置頁面，如下圖。
＊註：ListPicker1元件屬性面板：元件字串設定為【Network,GPS】。參閱→Location-Sensor(位置感測器)。
(二) 程式設計(Blocks)頁面：
(二) 程式設計(Blocks)頁面：
1.程式開始：啟動位置感測器元件，且定位預設為Network。
2.使用者選取定位方式，並鎖定該定位方式，如果行動裝置未開啟GPS功能，則開啟GPS。
(1)若使用者選取【GPS】則執行(2)。
(2)如果行動裝置未開啟GPS功能(等於false)，則開啟GPS。
3.當使用者按下【顯示位置】按鈕，即顯示目前定位方式，及目前之經緯度。
四、Clock計時器元件
四、Clock計時器元件
有取得系統時間及定時觸發某個事件兩大功能，其主要用途是每隔指定時間會觸發計時事件，只需將重複執行的方塊放置計時事件即可。例：時鐘、鬧鐘、碼表。
該元件於 Sensors感測器類別中，為非可視元件。
常用屬性及事件：
例：計時碼表。(檔名：Clock.aia)。
(一)畫面編排(Designer)頁面：即版面配置。
(二)程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
(三)測試程式：以模擬器(emulator)測試執行，如下圖。
◆延伸思考：結合生活需求，請整合天氣預報、雨量、地震、水情…等應用。
手機的XYZ 軸向示意圖
五、Pedometer計步器
五、Pedometer計步器
練習：健康計步器。【重點：學會使用者介面、介面配置、感測器(Pedometer計步器)、資料儲存(tinyDB微型資料庫)元件的設計與應用】。(檔名：stepcounter.aia)。
Page updated
Google Sites
Report abuse