Hello App Inventor!

Hello App Inventor!: Android

programming for kids and the rest of

us

Paula Beer and Carl Simmons

Copyright

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.

20 Baldwin Road

PO Box 261

Shelter Island, NY 11964

Development editor: Susanna Kline

Copyeditor: Tiffany Taylor

Proofreader: Alyson Brener

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

Dedication

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.

Brief Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this book

Chapter 1. Getting to know App Inventor

Chapter 2. Designing the user interface

Chapter 3. Using the screen: layouts and the canvas

Chapter 4. Fling, touch, and drag: user interaction with the touch screen

Chapter 5. Variables, decisions, and procedures

Chapter 6. Lists and loops

Chapter 7. Clocks and timers

Chapter 8. Animation

Chapter 9. Position sensors

Chapter 10. Barcodes and scanners

Chapter 11. Using speech and storing data on your phone

Chapter 12. Web-enabled apps

Chapter 13. Location-aware apps

Chapter 14. From idea to app

Chapter 15. Publishing and beyond

Index

Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this book

Chapter 1. Getting to know App Inventor

First a little history ...

What can an Android smartphone do?

App Inventor setup

Option 1: Using Wi-Fi with the App Inventor companion phone

software

Option 2: using the onscreen emulator

Option 3: connecting via USB cable

Using all three options

Troubleshooting

The App Inventor juggling act

1. Designing the app screen

2. Telling the app what to do

3. Testing the program

How will it look? App Inventor Designer

Component properties

How will it work? The Blocks Editor

Built-in blocks

Component-specific blocks

Running and testing programs

Running and testing: emulator vs. smartphone

Your first app: Hello World!

1. Opening App Inventor

2. Starting with a new project

3. Adding a Notifier component to the project

4. Writing the program using blocks

5. Testing the app

Computers never sleep: why you use events

Saving in the cloud and using checkpoints

Button click: Hello World! app, version 2

1. Saving a new copy of Hello World!

2. Adding a Button component

3. Programming the blocks

4. Testing your app

Taking it further

Packaging an app for your phone

Downloading APKs directly to your phone or computer

Downloading APKs as files to your computer

Changing the app’s icon

What did you learn?

Test your knowledge

Try it out

Chapter 2. Designing the user interface

What is a user interface?

Using the Designer to make a UI

Speeding along: built-in components

Getting to Know Ewe app

1. Setting up the project

2. Adding a sheep image

3. Adding a “baa!” sound

4. Programming the blocks, part 1: playing the sound

5. Programming the blocks, part 2: vibrating the phone

Extra challenge: Ewe Scared Her! app

1. Saving a new project

2. Adding components: accelerometer, reset button, and screen

arrangement

3. Arranging the screen

4. Programming the blocks

Taking it further

What did you learn?

Test your knowledge

Try it out

Chapter 3. Using the screen: layouts and the canvas

Layout

Layout: mini-project

Spooky Sound FX app

1. Setting the screen properties: alignment, orientation, and

scrolling

2. Setting up the table arrangement and eight buttons

3. Adding the eight Sound components and their source files

4. Coding the blocks

Taking it further

Introducing the Canvas component

Graffiti Artist app

1. Setting up the user interface

2. Coding the blocks

What did you learn?

Test your knowledge

Try it out

Chapter 4. Fling, touch, and drag: user interaction with the touch screen

Events up close

Flung event

Drag event

Flingflung app

1. Dragging out the Ball1.Flung event handler from the Ball1

drawer

2. Giving the ball velocity

3. Enabling the Dragged event

4. Enabling the CollidedWith event

Fling It! app

1. Making the touch sprite react to the user touching the sprite

2. Making the drag sprite react to the user dragging the sprite

3. Making the fling sprite react to the user flinging the sprite

4. Playing the soundtrack

5. Stopping the soundtrack

Taking it further

What did you learn?

Test your knowledge

Try it out

Chapter 5. Variables, decisions, and procedures

Remembering useful things

Total recall: naming and retrieving variables

Flattery app

1. Setting up the screen

2. Coding the blocks: creating a UsersName variable

3. Getting and storing UsersName

