App Inventor

1. App Inventor

2. Variable Declaration • App Inventor: Declare Variables using the “Define Variable As” Block • Find the Blocks Editor (top-left), click the Definition button, then pull out the correct block. • How would I make a variable named “count”???

3. Variable Assignment • Assign a variable named “count” to 5 • In App Inventor, use “set global - to” block in the My Blocks Menu • Only available once defined your variable • Drag the “set global - to” block out • Create a number block by typing in “5” in the editor window • Click 5 into the “set global – to” block

4. App Inventor Math using Variables • Combine the “Set-To” Block with operators from the “Built-In->Math” Menu Count = 9 Count = 5 Count = 14 Count = 3 Count = 1 (modulo gives the remainder of division)

5. Variable Initialization

6. You are forced to define a variables value when you declare it in App Inventor • A general place for program initialization is the “When Screen1.Initialize” block • Note: Most Text-Based languages use the “main()” function as the start of the program • For example, set count to 100 when the program starts:

7. Implementing an Equation inApp Inventor • Area of a Rectangle = Length * Width • Step 1: What variables do we need? • Area, Length, and Width • Step 2: Declare them in App Inventor • Step 3: Use Math. Operators to Implement

8. Output: The Label Component • Label • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

9. Output: The Image Component • Image • Components used to • show a picture • Displays text specified • by the Picture property. • Useful Properties • Picture • Width • Visible • Height

10. Output: The Texting Component • Texting • A non-visible component • to allow users to send and • receive text messages. • Useful Properties • Message • Phone Number • Receiving Enabled (Does this • also make the Texting component a • input?)

11. Input: The Button Component • Button • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

12. Input: The TextBox Component • TextBox • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

13. Implementing the Algorithm: The Designer First, add the necessary components to in the Designer Window • 2 TextBoxes, a Button, and a Label • name your components • AmountPaidBox • TipPercentBox • CalculateButton • TipLabel • Remember, to put • “Calculate Tip” on the button and remove the default label text

14. Next, need to declare and initialize our variables • Declare: amount_paid, tip_percentage, tip_amount • (Optional) Because it doesn’t make sense to have a 0% tip, let’s give it a default value of 5 and place that in the AmountTipBox at program startup

15. Next step: wait until the button is clicked • Add a “When Button Clicked” Block to your code • What’s the name of the button that needs to be clicked?

16. Next step: want us to get information from the textboxes • What component variables (properties) represent the textbox data? • What variables do we save this data to?

17. Next step: calculate the tip amount • What variable represents the tip amount? • Why do we divide tip percentage by 100???

18. Next step: display the tip amount to the user • What component variables (properties) represent the label output?

19. Download to the Emulator and Test!!!

20. If-Blocks

22. Nesting If and If-Else Blocks Often times, we want to check if a prior condition is true, before checking another condition. • Example: If x > 100, then check if y is < 100. If y < 100, then assign z to 1. If x <= 100, set z to 35.

23. Implementation Step 1: Lamp Doesn’t Work • If-Block or If-Else Block? Why?

24. Step 2: Lamp Plugged In?

25. Step 3: Bulb Burned Out?