App Inventor Workshop for Learning Journey

App Inventor Workshop

A learning Journey brought to you by the

Diploma In Mobile Software Development

Workshop Outline Workshop Outline Session 1Introduction to App Inventor for AndroidComponents of App InventorYour first Mobile App

Session 2Introduction to Google MapsIntroduction to location-based development with App InventorActivity starter component for launching other Android applicationList Picker components for choosing list of locationsVirtual Tour Application (Marina Bay)

AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP

Workshop Outline Workshop Outline Self Study Activity:

Further Explorations - Mouse Smash in App Inventor

Appendix A:App Inventor ResourcesFuture developmentEnd of workshop

Appendix B:

Setting up of App Inventor Environment


Introduction to App Inventor for Android

Introduction Introduction What is App Inventor for Android?Visual language with drag/drop interfaceUses block editor to create applicationsNo ‘programming’ knowledge (Java, Python, etc) neededUses features on the smartphone

GPS-location sensor Messaging (SMS) Accelerometer

Developed jointly by MIT and Google Labs (now defunct)


Introduction Introduction

Vision for the App Inventor:“A world where young people and everyone can engage the world of mobile devices and applications as creators, not just consumers”



What can you build?Simple gamesQuizzesSMS applicationsLocation-based applicationsApplication that ‘talk’ to web services



What do you need?Google (gmail) accountApp Inventor Component DesignerBlocks EditorJava Runtime Environment (JRE) 1.6 and aboveAndroid Emulator (or better still an Android phone)


Setting Up App Inventor of Environment

This step was preconfigure in the notebook assigned

to your team

Creating Google Account

Setting Up Setting Up Step 1 : Run Google Chrome and apply for Google

(gmail) account at www.gmail.com


Setting Up Setting Up Step 2 : Go to: http://beta.appinventor.mit.edu/

Step 3 : Sign in with your gmail account and password


Setting Up Setting Up Step 4 : Click ‘Allow’


Setting Up Setting Up Congrats! You have successfully set up App

Inventor!


Components of App Inventor for Android

Components of App Inventor Components of App Inventor Three main components of App Inventor:

Component Designer Look and feel of your application WYSWIG interface

Blocks Editor Runs on separate windows from Component

Designer Creates the behaviour for the components

Android Emulator or Android smartphone Test and run your applications


Components of App Inventor Components of App Inventor Component Designer

Components of App Inventor Components of App Inventor Android Emulator

For testing of application before packaging for smartphone

Activated via Blocks Editor (New emulator button)


Your First Application

Your First Application Your First Application Application description:

Click on a picture to generate a sound, vibrate and activate the accelerometer

Three components are needed to create the application:1. Component Designer2. Blocks Editor3. Android Emulator / Android Smartphone


Your First Application Your First Application Application description – Continue:

Picture -> Cat, Sound -> ‘meow’ Two files needed: kitty.png and meow.mp3

http://web.rp.sg/tan_kok_cheng/cat.zip


http://web.rp.sg/tan_kok_cheng/cat.zip

Your First Application Your First Application Step 1:

1. Go to “http://beta.appinventor.mit.edu/2. Sign-in with your gmail account3. Click ‘new’ project4. Enter name for project : HelloCat5. You’ll be presented with the Component Designer

Your First Application Your First Application Step 2 (Component Designer)

1. You’ll need two visible components for this application:a) Labelb) Button

2. Drag ‘Label’ component into the component viewer

3. Customize the label by using the properties (text, background colour, font size, etc)


Your First Application Your First Application Step 2 (Component Designer) - Continue

4. Drag ‘Button’ component into the component viewer

5. Customize the button by using the properties • Image -> Upload new… -> Choose File -> Select

‘kitty.png’ to Open -> OK• Text -> delete all text (“Text for Button1”)

6. Under ‘Media’ Group, Drag ‘Sound’ component (from media palette) into the component viewer. Note that this component is non-visible


Your First Application Your First Application Step 2 (Component Designer) – Continue

7. Customize the ‘Sound’ component by using the properties• Source -> Upload new… -> Choose File ->

select ‘meow.mp3’ to Open -> OK


Your First Application Your First Application Your component viewer should look like this:


Your First Application Your First Application Step 3 (Blocks Editor)

1. Click ‘Open the Blocks Editor’2. Wait for Java to execute


Your First Application Your First Application Step 3 (Blocks Editor)

3. Select ‘My Blocks’ -> Button1

4. Drag & drop

5. Select ‘My Blocks’ -> Sound1

6. Drag & drop into ‘Button1.Click’


Your First Application Your First Application Step 3 (Blocks Editor) - Continue

7.To add vibration to the application, drag & drop (under ‘My Blocks’ -> Sound1)

8.To add the duration of vibration, drag & drop (under ‘Built-in’ -> Math)

• Specify ‘500’ instead of ‘123’ (default value)

NoteAll the blocks must fit in order to form the ‘logic’ of the applicationAppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP

Your First Application Your First Application Your blocks editor should look like this:


Your First Application Your First Application Step 4 (Packaging the App for Download)

1. Select ‘New Emulator’2. Wait for the Android emulator to start up (may

take around 30 sec to 1 min)3. Slide the emulator to activate it


Your First Application Your First Application Step 4 (Packaging the App for Download)

