1. Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop

2. Overview Session SA-0

3. Workshop Expectations This workshop is designed to introduce programming concepts through the use of the intuitive programming environment called App Inventor. Each of the seven App Inventor sessions will focus on one or more of these concepts. Throughout the workshop, there will be a chance for you to use your new skills to create teaching aids for your subject while introducing programming concepts to your students.

4. App Inventor Overview Created by Google and released to the public in Dec. 2010 (called App Inventor for Android) Maintained by MIT since Dec. 2011 100% GUI based programming environment for Android Object-oriented Multi-threaded Runs on Windows, Mac OS X, GNU/Linux May use Android Emulator or an Android Phone Free!

5. App Inventor Getting Started You must first create (are already have) a Google account. The appropriate software (App Inventor and Emulator) needs to be installed. Instructions for this will be provided. For the workshop, a Google account for each of you has already been created and the software needed has been installed. To launch App Inventor, double click on the App Inventor icon on your desktop. Next click the Invent button. This will launch your browser and load the My Project view of the App Inventor Designer. From the My Project view you may create a new project or select from previously saved projects.

6. App Inventor Home page http://www.appinventor.mit.edu http://www.appinventor.mit.edu Click Invent to launch

7. App Inventor Layout App Inventor consists of 3 components (windows) used for programming – shown in next slide Component Designer Blocks Editor Android Emulator or Phone Using these 3 components: You can select the “objects” ( a button, text box, label… ) of your design and add them to your program Design how the objects interact with one another and the user. And then run your program on the Emulator or a physical Android phone

8. App Inventor Layout

9. Designer Interface The Views - My Projects, Design, Debugging, (Learn) The Designer interface consists of three views. My Projects, Design and Debugging. Learn launches a reference webpage. You may switch between the three views by clicking the circled selections below.

10. Designer Interface The Views - My Projects, Design, Debugging, Learn When My Projects is clicked the view changes to show the projects you have previously saved and allows for switching from on project to another. Simply click on the project you wish to use. The project (programs) are saved on the Google App Inventor Server. So any programs that you have saved will be available from any computer where App Inventor is installed once you log into your Google account. You may also save your programs to a file on your computer (or USB drive). The programs (projects) are saved to a single project “zip” file in the location you specify. These project files then can “up loaded” or emailed to other users. If Design is selected, the Designer Interface view is displayed. Learn launches another browser window that provides links to tutorials, references, Frequently Asked Questions (FAQs) and setup instructions for the App Inventor. The (Debugging) view is not covered in this workshop.

11. Designer Interface The Views The Designer interface can display 3 views. The main view is the Design view and it is the view you will see when you first start the App Inventor. The Palette section contains a list of all the objects that you can select for use in your program. The Viewer section displays the screen area of where you can place objects. This provides an interactive view of how the Android screen will look when ran. The Components section displays the object of you program in a hierarchal (tree) manner. You can select an object either from the Viewer or Components section. The Properties section displays the information (and allows for modification) of the currently selected object.

12. Designer Interface My Projects View The view shown below is displayed when My Projects is clicked. From here you can switch projects, create a new project or delete projects. You may also save your projects (a zip file) to your computer using the Download Source menu selection. To retrieve a project saved on your computer (or USB drive), use the Upload Source menu selection. The projects listed are projects that have been saved to the App Inventor Server (online). Saving projects is covered next.

13. Designer Interface Save, Save As, Check Point, Add Screen, Remove Screen Also available in the Designer are Save, Save As, Checkpoint, Add Screen and Remove Screen selections. (circled below)

14. Designer Interface Save, Save As, Check Point, Add Screen, Remove Screen To save your projects (to the server online), click Save or Save As. Save As will prompt you for a project name with a suggested name which you may change. Save will save your project using the current name. You saved projects will be listed in the My Project view as shown earlier. You can use the Check Point selection to save you project at different “points” or “times” in your program design and development. These can be used to recover or restore to a early time in the development. The larger or more complex your project becomes the more valuable this becomes. Add Screen and Remove Screen do exactly as they say. If your program design calls for a 2 nd Screen then click Add Screen and another screen will be created in the Viewer for use in your design.

15. Designer Interface Design View - Sections Shown below (circled) are the four Sections of the Design view. Palette, Viewer, Components (with Media), Properties

