1. Visual Programming
week # 02
APP (Application) Architecture

2. Outline 1. Steps to create NEW project-app 2.
Tutorial(Class Project) # 02 : Text To
Speech 3.
Homework # 01 4.
APP architecture (chapter 14) 5.
Develop APP (chapter 15)
VP Lecture Note by Dr. Hanh Pham 2

3. STEPS to create a NEW project-app
Start the “aiStarter” program in your computer
Login to the App SERVER using your Google address at:
You’ll get the DESIGN window: where you can add/edit components for the “FACE” of the app.
Click on “Blocks” button in the Design window to open up the BLOCK Editor window: where you can add and connect blocks for the “BRAIN” of your app.
Click on “Connect” button, then “Emulator” to open up the EMULATOR window: where you can TEST your app.
Once the Emulator window is open, wait until it’s ready, you may need to click on “Wait” on a message on the Emulator window
VP Lecture Note by Dr. Hanh Pham 3

4. Tutorial # 02: “SPEAK IT” The PROBLEM (requirements):
• display a textbox, so that user can type a text
• display a button, so that when user click on that
it would speak the words in the text
The DESIGN: •
User interface: as shown in the picture
User actions:
o Type words in the textbox
o Click on the button
APP reactions: speak the words in the text aloud •
INSTRUCTIONS to build APP:
Login to your account at:
Create a new project called “t2_Speak”
VP Lecture Note by Dr. Hanh Pham 4

5. Tutorial # 02: “SPEAK IT” 3) In DESIGN window: 5
VP Lecture Note by Dr. Hanh Pham 5

6. Tutorial # 02: “SPEAK IT”
3) In DESIGN window: 5

7. Tutorial # 02: “SPEAK IT” 5) In Block Editor window:
+ under My Blocks:
click on Button1, and get Button1.Click
click on TextToSpeech1, and get TextToSpeech1.Speak
click on Textbox1, and get Textbox1.Text
6) Plug them
(3 puzzles)
in that order
=> DONE !
VP Lecture Note by Dr. Hanh Pham 6

8. Tutorial # 02: “SPEAK IT” 7) TEST your APP:
+ Type any text, for example: “How are you today”, then
click on button “Speak It”, you should hear the speech
- If you don’t hear the speech, check the volume, and if the
speaker works for other applications/programs ? If the
speaker works for other app but this then go to the first
slide for instrcutions to install TTS component.
+ Add “?” to the end of your text in the textbox “How are
you today ?”, to hear the difference in tone.
VP Lecture Note by Dr. Hanh Pham 7

9. See description, requirements, and deadline at:
Homework #01
See description, requirements, and deadline at:
The PROBLEM:
• Your APP must have a GUI as shown in this picture.
• Use the media files at:
• User can click on each image to see which one has
the right sound of Kitty
• Then, user can type the answer in the textbox and it should speak the text.
VP Lecture Note by Dr. Hanh Pham 8

10. Components in the User interface:
Homework
#01
The DESIGN: •
Components in the User interface:
o 2 labels for instructions
o 3 buttons for 3 images
o a textbox for user to enter text
o a button for user to click on •
User actions:
o Click on each of the 3 images
o Type words in the textbox
o Click on the button “Speak it for me” •
APP reactions:
o may play a sound when an image is clicked o say words in the textbox when the button “Speak it for me” is clicked
VP Lecture Note by Dr. Hanh Pham 9

11. Components in the User interface:
Homework
#01
The DESIGN: •
Components in the User interface:
o 2 labels for instructions
o 3 buttons for 3 images
o a textbox for user to enter text
o a button for user to click on •
User actions:
o Click on each of the 3 images
o Type words in the textbox
o Click on the button “Speak it for me” •
APP reactions:
o may play a sound when an image is clicked o say words in the textbox when the button “Speak it for me” is clicked
VP Lecture Note by Dr. Hanh Pham 10

12. Components in the User interface:
Homework
#01
The DESIGN: •
Components in the User interface:
o 2 labels for instructions
o 3 buttons for 3 images
o a textbox for user to enter text
o a button for user to click on •
User actions:
o Click on each of the 3 images
o Type words in the textbox
o Click on the button “Speak it for me” •
APP reactions:
o may play a sound when an image is clicked o say words in the textbox when the button “Speak it for me” is clicked
VP Lecture Note by Dr. Hanh Pham 11

13. Components in the User interface:
Homework
#01
The DESIGN: •
Components in the User interface:
o 2 labels for instructions
o 3 buttons for 3 images
o a textbox for user to enter text
o a button for user to click on •
User actions:
o Click on each of the 3 images
o Type words in the textbox
o Click on the button “Speak it for me” •
APP reactions:
o may play a sound when an image is clicked o say words in the textbox when the button “Speak it for me” is clicked
VP Lecture Note by Dr. Hanh Pham 12

14. Homework #01 INSTRUCTIONS to build APP: 1) Login to your account at:
Create a new project called “hw1_WhichOne”
In DESIGN window, on the Palette:
 Under “Media” : drag and drop TextToSpeech to the “Viewer”.
 Under “Layout” : drag and drop HorizontalArrangement to the “Viewer”
 Under “Basic”: drag and drop 3 buttons inside the HorizontalArrangement , for each button: upload an image and set “width” to “fill parent”
 Under “Basic”: drag and drop 2 labels, one on top the images “Click on each images to see …” and one below the images “Type your answer here:”
 Under “Basic”: drag and drop a button, change the button text to
