This post is also available in: العربية (Arabic)
Children today spend an average of three hours a day on digital devices. There’s a great opportunity, and a responsibility, for digital designers to influence tomorrow’s generations in a positive way. Designers can have a significant influence over future generations because creating a winning app for kids has an incredible but often underestimated power to mold the future. To build app kids must have access to good building tools.
MIT App Inventor is an intuitive, visual programming environment that allows everyone even children to build fully functional apps for smartphones and tablets. Those new to MIT App Inventor can have a simple first app up and running in less than 30 minutes. And what’s more, our blocks-based tool facilitates the creation of complex, high-impact apps in significantly less time than traditional programming environments.
App Inventor lets you develop applications for Android phones using a web browser and either the connected phone or emulator. The App Inventor servers store your work and help you keep track of your projects.
You build apps by working with:
- The App Inventor Designer, where you select the components for your app.
- The App Inventor Blocks Editor, where you assemble program blocks that specify how the components should behave. You assemble programs visually, fitting pieces together like pieces of a puzzle.
Your app appears on the phone step-by-step as you add pieces to it, so you can test your work as you build. When you’re done, you can package your app and produce a stand-alone application to install.
If you don’t have an Android phone, you can build your apps using the Android emulator, software that runs on your computer and behaves just like the phone.
The App Inventor development environment is supported for Mac OS X, GNU/Linux, and Windows operating systems, and several popular Android phone models. Applications created with App Inventor can be installed on any Android phone.
Cool Apps That Kids Can Make
We bring you some interesting apps that kids can build using MIT Inventor.
1. CoinFlip
Designer Section
1. Click on Screen1 and change its alignment options to “center” so that all elements added will be displayed at the centre.
2. Add a Button and change its text to “Flip a coin”.
3. Add two Images from the User Interface section. Then upload the two sides of a coin, one for each image. If you don’t want to have a background for your image, choose .png files.
4. Once you added the two images, tick the option “visible” for just one of them. In our example, the head is visible now.
5. Let’s add also a flipping coin sound when the user clicks on the button. Add Sound from the Media Section (non-visible component). Now, click on it and upload an audio file.
Blocks Section
1. When the user clicks the button, our audio file will be played and a random side of the coin will be displayed. First of all, we have to include the code for the button:
when Button1.Click
do
2. Click on Sound and add:
call Sound1.Play3. Now, how do we code that a random side of the coin has to be displayed every time the user clicks? First, we need to insert an if statement to include our conditions. So, drag the “if then” block from the Control section and add “else”.
Then, we will use a random function so that the app will choose randomly between two numbers, one of each will make an image visible. For example, if the random number between 1 and 2 is 1, we want the app to display Image1. Go to Math and drag the block “….=….”. Then, drag the following block inside the first empty space:
random integer from 1 to 100Then change “100” to “2”. Change the value of the second empty space to 1.
4. Now we have to set what happens when the random number is 1. Go to Image1 and drag:
set Image1.Visible toFrom Logic, drag and attach the block “true”.
5. If image 1 is visible, the other one must be invisible. So, just copy and paste the “set visible” block and change Image1 to Image2 and true to false.
6. What if the random number is 2 instead? In this case, it’s Image2 that will be displayed on the screen. Copy and paste the two “set Visible” blocks you have just added and attach them to the “else”. Now change their values: if the random number is 2, “Image1.visible” will be false and “Image2.visible” will become true.
Now, let’s run the App with Companion App or Emulator.
2. Orientation Sensor
This app is a simple compass. When you move the phone, the compass rotates so that N always lines up with the Earth’s magnetic North Pole (as long as there are no strong magnets near the phone). That means the compass direction that is at the top of the phone is the direction you’re currently facing. There’s also a heading label at the top of the screen that tells you, your current direction in degrees from north. So, for example, if you face south, the letter S will be at the top of your phone and the heading will be 180 degrees.
Designer Section
The screen layout for this app is simple: a heading label plus a compass face. One new idea we’re including for this app is that the compass face automatically resizes to any screen size; so whether you’re using a tiny 2-inch smartphone screen or a 10-inch tablet, the compass should fill the screen. You do this by setting up a basic screen layout and then programming some blocks to resize the compass face depending on the size of the screen. Here’s the basic layout.
The canvas’s height and width are set to Fill Parent so that when the app starts, the canvas automatically resizes to the width and height of your phone’s screen. This would make the compass a strange-looking ellipse. You want CompassSprite to have the same height and width as the canvas width—then it will fill the screen horizontally. Here are the blocks to resize the compass:
Notice that you’re using the Screen1.Initialize event to trigger this change so it will happen as soon as the app runs. The user probably won’t even notice that the compass is being resized.
Blocks Section
You need to know what direction the phone is pointing; then you can update your heading label and rotate the compass face to match that direction. The orientation sensor you added in Design view gives you lots of information about the position of the phone (see the “Defying gravity” Learning Point, later in the chapter, for details). You’ll use the Azimuth property of the sensor to tell you which compass direction the top of the phone is pointing toward. The azimuth gives you a reading from 0 to 360 degrees. For example, the azimuth is 0 degrees when the top of the device is pointing north, 90 degrees when it’s pointing east, 180 degrees when it’s pointing south, 270 degrees when it’s pointing west, and so on.
The azimuth reading gives you lots of decimal points of accuracy. That’s great if you have a highly accurate device and need to steer a ship around the globe, but most of us only need a rough navigation guide—say, to the nearest degree. So you’ll round off the Azimuth value using a Math block called round. Here’s the block that outputs the heading at the top of the screen:
That takes care of the Heading label at the top of the screen. Now you need to rotate the compass to the same heading—and this is surprisingly easy! You’ve set CompassSprite’s Rotates property to yes, so if you set CompassSprite’s Heading property to match Azimuth, the sprite will rotate to point in the right direction. Here’s the block:
The final piece of the puzzle is how and when you should trigger the previous two blocks. You could set up a clock that triggers, say, every tenth of a second to run these blocks and update the screen. But the orientation sensor has one more trick up its sleeve: it can trigger an event whenever the position of the phone changes. The event is called OrientationSensor.OrientationChanged. If you drag out that event block and insert the two blocks you just saw, you have the finished program:
Now, let’s run the App with Companion App or Emulator.
3. Ball Bounce
This app is about making a Ball (a sprite) bounce around on the screen.
Designer Section
From the Drawing and Animation drawer, drag out a Canvas component and drop it onto the viewer.
The default setting for App Inventor is that the screen of your app will be “scrollable”, which means that the user interface can go beyond the limit of the screen and the user can scroll down by swiping their finger (like scrolling on a web page). When you are using Canvas, you have to turn off the “Scrollable” setting (UNCHECK THE BOX) so that the screen does not scroll. This will allow you to make the Canvas fill up the whole screen.
Make sure the Canvas component is selected (#1) so that its properties show up in the Properties Pane (#2). Down at the bottom, set the Height property to “Fill Parent”. Do the same with the Width property.
Now that we have a Canvas in place, we can add a Ball Sprite. This can also be found in the Drawing and Animation drawer. Drag out a Ball component and drop it onto the Canvas (#1). If you’d like the ball to show up better, you can change its Radius property in the Properties pane (#2).
Blocks Section
Choose the block when Ball1.Flung and drag-and-drop it onto the workspace. Flung refers to the user making a “Fling gesture” with his/her finger to “fling” the ball. Fling is a gesture like what a golf club does, not like how you launch Angry Birds! In App Inventor, the event handler for that type of gesture is called when Flung.
Open the Ball drawer and scroll down in the list of blocks to get the set Ball1.Heading and set Ball1.Speed blocks.
Plug the set Ball1.Speed and set Ball1.Heading into the Fling event handler.
Now, mouse over the “speed” parameter of the when Ball1.Flung event handler. The get and set blocks for
the speed of the fling will pop up. Grab the get speed block and plug that into the set Ball1.Speed
block.
Do the same for the Ball’s heading. Mouse over the heading parameter and you’ll see the get heading block to appear. Grab that block, and click it into the set Ball1.Heading block.
Now, let’s run the App with Companion App or Emulator.
