Module 2 App Development

Text-To-Speech App

(Talk To Me)

IM HAPPY Team

App Inventor Tutorial – Talk To Me

This quick app will help you to get familiar with the App Inventor interface. There are 3 key areas in AppInventor:

The Designer – the place where you design the app The Blocks Editor – the place where you add the functionality to the app The Emulator – the computers copy of a virtual mobile device that tests

your app

In this tutorial you will develop an app which will ask you to enter your name in a text box. When you click on the ‘Talk To Me’ button the app will print a message back to the screen and also say it out loud to you.

1

Step 1: Open App Inventor To work online: Go to http://ai2.appinventor.mit.edu/

This will take you to the Google login page, shown below. Use your google account details to log in.

When you login you will get the app Inventor page which looks like this ….

2

This little window will appear. Give the project the name ‘TalkToMe’ and click OK. The project is now added and you will be taken to the designer screen.

*NOTE: The project name should be all one word; it cannot be separated with spaces.

This is blank as we haven’t created any projects yet. Click on ‘New Project’ to create our first app.

*NOTE: As you may not be using the same laptop/computer all the time you will want to UNTICK the ‘Stay signed in’ check box when logging into your Gmail.

Step 2: Getting to know the Workshop

There are some important parts that you should be familiar with as outlined below:

The Palette Panel – This is where you will get all the interface components you need to start designing; like the buttons, images and labels. You can explore all the different heading to see what other components you can use.

The Viewer Panel– This is the interface of the app, you can drag your components on to visualise the layout of the app.

The Components Panel – As you add components to the interface they will be added to the Components Panel. Here you can rename them appropriately or delete them from your app.

3

Properties Panel

Components Panel & Media

Viewer Panel

Palette Panel

The Properties Panel – Each component will have different properties, by clicking on the component you can change the properties in this panel, e.g text/colour/size etc.

Step 3: Build the Interface of Talk To Me App

To begin, we need 4 components. These include:

2 labels A text box A button

Let’s start by naming our application.

1. In the Properties Panel change the title of the screen to ‘Talk To Me’2. You will see that the name of your interface page has also changed to ‘Talk To Me’

4

1.

2.

Next: Select the Label component from the basic tool (aka the User Interface) palette and simply drag it onto the screen viewer, your screen should be similar to the one shown below.

1. Select the Label component from the basic tool (aka the User Interface) palette and simply drag it onto the screen viewer

2. When you add a component to the screen it is available on the components panel3. To change what your label says, go to the Properties Panel and change the Text.4. You should see in the Viewer the text within the label has been changed.

Similarly, drag in a text box and a button from the User Interface Palette. For the button change the default text, ‘Text for label 1’, in the Properties section so that the button now shows ‘Talk To Me’.

5

1.1.

3.

2.

4.

Your Viewer and Components Panels should now look like this….

*NOTE: You can click on any of the components in the Viewer Panel and move them about. Click on the label and drag it to its new position. You will notice the blue bands show you where the label components can be placed.

6

The next interface component we need is a label which will eventually print what we put into the text box back to us. We only want this label to be shown when the button is clicked, so we have to make it hidden to begin with.

1. Select the label component and drag it onto the Viewer.2. Go to the Properties panel for the label and set the ‘Visible’ property to hidden.3. Even though the label cannot be seen on the Viewer, it still appears on the

Components panel.

7

3.1.

2.

Step 4: Add the functionality to the Interface

Once the interface is ready we can set the functionality of the components. What we want to happen can be described in the following steps:

1. The user inserts text into the text box 2. The user clicks on the ‘Talk To Me' button3. The program must take what has been put into the text box and display it in the hidden label - the label must therefore become visible.

The functionality of the program is added by using the Blocks Editor - Along the top of your App Inventor panel you will notice a button, at the top right, which says ‘Blocks'. Click on this button.

The Blocks Editor window is shown below.

There are a few things which are important in the blocks editor.

8

When you click on any of these areas, a screen will pop up containing jig-saw pieces that relate to that particular topic or component.

Control: if, for each, do while, open another screen, close screen. Logic: true, false, not, equals, and, or operators. Math: number piece, operators such as plus, minus, multiply, divide, random

integers. Text: text piece, join two things, length, compare texts, contains, replace. Lists: create an empty list, make a list, add to a list, and check items of a list. Colours: includes most primary colours or you can create your own colour. Variables: creating a variable, get a variable, set a variable. Procedures: creating your own procedure to carry out a particular task.

Let’s start adding functionality!

9

The 'Built-In' section contains generic pre-programmed code blocks.

The ‘Screen1’ section refers to the components we put on our screen and the pre-programmed code blocks that each component can do.

First we want to tell the app what to do when the ‘Talk To Me’ button (Button1) is clicked – display to the screen what has been written in the text box.

If you click on Button1 from the ‘Screen1’ section you will see the ‘Jigsaw pieces’. These pieces show you the events that the button component can have (the green pieces).

Click on the ‘Button1.Click’ piece and drag it onto your Blocks Main panel.

