From Notes

Jump to: navigation, search

Before reading this tutorial please make sure that you set up both your computer and phone for AppInventor use. If you have not done so, please visit our Before You Begin page.

If you have read our "Before You Begin" page please make sure that you have also read our Basics page.

Have you read both our "Before You Begin" and "The Basics" pages? Great! Let's get started. This tutorial should prepare you to create your own applications.


Let's Start With A Simple Application

We have decided that the famous application "HelloPurr" would be the best starting exercise and it is also a fun application. Google will lead you through a step by step process to create this application. Please follow this link and happy inventing!

Please note that the picture of the kitty may not appear on the AppInventor screen. Double check the Properties for the button to make sure the image is set to kitty.png As long as this is true then the picture will appear when you download the application to your phone.

Scan the barcode below to download HelloPurr.


Now Let's Learn Animation!

Although this application is a bit complex, we think it has a lot of fruitful features that you may be using regularly.

With that said, try out Mole Mash, it's TONS of fun!

  • Please note the Clock component can now be found under the basics section of the palette.
  • The blocks Mole.X, Mole.Y, Mole.Width and Mole.Height can be found under "My Blocks" then click on "Mole". Similarly, MyCanvas.Width and MyCanvas.Height can be found under "My Blocks" then click on "MyCanvas".
  • The Math drawer with the other listed blocks can be found under "Built-In".
  • the "ScoreLabelText" is found under "My Blocks" click on "ScoreLabel" ==> "ScoreLabelText."
  • the red "txt" box can be found under the "Built-in" menu ==> click "text." You can enter your desired text in the box by clicking it until the text is highlighted. You can now edit the text that you want to appear.
  • Once you're created a definition "score" block, you must first drag the brown "?" block into the trash, then select "Built-In" ==> "Math" ==> "number 123" block. Once the "number 123" block is in place, simply enter the value for the variable the same way you would enter text into a text block.

Make a Cool Paint Application

Create Google's "PaintPot" application which allows you to create a drawing with blue, red, or green paint on top of the original kitty picture from the first tutorial. Have fun!

  • This tutorial is pretty accurate so there aren't really any troubleshooting tactics to implement.
  • Please note that your picture may not appear on the screen. Check the backgroundImage box to make sure the file name of your picture appears. If it's there then no worries. If it's not simply upload it again.

Fool Around!

Now that you have a keen grasp on how to create web applications with App Inventor, begin playing with the applications you just made and think of ways to alter them. Perhaps you can add a vibrate features to PaintPot or make a Shake the Kitty application that causes the kitty to meow when you shake the phone. This exercise should allow you to feel more comfortable when you begin creating your OWN web applications in the near future!!!

Try Our Apps!

During our first two weeks we created our own two applications. Click on the links below for a tutorial on how to make them yourselves!

Animal App
Trinty Tour App

You can also learn about making more complex applications that include databases and GPS, for example. Just visit our Advanced Tutorials page.

Happy Inventing!

Back To Main Page
Personal tools
NSF K-12