App InventorWorkshop Session Plan

Inspiring | Creative | FunYsbrydoledig | Creadigol | Hwyl

Event Set Up 30 minutes

Introduction

Welcome/Pre-day Forms 5 minutes (Slide 1)Introduction 10 minutes (Slides 2 - 6)

Apps & App Inventor

App Explanation 25 minutes (Slides 6 - 10)App Inventor 20 minutes (Slides 11 - 16)

Build a Basic App

Designer Window 30 minutes

Blocks Editor 30 minutes

Image Toggle 15 minutes

Sounds and Checks 30 minutes

Q&A/Post-day Forms 5 minutes

Event Clean Up 30 minutes

Total: 2 hours 50 minutes for attendeesTotal: 3 hours 50 minutes for staff

Workshop Schedule“By failing to prepare, you are preparing to fail.”

1

1. Laptops with appropriate software installed (Oracle, Java 7, App Inventor and any drivers for tablets).

2. A google account for each laptop.

3. An Android tablet for each machine (advised, but not essential as you can run an emulator).

4. Detailed instructions: http://snap.vu/mg4a

2

Hardware and Software Requirements

Attendee Prerequisites

1. No programming experience required.

2. No previous App Development experience required.

3. Completed consent forms.

4. If under 18, parental consent forms required providing permission for photos to be taken, used and uploaded to the web etc.

1. Explain what Android, App Inventor and Graphical programming are.

2. Create an App incorporating a variety of input and output components.

3. Understand the terms Event Driven and Flow Control.

4. Develop logical thinking skills and problem solving

Learning Outcomes

Event Set Up1. Prepare any pre and post-day questionnaire forms as

required. Remember spare pens / pencils.

2. Ensure tables and chairs are arranged to naturally encourage people to sit in groups; ensure no one is sitting with their back to the podium.

3. Test display equipment (e.g. projector) and ensure that presentation and internet connection are working and ready for use.

4. Prepare Top Tips for App Inventor and a Workbook per participant if desired.

Event Clean Up1. Ensure all pre-day and post-day questionnaire forms

have been collected if required.

2. Clear up litter and refuse. Remember to recycle where facilities exist. Remember to switch off lights, computers, and projectors!

3

Event Set Up and Clean Up

(Slides 1 - 3: About Technocamps)

“Good XXX, I’m XXX and I work for a pan-Wales organization called Technocamps.

Has anybody heard of Technocamps before or been to one of our workshops?

We are a £6 million government funded organization getting young adults and children aged between 11 and 19 to become excited about Computer Science and what it has to offer, in both their education and future careers.”

(Slide 4: Pre-day Questionnaires)

Allow time for all students to fill in required forms. Talk through each question and ensure that all questions are filled in.

(Slide 5: STEM)

Discuss with the group their views on Science, Technology, Engineering and Maths. What do the pupils think these terms mean? Or what topics are covered within these subjects? Briefly explain to the group what each term means, talking about the link between each of them and how Computer Science is incorporated into each of the other subjects.

Introduction

4

Welcome andPre-day Forms

The first 5 minutes is very much about welcoming and encouraging people to complete any pre-day forms before the workshop begins. Also ensure you read through the pre-day forms with the participants to confirm they have been filled in correctly.

Ensure that you welcome the attendees as they enter the room; this helps to create a positive connection.

IntroductionThe introduction gives you time to introduce everyone involved with hosting the workshop.

It is not necessary at this point to give an elaborate history of every person involved; try to keep to simple facts.

The main aim is to have everyone settled, focused, and filling required forms, e.g. pre- and post-day questionnaires.

(Slide 6: IT vs. Computer Science)

IT is using computers and their built-in or installed programs, such as word processing. Whereas Computer science is making these programs for computers, from making word processors to making air traffic control systems to games.

(Slide 7: Computing in your life)

Asking the group about forms of computing in their day-to-day lives. Do they consider their phone or Facebook to be a form of Computer Science? Computing is around us every day and are embedded to many unlikely things, even washing machines! Can they think of any other forms of computing they may interact with on a daily basis?

(Slide 8: Smart Phones)

So far, the group will have already established that smart phones are computers, but what are the differences between smart phones and the average PC? What can Smart Phones do that PCs cannot? Smart Phones are designed to be mobile and portable i.e. accelerometer, GPS, orientation sensor.

iOS, Blackberry and Apple are special pieces of software for mobile devices, called operating systems - like the ones on our PCs e.g. Windows, Apple OS and Linux.

(Slide 9: Tablets & Applications)

Tablets are similar to Smart Phones, but bigger! They can run applications, just like Smart Phones. What apps are the groups favorite? Why are they are favorite? What do these apps do?

App Inventor

5

Before you continue, decide if you are going to use the workbook from the start or teach the basics of app inventor first.

Complete the slides and explain what App Inventor is.

App Inventor

6

(Slide 10: Android)

Android holds the biggest mobile market share, 80%! So learning to develop applications in Android and putting these applications on the Google Play store will ensure that a large selection of the world will be able to access the applications, download it and enjoy!

