Virtual Pet

Before You Begin

Before we can start smartphone programming you will need to decide how you are going to test the programs that you create.

If you have an Android smartphone, you will be able to test your programs on your phone. Check with your teacher if you have permission to do this. If you are found using your phone for other things, you will be asked to put it away.

If you have a different type of smartphone, you can instead test your programs using the emulator.

You will need the following:

• A google account - if you have an android phone and want to test your programs on it, you will have to use the account associated with that phone, otherwise use the your school google account.
• If you are using the emulator to test your programs you will need to run the AI starter program. Your teacher will tell you where to find this.
• If you are using your smartphone to test your programs, you will have to use the Google Play store to download and install the MIT AI2 Companion app. Don't worry, it's completely free!
• The App Inventor 2 development environment needs to be open in your browser

Create The User Interface

Now we can begin by creating our virtual pet app. Your teacher will show the class the screencast video for creating the user interface. You can watch this again yourself at any time:

Create a similar screen for your own VirtualPet app. Feel free to experiment with the different properties of each component!

Create The Program Blocks

At this point, all we have created is the app’s interface. Whilst this is an important stage in development, the app won’t actually do anything! We must now add some instructions (or code) to make the app work as intended.

Your teacher will show the class the screencast video for creating the program. You can watch this again yourself at any time:

There are two parts to an App Inventor app:

1. Objects and their properties (or settings);
2. Code (or blocks) – the program instructions. Most of the code is triggered by events – things that happen on the phone – such as a button click. Code can also be used to change the properties of the components.

Components need code (instructions) to perform a task.

Your code should look similar to the picture below:

Testing

Using either the Android emulator or live testing using a mobile phone, try out your app.

Did it work as intended? If not, go back and check your code for any mistakes. If that doesn’t work, check the properties of your app’s components too.

Extension Task 1

This virtual pet reacts to being touched, rather than being stroked. Your teacher will now show you where to find the canvas Canvas component, which can detect a drag event.

Now alter your app so that the cat meows only when it’s being stroked.

Extension Task 2

In the Designer, add an image sprite (Animation→ImageSprite) under the cat’s chin. Make it big enough to detect a touch. Just leave it blank, with no image file. In the Blocks Editor, use a Sound.Vibrate block from your sound component’s drawer, make your cat purr (i.e. make the phone vibrate) when you stroke under its chin!

Extension Task 3

In the Designer, add an accelerometer component (Sensors→AccelerometerSensor). Then add the code shown below so that your virtual pet works when you shake the phone:

Extension Task 4

It would be a simple task to add buttons that change the picture and sound for different animals. Such an app could be used to teach very young children how to recognise different animals and the sound they make, for example.

Download and import the app VirtualPetExt4, where this has been done. Your teacher will show you how to import the app if you are unsure. Run The app and test it.

The code is shown below. Unfortunately, there is a bug in the app – a problem that stops the app working as expected. See if you can identify the bug and correct it.