第三章：行動裝置與人機介面

Size: px

Start display at page:

Download "第三章：行動裝置與人機介面"

画邹
4 years ago
Views:

1 第三章人機介面行動技術 -App Inventor 1 南臺科技大學資訊工程系李育強助理教授

2 Outline 3-1App Inventor 簡介 3-2 建立 App Inventor 下的 android 開發環境 3-3 利用 App Inventor 開發 App 2

3 3-1 App Inventor 簡介 (1) App Inventor 簡介 : 目的 : 讓非專業程式設計師也能開發出好用的應用程式 3

4 3-1 App Inventor 簡介 (2) Android: 以 Linux 為基礎的作業系統, 主要使用在智慧型行動裝置上, 如 : 智慧型手機平板電腦等 Android App:Android 應用程式 (Android Applications), 可在 Android 作業系統上執行的應用程式 App Inventor: 用來開發 Android App 的圖形化編輯器, 設計中的程式需透過瀏覽器來呈現由 App Inventor 伺服器儲存相關的專案 2010/12/15 Google 釋出 2011/12/31 移回 MIT 繼續開發 4

5 3-1 App Inventor 簡介 (3) App Inventor 建立應用程式需要二大模組 : The App Inventor Designer The App Inventor Blocks Editor 手機或模擬器上呈現結果 5

6 3-2 建立 App Inventor 下的 android 開發環境要建立 App Inventor 下的 android 開發環境之前, 必須確認下列三個事項 : 1. 使用者必須擁有 Gmail 帳號 2. 使用者電腦必須安裝 Java JDK 6 以上 3. 安裝 App Inventor 6

7 申請 Gmail 帳號 (1) Gmail 帳號, 是每一個 App Inventor 程式開發者必備的帳號, 藉由 Gmail 帳號來登入 App Inventor 官坊網站網 ==> 右上角登入 7

8 有 Google 帳號 : 直接登入申請 Gmail 帳號 (2) 無 Google 帳號 : 利用免費建立帳戶, 進行 Gmail 帳號的建立 8

9 申請 Gmail 帳號 (3) 進入免費建立帳戶的頁面, 依序輸入所需資料依序資料輸入完成後, 按下一步, 即可看到歡迎使用 Gmail 的成功頁面, 9

10 申請 Gmail 帳號 (4) 10 首次使用 Gmail 時,Google 會要求輸入相關資訊, 依序輸入 : 國家地區行動電話號碼備援電子郵件地址, 來作為密碼忘記的處理機制輸入完畢後, 點選儲存並繼續

11 申請 Gmail 帳號 (5) 第一次進入 Gmail 的操作頁面時, 會有歡迎畫面出現進入到 Gmail 的頁面,Google 預設會寄三封信件到您的信箱中 11

安裝 Java JDK(1) 12 執行 App Inventor 需要安裝 Java JDK 6 以上可至 Java 官方網站所提供的網頁進行測試 http://www.

12 安裝 Java JDK(1) 12 執行 App Inventor 需要安裝 Java JDK 6 以上可至 Java 官方網站所提供的網頁進行測試或者到 Java 官方網址 : 選擇我有 Java 嗎? 進行檢測

13 安裝 Java JDK(2) 點選驗證 Java 版本, 進行 Java JDK 的檢測網頁畫面會出現驗証安裝, 正在偵測您電腦中的 Java 的提示訊息 13 驗證完成後, 網頁畫面會依照該使用者的安裝狀況出現相對應的訊息, 並建議安裝最新的版本

14 安裝 Java JDK(3) 若選擇立刻下載 Java 同意並開始免費下載執行, 以安裝最新版本 14

15 安裝 Java JDK(4) 安裝 Java 時, 必需關閉瀏覽器, 才可繼續進行安裝系統會出現安裝過程的提示畫面在完成安裝的步驟後, 即可看到安裝成功的提示畫面您已成功安裝 Java 安裝完, 可再次至 Java 官網進行檢測 15

安裝 App Inventor(1) 藉由此網址 http://www.appinventor.mit.

16 安裝 App Inventor(1) 藉由此網址連結到 App Inventor 官方網站進行下載 Welcome to MIT App Inventor Invent, 即可進入軟體的下載頁面 16

