Learn to build apps in the fastest way possible Mobile Development Up d Verate “This is a book for app inventors of all ages. My students loved extending its examples App sion 2d for into their own creative apps. A great introduction to mobile computing!” —Ralph Morelli, Trinity College Professor A p App Inventor 2 p I Inventor 2 Yes, you can create your own apps for Android devices—and it’s easy to do. This n extraordinary book introduces you to App Inventor 2, a powerful visual tool that v lets anyone build apps. Learn App Inventor basics hands-on with step-by-step e instructions for building more than a dozen fun projects, including a text answering n machine app, a quiz app, and an app for finding your parked car! t o The second half of the book features an Inventor’s Manual to help you understand r the fundamentals of app building and computer science. App Inventor 2 makes an excellent textbook for beginners and experienced developers alike. 2 n Use programming blocks to build apps—like working on a puzzle Create Your Own n Create custom multimedia quizzes and study guides W n Design games and other apps with 2D graphics and animation o lb Android Apps n Make a custom tour of your city, school, or workplace e r , n Control a LEGO® MINDSTORMS® NXT robot with your phone A b n Build location-aware apps by working with your phone’s sensors e l s n Explore apps that incorporate information from the Web o n , S David Wolber, Hal Abelson, p e David Wolber, a University of San Francisco Professor, teamed up to produce this book with App Inventor r Ellen Spertus & Liz Looney creators Hal Abelson, professor of Electrical Engineering and Computer Science at MIT; Ellen Spertus, tu Associate Professor of Computer Science at Mills College and Senior Research Scientist at Google; and s & Liz Looney, Senior Software Engineer at Google and member of the Robotics Task Force. L o o n e y Twitter: @oreillymedia facebook.com/oreilly US $39.99 CAN $41.99 oreilly.com ISBN: 978-1-491-90684-2 Learn to build apps in the fastest way possible Mobile Development Up d Verate “This is a book for app inventors of all ages. My students loved extending its examples App sion 2d for into their own creative apps. A great introduction to mobile computing!” —Ralph Morelli, Trinity College Professor A p App Inventor 2 p I Inventor 2 Yes, you can create your own apps for Android devices—and it’s easy to do. This n extraordinary book introduces you to App Inventor 2, a powerful visual tool that v lets anyone build apps. Learn App Inventor basics hands-on with step-by-step e instructions for building more than a dozen fun projects, including a text answering n machine app, a quiz app, and an app for finding your parked car! t o The second half of the book features an Inventor’s Manual to help you understand r the fundamentals of app building and computer science. App Inventor 2 makes an excellent textbook for beginners and experienced developers alike. 2 n Use programming blocks to build apps—like working on a puzzle Create Your Own n Create custom multimedia quizzes and study guides W n Design games and other apps with 2D graphics and animation o lb Android Apps n Make a custom tour of your city, school, or workplace e r , n Control a LEGO® MINDSTORMS® NXT robot with your phone A b n Build location-aware apps by working with your phone’s sensors e l s n Explore apps that incorporate information from the Web o n , S David Wolber, Hal Abelson, p e David Wolber, a University of San Francisco Professor, teamed up to produce this book with App Inventor r Ellen Spertus & Liz Looney creators Hal Abelson, professor of Electrical Engineering and Computer Science at MIT; Ellen Spertus, tu Associate Professor of Computer Science at Mills College and Senior Research Scientist at Google; and s & Liz Looney, Senior Software Engineer at Google and member of the Robotics Task Force. L o o n e y Twitter: @oreillymedia facebook.com/oreilly US $39.99 CAN $41.99 oreilly.com ISBN: 978-1-491-90684-2 App Inventor 2 Create Your Own Android Apps David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney App Inventor 2 by David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney Copyright © 2015 David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://safaribooksonline.com). For more information, contact our cor- porate/institutional sales department: 800-998-9938 or [email protected]. Editor: Rachel Roumeliotis Indexer: Wendy Catalano Production Editor: Kara Ebrahim Interior Designer: Monica Kamsvaag Copyeditor: Dianne Russell Cover Designer: Ellie Volckhausen Proofreader: Eliahu Sussman Illustrator: Rebecca Demarest April 2011: First Edition October 2014: Second Edition Revision History for the Second Edition 2014-10-03: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781491906842 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. App Inventor 2 and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibil- ity for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-491-90684-2 [LSI] Table of Contents Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Part I. AI2 Tutorials 1. HelloPurr. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 What You’ll Learn 1 The App Inventor Environment 2 Designing the Components 3 Live Testing 8 Adding Behaviors to the Components 10 Downloading the App to Your Android Device 16 Sharing the App 17 Variations 17 Summary 18 2. PaintPot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 What You’ll Learn 20 Getting Started 20 Designing the Components 20 Adding Behaviors to the Components 25 The Complete App: PaintPot 35 Variations 36 Summary 36 3. MoleMash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 What You’ll Build 37 iv Contents What You’ll Learn 37 Getting Started 38 Designing the Components 38 Adding Behaviors to the Components 42 The Complete App: MoleMash 48 Variations 49 Summary 49 4. No Texting While Driving. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 What You’ll Learn 52 Getting Started 52 Designing the Components 53 Adding Behaviors to the Components 54 The Complete App: No Texting While Driving 64 Variations 65 Summary 66 5. Ladybug Chase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 What You’ll Build 67 What You’ll Learn 67 Designing the Components 68 Adding Behaviors to the Components 71 The Complete App: Ladybug Chase 83 Variations 84 Summary 85 6. Paris Map Tour. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 What You’ll Learn 87 Designing the Components 88 Setting the Properties of ActivityStarter 88 Adding Behaviors to the Components 89 The Complete App: Map Tour with Activity Starter 93 The Complete App: Map Tour (Web Viewer) 96 Variations 96 Contents v Summary 97 7. Android, Where’s My Car?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 What You’ll Learn 99 Getting Started 99 Designing the Components 100 Adding Behaviors to the Components 102 The Complete App: Android, Where’s My Car? 111 Variations 112 Summary 112 8. Presidents Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 What You’ll Learn 113 Getting Started 114 Designing the Components 114 Adding Behaviors to the Components 115 The Complete App: The Presidents Quiz 127 Variations 128 Summary 129 9. Xylophone. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 What You’ll Build 131 What You’ll Learn 131 Getting Started 132 Designing the Components 132 Creating the Keyboard 133 Recording and Playing Back Notes 138 The Complete App: Xylophone 144 Variations 145 Summary 146 10. MakeQuiz and TakeQuiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 What You’ll Learn 148 Getting Started 148 Designing the Components 148 Adding Behaviors to the Components 150 vi Contents The Complete App: MakeQuiz 158 TakeQuiz: An App for Taking the Quiz in the Database 158 The Complete App: TakeQuiz 161 Variations 162 Summary 163 11. Broadcast Hub. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 What You’ll Learn 166 Getting Started 166 Designing the Components 166 Adding Behaviors to the Components 168 The Complete App: Broadcast Hub 179 Variations 181 Summary 181 12. Robot Remote. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 What You’ll Learn 183 Getting Started 184 Designing the Components 184 Adding Behaviors to the Components 187 Driving the NXT 192 Using the Ultrasonic Sensor to Detect Obstacles 194 Variations 196 Summary 197 13. Amazon at the Bookstore. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 What You’ll Learn 199 What is an API? 200 Getting Started 202 Designing the Components 202 Programming the App’s Behavior 204 The Complete App: Amazon at the Bookstore 210 Customizing the API 211 Variations 211 Contents vii Summary 211 Part II. Inventor’s Manual 14. Understanding an App’s Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Components 216 Behavior 216 An App as a Recipe 216 An App as a Set of Event Handlers 217 Event Types 219 Event Handlers Can Ask Questions 221 Event Handlers Can Repeat Blocks 222 Event Handlers Can Remember Things 223 Event Handlers Can Interact with the Web 223 Summary 224 15. Engineering and Debugging an App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Software Engineering Principles 225 Solve Real Problems 226 Build a Prototype and Show Users 226 Incremental Development 226 Design Before Coding 227 Comment Your Code 228 Divide, Layer, and Conquer 228 Understand Your Language: Tracking with Pen and Paper 229 Debugging an App 232 Watching Variables 233 Testing Individual Blocks 233 Incremental Development with Do It 234 Disabling Blocks 234 Summary 234 16. Programming Your App’s Memory. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Named Memory Slots 235 Properties 235 viii Contents Defining Variables 236 Setting and Getting a Variable 237 Setting a Variable to an Expression 238 Incrementing a Variable 238 Building Complex Expressions 239 Displaying Variables 240 Local Variables 240 Summary 241 17. Creating Animated Apps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Adding a Canvas Component to Your App 243 The Canvas Coordinate System 243 Animating Objects with Timer Events 245 Creating Movement 246 Speed 247 Collision Detection 247 EdgeReached 247 CollidingWith and NoLongerCollidingWith 248 Interactive Animation 249 Specifying Sprite Animation Without a Clock Timer 250 Summary 252 18. Programming Your App to Make Decisions: Conditional Blocks. . . . . . . . . . . . . . . . . . . . 253 Testing Conditions with if and else if Blocks 254 Programming an Either/Or Decision 255 Programming Conditions Within Conditions 255 Programming Complex Conditions 256 Summary 260 19. Programming Lists of Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Creating a List Variable 261 Selecting an Item in a List 262 Using an Index to Traverse a List 262 Example: Traversing a List of Paint Colors 263 Creating Input Forms and Dynamic Data 265