“Speak it for me”
Under “Media”: drag and drop a sound, upload a mp3 file for it
(under “source” in Properties column) 2) 3)
VP Lecture Note by Dr. Hanh Pham 13

15. Homework #01 In DESIGN window:
Go to:
To download 3 picture files of the Kitty and the sound file meow.mp3 and then upload them to your project
VP Lecture Note by Dr. Hanh Pham

16. Homework #01
Design window:
VP Lecture Note by Dr. Hanh Pham

17. Homework #01 4) Open Block Editor window :
VP Lecture Note by Dr. Hanh Pham

18. Homework #01 5) Click on "New Emulator“, then "Connect to Device"
& choose "Emulator 5554“ 6)
TEST your APP:
+ Click on EACH image to hear its sound
+ Type your answer in the textbox, for example:
“I think it is the first one”, then click on the button
“Speak It for me”, you should hear the speech
- If you don’t hear the speech, check the volume, and if
the speaker works for other applications/programs ? If
the speaker works for other app but this then go to the
first slide for instrcutions to install TTS component.
VP Lecture Note by Dr. Hanh Pham 17

19. Homework #01 7) MORE IDEAS: DEADLINE:
+ Find/make three different images and sounds and
up load them instead of the provided files
For example: a duck image, a cow image, and a cat
image …
DEADLINE:
See the
Schedule
VP Lecture Note by Dr. Hanh Pham 18

20. VP Lecture Note by Dr. Hanh Pham
Homework #01
WHAT to SUBMIT: you must submit 2 files:
Project File or source code (.ZIP):
 in the DESIGN window, click on “My Projects”
 select the current project, click on “More Actions”
“Download Souce”. You’ll get a file in .ZIP format
and select
Block File or picture of your Block Editor window (.JPG):
 Resize the Block Editor window to make sure that all of your
blocks are visible
 Take a snapshot of that window by HOLDING at the same time
ALT and PTR-SCR buttons on the keyboard
 Open program PAINT(for windows) or PAINTBRUSHH(for Mac)
 Click on Paste, then on SAVE to save it in a file (.JPG format)
VP Lecture Note by Dr. Hanh Pham 19

21. Homework #01 WHERE to SUBMIT ? Go1. 2. 3. 4.
Must submit from a WINDOWS computer
fill-in the form with your name, section#, homework #, file format
make sure the section # is correct, and format is “Project File”
click on “Choose File” to browse and up load your project .ZIP file
described above and click on “Submit your file”
you should get a receipt page. Save the receipt page
go “BACK”
change the format to “Picture of Block Editor”
click on “Choose File” to browse and up load your picture .JPG file 5. 6. 7. 8. 9.
Double check your 2 receipts to make sure that you submitted 2 different files
( a .ZIP and a .JPG file).
VP Lecture Note by Dr. Hanh Pham 20

22. APP architecture
 APP = a program (or software or code), which runs/executes on a computer-like
system like a smartphone to do a given task
 User Interface (GUI) = what the user can see and interact with
 Component = button, textbox, sound, image, … (see DESIGN window)
 Behavior = how APP reacts to different situations 
Event
Response
Event Handler
 Variable = a location in the computer/phone memory,
program APP execution
to store data during a
 Procedure/Function = pre-built programs, in this case:
task. We can CALL a function to reuse its code.
related blocks, for a given
VP Lecture Note by Dr. Hanh Pham 21

23. APP architecture APP or Program User App Engine : Variables
(GUI) or
Program
User
App Engine
Color=RED
Size=3
: Variables
Textbox, Button … : Components
: Events
TextToSpeech
: Procedures
VP Lecture Note by Dr. Hanh Pham 22

24. APP architecture
 Components = button, textbox, sound, image, … (see DESIGN window)
VP Lecture Note by Dr. Hanh Pham

25. APP architecture Event = click on a button, phone moves, …
Event Handler : -
Reactions or
response to an
event
as a recipe
(a set of steps) -
APP = set of Event
Handlers
VP Lecture Note by Dr. Hanh Pham 24

26. APP architecture
 Event Handlers = build/organize them in the Block Editor window:
VP Lecture Note by Dr. Hanh Pham

27. APP architecture TYPE of Events: User-initiated events
User-initiated events 
Initialization events 
Timer events 
Animation events 
External events
VP Lecture Note by Dr. Hanh Pham 26

28. APP architecture Event HANDLER can: Remember things (using
Remember things (using
VARIABLEs and DATABASE) 
Ask questions (using CONDITIONAL BLOCKs) 
Repeat actions (using LOOPs: “foreach do …” or
“while … do
…”) 
Talk to WEB (send request to web service API)
VP Lecture Note by Dr. Hanh Pham 27

29. APP
architecture
VP Lecture Note by Dr. Hanh Pham 28

30. APP architecture INTERACTIONS between an APP and: User Web(other
User 
Web(other
computers …) 
Other Phones 
Local Devices:
o Sensors
o Clock
o …
VP Lecture Note by Dr. Hanh Pham 29

31. APP development Problem Requirements Design Build Code (INCREMENTAL)
Debug (Modify)
Test
Package (make Executable Code + Document)
Maintain (+Update)
VP Lecture Note by Dr. Hanh Pham 30

32. 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 31