APP INVENTOR GETTING STARTED GUIDE

Summary

1. Presentation. . . . . . . . . . Page 2

A first project. . . . . . . . . Page 2

Development of a touchscreen tablet application for managing a button
as well as an image.

This first project allows you to get acquainted with the environment offered by App Inventor.
(Project development website and block editor)

A second project . . . . . . . . Page 6

This second project builds on the previous one and allows for the introduction of a very
employee under App Inventor (object 'Canvas')

4. Variables and use of different controls . . . . . Page 7

This section is dedicated to the use of variables (declarations, types, and calculations) as well
to the different structures: loops and alternatives.

5. Graphic arrangement of objects . . . . . . Page 8

This section presents solutions to structure the screen related to the application.
which will be developed.

Jean Moulin High School: AppInventor Quick Start Guide. Laurent P. 1

1. Presentation

APP INVENTOR is an IDE (integrated development environment)

integrated) that allows the creation of applications intended for
systems equipped with Android platforms.
Among these systems, we find phones (touch or not) as well
such as tablets (ACER, SAMSUNG ...).

This programming environment allows for easy graphical programming, based on

block assembly (Scratch language). Knowledge in object-oriented programming
are nevertheless necessary. However, one can completely free oneself from knowledge
the names of properties and methods related to objects. Indeed, blocks of properties,
methods and events will be directly proposed upon the creation of an object.

The IDE consists of two software components:

