1. App Inventor Useful links: http://appinventor.mit.edu/explore/library.html http://www.appinventor.org/

2. What is App Inventor? Runs in a cloud, everything is saved in a gmail/google docs account Can create fully functional/installable Android Apps (can even put them up on the Google Play Store) in the *.apk format (similar to Microsoft’s *.msi) Editing is done in a browser Running is done in an emulator window or on an actual Android device, either connected via USB to a computer, or by sending a URL of the program to the Android (this requires installation of a free app AI Companion off the Google Play Store) Has some basic error messages Similar to Scratch and BYOB Can work with images and sounds, do animation and drawing Can write to a text file, to a spreadsheet (TinyDB, stored in the user’s Google Docs), or to TinyWebDB (similar but can be modified by everybody, not a local file) Annoyingly, you can’t use App Inventor on the Android device itself (not, yet). You have to use a computer that doesn’t just rely on touchscreen interfaces – App Inventor doesn’t work with touchscreen devices – it gets confused between moving blocks and scrolling around the screen, the problem common to the Scratch…

3. Has two main screens: Designer and Block Editor

4. Widgets like buttons and images are dragged into the phone screen mock up This is very much like Visual Basic!

5. When you want to run your program… If you get “connection errors” or if Emulator is greyed out, use Reset Connection Troubleshooting the Emulator: https://docs.google.com/document/d/1NbJRyCA9udxdU3oNyadR0fuvNglijYR7X3mVB_ZIeNU/p ub

6. You should see something like this, when you first run the program. As you work on your project, the Emulator should update itself to reflect your latest changes to blocks and design, but when switching between the Project, it might take a while to run it.

7. After all bugs have been exorcised and the program is ready for the exam board/Play Store + early retirement, you would use Build, instead. On an Android device, you can use a camera and a QR reading app to scan this QR code which will launch the App Inventor program on the device.

8. Some of the free apps that will work with QR codes…

9. The programs are automatically saved as “projects”. We can always come back to them later. Under My Projects, there will be a list of all programs worked on. You need to be logged into your Google Account on your browser.

10. Designer Close up…

11. All the necessary components (not renamed, yet) and their properties

12. Some layout points Width set to “Fill parent” Width set to 200px and text alignment to “Right” Default width and text alignment Labels have no “border” property. To give them borders, you can use the layout containers which do have borders (put labels inside such containers)

13. Using layout boxes makes widget arrangements more compact allowing for more things to fit on one screen

14. Renaming the widgets is a very good practice (and cuts down on mistakes)

15. Widgets renamed Notice that AppInventor lists Components in the order they appear on the screen – convenient

16. The Emulator Emulator requires an AI Companion to be running in the background…

17. When the Emulator first starts up – it looks like an ancient Android phone You will also see some DOS screens hanging about which log various aspects of the computer-emulator interaction.

18. Blocks editor – just like Scratch, click on categories on the left and drag out the relevant blocks. If you dragged the wrong block or if no longer needed – you can drag it onto the bin

19. Working program

20. The code at a glance

21. Need to declare 2 variables and initialise them to zero Variable names are descriptive Event procedure of a button click Object “dot” notation for the widget’s properties Get reads the variable Set changes the variable’s contents

22. Extension: using type validation Without validation, the program crashes with this error

23. Extension: using type validation To make the program give constructive feedback of non- numerical data was input – we need an if/else statement

24. Extension: using functions/subs/functional programming Higher level candidates will use functions and avoid global variables We will create a program with the same functionality but using functions and without global values we’ve used earlier in this presentation Use of functions/procedures is a discriminator at the top end of the marking band

25. The first “do” block is a subroutine, the “result” block is a function – it returns a result (like Excel formulas/functions)

26. Creating a procedure block that takes a raw number (input/parameter/argument) [miles in this case] and returns a processed one [equivalent km distance] 12 3

27. Calculations require Math blocks Needed for setting variables to certain numerical values Needed for calculations

28. Result slot will contain our calculation 1 2 3 To get the value of x, hover over the letter x, then grab the get/set blocks that appear

29. Back to the Math blocks…

30. Completing the calculation

31. To use a function, we can remove the initialisation of global variables, and rather than doing the calculation inside the Button click, we will off-shore it to a separate procedure/function and then just “trigger”/call this procedure when the button is pressed.

32. Once you have created procedures, the Procedures block category will have a call block for those procedures

33. The complete program Calculation has been off-loaded to a separate function Input parameter (its name doesn’t matter as it is “local”) A function is used just like a variable, a smart variable.

34. Testing to make sure it works The End!