Hello App Inventor! Android programming for kids and the rest of us PAULA BEER CARL SIMMONS MANNING SHELTER ISLAND For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact: Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: [email protected] ©2015 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15% recycled and processed without elemental chlorine. Manning Publications Co. Development editor: Susanna Kline 20 Baldwin Road Copyeditor: Tiffany Taylor PO Box 261 Proofreader: Alyson Brener Shelter Island, NY 11964 Technical proofreader: Jerome Baton Typesetter: Marija Tudor Cover designer: Leslie Haimes ISBN 9781617291432 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 19 18 17 16 15 14 To anyone who really, really tries. Come on, keep going, you’re nearly there. —P.B. To Frank, who treated us like geniuses and loved us fiercely. —C.S. iv Brief contents 1 ■ Getting to know App Inventor 1 2 ■ Designing the user interface 30 3 ■ Using the screen: layouts and the canvas 48 4 ■ Fling, touch, and drag: user interaction with the touch screen 65 5 ■ Variables, decisions, and procedures 79 6 ■ Lists and loops 112 7 ■ Clocks and timers 146 8 ■ Animation 165 9 ■ Position sensors 183 10 ■ Barcodes and scanners 203 11 ■ Using speech and storing data on your phone 218 v vi BRIEF CONTENTS 12 ■ Web-enabled apps 236 13 ■ Location-aware apps 257 14 ■ From idea to app 270 15 ■ Publishing and beyond 312 Contents Preface xvii Acknowledgments xix About this book xxii 1 Getting to know App Inventor 1 First a little history … 1 What can an Android smartphone do? 2 App Inventor setup 2 Option 1: Using Wi-Fi with the App Inventor companion phone software 3 Option 2: using the onscreen emulator 4 ■ Option 3: connecting via USB cable 4 ■ Using all three options 5 ■ Troubleshooting 6 The App Inventor juggling act 6 1. Designing the app screen 6 ■ 2. Telling the app what to do 7 3.Testing the program 8 How will it look? App Inventor Designer 8 Component properties 9 How will it work? The Blocks Editor 9 Built-in blocks 10 ■ Component-specific blocks 11 vii viii CONTENTS Running and testing programs 13 Running and testing: emulator vs. smartphone 13 Your first app: Hello World! 13 1. Opening App Inventor 14 ■ 2. Starting with a new project 15 3. Adding a Notifier component to the project 16 ■ 4. Writing the program using blocks 16 ■ 5. Testing the app 19 Computers never sleep: why you use events 21 Saving in the cloud and using checkpoints 21 Button click: Hello World! app, version 2 23 1. Saving a new copy of Hello World! 23 ■ 2. Adding a Button component 23 ■ 3. Programming the blocks 24 ■ 4. Testing your app 25 ■ Taking it further 26 Packaging an app for your phone 26 Downloading APKs directly to your phone or computer 26 ■ Downloading APKs as files to your computer 27 Changing the app’s icon 28 What did you learn? 28 Test your knowledge 29 Try it out 29 2 Designing the user interface 30 What is a user interface? 30 Using the Designer to make a UI 32 Speeding along: built-in components 33 Getting to Know Ewe app 34 1. Setting up the project 35 ■ 2. Adding a sheep image 36 3. Adding a “baa!” sound 38 ■ 4. Programming the blocks, part 1: playing the sound 39 ■ 5. Programming the blocks, part 2: vibrating the phone 40 Extra challenge: Ewe Scared Her! app 42 1. Saving a new project 43 ■ 2. Adding components: accelerometer, reset button, and screen arrangement 43 ■ 3. Arranging the screen 45 4.Programming the blocks 45 ■ Taking it further 46 What did you learn? 46 Test your knowledge 47 Try it out 47 CONTENTS ix 3 Using the screen: layouts and the canvas 48 Layout 49 Layout: mini-project 50 Spooky Sound FX app 52 1. Setting the screen properties: alignment, orientation, and scrolling 53 2.Setting up the table arrangement and eight buttons 54 ■ 3. Adding the eight Sound components and their source files 55 ■ 4. Coding the blocks 55 ■ Taking it further 56 Introducing the Canvas component 57 Graffiti Artist app 58 1. Setting up the user interface 59 ■ 2. Coding the blocks 60 What did you learn? 64 Test your knowledge 64 Try it out 64 4 Fling, touch, and drag: user interaction with the touch screen 65 Events up close 67 Flung event 67 ■ Drag event 68 Flingflung app 68 1. Dragging out the Ball1.Flung event handler from the Ball1 drawer 69 2.Giving the ball velocity 70 ■ 3. Enabling the Dragged event 70 4.Enabling the CollidedWith event 70 Fling It! app 71 1. Making the touch sprite react to the user touching the sprite 74 2.Making the drag sprite react to the user dragging the sprite 75 3.Making the fling sprite react to the user flinging the sprite 75 4.Playing the soundtrack 75 ■ 5. Stopping the soundtrack 76 Taking it further 76 What did you learn? 77 Test your knowledge 77 Try it out 78 5 Variables, decisions, and procedures 79 Remembering useful things 79 Total recall: naming and retrieving variables 80