17 安裝 App Inventor(2) 17 選擇適合的作業系統版本在此選擇 Windows 版本後, 即可進入軟體的下載頁面選擇 1.Download the installer, 即可下載 App Inventor 安裝檔

18 安裝 App Inventor(3) 18 App Inventor 安裝檔下載完執行 App Inventor 安裝檔按下執行繼續同意進行安裝, 再按下 Next 進行下一安裝步驟

19 安裝 App Inventor(4) 執行 Next 後, 網頁畫面如下面左圖所示 19 按下 I Agree 同意進行安裝, 讀者可依照自行習慣, 更改軟體安裝位置, 再按下 Next 進行下一安裝步驟

20 安裝 App Inventor(5) 執行 Next 後, 網頁畫面如下方左圖所示讀者可以按下 Install 進行安裝, 最後按下 Finish 完成安裝 20

21 3-3 利用 App Inventor 開發 App 如何利用 App Inventor, 來開發屬於自己的 App 21

22 22 進入 App Inventor 官方網站點選畫面右邊中的 Invent 後, 必需再登入 Gmail 帳號, 才可開始 App Inventor 的開發

23 23 登入 Google 後, 網頁畫面如下圖所示此畫面表示為讀者是否同意麻省理工學院向 Google 存取您的 Google 帳號, 但不包含您的密碼及其他個人資訊讀者確認自己帳號後, 即可點選 Allow 後, 並繼續進行 App Inventor 的開發, 若登入畫面不是您的帳號時可以點選 Sign in to another account 的聯結點, 切換其他帳號登入

24 第一個 App(1) 24 登入完成後, 即可進入 App Inventor 的開發網頁在 App Inventor 的開發網頁的功能列, 點選 New 功能選單後, 在 Project name: 的欄位裡面, 輸入專案名稱, 按下 OK 即可新增一個新的專案此範例專案名稱為 :HelloApp 本專案初始畫面為一個按鈕, 按下按鈕後秀出文字

25 第一個 App(2) 25 在新增一個新的專案名稱後, 即可看到專案名稱為 HelloApp 的設計畫面在畫面中主要分成四個區域, 由左至右分別為 :Palette( 元件工具箱 ) Viewer ( 開發設計區 ) Components( 現在使用的物件 ) Properties( 物件屬性 ), 四大區域

26 第一個 App(3) 26 分別將 Palette( 元件工具箱 ) 內的 Button( 按鈕 ) 和 Label( 標籤 ) 兩個元件, 拖曳至 Viewer( 開發設計區 ) 後, 即可在執行畫面內加入物件

27 第一個 App(4) 27 在 Components ( 現在使用的物件 ) 區域內選擇 Screen1 後, 並且在 Properties ( 屬性 ) 區域內更改 Title, 成為合適的程式名稱 : 在此改為 HelloApp

28 第一個 App(5) 28 在 Components( 現在使用的物件 ) 區域內選擇 Button1( 按鈕物件 ) 後, 並且在 Properties( 屬性 ) 區域內分別更改 : FontSize ( 文字大小 ) Text( 物件的字串 ) Width( 物件寬度 ) 此範例設定為 : FontSize ( 文字大小 ):40 Text( 物件的字串 ): 按鈕測試 Width( 物件寬度 ): Fill Parent

29 第一個 App(6) 29 在 Components( 現在使用的物件 ) 區域內選擇 Label1( 按鈕物件 ) 後, 並且在 Properties( 屬性 ) 區域內分別更改 : FontSize ( 文字大小 ) Text( 物件的字串 ) Width( 物件寬度 ) 此範例設定為 : FontSize ( 文字大小 ):40 Text( 物件的字串 ): ( 空字串 ) Width( 物件寬度 ): Fill Parent

30 第一個 App(7) 30 個別設定好 Screen1( 螢幕物件 ) Button1( 按鈕物件 ) Label1( 按鈕物件 ) 的 Properties( 屬性 ) 後 Open the Blocks Editor, 開啟拼塊編輯器, 以編輯視覺化程式

31 第一個 App(8) 選擇 Open the Blocks Editor 功能時, 會要求安裝 AppInventorForAndroidCodeblocks.jnlp, 安裝驗證完才能正確執行拼塊編輯器 31

32 第一個 App(9) 開啟 App Inventor For Android Blocks Editor 後的執行畫面如下圖所示在左邊的功能列中分為三大類 :Built-in( 內建 ) My Blocks( 自我設計的拼塊 ) Advanced( 進階 ) 32

