Educational App Development Toolkit for Teachers and Learners

7/24/2019 Educational App Development Toolkit for Teachers and Learners

1/130

Educational AppDevelopment Toolkitfor Teachersand Learners


2/130


3/130

Educational App

Development Toolkitfor Teachers and Learners

Ishan Sudeera Abeywardena


4/130

The Commonwealth of Learning (COL) is an intergovernmental organisation created by

Commonwealth Heads of Government to promote the development and sharing of open learningand distance education knowledge, resources and technologies.

Commonwealth of Learning, 2015

2015 by the Commonwealth of Learning.Educational App Development Toolkit for

Teachers and Learnersis made available under a Creative Commons Attribution-ShareAlike 4.0

Licence (international): http://creativecommons.org/licenses/by-sa/4.0.

For the avoidance of doubt, by applying this licence the Commonwealth of Learningdoes not waive any privileges or immunities from claims that it may be entitled to assert,

nor does the Commonwealth of Learning submit itself to the jurisdiction, courts,

legal processes or laws of any jurisdiction.

Educational App Development Toolkit for Teachers and Learners

Ishan Sudeera Abeywardena, PhD

ISBN: 978-1-894975-73-5

Image credits: pp. 126-127.

Published by:

COMMONWEALTH OF LEARNING

4710 Kingsway, Suite 2500

Burnaby, British Columbia Canada V5H 4M2

Telephone: +1 604 775 8200

Fax: +1 604 775 8210

Web: www.col.org

Email: [email protected]


5/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERS I

Contents

About the Toolkit 1

How to Use the Toolkit 2

Using the Toolkit: Students 2

Using the Toolkit: Teachers 3

1. MIT App Inventor 4

1.1 Introduction 4

1.2 Creating an App Inventor Account 5

1.3 The Development Environment 5

1.4 Device Setup for App Development and Debugging 7

1.4.1 Building Apps with an Android Device and Wi-Fi Connection 8

1.4.2 Building Apps with the Emulator 11

1.4.3 Building Apps with an Android Device and USB Cable 14

2. Activities 19

Activity 1: TextToSpeech (Loud Mouth) 21

Activity 2: AccelorometerSensor (Stop Shaking Me) 31

Activity 3: SpeechRecognizer (Dictation) 35

Activity 4: Canvas (Join the Dots) 40

Activity 5: Ball and ImageSprite (Move the Ball) 43

Activity 6: TinyDB, PhoneNumberPicker and PhoneCall (Call a Friend) 51 Activity 7: Camera (Say Cheese!) 61

Activity 8: Camcoder and VideoPlayer (Action Capture) 64

3. Tutorials 67

Tutorial 1: Pet the Kitty 67

Tutorial 2: Swat the Mosquito 70

Tutorial 3: Dice 73

Tutorial 4: Virtual Chemistry Experiments 77

Tutorial 5: Scan and Learn 84

Tutorial 6: Voice Note 87

4. Packaging and Distribution 96

4.1 Sharing your app so that others can remix it (.aia file) 96

4.2 Sharing your app for others to install on their phone/tablet (.apk file) 97


6/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERSII

LIST OF FIGURES

Figure 1.1 The Designer view of the AI2 platform 6

Figure 1.2 The Blocks view of the AI2 platform 6

Figure 1.4 QR code to download the Companion app from the Google Play Store 8

Figure 1.3 Building apps with an Android device and Wi-Fi connection 8

Figure 1.5 Connecting to AI Companion from AI2 9

Figure 1.6 Connecting to your project using a QR code or six-character code 10

Figure 1.7 Using the emulator to build apps 11Figure 1.8 The aiStarter icon for Windows 12

Figure 1.9 aiStarter start-up window 12

Figure 1.10 Connecting to the emulator from AI2 13

Figure 1.11 Update screens during emulator start-up 13

Figure 1.12 The four phases of emulator start-up 14

5. Publishing Apps on Google Play 99

5.1 The Developer Console 99

5.1.1 All Applications 99

5.1.2 Account Details 100

5.1.3 Linking Your Merchant Account 101

5.1.4 Multiple User Accounts 101

5.1.5 Store Listing Details 102

5.1.6 Upload and Instantly Publish 104

5.1.7 Alpha- and Beta- Testing 104

5.1.8 Staged Rollouts 105

5.2 Multiple APK Support 105

5.3 Selling and Pricing Your Products 106

5.4 In-App Products 107

5.4.1 Distribution Controls 107

5.4.2 Geographic Targeting 107

5.4.3 Capabilities Targeting 107

5.5 User Reviews and Crash Reports 109

5.5.1 App Statistics 110

6. Workshop Design and Evaluation 111

6.1 Workshop Training Schedule 111

6.2 Workshop Evaluation 114

7. Useful Resources 119


7/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERS III

Figure 1.13 Using a USB cable to build apps 14

Figure 1.14 QR code to download the Companion app from the Google Play Store 16

Figure 1.15 The aiStarter icon for Windows 16

Figure 1.16 aiStarter start-up window 17

Figure 2.1 Using the Palette, Viewer and Properties in Designer view 19

Figure 2.2 Using the Blocks drawers in Blocks view 20

Figure 2.3 Click on the Start new project button to open a new AI2 project 22

Figure 2.4 Name your project using the project name provided in the activity sheet 23

Figure 2.5 The project name is displayed inside the AI2 project 23

Figure 2.6 Blank phone screen used to develop the visual aspects of the app 24

Figure 2.8 Change the title of the app 25

Figure 2.9 Locate the TextBox and Button components 25

Figure 2.10 Drag and drop TextBox and Button onto the blank phone screen 25

Figure 2.11 TextToSpeech component located within the Media drawer of the Palette 26

Figure 2.12 Non-visible components shown outside the visible area of the phone screen 26

Figure 2.13 Change the Hint property of the TextBox component 27

Figure 2.14 Change the Text property of the button to Speak 27

Figure 2.15 Use the Designer and Blocks buttons to change between the Designer view

and the Blocks view 28

Figure 2.16 The logic block for the LoudMouth app 28

Figure 2.17 Click on Button1 in the Blocks section and drag and drop the when Button1.

Click do block into the empty space. 29

Figure 2.18 Join the two blocks so they click together 30Figure 2.19 Join all three blocks to make the logic of your app 30

Figure 2.20 More information popup for the TextToSpeech component 33

Figure 2.21 The logic block for the Stop Shaking Me app 33

Figure 2.22 Using an empty Text block 34

Figure 2.23 Upload an image from the Resources pack 37

Figure 2.24 The first logic block, which captures the users speech 38

Figure 2.25 Appending text to the existing text when the user has stopped speaking 38

Figure 2.26 Adding and deleting grooves in a join block 39

Figure 2.27 Getting the result in a SpeechRecognizer.AfterGettingText block 39

Figure 2.28 Creating a new procedure 47

Figure 2.29 Renaming a procedure 47

Figure 2.30 Procedure for randomly setting the positions of the Ball and the Hole 47

Figure 2.31 Using the random integer block in the Math section 48

Figure 2.32 Calling a procedure at Screen Initialize 48


8/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERSIV

Figure 2.33 The block to determine what happens when the Ball is flung by the user 48

Figure 2.34 Moving the Ball back inside the bounds of the screen 49

Figure 2.35 Making the Ball bounce back off of the edge of the screen 49

Figure 2.36 Detecting a collision between the Ball and the ImageSprite 50

Figure 2.37 The VerticalArrangement component 55

Figure 2.38 Properties of the VerticalArrangement component 55

Figure 2.39 The HorizontalArrangement component 55

Figure 2.40 Renaming a component 57

Figure 2.41 Using variables to store and display a value 57

Figure 2.42 Inserting a Tag-Value pair into a TinyDB 59

Figure 2.43 Inserting a contact from the PhoneNumberPicker into a TinyDB 59

Figure 2.44 Removing a Tag-Value pair from the TinyDB 60

