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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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”
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Introduction Introduction
What can you build?Simple gamesQuizzesSMS applicationsLocation-based applicationsApplication that ‘talk’ to web services
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Introduction Introduction
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up Setting Up Step 2 : Go to: http://beta.appinventor.mit.edu/
Step 3 : Sign in with your gmail account and password
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up Setting Up Step 4 : Click ‘Allow’
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up Setting Up Congrats! You have successfully set up App
Inventor!
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Your First Application Your First Application Your component viewer should look like this:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Your First Application Your First Application Step 3 (Blocks Editor)
1. Click ‘Open the Blocks Editor’2. Wait for Java to execute
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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’
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Break
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.
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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).
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Introduction to Location-based DevelopmentIntroduction to Location-based Development
For virtual tour application, we will use the following components:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #1: Creating List of Attractions
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #1: Creating List of Attractions
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #2: Letting the User Choose an Attraction
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #2: Letting the User Choose an Attraction
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #3: Opening Maps with a Search
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
Logic #3: Opening Maps with a Search
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Blocks EditorVirtual Tour Application – Blocks Editor
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Designing the Visual Components
• The following components will be used in the applications:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Mouse Smash Application – Blocks EditorMouse Smash Application – Blocks Editor
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
Mouse Smash Application – Blocks EditorMouse Smash Application – Blocks Editor
Logic #1: Creating A Procedure Repeat the process for the y coordinates
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Moving the Mouse: Block Editor
• Logic #2 – Move the Mouse when Application Starts
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Moving the Mouse: Block Editor
• Logic #3 – Move the Mouse every second
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Mouse Smash Application – Part 1
• Mouse moving randomly on screen every one second
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Mouse Smash Application
• #Logic 4: Handling Touches on Mouse• Play sound and vibrate Phones when the
Mouse is touched
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up Setting Up You should see the following:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up Setting Up Step 2 : Installing App Inventor Setup for Windows (url:
beta.appinventor.mit.edu/learn/setup/setupwindows.html)
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)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
Top Related