chapter 2. mobile computing skills guide

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


- 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.


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.


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.


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.


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’.


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.


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.


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.


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:

chapter 2. mobile computing skills guide

Documents