Figure 2.45 Populating the ListPicker with the Tags in the TinyDB 60

Figure 4.1 Exporting a project as an .aia file 96

Figure 4.2 Importing a project into AI2 97

Figure 4.3 Packaging an app as an .apk file 97

Figure 4.4 Build progress of the .apk file 98

Figure 5.1 Google Play Developer Console 99

Figure 5.2 All applications on the Google Play Developer Console 100

Figure 5.3 Google Developer account details 101

Figure 5.4 Multiple user account in the Developer Console 102

Figure 5.5 Google Play Store listing details 103

Figure 5.6 Alpha- and beta-testing your app 104

Figure 5.7 Selling and pricing products on Google Play 106

Figure 5.8 Device compatibility 108

Figure 5.9 User reviews and ratings of your app 109

Figure 5.10 Detailed statistics about your app 110


9/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERS 1

About the ToolkitThe Android operating system (OS) is arguably dominating the current smartphone and

tablet market. The Free and Open Source Software (FOSS) frameworks and ease of use

have made it the most sought-after OS for use by manufacturers. With thousands of apps

available through the Google Play Store, Android provides a feature-rich experience with anapp for just about anything imaginable.

The exponential growth of the smartphone and tablet markets over the past few years

has caught the attention of many sectors including government, industry and educators.

Mobile Business (mBusiness), Mobile Learning (mLearning) and Mobile Government

(mGovernment) are just three of the fastest-growing sectors delivering information and

services to a global market through mobile devices. This has given rise to a massive demand

for various customised apps, which has in turn resulted in businesses and services investing

heavily in custom mobile applications.

Traditionally, Android app development has been a highly specialised field reserved only forsoftware engineers and programmers. However, the massive demand for customised apps

has led to the democratisation of Android app development through Visual Programming.

Visual Programming is a concept that allows non-programmers to build powerful

applications using logical building blocks like constructing a jigsaw puzzle from virtual

puzzle pieces. Each puzzle piece is a block of code that forms complete programs when

assembled logically. The current leading visual app development platform is App Inventor

(AI2), developed by the Massachusetts Institute of Technology (MIT). It harnesses the

power of Google to provide a robust solution for customised app development for the

Android OS.

This toolkit is designed to introduce the basic and some intermediate concepts of Androidapp development on the AI2 platform. By following the hands-on activities and tutorials,

you will learn to use the Designer and Blocks Editor components of App Inventor to create

apps that can be readily downloaded and used on your Android smartphone or tablet.

Furthermore, the hands-on sessions will guide you on how to use features such as text-to-

speech, accelerometer, speech recognition, drawing, video, games and music playback. You

will also create six intermediate applications in the tutorials, which will give you a solid

foundation for developing more complex apps in the future. Finally, you will learn how to

package and distribute your app.


10/130

EDUCATIONAL APP DEVELOPMENT TOOLKIT FOR TEACHERS AND LEARNERS2

How to Use the ToolkitThis toolkit is designed to be used by both teachers (trainers) and students (trainees) who

have little or no prior experience in software programming. It covers all aspects of Android

application development on the AI2 platform, from account and device setup to publishing

your app in the Google Play Store. You will be developing Android apps in two main

categories. The first is Activities, relatively simple applications designed to give you hands-

on experience in the use of one or two components at a time. By following the steps in the

Walkthrough of each Activity, you will be able to complete these apps with relative ease. The

second category is Tutorials, where you will be exposed to apps of increasing complexity built

using multiple related and non-related components. You will also learn how to build complex

logic blocks to achieve high levels of user experience (UX) within your app. There is no

Walkthrough for the tutorials. However, as you should have completed all the activities prior

to the Tutorials, you should have minimum difficulty in the development of the apps. Once

you have completed all the sections in this toolkit, you will be able to develop Android apps

for various purposes including commercial ones.

The toolkit acts as a resource for training of trainers (TOT). If you are a teacher who wants to

teach Android app development, you must first work through this toolkit as a student. Once

you have mastered app development on the AI2 platform, you can use the toolkit to conduct

workshops to train others. Furthermore, since this toolkit document and the project resources

are released under a Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 International

licence, you are free to use them as you wish, even for commercial purposes.

Using the Toolkit: Students Step 1:Follow the instructions given in Section 1 to set up your AI2 account with live

testing.

Step 2: Familiarise yourself with the AI2 Design and Blocks views used for development.

Step 3: Do all the activities in Section 2. Ensure that you build your apps sequentially

from Activity 1 to Activity 8. Each activity is designed to build on the previous activities,

so do not skip any.

Step 4:Work through all six tutorials in Section 3. They are based on the knowledge you

gained from doing the activities. Tutorials 1 to 6 are designed to take you from simple

applications to intermediate and complicated application development. Each tutorial

builds on the previous one, so follow the tutorials sequentially.

Step 5: Practise packaging and distributing your apps as described in Section 4.

Step 6: Familiarise yourself with the Google Play Developer Console and publishing

apps on Google Play as discussed in Section 5.

Once you have mastered app development on the AI2 platform, you are ready to teach

others.


11/130


Using the Toolkit: Teachers Sections 1 to 5 are designed to be printed and distributed as individual handouts.

All activities and tutorials are designed to be independent of each other. They can be

printed and distributed to your students during the workshop.

A workshop training schedule is provided in Section 6.1. All the workshop sessions

are included in this toolkit. Each handout can be used as reference material when you

conduct your workshop.

A workshop evaluation form is included in Section 6.2. This can be used to gather

feedback on your workshop for further improvement.

The workshop must be conducted in a computer lab. All sessions are fully hands-on.

Students should be encouraged to bring their own device for live testing. If this is not

possible, they can use the emulator.


12/130


1. MIT App Inventor

1.1 Introduction1

MIT App Inventor is a blocks-based programming tool that allows even novices to start

programming and building fully functional apps for Android devices. Newcomers to App

Inventor can have their first app developed and running in less than an hour, and can

program more complex apps in significantly less time than with more traditional, text-based

languages. Initially developed by Professor Hal Abelson and a team from Google Education

while Abelson was on sabbatical at Google, App Inventor runs as a Web service administered

by staff at MITs Center for Mobile Learning a collaboration of MITs Computer Science

and Artificial Intelligence Laboratory (CSAIL) and the MIT Media Lab. MIT App Inventor

supports a worldwide community of nearly 3 million users representing 195 countries. More

than 100,000 active weekly users have built more than 7 million Android apps between

them.

The work of the MIT App Inventor team is driven by five primary objectives:

Sustaining and enhancing the tool:A long-term commitment to sustaining and

enhancing MIT App Inventor as a cutting-edge free service to end-users. To this end,

the App Inventor team is continuously improving the tool, adding new features,

debugging and enhancing its performance.

Building enterprise enhancements:Work with public agencies and private

corporations to support unique applications of the tool by developing or enhancing

custom features of MIT App Inventor in response to partner needs.

Building capacity:Seek to expand the capacity of formal and informal computing

education for adults and youth around the world. In doing so, be actively engaged

in developing and disseminating resources and training materials to support those

interested in programming in their region.

Promoting computer science education:Commit to calling attention to the state of

computer science and computational thinking in education. From a policy perspective,

participate actively in local and national conversations about standards of computing

education; from an awareness perspective, participate in and support large-scale

campaigns that aim to raise awareness among new audiences.

Conducting and supporting community research:Undergraduate and graduate

students at MIT and collaborating institutions are actively engaged in conducting

and publishing research while developing, testing and evaluating the use of MIT App

Inventor around the world.

.1 Introductions adapted fromttp://appinventor.

mit.edu/explore/bout-us.html (8

March 2015) underCC BY-SA 3.0

Unported Licence.


13/130


As an open source tool that seeks to make both programming and app creation accessible to

a wide range of audiences, MIT App Inventor has attracted the attention of:

Formal and informal educatorswho have used MIT App Inventor to introduce

programming to their Computer Science students, science club members, after-school

programmes attendees and summer camp attendees. Many educators have also started

