Visual Programming week # 02 APP (Application) Architecture

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

STEPS to create a NEW project-app Start the “aiStarter” program in your computer Login to the App SERVER using your Google email address at: http://ai2.appinventor.mit.edu 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

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: http://ai2.appinventor.mit.edu Create a new project called “t2_Speak” VP Lecture Note by Dr. Hanh Pham 4

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

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

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

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

See description, requirements, and deadline at: Homework #01 See description, requirements, and deadline at: http://cs.newpaltz.edu/~phamh/avp/ The PROBLEM: • Your APP must have a GUI as shown in this picture. • Use the media files at: http://cs.newpaltz.edu/~phamh/avp/Homework/hw01/ • 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

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

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

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

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

Homework #01 INSTRUCTIONS to build APP: 1) Login to your account at: http://ai2.appinventor.mit.edu 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

Homework #01 In DESIGN window: Go to: http://cs.newpaltz.edu/~phamh/avp/Homework/hw01/ 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 14

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

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

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

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

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

Homework #01 WHERE to SUBMIT ? Go 1. 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

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

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

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

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

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

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

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

APP architecture VP Lecture Note by Dr. Hanh Pham 28

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

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

References These slides contain materials from many sources including the following: • http://www.appinventor.org http://appinventor.mit.edu “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