Transcript Designer Interface

Programming with App Inventor
Computing Institute for K-12 Teachers
Summer 2012 Workshop
Overview
Session SA-0
Workshop Expectations
• This workshop is designed to introduce programming
concepts through the use of the intuitive programming
environment called App Inventor.
• Each of the seven App Inventor sessions will focus on one or
more of these concepts.
• Throughout the workshop, there will be a chance for you to
use your new skills to create teaching aids for your subject
while introducing programming concepts to your students.
App Inventor Overview
 Created by Google and released to the public in Dec. 2010
(called App Inventor for Android)
 Maintained by MIT since Dec. 2011
 100% GUI based programming environment for Android
 Object-oriented
 Multi-threaded
 Runs on Windows, Mac OS X, GNU/Linux
 May use Android Emulator or an Android Phone
 Free!
App Inventor
Getting Started
 You must first create (are already have) a Google account.
 The appropriate software (App Inventor and Emulator) needs to be
installed. Instructions for this will be provided.
 For the workshop, a Google account for each of you has already been
created and the software needed has been installed.
 To launch App Inventor, double click on the App Inventor icon on your
desktop.
 Next click the Invent button. This will launch your browser and load the
My Project view of the App Inventor Designer.
 From the My Project view you may create a new project or select from
previously saved projects.
App Inventor Home page
http://www.appinventor.mit.edu
Click Invent
to launch
App Inventor Layout
• App Inventor consists of 3 components (windows) used for
programming – shown in next slide
• Component Designer
• Blocks Editor
• Android Emulator or Phone
• Using these 3 components:
• You can select the “objects” (a button, text box, label…) of your
design and add them to your program
• Design how the objects interact with one another and the
user.
• And then run your program on the Emulator or a physical
Android phone
App Inventor Layout
Designer Interface
The Views - My Projects, Design, Debugging, (Learn)

The Designer interface consists of three views. My Projects, Design and Debugging.
Learn launches a reference webpage. You may switch between the three views by
clicking the circled selections below.
Designer Interface
The Views - My Projects, Design, Debugging, Learn

When My Projects is clicked the view changes to show the projects you have
previously saved and allows for switching from on project to another. Simply click
on the project you wish to use.

The project (programs) are saved on the Google App Inventor Server. So any
programs that you have saved will be available from any computer where App
Inventor is installed once you log into your Google account.

You may also save your programs to a file on your computer (or USB drive). The
programs (projects) are saved to a single project “zip” file in the location you
specify. These project files then can “up loaded” or emailed to other users.

If Design is selected, the Designer Interface view is displayed.

Learn launches another browser window that provides links to tutorials, references,
Frequently Asked Questions (FAQs) and setup instructions for the App Inventor.

The (Debugging) view is not covered in this workshop.
Designer Interface
The Views
 The Designer interface can display 3 views. The main view
is the Design view and it is the view you will see when you
first start the App Inventor.
 The Palette section contains a list of all the objects that you
can select for use in your program.
 The Viewer section displays the screen area of where you
can place objects. This provides an interactive view of
how the Android screen will look when ran.
 The Components section displays the object of you
program in a hierarchal (tree) manner. You can select an
object either from the Viewer or Components section.
 The Properties section displays the information (and allows
for modification) of the currently selected object.
Designer Interface
My Projects View

The view shown below is displayed when My Projects is clicked. From here you can
switch projects, create a new project or delete projects. You may also save your
projects (a zip file) to your computer using the Download Source menu selection. To
retrieve a project saved on your computer (or USB drive), use the Upload Source
menu selection. The projects listed are projects that have been saved to the App
Inventor Server (online). Saving projects is covered next.
Designer Interface
Save, Save As, Check Point, Add Screen, Remove Screen

Also available in the Designer are Save, Save As, Checkpoint, Add Screen and
Remove Screen selections. (circled below)
Designer Interface
Save, Save As, Check Point, Add Screen, Remove Screen

To save your projects (to the server online), click Save or Save As. Save As will
prompt you for a project name with a suggested name which you may change.
Save will save your project using the current name. You saved projects will be listed
in the My Project view as shown earlier.

You can use the Check Point selection to save you project at different “points” or
“times” in your program design and development. These can be used to recover or
restore to a early time in the development. The larger or more complex your project
becomes the more valuable this becomes.

Add Screen and Remove Screen do exactly as they say. If your program design calls
for a 2nd Screen then click Add Screen and another screen will be created in the
Viewer for use in your design.
Designer Interface
Design View - Sections
• Shown below (circled) are the four Sections of the Design view.
• Palette, Viewer, Components (with Media), Properties
Designer Interface
Design View
 The Designer interface is divided into four sections:
