8/2/2019 Google App Inventor Workshop
1/37
GOOGLE APP INVENTOR WORKSHOPInstructors:
Aadil Farooq
Saad Khalid
Zain Malik
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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/2/2019 Google App Inventor Workshop
8/37
8/2/2019 Google App Inventor Workshop
9/37
App
Interface
Component#1
Component#2
Behavior
EventHandler #1
EventHandler #2
8/2/2019 Google App Inventor Workshop
10/37
Consists of Components
Components are same as Tools in windows forms orWeb forms.
Two Types of Components
Visible Components
Non-Visible Components
8/2/2019 Google App Inventor Workshop
11/37
Well be dealing with most
of these controls today.
These are common
components Button
TextBox
Label
CheckBox
Etc.
Demo
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
13/37
Select any Visible or non Visible Component.
In the right corner we can see the properties ofthe item.
Demo.
8/2/2019 Google App Inventor Workshop
14/37
Behavior is same as the code part in windowsforms.
Behavior is defined using Block Editor.
Now this is the fun part. Demo
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
17/37
Getting:
Go to My Definitions under the tab My Blocks.
Get the block with the variable name written on it.
Demo.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
20/37
Math Drawer
This is in Built in tab.
Demo.
Text Drawer
This is in Built in tab.
Demo.
8/2/2019 Google App Inventor Workshop
21/37
Go to Built in Tab.
Open the Colors Drawer.
Demo
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
23/37
You begin specifying each event handler bydragging out an event-block from built in palette.
It has the form When do.
Demo.
8/2/2019 Google App Inventor Workshop
24/37
Set of activities grouped together.
Can send in Multiple Arguments
Two Types of functions
With return values. With out return values.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
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.
8/2/2019 Google App Inventor Workshop
35/37
THANK YOU!!!
8/2/2019 Google App Inventor Workshop
36/37
APP
User Interface Behaviour
Component#2
Component#1
EventHandler #2
EventHandler #1
8/2/2019 Google App Inventor Workshop
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