AppInventor:Work It Off

From Notes

Overview

This application was created to promote health awareness in children. The purpose of the application is to teach children the correlation between the food they eat and the calories they burn. Upon completion, in only a week and half, this application was submitted into Michelle Obama's Apps For Healthy Kids Contest. The website that was required for submission is: http://wio.hfoss.org/. Here you can see more about the application and also watch a video that was created to demonstrate how the application functions.

Development Time: 1.5 Weeks

If you would like to recreate this application but need assistance please visit our AppInventor: Tutorials page.

Components

A Text Box

Buttons

Labels

Logic

A Speech Recognizer

2 TinyWebDB's

A Notifier

An Activity Starter

An image

Media Player (Sound)

Horizontal Arrangements

Creating The Application

The Interface

1. First rename Screen1 "Work It Off!" and upload our banner as the background image.

2. Next, drag and drop a Label onto the screen, rename it "InstructionLabel" and change the component's properties accordingly: Alignment-center, Font Size-16 (Bold and Italic), Text-"Say a food and learn how to Work It Off!", Text Color-Gray, Width-fill parent.

3. Place another Label below the previous one, rename it "AlertLabel" and change the component's properties accordingly: Alignment-center, Font Size-15 (Bold), Text-"Enter Your Full Name Below", Text Color-Red, Width-fill parent.

4. Add a Horizontal Arrangement below the previous label and place a TextBox within it to the far left, and two buttons thereafter.

Rename the TextBox "NameTextBox" and change the component's properties accordingly: Alignment-left, Background Color-cyan, Font Size-14 (Bold), No text in the Text portion, Hint-"John Doe", Text Color-Black.

Rename the first button "LoginButton" and change the component's properties accordingly: Alignment-center, Font Size-14.5, Text-"Play".

Rename the second button "SwitchUserButton" and change the component's properties accordingly: Alignment-Right, Font Size-14.5, Text-"Switch User".

5. Drag another Horizontal Arrangement below the previous arrangement and place two labels within it. Rename the first label "SpeechResultLabel" and rename the second label "ExistanceLabel".

Change the properties of the SpeechResultLabel accordingly: Alignment-left, Font Size-22 (Bold), no text entered, Text Color-Gray.

Change the properties of the ExistanceLabel accordingly: Alignment-left, Font Size-18 (Bold), no text entered, Text Color-Red.

6. Again, place a Horizontal Arrangement below the previous one and place two labels within it. Select fill parent in the Height property of the Horizontal Arrangement component. Rename the two labels respectively "PerPortionLabel" and "NumberOfCaloriesLabel".

Change the properties of the PerPortionLabel accordingly: Alignment-center, Font Size-17.5 (Bold), no text entered, Text Color-Gray.

Change the properties of the NumberOfCaloriesLabel accordingly: Alignment-center, Font Size-23 (Bold), no text entered, Text Color-Magenta.

7. place a Horizontal Arrangement below the previous one and place five labels within it. Select fill parent in the Width property of the Horizontal Arrangement component. Rename the five labels "PointsEarnedLabel", "PointsValueLabel", "Label", "TotalPointsLabel", and "TotalPointsValueLabel" respectively from left to right.

Change the properties of the PointsEarnedLabel accordingly: Alignment-center, Font Size-18 (Bold), Text-"Points Earned: ", Text Color-None.

Change the properties of the PointsValueLabel accordingly: Alignment-center, Font Size-20 (Bold), no text entered, Text Color-Magenta.

Change the properties of the Label accordingly: Place one space in the Text portion. Keep the default settings for this label. It was only created to make a space between the PointsValue and TotalPoints labels.

Change the properties of the TotalPointsLabel accordingly: Alignment-Left, Font Size-18 (Bold), Text-"Total Points: ",

Text Color-None.

Change the properties of the TotalPointsValueLabel accordingly: Alignment-Left, Font Size-20 (Bold), no text entered, Text Color-Magenta.

8. Drag a Label under the previous arrangement and rename it "ExerciseInstructionLabel" and change it's properties accordingly: Alignment-center, Font Size-18 (Bold and Italicized), Text-"Choose a way to Work It Off!", Text Color-None, Width-fill parent.

