Creating my first Android app, Part 3

Go here to read Part 1 and Part 2. (Note: I have slightly edited the previous posts, changing the name of one textbox to TextBoxMessage instead of TextBoxNote.)

Blogger is being a jerk, so I had to d/l Google Chrome to compose this. What's that? You don't care? You just came here to eat my brains and gain my app knowledge? Okay, on with the meager meal.

We will be doing something very complicated today: storing notes in a database which can then be retrieved using the ListPicker component. We will be building the functionality behind the [Save Note] button and the [Load Note] "button". The latter is an air quote "button" because it is actually a listpicker element that looks like a button.

One of the components we put into our app was a TinyDB (which we named DatabaseNotes). This database works by storing stuff under a tag. For example, you could store your age ("39" in my case) under the tag "age". The nice part about TinyDB is that it stores stuff even after you turn your app off.

We will store our notes, which consist of a title and a message, to the database using the title as the tag. That way, we can search the database for the title and reload our note.

Let's start with the [Save Note] button. When we press it, we need to save the note in the database (using the title as the tag). But we need to think further ahead. How are we going to get the note back out? There is no easy way to pull out all the tags from the database, so we need to keep a list of all the tags we put in. The way to do this is with a list.

A list is an 1-dimensional array. If that description made things more unclear, then a list is a list of things. So a list can be a list of numbers or a list of names or a list of titles. We will create a list of note titles and store it in the database, so we can pull it out, choose a title of a note, and then load the note.

I think I've talked too much. Let's do some programming. I'm assuming you've opened up your app in App Inventor and opened up the Blocks Editor. First, define our list of note titles:

1. Click [Built-In]. This is where all the build-in blocks are.
2. Click [Definitions].
3. Click [def variable as] and drag it to the editor.
4. Click on the "variable" and type "ListNoteTitles".
5. Click on [Built-In], click on [Lists], click on [call make a list], and drag it to [def ListNoteTitles as] and plug it in. This will define a list called "ListNoteTitles" which we can later store our list of note titles in.

Next, the [Save Note] button.

1. Click [My Blocks], click [ButtonNoteSave], click [when ButtonNoteSave.Click] and drag it to the editor. This will allow us to define what happens when the [Save Note] button is pressed.
2. Click [My Blocks], click [DatabaseNotes], click [call DatabaseNotes.StoreValue] and drag it to the editor. There is a notch at the top of it. Fit this into the spike on the [when ButtonNoteSave.Click] block.
3. Click [My Blocks], click [TextBoxTitle], click [TextBoxTitle.Text], and drag it and plug it into the "tag" slot.
4. Click [My Blocks], click [TextBoxMessage], click [TextBoxMessage.Text], and drag it and plug it into the "valueToStore" slot.

This will save the note to the database, but we also need to save the note title to the list of titles, and then save that list of titles to the database.

1. Click [Built-In], click [Lists], click [call add items to list], drag it, and put it below the [call DatabaseNotes.StoreValue].
2. Click [My Blocks], click [My Definitions], click+drag [global ListNoteTitles] to the "list" slot.
3. Click [My Blocks], click [TextBoxTitle], click+drag [TextBoxTitle.Text]to the "item" slot.

Unfortunately, there is really no way to test this to see if it is working. We need to build the [Load Note] button first. There are two parts: before picking from the list and after. Before we pick from the list, we need to define what the list is.

1. Click [My Blocks], click [ListNoteLoad], click+drag [when ListNoteLoad.BeforePicking] to the editor.
2. Click [My Blocks], click [ListNoteLoad], click+drag [set ListNoteLoad.Element to] and attach it to the notch in [when ListNoteLoad.BeforePicking].
3. Click [My Blocks], click [My Definitions], click+drag [global ListNoteTitles] to the "to" slot.

This populates the list with all our note titles. After we choose which note we want to load, we need to copy the note from the database to the text boxes.

