2012fzagy b f g x O s [v [ j! ]

77
智慧型手機程式設計與實作: Google App Inventor 景文科技大學電腦與通訊研究所 李振偉 201281

Transcript of 2012fzagy b f g x O s [v [ j! ]

Page 1: 2012fzagy b f g x O s [v [ j! ]

智慧型手機程式設計與實作:Google App Inventor

景文科技大學 電腦與通訊研究所

李振偉

2012年8月

1

Page 2: 2012fzagy b f g x O s [v [ j! ]

內容大綱�智慧手機程式發展平台智慧手機程式發展平台智慧手機程式發展平台智慧手機程式發展平台介紹介紹介紹介紹

Google App Inventor

�手機程式實作手機程式實作手機程式實作手機程式實作-會叫的會叫的會叫的會叫的貓咪貓咪貓咪貓咪

�手機程式實作手機程式實作手機程式實作手機程式實作-數字時鐘數字時鐘數字時鐘數字時鐘+搖搖搖搖搖搖搖搖樂樂樂樂

�手機程式實作手機程式實作手機程式實作手機程式實作-撥號與撥號與撥號與撥號與簡訊簡訊簡訊簡訊

�手機程式實作手機程式實作手機程式實作手機程式實作-藍芽搖控自走車藍芽搖控自走車藍芽搖控自走車藍芽搖控自走車

2

Page 3: 2012fzagy b f g x O s [v [ j! ]

Android 是啥米?

�Android 是 Google 公司基於 Linux 平台開放原始碼的嶄新手機作業平台,同時 Google 公司在推出 Android 系統後,緊接著砸下數千萬美元舉辦了 Android 應用程式開發者大賽,使得Android 迅速吸引大量程式設計者的競相學習。

�目前使用 Android 系統的手機數量已超越iPhone 系統,成為全球使用量最大的手機系統。隨著 Android 手機的快速普及,對於 Android 應用的需求勢必越來越大,其所擁有的市場商機也將日益龐大。

Page 4: 2012fzagy b f g x O s [v [ j! ]

Android 簡介

�Android 的原義為「機器人」,Google 將Android 的代表圖騰設為綠色機器人,不但表達字面意義,且表示Android 系統是符合環保概念,是一個輕薄短小、功能強大的行動系統,號稱是第一個真正為行動手機打造的開放且完整軟體。

�對於應用程式開發者而言,Android 提供完善的開發環境,支援各種先進的繪圖、網路、相機等處理能力,方便開發者撰寫應用軟體。市面上手機的型號及規格繁多,Android 開發的程式可相容於不同規格的行動裝置,不需開發者費心。

Page 5: 2012fzagy b f g x O s [v [ j! ]

Android 歷史

� Android 的源起是 2007 年 11 月,Google 聯合三星、宏達電、摩托羅拉等 33 家手機製造商、手機晶片廠商、軟硬體供應商及多家電信業者共同組成開放手持裝置聯盟 (OHA) ,發佈開放手機軟硬體平台,命名為 Android。這些參與的業者承諾會以 Android 平台,來開發新的手機業務。稍後 Google 公佈了Android 軟體開發工具 (SDK) 的相關文件,及作業系統、驅動程式的原始碼,表現了 Google 要將 Android 平台變成人人可以自由修改,以製作完全符合自己需求系統的決心。

� 2011 年 1 月公佈的 Android 3.0 是適合平板電腦使用的作業系統,加入了特別為平板電腦設計的程式模組,宣告 Android 系統正式踏入平板電腦領域。

� 2011 年 10 月更發佈 Android 4.0,不但新增許多超炫功能,而且適用手機及平板電腦,預期會激起一波 Android 手機的高潮。

Page 6: 2012fzagy b f g x O s [v [ j! ]

6

Android的功能演進Android版本(名稱) 發表日期 功能說明

Android 1.0 2008年9月 Android智慧型手機平台誕生

Android 1.5 (Cupcake) 2009年4月 �在攝影模式下可以觀看和拍攝影片

�可以直接將影片上傳至YouTuBe�可以直接將照片上傳至Picasa�虛擬鍵盤

�Bluetooth功能�動畫轉場效果

Android 1.6 (Donut) 2009年9月 �改良拍照、攝影、和瀏覽介面

�更新文字轉語音核心

�支援WVGA螢幕模式�改善搜尋功能

�改良執行速度

Android 2.1 (Éclair) 2010年1月 �執行速度最佳化

�支援更多螢幕模式

�改良虛擬鍵盤功能

�支援Bluetooth 2.1�支援HTML5

Page 7: 2012fzagy b f g x O s [v [ j! ]

7

Android的功能演進Android 2.2 (Froyo) 2010年5月 �系統最佳化

�SD卡支援能力�支援Flash 10.1�支援Microsoft Exchange�快速鍵盤語系轉換

Android 2.3 (Gingerbread)Android 2.3.3

2010年12月2011年2月

�改良使用者操作介面

�支援更大螢幕和解析度

�支援WebM/VP8 影片�支援AAC音訊編碼�everb、equalization、headphone virtualization、bass boost音訊效果�遊戲的聲音和繪圖功能強化

�改良電源管理功能

�支援多攝影機

Android 3.0 (Honeycomb) 2011年2月 專門給平板電腦使用的版本,由於手機和

平板電腦的螢幕尺寸和使用方式有相當程

度的差異,因此Android 3.0較以往的版本做了很大的改變,包括:

�使用者介面

�鍵盤操作方式

�2D和3D繪圖效能�網頁瀏覽器

�影片播放和管理

�複製貼上功能

Page 8: 2012fzagy b f g x O s [v [ j! ]

8

Android的功能演進Android 2.3.4 2011年5月 �新增Open Accessory Library提供對USB

裝置的連線能力

Android 3.1 2011年5月 �提供對USB裝置的連線能力�支援PTP (Picture Transfer Protocol)�新增不同輸入裝置的支援,例如mice, trackballs, joysticks, …�支援RTP (Real-time Transport Protocol)�強化Animation framework、UI framework、Network的能力

Android 3.2 2011年7月 �支援更多型態的平板電腦

�新增應用程式畫面的放大模式

Android 4.0 2011年10月 �適用手機、平板電腦和其它裝置

�改良的操作介面

�針對多核心CPU進行最佳化�強化多媒體處理能力

�新增人臉偵測功能

�新增Android Beam功能(NFC)�加強text-to-speech engine

Page 9: 2012fzagy b f g x O s [v [ j! ]

9

Android平台的特色

雖然PC和Android的系統架構相似,但是二者的使

用在時、地、物等方面都有所不同,手機和平板電

腦小巧玲瓏,隨手就可使用,但缺點是運算能力不

及筆電強大。反觀筆電不僅計算能力強,而且擴充

性較高,因此可以發展出各式各樣的應用,但缺點

是攜帶不便。就是因為這些時、地、物的差別,讓

手機和平板電腦的應用程式可以發展出和筆電不一

樣的特色。

Page 10: 2012fzagy b f g x O s [v [ j! ]

認識 Google App Inventor

� App Inventor是Google實驗室(Google Lab)的一個子

計畫,由一群Google工程師與勇於挑戰的Google使

用者共同參與。

� Google App Inventor是一個完全線上開發的Android程

式環境,拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的Android程式。

� App Inventor 讓您可在網路瀏覽器上來開發Android手

機應用程式,開發完成的程式可下載到實體手機或在模擬器上執行。App Inventor 伺服器會儲存您的工

作進度還會協助您管理專案進度。

10

Page 11: 2012fzagy b f g x O s [v [ j! ]

安裝Google App Inventor開發環境

1。取得及登入Google帳戶->https://mail.google.com

2。安裝電腦的java環境從 ORACLE 官網下載 Java 安裝程式->http://java.com/inc/BrowserRedirect1.jsp?locale=zh_TW

3。安裝Google App Inventor軟體從 Google 下載安裝程式 or 從 moodle下載http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe

4。進入App Inventor 的大門->MIT App Inventor 測試站

http://beta.appinventor.mit.edu/

11

Page 12: 2012fzagy b f g x O s [v [ j! ]

手機程式實作-會叫的貓咪

http://youtu.be/8ADwPLSFeY8https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty12

Page 13: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式實作

幾何面積計算

13

Page 14: 2012fzagy b f g x O s [v [ j! ]

∗ 學習 Basic 各項元件

∗ 學習 Screen Arrangement 各項元件

∗ 學習類元件 Properties 的相關設定

∗ 學習Blocks Editor 操作使用

∗ 學習上傳程式至實體手機

課程單元目標

14

Page 15: 2012fzagy b f g x O s [v [ j! ]

矩形面積-Components

15

Page 16: 2012fzagy b f g x O s [v [ j! ]

矩形面積-Blocks

16

Page 17: 2012fzagy b f g x O s [v [ j! ]

矩形面積-錯誤訊息

17

Page 18: 2012fzagy b f g x O s [v [ j! ]

App Icon

18

Page 19: 2012fzagy b f g x O s [v [ j! ]

任意幾何面積- Components

19

Page 20: 2012fzagy b f g x O s [v [ j! ]

任意幾何面積- Blocks

20

Page 21: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式實作

數字時鐘+搖搖樂

21

Page 22: 2012fzagy b f g x O s [v [ j! ]

課程單元目標

• 學習 Clock 計時器元件

▫ 實作範例: 數位時鐘

• 學習 AccelerometerSensor 加速度感應器元件

▫ 實作範例: 搖搖樂

• 學習 TinyDB微型資料庫元件

• 學習 Notifier 訊息元件

▫ 實作範例:搖搖樂高分紀錄

22

Page 23: 2012fzagy b f g x O s [v [ j! ]

Clock 計時器元件

• Clock 元件主要用途如下:

1. 產生一個計時器(Timer):設定時間區間之後,

計時器就會定期觸發某個事件。

2. 可進行時間的各種運算,並以不同單位來表達時間。

• Clock 使用的內部時間格式稱為 instant。

23

Page 24: 2012fzagy b f g x O s [v [ j! ]

數字時鐘- Components

24

Page 25: 2012fzagy b f g x O s [v [ j! ]

數字時鐘- Blocks

25

Page 26: 2012fzagy b f g x O s [v [ j! ]

AccelerometerSensor 加速度感應器

• AccelerometerSensor 元件可回傳 Android 裝置

上的加速度感應器狀態,並可偵測裝置三個軸向

的晃動狀況。

• 如果裝置面朝上水平靜置時,Z軸加速度值約為

9.8(受地心引力影響)。

• HTC -> 設定 -> 顯示 -> 重力加速度感測器校正

26

Page 27: 2012fzagy b f g x O s [v [ j! ]

加速度感應器- Components

27

Page 28: 2012fzagy b f g x O s [v [ j! ]

加速度感應器- Blocks

28

Page 29: 2012fzagy b f g x O s [v [ j! ]

搖搖樂- Components

29

Page 30: 2012fzagy b f g x O s [v [ j! ]

搖搖樂- Blocks (1/3)

30

Page 31: 2012fzagy b f g x O s [v [ j! ]

搖搖樂- Blocks (2/3)

31

Page 32: 2012fzagy b f g x O s [v [ j! ]

搖搖樂- Blocks (3/3)

32

Page 33: 2012fzagy b f g x O s [v [ j! ]

延伸應用

1. 各類時鐘

2. 碼表、計時器

3. 鬧鐘

4. 計步器

5. 各類手搖相關遊戲

33

Page 34: 2012fzagy b f g x O s [v [ j! ]

TinyDB 微型資料庫元件

• TinyDB 對於應用程式來說是一個永久的資料儲存

器。例如您可以保存遊戲的最高分排行榜,每次玩

遊戲時都可顯示這一筆資料。

• 不同的資料項目是根據標籤(tag)來區別儲存。

34

Page 35: 2012fzagy b f g x O s [v [ j! ]

搖搖樂DB- Components

35

Page 36: 2012fzagy b f g x O s [v [ j! ]

搖搖樂DB- Blocks (1/2)

36

Page 37: 2012fzagy b f g x O s [v [ j! ]

搖搖樂DB-

Blocks (2/2)

37

Page 38: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式實作

定位導航

38

Page 39: 2012fzagy b f g x O s [v [ j! ]

∗學習 LocationSensor 位置感應器元件

∗學習WebViewer 網頁檢視元件

∗學習 ActivityStarter 元件

�實作範例: ActivityStarter-啟動其它服務

�實作範例: 定位導航

課程單元目標

39

Page 40: 2012fzagy b f g x O s [v [ j! ]

∗ LocationSensor元件可提供Android裝置現在的位置,第一優先是使用Android裝置上的GPS,其他定位方法是使用行動基地台或是無線網路來定位。

∗可提供有關位置的資訊,包括經度(longitude)、緯度(latitude)、海拔高度(altitude ,某些裝置可能不支援)和地址。

LocationSensor 位置感應器元件

40

Page 41: 2012fzagy b f g x O s [v [ j! ]

∗ WebViewer元件可提供於APP畫面中嵌入瀏覽器瀏覽網頁。

∗可利用HomeUrl設定元件開啟時的首頁網頁位址。

WebViewer 網頁檢視元件

41

Page 42: 2012fzagy b f g x O s [v [ j! ]

∗ ActivityStarter元件可啟動多種服務。

�呼叫其它App Inventor應用程式

�呼叫攝影機

�啟動網路搜尋

�啟動瀏覽器並連線至指定網址

�啟動郵寄服務並指定郵寄信箱

�顯示指定位置地圖

�播放Youtube video

ActivityStarter 元件

42

Page 43: 2012fzagy b f g x O s [v [ j! ]

ActivityPackage: appinventor.ai_您的帳號.程式名稱

ActivityClass: appinventor.ai_您的帳號.程式名稱.Screen1

呼叫其它App Inventor應用程式

43

Page 44: 2012fzagy b f g x O s [v [ j! ]

Action: android.intent.action.VIEW

DataUri: http://news.google.com.tw

啟動瀏覽器並連線至指定網址

44

Page 45: 2012fzagy b f g x O s [v [ j! ]

啟動郵寄服務並指定郵寄信箱

Action: android.intent.action.VIEW

DataUri: mailto:[email protected]?subject=期末報告&body=快交分組名單45

Page 46: 2012fzagy b f g x O s [v [ j! ]

播放Youtube video

Action: android.intent.action.VIEW

ActivityPackage: com.google.android.youtube

ActivityClass: com.google.android.youtube.PlayerActivityand

DataUri: http://www.youtube.com/watch?v=jGmrobJyKtE

目前無法顯示此圖像。

46

Page 47: 2012fzagy b f g x O s [v [ j! ]

ActivityStarter-Components

47

Page 48: 2012fzagy b f g x O s [v [ j! ]

ActivityStarter-Blocks

48

Page 49: 2012fzagy b f g x O s [v [ j! ]

定位導航-Components

android.intent.action.VIEW

com.google.android.maps.MapsActivity

com.google.android.apps.maps

49

Page 50: 2012fzagy b f g x O s [v [ j! ]

定位導航-Blocks (1/4)

50

Page 51: 2012fzagy b f g x O s [v [ j! ]

定位導航-Blocks (2/4)

51

Page 52: 2012fzagy b f g x O s [v [ j! ]

定位導航-Blocks (3/4)

52

Page 53: 2012fzagy b f g x O s [v [ j! ]

定位導航-Blocks (4/4)

53

Page 54: 2012fzagy b f g x O s [v [ j! ]

∗我的車在哪?

∗路徑軌跡紀錄器∗車隊追蹤器(TinyWebDB, 多台共享資料)

∗男友追蹤器∗ MobileCare 手機保姆

http://android.cool3c.com/article/26321

延伸應用

54

Page 55: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式實作

撥號與簡訊

55

Page 56: 2012fzagy b f g x O s [v [ j! ]

課程單元目標

� 學習 ListPicker選取清單元件

� 學習 PhoneNumberPicker聯絡簿電話號碼

挑選元件

� 學習 PhoneCall撥號元件

� 學習 Texting簡訊元件

� 實作範例: 簡訊與撥號

56

Page 57: 2012fzagy b f g x O s [v [ j! ]

ListPicker 選取清單元件

� 當使用者點選 ListPicker元件時,它會顯示一

串項目讓使用者來選取。

� ListPicker元件的項目可在 Designer 或 Block

Editor 中設定 ElementsFromString 屬性,並

以逗號分隔並排 (例如, choice 1,choice 2,

choice)。

� 或在 Blocks Editor 中將 ListPicker元件的屬性

指定為某個清單內容。

57

Page 58: 2012fzagy b f g x O s [v [ j! ]

PhoneNumberPicker聯絡簿電話號碼挑選元件

� PhoneNumberPicker元件可讓使用者從 Android

裝置通訊錄中選擇某個聯絡人的電話號碼。

� 點選完畢之後,下列屬性就會根據所選擇的聯

絡人自動完成:

ContactName:聯絡人姓名。

PhoneNumber:所選聯絡人的電話號碼。

EmailAddress:所選聯絡人的主要電子郵件信箱。

Picture:聯絡人大頭照,這可以當作 Image 或

ImageSprte元件的 Picture 屬性。

58

Page 59: 2012fzagy b f g x O s [v [ j! ]

PhoneCall 撥號元件

� PhoneCall 元件為一非可視元件,它可向

PhoneNumber 屬性中所設定的電話號碼實際

地打一通電話,這可以在 Designer 或 Block

Editor 中設定。

� 您可以使用 MakePhoneCall 方法來從應用程

式中撥打一通電話。

59

Page 60: 2012fzagy b f g x O s [v [ j! ]

Texting 簡訊元件

� Texting 元件可讓使用者收發簡訊。

� 當呼叫 SendMessage 方法時,Texting元件

會對 PhoneNumber 屬性中所指定的電話號碼

送出一封簡訊(簡訊內容是在Message 屬性

中設定)。

� 除非我們將 ReceivingEnabled 屬性設為false,

不然 Texting元件可以持續接收文字簡訊。當

收到簡訊時,會自動呼叫MessageReceived

事件並回傳寄件人號碼與訊息內容。

60

Page 61: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊- Components

61

Page 62: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊- Blocks (1/5)

62

Page 63: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊- TinyDB

1. Tag:電話號碼-PhoneNumber

Value:

2. Tag: 電話號碼-DateTime

Value:

3. Tag: 電話號碼-Message

Value:

63

Page 64: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊-

Blocks (2/5)

64

Page 65: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊- Blocks (3/5)

65

Page 66: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊-

Blocks (4/5)66

Page 67: 2012fzagy b f g x O s [v [ j! ]

撥號與簡訊-

Blocks (5/5)

67

Page 68: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式應用

行車訊息自動回覆系統

68

Page 69: 2012fzagy b f g x O s [v [ j! ]

行車訊息自動回覆系統- Components

69

Page 70: 2012fzagy b f g x O s [v [ j! ]

行車訊息自動回覆系統- Blocks (1/2)

70

Page 71: 2012fzagy b f g x O s [v [ j! ]

行車訊息自動回覆系統- Blocks (2/2)

我目前所在位置是:

71

Page 72: 2012fzagy b f g x O s [v [ j! ]

App Inventor 程式應用

藍芽搖控自走車

72

Page 73: 2012fzagy b f g x O s [v [ j! ]

藍芽搖控自走車-

Components

73

Page 74: 2012fzagy b f g x O s [v [ j! ]

藍芽搖控自走車- Blocks (1/4)

74

Page 75: 2012fzagy b f g x O s [v [ j! ]

藍芽搖控自走車- Blocks (2/4)

75

Page 76: 2012fzagy b f g x O s [v [ j! ]

藍芽搖控自走車-

Blocks (3/4)

76

Page 77: 2012fzagy b f g x O s [v [ j! ]

藍芽搖控自走車- Blocks (4/4)

77