(Slide 11: App Inventor)

What does the group think programming is? Introduce the concept of drag and drop programming, a “jigsaw” based programming environment instead of the conventional method.

(Slide 12: Computer Programs)

Now that the group are confident recognising what programming is, take a look at these 2 images on this slide. The group should be able to recognise the ease of using drag and drop programming rather than worrying about syntax errors when using the conventional method.

(Slide 13: Why make applications?)

Why do people design and develop applications? Money? Fame? For a purpose? Convenience? There are 3 examples of applications to discuss with the group:

1. An app was made by aid workers in Haiti to help track how well food was getting through the markets after the unfortunate 2010 earthquake.

2. Using an application made with App Inventor, a group of marines worked out the safest way to destroy captured weapons.

3. Apps can be used to make games and toy applications for fun, can the group think of some fun games? A game named “Spy Panda” was developed using App Inventor, can they find it on Google Play?

(Slide 14: The Designer)

This is where the project is developed, where each student will decide on the content and appearance of their application. The designer lets you add components such as buttons and images into your application.

(Slide 15: The Blocks Editor)

Blocks are used to give your app behavior and functionality - so the Blocks Editor is where all the clever stuff happens. But the designer window must remain open.

Additional Information

7

In the Designer window, complete the following tasks:

• Open App Inventor - go to “http://beta.AppInventor.mit.edu/ and enter your google log in details to begin using App Inventor. The designer interface will appear.

• Add an Image and Button - using the “components” pane on the left hand side, locating the “basic” menu”. Click the component and drag onto the blank application.

• Add in two pictures - look at the “Media” panel, located at the bottom of the “Designer” window and click the upload new button. Choose an image from the “AppInventorResources” folder and add it to your application. Do this twice so that you can use it later in the app.

• Set up the apps appearance for when the app opens and rename components - in the “components” pane you can rename your components to something more meaningful by pressing the rename button. Do this for the button and image you have added. Select the button, look at the “properties” box and in here you can set the components appearance and to change the text property. Do the same as above, but change the Screen title and Picture property of the screen and image respectively.

In the Blocks Editor window, complete the following tasks:

• Open Blocks Editor - in the top right hand corner click the open the blocks editor button, then once downloaded, open up the “AppInventorForAndroid.jnlp” file.

• When Button is clicked - in the “My Blocks” menu, select your button and drag the “When Button clicked” event block into your blocks area. In between this event, place a “set Image to” block, followed by a plain text block, found in “Built in” blocks. Inside the text box you will need to enter the name of the pictures you want to use, you can copy and paste the name of the image by using “CTRL + C” to copy from the Media pane in the Designer window and “CTRL + V”.

• Connect to Device - now connect to the tablet by clicking the drop down box at the top of the “Blocks Editor” screen and selecting your device. If you do not have a tablet or smart phone you can always use an “Emulator” which is a copy of a tablet on your computer.

• Use Buttons to Toggle Images - to toggle the images, you need to use a “Conditional Statement”. Use the “IF-ELSE” block within the “When button clicked” block. The condition that we want to use ...

App Inventor

8

...is to find out if the image is equal to a certain file by using an equal’s logic block, text block and the “getter” for Image.Picture as shown below:

Inside the “IF-ELSE” block you want to set the image to the relevant picture as shown, by using the “Set Image to” block and a “text” block.

Extension activities:• Options: At this point you can do a variety of tasks with the class, depending on their interests and

abilities. These options include:• Use the Workbook• Try some of the activities below• Allow students to design and build their own application from scratch.

• Add a sound component and a music file. You can find this in the “Media” group in the “Designer” window. Add in the music file by going to the “Media” option.

• Add a clock component and another button component from the “Basic” option on the Designer window. Rename this and edit the preferences for the button. The Clock allows you to do something repeatedly with a certain interval between. It works by running whatever you put inside the “Clock.Timer” block every “Timer Interval” ( a property of the clock component).

A conditional statement is also referred to as an “IF” statement, as it tests if something is true. If it is true, then the program will run whatever instructions inside this statement.

Additional Information

9

• To get sound to play on a timer, in the the Blocks Editor use the “Clock.Timer” block and within it put the “sound.play” block. This will make the sound play constantly, so lets use the button we added to toggle the sound, using a similar set up to before, but use the “Clock.TimerEnable” block within to set the time to be on or off.

(Take several questions from the attendees)(If no questions are asked by attendees, begin summarising topics covered)

Once an appropriate number of questions has been taken, you can then begin to close the workshop. Be sure to have any post-day questionnaire forms filled in by attendees as required. Some audiences may require more prompting to fill in such forms.

Q&A Session & Closure

8

Closure and Post-day Forms

The last 5 minutes of closure must be used to, if required, ensure that post-day questionnaires are filled in by the attendees and talk them through the information they have filled in. Ensure that you collect all of the post-day form in before attendees depart, and be sure to thank each person for taking the time to fill in the forms.

www.technocamps.com