Creating my first Android app, Part 2

Go here to read Part 1.

Now that all the components have been created in App Inventor, it is time to open the Blocks Editor and make the App actually work. Remember, the first part of App Inventor is like the clock-face, creating the look of the app. The second part is the Blocks Editor which creates the clock-mechanism, or how the app functions.

Before you do that, you can clean up the look of the apps by using Screen Arrangements to group buttons together. I grouped mine together like this:
[Record] [Play]
[Copy To Title] [Copy To Message]
[New Note] [Save Note] [Load Note]
[Email Note] [Play Note]

Now, click the [Open the Blocks Editor] button. This will download and run a Java program. You can connect to your phone by clicking the [Connect to Device...] button and selecting your phone. This will allow you to demo your app in real time and make sure it is working.

The blocks editor is like a sand box where you can create blocks of code which do different things. If you are familiar with coding with programs like Pascal or Visual Basic, this is going to look weird. There is no where to type out the code! Not very powerful but very user friendly.

Let's start with a simple one. What happens when we push the [Record] button in our app? We want to open up the SpeechRecognizer app, record some text, and then put that text into a text box. Here are the steps:

1. Click on [My Blocks]. This is where all the components you defined in App Inventor are. Now it should be clear why I named everything the way I did: because all your blocks are in alphabetical order. So all the buttons are grouped together, all the text boxes are grouped together, etc.
2. Click on [ButtonRecord]. For component [ButtonRecord] there is a bunch of stuff you can do to interact with it. These different things are called "blocks". They are colored green, purple, dark blue, and grey. Green blocks allow you to do stuff when the component is interacted with (e.g., press a button). Purple blocks call other programs. Dark blue blocks set the properties of components (and have a puzzle piece shape on the right). Grey blocks are variables which represent the current properties of components (and have a puzzle piece on the left).
3. Click on [when ButtonRecord.Click]. This is one of the green blocks. When the [Record] button is pressed in our app, this block tells the app what to do. Click the block and drag it to the editor.
4. Click on [AppSpeechRecognizer]. Click on the purple block named [call AppSpeechRecognizer.GetText] and drag it to the editor. Notice there is a notch at the top of it. That should fit into the spike on the [when ButtonRecord.Click] block. They should click together. Now when the [Record] button is pressed, the Android built in app which translates speech-to-text should run. Try it now on your phone.

What happened? It should have worked. Except where did the text go? We have to do a few more things before the text goes somewhere. Go back to the block editor:

1. Click on [My Blocks]. Click on [AppSpeechRecognizer]. Click on [when AppSpeechRecognizer.AfterGettingText] and drag it to the editor. Notice that there is something called "result" on the right which has a value of "result". The text that the voice-to-text created is stored in a variable called "result".
2. Click on [TextBoxVoice]. Click on [set TextBoxVoice.Text to] and drag it to the editor. Attach it to [when AppSpeechRecognizer.AfterGettingText].
3. Click on [My Definitions]. The value "result" is here. This is where stuff that isn't specifically associated with any one component is stored, like global variables. Drag [value result] and plug it into [set TextBoxVoice.Text to]. Try the [Record] button on your phone again.

Now what you say should appear in the Voice Textbox.

For the end of Part 2, create the functionality of the [Play], [Copy to Title], and [Copy to Message] buttons. Below is what the blocks editor should look like.

Go here for Part 3.