通訊&感測器

使用者界面+介面布局 多媒體(Media) 繪圖動畫(Drawing and Animation) 感測器(Sensors)&通訊連接(Connectivity)  專題雲端應用
2016/07/15 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 學會Connectivity通訊類別中【ActivityStarter啟動器】元件加入超連結的設計與應用。
  • 學會Connectivity通訊類別中【Web網路】元件擷取網頁資料的設計與應用。
  • 學會App Inventor 2 讀取JSON資料結構與【鍵:值】讀取之應用。
  • 學會結合User Interface使用者介面類別中WebViewer網路瀏覽器】元件嵌入網頁的設計與應用。
  • 學會Sensors感測器類別中【LocationSensor位置感測器】、【Clock計時器】元件的設計與應用。

一、加入超連結:ActivityStarter(啟動器元件)

  • 在 Connectivity(通訊)類別中ActivityStarter啟動器】元件可呼叫其他應用程式,含App Inventor 2 撰寫之程式、手機內建應用程式及一般手機應用程式,部分應用程式會傳回值,目前ActivityStarter啟動器】僅接收回傳文字資料。元件主要屬性及方法如下:※建議:ActivityStarter啟動器】元件以行動設備(即實機)操作

 屬性或方法  說明  屬性或方法  說明
 Action 屬性  要執行的動作名稱。  DateUri 屬性  傳送給要執行應用程式的網址資料。
 ActivityPackage 屬性  要執行應用程式的套件名稱。  啟動活動對象 方法  開始執行應用程式。
 ActivityClass 屬性  要執行應用程式的類別名稱。    

※重要應用:
 Action 屬性  android.intent.action.VIEW 會開啟指定的網頁
 android.intent.action.WEB_SEARCH 可在網頁中搜尋特定資料。
 android.settings.LOCATION_SOURCE_SETTINGS 會開啟手機的GPS功能。

homework 練習14:播放 YouTube 音樂【重點:學會Connectivity(通訊)類別中【ActivityStarter啟動器元件的設計與應用】(檔名:YouTube.aia)。

(一) 畫面編排(Designer)頁面透過ActivityStarter啟動器元件以開啟網頁方式播放YouTube影片。參閱: App Inventor 2 指令中文化ActivityStarter元件



(二) 程式設計(Blocks)頁面

  • 語系→繁體中文:

  • 語系→English:


(三) 執行結果按下【播放】按鈕即開始播放影片,按下【結束】按鈕即結束程式,註:『退出程式』需在行動設備(即實機)操作才能發揮功能。


 

    • 延伸思考:請以多頁面製作學校簡介(專案名稱:School.aia),或個人之高中學習歷程作品展示【重點:學會Connectivity(通訊)類別中【ActivityStarter啟動器】及 使用者介面類別中【WebViewer網路瀏覽器】元件的設計與應用】(專案名稱:ePo.aia)
例:學校簡介。(註: 影像處理軟體 PhotoImpact → 元件設計師路徑繪圖工具)

Screen1
 Screen2→『美麗的山』頁面



二、Web網路元件擷取網頁資料
  • 該元件可讀取指定網站的資料,而讀取的資料為文字檔格式*註:參閱  App Inventor 2 指令中文化Web網路元件
    • 例:在TextBox1元件輸入網址,當按下按鈕即開始【執行GET請求】方法讀取該網站資料,而讀取的資料為文字檔格式。

  • 以『取得文字』事件取得資料:
    • 如下圖:當【執行GET請求】方法讀取時,會觸發取得文字事件(預設讀取的資料格式為純文字),並以參數回應內容取得資料,參數回應類型為取得的資料型態,而參數回應程式碼代表讀取狀況,若等於200,表示已成功取得資料

  • 擷取json資料:上述,預設讀取的資料格式為純文字,若資料為json格式,如下圖方法轉換。資料是以清單方式傳回,若要取得指定欄位資料,需再從清單中再次擷取。

*註:JSON資料格式的讀取。 JSON 維基百科

1.JSON資料結構:JSON(JavaScript Object Notation)是一種輕量級的資料交換語言,JSON利用資料物件(object)及清單陣列(Array)描述資料內容,簡述如下:

(1)資料物件:為描述單筆資料,內容以{...}符號框住,一個物件包含一系列非排序的鍵(名稱):值對,以『:』隔開鍵/值對,若多個鍵/值對,則以,分隔。

{鍵1(名稱):值對,鍵2(名稱):值對,鍵3(名稱):值對,...} 