(from left to right - Palette, Viewer, Components,
Properties) as shown in previous slide.
 The Palette section contains a list of all the objects that you
can select for use in your program.
 The Viewer section displays the screen area of where you
can place objects. This provides an interactive view of
how the Android screen will look when ran.
 The Components section displays the object of you
program in a hierarchal (tree) manner. You can select an
object either from the Viewer or Components section.
 The Properties section displays the information (and allows
for modification) of the currently selected object.
Designer Interface
Palette Section
 The Palette is the left most section and
contains the objects that you may add to
your project.
 The objects are grouped in the Palette
(Basic, Media, Animation, Social, etc). Click the
group dividers to display more objects.
 To the right of each object is a question
mark graphic. Click on the question mark
for more detailed information about the
object’s attributes and abilities.
 To add an object to your project, select and
drag the object to the screen in the Viewer.
A blue bar will appear on the Screen to
indicate where the object will be added.
Designer Interface
Viewer Section
 The Viewer is the 2nd section of the Designer and
contains the objects that you have added to your
project.
 In this example, 2 Buttons have been added to
the screen. The 2nd Button is selected as
indicated by the green border. The text shown on
the Buttons is the default text for the object. This
may be changed in the Properties section of the
Designer (right most section).
 To change the location of the objects in the
Viewer, just drag the objects.
 To provide for more control of placement of the
objects on the Screen, use the Screen
Arrangement objects from the Palette. The
Screen Arrangement objects act as a container
for objects which then can be aligned
horizontally, vertically or in a grid via a table
alignment tool.
Designer Interface
Viewer, Components (with Media), Properties

The Viewer, Components
(with Media) and Properties
refer to the selected object.
In this case, it is Button2.
The Properties section
shows the attributes for
Button2 that you may
modify.

In the Components section,
you may Rename or Delete
the object.

In the Media section (below
the Components section),
you may add images,
sounds or video files to
your project.

Media files may also be
added from the Properties
section where appropriate.

The Properties of the
objects vary depending on
the object selected.
Blocks Editor

Once you are ready to define interactions between the objects or the user, launch
Blocks Editor from the Design view by clicking the Open the Blocks Editor button
(circled in red). You may be asked for permission to allow run and download a
smaller file from the App Inventor. Please allow this to occur.
Blocks Editor

The Blocks Editor will display the objects added to your program in the Designer.
Your objects should be listed under the My Blocks tab (as shown below).
Blocks Editor
 The Blocks Editor divided in 2 sections. Your program objects are shown on the left
side under the My Blocks tab.
 The right side is a where a graphical representation of the interactions between the
objects will be designed.
 When clicked, each of the objects display a pop-up menu of the various attributes
and events that may be used.
 To selection an event (such as a click for a button) , click on the button object you
created such as Button1. (Make sure the “My Blocks” tab is selected)
 A menu of different actions and properties will be displayed. Choose the attribute,
event, or procedure call you would like to add to your program. (Button Click).
 The Blocks Editor also provides for launching the Android Emulator located at the top
right of the window.
Blocks Editor

To create an action based on a button click, click on your object Button1. The popup
menu will appear. Select the Button1.Click block and drag it to the right panel of the
Block Editor. Do the same for Sound1, selecting the Play block.

Notice the blocks fit together like pieces of a jigsaw puzzle. This helps prevent
programming errors (bugs). When Button1 is clicked, Sound1 will play.
Blocks Editor

This shows a “clump” or block that will play a sound when Button1 is clicked.
Blocks Editor
 There are many different interactions and control methods available through the
Blocks Editor. Each workshop session will demonstrate a different programming
concept.
 The last component of the App Inventor is the Emulator (or actual phone). For the
workshop we will be using the Android Emulator.
 It is launched by clicking New emulator button.
 The following window will appear (just click OK). The Android emulator will
eventually appear. This may take several minutes. Once the Emulator is up slide
the green lock to the right with you mouse to unlock the phone (as instructed in the
window)
Android Emulator
 Now connect the App Inventor to the emulator by clicking Connect to Device…
 Select emulator-5554
 The Icon to the right will change from yellow to green once connected.

Once connected, your program will be launched and you will be able to test it on the
emulator.

You do need not click New emulator again while testing. If you change your project
you made need to Reset connections or re-open the Blocks Editor to reflect current
changes.

This a beta version of the App Inventor. Many capabilities shown in the Blocks Editor
may not work or may only work on a real Android based device.