Creating Mobile Apps with App Inventor!

1. Creating Mobile Apps with App Inventor! Day 5 Google search Kris Gordon Ludlow for links

2. Day 5’s Topics • Fun Components (Cont’d) • Accelerometer Sensor (Cont’d) • ImagePicker • Camera • VideoPlayer • SoundRecorder • Camcorder • A Trivia Game – Quiz Me • Lab 5

3. Accelerometer Sensor (Cont’d) The component produces three values. • XAccel : Positive when the device is tilted to the right (that is, its left side is raised), and negative when the device is tilted to the left (its right size is raised). • YAccel : Positive when its bottom is raised, and negative when its top is raised. • ZAccel : Positive when the display is facing up, and negative when the display is facing down. Please design a mobile app to make a sound if the device is facing down. You can use the Player component in the Media drawer to play a sound.

4. Steps 1. In the Designer, do the following as shown below.

5. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

6. ImagePicker You can use an image picker component under the Media drawer to choose an image from your image gallery. 1. In the Designer, do the following as shown below.

7. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

8. Camera You can use a camera component under the Media drawer to take a picture on the device. Camera is a non-visible component that takes a picture using the device's camera. After the picture is taken, the path to the file on the phone containing the picture is available as an argument to the AfterPicture event. Methods TakePicture() Opens the phone's camera to allow a picture to be taken. Events AfterPicture(Text image) Called after the picture is taken. The text argument image is the path that can be used to locate the image on the phone.

9. Steps 1. In the Designer, do the following as shown below.

10. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

11. Video Player You can use a VideoPlayer component under the Media drawer to play a video file. • A video player appears in your app as a rectangle. • If the user taps the rectangle, media controls appear: play/pause, skip ahead, and skip backward. • Your app can control playback behavior by calling the Start , Pause, and SeekTo methods. • Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format. 

12. Steps 1. In the Designer, do the following as shown below.

13. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

14. Sound Recorder You can use a SoundRecorder component under the Media drawer to records audio. Events AfterSoundRecorded(text sound)Provides the location of the newly created sound. StartedRecording()Indicates that the recorder has started, and can be stopped. StoppedRecording()Indicates that the recorder has stopped, and can be started again. Methods Start ()Starts recording. Stop ()Stops recording.

15. Steps 1. In the Designer, do the following as shown below.

16. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

17. Camcorder You can use the Camcorder component under the Media drawer to record a video using the device's camcorder. After the video is recorded, the name of the file on the phone containing the clip is available as an argument to the AfterRecording event. The file name can be used, for example, to set the source property of a VideoPlayer component. Events AfterRecording(text clip)Indicates that a video was recorded with the camera and provides the path to the stored picture. Methods RecordVideo()Records a video, then raises the AfterRecoding event.

18. Steps 1. In the Designer, do the following as shown below.

19. Steps (Cont’d) 2. In the Blocks Editor, set up the blocks as shown below.

20. A Trivia Game --Quiz Me QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe: • The user steps through a series of questions, clicking a button to proceed to the next question. • The user enters an answer for each question and the app reports whether each answer is correct or incorrect.

21. Connect to the App Inventor web site and start a new project. Name it QuizMe, and also set the screen's Title to "QuizMe". Open the Blocks Editor and connect to the phone. • Also download the following pictures of baseball players and save them on your computer. Later, you'll load these images into your project. They are my school webpage. • http://www.ludlow.kyschools.us/olc/page.aspx?id=7958&s=38

22. Set up the Components • Use the component designer to create the interface for QuizMe. When you finish, it should look something like the snapshot below.

23. To create this interface, first load the images you downloaded into the project. • Click on the "Upload File..." button in the Media area and select one of the downloaded files (e.g., Larsenberra.jpg). • Then do the same for the other three images. • Next, create the following components by dragging them from the Palette into the Viewer • Get the properties of the components as described in the chart on the next slide

25. Add Behaviors to the Components • Open the Blocks Editor to add the behaviors for the app. • First, you'll define three list variable • QuestionList to hold the list of questions • AnswerList to hold the list of corresponding answers • PictureList to hold images. To define the three list variables, you'll need the following blocks:

26. Define the Hidden Index Variable • Each time the user clicks the NextButton to proceed through the quiz, the app needs to remember which question it is on. • In programming, to remember something, you define a new variable. • In this case, the app needs to remember the current question number -- the index into the list QuestionList. • To create the variable currentQuestionIndex, you'll need the following blocks:

27. Display the first question The desired behavior is the following: when the app starts, the first question should appear in the label named QuestionLabel. When the user clicks the NextButton, the second question should appear. When the user clicks again, the third should appear. When the last question is reached, clicking the NextButton should result in the first question once again appearing in theQuestionLabel.

28. Repeating the Questions Now program the behavior of the NextButton. • You've already defined the currentQuestionIndex to remember the question the user is on. • When NextButton is clicked, the app needs to increment this variable, e.g., change it from 1 to 2 or from 2 to 3, etc., and then use the resulting value to select the new "current" question. • When the NextButton is clicked, the app first checks to see if currentQuestionIndex has a 3 in it. • If it does, currentQuestionIndex is set back to 0 so that when 1 is added to it with the blocks below, it will be 1 and the quiz will loop back to display the first question. 

30. Evaluating Answers Next, you'll add blocks that report whether the user has answered a question correctly or not. • The user enters the answer in AnswerText and then clicks the AnswerButton. • The app must compare the user's entry with the answer to the "current" question, using an if then block to check. • The RightWrongLabel should be modified to report whether or not the answer is correct. • You'll need the following blocks for this behavior:

31. Final Program

32. References http://appinventor.mit.edu/explore/ai2/quizme.html