Lesson 1 – Getting Started with App Inventor MIT App Inventor Lesson 1 – Getting Started with App Inventor

Agenda What is App Inventor? Getting Started Handling Events Designing User Interfaces (Design) Creating Blocks (Code) Emulator (Test) Handling Events Buttons (Action) Components (Behaviour)

What is App Inventor? App Inventor is a visual programming environment used to create mobile applications for Android devices (phones/tablets). Facts Originally created by Google Labs Now hosted at MIT Project is open source

Explore – Setup / Tutorials 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. Click on Explore to learn about App Inventor.

Where do I get the Installer? http://appinventor.mit.edu/learn/setup/setupwindows.html http://appinventor.mit.edu/learn/setup/setupmac.html

Click on Invent to create/modify App Inventor Projects. AI - Projects Click on Invent to create/modify App Inventor Projects.

App Inventor- Tools AI consists of three (3) tools that work together: 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 The 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)

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

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 OS X, Linux) provides Android emulator Recent version of Java (v6+) Internet connectivity optional Android phone/tablet device driver for Android device for live testing

Classroom environment Development Steps Open browser (Firefox or Chrome) appinventor.mit.edu Start emulator from desktop shortcut Start Blocks Editor Java application Connect Blocks Editor to emulator for testing Notes: 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.

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 The 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 – Projects Page

AI Components / Events Event based programming Components are visible or non-visible "objects" with defined properties and behaviours. Set the initial properties of components in the Component Designer

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

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)

Screens Properties Multiple Screens (later) 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 is 300 x 400 pixels GUI components default position is top and left, but can be changed 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 Sequential operations Conditional operations (decisions) Repeated operations Use the Blocks Editor to define the app behaviour.

Component : Button 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 Text Width Height Alignment Reset Score 40 20 center

Button actions Event - when click do This action occurs once for each button click. Example: Change screen color

Blocks Editor

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

Blocks Editor: My Blocks Choose your component Set the default properties for each component

Dynamically Changing Properties Properties are initially set in Component Designer Blocks can change the properties of any components in your Project Blocks Editor Locate the component (Screen1) Locate the set block and provide a valid value for the property (BackgroundColor in this example)

Hello Kitty Demo

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 Buttons properties Events BackGroundColor Buttons Text Events WhenClicked

Take it with you !! If 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 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.