App Inventor Workshop for Learning Journey

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.