教育部國民及學前教育署補助高級中等學校精進優質計畫

Presentation on theme: "教育部國民及學前教育署補助高級中等學校精進優質計畫"— Presentation transcript:

1 教育部國民及學前教育署補助高級中等學校精進優質計畫
「創意手機APP程式設計」 自編教材

2 目錄 第一部分：Android平台與App Inventor 第二部分：App Inventor基礎設計

3 第一部分 Android平台與App Inventor

4 App Inventor簡介 MIT, 2010/12/15發佈，Google讚助 主要用途：開發Android App, NXT
是一種視覺化程式設計語言. 目前版本仍為Beta. Google開發團隊已退出. 不需要任何程式語言基礎. 要與Android原開發工具所互相搭配開.

5 視覺化程式設計語言 Visual Programming Language (VPL)
App Inventor, Scratch, LEGO Mindstorms NXT

6 Other VPL

7 Android開發工具 Java + Android SDK (原生開發工具) 整合性開發工具(IDE) Eclipse
Android Studio (Beta) 3rd Party： Adobe CS6 (Flash Base) PhoneGap + HTML5 Xamarin (.Net架構下開發Android/iOS app)

8 使用App Inventor開發程式 Google 帳號 JRE(Java Runtime Environment )
Design Block Editor

9 建立新專案

10 專案編輯畫面，按Learn

11 1.1 What is App Inventor Lets you develop applications for Android phones using a web browser and either a connected phone or emulator. The servers store your projects. The App Inventor Designer: select the components for app. The App Inventor Blocks Editor: assemble program blocks that specify how the components should behave

12 1.2 Setup: System requirements
Computer and operating system Windows: Windows XP, Windows Vista, Windows 7 GNU/Linux: Ubuntu 8+, Debian 5+ Macintosh (with Intel processor): Mac OS X 10.5, 10.6 Browser Google Chrome 4.0 or higher Microsoft Internet Explorer 7 or higher Mozilla Firefox 3.6 or higher Apple Safari 5.0 or higher

13 1.3 Setup: Test your Java configuration
Java下載： Test your Java configuration (1) Visit the Java test page . You should see a message that Java is working and that the version is Java SE 7 Update 05

14 Setup: Test your Java configuration
(2) Run the AppInventor Java test by clicking on this link . This will check that your browser is properly configured to run Java, and that your computer can launch applications with Java Web Start.

15 1.4 Install the App Inventor Setup Software(Don’t need)
Before you can use App Inventor, you need to install a package called App Inventor Setup . Instructions for Windows AppInventor_Setup_Installer_v_1_2.exe (~92 MB) Instructions for GNU/Linux Instructions for Mac OS X

16 1.5 測試Open the Blocks Editor

17 第二部分 App Inventor基礎設計

18 2. Hello World!

19 加入Textbox元件，可供輸入

20 加入Button元件 (送出之按鈕)

21 加入Label元件 (顯示結果)

22 Open Blocks Editor，選My Blocks頁籤

23 程式

24 按New Emulator開啟模擬器，解鎖

25 按Connect to Device，選模擬器

26 執行結果

27 Connect to Device WiFi App Inventor執行的結果透過WiFi顯示在手機上 手機IP與PC’s IP要同個網段
MIT AICompanion App

28 MIT AICompanion App

29 3. Hello Purr!

30 資源下載 Download kitty picture Download Meow sound

31 加入sound元件 What is this?

32 程式碼及執行模擬畫面

33 4. 在手機進行測試： 先用USB線將手機連至電腦

34 分享1：將APP程式下載至USB連線手機

35 分享2：將APP程式轉成apk檔

36 第三部分 App Inventor進階設計

37 Package for Phone Show Barcode Download to this Computer
Google Account Login QR Code Scanner Download to this Computer Download to Connected Phone

38 Ping Pong Game 官方教學網站： http://appinventor.mit.edu/explore/teach.html
其他教學網站：

39 Ping Pong Game (1/14) 新增一個Label及設定屬性

40 Ping Pong Game (2/14) 加入StartButton 加入RestButton 加入水平排列元件 所有元件擺放如下圖