4. Revealing the buttons

5. Stringing it all together: making the flattery messages

Taking it further

Decisions, decisions: using variables to choose an action

Comparison operators

How can a dumb machine make a decision?

Prankster Flattery app (Personality Judge app)

1. Setting up the app

2. Coding the if ... else blocks

Using creative comparison conditions

Taking it further

Keeping track with comments

Changing variables

Dice Roll app

1. Programming the blocks

2. Taking it further

Guess What I Am Thinking app

1. Setting up the screen

2. Initializing

3. Gameplay

4. Resetting the game

Taking it further

What did you learn?

Test your knowledge

Try it out

Chapter 6. Lists and loops

Readymade lists

Making your own list picker

Ready for ice cream?

Excuse Generator app

1. Setting up the screen

2. Coding the blocks: a slot-machine algorithm

3. Setting up the lists

4. Building the sentence

Graffiti Artist 2: the spray-paint returns!

1. Updating the screen layout

2. Coding the blocks: choosing a background image

3. Changing the line and dot sizes

4. Offering a rainbow of colors

Loop the loop

for range ... do ...

for each ... in list ... do ...

while (test) do ...

Multiplication Table Generator app

1. Setting up the screen

2. Coding the blocks: defining the programming problems

3. Looping the loop: nested loops

Secret SMS Sender app

1. Setting up the screen

2. Coding the blocks: encrypting the message

3. Adding agent contacts

4. Deleting agent contacts

5. Sending the message

What did you learn?

Test your knowledge

Try it out

Chapter 7. Clocks and timers

What time is it?

Time to experiment

Outputting the system time

Instant answers

Making time

Taking it further: validation

Using timers

Beeper app

1. Setting up the screen

2. Coding the blocks

Where Are Ewe Hiding? app

1. Setting up the screen

2. Coding the blocks

Multiple timers

Splat the Rat app

1. Setting up the screen

2. Coding the blocks: showing and hiding the rat

3. Splat that rat! Changing the score

4. Timing, ending, and restarting the game

5. Setting the rat free

Taking it further

What did you learn?

Test your knowledge

Try it out

Chapter 8. Animation

Animation type 1: moving sprites using properties

Ballybally app

1. The properties explained

2. Coding the blocks: identifying that the edge has been reached,

and testing which way the ball is heading

3. Responding to the direction of travel

4. Changing the color of the canvas when the edge is reached

Animation type 2: Creating movement with a clock timer and user

interaction

Cheeky Hamster app

1. Coding the blocks: setting the BowlClock timer

2. Moving the hamster

3. Shooting seeds

4. Making the seed disappear at the edge of the screen

5. Scoring when the seed hits the bowl

6. Resetting the score

Taking it further

Animation type 3: creating movement using lists and a clock timer

Creepy Spider app

1. Coding the blocks: making the spider appear to crawl

2. Making the spider move repeatedly

3. Making the spider bite and stay still

4. Making the spider start moving again

Taking it further

What did you learn?

Test your knowledge

Chapter 9. Position sensors

Compass app

1. Setting up the screen

2. Coding the blocks: where are you heading?

Astonishing Prediction! app

Understanding the secret of the app

1. Setting up the screen

2. Coding the blocks: abracadabra!

Testing it

Hungry Spider app

1. Setting up the screen

2. Coding the blocks: moving the spider

3. Freeing the flies

4. Feeding the spider

5. Restarting the game

Taking it further

What did you learn?

Test your knowledge

Try it out

Chapter 10. Barcodes and scanners

Barcode Petfinder app

1. Opening the scanner and scanning a barcode

2. Collecting the barcode scanner result

3. Looking for secret codes in the barcode scanner result

4. Revealing the hamster

5. Revealing all the pets

Taking it further

Book Finder app

1. Creating the event handler to scan the barcode

2. Using the scanner result to print the ISBN number

3. Searching the web

Taking it further

QR Treasure Hunt app

How does the game work?

1. Scanning the QR codes

2. Revealing the treasure and the clues

Taking it further

What did you learn?

Test your knowledge

Chapter 11. Using speech and storing data on your phone