9. Place a Horizontal Arrangement below the previous label and place three labels within it. Select fill parent in the Width property of the Horizontal Arrangement component. Rename the three labels "ActivityLabel", "NumberOfMinutesLabel", "ActivityTimeMinutesLabel", and "Label" respectively from left to right.

Change the properties of the ActivityLabel accordingly: Alignment-Left, Font Size-20 (Bold), no text entered, Text Color-None.

Change the properties of the NumberOfMinutesLabel accordingly: Alignment-Left, Font Size-23 (Bold), no text entered, Text Color-Magenta.

Change the properties of the ActivityTimeMinutesLabel accordingly: Alignment-Left, Font Size-20 (Bold), Text-"Min.",

Text Color-None.

10. Place a Horizontal Arrangement below the previous label and place two buttons within it. Select fill parent in the Width property of the Horizontal Arrangement component. Rename the two buttons "OkButton" and "NahButton" respectively from left to right.

Change the properties of the OkButton accordingly: Alignment-Center, Font Size-14.5 (Bold), Text-"Okay, I'll Do It!", Text Color-Black.

Change the properties of the NahButton accordingly: Alignment-Center, Font Size-14.5 (Bold), Text-"Nah!", Text Color-Black.

11. Drag a label below the previous arrangement, rename it "AdviceLabel", and Change the properties accordingly: Alignment-Left, Font Size-18 (Bold), no text entered, Text Color-Gray.

12. Place a Button below the previous label, rename it "GoButton", and Alignment-Center, Font Size-14.5 (Bold), Text-"Click to Compare Your Score Online", Text Color-Default.

13. Drag a Label under the previous button, rename it "SecondFoodLabel", and change it's properties accordingly: Alignment-Left, Font Size-16 (Bold), Text-"Click Play to Play Again", Text Color-Red, Width-fill parent.

14. Drag a Label under the previous label, rename it "LevelLabel", and change it's properties accordingly: Alignment-Left, Font Size-18 (Bold), no text entered, Text Color-Blue.

15. Drag an image component onto the screen below the previous label and keep the default settings, then place a label under the image, rename it "RewardDescriptionLabel", change it's properties accordingly: Alignment-Left, Font Size-18 (Bold), no text entered, Text Color-Blue, Width-fill parent.

16. Now drag and drop these Non-visible components onto the screen: SpeechRecognizer, two TinyWebDB's, an ActivityStarter, a Sound, and a Notifier.

Change the ServiceURL property of the First TinyWebDB component to "http://healthykidswinrewards.appspot.com"

Change the ServiceURL property of the Second TinyWebDB component to "http://healthyscores.appspot.com"

Upload a sound file to the Sound component. We used part of the song "Celebrate".

Finally change the ActivityStarter Action to "android.intent.action.VIEW"

the ActivityPackage to "com.android.browser" and the ActivityClass to "com.android.browser.BrowserActivity".

16. remember to upload the reward pictures into the media section on the bottom right side of the screen to be displayed later in the program.

After completing this Part 1, this is what your screen should look like:

Now you are ready for the Blocks Editor!

The Blocks Editor

In order to save the user's scores, we added a login feature. When the LoginButton is clicked it calls the value (current total points) saved in the tag (their name) from TinyWebDB2. It then gives an alert that prepares the user to log their food verbally and calls the SpeechRecognizer. The other labels deal with interface streamlining tactics so I will no delve into them too deeply, it's basically a matter of only making components visible with they are necessary so as to not confuse the user.

Every time a value in the database is called, you need to use a "WhenGotValue" block in order to use that information. The points stored under the user's name was called in the Login button portion, so this portion simply defines CurrentPoints and sets that value to the value retrieved from the database that can later be used and displayed in the program.

Once the SpeechRecognizer is called, you then have to tell the SpeechRecognizer to do something. The first "BeforeGettingText" portion only effects the interface. Basically it resets all of the labels and pictures on the interface, in case this is your second time playing. So, it gets rid of all previous information on the screen.

The "AfterGettingText" portion first sets the text in the SpeechResultLabel to what the TTS function perceives the user to have said (and is hopefully accurate). It then uses that text as a tag to call the calorie information from TinyWebDB1.

The previous code used the name of the food spoken to call the number of calories. Once that data is received by the program, it first tests to make sure the entry exists in the database. If the tag does not exist in the database, I changed the AppEngine Python code to return the string "Does Not Exist". Therefore, the program is set to check if this string is returned and if so a comment is displayed in the ExistanceLabel to notify the user that the food does not exist.

