2.2. I Have a Dream Tutorial¶
Time Estimate: 45 minutes
2.2.1. Introduction and Goals¶
I Have a Dream! is an educational "soundboard" app that plays the famous speech of Martin Luther King. This is a great example of a socially-useful app which provides multimedia education on American history and the civil rights movement. | |
|
(Teacher Tube version) |
Learning Objectives: I will learn to
Language Objectives: I will be able to
|
2.2.2. Learning Activities¶
Tutorial
To get started, open the I Have a Dream Starter project with the embedded tutorial in MIT App Inventor and login with your Google account into MIT App Inventor. Follow along with your teacher or the following video tutorial. You can also use the embedded tutorial in the template or the text-version of this tutorial or the short handout.
NOTE: The video below asks you to open a starter app, but if you use the link above the IHaveADreamStarter app will already be loaded and you can start following the video at time 1:12.
Input/Output
Our mobile devices and computers are built to interact with us. The mobile apps that you create will also communicate with users by getting input from the users and displaying output
to the users. Input is data sent to a computer for processing by a program, and output is the data sent back from the program to the device. Program output is usually based on a program’s input or prior state (e.g., internal values or variables). Input and output can come in many forms, such as tactile (for example touching a button or the device vibrating), audible (a sound), visual (an image), or text. Try listing all the forms of input and output in the I Have a Dream app!
Designing a good user interface (UI) for a program is very important! User Experience (UX) designers are very much in demand. Most programs and apps these days are event-driven programming, which means they display the UI and wait for a user event, for example for the user to touch a button as input. In event-driven programming, program statements are executed when triggered rather than through the sequential flow of control. Events are triggered when a key is pressed, a mouse is clicked, a program is started by another application, etc., and they supply input data to a program and trigger different blocks of code in the program that influence its behavior. A program needs to work for a variety of inputs and situations!
2.2.3. Summary¶
In this lesson, you learned how to:
2.2.4. Still Curious?¶
Did you enjoy creating your own app? In this course, you will get the chance to build lots of apps like this with the help of tutorials and you'll even have the chance to work on your own original app idea! If you finish this lesson early and want to try creating another app now, check out these fun beginner tutorials from MIT App Inventor.
2.2.5. Self-Check¶
Vocabulary
Here is a table of the technical terms we've introduced in this lesson. Hover over the terms to review the definitions.
|
event-driven programming
event handler input integrated development environment (IDE) output |
program
program function user events user interface (UI) UI components |
Check Your Understanding
Complete the following self-check exercises. Please note that you should login if you want your answers saved and scored. In addition, some of these exercises will not work in Internet Explorer or Edge browsers. We recommend using Chrome.
- tactile
- audible
- visual
- text
Q-2: What type of input does the I have a Dream app expect?
- tactile
- audible
- visual
- text
Q-3: What type of output does the I have a Dream app generate?
- A cloud application
- Yes. MIT App Inventor is an application that runs on the world wide web (WWW) and is accessed through a Web browser.
- An Integrated Development Environment (IDE)
- Yes. MIT App Inventor is and IDE. As such, it is a collection of software tools for designing, developing, debugging, and testing mobile apps.
- A software system for developing mobile apps.
- Yes, MIT App Inventor is used for building mobile apps.
- A programming language
- Yes. MIT App Inventor is an example of a visual programming language.
Q-4: MIT App Inventor is an example of which of the following (Choose all that apply)
- A button that appears on the screen.
- An audible click that happens when the user taps the button.
- An error message that appears when something goes wrong.
- The app's memory usage.
- Let me add new information to help you solve this information. An app does store information in component properties and variables, but this data is hidden and not part of the UI (unless you display the information explicitly).
- The color of the app's background screen.
Q-5: Which of the following elements would be considered part of the user interface (UI) for an app? Choose all that apply.
- The User Interface drawer
- OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this information. The user interface drawer contains visual components like buttons, labels, and text boxes.
- The Media drawer
- The Media drawer has components for playing sounds and video, recording video, text-to-speech, and recognizing speech.
- The Drawing and Animation drawer
- OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this information. The drawing and animation drawer has the Canvas component along with the ImageSprite and Ball components that live in canvases.
- The Social Drawer
- OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this information. The social drawer has components for contacts, texting, and phone calls.
Q-6: Which Palette drawer (folder) contains the Player component?
- Button
- Label
- Player.IsPlaying
- This is challenging, but rewarding! This is a property of a component, not a component
- Player
- Button.Image
- This is challenging, but rewarding! This is a property of a component, not a component
Q-7: Which of the following are components?
- The user taps on the screen.
- This is the Button.Click event
- The phone receives a text message.
- This is a Texting.MessageReceived event
- The phone's location changes.
- This is a LocationSensor.LocationChanged event
- The app plays a sound clip
- This is challenging, but rewarding! The app can play a sound clip in response to an event but the playing of the sound is not considered an event itself.
- The phone's internal clock ticks
- This is a Clock.Timer event
Q-8: Which of the following would be considered an event on your smart phone? Choose all that apply.
2.2.6. Reflection: For Your Portfolio¶
Answer the following 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.
If you are using a Google Sites portfolio, see the videos on the portfolio help page on how to embed your google document in your web page.