物件所對應的指令或觸發事件 ( 皆有對應的拼塊 ) 事件列表中選擇 when Button1.

33 第一個 App(10) 33 選擇 My Blocks, 即可在下方的物件列表中, 看到剛剛我們所加入的物件, Screen1 Button1 Label1 選擇 Button1 物件後, 系統即會秀出 Button1 物件所對應的指令或觸發事件 ( 皆有對應的拼塊 ) 事件列表中選擇 when Button1.Click 事件, 這表示當 Button1 物件被按下時會觸發所對應的方法或副程式選擇此觸發事件後, 在畫面上即會加入 when Button1.Click 事件拼塊

34 第一個 App(11) 選擇 Label1 物件後, 系統即會秀出 Label1 物件所對應的指令或觸發事件事件列表中選擇 set Label1.Text to 指令, 這表示代表設定 Label1 的文字 (Text) 中內容的參數指令選擇指令後, 在畫面上即會加入 set Label1.Text to 指令拼塊 34

35 第一個 App(12) 35 當觸發 when Button1.Click 事件時, 要執行 set Label1.Text to 的指令, 就是 set Label1.Text to 指令拼圖拖曳至 when Button1.Click 事件拼圖內即可

36 第一個 App(13) 36 在左邊的功能列中選擇 Built-in, 即可在下方的元件列表中, 看到許多可使用的對應參數元件, 選擇 Text 元件後, 系統即會秀出 Text 元件所對應的指令指令列表中選擇 Text 參數, 這表示代表設定 Text 元件文字的參數選擇指令後, 在畫面上即會加入 Text 物件拼塊

37 第一個 App(14) 讀者可以自行將 Text 元件拼塊上的參數 Text 更改成自己所需要的字串範例所更改的字串參數為 : This is my first App! 37

38 第一個 App(15) 38 當觸發 when Button1.Click 事件時, 要執行 set Label1.Text to 的指令, 並將 Lable1 元件的 Text 的參數內容更改為自訂的參數, 就是將 Text 元件拼塊拖曳至 set Label1.Text to 指令拼塊內即可

39 第一個 App(16) 39 點選 App Inventor For Android Blocks Editor 右上方的 New Emulator 功能來啟動模擬器若已經有實體裝置, 則可以省略啟動模擬器這一步驟下圖為有關模擬器的詳細說明

40 第一個 App(17) 點選 App Inventor For Android Blocks Editor 右上方的 New Emulator 的功能後, 即可擁有 Android 模擬器啟動後的模擬器要記得解除鎖定 40

41 第一個 App(18) 41 點選 App Inventor For Android Blocks Editor 右上方的 Connect to Device..., 來選擇預連結的模擬器, 或是使用者的實體裝置此範例所選擇的裝置為 : Emulator 5554 的模擬器當程式正在連結時, 右邊的手機圖示會變成閃爍的黃色圖示當程式連結完成時, 右邊的手機圖示會變成綠色圖示

42 第一個 App(19) 42 選擇好連結 App Inventor 的裝置後, 即可在裝置上看到我們所設計的程式執行畫面點選測試按鈕的物件後,Label1 上的字串即更改為 This is my first App! 做到此步驟時, 已完成利用 App Inventor 撰寫 android 程式

43 畫圓塗鴉板 (1) 43

44 畫圓塗鴉板 (2) 44

45 參考資料 App Inventor 中文學習網 CAVE-Education 王培坤 App Inventor 開發手冊 2012 上奇

麻省理工學院是在西元 2013 年 12 月 3 日推出 MIT App Inventor 2 網站, 提供免費的雲端服務, 使用者可以透過瀏覽器來開發 Android 裝置應用程式, 該網站的網址為 : http

麻省理工學院是在西元 2013 年 12 月 3 日推出 MIT App Inventor 2 網站, 提供免費的雲端服務, 使用者可以透過瀏覽器來開發 Android 裝置應用程式, 該網站的網址為 : http 資訊學科中心 6 月份電子報用 MIT App Inventor2 程式拼圖來開發 Android 裝置應用程式李啟龍學習 Android 裝置程式設計, 可以不必學習較為艱澀的 Java 語法, 只要使用拼圖模式來組合程式, 就可以完成 Android 裝置的應用程式 MIT