10

Button1.Lost FocusThe event for when the button no longer has focus

Button1.LongClickThe event for when a user clicks and holds the button

Button1.GetFocus The event for when the button has the focus

Button1.Click The event for when a user clicks the button

You’ll notice the gap in the middle of this piece which allows us to insert the action that we want to happen when the button is clicked. First we want to set the ‘Label2’ to visible again so that we can show the user our text. We do this by clicking on the ‘Screen1’ section and clicking on the Label2 component.

Your Code Block should now look like this..

Next, we need to set the ‘set Label2.Visible to’ piece to be a visible property so that we can see it on the screen. As we set Label2’s visible property to ‘hidden’ at the beginning, it could also be seen as setting the visible property to false. Therefore we will be assigning the ‘set Label2.Visible to’ a true value.

This true value can be found in the Built-In section under Logic. You should see a light green jigsaw piece with true on it. This can be dragged onto the viewer and should neatly click into the end of the ‘set Label2.Visible to’ piece.

Your Code Block should look as follows. This indicates that:

1. When Button1 is clicked,2. Set the visible value of Label2 to be true.

11

Again for the ‘Label2’ component a list of available events appear.

Here you can change the background colour, the height of the label, the text, the text colour and also the visible property.

We want to change the visible property. Drag over the ‘set Label2.Visible to’ piece into the ‘button1.click’ piece.

*NOTE: These pieces fit together like a jigsaw. If they do not fit it means that the event is not correct and the program will not run.

Now when the user clicks on the ‘Hello You’ button, Label 2 on our interface will be visible. We then want this label to contain the words that we put into the text box.

To change the text of this label:

Go to the ‘Screen1’ section again and click on the Label2 component. Select the ‘set Label2.Text to’ piece. Drag it to the ‘Button1.Click’ block below the ‘set Label2.Visible to ’ piece and is

should click in underneath

We want to set the Label2 text to what has been entered into the text box (TextBox1).

Go to the ‘Screen1’ section again and click on the TextBox1 component. Scroll down the list of jig-saw pieces to find the ‘TextBox1.Text’ piece. Drag this into the Viewer and click in onto the ‘set Label2.Text to’ piece.

Your Code Block should look as follows.

This indicates that:

12

1. When Button1 is clicked,2. Set the visible value of Label2 to be true.3. Set the text of Label2 to display the text from TextBox1 to the screen.

Step 4: Try it out – Connect to the device and test the program

To test your application everyone has the use of a built-in virtual emulator.

In order to test to see if our Talk To Me app works we can see it on an emulator – this is a little on screen phone which acts like a real phone that allows us to test the app.

*NOTE: You might have noticed that an aiStarter command has been running in the background. It is important that this aiStarter command continues to run as it provides the commands to allow you to create the emulator.

To connect to an emulator:

Click on the ‘Connect’ button along the top toolbar within the App Inventor Screen.

A drop down list of 3 items will appear. You should choose ‘Emulator’.

You will notice that some of the following ‘Connecting…’ screens appear as well as the Emulator. You should allow the Emulator to fully load with your app before you attempt anything. This may take a few seconds!

13

Your app will appear on the emulator once it has transferred. Click on the textbox and write something in. Click on the ‘Talk To Me’ button and watch it be displayed on the screen to you.

You have just created your first App!

Now to get the App actually talking to you…

You can use these buttons to smoothly move between Designer and Blocks Screens to easily make changes as and when you need to.

Go back to your App Inventor screen by selecting the ‘Designer’ button.

What we want to happen is:

1. When Button1 is clicked,2. Set the visible value of Label2 to be true.3. Set the text of Label2 to display the text from TextBox1 to the screen.4. The app should then say the words from TextBox1 out loud.

14

What we need to do is:

1. Go to the ‘Media’ section of the Palette and choose the ‘TextToSpeech’ component.

2. Drag this onto the screen. 3. You will notice that this component cannot be seen on the page but is shown

under the heading of ‘Non-visible components’ below the screen Viewer. It can also be seen under the list of Components that are included on the screen.

15

1.

2/3.

We now need to tell the app what to do with this component…

Go back to your App Inventor screen by selecting the ‘Blocks’ button.

Drag the ‘call TextToSpeech1.Speak message’ piece into the Viewer and click it in under the other pieces within the ‘when Button1.Click’ function.

Your code block should look as follows:

We want to connect this to the TextBox1.Text piece again – this is found in the Screen1 section under TextBox1.

16

You should notice that the ‘TextToSpeech’ Component is now in the list of components under ‘Screen1’.

If you click on this component you will see all the jig-saw pieces that relate to it.

Your final code block should look like this:

Your Emulator should still be open in the background. Click on the icon along the bottom. This should show your Emulator. If you now type something into TextBox1 and press the Talk To Me button you should hear the App repeat what you have written in.

*NOTE: Ensure the sound on your computer is not on mute!

You have just created a functional ‘Talk To Me’ App! Well Done

17