Visual Programming week # 01 Tutorial #01: Hello Purr

VP Lecture Note by Dr. Hanh Pham Outlines Requirements (PROBLEM) LOGIN to your account at http://ai2.appinventor.mit.edu 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

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

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

VP Lecture Note by Dr. Hanh Pham 2. LOGIN LOGIN to your account at http://ai2.appinventor.mit.edu CREATE a NEW project: click on “New Project” VP Lecture Note by Dr. Hanh Pham

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

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

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

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

4. ADD components in DESIGN window Download the kitty PICTURE “kitty.png” file from: http://cs.newpaltz.edu/~phamh/avp/Homework/hw01/ Upload it to THIS project: VP Lecture Note by Dr. Hanh Pham

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

4. ADD components in DESIGN window Download the kitty SOUND “meow.mp3” file from: http://cs.newpaltz.edu/~phamh/avp/Homework/hw01/ Upload this file to THIS project: VP Lecture Note by Dr. Hanh Pham

4. ADD components in DESIGN window Download the kitty SOUND “meow.mp3” file from: http://cs.newpaltz.edu/~phamh/avp/Homework/hw01/ Upload this file to THIS project: VP Lecture Note by Dr. Hanh Pham

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

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

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

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

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

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

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

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

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

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

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

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

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 http://cs.newpaltz.edu/~phamh/avp/sub/ 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

At Home : Build your own APP “…” Design & Build an APP similar to the “Hello Purr” APP using its instructions at: http://www.appinventor.org/Chapter1 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

VP Lecture Note by Dr. Hanh Pham 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