Basics: Project 107j
Project name: Building AK47 app with MIT App Inventor 2
Tags: MIT App Inventor 2, AK47, Android
We will learn how to build a simple app AK47 with the MIT App Inventor 2 software. AK47 is an app that you can build in a very short time. You create a button that has a picture of the AK47 on it, and then program the button so that when it is clicked on the phone will play a sound and vibrate.
We assume that you have read our previous projects about MIT App Inventor 2.
Step By Step instruction
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start new project and give your project a name. As we’re just exploring the MIT App Inventor 2, you can name it as AK47. Click on OK button. Your project will be saved.
3.You will need an image file of the AK47 and AK47 sound. You can download these files on the beginning of this project by clicking the links.
4.Go to Designer editor tab.
5.Select components to design your app. To use a component (button) in your app, you need to click and drag it from the User Interface palette onto the Viewer.
6.To give the button the image of the AK47, in the Properties pane, click on the Text field and delete it, click on the Image field and then click on Upload File… button. A window will pop up to let you choose the image file. Click on Choose file button and then navigate to the location of the AK47pic.jpg file you downloaded earlier. Click on the AK47pic.jpg file, click on Open button, and then click on OK. Set the Height and Width fields to 300 pixels.
7.From the User Interface palette, drag and drop the Label component to the Viewer, placing it below the picture of the bee. It will appear under your list of components as Label1.
8.Under the Properties pane, change the:
- Text of Label1 to read “Touch AK47 to open the fire”.
- FontSize to 24.
- FontBold – tick on the box.
- TextAlignment – Center:1.
- BackgroundColor of Label1 by clicking on the box. You can change it to any color you like.
- TextColor to any color you like. (Please note: if BackgroundColor and TextColor are the same, you will not be able to read your text!)
Here, the background color is set to Light grey and the text color is set White.
9. Under Palette, click on the Media drawer and drag out a Sound component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components.
10.Under the Properties pane, see that the Source field currently says None…. Click on the word None… to change the Sound1 component’s Source to AK47.mp3. Click on Upload File… button. Then click on Choose File button and find the location of the AK47.mp3 file that you downloaded earlier.Click on Open button, then click on OK button and upload it to this project.
11. Select the Screen1 component in the Components pane. Go to Properties pane and change parameters:
- AlignHorizontal field – Center.
- AlignVertical field – Center.
- Title field – AK47.
12. Go to Blocks editor tab. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.
13.On the left side of the Blocks Editor, click the Button1 drawer to open it. Drag and drop the when Button1.Click event handler block in the work area (the open area on the right).
14. Click the Sound1 drawer and drag the call Sound1.Play and call Sound1.Vibrate millisecs command blocks and connect them to the “do” section of the when Button1.Click block.
15. Click Math drawer from Built-in. Drag out the number block and attach it to “millisecs”. Type 500.
When an event handler is executed, it runs the sequence of commands in its body. A command is a block that specifies an action to be performed (e.g., playing sound and vibrate) when the event (e.g., pressing Button1) is triggered.
15. Try it out on your device or with the emulator! When you press the button you should hear the AK47 sound and smartphone will vibrate. Congratulations, your fAK47 app is running!
16.While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/device from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Under Build, select App (save to my computer) and download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices.
We have successfully built the AK47 app with MIT App Inventor 2.