app inventor 建國科技大學 資管系 饒瑞佶 2010/10. app inventor google 發展...

App Inventor

建國科技大學 資管系饒瑞佶2010/10

App Inventor

• Google 發展• 可應用瀏覽器建立一個 Android APP• UI 設計• 使用拼圖定義程式行為

App Inventor

System requirements: • Computer and operating system

1. Macintosh (with Intel processor): Mac OS X 10.5, 10.6 2. Windows: Windows XP, Windows Vista, Windows 7 3. GNU/Linux: Ubuntu 8+, Debian 5+

• Browser 1. Mozilla Firefox 3.6 or higher 2. Apple Safari 5.0 or higher 3. Google Chrome 4.0 or higher 4. Microsoft Internet Explorer 7 or higher

App Inventor

Test your Java configuration • Your computer needs to run Java 6 (also known as Java 1.6)• Visit the Java test page. You should see a message that Java is

working and that the version is Java 1.6. • Visit the Java Web Start Demos page and click on a demo,

e.g., Draw. The Java Web Start application will start and download the demo. Your browser should start it automatically. You may need to tell your computer to run the downloaded program with Java Web Start and give the program permission to run. You may also need to configure your browser to open jnlp files.

App Inventor － Java test page

App Inventor － Java Web Start Demos

App Inventor － Java Web Start Demos

如果看的到，代表 JAVA沒問題

安裝 App Inventor

• App Inventor Setup• http://appinventor.googlelabs.com/learn/setup/

setupwindows.html• 安裝項目：

1. Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP, Vista, and 7

2. Installing the Windows drivers for your Android phone

安裝 App Inventor

• 下載 App Inventor• http://dl.google.com/dl/appinventor/installers/

windows/appinventor_setup_installer_v_1_1.exe

• 安裝 appinventor_setup_installer_v_1_1.exe

安裝 App Inventor

1

安裝 App Inventor

請記得安裝路徑C:\Program Files\AppInventor\commands-for-Appinventor

2

安裝 App Inventor

3

安裝 App Inventor

安裝 App Inventor

Phone drivers

The App Inventor Setup software includes drivers for these common Android phones: • T-Mobile G1* / ADP1 • T-Mobile myTouch 3G* / Google Ion / ADP2 • Verizon Droid* • Nexus One

* and similar hardware from other carriers

Building your first app with the emulator (Part 1) using Inventor: Hello Purr

http://appinventor.googlelabs.com/learn/setup/hellopurr/hellopurremulatorpart1.html

Building your first app with the emulator (Part 1) using Inventor: Hello Purr

需要 : • 貓圖： http://appinventor.googlelabs.com/

learn/tutorials/hellopurr/HelloPurrAssets/kitty.png

• 貓聲： http://appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3

Building your first app with the emulator (Part 1) using Inventor: Hello Purr

three key tools of App Inventor work: • The Designer, the place were you design your

app. It runs in your web browser. • The Blocks Editor, the place were you set the

behavior of the app. It is a separate application with its own window.

• The emulator, a virtual mobile device that runs on your computer along side App Inventor.

步驟 I ： start the Designer and create a new project

到 http://appinventor.googlelabs.com

請先登入如果沒有請註冊

步驟 I ： start the Designer and create a new project

步驟 I ： start the Designer and create a new project

第一次進入 App Inventor

步驟 I ： start the Designer and create a new project

Create a new project

1

2輸入 HelloPurr

3

步驟 I ： start the Designer and create a new project

步驟 I ： start the Designer and create a new project

1. Drag and drop the Button component to Screen1. The Button component is located under Palette.

2. Click on Button1 listed under Components. 3. In the list of properties, under image, click on

none... 4. Click add. 5. Upload the the kitty.png file. 6. Delete Text for Button1 listed under the Text

property.

步驟 I ： start the Designer and create a new project

步驟 I ： start the Designer and create a new project

步驟 I ： start the Designer and create a new project

步驟 II ： Block Editor to assign behaviors to your components

開啟 Block Editor

步驟 II ： Block Editor

步驟 II ： Block Editor

步驟 II ： Block Editor

請稍待數分鐘

步驟 II ： Block Editor

請選 ok

把綠色鑰匙往右拖

步驟 II ： Block Editor

Building your first app (Part 2): Completing HelloPurr

In the Designer: • Add a Label component that reads "Pet the

Kitty". • Upload the meow.mp3 file • Add a Sound component that plays the

meow.mp3 file. In the Blocks Editor: • Create an event handler that tells the Sound

component to play when the user taps the button.

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

請選 kitty.wav

Building your first app (Part 2): Completing HelloPurr

IE 上傳 *.mp3 會有問題

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

按一下會聽到貓叫

Building your first app (Part 2): Completing HelloPurr

Package for Phone － HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

似乎有點問題 ???

Building your first app (Part 2): Completing HelloPurr

I had this same problem when using Microsoft IE. When I used Firefox there was no problem.

Building your first app (Part 2): Completing HelloPurr

Microsoft IE 確實有問題

Building your first app (Part 2): Completing HelloPurr

Microsoft IE 確實有問題

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

Building your first app (Part 2): Completing HelloPurr

http://v.youku.com/v_show/id_XMTg5MjAwOTQ4.html