to use MIT App Inventor to develop apps to support their own instructional objectives.

Government and civic employees and volunteerswho have harnessed the power of

MIT App Inventor to develop often hyper-local apps in response to natural disasters

and community-based needs.

Designers and product managerswho have seen the potential of MIT App Inventor

to support the iterative design process via rapid prototyping, testing and iteration.

Researcherswho use MIT App Inventor to create custom apps to meet their data

collection and analysis requirements to support their research in a wide variety of fields

from, medical to social science.

Hobbyists and entrepreneurswho have an idea they want to quickly turn into an app

without the cost or learning curve that more traditional app creation entails.

1.2 Creating an App Inventor AccountTo get started, you will need to create an App Inventor account. App Inventor 2 uses

Google credentials for authentication, so you will first need to create a Gmail account

if you dont already have one. To create a new Gmail account visit https://www.gmail.

comand follow the instructions under Create an Account. Once you have created your

Gmail account, visit http://ai2.appinventor.mit.edu to create your AI2 account. Use your

Gmail address and password to sign in. You will then be directed to the Google accounts

permissions page. To access the AI2 platform you need to click Allow. Congratulations! You

are now ready to develop Android apps.

1.3 The Development Environment2

The app development on AI2 is twofold. The Designerview (Figure 1.1) gives you a visual

representation of the application you are building. The Blocksview (Figure 1.2) provides a

space for building the application logic using various logic components called Blocks. You

will learn how to use these Blocks in the Activities.

2 DesignTab.pnBlocksTab.pnhttp://appinvmit.edu/expldesigner-blochtmlare useda Creative CoAttribution-Sh3.0 Unported


14/130


Figure 1.1 The Designer view of the AI2 platform

Figure 1.2 The Blocks view of the AI2 platform


15/130


1.4 Device Setup for App Development andDebugging3

You can set up App Inventor and start building apps in minutes. The Designer and Blocks

Editorrun completely in the browser (the cloud). To see your app on a device while you

build it (also called Live Testing), follow the steps below.You have three options for setting up live testing while you build apps.

Option 1: If you are using an Android device and you have a wireless Internet

connection, you can start building apps without downloading any software to your

computer. You will need to install the AppInventor Companion App for your device. This

option is strongly recommended.(See section 1.4.1.)

Option 2: If you do not have an Android device,you will need to install software on

your computer so that you can use the on-screen Android emulator. (See section 1.4.2.)

Option 3:If you do not have a wireless Internet connection,you will need to installsoftware on your computer so that you can connect to your Android device by USB. The

USB Connection option can be tricky, especially on Windows. Use this as a last resort.

(See section 2.4.3.)

System Requirements

3 1.4 Device SeApp Developand Debuggadapted fromappinventor.

explore/get-shtml under aCommons AtShareAlike 3.Unported Lic

COMPUTER AND

OPERATING SYSTEM

Macintosh (with Intel processor): Mac OS X 10.5 or higher

Windows: Windows XP, Windows Vista, Windows 7

GNU/Linux: Ubuntu 8 or higher, Debian 5 or higher

BROWSER Mozilla Firefox 3.6 or higher (Note: If you are using Firefox with

the NoScript extension, youll need to turn the extension off.

See the note on the troubleshooting page.)

Apple Safari 5.0 or higher

Google Chrome 4.0 or higher

IMPORTANT:Microsoft Internet Explorer is not supported

PHONE OR TABLET

OR USE THE ON

SCREEN EMULATOR

A smartphone with Android Operating System 2.3

(Gingerbread) or higher


16/130


1.4.1 Building Apps with an Android Device and Wi-Fi Connection

A computer, Android device and Wi-Fi connection are the easiest way to test your apps

(Figure 1.3).

With this combination, you can use App Inventor without downloading anything to your

computer! Youll develop apps on the AI2 website: https://ai2.appinventor.mit.edu. To do

live testing on your Android device, simply install the MIT App Inventor Companion app

on your Android phone or tablet. Once the Companion is installed, you can open projects

in App Inventor on the Web, open the Companion on your device and test your apps as you

build them.

The following steps will walk you through the process.

Step 1: Download and install the MIT AI2 Companion App on your phone

Open your devices QR code scanner and scan the QR code (Figure 1.4) to download the

Companion Appfrom the Google Play Store. If you dont have a QR code scanner installed

on your device, you can download one for free from Google Play. QR Droid Code Scanner

