AppInventor:Grammatical Graffiti

From Notes

Overview

This application is a Peer Editing tool meant to be used as a sort of grammatical forum. It can be played by itself or as part of the MallMadness application. To begin you log in, and then scan a sentence to correct. You can then post your corrected sentence or any questions onto the wall and confer with the other users. There is also a "Cheat" button that will give you a corrected version of the sentence. The purpose of this application is to teach and strengthen English/Grammar skills. We based this application off the preexisting "Wallz" application from Google. If you would like to recreate this application but need assistance please visit our Tutorials page.

Please Note: that Grammatical Graffiti was created in the old alpha App Inventor platform at: http://androidblocks.googlelabs.com

Components

Labels

Text Boxes

Buttons

Logic

Horizontal Arrangements

An Actvity Starter

A Notifier

A TinyWebDB

A Barcode Scanner

Creating The Application

The Interface

1. First, Rename Screen1, "Work It Off" and upload our watermarked background in the properties of the Screen1 component.

2. Drag and drop a Label onto the screen and rename it "LoginLabel". Change the component's properties as follows: Alignment- center, FontSize-16 and check Bold, Font Color-Red, Width-Fill Parent, and Text should read "Please Login to Begin."

3. Place a BarcodeScanner onto the screen below the label. Change the component's properties as follows: Alignment- center, FontSize-16 and check Bold, Font Color-Black, Width-Fill Parent, and erase all text in the Text portion.

4. Drag a Horizontal Arrangement below the BarcodeScanner and change the width property to "fill parent."

5. Next, place a button inside the horizontal arrangement and rename it "LoginButton". Change the component's properties as follows: Alignment- right, FontSize-16 and check Bold, Font Color-Black, and Text should read "Login."

6. Place a TextBox into the horizontal arrangement to the right of the button. rename it "LoginBox". Change the component's properties as follows: Alignment- left, FontSize-16, Font Color-Black, and erase all text in the Text portion.

7. Drag another Horizontal Arrangement onto the screen under the previous one and rename it "TitleArrangement" then drag two Labels into this arrangement.

8. Rename the Label to the left, "WallLabel" and Change the component's properties as follows: Alignment-left, FontSize-16 and check Bold, Font Color-Black, and Text should read "Correct This".

9. Rename the Label to the right, "WallNameLabel" and Change the component's properties as follows: Alignment-left, FontSize-16 and check Bold, Font Color-Black, and erase all text in the Text portion.

10. Drag and drop a Label below the TitleArrangement, rename it "NewUserLabel", and Change the component's properties as follows: Alignment-center, FontSize-16 and check Bold, Font Color-Red, Width-Fill Parent, and erase all text in the Text portion.

11. Below the "NewUserLabel" place a horizontal arrangement, rename it "PostArrangement", and change the Width to Fill Parent. As in steps 5 and 6, place a button and textbox within the arrangement.

Rename the button "DoPost" and Change the component's properties as follows: UNcheck the Enabled box, Alignment-left, FontSize-16 and check Bold, Font Color-Black, and Text should read "Post".

Then, rename the TextBox "NewPost" and Change the component's properties as follows: UNcheck the Enabled box, Alignment-left, FontSize-16 and check Bold, Font Color-Black, erase all text in the Text portion, and type "type your corrected sentence here" in the Hint property.

12. Drag another horizontal arrangement below the previous one, change the width to Fill Parent, and drag 4 four labels into the arrangement and rename them as following in order from left to right: "TotalptsLabel", "pointsLabel", "TotalBucksLabel", "bucksLabel".

13. Change the properties of TotalptsLabel accordingly: Alignment-left, FontSize-16 and check Bold, Font Color-None, and Text should read "Total Points: ".

Change the properties of pointsLabel accordingly: Alignment-left, FontSize-16 and check Bold, Font Color-Blue, and erase all text in the Text portion.

Change the properties of TotalBucksLabel accordingly: Alignment-left, FontSize-16 and check Bold, Font Color-None, and Text should read " Total Mall Bucks: " [Please be sure to include the spaces].

Change the properties of pointsLabel accordingly: Alignment-left, FontSize-16 and check Bold, Font Color-Blue, and erase all text in the Text portion.

14. Drag and Drop a text box below the previous horizontal arrangement. Rename it "WallContents" and Change the component's properties as follows: UNcheck the Enabled box, Alignment-left, Background Color-yellow, FontSize-16, Font Color-Blue, erase all text in the Text portion, Width-fill parent, and Height-200 pixels.

15. Add another horizontal arrangement below the WallContents textbox, change the Width to fill parent and place a button and a label inside. Rename the Button "SolutionButton" and rename the Label "SolutionLabel".

16. Change the properties of the SolutionButton accordingly: UNcheck the Enabled box, Alignment-center, FontSize-16 and check Bold, Font Color-Black, and erase all text in the Text portion.

Change the properties of the SolutionLabel accordingly: Alignment-left, FontSize-16 and check Bold, Font Color-Blue, Width-fill parent and erase all text in the Text portion.

17. Below the previous horizontal arrangement, place an ActivityStarter on the screen and change the component's properties as follows: Alignment- center, FontSize-16 and check Bold, Font Color-Black, Text should read "Go Back to Mall", the Action should read "android.intent.action.MAIN", the Activity Package should read "com.gmail.plakealm.MallMadness", and the Activity Class should read "com.gmail.plakealm.MallMadness.Screen1".

