Mobile Apps

Virtual Pet

This lesson will cover

  • the App Inventor environment:
    • components
    • properties
    • code (blocks)
  • event-driven programming.

Mobile features

  • Touch interface.
  • Working with sound


Your teacher will demonstrate a simple mobile app to you. This is the app that you are going to create – an onscreen virtual pet that you have to care for.

Log into App Inventor

Task 1 – Getting started with App Inventor

Watch screencast VirtualPet1 . This will introduce you to App Inventor and the designer screen, where you assemble your app’s components.

Additional Virual Pet Resources

Once you have done this, try creating a similar screen for your own VirtualPet app. Feel free to experiment with the different properties of each component!

Task 2 – Creating Code

There are two parts to an App Inventor app:

•  Components and their properties (or settings);

•  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.

vp1 code

Task 3 – Testing your App

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.

Congratulations – you have just created your first mobile app!

Virtual Machines
Task 4 – App Inventor Homework and Reference Sheet

Download the reference sheet, fill this in and upload to fronter..
Once your teacher has returned it to you, keep it handy for reference..
Virtual pet check and reference sheet

Extension Task 1

This virtual pet reacts to being touched, rather than being stroked. Your practitioner will now demonstrate how to replace the Button component with a 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 to make your cat purr (ie 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.

Ext3 task