app inventor cemc – summer workshop 2012 grant hutchison [email protected]...

App Inventor CEMC Summer Workshop 2012 Grant Hutchison [email protected] [email protected] Humberside CI, TDSB

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)

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 Hal Abelson Google still active on the project Language is also open sourced

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" studentsmotivate Want access to rapidly growing mobile application marketplace (Google Play)

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)

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

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)

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

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

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

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

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

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.

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

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

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 https://play.google.com/apps/publish/signup DEMO

App Inventor Development Cycle Design / Redesign Create UI Code Blocks Test / Debug Paper / Pencil Component Designer Blocks Editor Phone/Emulator

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

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

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

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

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

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)

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

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

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

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 TextWidthHeightAlignment Reset Score 4020center Reset Score

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

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

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)

Lab 1 - ColourMe Objective Create 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.

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

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

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.

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

Lab 2 - Calculator Objective Create 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

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

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

Lab 3 Get the Message Objective Create 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

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

Conditionals Example 1

Conditionals Example 2

Lab 4 Temp Convertor Objective Create 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

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

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

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

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

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

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

ImageSprite An image sprite is an animated object that can interact with a canvas, balls, and other image sprites. contained by a canvas react to touches and drags interact with other sprites and the edge of the canvas

ImageSprite Sprite Movement Speed property to 10 (pixels) amount of movement per interval Interval property to 5 (milliseconds) frequency of movement Heading property to 180 (degrees) Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down. Enabled property to True You can change these and other properties to modify the image sprite's behavior.

Lab 6 Mole Mash Plus Objective Create an interactive game. Components Canvas ImageSprite Clocks Concepts Responding to user input Touched Randomness Game levels and difficulty Algorithms see lab handout

Loops Counted / For Loop variable value loop counter no break option

Loops For Loop Example How many iterations? Value of varTotal Before Loop? After Loop?

Lab 7 Investments Objective Create an future investment calculator to determine the value of compound interest investments. Components Screens Multiple Concepts Loops For Range (Counted) Algorithms see lab handout (exponential relations)

Loops Conditional Loop Condition is checked at the beginning of every iteration Very flexible No loop variable

Conditional Loop - Example

Lists Heterogeneous Indexed from one (1) Many methods avail Good habits use clearly defined variable names removing all values set the variable with an empty "make a list" block

Lab 8 Looping with Colour Objective Create a fun graphical application. Components Canvas Ball Concepts Loops For Range (Counted) Lists random colour from a list Algorithms see lab handout (exponential relations)

Lab 9 Know your Elements Objective Create a science-based quiz game involving knowing the most abundant elements on Earth. Components Notifier Concepts Maintaining parallel lists Algorithms see lab handout

List Picker User Input Component Predefined selection of possible values Drop down list

Lab 10 Tip Calculator Objective Create an application to calculate each person's equal share of the restaurant (or any) bill including a tip for service. Components ListPicker Concepts Improving user input data quality and overall UI Algorithms see lab handout

Audio 2 non-visible components for audio: 1. Player play an audio or video file ( many formats available ) or to vibrate the phoneformats the name of the media file is specified in the Source property methods include: start(), stop(), pause() 2. Sound play a short audio file

Video Videoplayer Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format file is set with the Source property methods include: Start() Pause() SeekTo(number of millisecs) GetDuration() Note: Video files should be < 1 MB The overall size of an app is set to a max of 5 MB

Playing Music? - Example

Lab 11 Music Maker Objective Create a xylophone application that can be used to record and playback music. Components Sound Clock Concepts Parallel list processing Resetting timers Controlled event processing Algorithms see lab handout

Storage Types An application needs to remember information as it is being used by a user. There are two storage areas for applications : volatile storage storage that exists only while the application is being used non-volatile storage storage that will exist between uses of the application

"Database" storage App Inventor is able to store variables or lists in locally on the phone or on a web server. Local storage TinyDB component Cloud Storage TinyWebDB component

Lab 12 Quiz Maker Objective Create an application to generate quizzes for students. Components TinyDB Concepts Storage and Retrieval of data Algorithms see lab handout

Animation - Edge Detection.EdgeReached (number edge) The edge argument tells which edge was reached. (0,0) (0,400) (300,0) (300,400) edge 1 edge -1 edge 4 edge 3 edge 2edge -4 edge -3 edge -2

Edges You can detect when an object meets the edge of a canvas. bounce method is available for edge events edge value can be checked

Collisions Collisions can be detected by either object. eg. Ball is colliding with a paddle imageSprite Note that the heading is changed to simulate a bounce

Lab 13 AndyPong Objective Create an pong style game with a control pad for the paddle and various difficulty levels. Components Sprites Concepts Collision detection Edge detection Simulating bounces or providing direction to objects Game levels Algorithms see lab handout

Live App Exploring Computer Science Purpose of the Application To respond to declining enrolment in Computer Science, Technology and Business courses. Create an free app that can be used as an interactive gateway for Computer Studies, Business Studies, and Technology courses in Ontario High Schools. Audience Students, parents, teachers, guidance

Live Apps Exploring Computer Science The application includes information about available courses along with extra information such as competitions. The app also includes an interactive game called "MythBusting Computer Science". Just go to Google Play and search for: "Explore Computer Science"

Resources Sample Code tAIR the App Inventor Repository: http://www.tair.info/ http://www.tair.info/ Tools - prepare apps for Google Play AppToMarket available from http://amerkashi.wordpress.com/ http://amerkashi.wordpress.com/ Marketizer available from http://www.taiic.com/marketizer/ http://www.taiic.com/marketizer/

Resources Books

Resources App Inventor Site Explore Forums Curriculum Resources

Resources - Gallery Project Sharing http://gallery.appinventor.mit.edu

Futures Java Bridge AI components wrapped in a JAR file to enable a transition from AI to full Android SDK development using Eclipse and Java Use in CS Education likely to increase

Futures AI Summit News 1. Embed the Blocks Editor into the browser 2. Remove need for phone drivers wireless app development 3. Services - notifications like twitter (long running apps) 4. Video Capture and play back 5. New Flung method for Sprites 6. Blocks to text and Text to Blocks 7. Support for team programming

Thanks I continually update my materials and will make them available at any time. Website http://hutchison-teach.ca http://hutchison-teach.ca Teaching resources Available in a non-linked directory on my website Directory Name: app-inventor-resources Email [email protected]

app inventor cemc – summer workshop 2012 grant hutchison [email protected]...

Documents