App Inventor

1. App Inventor 建國科技大學 資管系 饒瑞佶 2010/10

2. App Inventor • Google發展 • 可應用瀏覽器建立一個AndroidAPP • UI設計 • 使用拼圖定義程式行為

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

4. 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.

5. App Inventor－ Java test page

6. App Inventor－ Java Web Start Demos

7. App Inventor－ Java Web Start Demos 如果看的到，代表JAVA沒問題

8. 安裝App Inventor • App Inventor Setup • http://appinventor.googlelabs.com/learn/setup/setupwindows.html • 安裝項目： • 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 • Installing the Windows drivers for your Android phone

9. 安裝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

10. 安裝App Inventor 1

11. 安裝App Inventor 2 請記得安裝路徑 C:\Program Files\AppInventor\commands-for-Appinventor

12. 安裝App Inventor 3

13. 安裝App Inventor

14. 安裝App Inventor

15. 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

16. Building your first app with the emulator (Part 1)using Inventor: Hello Purr http://appinventor.googlelabs.com/learn/setup/hellopurr/hellopurremulatorpart1.html

17. 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

18. 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.

19. 步驟I：start the Designer and create a new project 到http://appinventor.googlelabs.com 請先登入 如果沒有請註冊

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

21. 步驟I：start the Designer and create a new project 第一次進入App Inventor

22. 步驟I：start the Designer and create a new project Create a new project 1 輸入HelloPurr 2 3

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

24. 步驟I：start the Designer and create a new project Drag and drop the Button component to Screen1. The Button component is located under Palette. Click on Button1 listed under Components. In the list of properties, under image, click on none... Click add. Upload the the kitty.png file. Delete Text for Button1 listed under the Text property.

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

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

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

28. 步驟II：Block Editor to assign behaviors to your components 開啟Block Editor

29. 步驟II：Block Editor

30. 步驟II：Block Editor

31. 步驟II：Block Editor 請稍待數分鐘

32. 步驟II：Block Editor 把綠色鑰匙往右拖 請選ok

33. 步驟II：Block Editor

34. 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.

35. Building your first app (Part 2): Completing HelloPurr

36. Building your first app (Part 2): Completing HelloPurr

37. Building your first app (Part 2): Completing HelloPurr 請選kitty.wav

38. Building your first app (Part 2): Completing HelloPurr IE上傳 *.mp3會有問題

39. Building your first app (Part 2): Completing HelloPurr

40. Building your first app (Part 2): Completing HelloPurr

41. Building your first app (Part 2): Completing HelloPurr

42. Building your first app (Part 2): Completing HelloPurr

43. Building your first app (Part 2): Completing HelloPurr

44. Building your first app (Part 2): Completing HelloPurr

45. Building your first app (Part 2): Completing HelloPurr 按一下會聽到貓叫

46. Building your first app (Part 2): Completing HelloPurr

47. Package for Phone －HelloPurr

48. Building your first app (Part 2): Completing HelloPurr

49. Building your first app (Part 2): Completing HelloPurr

50. Building your first app (Part 2): Completing HelloPurr 似乎有點問題???