Hello Purr
Published October 2, 2021
In this tutorial, we will make a simple app. It has a button with a picture of a cat on it. When the user pushes the button, the phone play a 'meow' sound. This feature can be useful if you are going to develop games with App Inventor.
🏷️ Tags: #newbie, #tutorials-and-guides
Step 1. Creating a new project
If you have never used App Inventor before, I suggest you to go ahead and read this Hello World tutorial first, because you haven't learn the basics yet. However, if you did, please log in to MIT App Inventor and create a project called 'HelloPurr'.
Step 2. Dragging components
From the User Interface, drag out a Button.
Go down to the Media drawer and drag out a Sound.
After you dragged out a Sound component, you cannot see it on the phone because it only acts as a background. However, it is still important, so it shows up under the phone under 'Non-visible components'.
Step 3. Downloading files
In this app, you will download 2 files: the meow sound and the picture of the kitty. I have already downloaded for you, so go ahead to Google Drive and download both of the files: meow.mp3 and kitty.png. Download the files to your Downloads. After you downloaded them, go back to App Inventor.
In the Designer, you see a window under 'Components', which is 'Media', with a button 'Upload file...'. Click on it and upload the files to App Inventor. A demo will be published later.
After you uploaded both files, select Button1 in the Components list. In the Properties of Button1, you see an option called 'Image'. Click on that and choose 'kitty.png'. Also, set the text of the button to nothing.
Now, select Sound1 in the drop down. You see an option Source. Click on that and select 'meow.mp3'.
After that, your phone should look like this (right)
Step 4. Programming
In App Inventor, you do not need to write code, but you have to program your apps to tell the system what to do. To do that, App Inventor use blocks - they fit together like lines of code. They are easy to understand than code, so it is a very useful tool. Built-in blocks can help you calculate math expressions, do conditions, manage texts, and store variables. Components also have their unique blocks, too. If you click on Button1 on the left column, you can see Button1 has its unique blocks. Sound1 and Screen1 also have their blocks.
Select Button1 on the left column and drag the block when Button1. Click (yellow) to the workspace. The blocks inside it will be performed when Button1 is clicked.
Select Sound1 under Button1 and drag the call Sound1. Play to the yellow block. Your final blocks should look like this (top-left).
You're done!
Congratulations, you finished the tutorial!
Make sure to check out the App Inventor website to see lots of information. If you still don't understand, watch this video. Or, you can download this source code to take a look.
If you completed, you know how to:
✔️ Upload files to App Inventor,
✔️ Changing properties of components,
✔️ Do some basic programming.