1. Visual Programming week # 01
Tutorial #01: Hello Purr

2. VP Lecture Note by Dr. Hanh Pham
Outlines
Requirements (PROBLEM)
LOGIN to your account at
and create a NEW project/app
Open EMULATOR window
Add components in DESIGN window
Build and Link blocks in BLOCK Editor window
TEST the app using EMULATOR window
Save, Download and Submit your app/project
VP Lecture Note by Dr. Hanh Pham

3. 1. The FISRT app: “Hello Purr”
After:
creating your APP INVENTOR account
Set up your computer
Let’s do our first project “Hello Purr” !
The PROBLEM (requirements):
LOOKS: display a kitty picture and a note
FUNCTIONS: (user actions and app reactions)
react to each click on the Kitty picture
with a “Meow” sound
VP Lecture Note by Dr. Hanh Pham

4. 1. First Project: “Hello Purr”
The DESIGN:
How the graphical user interface (GUI)
should looks ?
What actions users can make ?
What reactions the app should have
(accordingly to each user action)
In this project:
the GUI should have a kitty picture
and a text “Pet the Kitty” as instruction
user action is to click on the picture
app reaction is to play “Meow” sound
VP Lecture Note by Dr. Hanh Pham

5. VP Lecture Note by Dr. Hanh Pham
2. LOGIN
LOGIN to your account at
CREATE a NEW project: click on “New Project”
VP Lecture Note by Dr. Hanh Pham

6. VP Lecture Note by Dr. Hanh Pham
DESIGN window
VP Lecture Note by Dr. Hanh Pham

7. VP Lecture Note by Dr. Hanh Pham
3. Open EMULATOR window
Open EMULATOR window: Click on “Connect” and then select “Emulator”
VP Lecture Note by Dr. Hanh Pham

8. VP Lecture Note by Dr. Hanh Pham
Open EMULATOR window
VP Lecture Note by Dr. Hanh Pham

9. 4. ADD components in DESIGN window
Add a BUTTON component: click on “Button” on the left and drag it onto Screen1
VP Lecture Note by Dr. Hanh Pham

10. 4. ADD components in DESIGN window
Download the kitty PICTURE “kitty.png” file from: Upload it to THIS project:
VP Lecture Note by Dr. Hanh Pham

11. 4. ADD components in DESIGN window
After uploading kitty PICTURE “kitty.png” and set it as the image for the button:
VP Lecture Note by Dr. Hanh Pham

12. 4. ADD components in DESIGN window
Download the kitty SOUND “meow.mp3” file from: Upload this file to THIS project:
VP Lecture Note by Dr. Hanh Pham

13. 4. ADD components in DESIGN window
Download the kitty SOUND “meow.mp3” file from: Upload this file to THIS project:
VP Lecture Note by Dr. Hanh Pham

14. 4. ADD components in DESIGN window
Clear the TEXT in the text field of the BUTTON:
VP Lecture Note by Dr. Hanh Pham

15. 4. ADD components in DESIGN window
Change the title of the SCREEN:
VP Lecture Note by Dr. Hanh Pham

16. 4. ADD components in DESIGN window
Add a LABEL component: click on “Label” on the left and drag it onto Screen1 :
VP Lecture Note by Dr. Hanh Pham

17. 4. ADD components in DESIGN window
Change the text and the background color of the LABEL:
VP Lecture Note by Dr. Hanh Pham

18. 4. ADD components in DESIGN window
Add SOUND component: click on “Media” then click and drag “Sound” onto Screen1
VP Lecture Note by Dr. Hanh Pham

19. 4. ADD components in DESIGN window
Specify the SOURCE for the SOUND component: click on “Source” then select “meow.mp3” and click on OK
VP Lecture Note by Dr. Hanh Pham

20. VP Lecture Note by Dr. Hanh Pham
5. BLOCK Editor window
To OPEN the BLOCK Editor window: click on the “Blocks” tab (at right corner)
VP Lecture Note by Dr. Hanh Pham

21. VP Lecture Note by Dr. Hanh Pham
5. BLOCK Editor window
Get BLOCKS for the “BRAIN” of the app: (implement this mechanism) ::: Meow sound will be playing WHEN the Kitty (button) is clicked
VP Lecture Note by Dr. Hanh Pham

22. VP Lecture Note by Dr. Hanh Pham
5. BLOCK Editor window
Then, we have our FIRST block for this mechanism ::: Meow sound will be playing WHEN the Kitty (button) is clicked
VP Lecture Note by Dr. Hanh Pham

23. VP Lecture Note by Dr. Hanh Pham
5. BLOCK Editor window
Next, we have to get our SECOND block for this mechanism ::: Meow sound will be playing WHEN the Kitty (button) is clicked
VP Lecture Note by Dr. Hanh Pham

24. 6. TEST app using the EMULATOR window
You can TEST your app (to see if it works as required) ONLY via the EMULATOR window: Test the LOOK: See if the Emulator window looks like the app requirements ? Test the BRAIN (or functions): Click on the Kitty picture to see if you can hear the sound Meow ?
VP Lecture Note by Dr. Hanh Pham

25. VP Lecture Note by Dr. Hanh Pham
7. Save, Download, Submit
After successful tests or want to record changes (on the COULD):
SAVE: click on “Project” then select “Save Project”
SEE ALL apps in your account: click on “Project” then select “My Projects”
To store a copy of a project in your PC:
DOWNLOAD: Under “My Projects” select the project/app you like to download, then click on “Project” then select “Export Project” and it will download a file “X.aia” to your computer, where X is the name of your project.
VP Lecture Note by Dr. Hanh Pham

26. VP Lecture Note by Dr. Hanh Pham
7. Save, Download, Submit
To submit your project (as a homework, exam, or final project) for grading:
SUBMIT: go to
Fill the form (specify your name and assignment type) and click on “Browse” button to select your SOURCE code file (this is the one you downloaded from your Google account) “X.AIA”.
Check to make sure all fill-in info and the file are CORRECT then click on “Submit File” button.
More instructions will be given LATER
VP Lecture Note by Dr. Hanh Pham

27. At Home : Build your own APP “…”
Design & Build an APP similar to the
“Hello Purr” APP using its instructions at:
The PROBLEM (requirements):
find from the Internet
or take a picture X(.png/.jpeg) and record a sound Y(mp3)
display the picture X
react to each click on the picture with a sound Y
(*) the picture and sound must be appropriate
no porn and no offending items
Examples of Ideas:
picture of a duck and a “quack” sound
picture of a car and sound of an engine
picture of a laughing face and sound of a big laugh
picture of a favorite thing and a favorite song …
VP Lecture Note by Dr. Hanh Pham

28. VP Lecture Note by Dr. Hanh Pham
References
These slides contain materials from many sources including the following:
“App Inventor: Create Your Own Android Apps” by David Wolber, Hal Abelson, Ellen Spertus, Liz Looney, Publisher: O'Reilly
App Inventor for Android: Build Your Own Apps - No Experience Required, Jason Tyler
VP Lecture Note by Dr. Hanh Pham