41 Ping Pong Game (3/14) 加入Canvas, 大小為300*390
加入Ball和ImageSprite( 圖檔為paddle.gif)

42 Ping Pong Game (4/14) 當手接觸到Canvas時系統會呼叫Cavas1.Touched函數，且傳入3個參數，分別是：x, y, tochedSprite(可以在My Definition中看到). imageSprite1元件只移動x軸.

43 Ping Pong Game (5/14) 當Ball1的邊沿接觸物體時，系統呼叫Ball1.EdgeReached函數，讓球反彈。

44 Ping Pong Game (6/14) Canvas元件的屬性edge, Top = 1 Right = 3 Bottom = -1
Left = -3

45 Ping Pong Game (7/14) 當按下「開始」時(StartButton.click)讓球往Random的方向跑.

46 Ping Pong Game (8/14) Random integer：255~315 Speed：５
Ball1.MoveTo：x座標螢幕的中，y座標為球的半徑.

47 Ping Pong Game (9/14) 加入Ball1.Enabled = true在開始的按鈕中(Run).

48 Ping Pong Game (10/14) 球的邊界處理：球掉到螢幕下方，分數則顯示「Game Over!」.

49 Ping Pong Game (11/14) 定義全域變數並設初始值，score = 0
定義一個函數，可傳入一個參數scorevalue, 函數被叫用時作：改變score的值及更新ScoreLable.Text的值如下圖.

50 Ping Pong Game (12/14) 按下開始按鈕的最下行，加入呼叫自定函數updatScore, 更新分數為0.

51 Ping Pong Game (13/14) 處理球打到板子：毎打到板子一次加１分，球反彈的方向「入射角＝反射角」.(Run) 球要打誰

52 Ping Pong Game (14/14) RestButton：回到原點(Run). 打包至手機執行.

53 自我挑戰 加入磚塊 改變球的速度及球體的大小 加入聲音

54 學習目標 Designer, blocks editor, emulator and/or physical phone.
Canvas, buttons, labels, animation sprites, procedures with no parameters, global variables, and conditionals. Download

55 Exercise

56 App Inventor Activity

57 Outline Using the Activity Starter
Starting Another App Inventor Application from your App Inventor App Starting a Built-in Phone Application from your App Inventor App Start Application Only Use Package Name (Android)

58 Using the Activity Starter (1/3)
Activity是Android具有UI的基本程式. 若要從一個Activity啟動另一個Activity： Android叫作StartActivity. App Inventor叫作Activity Starter.

59 Using the Activity Starter (2/3)
不論是Android及App Inventor啟動另一個Activity的觀念都是相同，有2種模式：在結束後有回傳值及沒有回傳值。

60 Using the Activity Starter (3/3)
Android中的作法：Activity_A to Activity_B StartActivity(intent) Activity_B Activity_A Activity_A StartActivityForResult(intent, reqCode); … onActivityResult(intent, reqCpde, RespCode){ } Activity_B

61 Starting Another App Inventor Application from your App Inventor App
下載Source Code在電腦中 解壓縮後在目錄夾中找尋：youngandroidproject/project.properties 在第一行中可看到： 在ActivityStarter屬性中填入： 呼叫ActivityStarter.StartActivity 開發者使用的Google帳號

62 Exercise Hello啟動HelloPurr

63 結論 若要呼叫的另一個Activity為自已開發的程式，改用多個Screen的方式來作，將簡單許多.

64 Starting a Built-in Phone Application from your App Inventor App (1/3)
在ActivityStarter屬性中填入：

65 Starting a Built-in Phone Application from your App Inventor App (2/3)
開啟Google Map, 指定經緯度： 萬能科技大學經緯： , Action: android.intent.action.VIEW DataUri: geo: , ?z=23 查詢經緯度的網頁：

66 Starting a Built-in Phone Application from your App Inventor App (3/3)
播放YouTube上的影片： Action: android.intent.action.VIEW  DataUri:

67 Start Application Only Use Package Name (Android)
Download Android System Info Android Code Package Name