course tech 2013, abigail bornstein,using adroid app inventor to introduce app development concepts
DESCRIPTION
Android App Inventor uses a WYSIWYG interface to enable userswith no programming knowledge to create applications using drag-and-drop blocks. These blocks specify the behavior of the application. You can add Android App Inventor as one lecture topic to an existing course or create an entirely newcoursewith anAndroid app development focus.TRANSCRIPT
![Page 1: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/1.jpg)
Using Android App Inventor to Introduce App Development Concepts
Presented by Abigail BornsteinProfessor, Computer Networking & Information Technology
City College of San Francisco
![Page 2: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/2.jpg)
Background – New Course, Sp’10
• “Technology of Smartphones & Mobile Devices”– Hardware, software, cellular networks, support
Operating Systems
BrowsersApplications
(development)
![Page 3: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/3.jpg)
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
![Page 4: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/4.jpg)
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
![Page 5: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/5.jpg)
3 Distinct Tools Used in App Inventor
Image from: http://appinventor.mit.edu/explore/content/what-app-inventor.html
![Page 6: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/6.jpg)
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
![Page 7: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/7.jpg)
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
![Page 8: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/8.jpg)
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
![Page 9: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/9.jpg)
Select Components to Design Your App
Drag component from Palette
to Viewer Screen1
Adjust component appearance
through Properties
![Page 10: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/10.jpg)
Project 1: Hello Purr, Design Complete
(Basic)
(Media)
Button1
Label1
Sound1
![Page 11: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/11.jpg)
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
![Page 12: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/12.jpg)
Project 1: Hello Purr, Blocks Complete
Green block = event handler
Purple block = command block& snaps into the
event handler
![Page 13: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/13.jpg)
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…
![Page 14: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/14.jpg)
Project 1: Emulator Results
![Page 15: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/15.jpg)
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
![Page 16: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/16.jpg)
Project 1: Phone Results
Temporarily on phone – gone
once you close App Inventor
![Page 17: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/17.jpg)
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
![Page 18: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/18.jpg)
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
![Page 19: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/19.jpg)
Project 2: Magic8Ball Designer
Button1
Label1 & Label2
Sound1
![Page 20: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/20.jpg)
Project 2: Magic8Ball Blocks Editor
![Page 21: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/21.jpg)
Project 2: Magic8Ball
Emulator Phone
“Gently shake” Can use
accelerometer on actual device
![Page 22: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/22.jpg)
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
![Page 23: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/23.jpg)
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
![Page 24: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/24.jpg)
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
![Page 25: Course Tech 2013, Abigail Bornstein,Using Adroid App Inventor to Introduce App Development Concepts](https://reader036.vdocuments.net/reader036/viewer/2022081413/548c34b9b47959ae538b4935/html5/thumbnails/25.jpg)
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!!!