DICE ROLL APP

Creating a "Dice Roll" app in MIT App Inventor is a great way to practice your skills! Here’s a detailed step-by-step guide to building this app:

Step 1: Set Up MIT App Inventor

  1. Open a Web Browser: Navigate to MIT App Inventor
  2. Sign In: Click on "Create Apps!" and sign in using your Google account.

Step 2: Start a New Project

  1. Create a New Project: Click on "Start new project" and name it something like "DiceRoll".

Step 3: Design the User Interface

  1. Add Components:
    • Button: Drag a Button component onto the screen. Set its Text property to "Roll".
    • Label: Drag a Label component onto the screen. Set its Text property to an empty string.
    • Image: Drag an Image component onto the screen. This will display the dice image. Set its Width and Height properties to appropriate values (e.g., 100 for width and 100 for height).
                Images:


  1. Upload Dice Images:
    • You need six images for the dice sides (e.g., dice1.png, dice2.png, etc.).
    • Click on the Image component in the Designer view, then go to the properties panel on the right and click on the "Upload" button. Upload all six dice images.

 

Step 4: Set Properties

  1. Set Initial Image:
    • Set the Image component’s Picture property to one of your dice images (e.g., dice1.png).
  2. Adjust Layout: Arrange the button, label, and image on the screen as desired.



Step 5: Add Blocks to Define Behavior

  1. Switch to Blocks Editor:
    • Click on the "Blocks" button to switch to the Blocks Editor.
  2. Create Blocks for the Button Click Event:

Step 6: Add an App Icon

  1. Prepare Your Icon:
    • Ensure your icon image is in a suitable format (preferably .png) and is a square image (recommended size is 48x48 pixels).
  2. Upload Your Icon:
    • In the Designer view, click on the "Screen1" component (usually found at the top of the Components list).
    • In the Properties panel on the right, scroll down to find the "Icon" property.
    • Click on the "Icon" property, and a dialog box will appear.
    • Click "Upload File..." to select and upload your icon image file.
  3. Set the Icon:
    • After uploading, select the icon image from the list of available images.
    • The selected image will now be set as your app’s icon.

Step 7: Test Your App

          ·  Connect to a Device:

    • Use the MIT AI2 Companion app on your Android device or the built-in emulator.
    • Click "Connect" > "AI Companion" and scan the QR code with the Companion app, or select "Emulator" to test on the computer.

            ·  Run the App:

    • Click the "Roll" button and observe the dice image and the number displayed on the label change randomly.