App Inventor Workshop A learning Journey brought to you by the
Diploma In Mobile Software Development
Workshop Outline Session 1 Introduction to App Inventor for Android Components of App Inventor Your first Mobile App Session 2 Introduction to Google Maps Introduction to location-based development with App Inventor Activity starter component for launching other Android application List Picker components for choosing list of locations Virtual Tour Application (Marina Bay)
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Workshop Outline Self Study Activity: Further
Explorations - Mouse Smash in App Inventor
Appendix A: App
Inventor Resources
Future End
development
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 What is App Inventor for Android? Visual language with drag/drop interface Uses block editor to create applications No ‘programming’ knowledge (Java, Python, etc) needed Uses 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 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 What can you build? Simple games Quizzes SMS applications Location-based applications Application that ‘talk’ to web services
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Introduction What do you need? Google (gmail) account App Inventor Component Designer Blocks Editor Java Runtime Environment (JRE) 1.6 and above Android 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
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
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
Step 4 : Click ‘Allow’
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
Three main components of App Inventor: Component Designer
Blocks Editor
Look and feel of your application WYSWIG interface 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 ď ą
Component Designer
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
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 Designer 2. Blocks Editor 3. Android Emulator / Android Smartphone
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
Step 1: 1. 2. 3. 4. 5.
Go to “http://beta.appinventor.mit.edu/ Sign-in with your gmail account Click ‘new’ project Enter name for project : HelloCat You’ll be presented with the Component Designer
Your First Application
Step 2 (Component Designer) 1.
2.
3.
You’ll need two visible components for this application: a) Label b) Button Drag ‘Label’ component into the component viewer 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
Step 2 (Component Designer) - Continue 4.
5.
4.
Drag ‘Button’ component into the component viewer 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”) 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
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 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
Step 3 (Blocks Editor) 1. 2.
Click ‘Open the Blocks Editor’ Wait for Java to execute
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
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) Note All the blocks must fit in order to form the ‘logic’ of the application
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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
Step 4 (Packaging the App for Download) 1. 2.
3.
Select ‘New Emulator’ Wait for the Android emulator to start up (may take around 30 sec to 1 min) 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
Step 4 (Packaging the App for Download) 4. 5. 6.
Select ‘Connect to Device’ -> ‘emulate-5554’ Wait for connection to emulator You should see the following:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
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 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 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 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 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 App ď ą
How your Virtual Tour App will look like:
Basic: Image
Basic: ListPicker
Basic: Label
Other stuff: ActivityStarter
Virtual 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
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual 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 Editor
Logic #1: Creating List of Attractions
Virtual 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 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 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 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 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 Editor
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Virtual Tour Application – Final
Further Explorations 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
Basic: Clock
Media: Sound
Mouse 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 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 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
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 B Setup App inventor
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
You should see the following:
AppInventor workshop– a learning journey brought to you by the Diploma in Mobile Software development @RP
Setting Up ď ą
Step 2 : Installing App Inventor Setup for Windows (url: beta.appinventor.mit.edu/learn/setup/setupwindows.html)
Setting Up ď ą
Step 2 : Installing App Inventor Setup for Windows (url: beta.appinventor.mit.edu/learn/setup/setupwindows.html)
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: tan_kok_cheng@rp.edu.sg
Connect with us! Join us on Facebook at http://www.facebook.com/rpmobile