Chapter 2.2 - I Have a Dream Tutorial Part 1
2.2. I Have a Dream Tutorial
Time Estimate: 45 minutes
2.2.1. Introduction and Goals
This is the "I Have a Dream" app, the first app you’ll build for the Thunkable Mobile CSP course. You'll learn that app building is a creative process and how to use Thunkable to write code that plays Martin Luther King’s “I Have a Dream” speech when the user interacts with the phone’s screen.
Objectives:
In this lesson, you will learn to :
Follow a walkthrough to create the I Have a Dream app on a mobile device.
Navigate the Thunkable programming platform.
Develop your understanding of what a Thunkable project is.
Develop your understanding of event handlers.
Develop your understanding of how an app makes decisions with if-else control blocks.
Getting Ready
Download the following media files: 228px-MLK_and_Malcolm_X_USNWR_cropped.jpg, king.mp3, malcolm152x129.jpg, malcolmx.mp3, mlk.jpg, mlk152x129.jpg
Create a new Soundboard project on x.thunkable.com.
I Have a Dream Tutorial
Navigating Among the Three Main Views
There are three main views that you will use in building apps.
My Projects View
The My Projects View provides you with a list of your projects. Use this view to create, save, delete, and otherwise manage your projects. To open the Soundboard project, just click on its name.
Designer View
Your project will open in the Design View, which is used for designing the app’s User Interface (UI).
As you can see, the Design View contains three panels: the Components panel, which will include the Component Tree, a list of elements contained in your app, and a list of project resources that have been uploaded; the Viewer, which contains a mock-up of your app’s user interface; and the Properties panel, which contains a list of the properties for the selected component. Make sure you can identify each of these panels.
For the app shown here, the Screen 1 component is selected in the Components panel and its properties are shown in the Properties panel. As the app designer, you can change the default values of the screen’s title and other properties.
Rename Screen 1 to “Speech Player”
Change the screen’s BackgroundColor to rgba(0,0,0,1) or black
Change the screen’s Screen Orientation to “portrait.”
Blocks Editor View
The Blocks Editor View is used to create the code blocks for your apps. To navigate to the Blocks Editor View, click on the Blocks button.
The Blocks View consists of two main panels: the Blocks panel on the left, which is also known as the Toolbox, and the Viewer panel on the right, which is known as the Workspace. The Blocks panel contains a list of Built-in blocks, which include blocks for doing Math, setting Colors, and other tasks. For example, if you click on “Math”, you will see a drawer full of all of the various math operations that you can do in Thunkable. The Toolbox also contains a list of Component blocks. You can use the search bar above the toolbox to find matching blocks to drag into the Workspace. So far in your project, there is only the Screen component. If you click it you will see the various operations you can perform on that component.
See the Getting Started Guide in our Docs to learn more about starting out in Thunkable.
The I Have a Dream User Interface
User Interface
What is the app’s user interface (UI)? It is that part of the app that interacts with the user. It includes any elements that the user can see, hear or feel. Designing an attractive and easy-to-use UI is an important part of building good mobile apps.
The user interface (UI) for our I Have a Dream app will consist of four Components, an Image, a Sound, and two Labels. Remember that this is done in the Design View.
Your Viewer panel should now look like this when your app is complete.
Adding a Label Component
Drag and Drop a Label component from the Basic User Interface category to the Viewer. It will be named Label 1.
Select Label 1 by clicking on it in the Viewer or the Components panel.
Click on its Text property and change it to “Martin Luther King”.
Add a second Label component and set its Text property to “Tap to hear the speech”
Adding an Image Component
Drag and Drop an Image component from the Basic category to the Viewer. It will be named Image 1.
Select Image 1 by clicking on it in the Viewer or the Components panel.
Click on its Picture property and select the “mlk.jpg” image from the drop-down list.
Change the Height to 311 and Width to 311. Set the Picture Resize Mode to Contain.
Coding the App’s Behavior
It’s time to get the app to play the speech when we touch its screen. For this we will be using the Blocks editor. So switch now to the Blocks Editor View.
Event Driven Programming
Mobile apps use a style of programming known as event driven programming. An app’s behavior depends on how the user programs the app to respond to various events. An example of an event would be when the user clicks on a button or when the phone’s location changes or when a text message is received. We’ll write apps that respond to all of these events.
For the I Have a Dream app, there is only one event that we care about, the Image click event.
Click on the Image 1 component in the Toolbox.
Drag and drop the When Image 1 Click block into the Workspace.
This is an example of a when event block, which is also called an event handler block.
Notice that it has an empty do slot. When Image 1 is clicked, the app will do whatever code we put into this slot.
For the I Have a Dream app, we want it to play Martin Luther King’s speech when the image is clicked.
Click on the Sound component in the Toolbox. This will open the Sound drawer.
Drag and drop the Play block into the do slot. If your computer’s sound is not muted, you should hear an audible ‘click’ as the block snaps into place.
To summarize, whenever the user clicks on Image 1, the app will respond by playing the sound media file. This completes the coding of the I Have a Dream app.
Running the App on the Phone (or Tablet)
You can test the app on your laptop/desktop computer using the Preview button or the Live Test button. If you want to test on a mobile device, it is recommended that you install the Thunkable Live app. Follow these setup instructions.
2.2.3. Summary
In this lesson you learned how to:
Learning CRD-2.B: Expxlain how a program or code segment functions.
Learning CRD-2.B: Identify input(s) to a program.
Learning CRD-2.B: Identify output(s) produced by a program.
2.2.4. Self-Check
Vocabulary
Here is a table of technical terms we've introduced this lesson.
Check Your Understanding
Complete the following self-check exercises.
Q-1: What type of input does the I Have a Dream app expect?
A. Text
B. Audible
C. Tactile
D. Visual
Activity: 2.2.5.1 Multiple Choice (mcsp-2-2-1)
Q-2: What type of output does the I Have a Dream app generate?
A. Text
B. Audible
C. Tactile
D. Visual
Activity: 2.2.5.2 Multiple Choice (mcsp-2-2-2)
Q-3: Thunkable is an example of which of the following? (Choose all that apply)
A. An Integrated Development Environment (IDE)
B. A cloud application
C. A software system for developing mobile apps
D. A programming language
Activity: 2.2.5.3 Multiple Choice (mcsp-2-2-3)
Q-4: Which of the following elements would be considered part of the User Interface for an app? (Choose all that apply)
A. A button that appears on the screen
B. The color of the app's background screen
C. An error message that appears when something goes wrong
D. An audible click that happens when the user taps a button
E. The app's memory usage
Activity: 2.2.5.4 Multiple Choice (mcsp-2-2-4)
Q-5: Which Palette drawer (folder) contains the Player component?
A. The User Interface drawer
B. The Drawing and Animation drawer
C. The Media drawer
D. The Social Drawer
Activity: 2.2.5.5 Multiple Choice (mcsp-2-2-5)
Q-6: Which of the following are components? (Choose all that apply)
A. Label
B. Player
C. Button
D. Button.Image
E. Player.IsPlaying
Activity: 2.2.5.6 Multiple Choice (mcsp-2-2-6)
Q-7: Which of the following would be considered an event on your smartphone? (Choose all that apply)
A. The phone's location changes
B. The user taps on the screen
C. The phone receives a text message
D. The phone's internal clock ticks
E. The app plays a sound clip
Activity: 2.2.5.7 Multiple Choice (mcsp-2-2-7)
2.2.5. Reflection: For Your Portfolio
Answer the above portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc, where you may use File > Make a Copy to make your own editable copy.
Last updated