(2)清單陣列:為描述多筆資料,內容以[... ]符號框住,每筆資料之間,分隔。

例:班級成績

101班
 座號  姓名  國文  英文  數學
 1  丁一  70 80  90 
 2  王小明  92 83 75
 JSON格式

2.讀取JSON
 
(1)使用Web網路元件讀取資料來源(例:網址),當讀取完文字後,利用【解碼JSON文字】方塊將讀取的內容轉為清單。
(2)利用
【在鍵值對中尋找關鍵字】方塊,搜尋資料物件的名稱,即可取回其值。
*註:取得Dropbox 分享連結時,須將網址前方的『www』改為『dl』,下載連結才能成功。

3.可透過 Code Beautify JSON Viewer 線上工具可檢視其資料結構。

三、LocationSensor(位置感測器元件)

  • 位置感測器元件是非視覺元件,為偵測行動裝置的位置,以行動裝置之GPS(優先)或以無線網路、行動基地台來定位。其位置包含經度、緯度、海拔高度、地址等。該元件主要屬性及事件如下:部分功能需視使用之行動裝置及地區是否有提供。
 屬性及事件  說明
 有效提供者 屬性 傳回可用的服務者清單:gps 或 network。
 經度 屬性 傳回行動裝置的經度。 
 緯度 屬性 傳回行動裝置的緯度。  
 海拔 屬性 傳回行動裝置的海拔高度 
 提供者名稱 屬性 設定目前服務提供者名稱:gps 或 network。
 鎖定提供者 屬性 設定是否鎖定目前服務提供者。 
 位置被改變 事件 當行動裝置位置改變時會觸發本事件。 
*註:若使用GPS定位,提供者名稱之屬性值為gps;若使用無線網路或行動基地台定位,提供者名稱之屬性值為network。

homework 練習15:以 GPS 取得目前位置,當使用者按下【顯示位置】按鈕,即顯示目前定位方式,及目前之經緯度學會Sensors(感測器)類別中【LocationSensor(位置感測器)】元件的設計與應用(檔名:gps.aia)。

(一) 外觀編排(Designer)頁面:即版面配置頁面,如下圖。參閱: App Inventor 2 指令中文化Location-Sensor(位置感測器)。

*註:ListPicker1元件屬性面板元件字串設定為【Network,GPS】。

(二) 程式設計(Blocks)頁面

1.程式開始:啟動位置感測器元件,且定位預設為Network。


2.使用者選取定位方式,並鎖定該定位方式,如果行動裝置未開啟GPS功能,則開啟GPS。

(1)若使用者選取【GPS】則執行(2)。
(2)如果行動裝置未開啟GPS功能(等於false),則開啟GPS。

3.當使用者按下【顯示位置】按鈕,即顯示目前定位方式,及目前之經緯度。



四、Clock計時器元件
  • 有取得系統時間及定時觸發某個事件兩大功能,其主要用途是每隔指定時間會觸發計時事件,只需將重複執行的方塊放置計時事件即可。例:時鐘、鬧鐘、碼表。
  • 該元件於 Sensors感測器類別中,為非可視元件。
  • 常用屬性及事件:
 事件  說明 
 計時 事件  每隔 計時間隔 屬性設定的時間,會觸發 計時 事件一次。

 屬性  說明 
 持續計時  若 持續計時 為 真(T),計時器仍會繼續觸發。 
 啟用計時  設定 計時器 元件是否有作用,預設值為 真(T)。 
 計時間隔 (TimerInterval) 設定計時事件多久觸發一次,單位為毫秒(ms),預設值為1000,即1秒觸發一次。 

 :計時碼表。(檔名:Clock.aia)。

 1.畫面編排(Designer)頁面:即版面配置。

 

2.程式設計(Blocks)頁面:
  • 語系→繁體中文:

  • 語系→English:

3.測試程式:以模擬器(emulator)測試執行,如下圖。

 延伸思考:結合生活需求,請整合天氣預報、雨量、地震、水情…等應用。


 手機的XYZ 軸向示意圖


 工具&資源網

 MobilesWall:免費手機、平板電腦高質感桌布 http://www.mobileswall.com/
 IconsPedia:Icons & Icon Packs→Download Free PNG Icons
 Windows Phone Icons Maker:Windows手機圖標製造商,可載入圖像.修剪.存圖標。含173x173Background.png、62x62ApplicationIcon.png…
 App Inventor 2 指令中文化:http://www.appinventor.tw/ai2_chinese 《摘自:AppInventor中文學習網
 影像處理軟體 PhotoImpact → 元件設計師路徑繪圖工具