Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl App Inventor Workbook
App Inventor is a cloud-based application development tool, enabling users to develop Android applications for free! App Inventor has recently updated the software, however many schools have the initial version installed on their systems, so this workbook will be looking at the first version of the tool. This can be accessed via this link: http://beta.appinventor.mit.edu/ To begin, select Invent and enter your gmail account to log in with a username and password. Once you have successfully logged in, you should be taken to a screen that displays a variety of projects you may have developed in the past. All projects created will be stored here, even after downloading onto a device. Open a new project and the screen below will appear: See the colour coding below for more information: Here are all the components you can add to your application. You just simply click on which one you want and drag the component onto the Viewer panel. This is what your application will look like when it first starts. It shows you graphically, each component that you have added to your application. Here is a list of all the components that are currently in your application. You can rename and delete them in this panel. 1
Here is all the Media (images and sounds) which live in your app. Any media that you wish to use must be added in this panel. These are the details for the components you have selected in the Components panel. Here is where you set the initial behavior of the component. Use the following blank phone screen to design your application. You will be developing a sound board application, where you instal sound files that can be played when you select the sound and press the play button. What do you want your application to look like? Which sounds do you want to add? Do you want to record your own? 2
1) Components Add the following components to your application: Checkbox (1 checkbox for each sound you wish to add). 2 buttons (1 called play and 1 called repeat ). Don t forget to go onto Media and upload the sound files for each of your checkboxes. Customise the appearance of your application according to the designs on the previous page. You can use screen arrangements to alter the layout if you wish. Screen arrangements allow you to position commands on the screen. They can be found by clicking the screen arrangement tab in the components pane of the designer. Drag and drop one of more of these arrangements into your app to create an invisible alignment component. You can drag additional components into them and they will align either horizontally, vertically or in a table like structure, depending on which you choose. When adding these components onto your viewer, be aware of the properties panel for your components, here you will be able to alter these components to suit your desired appearance. 2) Images and sounds As previously mentioned, you are required to click on Media and import any desired images or sound files from your computer. It is important to do so as when you are developing using the Blocks Editor, this will tell the Blocks Editor the information about the file, as well as uploading it to the viewer. In addition, to play sounds drag on the Sound component. This component will enable you to output sound from the application. Drag on one for each sound you use. 3
Open up the Blocks editor. You may be required to update Java on your computer to ensure its installed properly. When the Blocks editor is open, you should see the below screen: See the colour coding below for more information: This panel has three choices at the top: Built-in, My Blocks and Advanced. The Built-in panel has a list of built in blocks that you can use. The my blocks panel has a list of all of the components in your app and if you click on those it shows you the blocks for each. Lastly, the advanced panel contains some advanced blocks. Here are all the current blocks you have in your application that are enabling it to do something. You can add more and more blocks and scroll around the page to view and change your current blocks. You can connect to your device by clicking the drop down box and selecting your device. Or you could run an Emulator which is an artificial device. Next you are going to be using variables. Variables are bits of memory, they can be retrieved and edited e.g. variable x can be used to perform the algebraic equation x + 5. In this case you will be adding variables to ease the editing of your application. When you import your sound files, when referencing them you would usually have to type out the file name each time. This takes time and mistakes are easily made. So, you will be using variables to store the filename and give the variable name a simple, easy to type name instead. In addition, if the filename ever needs to be changed, rather than going through the entire program and correcting each and every reference to that filename, instead you can simply change the contents of the variable. 4
3) Variables Click on Definition and drag Variable onto your screen. You can see the code is incomplete, so far you have a variable called variable with nothing assigned to it. To do this add a Text segment of code, which can be retrieved from Text category on the built in menu. Replace text with the filename. Replace variable with an appropriate name such as Cat_sound. Now that you have stored the required information in the application ready to use, you need to give your application some functionality. On your designed screen you should have 2 buttons, to begin you can give your play button some functionality. To identify the components you have in your application, in order to use them in the Blocks Editor, click on My Blocks and a list of the components, including the screen, will appear. As you click through the components you will see that an additional menu of code appears. 4) Play Button Find your play button and click. Now find the piece of code called PlayButton.click and drag this onto your screen. You will notice the shape of this segment of code, which suggests that further code is required to go inside, sandwiched within this instruction. What do you want to happen when the play button is pressed? 5
A Conditional statement, otherwise known as an IF statement introduces choice. This means your application behaves in a particular way depending on whether a condition is true. Another example of a conditional statement would be how a score is implemented within a game. If *user input* == *answer variable* Then... *score variable* + 1 5) Conditional Statements Add an If statement from the Control category. You will notice the different IF statements available to use within your code. The basic IF statement needs to test whether a checkbox has been checked or not. As your checkbox is an existing component in your Application, it can be found in the My Blocks category. If it is true, the checkbox has been checked then the output sound needs to be the assigned sound file variable. Below is an example of what your IF statement may look like. 6) IF ELSE statement Try playing with your app, what do you notice? Does it play every sound you have checked? Depending on which IF statement you have used depends on the behavior of your application. Try using the IF then ELSE statement and discuss in a group the differences, what happens and why it happens. 6
When you reach the stage where all your sounds play as you wish, the next step is to add a method of repeating sound over and over. This can be used to create a melody or playing a tune in the background. So far you have added a repeat button ready to program, but so far it doesn t do anything. But first you will be using clock. Clocks are used in App Inventor to count down from a set time, then do an even and repeat. To begin, add a Clock component to your app in the designer screen. Under properties of the clock you can change the time interval to the desired repeat speed of your sound. Now that this is complete, you can look at adding code to the Repeat button. 7) Repeat, repeat, repeat Add another variable called repeat, this will be used to see if the repeat button has been pressed. This variable will need to be defined as false which means the button has not be pressed. False can be found in the Logic category on the menu. However, you need to change this boolean value to true when the Repeat button is clicked. Add code for When repeat button is clicked. Set the repeat variable to a true value as a result of the button being clicked. Add code for the Timer event, that is called when the clock hits zero. Now to actually play a sound, use an IF statement and test repeat, if it is true then you want it to play your sound. What happens if you change the checkbox and press play? Why is it behaving this way. Have a look back at the Designer at the sound components that are non-visible. For each sound component that was added for each sound used within your app, click on Properties and set the source to the relevant sound file. 8) Replace set sounds To make each sound play, replace Set source blocks with a sound.play block that can be found within My Blocks. This allows you to play all of the sounds if you desire. Now you have a dedicated sound for repeat, you will need to follow activity 3 again which was setting the sources of the repeat sound to the relevant variable. Instead of doing it for the PlayButton.click command, now do it within the RepeatButton.click command. 7
Extension Activities If you ve made it this far, try and play around with the application you have made or you can continue reading for some other exciting ideas that we can offer you: Multiple Repeats Add in other repeat buttons and sounds, you can then have more than one sound repeating at a time. Own Sounds Record your own sounds and give a list of readymade beats to choose from (available along with the sounds), you will then be able to play words and phrases over a song. Dancing images Create a series of pictures to dance as your app plays a song. Tablet Sensors Add functionality to the sensors on the tablet, so it changes the sounds when you shake or plays another sound when you shake. 8
www.technocamps.com