Chapter 2. Mobile computing – Skills Guide
Section 2: Mobile development – Skills Guide
Aim
In this section, you will learn the steps to design a graphical user interface and build a mobile application. You will learn how to design your mobile application using different components and test them in a live or offline mode. You can refer to this section as a resource when creating the mobile application for your project.
Learning outcomes
• Design a Graphical User Interface.
Prior knowledge
• Computer science
• Programming
My STREAM focus
• Science
• Technology
• Math
Key vocabulary
Word Meaning Picture
App Inventor software to build mobile applications
Ai starter
open-source software that communicates between App Inventor running in the browser, and other parts of App Inventor
designer
feature used to select components for the app and specify properties blocks editor
feature used to specify how the components will behave
Getting started
The word 'app' is an abbreviation for 'application', which means a piece of software.
There are three main types of apps, desktop app, mobile apps and web apps.
App Inventor allows you to create Android applications using a web browser and either a connected phone or an emulator. App Inventor servers save your work and assist you in keeping track of your projects.
Figure 2.2.1: App inventor
You can create apps by collaborating with:
1. The App Inventor Designer – allows you to choose the components for your app.
2. The App Inventor Blocks Editor – allows you to put together program blocks to define how the app components should behave.
Your app appears on the phone in stages as you add pieces to it, allowing you to test your work as you go. When you are finished, you can package your app and create an installable, stand-alone application.
- If you do not have an Android phone, you can create apps using an Android emulator, which runs on your computer and behaves exactly like an Android phone.
The App Inventor development environment is compatible with the Mac OS X, Windows operating systems, and Android phone models. App Inventor applications can be installed on any Android phone.
Before using App Inventor, you must first set up your computer and install the App Inventor setup package.
System requirements
To use App Inventor, your computer must meet the following system requirements:
Computer and operating system
• Macintosh (with Intel processor): Mac OS X 10.5, 10.6+
• Windows: Windows XP, Windows Vista, Windows 7+
Browser
• Mozilla Firefox 3.6 or higher
• Google Chrome 4.0 or higher
• App Inventor does not support Microsoft Internet Explorer. Windows users should use Chrome or Firefox
• A google account is needed
Mobile devices
• Phone or Tablet (ON-LINE with an internet connection)
✓ Android Operating System 2.3 (‘Gingerbread’) or higher
✓ IoS
• Use the on-screen emulator (OFF-LINE with no internet connection)
MIT app developer was developed for androids. MIT App Inventor companion app for iOS is now available for iPad, iPod Touch, and Mac.
Installing and running the emulator in AI2
If you do not have an Android phone or tablet, you can still use App Inventor to create apps. App Inventor includes an Android emulator, which functions similarly to an Android but appears on your computer screen. As a result, you can test your apps on an emulator while still distributing them.
Ai Starter is an open-source program used to communicate between App Inventor running in the browser and other parts of App Inventor. To work with Ai Starter, follow the steps below.
Step 1: Install the App Inventor setup software Step 2: Launch aiStarter
To launch aiStarter on Windows, double click on the Ai2 Starter icon . A window similar to the one shown in Figure 2.2.2 should appear.
Figure 2.2.2: Ai starter
Step 3: Open an app inventor project and connect it to the emulator, as follows:
Go to app inventor and open a project and give your project a name.
Project > Start New Project
Then, from App Inventor's menu. Go to the Connect Menu and click the Emulator option as shown in Figure 2.2.3.
Figure 2.2.3: Emulator
You will get a notification saying that the emulator is connecting. Starting the emulator can take a couple of minutes. You may see update screens like in Figure 2.2.4 as the emulator starts up.
Figure 2.2.4: Ai starter in run state
The emulator will initially appear in different stages, as shown below in Figure 2.2.5.
Figure 2.2.5: Emulator start-up
Step 4: Setup is complete! You are now ready to build your first app!
Solving emulator/Aistarter problem
As every software and hardware faces technical problems, you might face technical problems when using the mobile app builder. For issues with aiStarter, or if the emulator does not connect, follow the basic troubleshooting technique given below.
If you have a problem opening the emulator and receiving messages like those shown below, please follow the below steps to fix the problem.
Figure 2.2.6 Figure 2.2.7
1. Look for the aiwinstarter.exe window and close it.
Click on the button
circled in red to open the aiwinstarter.exe window.
Figure 2.2.8
Then click Ctrl+c to close it.
Figure 2.2.9
If the aiwinstarter.exe window is not open, then open it first by clicking on the 'Stop AI2Offline' button.
Figure 2.2.10
Then click Ctrl+c to close it.
Figure 2.2.11
2. Open AI Starter.
Once it is closed, open it again by clicking on 'AI2 Starter'.
Figure 2.2.12
Keep it open and make sure there is only one window.
Figure 2.2.13
3. Open Emulator.
Now open the
emulator and see if it works.
Figure 2.2.14
You can also directly connect the app to your mobile device if you download the mobile app builder from MIT.
Building the first app
Let us get started with app development. This guide walks you through the basic steps of creating your first app, FavPet, by introducing you to the key elements of App Inventor, the Component Designer, and the Blocks Editor. When you are finished, you will be able to create apps on your own.
In this app, you will create a button with a picture of a horse on it and then program the button so that a 'neigh' sound plays when it is clicked.
The app inventor environment
You can begin programming with App Inventor by opening a browser to ai2.appinventor.mit.edu and logging in to your google account. You will see the app as App Inventor 2 now.
The App Inventor programming environment has three key parts:
1. The Component Designer - You use it to select components for your app and specify their properties.
2. The Blocks Editor - You use it to specify how the components will behave. For example, what happens when a user clicks a button.
3. A mobile device with which you can run and test your app as you are developing it.
• If you do not have the mobile device handy, you can test the apps you build by using the Android emulator.
Figure 2.2.15: Component Designer
Figure 2.2.16: Component Designer view
To create a project, click' New Project' at the upper left corner of the page. Then, enter the project’s name as ‘FavPet’ (one word with no spaces) and click OK.
Figure 2.2.17: New project Figure 2.2.18: New project
The first window that opens is the Component Designer. The Blocks Editor is available by clicking on the ‘Blocks’ button in the window's upper-right corner.
App Inventor is a cloud computing tool. Therefore, your app is stored on an online server as you work. If you close App Inventor, your app will be there when you return, you do not have to save anything on your computer.
Designing the components
Components are the elements you combine to create apps. Some components are very simple, like a ‘Label’ component, which shows text on the screen, or a ‘Button’
component, which you tap to initiate an action. Other components are more elaborate:
- a drawing Canvas that can hold still images or animations,
- an accelerometer, which is a motion sensor that detects when you move or shake the device, or
- components that make or send text messages, play music, and video and get information from websites.
When you open the Designer, a window will appear, as shown in Figure 2.2.20. The Designer is divided into several areas, shown below.
Figure 2.2.19: Designer areas
1. Designer (6) - allows you to choose the components for your app.
2. Blocks Editor (7)- is where you put together program blocks that define how the components should behave.
3. ‘Viewer’ (3) - is where you place components and arrange them to map out what you want your app to look like. The ‘Viewer’ shows only a rough indication of how the app will look. For example, a line of text might break at a different place on your device than on the ‘Viewer’.
4. Palette (2) - is a list of components from which you can select. The Palette is divided into sections. At this point, only the User Interface components are visible. Still, you can see components in other sections of the Palette by clicking the headers labelled ‘Layout’, ‘Media’, ‘Sensors’, ‘Storage’, and so on.
5. Component's list (4), under user interface (1) - lists the components in your project.
Any component that you drag into the ‘Viewer’ will also show up in this list.
Currently, the project has only one component listed: Screen1, which represents the device's screen.
6. Properties (5) of components – you will see the component’s properties when you click on it in the ‘Viewer’. Properties are details about the component that you can edit. For example, when clicking on a ‘Label’ component, you might see properties related to colour, text and font.
For the FavPet app:
You will need two visible components:
• A ‘Label’ component reading ‘My Fav Pet’.
• A ‘Button’ component with an image of a horse on it.
You will also need a non-visible ‘Sound’ component to play sounds.
Download any horse image and its sound file on your computer (or any other animal of your choice), as you will need them later for your app.
- Making a label
The first component to add is a label. To do so, follow the below steps.
1. Go to the ‘Palette’, open the User Interface drawer if it was not open, then click on ‘Label’ and drag it to the ‘Viewer’. You will see a rectangular shape appear on the ‘Viewer’, containing the words ‘Text for Label1.’
2. Look at the ‘Properties’ box on the right side of the ‘Designer’. It shows the properties of the label. There is a property called text, with a box for the label's text. Change the text to ‘My Fav Pet’ and press ‘Return’. You will see the text change in the ‘Viewer’.
3. Change the ‘BackgroundColor’ of the label by clicking the box, which currently reads ‘None’, to select a colour from the list that appears. Select ‘Blue’.
1. Also, change the ‘TextColor’ of the label to ‘Yellow’.
2. Finally, change the ‘FontSize’ to 20.
3. Clear the text ‘Text for Label1’ and type the new text as ‘My Fav Pet’.
Figure 2.2.20
Figure 2.2.21 Figure 2.2.22
- Adding a button
1. To make a basic button first, go to the ‘Palette’ in the ‘Designer’ and click on ‘Button’
(at the top of the list of components). Drag it onto the ‘Viewer’. You will see a rectangular button appear on the ‘Viewer’.
Figure 2.2.23
2. In the ‘Properties’ box, click the area under the image, which currently reads ‘Upload file.’ Then, click ‘Choose File’ and browse to select the animal file you downloaded to your computer earlier, and then click ‘OK’.
Figure 2.2.24
Figure 2.2.25 Figure 2.2.26 Figure 2.2.27 Figure 2.2.28
3. After the image uploads, the animal file should be listed as an option for the image property of the button. Click ‘OK’ to choose it.
4. Now clear the text ‘Text for Button 1’ displayed on it. Your screen should look similar to Figure 2.2.29.
Figure 2.2.29
- Adding the animal sound
1. To expand the ‘Media’ section, go to the ‘Palette’ on the left side of the ‘Designer’
window and click the header labelled ‘Media’.
Figure 2.2.30
2. Search for the sound component from the palette and drag the sound component to the screen.
Figure 2.2.31
3. Drag and drop a ‘Sound’ component into the ‘Viewer’. No matter where you drop it, it will appear in the ‘Non-visible components’ section of the ‘Viewer’ at the bottom. Non-visible components are objects that perform functions for the app but are not visible in the visual user interface.
Figure 2.2.32 Figure 2.2.33
4. Click on ‘Sound1’ to display its properties. Click the ‘Source’ property and then go through the steps to upload and choose the animal sound file you downloaded.
Figure 2.2.34 Figure 2.2.35 Figure 2.2.36
Working with blocks editor
1. Now click on blocks and go to the blocks window.
Figure 2.2.37
Figure 2.2.38
2. You can see the blocks menu with built-ins.
Figure 2.2.39
3. In the blocks window, you can see all the components you had added to
‘screen1’. This is very important to remember, as this is where you will actually do the blocks building by clicking and dragging options.
Figure 2.2.40
4. Click on ‘button1’, and you will see the ‘Viewer’ with all the button events.
Figure 2.2.41
5. Click and drag the button click event, as you wanted to hear your favourite animal sound when you click on the button.
Figure 2.2.42
6. Now click on the ‘sound1’ component.
Figure 2.2.43
7. Now you need to play the sound. Click and drag the call ‘sound1’ play function.
Figure 2.2.44
8. Your first app is ready.
Figure 2.2.45
9. You need to test now. You can test live using the AI companion or using the emulator. When you click on the animal image, you should be able to listen to the sound the animal makes.
Live testing
With App Inventor, you can view and test your app on an Android device as you create it. Testing your app in an incremental manner is a practice used by effective software developers and will save you hours of work.
- If you have an Android device and an internet connection with WiFi, you can set up live testing in minutes, and you do not have to download any software on your computer.
- If you have a mobile device, do the following:
• On your device, download and install the ‘MIT AI2 Companion’ app. Launch the app when it is installed.
• Connect both your computer and your device to the same WiFi connection.
In the App Inventor (in the browser), from the top menu, select ‘Connect’
and then choose ‘AI Companion’.
• On your device, launch the app you installed, the ‘MIT AI2 Companion’.
Select ‘Scan QR Code’ and then hold your device up to the QR code on the computer screen to scan it.
Figure 2.2.46 Figure 2.2.47
Adding a sensor component
Now let us expand the project by adding a sensor. This will help anyone with special needs use the app. Just by shaking the mobile device, they will be able to listen to the animal sound.
To add a sensor to your application, go to the components window and search the sensor under the sensor menu. The sensor you will be using is an accelerometer.
1. Click on the sensor or search for the accelerometer in the ‘Palette’ window.
Figure 2.2.48
2. Drag the accelerometer sensor to the screen. This is also an invisible component.
So, you will not be able to see the component on the screen.
Figure 2.2.49 Figure 2.2.50
3. Go to the blocks window and click on the accelerometer component to display its functions.
Figure 2.2.51
4. When you shake the device, the sound has to play. Drag the function for accelerometer shaking and call the sound to play.
Figure 2.2.52
5. You may have noticed that the call ‘Sound1.Vibrate’ block has the text ‘millisecs’
at the lower right and an open socket protruding inward from the block's edge.
6. A block with an open socket indicates that something needs to be plugged into it to specify how the behaviour should work. You must specify how long the
‘Vibrate’ block should vibrate in this case. As is common in many programming languages, this time must be specified in thousandths of a second (milliseconds).
Enter a value of 500 milliseconds to make the device vibrate for half a second.
You must first obtain a number block to do so.
7. Click the ‘Math’ drawer, and you will see a list of blue blocks appear.
Figure 2.2.53
8. At the top of the list, you should see a block with a ‘0’ in it. You can drag this block out and then change the 0 to any number you want. Go ahead and drag
out the number block.
Figure 2.2.54
9. Click the 0 and type the new value, 500.
Figure 2.2.55
10. Now add the value to the button click event.
Figure 2.2.56
11. Test your app now by clicking and shaking the mobile device. Please note, this sensor will work only when you physically shake a mobile device. It will not work when using the emulator.
Opening multiple screens
You can open more than one screen in an application. To do so, follow the below steps.
1. Open a new project
Figure 2.2.57
2. Go to the screen properties. Edit the properties settings as shown in the following figure to have a neat designing feature.
Figure 2.2.58 Figure 2.2.59
3. To screen 1, upload any image and align it horizontal to the centre and vertical to the bottom. This is very important to place the components on the screen.
So now, the components on the screen will be on the centre horizontally and bottom vertically.
4. Place a button on the screen now. It should be positioned on the centre horizontally and bottom vertically.
Figure 2.2.60
5. Change the properties of the button and name the button to ‘click here to open sceen2’.
Figure 2.2.61 Figure 2.2.62
6. At the top of the window, you will see the option to add a screen. Click on it.
Figure 2.2.63
7. Now name the new screen as ‘screen2’. It is a good practice to name the screen appropriately when you design an app. But for now, you will name call it ‘screen2’ to avoid confusion.
Figure 2.2.64
8. Now you see a new screen opened. Change the background of ‘screen2’ by uploading a different image.
Figure 2.2.65 Figure 2.2.66
9. Go to ‘screen1’, by clicking on ‘screen1’ at the top of the window.
Figure 2.2.67
10. Go to the blocks window and drag when ‘button1’ click event block.
Figure 2.2.68
11. When the button is clicked, ‘screen2’ should open. To do this, click on the control built-in and drag ‘open another screen screenName’ block.
Figure 2.2.69
12. This block requires one input, which must be the name of the screen you want to open, in a text block.
Figure 2.2.70
13. Type as ‘Screen2’ in the text. You should type the name of the screen correctly. If not, you will not be able to open the screen.
Figure 2.2.71
14. Test your app.
Adding a splash screen
A splash screen is a graphical control element that consists of a window containing an image, a logo, and the software's current version. While a game or program is being launched, a splash screen may appear.
Let us design a splash screen. Complete the following steps:
1. Open a new project.
2. Add two screens.
3. Add different background images for each of the screens.
4. To screen one, add two components, a clock and a slider.
o A ‘Clock’ is a non-visible component that provides instant time using the internal clock on the phone. It can be set on a timer at regularly set intervals and perform time calculations, manipulations, and conversions.
o A ‘Slider’ is a progress bar that adds a draggable thumb. You can touch the thumb and drag it left or right to set the slider thumb position.
Figure 2.2.72
5. Set the properties of the slider window as shown below.
Figure 2.2.73
6. Set the property of the clock as follows.
Figure 2.2.74
Note: Enable the timer just before you do your testing.
7. Now, open the blocks window and do the following to build the blocks.
Figure 2.2.75
8. Enable the timer. Based on your requirement, the time interval can be increased or decreased.
Figure 2.2.76
9. Test your app.
Building a cloud-based application
This app uses the ‘CloudDB’ component to store data in the cloud. The data stored in the cloud will be retrieved whenever the app is opened.
To design a chatting app using the ‘CloudDB’ component, follow the below steps.
1. Open a new project.
2. Add the following components:
a. Label b. Textbox
c. Horizontalarrangement d. Button
e. Listview f. cloudDB
You can see the ‘cloudDB’ component in the ‘Storage’ palette.
Figure 2.2.77
3. Set the properties of each of the components placed on ‘screen1’ as follows.
a. Label
Figure 2.2.78
b. Textbox
Figure 2.2.79
Clear the ‘text’ in the textbox properties.
c. HorizontalArrangement
Figure 2.2.80
d. Button
Figure 2.2.81
e. Listview
Figure 2.2.82
f. There is no property setting for cloudDB in this app.
4. Initialise the following variables.
Noe: When you are initially getting familiarised with building the blocks, keep the colour of the blocks as a guide. You can differentiate the building blocks by their name and their colours.
Figure 2.2.83
5. Build the ‘button1’ when clicked block as below.
Figure 2.2.84
6. Build your cloudDB block as follows.
Figure 2.2.85
Figure 2.2.86
7. Build your screen block as follows
Figure 2.2.87
8. Your app is ready to test.
Building an app using a media component
Let us build an app using a media file, ‘TextToSpeech’. This component will convert text to speech. Mainly, for building apps like robots, this component is used for converting text to speech.
1. Open a new project.
2. Add the following components:
o Image o Button
o TextToSpeech
3. Add an image to the image component.
4. Change the text of the button to ‘Click here to hear me!!!’. Format the text by changing the colour and font size as you wish.
5. Open the blocks window and do the following using the respective blocks.
Figure 2.2.88
6. Test your app.
Figure 2.2.89
Student reflection
List three things you have learned and two things you have enjoyed.
Three things I have learned:
1. ___________________________________________________________________________________
2. ___________________________________________________________________________________
3. ___________________________________________________________________________________
Two things I have enjoyed:
1. ___________________________________________________________________________________
2. ___________________________________________________________________________________
Learning outcomes
Key Skills
(Please tick the box to show your understanding
of the skills below.)
I do not understand.
I
understand. I'm an expert.
Design a Graphical
User Interface I can design, implement and evaluate effective and usable graphical computer interfaces.
Teacher's comment:
