GOOGLE APP INVENTOR WORKSHOP

Instructors: Aadil Farooq Saad Khalid Zain Malik

1. 2. 3. 4. 5. 6.

Mobile development (difference from orthodox development) Mobile development (Opportunities) Development environment setup Why App inventor Android Architecture App inventor Architecture
A.
a. b.

User interface(Intro to palette)

Visual components Non- Visual Components

B.

Block Editor (Behaviour Part)

7. 8. 9. 10. 11.

Building User Interface (Intro to palette) Defining ,Getting, setting , incrementing a variable Randomness Computations possible on variable (numbers(+) and Text (Join) Colors

12. 13. 14. 15. 16.

17. 18. 19.

20. 21. 22.

Event Handlers Properties, Events Functions Capabilities and limitations My First App (Controls, Events, properties, Functions) Live testing and debugging Building and deploying an app Running emulator (installation and running of Emulator) Running applications (Emulator and mobile both) Tiny DB Sharing an application in App inventor

1.

2.
3. 4. 5. 6. 7. 8. 9. 10.

Tables Two Dimensional Database Conditions Iterations Arrays (lists) Tiny Web DB Publish an app in the android market API dev. Xml Parsing Web Services

Pros
o
o o

News ways of HCI Ubiquitous computing Ease of use

Cons
Processing Power o Storage Capacity (both Primary and Secondary) o Cross platform compatibility issues. o Every hardware different.
o

Growth Rate
o
o o

Google activates 300,000 Androids per day.

(Andy Rubin, Googles lead android Developer)

Apple claimed it activates 270,000 iPhones per day.

(Steve Jobs, CEO Apple Inc.)

Nokia sells 260,000 phones per day.

o o

Immense Opportunity for Entrepreneurs. Low Cost, Low Risk business.

Web Based

Nearly No Environment Setup Required.

Simply Install Java Development Kit (JDK) Install App Inventor Extras Make your google account App Inventor Enabled.

App

Interface

Behavior

Component #1

Component #2

Event Handler #1

Event Handler #2

Consists of Components

Components are same as Tools in windows forms or Web forms.

Two Types of Components

Visible Components Non-Visible Components

Well be dealing with most of these controls today. These are common components

Button TextBox Label CheckBox Etc.

Demo

We wont be dealing much with these controls today. These are controls such as timer and DataSource. These are not Visible on the screen but have their own functionality. Demo

Select any Visible or non Visible Component. In the right corner we can see the properties of the item. Demo.

Behavior is same as the code part in windows forms. Behavior is defined using Block Editor. Now this is the fun part. Demo

Defining:
Go to Built in Tab Drag Drop the Define Variable Set its name by clicking on variable. Set its Datatype by clicking the Down arrow next to ?. Assign it the value by clicking the newly appeared value and then typing in the new value. Demo.

Setting:

Go to My Definitions under the tab My Blocks. Get the block with the variable name and set global written on it. Then open the Math drawer and drag in a number block, entering any value as the number. Demo.

Getting:

Go to My Definitions under the tab My Blocks. Get the block with the variable name written on it. Demo.

Incrementing:

Go to math drawer takeout the + Block From the math drawer drag in a number block, entering 1 as the number. In the + block put a getter in one part and number block in the other block. Now attach the + block to the setter. Demo.

A number of blocks for adding randomness to an application. They appear in the Math drawer of the built-in palette. Random Fraction gives value between 0 and 1 From Random integer the lower and upper bound needs to be set. Demo.

Math Drawer

This is in Built in tab. Demo.

Text Drawer
This is in Built in tab. Demo.

Go to Built in Tab. Open the Colors Drawer. Demo

Event Types User-initiated Events Initialization Events Timer Events External Events

Example Button click At App launch After 1 sec do something Receive a text

You begin specifying each event handler by dragging out an event-block from built in palette. It has the form When <event> do. Demo.

Set of activities grouped together. Can send in Multiple Arguments Two Types of functions

With return values. With out return values.

Lets create an App. Things to use

Components Events Properties Functions Variables Math Drawer Text Drawer

Well help you in making the app.

Deactivate
Right Click on a block and choose Deactivate. Choosing Deactivate from the block menu will keep the block from becoming part of the app when you package it. Selecting Activate restores the deactivated block.

Collapsing blocks

If your app has many blocks, they won't all fit on the screen at once. Use block collapsing. Click on the minus sign at the lower left of any block. Only the title will be visible. Click on the plus sign to restore the block to full visibility.

Comments

Right Click on a block and select Add Comment In the balloon, that appears, you can type a comment.

Do It
You can perform the action for a block with Do It. The balloon shows the value returned.

Do it and Complaints

Sometimes Do it gives an error. In the picture below, we changed the value of that to be the text "apple", and clicked Do It to add this and that. The result is an error, and a complaint

Watching variables

Select "Watch" from the block menu It opens a balloon which constantly monitors the value of the variable. While the running of the application we can see the change of value.
Blocks help you avoid errors at run time by not allowing to attach incorrect blocks.

Error Prevention

Starting the Emulator

You don't need to download any additional software to use the emulator. It was included with the software you already downloaded as part of the App Inventor Extras Package. Navigate to the directory where the App Inventor Extras software was installed, locate the folder called commands-for-appinventor Run the command run-emulator.

Download and running an app in the emulator

In Designer, choose Package for Phone | Download to Compute. Download the app to your computer. This will create a file with the extension .apk (an android package). Install it by writing following command in terminal. adb install -r C:\Purr.apk

OR

Simply go to Block Editor and press Connect to Phone.

The data we are dealing with right now is Transient. Tiny Db is for Persistent data. Add Data The Tag uniquely identifies the data in the database. Demo.

Extract Data from Db. The tag is used to extract data. If the value does not exist in the Db then GetValue returns an empty text object. Demo.

Download Source

Go to the My Projects page, Select a project, Then choose More Actions | Download Source. This will create a zip file which you can share with others.

Upload Source
To upload a project, go to My Projects, Choose More Actions | Upload Source, Choose the zip file previously downloaded from App Inventor.

THANK YOU!!!

APP

User Interface

Behaviour

Component #1

Component #2

Event Handler #1

Event Handler #2

No syntax

The blocks language eliminates the need to remember and type code The components and functions are organized into drawers. Just find, drag, and drop. "When this happens, the app does this" is the correct conceptual model. Down with Listeners! The app inventor team has built a great library with simplicity the main goal. You can't do things that don't make sense. You program components, not abstractions

Everything is right in front of you

Events at top level

High-level components

Only some blocks plug-in

Concreteness