mit app inventor 2 · 2016-02-04 · 開發app 前的準備 app inventor...
TRANSCRIPT
-
揮動指尖的魔法:APP 程式設計營MIT App Inventor 2
指導老師: 張啟中 (JohnAxer) [email protected]教學助理: 王暐鈞 (Jin) [email protected]營隊時間: 2016-01-25~01-27營隊地點: 國立中興大學附屬高級中學-3F電腦教室
-
Day 1 大綱
APP 程式開發 Android 架構 App Inventor 介紹開發 APP 前的準備 APP1:第一個 APP 程式--輸入文字顯示 Tech.1:修改模擬器解析度
2
-
Day 2 大綱
APP2:溫度轉換器--攝氏與華氏轉換增加版權宣告與美化程式
Tech.2:交換屏幕畫面顯示次序 APP3-1:定位--顯示自己所在位置的經緯度使用自己的手機測試 APP安裝 APP 到手機上
3
-
Day 3 大綱
APP3-2:地圖--將自己所在位置顯示地圖上 APP4:清單--點餐系統 APP5:相機--啟動手機相機拍照 APP6:資料庫--記錄個人資料欣賞其他開發者的作品
繳交小組或個人作品
4
-
Day 1
• 2016-01-251. APP 程式開發2. Android 架構3. App Inventor 介紹4. 開發 APP 前的準備5. APP1:第一個 APP 程式--
輸入文字顯示
6. Tech.1:修改模擬器解析度
5
-
APP 程式開發
今日行動裝置已很普遍,而目前主要的行動裝置作業系統有:
Android iOS Windows Firefox OS…
如果想要一次開發多種平台的 APP 降低成本,你可以嘗試使用Xamarin 或 PhoneGap。
這次營隊我們要介紹簡單開發 Android APP 的工具--App Inventor。
6
-
Android 架構7
-
App Inventor 介紹
App Inventor 使用圖形化介面以拼圖的方式來寫程式,可以讓任何熟悉或不熟悉程式設計的人來創造基於 Android 作業系統的應用軟體。App Inventor 起先是由 Google 提供的應用軟體,現在由麻省理工學院(MIT)維護及營運。網址: http://ai2.appinventor.mit.edu
8
-
開發 APP 前的準備
App Inventor 為全雲端的開發環境,所有的動作皆在瀏覽器上完成。在準備開發自己的 APP 前,必須準備好以下東西:1. 你需要一個 Google 帳號(gmail)2. 你的電腦要有 Java 環境驗證 Java 版本3. 下載安裝 App Inventor 工具軟體載點
下載路徑:App Inventor 2 | Explore MIT App Inventor Resources Get Started Setup Instructions Option Two (Emulator) Instructions Instructions for Windows Download the installer
9
-
101. 你需要一個 Google 帳號
-
112. 你的電腦要有 Java 環境
-
3. 下載安裝 App Inventor 軟體12
-
App Inventor 登入畫面13
網址: http://ai2.appinventor.mit.edu點選 Start new project 輸入專案名稱:One(專案名稱可自行命名)
-
APP1:第一個 APP 程式--輸入文字顯示
一開始做一個簡單的按下按鈕後顯示我們輸入的文字的 APP。主要使用元件:
TextBox Button Label
14
-
15
從左方 Palette 拖曳出 TextBox、Button、Label 元件。並從右方 Properties 設定字體大小、文字等元件屬性。
APP1:Screen1 版面配置
-
APP1:Screen1 元件動作16
右上角切換到 Blocks 視窗設定元件動作功能,選擇 Button1,拖曳出按鈕點選(Click)動作的拼圖區塊。再選擇 Label1,將標籤(Label1)文字設定成文字輸入欄位(TextBox1)的文字。
-
APP1:執行第一個 APP 程式
將版面配置及元件動作設定完成後,就可以來執行我們的第一個 APP 囉!首先將安裝好的 App Inventor 工具軟體,啟動當中的 aiStarter 程式。接著從 App Inventor 網頁上方選擇 Connect Emulator 使用模擬器執行程式。首次執行時會出現提示模擬器的 Companion App 需要更新。請更新!更新完後關掉模擬器再重新執行程式。
若有遇到執行模擬器出現無法開啟的狀況,開啟工作管理員將 adb.exe 結束工作,在重新整理 App Inventor。
17
-
APP1:執行結果
從模擬器中可以看見從 TextBox 輸入的文字,在點選 Button 後,把文字顯示到 Label 上。
18
-
Tech.1:修改模擬器解析度
模擬器畫面看起來好小… 找到模擬器的安裝路徑:
C:\Program Files (x86)\AppInventor\commands-for-appinventor\run-emulator.bat
右鍵使用編輯器開啟修改(記事本/Notepad++):將 skin 參數從原本的 HVGA-AppInventor 改成 WVGA800。 或是想換成別的外觀:C:\Program Files (x86)\AppInventor\commands-for-
appinventor\from-Android-SDK\platforms\android-8\skins 當中的任一個資料夾名稱。
19
-
Tech.1:修改模擬器解析度20
WVGA800 的模擬器外觀。
-
Day 2
21
• 2016-01-261. APP2:溫度轉換器--攝氏與華氏轉
換
2. 增加版權宣告與美化程式
3. Tech.2:交換屏幕畫面顯示次序4. APP3-1:定位--顯示自己所在位置
的經緯度
5. 使用自己的手機測試 APP6. 安裝 APP 到手機上
-
APP2:溫度轉換器--攝氏與華氏轉換
製作一個溫度轉換器,能將攝氏溫度轉換成華氏溫度。並且將元件排列整齊。
數學公式:F = 9 / 5 * C + 32主要使用元件:
TableArrangement TextBox Button Label
22
-
APP2:Screen1 版面配置23
TableArrangement 版面配置可設定行數(Columns)和列數(Rows)讓元件排列整齊。
-
APP2:Screen1 元件動作24
-
增加版權宣告與美化程式
辛苦做出的作品要好好宣揚,也要保護好你的努力成果。為我們的程式增加個版權宣告吧。
使用元件:
Notifier
另外準備好一張圖片上傳做為 APP 的背景圖片美化程式。 Media Upload File…
25
-
APP2:Screen1 版面配置(版權宣告)26
-
APP2:Screen1 元件動作(版權宣告)27
設定按下關於…按鈕後出現訊息對話框顯示你的版權宣告。
-
新增華氏轉攝氏遇到的問題
完成攝氏轉華氏溫度轉換後,焉能缺少華氏轉攝氏溫度轉換。因此我們增加一個屏幕畫面 Screen2 讓使用者選擇是要哪種溫度轉換:攝氏轉華氏、華氏轉攝氏。
我們想讓新增的屏幕畫面 Screen2 變成一開始顯示的畫面,但是 App Inventor 沒有功能能簡單地把兩個頁面順序交換。那我們該如何把Screen1 和 Screen2 交換呢?
28
-
APP2:Screen2 版面配置29
-
Tech.2:交換屏幕畫面顯示次序 (1/7)
由於 MIT App Inventor 2 尚未有屏幕畫面(Screen)重新命名的功能,使得我們的 APP 畫面執行時永遠是顯示屏幕畫面 Screen1。
這裡我們以手動的方式調整兩個屏幕畫面 Screen1、Screen2 顯示先後順序。
30
-
Tech.2:交換屏幕畫面顯示次序 (2/7)
首先在 App Inventor 網頁將目前做好含有兩個屏幕畫面(Screen)的程式匯出(export)到電腦上進一步處理。
從 App Inventor 網頁上方選擇Project Export selected project (.aia) to my computer 將專案匯出。範例是匯出 One.aia
31
-
Tech.2:交換屏幕畫面顯示次序 (3/7)
使用(解)壓縮軟體(WinRAR、7-Zip…):將剛剛下載的 One.aia 拖曳到解壓縮軟體上,並進入到 src 資料夾的最底部。
此時可見兩個 Screen 各有兩個檔案(總共 4 個),將它們解壓縮出來到桌面。(壓縮軟體先不用關閉,待會還會用到。)
32
-
Tech.2:交換屏幕畫面顯示次序 (4/7)
將這 4 個檔案重新命名並編輯內容全部取代新名稱。
Screen1 改名成 ScreenX。打開 ScreenX.bky 和 ScreenX.scm,將裡面的 Screen1 字串全部取代成 ScreenX。
Screen2 改名成 Screen1。(將原本第二頁屏幕畫面移到第一頁)
打開 Screen1.bky 和 Screen1.scm,將裡面的 Screen2 字串全部取代成 Screen1。
33
重要! !第一頁屏幕畫面一定要命名成 Screen1!
-
Tech.2:交換屏幕畫面顯示次序 (5/7)
重新將 4 個編輯好的 Screen1 和 ScreenX 檔案拖曳到剛剛尚未關閉的壓縮檔內,並將原本在壓縮檔內的兩個 Screen2 檔案刪除。
34
-
Tech.2:交換屏幕畫面顯示次序 (6/7)
最後將 One.aia 改名成 Two.aia,使其與原本專案不互相衝突而可以重新匯入(import)專案到 App Inventor。
從 App Inventor 網頁上方選擇Project Import project (.aia) from my computer
35
-
Tech.2:交換屏幕畫面顯示次序 (7/7)36
最後成功將專案 Two 匯入!把原本在第二頁的溫度轉換按鈕拿到第一頁顯示。
-
完成華氏轉攝氏
解決屏幕畫面交換問題後,我們將華氏轉攝氏的數學公式完成。
數學公式:C = (5 * F – 160) / 9
37
-
APP2:交換屏幕畫面後 Screen1(第一頁)38
-
APP2:交換屏幕畫面後 ScreenX(第二頁)39
-
APP2:執行結果40
攝氏轉華氏
-
APP3-1:定位--顯示自己所在位置的經緯度
透過 GPS 或 wifi 定位手機所在位置顯示出經緯度。主要使用元件:
LocationSensor
41
-
APP3-1:版面配置42
將 LocationSensor 拖曳至手機畫面中,並且設定定位更新的時間間隔屬性(TimeInterval),單位為毫秒(ms)。
-
APP3-1:元件動作43
-
使用自己的手機測試 APP
有些感測器(Sensor)在模擬器上無法使用,因此我們就需要用手機來測試 APP。
這時需要透過無線網路(wifi)連線,另外再到手機上的 Play 商店找到MIT AI2 Companion 安裝。
44
-
使用自己的手機測試 APP
點選 scan QR code 掃描快速響應矩陣碼,即可將 APP 執行在自己的手機上。
45
-
安裝 APP 到手機上
當 APP 開發並測試完成時,可以將自己的作品永久安裝到手機上。從 App Inventor 網頁上方選擇:Build App (provide QR code for .apk),程式編譯過後會出現QR code 提供掃描安裝 APP。
46
-
• 2016-01-271. APP3-2:地圖--將自己所在位置顯
示地圖上
2. APP4:清單--點餐系統3. APP5:相機--啟動手機相機拍照4. APP6:資料庫--記錄個人資料5. 欣賞其他開發者的作品
6. 繳交小組或個人作品
Day 3
47
-
APP3-2:地圖--將自己所在位置標示地圖上
接續剛剛做的 APP,我們要如何將定位座標標示在地圖上?使用元件:
WebViewer
48
-
APP3-2:版面配置49
-
APP3-2:元件動作50
-
APP3-2:執行結果51
透過 GPS 定位出手機所在位置,並標示在地圖上。
-
APP4:清單--點餐系統
你受雇於麥噹噹老闆,要開發一個點餐 APP。你會如何做?主要使用元件:
ListView ListPicker
52
-
APP4:版面配置53
-
APP4:元件動作54
-
APP4:執行結果55
當輸入餐號點餐後,會出現餐點內容名稱提示。簡單的點餐系統完成囉!
-
APP5:相機--啟動手機相機拍照
如何利用程式開啟手機上的相機拍照?並選擇手機內的圖片顯示?
主要使用元件:
Camera Image ImagePicker
56
-
APP5:版面配置57
-
APP5:元件動作58
-
APP5:執行結果59
將 APP 執行到手機上,點擊啟動相機按鈕就會開啟手機上的相機程式。點擊選擇圖片按鈕則會顯示手機圖片庫。
-
APP6:資料庫--記錄個人資料
若要製作一份個人的通訊錄,你可以用什麼元件做儲存記錄?資料庫。
主要使用元件:
TinyDB ListPicker DatePicker
60
-
APP6:版面配置61
-
APP6:元件動作62
暫時沒有使用到的程式碼點選右鍵Disable Block,這段程式碼將不會被執行。
-
APP6:執行結果63
輸入 ID、姓名和用 DatePicker 元件選擇生日日期後,按下儲存按鈕將資料儲存到資料庫中。按下查詢按鈕則會另外顯示資料庫中的每一筆資料。
-
欣賞其他開發者的作品64
-
參考資料
MIT App Inventor 維基百科:App Inventor 高師大附中資訊社 App Inventor 教學網:修改模擬器解析度 YouTube:AI Screen Manipulation App Inventor TW 中文學習網:座標定位GoogleMap 其他資料
Jing 的教學園地:MIT App Inventor 2 App Inventor 2:高中磨課師「基礎程式設計」課程網站
65