a website allowing to create a project: Creating the graphic page of the future
application (submission of necessary items for the application on a work page _ a bit
like a Form in visual C#). This website requires a Google account (gmail) to
to function.

a resident program on the computer that allows for program input (association
blocks linked to the previously defined objects in the web space). This program
also allows the download of the application to the desired media (tablet,
phone...)

Originally, the APP INVENTOR project was created by Google Labs... then abandoned. Today
this concept is resumed by the MIT (Massachusetts Institute of Technology
[Link]

For your information...

To install the APP INVENTOR IDE on your computer, it is necessary to follow these few steps.
steps mentioned in the LEARN tab of the site.
Test your system: Test your PC system to install the platform
form JAVA in case it is not present.
Download and install the App Inventor Software:
App Inventor [Link] file. This program, executed using the
JAVA platform will allow the entry of blocks.
In addition, the USB driver enabling the tablet/computer connection will need to be
also installed (downloadable from the manufacturers' websites)

Note
Other development environments such as Eclipse or Processing (combined with the SDK
Android allows the creation of applications on Android platforms. These
environments offer programming possibilities that App Inventor does not allow
However, the ergonomic aspect of AppInventor makes it an excellent choice for
quickly develop small personal applications (GUI interface) on tablets or on
phones.

A first project: "test1"

There's nothing like getting hands-on!

Jean Moulin High School: Getting Started Guide for AppInventor. Laurent P. 2
 From the Google Chrome browser, go to the MIT App Inventor website:

[Link] click on .
Enter the email address of your Google account as well as the password (a Google account
by computer will be given by your teacher.

The following message may appear in the case of a first connection:

Click on Save,
then on Allow

The website for creating the project appears:

Click on New, then

give the name test1 to
project

The My Project tab

Click on Ok allows to export or
to load the projects
created in .zip format

Here the window Here is the window of

of exploration of the properties. He is
objects contained in the possible to modify
Screen. A click on a the properties from
Here is the work zone. objects, allows, in the object selected
This area using the window of from the area of
represents what will be right (Properties) of work or since the
displayed on the screen of modify the properties exploration window.
mobile tablet base object.
telephone...)

Here is the palette of

available objects.
Slider move
allows of the
position on the
workspace
(Screen1).

Jean Moulin High School: Getting Started Guide for AppInventor. Laurent P. 3
The first hands-on project consists of an application that allows you to display an image.
as soon as the "Press here" button is touched.

Place the following objects on the workspace:

Button
Image

Configure the properties of the project objects so that:

The button text contains "Press here"
The image must be hidden beforehand (Hidden property) and contain the file.
image_android.png (located in your working directory)
The background of the screen (Screen1) does not have a background color (background color =
"none") and contains the image "[Link]" (located in your directory of
work).

Now, it is necessary to launch the block editor in order to implement the associated programming.
to the different objects:

Click on
The following message appears (at the bottom of your browser window):

Click on Save.

Then Open (right-click while positioned on the name of the downloaded file)

During an initial installation,

the application 'App Inventor for
Android Blocks Editor requests
of authorizations.

Activate

Execute

Jean Moulin High School: App Inventor User Guide. Laurent P. 4

 The block editor is open:

Here is the workstation where the different blocks will be.

arranged and organized.

Note:
A left click in the workspace allows access
directly to the shortcuts of the left window
(block library)

Here we find all the blocks necessary for programming:

Built-in includes the 'integrated', that is to say the basic elements:

define a variable or a method (procedure) _Definition_
Perform operations on text _Text_
Make comparisons on numbers or mathematical operations _Math_
Perform tests or logical operations _Logic_
create a _Control_ loop
Use color parameters _Color_

My blocks contain the objects defined in the project. Here we will find, for example, the button with its events.
and associated properties.

Advanced contains additional elements (properties, methods) for objects already defined in the
project.

Input of the program

Here is what we need to achieve in the workspace:

Event triggered when a click
short press is detected on the button.
We note the 'spurs' that
Property allowing to allow the nesting of
make appear (or blocks within each other.
This limits the risk of error.
disappear) the image.

Testing the application on the tablet

Connect the tablet with its cable to one of the USB ports on the computer.
Wait for this one to be recognized.

From the 'Connect to device' tab at the top

left choose the tablet number that
convenient. If no tablet is detected
while the driver is correctly installed and the tablet has been recognized, click on
Save in order to save the ongoing work and then exit the block editor.
Then relaunch the block editor from the project creation website.

Jean Moulin High School: AppInventor Getting Started Guide. Laurent P. 5

 To check the functioning of the application.

A second project

This second project utilizes the 'Canvas' object. This object can contain a background image.
and can react to 'dragged' type events (movement). Where this object becomes very
interesting, is that it has drawing methods (line, circle...).

This second project takes up the example of the first (appearance of an image) and allows drawing.
of a curve drawn with a finger on the background image of the container.

Leave the block editor.

Remove the object "Image" from the ongoing project.
Place a 'Canvas' object and select the image 'image_android.png' for the background.
Also choose the property Visible = Hidden.
Open the block editor
Enter the following program:
Property permettant
to activate a color of
drawing on the canvas

Property allowing Variable declaration

to make appear carried out in
(or disappear the event. prevX and
the display of the canvas prevY indicates the position
with the finger during the 'slide'.

Event it
triggering when the
finger "slides" in the The method 'DrawCircle' has
canvas. need the values contained
in prevX and prevY. We have
access to these blocks from
the tab MyBlocks
MyDefinitions

DrawCircle method.

Test the obtained functionality and especially change the parameter related to the radius of the
circle.
Modify the project by placing the image '[Link]' in the canvas this time.
You can also modify the 'width' and 'height' properties of the canvas.

Jean Moulin High School: AppInventor User Guide. Laurent P. 6

 4. Variables and use of different controls

This section is not intended to review all the possibilities offered; there would be
rather, it is about showing the use of essential blocks in programming.

The variables
Note that in AppInventor, almost all variables are global (except for those that
are passed as arguments to the methods. It's not fantastic... but that's how it is,
then too bad!

Variable declaration

Declaration of a variable
of type 'text' (string)

Declaration of a variable
of type "number" (double).

One can expect that the program on the side does not
fonctionne pas car la propriété "Text" de "[Link]"
reasonably expect text ...Well no! That
works! The type changes of the variables
font implicitly (easier than in Visual C# but good)
less rigorous...)

How to perform calculations using declared variables?

Just use from "My Blocks" "My Definitions" the block "Set global". As a title
for example:
allows to achieve
the operation:

mavariable2 = 4 x
mavariable2

Loops and decision structures

AppInventor offers many possibilities for loops. For example:

hello loop for...

variable is the variable used to
the for loop. That we can
start is the starting value of the translate by:
variable
end is the value of end
the steepest value of the step
of incrementation

Jean Moulin High School: AppInventor Getting Started Guide. Laurent P. 7

 for(i=0;i<=50;i++)
{mavariable2=mavariable2+10;
[Link]=mavariable2;
}

the while loop (as long as...do)

As long as the condition is

That we can
true the sequence contained in
"do" is executing.. translate by:

while(mavariable2<10)
{
mavariable=mavariable+1;
[Link]=mavariable2;
}

hello structure if ...else

The writing of this structure in the form of

blocks is particularly explicit. The
translation in C# is:

if (mavariable2<10)
{[Link]="valeur plus petite que 10";
} else
{[Link]="valeur supérieure ou égale à
10";
}

5. Graphic arrangement of objects

To conclude this guide, it may be interesting to state the arrangement possibilities.

graphics offered by AppInventor to give some aesthetics to the application. Indeed
we quickly discover that the objects placed on the project workspace (Screen) do not
do not superimpose (nor do they juxtapose ...). If we want to arrange them, we must then create some
screen arrangements using the objects contained in 'Screen Arrangement'.

Jean Moulin High School: AppInventor User Guide. Laurent P. 8

 HorizontalArrangement allows you to create
a horizontal container in which others
objects can be placed.

TableArrangement allows you to create a

tableau container. Each case can then
contain the desired object.

VerticalArrangement allows you to create a

vertical container in which others
objects can be placed.

Jean Moulin High School: AppInventor User Guide. Laurent P. 9