4. Select ‘Connect to Device’ -> ‘emulate-5554’5. Wait for connection to emulator6. You should see the following:


Your First Application Your First Application

Congratulations! You have created your first Android Mobile Application using App Inventor.

Note: You can try connecting an android smartphone to test out the application you have created.

Enhancement: You can try adding the accelerometer functionalities to the application (eg. sound activation when smartphone is shaken)


Introduction to Google Maps

Introduction to Google MapsIntroduction to Google Maps

Web mapping services application provided by Google

Available for all types of devices and platforms Functions include location finder, route planner,

distance calculations, etc.


Introduction to Google MapsIntroduction to Google Maps

Various views include terrain, traffic, street, satellite, etc.

Highly flexible and customisable by using Google Maps Application Programming Interface (API).


Introduction to Location-based development

in App Inventor

Introduction to Location-based DevelopmentIntroduction to Location-based Development

App Inventor has the capability of developing location based application like virtual tours, route planners, etc

Uses Google maps as the reference and leveraging on location sensor (GPS) available in most Android smartphones


Introduction to Location-based DevelopmentIntroduction to Location-based Development

For virtual tour application, we will use the following components:


Virtual Tour Mobile AppVirtual Tour Mobile App How your Virtual Tour App will look like:

Basic: Label

Basic: Image

Basic: ListPicker

Other stuff: ActivityStarter

Virtual Tour Mobile AppVirtual Tour Mobile App ActivityStarter

Component that launches any Android application (e.g. Browser, Google Maps, etc.)

Low level component Need to configure the properties


Property Value

Action android.intention.action.VIEW

ActivityClass com.google.android.maps.MapsActivity

ActivityPackage com.google.android.apps.maps

Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor

Adding the logic of the application via Blocks Editor Creating a List of Attractions Letting the User Choose an Attraction Opening Maps with a Search



Logic #1: Creating List of Attractions


Logic #2: Letting the User Choose an Attraction



Logic #3: Opening Maps with a Search


Virtual Tour Application – FinalVirtual Tour Application – Final

Further Explorations

Mouse Smash in App Inventor

Mouse Smash in App Inventor Mouse Smash in App Inventor

Application Description A mouse pops up randomly on the screen. Touching the mouse causes the phone to vibrate

and play a sound Components needed:

Canvas ImageSprite Clock Sound


Designing the Visual Components

• The following components will be used in the applications:


Mouse Smash Application

Animation: ImageSprite

Basic: Canvas

Media: SoundBasic: Clock

Mouse Smash Application – Blocks EditorMouse Smash Application – Blocks Editor

Logic #1: Creating A Procedure Click Definition drawer under Built-in tab Drag out the to procedure block Change the procedure name to “MoveMouse”

Click Mouse drawer under My Blocks Drag Mouse.MoveTo into the procedure



Logic #1: Creating A Procedure Click Math drawer under Built-In Drag out the random Integer block

Change the from and to according to the Image shown below


Logic #1: Creating A Procedure Repeat the process for the y coordinates


Moving the Mouse: Block Editor

• Logic #2 – Move the Mouse when Application Starts


Moving the Mouse: Block Editor

• Logic #3 – Move the Mouse every second


Mouse Smash Application – Part 1

• Mouse moving randomly on screen every one second


Mouse Smash Application

• #Logic 4: Handling Touches on Mouse• Play sound and vibrate Phones when the

Mouse is touched


Mouse Smash Application: Complete Application

Procedure to move the mouse randomly

Call the MoveMouse Procedure every 1 second

Play sound and vibrate phone when mouse is touched.

Appendix A

App Inventor Resources

App Inventor Resources App Inventor Resources

Plenty on the web (you can google for them) Good books/instructions

App Inventor (David Wolber, Hal Abelson, etc) (O’Reilly)

App Inventor for Android (Jason Tyler) (John Wiley)

Google App Inventor (Ralph Roberts) (Packt Publishing)

Android Apps with App Inventor (Jorg H Kloss)(Addison-Wesley Professional)


Appendix BSetup App inventor

Setting Up Setting Up System requirements:

Windows: XP, Vista, Windows 7 Mac: OS X 10.5, 10.6 GNU/Linux: Ubuntu 8+, Debian 5+ Browser: Firefox 3.6 or higher, Chrome 4.0 or higher, IE 7 or

higher, Safari 5.0 or higher Java: JRE 1.6 or higher

http://beta.appinventor.mit.edu/learn/setup/index.html#setupComputer To test whether you have the necessary software, click on the

following url: Check


http://beta.appinventor.mit.edu/learn/setup/index.html



http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html

Setting Up Setting Up You should see the following:


Setting Up Setting Up Step 2 : Installing App Inventor Setup for Windows (url:

beta.appinventor.mit.edu/learn/setup/setupwindows.html)

Future Development

Future Development Future Development

Current still on beta -> ie. can be buggy Open source -> more functionality should be built

into App Inventor Applications built on App Inventor can be

uploaded to Google Play (need to create developer profile and pay $25 registration fee)


For more information about the

Diploma in Mobile Software

Development, please contact:

Mr. Tan Kok Cheng

(Programme Chair)

Email: [email protected]

Connect with us!Join us on Facebook at

http://www.facebook.com/rpmobile

mailto:[email protected]



App Inventor Workshop for Learning Journey

Documents

Transcript of App Inventor Workshop for Learning Journey