1. Click [My Blocks], click [ListNoteLoad], click+drag [when ListNoteLoad.AfterPicking] to the editor.
2. Click [My Blocks], click [TextBoxTitle], click+drag [set TextBoxTitle.Text to] and attach it to the notch in [when ListNoteLoad.AfterPicking].
3. Click [My Blocks], click [ListNoteLoad], click+drag [ListNoteLoad.Selection] to the "to" slot.
4. Click [My Blocks], click [TextBoxMessage], click+drag [set TextBoxMessage.Text to] and attach it below [set TextBoxTitle.Text to].
5. Click [My Blocks], click [DatabaseNotes], click+drag [call DatabaseNotes.GetValue] to the "to" slot.
6. I'm going to show you a short cut. Click on the [ListNoteLoad.Selection] block, press CTRL+C, and press CTRL+V. This created a duplicate! Click and drag the duplicate to the "tag" slot below.

Test out the app on your phone. Press the [Record] button on your phone and say "test". Press the [Copy to Title] and [Copy to Message]. The text "test" should show up in both text boxes. Now press the [Save Note] button. Nothing should happen: SUCCESS! Next press the [Load Note] button. The screen should go black and you should see the word "test". Click on it and you should go back to your app and everything will look the same. Again, SUCCESS! Okay, to really test if things are working, repeat all those steps except say "best". Now when you press [Load Note], you'll see "test" and "best". Pressing "best" will load that into both text boxes.

My eyes are going blurry looking at all this code. I'll show you how to email a note to someone next time.

Go here for Part 4.

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.

Creating my first Android app, Part 1

I have an android phone (Samsung Galaxy S - model SGH-I896). I love all the app's that can be downloaded, for practically anything purpose you can think of. Google recently came out with an app creator called App Inventor. I created an app for my phone which I find really useful. I was thinking about uploading it to the Android Market, but that would cost me $25. Instead, I'll write some blog post that will be very very boring to any normal person, but maybe some budding programers will enjoy it.

First, you must install App Inventor. This requires a google email address. (These first few steps are going to be pretty sketchy, because since I have now installed everything, I can't remember what to do.) App Inventor is a two-part program. First, it is a web-based app creator which allows you up create the look of your app (images, buttons, text boxes, etc.) Second, it calls a Java program which downloads and runs. This program allows you to program the logic behind your app. Think of them as the clock face and the clock mechanics.

The most difficult part to creating your app is actually downloading and installing all the appropriate drivers for your phone. This took me several days to do. I had to update my phone to the latest android version (2.2). After much google searching, I found all the drivers for my phone (both 32- and 64-bit) and saved them to a directory called c:\drivers\. Everything finally worked.

So you've installed App Inventor and have all the drivers for you phone. Now it's time to start creating an app. (Don't forget to set your phone to development mode in Settings->Applications->Development.)

If you've never programmed before, you may want to stop reading right now. Sorry I didn't put this earlier. Wow, you are tenacious. Next step is to do all the tutorials. These will help you understand how App Inventor works.

The app I created is called VoiceBox. The reason I created it is I haven't found a notepad app I like. Android has voice-to-text and text-to-voice features which I thought would be great for an app. Imagine creating a grocery list by talking, and then play it back to yourself. What? Why would you want to play back a grocery list when it is just as easy to look down and read the list? This is a great question. I'll save it as a note in VoiceBox and play it to myself later.

You will need these components:

• Eight (8) Buttons named ButtonRecord, ButtonCopyToTitle, ButtonCopyToMessage, ButtonPlay, ButtonNoteNew, ButtonNoteSave, ButtonEmail, ButtonPlayNote.
• One (1) ListPicker named ListNoteLoad.
• Four (4) TextBox named TextboxVoice, TextboxTitle, TextboxMessage, TextboxEmail
• One (1) TinyDB named DatabaseNotes.
• One (1) ActivityStarter named AppEmail.
• One (1) SpeechRecognizer named AppSpeechRecognizer.
• One (1) TextToSpeech named AppTextToSpeech.

Drag all these components to the viewer and name them as above. Your app inventor should look like the screen shot below. I've realized these series is going to take several blog posts, so I'm going to leave it here. Stay tuned for more "exciting" slash "incredibly boring" posts in this series!

Go here for Part 2.