18. For the Non-visible components: Add two TinyWeb DB's from the Not ready for prime time menu. Rename them "WallzDB" and "LoginDB". Change the ServiceURL of WallDB to read "http://gramgraffiti.appspot.com" and change the ServiceURL of LoginDB to read "http://madmalldata.appspot.com". Then simply drag and drop a Clock and Notifier component onto the screen as well.

That concludes how to build the interface. Your interface should look something like the picture below.Now Open the Blocks Editor and begin coding!

The Blocks Editor

These blocks allow you to update the wall, therefore displaying everything under the tag from the database. You will need this in order to see all of the entries for each sentence and see your most recent post displayed.

After defining "gettingWall" as false, create a procedure that will display everything from the database in the WallContents textbox. This "updateWall" procedure is then called upon initialization of the application, every second thereafter, and each time your post a new entry.

The tag called from the database is the "WallNameLabel". Upon initialization this label is blank, so anything written on this wall will be stored in a tag with no name. Once you scan a sentence, the sentence is set to the "WallNameLabel.Text" and the sentence becomes the tag under which all of the concurrent posts will be stored.

This defines a list called "Log" that will be filled later in the program with the user's mall bucks and points. The "LoggerProfile" procedure that allows you to use the data from the LoginBox (the user's name) as the tag from which to get their mall buck and points information from the LoginDB. This procedure will be called when the Login Button is clicked.

The first part of the LoginButton will show an alert that tells you to enter your nickname if the LoginBox is empty. The second part of the if else disables the Login capabilities and makes them appear invisible (because once you are logged in, you no longer need the log in capability). This just makes the app less cluttered. There are quite a lot of places where we've set components to appear visible or invisible to make the application easier to use and understand. I won't spend much time explaining these interface tricks because they are self explanatory if you look at the code. You can also see and if else statement was used to call the "LoggerProfile" procedure. If the "Log" list is already empty then it will simply call the procedure. If however there are items (the points and bucks information) in the list, then it will remove these items and call the procedure. The second part of the LoginButton.click seen to the right, simply contains more interface streamlining methods.

Once after you call the "GetValue" from the database, you have to tell the program to do something with those values. Therefore, you need a "When Got Value" piece from the LoginDB. The method below is a bit complex because we have more than one value in the same tag. Hence, the tag will be the person's name and the value for each persons name will have two numbers separated by a space. The first number is their mall bucks and the second number is their points. This part of the code will split the value from the tag at the space and save each value as an item in the "Log" list. For example, if the value in the database for the tag "Karen" is "50 16", the application will receive the "50 16" string, once it has it this piece of code tells it to split at the spaces, and store it in the "Log" list. Therefore, the first item in the list will be 50, the second item will be 16. Once these values are saved, we've displayed them in their respective bucks or points label by displaying the respective item in the list. The remaining code again deals with interface streamlining.

This button performs two important "StoreValue" functions when pressed. Once you type your sentence into the "NewPost" textbox and press the "Post" button, the first part of the code will store your entry under the current tag (sentence) in the database. Every time the user posts a sentence they receive two points. In order to add points to their current total, we have first added two to the "totalpoints" label. Then we replace the preexisting total from the second item in the "Log" list (their total points retrieved from the database) with this new total. Then we store the new value into the database. This can be a bit tricky. Because there are two values under their name, when you save new points value, you must also re-save the mall bucks value. You must also be sure there is a space in between them so that the value can be split again when called. To ensure there is a space between the two values, we have placed a join inside of a join and placed a text block with one space inside of it between the mall buck and points values in the "Log" list to be stored. Basically, in order to save the values you must do the opposite of what we did when we split the values at the spaces.

In order to create the "Cheat" button feature, you must first create two lists. The "Questions" list contains the grammatically incorrect sentences to be corrected. The "Solutions" list contains the corrected sentence to be corrected. Be sure that the questions and solutions entries correspond to each other by item number. For example, the first item in the "Solutions" list is the answer to the first item in the "Questions" list, etc. In order to create a barcode of the questions, simply copy and paste your sentence into a free barcode creator like this one: http://qrcode.kaywa.com/ and save the barcode to be scanned later.

When the "SolutionButton" is pressed it basically goes through each item in the "Questions" list to see if any of them match the current question the user is solving. If there is a match then it displays the appropriate solution. If it does not find a match, then it displays, "Sorry, I don't know either..." in the "SolutionLabel".

Lastly, the BarcodeScanner will scan the barcode which represents a string (the sentence to be corrected), set the sentence as the WallName, and get the values under that sentence tag to be displayed in the WallContents. Basically, this is how one switches from one question to another.

Creating the Database

First follow the directions on the database section of the Advanced tutorialsAppInventor: Advanced Tutorials in order to create your first database using Google's AppEngine.

You will then need to use a modified version of the main.py file that allows you to enter multiple entries under one tag without erasing the previous one and without having to call a split within the actual program. You will find it here: http://sites.google.com/site/appinventorhelp/sample-apps/wallz---using-the-barcodescanner

After making the required alterations and deploying the database again, simply be sure to change the ServiceURL property of your WallzDB to your new AppEngine database.

If you would like to recreate this application but require help please visit our Tutorials page.

Download It!

Click the link below to download the code files and upload them to AppInventor.

File:Graffiti.zip

Click the link below to download the database files and deploy them using your App Engine account. Be sure to change the "app.ymal" file to your application name.

This .zip file was altered so that it does not erase a the previous entry when a new entry is stored under the same tag. It also puts each entry on a new line. I got this code from the Wallz example application on the google sites here: http://sites.google.com/site/appinventorhelp/sample-apps/wallz---using-the-barcodescanner

File:GraffitiDB.zip

Scan the barcode below to download the application to your phone and try it out!