Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts

Using Android App Inventor to Introduce App Development Concepts

Presented by Abigail BornsteinProfessor, Computer Networking & Information Technology

City College of San Francisco

Background – New Course, Sp’10

• “Technology of Smartphones & Mobile Devices”– Hardware, software, cellular networks, support

Operating Systems

BrowsersApplications

(development)

Objective

• Learn how to build a basic application using MIT App Inventor

• Provide MIT App Inventor resources that are freely available to educators

• Consider ways that MIT App Inventor can be added into your school’s curriculum

What is App Inventor?

• A drag and drop programming tool that enables you to create applications for Android devices– No programming knowledge necessary– Teaches programming concepts, if that is your

objective

3 Distinct Tools Used in App Inventor

Image from: http://appinventor.mit.edu/explore/content/what-app-inventor.html

System Requirements

• Computer and operating system– Macintosh (with Intel processor): Mac OS X 10.5 or higher– Windows: Windows XP, Windows Vista, Windows 7– GNU/Linux: Ubuntu 8 or higher, Debian 5 or higher

• Browser– Mozilla Firefox 3.6 or higher

• Note: If you are using Firefox with the NoScript extension, you'll need to turn the extension off.

– Apple Safari 5.0 or higher– Google Chrome 4.0 or higher– Microsoft Internet Explorer 7 or higher

Setup

• Go to: appinventor.mit.edu– Click Explorer (Information & Tutorials) button– Click Learn tab, Setup link or just Setup tab

Java check and/or installation

Installation by operating system

Invent: Gmail or Google account login

Project 1: Hello Purr

• Click Learn tab, Tutorials link– Hello Purr

• Follow emulator instructions OR phone instructions

– Download kitty image & meow sound file • Right click – Save Picture As or Save link to…

– Go to  http://appinventor.mit.edu and login

New Project Name: HelloPurr

Select Components to Design Your App

Drag component from Palette

to Viewer Screen1

Adjust component appearance

through Properties

Project 1: Hello Purr, Design Complete

(Basic)

(Media)

Button1

Label1

Sound1

Project 1: Hello Purr, Blocks Editor

• From Designer, click Open the Blocks Editor button in the upper right corner– Lower left corner: warning about file type danger– When Blocks Editor open, will see a cup of Java

icon on your taskbar

Project 1: Hello Purr, Blocks Complete

Green block = event handler

Purple block = command block& snaps into the

event handler

Project 1: Hello Purr, Emulator

• Click New Emulator button in upper right side of Blocks Editor– May take 2 – 3 minutes or more to load

• Once loaded, go back to Blocks Editor– Click on Connect to Device…

Project 1: Emulator Results

Project 1: Hello Purr, Android Device

• Download MIT AICompanion from Play store– https://

play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion2

• Go back to Blocks Editor– Click on Connect to Device…Choose WiFi

Project 1: Phone Results

Temporarily on phone – gone

once you close App Inventor

Project 1: Package for Phone

• Go to Designer - upper right corner

• Show Barcode– Need QR reader, free app in Play store– Only works on the owner’s phone– May have to change Security setting on phone

• Allow installation of apps from sources other than the Play Store

• To share with others– Download to this Computer, use 3rd party software to

convert file into a bar code

Project 2: Magic 8-ball

• Go to: appinventor.mit.edu– Click Explorer (Information & Tutorials) button– Click on Learn tab, Tutorials, Magic 8 Ball

• Download image and sound files needed• Click Invent – login

New Project Name: Magic8Ball

Project 2: Magic8Ball Designer

Button1

Label1 & Label2

Sound1

Project 2: Magic8Ball Blocks Editor

Project 2: Magic8Ball

Emulator Phone

“Gently shake” Can use

accelerometer on actual device

Other Projects

• Basic Projects– PaintPot, MoleMash, Pong, PicCall

• Advanced Projects– Mini Golf, Pizza Party, Quiz Me, Map Tour

• Additional Projects– SMS, GPS, Video

Lots to learn…from beginner to advanced

Resources

• http://appinventor.mit.edu/teach/– Sample curriculum

• Course-in-a-Box (Professor David Wolber, USF)• Junior high, high school, college

– Complete .pdf textbook• “App Inventor: Create Your Own Android Apps”

– Forum devoted to educators– Videos

School Curriculum Options

• Multiple age groups and levels– Junior high, high school, college

• Full course devoted to App Inventor– Introductory CS course for non-CS majors– CS101 for CS majors

• 1 – 4 lectures/labs devoted to App Inventor– Add chapter on app development to an existing course– “Technology of Smartphones & Mobile Devices” course

My Contact Information

Abigail Bornstein Professor, Computer Networking & Information Technology

City College of San Francisco

E-mail: [email protected]

Website: http://fog.ccsf.edu/~abornste

THANK YOU!!!