Lecture Note 4: DESIGNER AND BLOCK EDITOR

Laboratory 4 (MyPiano)

Introduction:

This unit will teach students about procedures and playing music in an app.
Students will create an app with piano keys that the user can press to play musical notes.
The “MyPiano” unit emphasizes being iterative and incremental, as students will start with
one note and then add more to their apps. Procedures, a key part of abstraction and
modularization, will also be introduced. Students will write a procedure for playing a note
and then use the same procedure for the other notes. Students will reuse the code for
each subsequent key on the piano apps they create.

Lecture Note Outcomes:

The lecture note covers the following topics:

1. Code a piano app using the App Inventor Blocks Editor.

2. Apply the computational thinking practices of being incremental and iterative,
developing and testing an app in stages.
3. Reuse code in an app.
4. Demonstrate abstraction by creating and implementing a procedure in App
Inventor;
5. Test and debug an app using the MIT AI2 Companion.
6. Increase their positive perception of programming by creating a useful and fun
app.

Materials

• Mobile phone, tablet, PC, Laptop

• Browser
Procedures
1. Getting Stated
Connect to the App Inventor website and start a new project. Name it “MyPiano”
and also set the screen’s title to “MyPiano”. Click Connect and connect your device or
emulator for live testing. If you’re concerned about confusing your project name and the
screen name, don’t worry! There are three key names in App Inventor:

1) Download the MyPiano.aia templates from www.isatumiagao.online.

2) Import the “MyPiano_Template.aia” project.

1|P age Designer Components – Narte AM

 3) Your Designer is empty except for media files. Note that all the sound files
are included and appear in the Media panel.

2. Adding the Buttons

In this section, you will be adding all the sharp notes. A total of 13 buttons are
needed for this Project for all the sharp notes.
1) Change the Height of the HorizontalArrangement to 50% and its Width to Fill
Parent.

2) Drag eight Buttons into the HorizontalArrangement. They will appear side by
side.

2|P age Designer Components – Narte AM

 3) The correct order of piano keys is “C D E F G A B HighC,” so name each button
according to its note.

3. Setting the Button’s Setting

In this section, you will be setting the properties of each buttons

1) Change button’s Properties as follows: (e.g. CNote’s)

• Background Color: Red
• Height: Fill parent
• Width: 10 percent
• Text: C

3|P age Designer Components – Narte AM

 2) Change the remaining keys so your layout look like the one below

4. Adding more components

On this section, you will be adding the Notes Label, Clear button and Player.

1) Drag a Label and a Button and place them both below HorizontalArrangement1.

2) From the Media drawer, drag a Player component onto the Viewer.

4|P age Designer Components – Narte AM

 3) Name the Button “ClearButton”, the Label “NotesLabel”, and the Player
“NotePlayer”.

4) Set the Text property for NotesLabel to blank (erase all the text).
5) Set the Text property for ClearButton to “Clear Notes”.
6) Your layout should look like this:

5|P age Designer Components – Narte AM

5. Adding Behaviors to the Components

On this section, we will be adding behaviors to every object we used on this

project.

1) Click the Blocks button and go to Blocks Editor.

2) Drag out a CNote.Click event block.

3) Drag out a set NotePlayer.Source block and snap it into the CNote.Click
event block.

4) To set the Sound file, Drag out a Text block, modify its content to
“CNote.wav” and snap it to set NotePlayer.Source. This will set NotePlayer’s
sound file source to one of the pre-uploaded sound files: CNote.wav.

6|P age Designer Components – Narte AM

 5) Drag out a NotePlayer.Start block. It will play the sound file you specified in
the previous step.

6) To display the Note, Drag out a set NotesLabel.Text block and a Text block
with “C”. This will display the current note being played as it plays. Snap it in
below NotePlayer.Start.

7) Right-click the CNote.Click event and Duplicate it. Another set of blocks will
appear. Click the drop-down menu and select “DNote” to change it to that
Button’s Click event.
8) Repeat the process for all the remaining notes.

7|P age Designer Components – Narte AM

6. Creating of Procedure for similar notes.

Because the code blocks for CNote.Click and DNote.Click are so similar, we are
going to make a procedure to play the notes.

1) Click on to procedure in the Procedures Drawer, then drag out a to procedure

block.

2) Change the name to PlayNote. Add an input by clicking on the blue circle and
snapping it into the block.

3) Then, rename the input “note”.

4) Drag the code inside the CNote.Click block to the new PlayNote procedure
Block.

8|P age Designer Components – Narte AM

 5) We want to be able to have different .wav filenames, based on the note, so drag
out a join block from the Text drawer.

6) Delete the original text blocks and snap in the join block.
7) In the PlayNote procedure, let’s update set NotesLabel.text so it uses a join
block. Add a third string to the join block.

8) Move get note out and replace it with the join block.

9|P age Designer Components – Narte AM

 9) Add NotesLabel.Text and a Text space block as the other two strings in the join
block.

7. Playnote Procedure
1) The only thing that changes is the note, so join note and “Note.wav”.
2) And set NotesLabel.Text to note.

3) Drag out a call PlayNote block from the Procedures drawer and add to
CNote.Click so that the PlayNote code runs when the C note is pressed.

10 | P a g e Designer Components – Narte AM

8. Call the Procedure
1) Complete the puzzle piece and pass “C” as the note to PlayNote.

2) Do the same to all the remaining notes.

9. Clear Button
1) Drag out the ClearButton.Click block and clear the NotesLabel.

11 | P a g e Designer Components – Narte AM

Individual Activity

(Final answer must be saved in .PDF format)

Discuss the following:

1. What is/are the uses of Player component?

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

2. What is the importance of JOIN command?

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

3. Is it always important to used/create a Procedure? Why?

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

4. What is the function of AfterSoundRecorder on SoundRecorder component?

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

12 | P a g e Designer Components – Narte AM

Laboratory Activities

Create a project by using the following App Inventor Components:

• Player
• Layout Component
• Sound Recorder
• Sound
• Create your own Method/Event

Instructions:

1. Project name will follow a given Format (Lastname_Lab4), example Narte_Lab4.

2. Create an App that could play 6 sound (e.g. Animals, Musical Instrument, Nature,
Beat Box, and so on…).
3. The sound could be played individually and stop individually. The sound or group
of sound could also be played simultaneously to create a Remix audio.
4. Once the sound is/are already playing, the user must have an option to Record,
Stop, or Play.
5. Apply your creativity on this Project.
6. Once done, submit/upload the following:
• The .apk and .aia files of the Project.

Instructor grading Criteria

• Used all the required Components - 40%

• Concepts and Designs - 30%
• Functionality and Usability - 30%

13 | P a g e Designer Components – Narte AM