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.
2.
3.
4.
Mozilla Firefox 3.6 or higher
Apple Safari 5.0 or higher
Google Chrome 4.0 or higher
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.e
xe
• 安裝appinventor_setup_installer_v_1_1.exe
安裝App Inventor
1
安裝App Inventor
2
請記得安裝路徑
C:\Program Files\AppInventor\commands-for-Appinventor
安裝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/tutoria
ls/hellopurr/HelloPurrAssets/kitty.png
• 貓聲：
http://appinventor.googlelabs.com/learn/tutoria
ls/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
輸入HelloPurr
2
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