App Inventor

1. App Inventor CEMC – Summer Workshop 2012 Grant Hutchison grant.hutchison@gmail.com Humberside CI, TDSB

2. Agenda • What is App Inventor? • Why App Inventor? • CS Educational Perspective • How to use App Inventor? • Hands on activities (Lab 1 and 2) • More App Inventor • Resources and Futures • Student Projects • Hands on activities (Labs 3 and beyond)

3. What is App Inventor? • App Inventor is a visual programming environment to create Android based mobile applications. • Originally created by Google Labs. • Jan 1, 2012 – MIT Media Lab • Center for Mobile Learning established by Hal Abelson • Google still active on the project • Language is also open sourced

4. Why App Inventor? • Students Love their Smartphones • Want to create mobile apps • Want to teach novice programmers • Want to create fun apps (games) quickly • Want to motivate "all" students • Want access to rapidly growing mobile application marketplace (Google Play)

5. CS Education perspectives (1 of 3) Basics • data types (weak point) • numbers and text only (globally scoped) • data structures (weak, but good for intro CS) • lists only • operators / built-in functions • simple set of string and list functions and math operators • iterators • while, for next, for each • conditionals • if, if else, boolean / relational • modularity • procedures (within app only / no user defined libs)

6. CS Educator perspectives (2 of 3) Advanced • Databases (?) • TinyDB(local – key-based access • TinyWebDB (cloud – key-based access) • Sensors • haptic (vibration – need phone) • gyroscope / accelerometer (need phone) • location (GPS) • Phone Libs • texting (SMS) • Other Libs • text to speech – used in my courses • Bluetooth / Lego Mindstorms • Web services / websites / Other apps / Fusion tables

7. CS Educator perspectives (3 of 3) Advanced • Graphics • Sprites– Movement / Collision detection • User Interfaces • Multiple Screens - scoping • Input • Buttons, textboxes, checkboxes, list picker • canvas / sprites – location, motion, collision/edge detection • Output • labels, colours, sound, vibration (haptic)

8. Why NOT App Inventor? • Want to teach O-O • Want to debug syntax errors • Want to create large group projects • Want to develop 3D games

9. Where is App Inventor Used? • U.S. Colleges/Universities • University of San Francisco – Dave Wolber • Wellesley College – Lyn Turbak • Trinity College (CS Principles) - Ralph Morelli • After school programming clubs • TechnovationChallenge • High Schools • Scotland (national curriculum) – Jeremy Scott • Various schools including Humberside CI

10. What do I need to get started? • GMail enabled account • Browser (anything but IE) • Install the App Inventor Setup program for your platform (Windows, Mac OSX, Linux) • provides Android emulator • Recent version of Java (v6+) • Internet connectivity • optional • Android phone/tablet • device driver for Android device

11. Follow the steps http://appinventor.mit.edu

12. Classroom environment Most students use the emulator Development Steps • Start browser • Start emulator • Connect App Inventor (Blocks Editor) to emulator for testing Emulator takes a few minutes to start. Each code change will be reflected in emulator.

13. Classroom environment - Files Source code is a zip file • The file can be transferred between computers and it is hosted on MIT webservers for each user. • Only App Inventor "understands" the contents of the zip file. • Students should provide zip file for assessment Install/Binary image is an apk(Android Package File) • The apk file is only created when the developer decides to create a release. • Students would only create these file to share final application with other Android users.

14. Classroom environment (alternate) Students have phones Development Steps • Start browser • Connect phone to USB port • ensure device drivers are present and phone is in USB debugging mode • Connect App Inventor (Blocks Editor) to phone for live testing. Each code change will be reflected in phone.

15. Take it with you !! Students have phones. Three ways to get the app on a phone. • Create a QR code • download to a phone (using developer email) • Download to the computer • save a an Android install file (APK) on your development computer • Download to Connected Phone • install the APK directly on the phone

16. Publish to Google Play • Register as a developer with Google Play • Agree to the Google Play Developer Distribution Agreement • Pay a registration fee ($25.00) • https://play.google.com/apps/publish/signup DEMO

17. App Inventor Development Cycle • Paper / Pencil • Component Designer • Blocks Editor • Blocks Editor • Phone/Emulator

18. Get Developing - Projects • An App Inventor Project is a collection of components and blocks. • Open website • Log in using your GMAIL account • Available Actions • Import existing project into new project • Create new project • Save/Export project

19. Get Developing - Tools App Inventor consists of (3) tools working in unison: • Component Designer Define Graphical User Interface (GUI) and Non-GUI components • Blocks Editor Determine the behaviour (algorithms and data structures) of the components • Android phone or emulator Platform for testing/using apps

20. AI Components Event based programming • Components are visible or non-visible "objects" with defined properties and behaviours (libraries). • Set initial properties within Component Designer

21. AI Component Designer Palette - Available component types Viewer - "rough" visualization of app Components - actual components in project Properties - initial properties for component

22. Palette • Grouped by type • Action • select component and drag it to the Viewer • Note: Default name given • click RENAME button in Component section to give it a MEANINGFUL NAME • Change default property values (if desired)

23. Screens • Properties • Defaults – Comp Designer • BackgroundImage • may need to be resized • Icon • Used on devices only (50x50) • ScreenOrientation • can be fixed or flexible • Scrollable • Title – ALWAYS change • exception is Screen1 • VersionCode - new • VersionName – new • Multiple Screens (later)

24. Designing Apps • typical phone has 300 x 400 pixel screen • GUI components • default position is top and left • location can be adjusted • Screen Arrangements (later) • Properties (common) • Text • Width – Fill Parent • Height

25. Best Practices - Naming • Every component has a name • If component will be used in your algorithm • CHANGE ITS NAME • Naming Conventions • btnName – buttons • txtName – textbox (later) • Note: "Name" is decided by the programmer

26. Behaviour • Represents the logic of your application • Programs consist of 3 types of structures • Sequential operations • Conditional operations (decisions) • Repeated operations Use the Blocks Editor to define the app behaviour.

27. Button Component • Buttons are GUI components • Typical Use: Input • Take an Action / React to a User Initiated Event • Example: Reset Score button • Actions would be defined in Blocks Editor using Blocks/Code Reset Score

28. Buttons • Event • When Click do • SOME ACTION • The action occurs once for each button click. • Example: Change screen color

29. Blocks Editor

30. Blocks Editor • Built-In • Definition • variables, procedures • Text • String library • Lists • List library • Math • Math operators • Logic • relational operators, conditionals • Control • screens, loops • Colors • color library

31. Changing Properties • Properties are set initially based on their default value in the Component Designer. • Blocks can be used to change the properties of any components in your Project.. • Blocks Editor • Locate the component of interest (Screen1) • Locate the SETTER block and provide (snap in) a valid value for the property (Color in this example)

32. Lab 1 - ColourMe ObjectiveCreate an interactive app that changes the colour of the screen on the computer. • Components • Buttons • Screen1 • Algorithms • When "red" button is clicked (Event) change the screen colour to red (Event Handler). • Include buttons for "Green", "Blue" • Initially • The app should have a "white" background when it starts and the "Reset" button will reset the screen • Include a "Quit" button to close the application.

33. Lab 1 - ColourMe App Inventor Skills • Screens • properties • BackGroundColor • Buttons • properties • Text • Events • WhenClicked

34. Textbox • Purpose • To obtain user input (text or numbers). • Properties • Text • value provided by user • Hint • user prompt for user (before they provide input) • useful to avoid extra Labels for user directions • FontSize • Consider setting to 20 px or more • Advice • Use Set Text Property Block to reset input between tasks

35. Labels • Purpose • To display output to users (text or numbers). • Properties • Text • value provided to user • FontSize • Consider setting to 20 px or more • Advice • Use meaningful component names to ease code readability.

36. UI Guidelines • KISS • Keep It Simple • Best apps are intuitive – no manuals required • Use easy to read fonts • Position GUI inputs in logical locations • Size GUI input or output components • large enough • Consider best feedback mechanisms • Consider Users and Devices • Options • vibration, speech, sound, display

37. Lab 2 - Calculator ObjectiveCreate a simple calculator app that can add, subtract, multiply, and divide operations. • Components • Button • TextBox • Screen Arrangement • Concepts • Math operators • Algorithms • When math operator button is clicked • perform corresponding operation on the 2 numeric input values • display result to user Extension : TextToSpeech

38. Variables • Numbers or Text • Global • available throughout app/screen • Use prefix var • Good habits • store all user input into variables and avoid re-reading values from GUI components • create a variable for any output before setting the GUI property

39. Example: Events / Event Handlers • What is the event? • What does the handler do? • What are hits and misses?

40. Lab 3 – Get the Message ObjectiveCreate a program to determine the age of a person based on their year of birth. The application will also request the user's first name, last name, and it will display and announce their name and age within a complete sentence. • Components • Button • TextBox • Screen Arrangement • Concepts • Text methods • Math methods • Procedures • Algorithms • see lab instructions

41. Conditionals • Block in test socket • MUST evaluate to true / or false

42. Conditionals – Example 1

43. Conditionals – Example 2

44. Lab 4 – Temp Convertor ObjectiveCreate a temperature convertor program for Fahrenheit and Celsius. • Components • Button • TextBox • Screen Arrangement • Concepts • Math operators • Conditions • If test • then-do • Ifelse test • then-do • else-do • Algorithms • see lab instructions

45. Canvas • Grid for animation and graphics • Uses (x,y) coordinates to locate objects (0,0) (300,0) (0,400) (300,400)

46. Canvas components • coordinates provided to event handler • In this case the action is to Draw a Circle on the same canvas • can have multiple canvas objects

47. Controlling Objects • A separate canvas and sprite can be used as a game controller. • The value of draggedSprite is True when the sprite is being dragged

48. Lab 5 – Paint the Puppy ObjectiveCreate an interactive drawing program. • Components • Canvas • Concepts • Responding to user input • Touched • Dragged • Algorithms • Increment / Decrement of variables

49. Clocks Clocks - non-visible components Used for 2 REASONS • Determine current Time or Date • Use Now() method to determine the current timestamp • Cause events to occur at regular intervals • Enable the Timer property (true or false)and set the Interval property (milliseconds)

50. Randomness • App Inventor has various methods of generating Random values • In the next lab we will move ImageSprites to Random locations within a Canvas.