No Slide Title

App InventorCEMC Summer Workshop 2012

Grant Hutchison grant.hutchison@gmail.comHumberside CI, TDSB

AgendaWhat is App Inventor?Why App Inventor?CS Educational PerspectiveHow to use App Inventor?Hands on activities (Lab 1 and 2)More App InventorResources and FuturesStudent ProjectsHands 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 LabCenter for Mobile Learning established by Hal AbelsonGoogle still active on the projectLanguage is also open sourcedWhy App Inventor?Students Love their Smartphones

Want to create mobile apps Want to teach novice programmersWant to create fun apps (games) quicklyWant to motivate "all" students

Want access to rapidly growing mobile application marketplace (Google Play)

CS Education perspectives (1 of 3) Basicsdata types (weak point)numbers and text only (globally scoped)data structures (weak, but good for intro CS)lists onlyoperators / built-in functionssimple set of string and list functions and math operatorsiteratorswhile, for next, for eachconditionals if, if else, boolean / relational modularityprocedures (within app only / no user defined libs)

App Inventor has only 2 data types (text and numbers).

Caveats-All variables have a global scope (within a app/screen combination) -naming convention is important to avoid confusion-

CS Educator perspectives (2 of 3) AdvancedDatabases (?)TinyDB (local key-based accessTinyWebDB (cloud key-based access)Sensorshaptic (vibration need phone)gyroscope / accelerometer (need phone)location (GPS)Phone Libstexting (SMS)Other Libstext to speech used in my coursesBluetooth / Lego Mindstorms Web services / websites / Other apps / Fusion tables

CS Educator perspectives (3 of 3) AdvancedGraphicsSprites Movement / Collision detectionUser InterfacesMultiple Screens - scopingInputButtons, textboxes, checkboxes, list pickercanvas / sprites location, motion, collision/edge detectionOutputlabels, colours, sound, vibration (haptic)

Why NOT App Inventor?Want to teach O-OWant to debug syntax errorsWant to create large group projectsWant to develop 3D games

Where is App Inventor Used?U.S. Colleges/UniversitiesUniversity of San Francisco Dave WolberWellesley College Lyn TurbakTrinity College (CS Principles) - Ralph MorelliAfter school programming clubsTechnovation ChallengeHigh SchoolsScotland (national curriculum) Jeremy ScottVarious schools including Humberside CI

Dave Wolber has a complete course-in-a-box on his website and his book is excellentLyn Turbak has a complete curriculum on his website and many of his advanced students are working on App Inventor extensionsRalph Morelli has created a CS Principles based course using App Inventor. CS Principles is a proposed framework for the revised AP CS exam in the US.

Technovation Challenge is a 10 week after school program for grade 9 girls in the US. They learn how to program using App Inventor and they also learn about the IT industry from local female mentors. The students design and implement an application and they pitch they app design to business leaders and they compete against other schools.

In Scotland they are revising their high school CS curriculum. Jeremy Scott has created an excellent Mobile App Development course for high school students. His resources consist of 7 lessons and the resources are readily accessible (search for "I love my smartphone").

Computational Thinking-seeing a problem and its solution at many levels of detail (abstraction);-thinking about tasks as a series of steps (algorithms);-understanding that solving a large problem will involve breaking it down into a set of smaller problems (decomposition);-appreciating that a new problem is likely to be related to other problems the learner has already solved (pattern recognition);-realising that a solution to a problem may be used to solve a whole range of related problems (generalisation).

Humberside2 years ago I started teaching and I was asked to teach 3 sections of ICS2O using Visual Basic as the high school used VB and Java within their program.

This past year at Humberside CI I had the opportunity to start with a fresh curriculum with 2 sections of ICS2O and 1 section of ICS3U.

What do I need to get started?GMail enabled accountBrowser (anything but IE)Install the App Inventor Setup program for your platform (Windows, Mac OSX, Linux)provides Android emulatorRecent version of Java (v6+)Internet connectivity

optionalAndroid phone/tabletdevice driver for Android deviceI ran into a few issues in my TDSB environment based on network policies.

The issues I had were:1. size of the files created by the Android emulator was beyond our Windows User Profile limit of 100MB2. Emulator controls from AI use Windows Batch files

ResolutionsChanged configuration to redirect emulator files to use a USB flash drive on F: or E:Changed batch file to executable script and provided students with executables.Follow the steps

http://appinventor.mit.edu

Students can work on their projects at home as long as they have installed the App Inventor setup files.

I had students using Mac OSX and Windows at home.

Their projects are stored on MIT web servers.

Classroom environmentMost students use the emulator

Development StepsStart browserStart emulatorConnect App Inventor (Blocks Editor) to emulator for testing

Emulator takes a few minutes to start. Each code change will be reflected in emulator.

Unfortunately the applications cannot use the various phone sensors such as the accelerometer when an emulator is used.

Also, changing screens is currently not supported by the emulator.Classroom environment - FilesSource code is a zip fileThe 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.

Unfortunately the applications cannot use the various phone sensors such as the accelerometer when an emulator is used.

Also, changing screens is currently not supported by the emulator.Classroom environment (alternate)Students have phones

Development StepsStart browserConnect phone to USB portensure device drivers are present and phone is in USB debugging modeConnect App Inventor (Blocks Editor) to phone for live testing.

Each code change will be reflected in phone.Some AI features don't work in live testing mode.

TinyDB for example.Take it with you !!Students have phones.

Three ways to get the app on a phone.

Create a QR codedownload to a phone (using developer email)

Download to the computersave a an Android install file (APK) on your development computer

Download to Connected Phoneinstall the APK directly on the phone

Source code is a zip file. The file can be transferred between computers and it is hosted on MIT webservers for each user.

Install/Binary code is an APK (Android Package File) and it is only created when the developer decides to create a release. Publish to Google PlayRegister as a developer with Google PlayAgree to the Google Play Developer Distribution AgreementPay a registration fee ($25.00)https://play.google.com/apps/publish/signup

DEMOApp Inventor Development CyclePaper / PencilComponent DesignerBlocks EditorBlocks EditorPhone/EmulatorGet Developing - ProjectsAn App Inventor Project is a collection of components and blocks.

Open website Log in using your GMAIL account

Available ActionsImport existing project into new projectCreate new projectSave/Export projectThe Component Designer is a web application.

The Blocks Editor is a Java application that is launched on the client.

In the future the Blocks Editor will become an web application that is integrated with the Component Designer (using Google's Blockley open source blocks based open source project)

Get Developing - ToolsApp Inventor consists of (3) tools working in unison:

Component DesignerDefine Graphical User Interface (GUI) and Non-GUI components

Blocks EditorDetermine the behaviour (algorithms and data structures) of the components

Android phone or emulatorPlatform for testing/using appsThe Component Designer is a web application.

The Blocks Editor is a Java application that is launched on the client.

In the future the Blocks Editor will become an web application that is integrated with the Component Designer (using Google's Blockley open source blocks based open source project)

AI ComponentsEvent based programming

Components are visible or non-visible "objects" with defined properties and behaviours (libraries).

Set initial properties within Component DesignerAI Component DesignerPalette - Available component typesViewer - "rough" visualization of appComponents - actual components in projectProperties - initial properties for component

Palette

Grouped by typeActionselect component and drag it to the ViewerNote: Default name givenclick RENAME button in Component section to give it a MEANINGFUL NAMEChange default property values (if desired)ScreensPropertiesDefaults Comp DesignerBackgroundImagemay need to be resizedIconUsed on devices only (50x50)ScreenOrientationcan be fixed or flexibleScrollableTitle ALWAYS changeexception is Screen1VersionCode - newVersionName new

Multiple Screens (later)

Designing Appstypical phone has 300 x 400 pixel screenGUI componentsdefault position is top and leftlocation can be adjustedScreen Arrangements (later)Properties (common)TextWidth Fill ParentHeight

Best Practices - NamingEvery component has a nameIf component will be used in your algorithmCHANGE ITS NAME

Naming ConventionsbtnName buttonstxtName textbox (later)

Note: "Name" is decided by the programmer

BehaviourRepresents the logic of your application

Programs consist of 3 types of structuresSequential operationsConditional operations (decisions)Repeated operations

Use the Blocks Editor to define the app behaviour.Button ComponentButtons are GUI componentsTypical Use: InputTake an Action / React to a User Initiated Event

Example: Reset Score button

Actions would be defined in Blocks Editor using Blocks/Code

TextWidthHeightAlignmentReset Score4020centerReset ScoreButtonsEventWhen Click do SOME ACTIONThe action occurs once for each button click.

Example: Change screen color

Blocks Editor

Blocks Editor

Built-InDefinitionvariables, proceduresTextString libraryListsList libraryMathMath operatorsLogicrelational operators, conditionalsControlscreens, loopsColorscolor libraryChanging PropertiesProperties 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 EditorLocate 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 - ColourMeObjectiveCreate an interactive app that changes the colour of the screen on the computer.

ComponentsButtons Screen1AlgorithmsWhen "red" button is clicked (Event)change the screen colour to red (Event Handler).Include buttons for "Green", "Blue"InitiallyThe app should have a "white" background when it starts and the "Reset" button will reset the screenInclude a "Quit" button to close the application.

Lab 1 - ColourMeApp Inventor SkillsScreenspropertiesBackGroundColorButtonspropertiesTextEventsWhenClickedTextboxPurposeTo obtain user input (text or numbers).

PropertiesTextvalue provided by userHintuser prompt for user (before they provide input)useful to avoid extra Labels for user directionsFontSizeConsider setting to 20 px or more

AdviceUse Set Text Property Block to reset input between tasks

LabelsPurposeTo display output to users (text or numbers).

PropertiesTextvalue provided to userFontSizeConsider setting to 20 px or more

AdviceUse meaningful component names to ease code readability.

UI GuidelinesKISSKeep It Simple Best apps are intuitive no manuals requiredUse easy to read fontsPosition GUI inputs in logical locations Size GUI input or output componentslarge enoughConsider best feedback mechanismsConsider Users and DevicesOptionsvibration, speech, sound, display

Lab 2 - CalculatorObjectiveCreate a simple calculator app that can add, subtract, multiply, and divide operations.ComponentsButtonTextBoxScreen ArrangementConceptsMath operators AlgorithmsWhen math operator button is clickedperform corresponding operation on the 2 numeric input valuesdisplay result to user

Extension : TextToSpeechVariablesNumbers or TextGlobalavailable throughout app/screenUse prefix var

Good habitsstore all user input into variables and avoid re-reading values from GUI componentscreate a variable for any output before setting the GUI propertyExample: Events / Event HandlersWhat is the event?

What does the handler do?

What are hits and misses?

Lab 3 Get the MessageObjectiveCreate 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.ComponentsButtonTextBoxScreen ArrangementConceptsText methodsMath methods ProceduresAlgorithmssee lab instructionsConditionals

Block in test socket MUST evaluate to true / or falseConditionals Example 1

Conditionals Example 2

There is no ELIF you simply add another IFELSE or IF block.

You can use Logic blocks like AND, OR, NOT to combine test conditions.Lab 4 Temp ConvertorObjectiveCreate a temperature convertor program for Fahrenheit and Celsius.ComponentsButtonTextBoxScreen ArrangementConceptsMath operatorsConditionsIf test then-doIfelse testthen-doelse-do Algorithmssee lab instructionsCanvasGrid for animation and graphicsUses (x,y) coordinates to locate objects(0,0)(0,400)(300,0)(300,400)Canvas componentscoordinates provided to event handlerIn this case the action is to Draw a Circle on the same canvascan have multiple canvas objects

Controlling ObjectsA 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 PuppyObjectiveCreate an interactive drawing program.ComponentsCanvasConceptsResponding to user inputTouchedDraggedAlgorithmsIncrement / Decrement of variablesClocksClocks - non-visible components

Used for 2 REASONS

Determine current Time or DateUse Now() method to determine the current timestamp

Cause events to occur at regular intervalsEnable the Timer property (true or false)and set the Interval property (milliseconds)You can have one or MORE clocks in a single app.

Clocks are often used in games to control the frequency of animations, updates, timers (playing time etc..).

RandomnessApp Inventor has various methods of generating Random values

In the next lab we will move ImageSprites to Random locations within a Canvas.ImageSpriteAn image sprite is an animated object that can interact with a canvas, balls, and other image sprites. contained by a canvasreact to touches and dragsinteract with other sprites and the edge of the canvas

ImageSpriteSprite MovementSpeed property to 10 (pixels)amount of movement per intervalInterval 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 PlusObjectiveCreate an interactive game.ComponentsCanvasImageSpriteClocksConceptsResponding to user inputTouchedRandomnessGame levels and difficultyAlgorithmssee lab handoutLoops Counted / For Loop

variable valueloop counter

no break option

Loops For Loop ExampleHow many iterations?Value of varTotalBefore Loop?After Loop?

Lab 7 InvestmentsObjectiveCreate an future investment calculator to determine the value of compound interest investments.ComponentsScreens MultipleConceptsLoops For Range (Counted)Algorithmssee lab handout (exponential relations)Loops Conditional LoopCondition is checked at the beginning of every iteration

Very flexible

No loop variable

Conditional Loop - Example

ListsHeterogeneousIndexed from one (1)Many methods avail

Good habitsuse clearly defined variable namesremoving all valuesset the variable with an empty "make a list" blockLab 8 Looping with ColourObjectiveCreate a fun graphical application.ComponentsCanvasBallConceptsLoops For Range (Counted)Lists random colour from a listAlgorithmssee lab handout (exponential relations)Lab 9 Know your ElementsObjectiveCreate a science-based quiz game involving knowing the most abundant elements on Earth.ComponentsNotifierConceptsMaintaining parallel listsAlgorithmssee lab handoutList PickerUser Input ComponentPredefined selection of possible valuesDrop down list

Lab 10 Tip CalculatorObjectiveCreate an application to calculate each person's equal share of the restaurant (or any) bill including a tip for service.ComponentsListPickerConceptsImproving user input data quality and overall UIAlgorithmssee lab handoutAudio2 non-visible components for audio:

Playerplay an audio or video file ( many formats available ) or to vibrate the phonethe name of the media file is specified in the Source propertymethods include: start(), stop(), pause()

Soundplay a short audio fileVideoVideoplayerVideo files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) formatfile is set with the Source propertymethods include: Start()Pause()SeekTo(number of millisecs)GetDuration()

Note: Video files should be < 1 MBThe overall size of an app is set to a max of 5 MBPlaying Music? - Example

Lab 11 Music MakerObjectiveCreate a xylophone application that can be used to record and playback music.ComponentsSoundClockConceptsParallel list processingResetting timers Controlled event processingAlgorithmssee lab handoutStorage TypesAn application needs to remember information as it is being used by a user.

There are two storage areas for applications :volatile storagestorage that exists only while the application is being usednon-volatile storagestorage that will exist between uses of the application

"Database" storageApp Inventor is able to store variables or lists in locally on the phone or on a web server.

Local storageTinyDB component

Cloud StorageTinyWebDB component

Lab 12 Quiz MakerObjectiveCreate an application to generate quizzes for students. ComponentsTinyDBConceptsStorage and Retrieval of dataAlgorithmssee lab handoutAnimation - Edge Detection.EdgeReached (number edge)The edge argument tells which edge was reached.

(0,0)(0,400)(300,0)(300,400)edge 1edge -1edge 4edge 3edge 2edge -4edge -3edge -2EdgesYou can detect when an object meets the edge of a canvas.bounce method is available for edge eventsedge value can be checked

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

Lab 13 AndyPongObjectiveCreate an pong style game with a control pad for the paddle and various difficulty levels. ComponentsSpritesConceptsCollision detectionEdge detectionSimulating bounces or providing direction to objectsGame levelsAlgorithmssee lab handoutLive AppExploring Computer SciencePurpose 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.

AudienceStudents, parents, teachers, guidance

Live AppsExploring 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"

ResourcesSample CodetAIR the App Inventor Repository: http://www.tair.info/

Tools - prepare apps for Google PlayAppToMarket available from http://amerkashi.wordpress.com/Marketizer available from http://www.taiic.com/marketizer/

ResourcesBooks

ResourcesApp Inventor Site ExploreForumsCurriculum Resources

Resources - GalleryProject Sharinghttp://gallery.appinventor.mit.edu

FuturesJava BridgeAI 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 increaseFutures AI Summit News Embed the Blocks Editor into the browserRemove need for phone drivers wireless app developmentServices - notifications like twitter (long running apps)Video Capture and play backNew Flung method for SpritesBlocks to text and Text to BlocksSupport for team programming Thanks I continually update my materials and will make them available at any time.

Websitehttp://hutchison-teach.ca

Teaching resourcesAvailable in a non-linked directory on my websiteDirectory Name: app-inventor-resources

Emailgrant.hutchison@gmail.com