Google App Inventor Workshop

8/2/2019 Google App Inventor Workshop

1/37

GOOGLE APP INVENTOR WORKSHOPInstructors:

Aadil Farooq

Saad Khalid

Zain Malik


2/37

1. Mobile development (difference from orthodox development)

2. Mobile development (Opportunities)

3. Development environment setup

4. Why App inventor

5. Android Architecture

6. App inventor ArchitectureA. User interface(Intro to palette)

a. Visual componentsb. Non- Visual Components

B. Block Editor (Behaviour Part)

7. Building User Interface (Intro to palette)

8. Defining ,Getting, setting , incrementing a variable9. Randomness

10. Computations possible on variable (numbers(+) and Text (Join)

11. Colors


3/37

12. Event Handlers

13. Properties, Events

14. Functions

15. Capabilities and limitations

16. My First App (Controls, Events, properties,Functions)

17. Live testing and debugging

18. Building and deploying an app

19. Running emulator (installation and running ofEmulator)

20. Running applications (Emulator and mobile both)

21. Tiny DB

22. Sharing an application in App inventor


4/37

1. Tables

2. Two Dimensional Database

3. Conditions

4. Iterations5. Arrays (lists)

6. Tiny Web DB

7. Publish an app in the android market

8. API dev.

9. Xml Parsing

10. Web Services


5/37

o Pros

o News ways of HCI

o Ubiquitous computing

o Ease of use

o Cons

o Processing Power

o Storage Capacity (both Primary and Secondary)

o Cross platform compatibility issues.

o Every hardware different.


6/37

o Growth Rate

o Google activates 300,000 Androids per day.(Andy Rubin, Googles lead android Developer)

o Apple claimed it activates 270,000 iPhones per day.

(Steve Jobs, CEO Apple Inc.)

o Nokia sells 260,000 phones per day.

o Immense Opportunity for Entrepreneurs.

o Low Cost, Low Risk business.


7/37

Web Based

Nearly No Environment Setup Required.

Simply Install Java Development Kit (JDK)

Install App Inventor Extras Make your google account App Inventor Enabled.


8/37


9/37

App

Interface

Component#1

Component#2

Behavior

EventHandler #1

EventHandler #2


10/37

Consists of Components

Components are same as Tools in windows forms orWeb forms.

Two Types of Components

Visible Components

Non-Visible Components


11/37

Well be dealing with most

of these controls today.

These are common

components Button

TextBox

Label

CheckBox

Etc.

Demo


12/37

We wont be dealing muchwith these controls today.

These are controls such astimer and DataSource.

These are not Visible on thescreen but have their ownfunctionality.

Demo


13/37

Select any Visible or non Visible Component.

In the right corner we can see the properties ofthe item.

Demo.


14/37

Behavior is same as the code part in windowsforms.

Behavior is defined using Block Editor.

Now this is the fun part. Demo


15/37

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 valueand then typing in the new value.

Demo.


16/37

Setting:

Go to My Definitions under the tab My Blocks.

Get the block with the variable name and set globalwritten on it.

Then open the Math drawer and dragin a number block, entering any valueas the number.

Demo.


17/37

Getting:

Go to My Definitions under the tab My Blocks.

Get the block with the variable name written on it.

Demo.


18/37

Incrementing:

Go to math drawer takeout the + Block

From the math drawer drag in a number block, entering1 as the number.

In the + block put a getter in one part and number blockin the other block.

Now attach the + block to the setter.

Demo.


19/37

A number of blocks for adding randomness to anapplication.

They appear in the Math drawer of the built-inpalette.

Random Fraction gives value between 0 and 1

From Random integer the lower and upper boundneeds to be set.

Demo.


20/37

Math Drawer

This is in Built in tab.

Demo.

Text Drawer

This is in Built in tab.

Demo.


21/37

Go to Built in Tab.

Open the Colors Drawer.

Demo


22/37

Event Types Example

User-initiated Events Button click

Initialization Events At App launch

Timer Events After 1 sec do something

External Events Receive a text


23/37

You begin specifying each event handler bydragging out an event-block from built in palette.

It has the form When do.

Demo.


24/37

Set of activities grouped together.

Can send in Multiple Arguments

Two Types of functions

With return values. With out return values.


25/37

Lets create an App.

Things to use

Components

Events

Properties

Functions

Variables

Math Drawer

Text Drawer

Well help you in making the app.


26/37

Deactivate

Right Click on a block and choose Deactivate.

Choosing Deactivatefrom the block menu will keep the blockfrom becoming part of the app when you package it.

Selecting Activaterestores the deactivated block. Collapsing blocks

If your app has many blocks, theywon't all fit on the screen at once.

Use block collapsing.

Click on the minus sign at thelower left of any block.

Only the title will be visible.

Click on the plus sign to restorethe block to full visibility.


27/37

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 actionfor a block with Do It.

The balloon shows the value returned.


28/37

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 Itto add this and that.

The result is an error, and a complaint


29/37

Watching variables

Select "Watch" from the block menu

It opens a balloon which constantly monitors the valueof the variable.

While the running of the application we can see thechange of value.

Error Prevention

Blocks help you avoid errors at run time by not allowing

to attachincorrect blocks.


30/37

Starting the Emulator

You don't need to download any additional software touse the emulator.

It was included with the software you already

downloaded as part of the App Inventor ExtrasPackage.

Navigate to the directory where the App Inventor Extrassoftware was installed, locate the folder calledcommands-for-appinventor

Run the command run-emulator.


31/37

Download and running an app in the emulator

In Designer, choose Package for Phone | Download toCompute.

Download the app to your computer.

This will create a file with the extension .apk (an androidpackage).

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.


32/37

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 thedatabase.

Demo.


33/37

Extract Data from Db.

The tag is used to extract data.

If the value does not exist in the Db then GetValuereturns an empty text object.

Demo.


34/37

Download Source

Go to the My Projectspage,

Select a project,

Then choose More Actions | Download Source.

This will create a zip file which you can share withothers.

Upload Source

To upload a project, go to My Projects,

Choose More Actions | Upload Source,

Choose the zip file previously downloaded from AppInventor.


35/37

THANK YOU!!!


36/37

APP

User Interface Behaviour

Component#2

Component#1

EventHandler #2

EventHandler #1


37/37

No syntax The blocks language eliminates the need to remember and

type code

Everything is right in front of you The components and functions are organized into drawers.

Just find, drag, and drop. Events at top level

"When this happens, the app does this" is the correctconceptual model. Down with Listeners!

High-level components The app inventor team has built a great library with simplicity

the main goal. Only some blocks plug-in

You can't do things that don't make sense.

Concreteness You program components, not abstractions

Documents

Google App Inventor Workshop