is one example (https://play.google.com/store/apps/details?id=la.droid.qr&hl=en).

Alternatively, follow this link from your device: https://play.google.com/store/apps/

details?id=edu.mit.appinventor.aicompanion3.

Figure 1.3 Building apps with an Android device and Wi-Fi connection


17/130


Figure 1.4 QR code to download the Companion app from the Google Play Store

After downloading, follow the instructions to install the Companion app on your device. It

will then be on your phone or tablet ready for you to use App Inventor.

NOTE:If you cannot use the QR code, use the Web browser on your device to go to theGoogle Play Store. Look for MIT AI2 Companionin the store. When you find Companion,

click the Installbutton for the Companion app.

Step 2: Connect both your computer and your device to the SAME Wi-Fi Network

App Inventor will automatically show you the app you are building but only if your

computer (running App Inventor) and your Android device (running the Companion) are

connected to the same Wi-Fi network. A more detailed explanation can be found at http://

appinventor.mit.edu/explore/support/explain-wifi-connection.html.

Step 3: Open an App Inventor project and connect it to your device

Go to App Inventor and open a project (or create a new one: choose Project> Start New

Projectand give your project a name). Choose Connectand then AI Companionfrom thedropdown menu in the AI2 browser as shown in Figure 1.5.

Figure 1.5 Connecting to AI Companion from AI2

A dialog with a QR code will appear on your computer monitor (Figure 1.6). On your

device, launch the MIT App Companion app just as you would launch any app. Then

click the Scan QR codebutton on the Companion and scan the code in the App Inventor

window.


18/130


Figure 1.6 Connecting to your project using a QR code or six-character code

Within a few seconds, you should see the app you are building on your device. It will update

as you make changes to your design and blocks, a feature called live testing.

If you have trouble scanning the QR code or your device does not have a scanner, type the

six-character code shown on the computer into the Companions text area on your Android

device exactly as shown. Choose the orange Connect with codeoption.

IMPORTANT:Do not hit Enteror make a carriage return. Type only the six characters andthen press the orange button.

TROUBLESHOOTING

If your app does not appear on your device, the most likely problems are:

You may have an outdated version of the App Inventor Companion app. Download the

latest Companion app for App Inventor 2 from above.

Your device may not be connected to Wi-Fi. Make sure you see an IP address at the

bottom of the AI Companion app screen on your phone or tablet.

Your device may not be connected to the same Wi-Fi network as your computer. Make

sure both devices are connected to the same Wi-Fi network (check the network name).

Your school or organisation may have network protocols in place that block the Wi-Fi

connection. If this is the case, use App Inventor with the emulator or use a USB cable

to connect your device.


19/130


1.4.2 Building Apps with the Emulator

If you dont have an Android phone or tablet handy, you can still use App Inventor. Have

a class of 30 students? Let them work primarily on emulators (Figure 1.7) and share a few

devices.

Figure 1.7 Using the emulator to build apps

To use the emulator, you first need to install some software on your computer (this is not

required for the Wi-Fi option). Follow the instructions below for your operating system.

IMPORTANT:

If you are updating a previous installation of the App Inventor software, see How to

Update the App Inventor Software: http://appinventor.mit.edu/explore/ai2/update-setup-software.html.

You can check whether your computer is running the latest version of the App Inventor

software by visiting the App Inventor 2 Connection Test page: http://appinventor.mit.

edu/test.

Step 1. Install the App Inventor setup software

Instructions for Mac OS X:http://appinventor.mit.edu/explore/ai2/mac.html

Instructions for Windows: http://appinventor.mit.edu/explore/ai2/windows.html

Instructions for GNU/Linux: http://appinventor.mit.edu/explore/ai2/linux.html

Step 2. Launch aiStarter (Windows and GNU/Linux only)

Using the emulator or a USB cable requires the use of a program named aiStarter. This

program permits the browser to communicate with the emulator or USB cable.


20/130


On a Mac, aiStarter will start automatically when you log in to your account and will run

invisibly in the background.

With Windows, there will be shortcuts to aiStarter from your Desktop, from the Start

menu, from All Programsor from Startup Folder. If you want to use the emulator with

App Inventor, you will need to launch aiStarter manually on your computer when you log

in. You can start aiStarter by clicking the icon (Figure 1.8) on your Desktop or from your

Start menu.

Figure 1.8 The aiStarter icon for Windows

Youll know that youve successfully launched aiStarter when you see a window like the

following (Figure 1.9):

Figure 1.9 aiStarter start-up window

On GNU/Linux, youll need to launch aiStarter manually from the following folder:/usr/

google/appinventor/commands-for-Appinventor

You can launch it from the command line with/usr/google/appinventor/commands-for-

appinventor/aiStarter &

For help with aiStarter, see Connection Help at http://appinventor.mit.edu/explore/ai2/

aistarter-help.html.


21/130


Step 3. Open an App Inventor project and connect it to the emulator

Go to App Inventor and open a project (or create a new one: Project> Start New Project

and give your project a name). Then, from App Inventors menu (on the App Inventor

cloud-based software at http://ai2.appinventor.mit.edu), go to the Connectmenu and click

the Emulatoroption as shown in Figure 1.10.

Figure 1.10 Connecting to the emulator from AI2

Youll get a notice saying that the emulator is connecting. Starting the emulator can take acouple of minutes. You may see update screens like Figure 1.11 during the start-up.

Figure 1.11 Update screens during emulator start-up

The four phases of emulator start-up are shown in Figure 1.12. The emulator will initially

appear with an empty black screen (1). The emulator is ready when you see a coloured

background (2). Once the background appears, wait until the emulated phone has finished

preparing its SD card: there will be a notice at the top of the phone screen while the card is

being prepared. Once connected, the emulator will launch and show the app you have open

in App Inventor.


22/130


Figure 1.12 The four phases of emulator start-up

NOTE:If this is the first time you are using the emulator after installing the App InventorSetup software, you will see a message asking you to update the emulator. Follow the

directions on the screen to perform the update and reconnect the emulator. You will need to

do this type of update whenever there is a new version of the App Inventor software.

1.4.3 Building Apps with an Android Device and USB Cable

Some schools and organisations firewalls block the type of Wi-Fi connection required. In

that case, use a USB cable as shown in Figure 1.13.

Figure 1.13 Using a USB cable to build apps

When you use App Inventor with a phone or tablet, your device communicates with the

App Inventor software running in your computers browser window. This communication is

managed by the AI2 Companion App running on the device. See Step 2 (below) for how to

install the AI Companion software.


23/130


NOTE:The Companion can communicate with your computer over a wireless connection.This is the method strongly recommended by the App Inventor team.It does not

require any additional software to be installed on your computer. (See Section 1.4.1.)

There are, however, some environments where wireless connections wont work. For

example, some hotels, conference centres and schools configure their wireless networks

to prohibit two devices on the network from communicating with each other. See http://

appinventor.mit.edu/explore/support/explain-wifi-connection.htmlfor a short explanation.

Some App Inventor users have solved this problem by purchasing a wireless router and

setting up their own local network. (Also, most Macs and some PCs can serve as Wi-Fi

routers that can handle a small number of machines.) However, if this is impossible, you can

use App Inventor with a phone or tablet if you connect it to the computer with a USB cable.

Setting up a USB connection can be awkward, especially on Windows machines, which

need special driver software to connect to Android devices. (This is not the case with Mac

or Linux, which do not need special drivers.) Unfortunately, different devices may require

different drivers, and, outside of a few standard models, Microsoft and Google have left it tothe device manufacturers to create and supply the drivers. Therefore, you may have to search

for the appropriate driver for your phone. App Inventor provides a test program that checks

if your USB-connected device can communicate with the computer. You should run this test

and resolve any connection issues before trying to use App Inventor with a USB cable on a

device.

Here are the steps for using App Inventor with a USB cable.

Step 1: Download and install the App Inventor setup software

To connect with the USB, you need to first install the App Inventor setup software on your

computer. Follow the instructions below for your operating system.

Instructions for Mac OS X:http://appinventor.mit.edu/explore/ai2/mac.html

Instructions for Windows: http://appinventor.mit.edu/explore/ai2/windows.html

Instructions for GNU/Linux: http://appinventor.mit.edu/explore/ai2/linux.html

IMPORTANT:

If you are updating a previous installation of the App Inventor software, see How to

Update the App Inventor Software at http://appinventor.mit.edu/explore/ai2/update-

setup-software.html.

You can check whether your computer is running the latest version of the software by

visiting the Connection Test Page: http://appinventor.mit.edu/test.


24/130


Step 2: Download and install the MIT AI2 Companion App on your phone

Open your devices QR code scanner and scan the QR code (Figure 1.14) to download the

Companion App from the Google Play Store. If you dont have a QR code scanner installed

on your device, you can download one for free from Google Play. QR Droid Code Scanner

is one example (https://play.google.com/store/apps/details?id=la.droid.qr&hl=en).

Alternatively, follow this link from your device: https://play.google.com/store/apps/

details?id=edu.mit.appinventor.aicompanion3.

Figure 1.14 QR code to download the Companion app from the Google Play Store

After downloading, follow the instructions to install the Companion app on your device. It

will then be on your phone or tablet ready for you to use App Inventor.

NOTE:If you cannot use the QR code, use the Web browser on your device to go tothe Google Play Store. Look for MIT AI2 Companionin the store. When you find

Companion, click the Installbutton for the Companion app.

Step 3. Launch aiStarter (Windows & GNU/Linux only)

Using the emulator or a USB cable requires the use of a program named aiStarter. This

program permits the browser to communicate with the emulator or USB cable.

On a Mac, aiStarter will start automatically when you log in to your account and will run

invisibly in the background.

With Windows, there will be shortcuts to aiStarter from your Desktop, from the Start

menu, from All Programsor from Startup Folder. If you want to use the emulator with

App Inventor, you will need to manually launch aiStarter on your computer when you log

in. You can start aiStarter by clicking the icon (Figure 1.15) on your Desktop or from your

Start menu.

Figure 1.15 The aiStarter icon for Windows


25/130


To launch aiStarter using Windows, double-click on the icon. Youll know that youve

successfully launched aiStarter when you see a window like the following (Figure 1.16):

Figure 1.16 aiStarter start-up window

On GNU/Linux, youll need to launch aiStarter manually from the following folder:/usr/

google/appinventor/commands-for-Appinventor

You can launch it from the command line with/usr/google/appinventor/commands-for-

appinventor/aiStarter &

For help with aiStarter, seehttp://appinventor.mit.edu/explore/ai2/aistarter-help.html.

Step 4: Set up your device for USB (turn USB Debuggingon)

On your Android device, go to System settingsthen Developer options. Turn on

Developer optionsand be sure that USB debuggingis allowed.

On most devices running Android 3.2 or older, you can find this option under Settings>

Applications> Development.

On Android 4.0 and newer, its hidden by default. To make it available, go to System

settings> About phone> Software informationand tap Build numberseven times.

Return to the previous screen to find Developeroptions, including USB Debugging.

Step 5: Connect your computer and device, and authenticate if necessary

Connect your Android device to the computer using a USB cable. Be sure that the device

connects as a mass storage device(not media device) and that it is not mounted as a

drive on your computer. You may have to go to the Finder(on a Mac) or My Computer

(on Windows) and disconnect any drive(s) that were mounted when you connected your

Android device.


26/130


NOTE:On Android 4.2.2 and newer, the first time you connect your device to a newcomputer the message Allow USB Debugging? will pop up. Press OK. This authenticates

the computer to the device, allowing the computer to communicate with it. Youll need to

do this for each computer you want to connect to the device, but only once per computer.

Step 6: Test the connection

Go to the Connection Test page athttp://appinventor.mit.edu/testto see if you get a

confirmation that your computer can detect the device.

TROUBLESHOOTING:If the test fails, go to General Connection Help at http://

appinventor.mit.edu/explore/ai2/connection-help.htmland choose the USB helpoption for

your computer (Windows or Mac). You wont be able to use App Inventor with the USB

cable until you resolve the connection issues.


27/130


2 ActivitiesYou are now ready to start building Android apps on AI2. The Activities and Tutorials are

designed to give you hands-on training in most of the basic components available on AI2 for

app development. The Activities are smaller apps that will have only one or two functions.

The Tutorials are considerably more sophisticated apps with several interrelated functions.

You should complete all the Activities before attempting the Tutorials.

Walkthrough:

Start a new project for each Activity/Tutorial. Name the project accordingly. Click on

Screen 1on the Designerview to change the Propertiesof the app such as Title and

Description. Drag and drop the Componentsfrom the Paletteonto the Viewerto build

the user experience (UX) of your application (Figure 2.1). If you have configured Live

Testing, you should now be able to see your app take shape on your Android device or

emulator.

Figure 2.1 Using the Palette, Viewer and Properties in Designer view

Once you have designed the look and feel of your app on the Viewer, you need to build the

logic of the application. This is done using the Blocksview. Click on the Blocksbutton to

access the Blocks view (Figure 2.2).


28/130


Figure 2.2 Using the Blocks drawers in Blocks view

Find the blocks needed to build your application from the Built-In Drawersand the

Component-Specific Drawers. Drag and drop the blocks onto the empty space in the

Viewerto build your logic. If the blocks fit each other, they will snap together. To delete a

block, press DELor drag and drop the block into the trash can.

You can download the resources images, audio files, etc. for the activities and tutorials

from the Resources link in each Activity/Tutorial sheet. All Resources for the Activities andTutorials are available athttps://goo.gl/Abz5BX.


29/130


Activity 1: TextToSpeech (Loud Mouth)

COL_LoudMouth

Loud Mouth

This app speaks out the text typed into the TextBox using

the TextToSpeech component.

https://goo.gl/8HdAIJ

Project name(AppName)

App Name(Title)

App description

(AboutScreen)

Resources

Screenshot


30/130


Blocks

Walkthrough:

1. Log in to your AI2 account at http://ai2.appinventor.mit.edu.

2. Click on the Start new projectbutton (Figure 2.3) to begin a new project.

Figure 2.3 Click on the Start new project button to open a new AI2 project

ExpectedLearningOutcomes

Components& Attributes

Hint: Type something

Text: Speak

By the end of this activity you should be able to:

Add components into the Designer

Use the Blocks editor

Add a TextBox and Button to the interface

Use the Non-visible TextToSpeech component


31/130


3. Name the project according to the project name(Figure 2.4) given in the Activity sheet.

In this case, the project name is COL_LoudMouth. You can name your project any way

you like as long as it contains only alphanumeric characters and underscores. You cannot

include spaces in your project name (although you can use them in the app name).

It is also good programming practice to use CamelCase notationas your naming

convention. This is the practice of using uppercase letters to indicate the beginningof each new word. More details on CamelCase notation can be found at https://

en.wikipedia.org/wiki/CamelCase.

Figure 2.4 Name your project using the project name provided in the activity sheet

4. Once you have created the new project, you will enter the Designerview inside AI2.

The project name will be displayed as shown in Figure 2.5.

Figure 2.5 The project name is displayed inside the AI2 project

5. A blank phone screen will be visible within the Designerview as shown in Figure 2.6.

This represents what the user sees on their Android mobile phone/tablet screen. You will

be developing the visual aspects of your app on this blank screen. Notice that the screen

indicates the Wi-Fi status, signal and battery strength, and time at the top just like the

screen of an Android mobile device.


32/130


Figure 2.6 Blank phone screen used to develop the visual aspects of the app

6. It is good practice to start your Live Testing at this point so that you are aware of howyour app is taking shape on the actual device. Since you already know how to set up and

start Live Testing from Section 1, you can select which type of testing you want to do (AI

Companion,EmulatororUSB) from the Connectmenu. Once you have connected to

your phone or the emulator, you will see the empty phone screen shown in Figure 2.6 on

your device.

7. Note that Figure 2.6 displays the words Screen 1 on the top of the phone screen. This

is usually the app title. The AI2 platform uses the title Screen 1 by default. Change it to

the app name given in the Activity sheet. In this case, Loud Mouth. To do this, click on

the grey strip that displays the title then navigate to Propertieson the far right. Here

you will first see an empty text box called AboutScreenat the very top of the pane. Thisis the information the user will see when the app is being installed on their device or

when they check the app in the installed apps list. You will need to provide a meaningful

description for your app in this section. For the purposes of this toolkit, use the app

descriptionin the Activity sheet (Figure 2.7). Scroll down the Propertiespane to locate

the Titletext box and change the title from Screen 1 to Loud Mouth. You will now see

that the title on the phone screen has changed to Loud Mouth as shown in Figure 2.8.

Figure 2.7 Provide a meaningful description of the app


33/130


Figure 2.8 Change the title of the app

8. Now you are ready to build your first app. To do this, you will need to use three

components as shown in the Components and Attributessection of the Activity

sheet. Navigate to the Palettelocated on the left of the screen and look for the first two

components, TextBox and Button, as shown on Figure 2.9.

Figure 2.9 Locate the TextBox and Button components

9. Drag and dropthe TextBoxfollowed by the Buttononto the blank phone screen as shown

in Figure 2.10. You will immediately see these components on your Live Test device.

Figure 2.10 Drag and drop TextBox and Button onto the blank phone screen

10. Now locate the TextToSpeechcomponent located inside the Media drawerwithin the

Paletteas shown in Figure 2.11. Drag and drop it onto the phone screen as you did with

the TextBox and Button components. Note that the TextToSpeech component does not

appear on the phone screen. This is because it is classified as a non-visible component.

These components are invisible to the user. They do a certain task in the background. You

will see these non-visible components at the bottom of the phone screen outside the visible

area as shown in Figure 2.12.


34/130


Figure 2.11 TextToSpeech component located within the Media drawer of the Palette

Figure 2.12 Non-visible components shown outside the visible area of the phone screen


35/130


11. Now that you have all the components on the screen, its time to change their

Propertiesaccording to the Components and Attributes section of the Activity

sheet. The words properties and attributes mean the same thing. First click on the

TextBoxon the phone screen. This will highlight the component. Now navigate to the

Propertiessection as you did in Step 7. Scroll down to find the property Hintand

change it to Type something as shown in Figure 2.13. This property gives the user ahint about what to do with the textbox inside the app. You will now see the words Type

something in light grey within the TextBox of your Live Test device. When you click

on the TextBox on the Live Text device this message will disappear, allowing the user to

type some text on the virtual keyboard. Note that the Hint is only a guide to the user. It

is not the contents of the TextBox. The user has to type something into the TextBox for

the app to work.

Figure 2.13 Change the Hint property of the TextBox component

12. Now click on the Buttoncomponent on the phone screen in Designerview to change

its properties. Locate the property Textand change it to Speak. You will see that the

text on the button face has changed from Text for Button 1 to Speak (Figure 2.14).

Figure 2.14 Change the Text property of the button to Speak

13. No property changes are mentioned in the Activity sheet for the TextToSpeech

component, so leave the default properties as they are.

14. Congratulations! You have finished building the visual design of your first app. You willbe able to see it on your Live Test device. However, nothing happens when you press

the Speakbutton, because you need to build the logic that drives the app. This is done

using the Blocksview. You can change between the Designerand Blocksviews using

the two buttons located on the far top right (Figure 2.15).


36/130


Figure 2.15 Use the Designer and Blocks buttons to change between the Designer view and the Blocks view

15. For the app to work, you need to build the logic block given under the Blocks section of

the Activity sheet. In this case, the block is as shown in Figure 2.16.

Figure 2.16 The logic block for the LoudMouth app

16. The logic blocks in AI2 are extremely high level in terms of programming. That means

that the programming is done using logic that can be built using our own human

language (not machine language). You will need to get into the habit of building

sentences of what you want the app to do before building the logic blocks. Imagine that

you are explaining to a user what the app does. In this case, your explanation will be

something like:

The user will enter some text into the text box. When the Speak button is clicked, the app willspeak out the text the user has entered.

Considering the above, the app will not have to do anything with respect to the user

inputting some text into the TextBox. That is an activity under the users control. The

app only needs to act when the Speak button is pressed. Then the app needs to get the

text from the TextBox, convert it to speech and play it back through the speaker. This is

the part we need to build with the logic blocks.

Now lets make it a bit more specific with component names. Note that AI2 assigns a

number to the default name of each component. The first component will be named

XX1. For example, the first button dragged and dropped into the screen will be Button1and the second will be Button2. The first text box will be TextBox1, and so forth. You

can change the names of these components so that they make more sense when building

logic blocks. We will look at that in a later Activity. For now, lets stick to the default

component names.


37/130


The app needs to do the following:

When Button1 is Clicked, TextToSpeech1 reads the Text inside TextBox1 as the Message and

Speaks it out.

Pay special attention to the nouns and verbs underlined in the above sentence. These are

what we need to build within our logic block.

17. Find Button1from the Blockssection on the left of the Blocksview. Click on Button1

to open the blocks drawer for the Button1component. Locate the When Button1.

Click doblock. Drag and drop it into the blank space in the Blocks view as shown in

Figure 2.17. Note that blocks are non-visible components and will not show on the Live

Test phone screen. However, you will be able to use the functionality on the Live Test

device as soon as a complete block is built.

Figure 2.17 Click on Button1 in the Blocks section and drag and drop the when Button1.

Click do block into the empty space.

18. Similarly, click on TextToSpeech1to locate the call TextToSpeech1.Speakblock.

Drag and drop it into the groove in the when Button1.Click doblock as shown in

Figure 2.18. You should hear a clicking sound as the two blocks snap together.

NOTE:Only compatible blocks will snap together in this way. If two blocks dont snaptogether, your logic is faulty.


38/130


Figure 2.18 Join the two blocks so they click together

19. Finally, click on TextBox1 and drag and drop the TextBox1.Textblock so that it fits the

groove in the call TextToSpeech1.Speak messageblock and they snap together as

shown in Figure 2.19.

Figure 2.19 Join all three blocks to make the logic of your app

20.Congratulations! You have just built your first Android app with zero programming. Youcan now test the app on your Live Test device. Type the text Hello World. I just built

my first Android app into the TextBox and hit the Speakbutton to see what happens.


39/130


MinimumInterval: 1000

Pitch: 2.0

Activity 2: AccelorometerSensor (Stop Shaking Me)

COL_StopShakingMe

Stop Shaking Me

This app uses the AccelormeterSensor to detect if the phone

is moving or shaking. When you shake the phone it will ask

you to stop shaking it.

https://goo.gl/85u95x


App Name(Title)

App description

(AboutScreen)

Resources



Use the AccelerometerSensor to detect phone movement

Components

& Attributes

Blocks


40/130


Walkthrough:

1. Having developed your first Android app, to convert text to speech, you must be

eager to develop your second one. This app is not too different from the Loud Mouth

application with respect to the functionality and setup. However, one major difference

is that there are no visual components in this app that is, all the components are

non-visible components. Therefore, the user will only see a blank white screen on their

Android device. You might think that an app needs some form of visual component.

However, the modern concepts of app design tend to concentrate on your other

senses as well as sight. For example, much emphasis is put on the auditory and tactile

components of the user experience (UX) in games. This is of special interest to mobile

device users who have some form of disability. You as a developer need to ensure that

your app is accessible to as many users as possible.

2. You are now familiar with the process of locating components from the Palette. Dragand drop the AccelerometerSensorcomponent, which is in the Sensors drawerof

the Palette, onto the phone screen. You already know where to find the TextToSpeech

component from the previous activity.

3. Change the MinimumIntervalproperty of the AccelerometerSensorto 1000. Note

that time-related properties in AI2 are set in milliseconds that is, when you set the

property to 1000, the AccelerometerSensor checks the movement of the phone every

second.

4. Set the Pitchproperty of the TextToSpeechcomponent to 2.0. You can set a value

between 0 and 2. Lower values give a lower pitch to the voice while higher values

give it a higher pitch. Note that you can find out more about each component and

its properties by putting your cursor on the question mark (?)located next to each

component in the Palette. A popup (Figure 2.20) will not only give you an indication

of what the component does but will also give you a link to more information at the AI2

website, which lists helpful details about all the properties you can set.


41/130


Figure 2.20 More information popup for the TextToSpeech component

5. It is very important that you continue to practise the skill of explaining the

functionality of an app using simple English. This helps in building logic blocks that are

programmatically sound. Lets try to explain the functionality of this app to a user:

When you shake the phone it will speak to you and ask you to stop shaking it.

Now lets put it in a more logical manner:

WhenAccelorometerSensor1.Shaking doXYZ

NOTE:Many programming languages use the dot operator. It means words like is andare (which are called stop words) are replaced with a more machine-friendly format

separated by a DOT . Furthermore, the dois a more definitive way of indicating what

action is taken as a result. For example, I eat when Im hungry can be reworded more

precisely as When Im Hungry do Eat.

Now, in the context of this app,XYZmeans Speak out the words Stop shaking me.

Therefore, the logic can be written as follows:

WhenAccelorometerSensor1.Shaking do(Speak out the words Stop shaking me)

This translates to the block in the Activity sheet as shown in Figure 2.21.

Figure 2.21 The logic block for the Stop Shaking Me app


42/130


Since this app is very similar to the Loud Mouth app, Im sure you can assemble the [when

AccelorometerSensor1.Shaking]block and the [call TextToSpeech1.Speak]blocks.

The only difference is that you will be replacing the user input read through a TextBox with

a static piece of text. To do this you need to use a block from the Built-in blocks, which

are predefined blocks. Click on the Textand select the first block, which is an empty Text

block, and join it with the [call TextToSpeech1.Speak]block as shown in Figure 2.22.

Figure 2.22 Using an empty Text block

6. Now you have to fill in some text in the empty Textblock. Just click on the empty box

in the middle and type Stop shaking me.

7. Congratulations! You just finished your second app. Give the phone a shake and see

what happens. You can modify the Pitchof the TextToSpeechcomponent to go from

a male voice to a female voice. I hope you are using an actual Android device for yourLive Testing because it is almost impossible to shake an emulator.


43/130


Activity 3: SpeechRecognizer (Dictation)

COL_Dictation

Dictation

This app uses the SpeechRecognizer component to take

dictation from you.

https://goo.gl/XYCiqM


App Name(Title)

App description

(AboutScreen)

Resources

Screenshot


44/130


Blocks

AlignHorizontal: Center

Text:

Image: microphone73.png

Hint: Your dictation appears here

Width: Fill parent

Height:Fill parent




Use the SpeechToText component

Apply an image to a button

Manipulate Height, Width and Align attributes Concatenate text strings using Join


45/130


Walkthrough:

1. You learned how to change the Titleof the Screen1component in the Loud Mouth

app. However, the component name remains Screen1. You might now wonder if a

single app could have multiple screens because they are named 1, 2, 3 Yes, a single

app can have many screens, but that is beyond the scope of this toolkit. You can developextremely powerful apps with just one screen as you will realise once you start the

Tutorials.

Just as you changed the Titleand AboutScreenproperties of Screen1, set the

AlignHorizontalproperty to Center, which will ensure that all components on

the screen will horizontally align to the centre of the screen, unlike the Loud Mouth

app where the componen]ts were aligned to the left by default. The dropdown

alignment menu gives you the options of left, centerand right. The properties for the

AlignVerticalproperty are top, centerand bottom.

2. You learned how to change the text of a Buttoncomponent. Now you will learn howto change the Imageattribute, which is what you will use for almost all of your future

apps. The Image attribute sets an image file such as a .jpeg or .png as the background

of a Button. In this case it uses the file microphone73.pngwhich is available in the

Resourcespack (seetheResources section of the Activity sheet). Once you have

downloaded the Resources pack, extract it to a convenient location. Then use the Image

property of Button1to upload the Image onto the AI2 server as shown in Figure 2.23.

Figure 2.23 Upload an image from the Resources pack

3. Button1will now display the image of a microphone. However, you will still have Textfor Button1 in the middle. To remove this, just keep the Textproperty empty.

4. You will find the SpeechRecognizercomponent inside the Media drawerof the

Palette. This is an app with two independent logic blocks. Build the first logic (Figure

2.24) block as follows:


46/130


When Button1.Click, capture the speech of the user until the user stops speaking.

Figure 2.24 The first logic block, which captures the users speech

5. Since this is a dictation app, the app is supposed to record a long speech sentence by

sentence, just like a secretary would do. Therefore, any new sentence spoken into the app

needs to be appended to the previous sentences. So the logic needs to be:

When the user has stopped speaking, append the new text to the existing.

This is done using the block shown in Figure 2.25.

Figure 2.25 Appending text to the existing text when the user has stopped speaking

6. Two aspects will be new to you. The first is how to increase the number of grooves in

the joinblock located within the Text drawerof the Built-in blocks. Click on the blue

square.This will give you the option of adding or deleting as many grooves as you wantas shown in Figure 2.26. To add a groove, just drag and drop a block into the

join block. To remove a groove just select one and press DEL.

Figure 2.26 Adding and deleting grooves in a join block


47/130


7. The second aspect would be how to get the [get result]block from the [when

SpeechRecognizer.AfterGettingText do]block. Just put your cursor on (but do

not click) the Resultparameter of the [when SpeechRecognizer.AfterGettingText

do]block. This will result in a popup as shown in Figure 2.27. Just drag out the

block and use it. This block holds the text that was spoken by the user.

The Result parameter is referred to as the return valueof the [SpeechRecognizer.AfterGettingText]block. A single block could have multiple return values.

Figure 2.27 Getting the result in a SpeechRecognizer.AfterGettingText block

8. Congratulations! Thats app number 3. Give it a go on your Live Test device. You should

be able to dictate your speech while the app converts it to text which can be emailed

or texted as you wish. If you are using an emulator, make sure you have a microphone

connected to your PC.

In the Resources:

microphone73 by Sebastien Gabriel http://sebastien-gabriel.com fromwww.flaticon.comis licensed under Creative Commons BY 3.0http://creativecommons.org/licenses/by/3.0.


48/130


Activity 4: Canvas (Join the Dots)

COL_JoinTheDots

Join The Dots

This app allows you to draw a picture by joining the dots

on a Canvas component.

https://goo.gl/JQMOLo


App Name(Title)

App description

(AboutScreen)

Resources

Screenshot


49/130


Blocks

BackgroundImage: pattern.png

Width: Fill parent

Height: Fill parent

PaintColor: Red

Text: Clear




Use the Canvas component

Set a Canvas BackgroundImage

Detect dragging of a nger on the screen


50/130


Walkthrough:

1. The Canvascomponent found under the Drawing and Animation drawerof

the Paletteis an important component when it comes to mobile apps. This is the

component that facilitates creative aspects of an app, including game design. With the

gamificationof education taking centre stage in many forums, mastering the Canvas

component will allow you to build apps that reflect the latest trends.

2. When considering the properties of the Canvas, make it fill the device screen so that

the game play is in full screen. To achieve this, you will need to set the Heightand

Widthproperties to Fill parent.The other settings are Automatic, where the device

determines the dimensions, or the Custom setting, should you specify the number of

pixels. The Custom setting should be used sparingly as you want your app to be used

on multiple devices of varying dimensions. The Fill parent setting ensures that your

component fits any screen regardless of dimensions.

3. Loading a BackgroundImagefor a Canvasis the same as loading an Imagefor a

Button. The PaintColoris the colour of the lines you will be drawing on the Canvas.You can get more info by clicking on the ?

4. The Dictation app taught you how to get results from a block that had return values.

This one is no different. Just make sure you dont click.

5. Complete the block and test your app.


51/130


Activity 5: Ball and ImageSprite (Move the Ball)

COL_MoveTheBall

Move The Ball

This app uses a ball and an ImageSprite to simulate a golf

game. The ball needs to be flung towards the hole. If the

ball hits the hole the app will say Hit.

https://goo.gl/cfnhh1


App Name(Title)

App description

(AboutScreen)

Resources

Screenshot


52/130


ScreenOrientation:Portrait

BackgroundColor: Green

Width: Fill parent

Height: Fill parent

PaintColor: Red

Radius: 7

Picture: golf25.png

Source: Sv-hit.ogg




Use the Canvas component

Set a Canvas BackgroundImage

Detect dragging of a nger on the screen


53/130


Blocks


54/130


Walkthrough:

1. The ScreenOrientationproperty of the Screencomponent determines the orientation

of the app on the device screen. Usually it is set to Unspecified, which lets the device

decide how the app is displayed on the screen according to the settings of the screen.

The property Sensorspecifically instructs the app to reorient itself based on the sensor

direction of the device. The Userproperty allows the user to select the orientation of

the app. If you want to lock the orientation of an app, you can use the Portraitand

Landscapeproperties to instruct the app to stay in one orientation regardless of the

device orientation. In this case, you will be choosing Portrait.

2. The Ballcomponent and the ImageSpritecomponent are the key components used to

build any animation or game on the AI2 platform. They are located in the Drawing and

Animation drawerof the Palette. Change the PaintColorand Radiusof the ball to

suit the app. Set the Pictureof ImageSprite1to golf25.png(in the Resources pack).

3. The Playercomponent located in the Media drawerof the Paletteis used to play back

sound clips such as music or alert sounds. For shorter sound clips you can also use theSoundcomponent. However, the Sound component is not compatible with all Android

devices. Therefore, it is safer to always use the Playercomponent in your apps. Set the

Sourceproperty of Player1to Sv-hit.ogg(in the Resources pack).

4. This app has multiple aspects and cannot be explained in a single sentence. The

description of the app will be as follows:

The ball and hole will appear in a random location on the screen when the app starts for the first

time. The ball needs to be flung towards the hole. If the ball hits the hole the app will say Hit.

The location of the hole and the ball are re-set to random locations each time the ball hits the

hole.

5. To build the logic blocks for the app you will need to break the app descriptioninto individual sentences as follows:

The ball and hole will appear in a random location on the screen when the app starts for the first

time.

Since you will be resetting the location of the ball and the hole to random locations

multiple times, it makes sense to create one logic block that can be reused. This is a core

concept in object oriented programming (OOP). To achieve this, you will use a [to

Procedure do]located in the Proceduressection within the Built-in blocks(Figure

2.28). When you write large apps you will be using many Procedures. In order to keep

track of them you need to name them in a sensible manner. Usually the name will reflect

what the procedure will do. In this case, name the Procedure SetBallAndHoleas shown

in Figure 2.29.


55/130


Figure 2.28 Creating a new procedure

Figure 2.29 Renaming a procedure

6. You now need to build the logic blocks for the Procedure SetBallAndHoleas shown

in Figure 2.30. Use the [call Ball1.MoveTo]block and [call ImageSprite1.MoveTo]

blocks to set the locations of the Balland the ImageSprite.

Figure 2.30 Procedure for randomly setting the positions of the Ball and the Hole

To set the X and Y coordinates to random values, use the [random integer from xx

to xx]block located in the Mathsection of the Built-in blocks(Figure 2.31). Note

how the blocks from each section of the Built-in blocksare colour-coded the Math

blocksare light blue, Text blocksmaroon and Procedure blockspurple. This colour

coding will help you to locate blocks easily within your app.


56/130


Figure 2.31 Using the random integer block in the Math section

The Ball and the Hole need to appear within the boundaries of the device screen. They

will be invisible if they go beyond that. Since you are building the app for multiple

devices with various screen sizes, you cannot define the bounds as an exact number. The

coordinates (1,1) always represent the top left-hand corner of the

device. You need to set the maximum X value and maximum Y value from there.To do this, click on and press DEL. Fill the space with and

blocks as shown in Figure 2.30. Now you have built your

Procedure.

7. You need to set the locations of the Ball and Hole at app starting. This is achieved using

the [when Screen1.Initiate do]block (Figure 2.32). This block is the first block

executed when the app is launched. The [call SetBallAndHole]block is used to execute

the SetBallAndHole Procedure. This block is located inside the Proceduressection.

Figure 2.32 Calling a procedure at Screen Initialize

You have now built the logic for the sentence:

The ball and hole will appear in a random location on the screen when the app starts for the

first time.

8. The second sentence is as follows:

The ball needs to be flung towards the hole.

You will use the [when Ball1.Flung do]block (Figure 2.33) to determine what

happens to the ball when it is flung on the screen by the users finger. Use the return

value to set the direction of the Ball.


57/130


Figure 2.33 The block to determine what happens when the Ball is flung by the user

The Speedat which the user flings the Ball can be set from the return

value. As this is a small number, use a multiplication blockfrom the Math sectionto

multiply the speed by a factor of 10 before setting it as the Speed of the Ball. This will

ensure that the ball moves fluidly when the user flings it.

To stop the Ball at the edge of the screen, build the block shown in Figure 2.34. If you

want the Ball to bounce back off the edge of the screen, build the logic block as shown

in Figure 2.35.

Figure 2.34 Moving the Ball back inside the bounds of the screen

Figure 2.35 Making the Ball bounce back off of the edge of the screen

9. Now you need to build the logic block for the third and final sentences:

If the ball hits the hole the app will say Hit. The location of the hole and the ball are re-set to

random locations each time the ball hits the hole.

This is achieved using the [when Ball1.CollidedWith do]block. We need to check

whether the Ball has collided with the Hole. This is determined by the otherparameter

of the block. Set it to ImageSprite1. The Playerwill play the sound clip once a

collision takes place. Once the player has stopped, the SetBallAndHoleprocedure resets

the locations.


58/130


Figure 2.36 Detecting a collision between the Ball and the ImageSprite

10. Congratulations! You have now mastered the Canvascomponent. Now its time to play

some golf.

In the Resources:

golf25.png by Yannick http://yanlu.defromwww.flaticon.comis licensed under Creative

Commons BY 3.0. http://creativecommons.org/licenses/by/3.0.

Sv-hit.ogg by M. Kihlstedt, N. Vion (The Shtooka Project) [CC BY 2.0 fr (http://

creativecommons.org/licenses/by/2.0/fr/deed.en)], via Wikimedia Commons. http://

upload.wikimedia.org/wikipedia/commons/3/32/Sv-hit.ogg.


59/130


Activity 6: TinyDB, PhoneNumberPicker andPhoneCall (Call a Friend)

COL_CallAFriend

Call A Friend

This app uses the PhoneNumberPicker and a TinyDB to

store a contact in a list and make a phone call to a contact

from that list.

https://goo.gl/LvFem0


App Name(Title)

App description

(AboutScreen)

Resources

Screenshot


60/130



Use nested Layout components to achieve a complex

look and feel in the interface

Use the PhoneNumberPicker to select a contact from thephones address book

Save, retrieve and delete tag-value pairs from the TinyDB

Populate a ListPicker using a TinyDB

Make a call using the PhoneCall component

AlignHorizontal: Right

Width: Fill Parent

Image: picture-add-icon.png




61/130


Blocks

Image: Address-Book-icon.png

Text:Name

Text:

Text: Name

Text:

Image: picture-remove-icon.png

Image: app-phone-icon.png

Components& Attributes(contd)


62/130


Walkthrough:

1. How your app looks on a users phone determines most of the apps success, so it is

very important to pay attention to its theme, icons, wording, colour scheme and layout.

Your app also needs to be consistent it should look the same on any phone or tablet

regardless of the make, model or screen size. To achieve this consistency, you will be using

the components found in the Layout drawerof the Palette. The

component aligns other components vertically on the screen as shown in Figure 2.37.

You can align the components within the VerticalArrangementby manipulating the

Propertiesof the component as shown in Figure 2.38.


63/130


Figure 2.37 The VerticalArrangement component

Figure 2.38 Properties of the VerticalArrangement component

The arranges the components horizontally across the screen as

shown in Figure 2.39. As with the VerticalArrangement, you can align the components

within the HorizontalArrangementby manipulating the Propertiesof the component.


64/130


Figure 2.39 The HorizontalArrangement component

2. The PhoneNumberPickerand PhoneCallcomponents are located inside the Social

drawerof the Palette. The PhoneNumberPickeris used to pick the details of a

contact from the phones contacts list. The following properties can be manipulated once

the contact has been picked from the list:

ContactName: the contacts name

PhoneNumber:the contacts phone number

EmailAddress:the contacts email address

Picture:the name of the file containing the contacts image, which can be used as a

Picture property value for theImage or ImageSpritecomponent.

More details about the PhoneNumberPicker can be found at http://ai2.appinventor.mit.

edu/reference/components/social.html#PhoneNumberPicker

The PhoneCallcomponent is a non-visible componentthat is used to dial out a particular

number. It is normally used with a PhoneNumberPickercomponent. More details on

the PhoneCall component can be found at http://ai2.appinventor.mit.edu/reference/

components/social.html#PhoneCall

3. Another component you are encountering for the first time is the Labelcomponentinside the User Interface drawerof the Palette. Labels are widely used in apps to

display static text. The Text property of the Label cannot be changed by the user (unless

the app wants the user to do so). It is always set or changed by the app. Labels are

normally used to describe a field for example, what the user needs to enter into a

TextBox.

4. Note that two of the Labelsand the two Buttonshave been renamed lblName,

lblPhoneNo, btnRemoveand btnCall. This makes it much easier for you to identify

the components when you are building the logic blocks. To rename a component, select

it from the Components listin the Designer view. Then press Renameat the bottom

of the pane (Figure 2.40). Type the new name in the popup window and press OK. This

action will rename the component and all associated blocks with the new name you have

provided. Additionally, you can select a component and press Deleteat the bottom of the

pane to remove it from your project.

IMPORTANT:Be careful when you do this as it will also delete all associated logic blocks

you have built.


65/130


NOTE:When renaming, prefixes such as lbl short for Label and btn short forButton are used. These are standard naming conventions used in programming. It

is good practice to follow these conventions in your apps.

Figure 2.40 Renaming a component

5. When you are developing your apps, you will find a constant need to store data in a

database that can be accessed later. If you store a value using a Variable block built

using the blocks inside the Variables sectionof the Built-in blocksin Blocksview,

you will only be able to use that value during the execution of your app. Say, for

example, you want to store the highest score of a game you have developed and display

it. You can do this using a Variableblock such as the one shown in Figure 2.41. This

will work fine until you are running the app. However, once you exit the app the high

score value is lost that is, the next time you open the app, the high score value would

be initialised to 0.

Figure 2.41 Using variables to store and display a value


66/130


To be able to recall a value even after the app has been restarted, you will need to use a

database. There are four different types of non-visible components available for storing

information under the Storage drawerof the Palette. The components are as follows:

File: Non-visible component for storing and retrieving files. Use this

Documents

Educational App Development Toolkit for Teachers and Learners