Mobile App Guidelines Shaky Picky

:video_game: Activity Time!

Time needed: 30-35 minutes

What you'll do

Create an awesome decision-making app called Shaky Picky! When you can't decide what to eat, where to go, or what to do - just shake your phone and let the app pick for you! You'll learn how to use lists to store multiple items and make your app remember them even after closing it.

Before You Start:

• Watch this video to see how this app works
• Make sure you have MIT App Inventor open
• Get ready to create your own decision-making helper!

Step One: Set Up Your App's Look

First, let's see what your app will look like and what components you'll need!

The App Design

Sample UI	Components You'll Use
	Layout: • Vertical Arrangement • Horizontal Arrangement Visible Components: • Labels • Image • List Picker • Text Box • Button Non-visible Components: • Accelerometer Sensor • TinyDB • Notifier • Text-to-Speech

How Your App Will Look When It's Working

After you've saved some items	After you shake your phone

:bulb: "Good to Know!"

This app needs only 1 screen - so you don't need to create multiple screens!

Step 2: Programming Your App

Now for the fun part - let's make your app work! You'll program what happens when users interact with different parts of your app.

Part One: Create Your List Variable

First, you need to create a special variable to store all the items users will add.

What to do:

1. Make a global variable and name it myList
2. Set it to create an empty list

:bulb: "Stuck?"

You only need 2 blocks for this:

• One block to initialize a global variable
• One block to create an empty list

Part 2: Make the Save Button Work

Now let's program what happens when someone clicks the Save button .

What to do:

1. Check if the textbox is empty:

   • If it's empty, show a notification that says "No input is detected"
   • This is what users will see:

   The notification that appears when nothing is typed

2. If the textbox has text in it:

   • Add the item to your list
   • Store the list in the database (so it remembers even after closing the app!)
   • Clear the textbox (make it empty again for the next item)

3. Super important: Make your app smart enough to ignore spaces! If someone accidentally types just spaces, the app should still know the textbox is empty.

:bulb: "Stuck?"

Use the "trim" block to remove spaces from the beginning and end of the text!

Part 3: Load Saved Items When App Opens

Your app should remember what was saved before! Let's make it load the saved items when someone opens the app.

What to do when the app opens:

1. Update your myList variable by getting the saved items from TinyDB
2. Show all the items in your list picker so users can see them

Here's what your blocks should look like:

These blocks make your app remember previously saved items

:bulb: "Stuck?"

Use the "When Screen1.Initialize" block to run code when the app starts!

Part 4: Ask Before Deleting

Nobody wants to accidentally delete their favorite item! Let's add a confirmation message before deleting anything.

How it works:

1. When someone clicks the View / Delete Items button , the list picker opens automatically (you don't need to program this part!)
2. After they select an item, show a confirmation message

What the confirmation looks like:

This message asks users if they really want to delete the item

Make it smart: The message should change based on what item they selected!

• If they pick "sushi" -> "Are you sure you want to delete sushi?"
• If they pick "nasi lemak" -> "Are you sure you want to delete nasi lemak?"

:bulb: "Stuck?"

Use the block to combine:

• The text "Are you sure you want to delete "
• The selected item
• The text "?"

Part 5: Actually Delete the Item

Now let's program what happens when users click "Yes" to delete an item.

What to do after they click "Yes":

1. Remove the selected item from your list
2. Save the updated list to the database
3. Show a message like "Pizza has been deleted from the list" (but with whatever item they deleted)

:bulb: "Good to Know!"

You don't need to program what happens when they click "No" - the app automatically closes the confirmation box!

Part 6: The Magic Shake Feature!

This is the coolest part - making your app respond when someone shakes their phone!

What to program:

1. If the list is empty:

   • Show a notification that says "Nothing is in the list"
   • (Can't pick from an empty list!)

2. If the list has items:

   • Pick a random item from the list
   • Show it in the ?? label (the picked_option label)
   • Make the phone speak the item out loud using Text-to-Speech!

:bulb: "Stuck?"

• Use the AccelerometerSensor's "Shaking" event
• Use "pick a random item from list" to get a random choice
• Use the TextToSpeech component to make the phone talk!

---

:trophy: Challenge Yourself!

Ready for an extra challenge? Try making the Advanced Version of Shaky Picky!

What Makes It Advanced?

Watch this video to see the advanced features in action!

The advanced version looks like this:

Notice the new "Clear All" button at the bottom!

Advanced Features to Add:

1. "Clear All" button

   • Deletes everything in the list permanently
   • Great for starting fresh!

2. No repeats until all items are picked

   • After shaking, temporarily remove that item from the choices
   • This way, you won't get "pizza" twice in a row!

3. Smart reset feature

   • After all items have been picked once, automatically restore the full list
   • Keep the fun going without manually resetting!

:bulb: "Pro Tip!"

For the advanced version, you might need TWO lists:

• One to store all items permanently
• One to track which items haven't been picked yet

When You're Done

Congratulations on creating your own decision-making app! Test it out by:

• Adding your favorite foods, games, or activities
• Shaking your phone to let it decide for you
• Sharing it with friends who can never decide what to do!

Remember to submit your completed app through your course platform!