video version

Thunkable is a drag and drop coding language that allows beginners to learn coding
by building apps for their iPhone or Android phone. This tutorial walks you through building a simple app that speaks words when you click a button.

Design the App

• On your computer, open a browser to Thunkable.com and register with your Google account (or sign in if you already have an account)
• Create a new app and name it, “SayIt”.
• In the initial Design screen, drag a Button into the screen. Using the Properties panel on the right, change the Button’s Text property to “Say it”
• Scroll down in the components in the lower-left panel to find the Voice folder. Drag in a Text To Speech component, which is an “invisible” component because you don’t see it on the screen.  When you drag in an invisible component, it appears below the screen/ Your Design should appear as:

Code the App’s Behavior

• Select the Blocks tab in the top-left (next to the Design Tab). The Blocks editor is where you code the interactive behavior of an app
• Click on Button1 in the lower left of the screen and drag in a “when Button1 Click” block.
• Click on Text_To_Speech1 and drag in a Speak block.
• Click on the red Text folder and drag out a red text (“ “) block. Type the words you want the app to say in the red box (e.g., “You are the best!”).

Plug these three blocks together so they look like:

Test the App

• On your phone or tablet, open the App Store (or Play Store) and search for then install an app called, “Thunkable Live”. Open the app and login with the same email account you used on the Thunkable website
• Back on your computer, click on “Live Test” in the top menu. You should see your app on the device. Click the button– do you hear the words?

Customize the App

• Change the text that is spoken and retest to make sure it works.
• Modify the app so that on a long-click, it says something different than on the regular click (hint: check out the different events (“when” blocks) in the Button). Test your change once you’ve made it.
• Modify the app so that it speaks a language other than English. In the Designer, change the “default language” of the Text to Speech component.
• Modify the app so that some other words are spoken every five seconds. You’ll need to add a Timer component in the Designer, and the “when Timer.Fires” event handler in the blocks.
• Modify the app by adding a TextInput component. TextInput allows the user to type in some text. Make it so clicking the button speaks whatever text was typed in. Note: the “with TextInput get Text” block gets you the text the user has typed in.

Note: try these customizations on your own. If you get stuck, there are video lessons for all but the last here

Create a Travel App that Translates Words

Using what you’ve learned, build an app that helps a traveler in a foreign country. The buttons in the app should be labeled with common but important phrases/questions in the user’s language (e.g., where is the bathroom?) When you click a button, you hear the translated phrase/question spoken aloud.

You’ll need the Translator component. Be sure and set its source and target language properties, and set the Text_to_Speech component’s language property as well.

Spend some time to make this app beautiful with a nice background image and use of color. And spend time thinking of how you or the person you’re building it for might use it– you can make an app that helps someone!

Build and Install the App

You’ve really only tested the app using the Thunkable Live app. You can also install an app so that it remains on your phone/tablet:

• In Thunkable (on your computer) choose “Download” from the top menu, and select iOS or Android depending on the type of phone you have.
• You should receive a link in your email 20-50 minutes later. Click on the link to install the app. You’ll need to trust “Rappidly”, Thunkable’s Business name, in your settings to install the app.