國科會 _ 資訊科技應用體驗營計畫 手機 App 設計 - 使用 App Inventor 國立成功商水 2013/12/24 苑梅俊陳君毓 美和科技大學資訊管理系
研習大綱 App Inventor 的由來及用途 使用 App Inventor 前的準備 Java Google 帳號 AppInventor 安裝 App Inventor 使用環境認識 小畫家 - 畫面設計 元件介紹 設計頁面 當個小畫家 使用區塊編輯器 來試一下吧 使用模擬器 連結到你的 Android 手機 2
App Inventor 的由來及用途 3
App Inventor 是什麼? App Inventor 是 Google 實驗室 (Google Lab) 的一個子計畫, 由一群 Google 工程師與勇於挑戰的 Google 使用者共同參與 Google App Inventor 是一個完全線上開發的 Android 程式環境, 拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的 Android 程式 App Inventor 已於 2012 年移交給 MIT Center for Mobile Learning 2013.12 發表 App Inventor 2 (AI2), 原 App Inventor 更名為 App Inventor Classic AI2 為全網頁開發環境 中文學習網 : www.appinventor.tw 4
介紹 使用 Android 系統的手機, 在全球的手機市場佔有率中排名第一名, 而 App Inventor 是第一個全圖形化介面的 Android 手機 App 發展工具, 讓你可以不用寫一行程式就可以開發出 Android 手機的 App 在這研習過程中, 將帶領大家親身體驗 App Inventor 的魅力及魔力 5
App Inventor 的優缺點 優點 適合無程式基礎的初學朋友 全雲端, 所有設計在瀏覽器完成 (AI2) 支援樂高機器人 更新快速 缺點 Google App Inventor 程式無法發布到 Android Market 相同功能比較之下,App Inventor 程式較 Android 程式來得差, 檔案 size 也較大 6
App Inventor 適合誰? 想要學習手機程式設計的入門學習者 相關科系領域的師長 / 教學夥伴們,Google App Inventor 非常適 合做為投入正規 Android 程式開發前的先導教材 7
App Inventor 安裝 8
系統需求 作業系統蘋果 :Mac OS X 10.5/10.6/10.7 Windows:Windows XP/Windows Vista/Windows 7 GNU / Linux:Ubuntu 8 +/Debian 5 + 瀏覽器 Mozilla Firefox 3.6 以上版本 Apple Safari 5.0 以上版本 Google Chrome 4.0 以上版本 Microsoft Internet Explorer 7 以上版本 9
App Inventor 開發環境 安裝 Java 申請 Google 帳號 安裝 App Inventor 10
安裝 Java 到 Java 官網 http://www.java.com 免費下載 11
安裝完成後, 可點選 Java 測試頁來檢測是否可執行, 若可執行將會顯示以上畫面 12
檢查您的瀏覽器已正確配置執行 Java, 請點選鏈結 驗證成功 ( 上圖 ) 驗證失敗 ( 下圖 ) 13
申請 Google 帳號 點選此處進入 14
15
16
安裝 App Inventor 點選執行安裝 依序程序的安裝步驟, 不要更改安裝位置 17
App Inventor 使用環境認識
進入 MIT App Inventor 網站 進入 http://appinventor.mit.edu/ 網址, 並點選圖中框起來的連結 19
請點選橘色按鈕, 進入 AppInventor 的開發環境 20
21
登入後, 會轉至授權頁面, 請點選 Allow 22
專案頁面介紹 新增 刪除 下載全部專案 匯入匯出專案 我的專案 設計師 學習 現有專案列表 公告訊息視窗 23
建立新專案 專案名稱必須是英文開頭, 不可使用中文或其他符號 24
設計頁面介紹 26
27
28
啟動 Blocks Editor 點擊 開啟 29
載入後開啟檔案, 會顯示 Java 圖示, 稍待一會會自動開啟 Blocks Editor 而後會詢問你是否要執行此應用程式, 請按下 執行 30
區塊編輯器介紹 儲存 上一步 重作 啟動模擬器 連接裝置按鈕 畫面大小縮放 元件方塊庫 方塊設計區 垃圾桶 31
設計頁面與區塊編輯器的關係 設計頁面 區塊編輯器 在沒有拉至任何元件時, 區塊編輯器上只會有預設的兩個方塊庫 32
設計頁面 區塊編輯器 拉至新元件時, 區塊編輯器上會同步新增方塊庫 33
執行專案 使用模擬器使用 USB 傳輸線連接到 Android 手機使用 WIFI 連接到 Android 手機使用 QR code 下載到你的 Android 手機 34
開啟模擬器 點擊 會出現宣告畫面, 按下 OK 35
滑開 Emulator 執行畫面 36
使用模擬器 點擊 連線裝置中 連線成功將會顯示綠色圖示 37
使用 USB 傳輸線連接到 Android 手機 可以透過 USB 連結到你的 Android 手機上測試應用程式在 App Inventor Designer 或 Blocks Editor 上所做的編輯, 都會即時顯示在 Android 手機螢幕上 在預設情況下, 為了系統安全考量,Android 手機無法安裝未知來源的應用程式, 必須經過設定才能測試我們所開發的應用程式 38
圖為 Android 2.3.4 版, 進入 Android 的設定功能, 點選應用程式, 勾選未知來源 39
系統會出現警告訊息, 請案確定, 接著在 開發 功能選項裡, 勾選 USB 偵錯 與 螢幕保持開啟 功能 40
使用 WIFI 連接到 Android 手機 到 play 商店 1. 下載並安裝條碼掃描器 ( 例如 : Zxing Barcode Scanner ) 2. 下載並安裝 MIT AICompanion 需先登入 Google 帳戶, 並在手機上設定帳戶, 才能下載安裝 41
到區塊編輯器點選 Connect to Device.. 使用 MIT AICompanion 來掃描 QR Code 或輸入 42
使用 QR code 下載到你的 Android 手機 設計頁面的右上方, 點選 Show Barcode, 此時等候數 分,App Inventor 將會在網頁上出現 QR code 43
必須使用自己的 Google 帳號才能下載使用 44
小畫家 - 畫面設計 45
小畫家介紹 我們將建立一個繪圖 app, 我們 可以在手機螢幕上選擇一種顏色, 然後移動自己的手指在螢幕上觸 碰及繪圖, 能選擇手機裡的相片 作為繪圖的畫布 46
用到的元件 元件 HorizontalArrangement Button TextBox Label Canvas ImagePicker 說明可將多個元件從左到右橫向排列, 用來排版 可在程式中設定特定的觸碰動作 可在元件中輸入文字用來顯示文字可執行繪畫等觸碰動作或設定動畫可從您的圖片庫中選取圖片 47
屬性設定 Button_Red~Button_Green 的背景顏色分別為 : Red Blue Green Canvas 的 寬度為 :Fill parent, 高度為 :300 pixels 48
當個小畫家 49
預覽方塊完成圖 50
設定畫筆顏色 Button_Red~ButtonGreen 做法是相同的, 請重複此作法 51
當使用者點擊時, 會更改畫筆的顏色 52
設定畫布的畫筆顏色 53
在這裡更改畫布的畫筆顏色為紅色 54
設定擦拭按鈕 當使用者點擊時, 會清除畫布上的各種塗鴉 55
56
清除畫布上的各種塗鴉 57
在畫布上觸控並繪製一個實心圓形 當你拖曳出觸控處理程式方塊時,value x 和 value y 會自動的被建立, 而現在我們有一個半徑為 5 像素繪製的實心圓形 58
當使用者點擊畫布時, 回傳 (x,y) 座標代表使用者所點擊的位置 59
在畫布上指定座標處 (x,y) 繪製一實心圓形, 需指定半徑 r 60
在這裡我們指定半徑 r 為 5 61
移動你的手指在螢幕上畫一條線 當使用者用手指拖拉時, 會在畫布上畫出一條線 62
當使用者用手指拖拉時, 觸控點會由 (prevx,prevy) 移到 (currentx,currenty), 當下的座標點皆是 (currentx,currenty) 63
在畫布上畫出一條直線, 起始點 (x1,y1), 終點 (x2,y2) 64
起始點分別為 x1:prevx,y1: prevy 65
終點分別為 x2:currentx,y2: currenty 66
變更畫筆粗細 當使用者用每點擊 + 號按鈕時, 畫筆的寬度會變粗 3 點, 當使用者用每點擊 - 號按鈕時, 畫筆的寬度會變細 3 點 67
新增一個全域變數 先新增一個全域變數, 變數名稱為 dotsize, 數值為 3 68
69
設定畫筆變粗 70
71
72
73
當使用者用每點擊 + 號按鈕時, 畫筆的寬度會變粗 3 點 74
設定畫筆線的寬度為 dotsize 的變數 75
設定 dotsize 的變數的值會顯示在標籤元件上 76
當使用者用每點擊 + 號按鈕時, 畫筆的寬度會變粗 3 點, 在這裡畫筆的寬度最粗為 30 點 77
當畫筆的寬度大於等於30點 設定畫筆的寬度最粗為30點 並顯示在標籤上 78
設定畫筆變細 79
80
將方塊中的小於改成大於, 加號改成減號,else-do 裡的數字改為 1, 當使用者用每點擊 + 號按鈕時, 畫筆的寬度會變細 3 點, 在這裡畫筆的寬度最細為 1 點 81
更改實心圓形的半徑 請在區塊編輯器找到這個方塊, 我們要更改實心圓形的半徑 82
83
設定選擇相片 當使用者點選到 選擇相片 的按鈕, 畫布的背景圖片, 會變成使用者在圖片庫中所選取到的圖片 84
85
設定畫布的背景圖片 變成使用者在圖片庫中所選取到的圖片 86
開啟儲存方塊 87
先新增一個全域變數, 變數名稱為 save, 數值為 1 88
89
90
91
92
93
94
95
96
97
設定儲存按鈕 當使用者點擊時, 會將畫布當下狀態存成一張圖檔 98
99
10 0
10 1
當使用者點擊時儲存按鈕時,TextBox 的文字將被清除 10 2
來試一下吧 10 3
連結到 Emulator- 方法一 點擊 連線裝置中 連線成功將會顯示綠色圖示 10 4
模擬器執行畫面 滑開 10 5
使用 WIFI 連接到 Android 手機 請先到 Play 商店下載 MIT AICompanion 10 6
進入程式 執行 MIT AICompanion 畫面 請點選 MIT AICompanion 下載 MIT AICompanion 後, 到手機上點選小綠人 ( 左圖 ), 就會進到 MIT AICompanion 執行畫面 ( 右圖 ) 10 7
使用 WIFI 連接到 Android 手機 到區塊編輯器點選 Connect to Device 裡的 WiFi 使用 MIT AICompanion 來掃描 QR Code 或輸入 Code 10 8
手機執行畫面 10 9
使用 QR code 下載到你的 Android 手機 設計頁面的右上方, 點選 Show Barcode, 此時等候數分,App Inventor 將會在網頁上出現 QR code 11 0
必須使用自己的 Google 帳號才能下載使用 11 1
手機執行畫面 11 2
11 3