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

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

第一部分 Android平台與App Inventor

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

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

Other VPL http://readwrite.com/2013/04/19/how-to-raise-the-next-zuck-6-coding-apps-for-kids#awesm=~o90tZ6PxP78lWn

Android開發工具 Java + Android SDK (原生開發工具) 整合性開發工具(IDE) Eclipse Android Studio (Beta) 3rd Party： Adobe CS6 (Flash Base) PhoneGap + HTML5 Xamarin (.Net架構下開發Android/iOS app) http://www.dotblogs.com.tw/franma/archive/2013/04/22/102115.aspx

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

建立新專案

專案編輯畫面，按Learn

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

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

1.3 Setup: Test your Java configuration Java下載：www.java.com . 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

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.

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

1.5 測試Open the Blocks Editor

第二部分 App Inventor基礎設計

2. Hello World!

加入Textbox元件，可供輸入

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

加入Label元件 (顯示結果)

Open Blocks Editor，選My Blocks頁籤

程式

按New Emulator開啟模擬器，解鎖

按Connect to Device，選模擬器

執行結果

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

MIT AICompanion App

3. Hello Purr!

資源下載 http://beta.appinventor.mit.edu/learn/setup/hellopurr/hellopurrphonepart1.html Download kitty picture Download Meow sound

加入sound元件 What is this?

程式碼及執行模擬畫面

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

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

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

第三部分 App Inventor進階設計

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

Ping Pong Game 官方教學網站： http://appinventor.mit.edu/explore/teach.html http://appinventor.mit.edu/explore/teach/pong.html 其他教學網站： http://www.appinventor.tw/ https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/home

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學習目標 Designer, blocks editor, emulator and/or physical phone. Canvas, buttons, labels, animation sprites, procedures with no parameters, global variables, and conditionals. Download http://appinventor.mit.edu/explore/media-library.html

Exercise http://www.sinc.sunysb.edu/Stu/xissun/CSE_391_Demo/App_Inventor.html

App Inventor Activity

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)

Using the Activity Starter (1/3) Activity是Android具有UI的基本程式. 若要從一個Activity啟動另一個Activity： Android叫作StartActivity. App Inventor叫作Activity Starter. http://appinventor.mit.edu/explore/content/using-activity-starter.html

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

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

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

Exercise Hello啟動HelloPurr

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

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

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

Starting a Built-in Phone Application from your App Inventor App (3/3) 播放YouTube上的影片： Action: android.intent.action.VIEW  DataUri: https://www.youtube.com/watch?v=W7WlG_LX7oU

Start Application Only Use Package Name (Android) Download Android System Info http://www.appsapk.com/android-system-info/ Android Code Package Name