16. Designer Interface Design View The Designer interface is divided into four sections: (from left to right - Palette, Viewer, Components, Properties) as shown in previous slide. The Palette section contains a list of all the objects that you can select for use in your program. The Viewer section displays the screen area of where you can place objects. This provides an interactive view of how the Android screen will look when ran. The Components section displays the object of you program in a hierarchal (tree) manner. You can select an object either from the Viewer or Components section. The Properties section displays the information (and allows for modification) of the currently selected object.

17. Designer Interface Palette Section The Palette is the left most section and contains the objects that you may add to your project. The objects are grouped in the Palette ( Basic, Media, Animation, Social, etc ). Click the group dividers to display more objects. To the right of each object is a question mark graphic. Click on the question mark for more detailed information about the object’s attributes and abilities. To add an object to your project, select and drag the object to the screen in the Viewer. A blue bar will appear on the Screen to indicate where the object will be added.

18. Designer Interface Viewer Section The Viewer is the 2 nd section of the Designer and contains the objects that you have added to your project. In this example, 2 Buttons have been added to the screen. The 2 nd Button is selected as indicated by the green border. The text shown on the Buttons is the default text for the object. This may be changed in the Properties section of the Designer (right most section). To change the location of the objects in the Viewer, just drag the objects. To provide for more control of placement of the objects on the Screen, use the Screen Arrangement objects from the Palette. The Screen Arrangement objects act as a container for objects which then can be aligned horizontally, vertically or in a grid via a table alignment tool.

19. Designer Interface Viewer, Components (with Media), Properties The Viewer, Components (with Media) and Properties refer to the selected object. In this case, it is Button2. The Properties section shows the attributes for Button2 that you may modify. In the Components section, you may Rename or Delete the object. In the Media section (below the Components section), you may add images, sounds or video files to your project. Media files may also be added from the Properties section where appropriate. The Properties of the objects vary depending on the object selected.

20. Blocks Editor Once you are ready to define interactions between the objects or the user, launch Blocks Editor from the Design view by clicking the Open the Blocks Editor button (circled in red). You may be asked for permission to allow run and download a smaller file from the App Inventor. Please allow this to occur.

21. Blocks Editor The Blocks Editor will display the objects added to your program in the Designer. Your objects should be listed under the My Blocks tab (as shown below).

22. Blocks Editor The Blocks Editor divided in 2 sections. Your program objects are shown on the left side under the My Blocks tab. The right side is a where a graphical representation of the interactions between the objects will be designed. When clicked, each of the objects display a pop-up menu of the various attributes and events that may be used. To selection an event (such as a click for a button), click on the button object you created such as Button1. (Make sure the “My Blocks” tab is selected) A menu of different actions and properties will be displayed. Choose the attribute, event, or procedure call you would like to add to your program. (Button Click). The Blocks Editor also provides for launching the Android Emulator located at the top right of the window.

23. Blocks Editor To create an action based on a button click, click on your object Button1. The popup menu will appear. Select the Button1.Click block and drag it to the right panel of the Block Editor. Do the same for Sound1, selecting the Play block. Notice the blocks fit together like pieces of a jigsaw puzzle. This helps prevent programming errors (bugs). When Button1 is clicked, Sound1 will play.

24. Blocks Editor This shows a “clump” or block that will play a sound when Button1 is clicked.

25. Blocks Editor There are many different interactions and control methods available through the Blocks Editor. Each workshop session will demonstrate a different programming concept. The last component of the App Inventor is the Emulator (or actual phone). For the workshop we will be using the Android Emulator. It is launched by clicking New emulator button. The following window will appear (just click OK). The Android emulator will eventually appear. This may take several minutes. Once the Emulator is up slide the green lock to the right with you mouse to unlock the phone (as instructed in the window)

26. Android Emulator Now connect the App Inventor to the emulator by clicking Connect to Device… Select emulator-5554 The Icon to the right will change from yellow to green once connected. Once connected, your program will be launched and you will be able to test it on the emulator. You do need not click New emulator again while testing. If you change your project you made need to Reset connections or re-open the Blocks Editor to reflect current changes. This a beta version of the App Inventor. Many capabilities shown in the Blocks Editor may not work or may only work on a real Android based device.