If however, the food does exist, the "else" portion of the code will set the calorie value retrieved from the database to be displayed in the "NumberOfCaloriesLabel". We have created our app to give the user points based on how many calories the food contains. Therefore, the higher the calories, the lower the points. The following if statements test to see what range the calories of the food spoken fall into and gives them points accordingly. If the calories are above 500, no points are received, if the calories are between 300 and 500 1 point are awarded to the user, and if the calories are below 300 2 points are awarded.

points earned are then added to the users current points value, displayed in the "TotalPointsValueLabel" and then the new score is saved in the database under a database tag with the user's name.

The last portion of the code contains the logic for the activity portion of our application. Because we Walk to always be the first activity option from which the user can choose from, we simply coded the data here. Using an online calorie calculator, we determined that approximately 4 calories are burned for each minute walked. This is why the calories of the food are divided by 4. The solution of the basic arithmatic will be the number of minutes on will have to walk to "work off" that food.

Lastly, the OkButton and NahButton are set to visible so that the user can choose to walk or see more options.

This code merely tells the user their new current score has been saved to the database once the score has been saved.

We used generators in order to display the activity options in the "ActivityLabel" every time the user presses the NahButton. We also used a generator to display one of three witty comments in the "AdviceLabel" when the user agreed to perform an activity by pressing the OkButton. In order to create a generator, you first need to create lists of things to be randomly displayed. The "activities" list contains text to be set in the "ActivityLabel" randomly. It is important to note the exact way you spell things in order to avoid problems in the logic later. All other lists contain witty comments for each activity. There are three possible comments for each activity. We've named each list "Witty" followed by the name of the activity. You must be careful to note the exact name you type for each one to recreate that later in the logic.

The first portion of the NahButton generates a random number between 1 and the length of the "activities" list. This number is then used to display the string stored as an item in the list at that number. The second part of the list will test, for example, if the generated text in the ActivityLabel is equal to "Dance For: " and if so, it will calculate the minutes the user must walk by using basic arithmetic.

The OkButton is our most lengthy, complicated, and troublesome piece of logic. If you are using our zip file to view our code, you will notice that the logic in this button goes off the screen. Because there is so much code, the blocks editor not only runs more slowly, but we also experienced various occasions where our code disappeared or floated away without a trace. if you want to view all of the code to edit it, we have found that adding another "when OkButton.clik" block to the workspace in which to drag and drop the second portion of the code works quite well.

The first lengthy portion of code simply has a random generator for each activity that will display a witty comment for whichever activity is currently displayed in the label when the user clicks the OkButton. The generator here works like the previous activity generator.

The second part of the button contains the logic for the reward feature of our app. The hardest part was first choosing what points would initiate a the rewards labels and picture to display. In the the following excerpt of our code, the points 5 or 6 initiate the "LevelLabel", "RewardImage", and "RewardDescriptionLabel" to be set to appropriate messages that notify the user of what level they are on and what they have won/accomplished.

This portion of the code, like the "BeforeGettingText" code portion simply resets all previous data on the interface to be blank or invisible in order for the user to log in under a new name.

The GoButton calls the browser to open and display our database website. The "DataURI" block sets our website to be used by the browser as the url to be displayed. The ActivityStarter properties contains some android code commands that call the browser to open and view our website. For more information on the ActivityStarter, view the advanced tutorials. AppInventor: Advanced Tutorials

This is the image we used for the background

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:WorkItOff.zip

Click the link below to download our altered database code. This can be deployed in App Engine, simply be sure to change the "app.ymal" to contain the name of your specific database. We used two databases for this app. One that contains the scores information and one that contains the calorie information.

What I altered:

I changed both databases so that they no longer displayed the delete feature.
The HealthyScores DB also no longer has the Store or Get a value functions. I also changed the code so that the number zero is returned if a tag that does not currently exist in the database is called.
In the Food DB I changed the code so that the string "Does Not Exist" is returned if a tag that does not currently exist in the database is called.

Scores Database:

File:WorkItOffScoresDB.zip

Food Database:

File:WorkItOffFoodDB.zip

Click the link below to download the application to your phone and try it out!

File:WorkItOff.apk

Scan the barcode below to download the application directly to your phone!