Hack Day Welcome to Hack Day Meet your

  • Slides: 48
Download presentation
Hack Day

Hack Day

Welcome to Hack Day! Meet your mentor and your teammates! Share: – What’s your

Welcome to Hack Day! Meet your mentor and your teammates! Share: – What’s your name? – What school do you go to (or company do you work for)? – What’s your favorite app? – Why are you excited about the Technovation Challenge?

Technovation Mission and Vision Technovation strives to promote women in technology by giving girls

Technovation Mission and Vision Technovation strives to promote women in technology by giving girls the confidence and skills they need to succeed in computer science and entrepreneurship. Our goal is to empower every girl to see themselves not just as users of technology--but as inventors, designers, builders, and entrepreneurs.

Technovation (video)

Technovation (video)

App Inventor • Beginner-level app building language • Completely web-based tool, requires an internet

App Inventor • Beginner-level app building language • Completely web-based tool, requires an internet connection to use • Must be signed into your Gmail account first • Two major parts: Designer and Blocks Editor

App Inventor: Designer Design the user interface of the app!

App Inventor: Designer Design the user interface of the app!

App Inventor: Blocks Editor Program the functionality of the app how it works!

App Inventor: Blocks Editor Program the functionality of the app how it works!

App Inventor: Emulator In case you don’t have a real phone to test with

App Inventor: Emulator In case you don’t have a real phone to test with you can use the emulator. It simulates a phone on your computer.

Set-up Wireless – Click on Settings App – Select Wireless & networks – Select

Set-up Wireless – Click on Settings App – Select Wireless & networks – Select Wi-Fi settings – Select Wi-Fi. A green check will appear by it. – Select Wi-Fi settings. Choose the network and password (if there is one) written on the board.

Phone Settings for Development – Click on the Settings App – Select Applications. This

Phone Settings for Development – Click on the Settings App – Select Applications. This will open a new page. – Select "Unknown sources". A green check will appear by it. – Select Development. This will open a new page. – Select "USB debugging". A green check will appear. – Select "Stay awake". A green check will appear. – Hit back button until back at Settings screen.

Activity: Crystal. Ball Hack In this tutorial, you’ll create an app that works like

Activity: Crystal. Ball Hack In this tutorial, you’ll create an app that works like a crystal ball. Users think of a question such as “Will I win my soccer game? ” and then tap the screen to see the crystal ball’s response. We’ll walk through it together.

Crystal. Ball: Getting Started • To begin, go to gmail. com and sign into

Crystal. Ball: Getting Started • To begin, go to gmail. com and sign into your email account • Create a Gmail account if you don’t have one • Open up a new tab in your browser, go to http: //appinventor. mit. edu/ and click “invent” • Under My Projects, click “New” and name your project Crystal. Ball

Activity: Crystal. Ball Hack In the Designer • Add a label with the text

Activity: Crystal. Ball Hack In the Designer • Add a label with the text “What do you want to know? ” • Add a label with the text “Shake the crystal ball and all will be revealed” • Put the 2 labels in a vertical screen arrangement • Add a button named “Fortune. Text” and set the background to be the Crystal Ball Image • Set the text of the button to be “”. • Add a label under the button that says “Tap to Clear. . ” • Add an accelerometer sensor

Activity: Crystal. Ball Hack In the Blocks Editor • Get the Shaking Event Handler

Activity: Crystal. Ball Hack In the Blocks Editor • Get the Shaking Event Handler for the Accelerometer. • Put in a Set Fortune. Text block in the event handler. • Connect a call pick random item from the list to the Set Fortune. Text block • Connect a make a list block to the list value in the pick random item block. • Add the text “Yes”, “No”, “Maybe”, and “time will tell” to the list as items

Activity: Crystal. Ball Hack In the Blocks Editor • Find the Fortune. Text clicked

Activity: Crystal. Ball Hack In the Blocks Editor • Find the Fortune. Text clicked event handler. • Set the Fortune. Text to a blank text box.

Activity: Crystal. Ball Hack On the phone • Package for the phone • Test

Activity: Crystal. Ball Hack On the phone • Package for the phone • Test it!

Customizing Your App • Most fun part of app-building! • It’s good to always

Customizing Your App • Most fun part of app-building! • It’s good to always be thinking how you can make things better • Customizing your app helps you learn the tools better and prepare to make an app on your own

Activity: Crystal. Ball Hack How can we customize this app? • Change the look

Activity: Crystal. Ball Hack How can we customize this app? • Change the look – Background picture • Add a sound • Add more answers • Other ideas?

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in your group • Turn in to your teacher • Be prepared to share with the group

Event-driven Programming • An event is an action that occurs outside the program •

Event-driven Programming • An event is an action that occurs outside the program • Usually from the User! • Examples: –Key presses –Screen Touches

Events in Real Life • Just like with a computer, program events happen in

Events in Real Life • Just like with a computer, program events happen in your life everyday • Examples –Phone rings –Your friend tosses a ball at you

Events in Real Life • What do you do when an event happens? –

Events in Real Life • What do you do when an event happens? – Phone rings • Answer the phone! – Your friend tosses a ball at you • Catch the ball! • These are called Event Handlers – Notice they can be different for each event

Event-driven Programming • In Crystal. Ball, what was our event? –Phone was shaken •

Event-driven Programming • In Crystal. Ball, what was our event? –Phone was shaken • What did our event handler do? –Displayed an answer from the list!

Variables • A named container that holds a value • The value can change

Variables • A named container that holds a value • The value can change • Your wallet – Sometimes might have $5 – Other times it might have $20 • Hair Color – Sally’s is Brown – Michael’s is …

Paint. Pot. Hack In this tutorial, you create an app that allows the user

Paint. Pot. Hack In this tutorial, you create an app that allows the user to draw lines and dots of various colors on the screen.

Pair Programming • Driver – hands on keyboard & mouse • Navigator – reads

Pair Programming • Driver – hands on keyboard & mouse • Navigator – reads instructions and tells driver what to do • Switch every 5 -10 minutes • Two brains are better than one

Pair Programming in Practice

Pair Programming in Practice

Resources If you have problems • Watch the You. Tube videos (Part 1 &

Resources If you have problems • Watch the You. Tube videos (Part 1 & 2) • Post questions to the P 2 PU forum

Paint. Pot. Hack How can we customize the app? – Add more color buttons

Paint. Pot. Hack How can we customize the app? – Add more color buttons – Have a random color button – Use camera to add background image – Others?

Camera Demo

Camera Demo

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in your group • Turn in worksheet to your teacher • Be prepared to share your answers with the group

Mole. Mash Hack In this app you will create a game that has a

Mole. Mash Hack In this app you will create a game that has a mole that jumps randomly around the screen every half second. If the user successfully touches the mole, then the score increases by one point.

Resources If you have problems • Watch the You. Tube videos (Part 1, 2

Resources If you have problems • Watch the You. Tube videos (Part 1, 2 & 3) • Post question P 2 PU forum

Procedure • A named sequence of steps • Why is it useful to make

Procedure • A named sequence of steps • Why is it useful to make procedures? –Code Reuse, less coding –Only need to change code in one place if there are bugs or updates

Procedures in Real Life • What do you do when brushing your teeth? –

Procedures in Real Life • What do you do when brushing your teeth? – Put toothpaste on brush, add water, brush, spit, rinse your brush • It’s actually several steps represented by “brushing your teeth” • But your mom only needs to say “brush your teeth” and you know what she means

Procedures in Mole. Mash What procedures did we use in Mole. Mash? What did

Procedures in Mole. Mash What procedures did we use in Mole. Mash? What did they do? –Move. Mole • Update the position of the mole –Update. Score • Print the new score

Debugging What are some ways you have found that work well to find errors

Debugging What are some ways you have found that work well to find errors in your app? – – – Proper Naming Test frequently Reread your code Add Comments Deactivate code that’s not in use – Use the Watch feature to see variables

Mole. Mash Hack How can we customize it? – Add a second mole –

Mole. Mash Hack How can we customize it? – Add a second mole – Speed up the mole – Change the look • Change the mole • Change the background – Add a sound – Others?

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in your group • Turn in to your teacher • Be prepared to share

Activity: Create Your Own App • Work alone or in pairs to design and

Activity: Create Your Own App • Work alone or in pairs to design and develop your own application • Try to use the tools you’ve learned – Events – Variables – Lists – Procedures – Camera – Buttons – Labels – Accelerometer – Image. Sprites – Timer – Sound

Activity: Create Your Own App • Have another pair/person test your app – Do

Activity: Create Your Own App • Have another pair/person test your app – Do they like it? – Is it easy to use? – Do they have suggestions for improvement? • Describe your app to your group • Continue to work on your app at home • Show your friends & family!

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in your group • Turn in to your teacher • Be prepared to share your answers with the group

Activity: No Text While Driving Hack In this tutorial, you’ll create an app that

Activity: No Text While Driving Hack In this tutorial, you’ll create an app that autoresponds to text messages while the user is driving. The user also has the option to have the app speak the message that was received.

Resources If you have problems • Watch the You. Tube videos (Part 1, 2,

Resources If you have problems • Watch the You. Tube videos (Part 1, 2, 3, 4 & 5) • Post questions to P 2 PU forum

Activity: No Text While Driving Hack How can we customize this app? – Custom

Activity: No Text While Driving Hack How can we customize this app? – Custom responses for different phone numbers – Others?

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in

Discussion • Read the tutorial questions on your worksheet • Discuss the answers in your group • Turn in to your teacher • Be prepared to share your answers with the group

Wrap Up • Think-Pair-Share – Share 2 things you learned with a partner –

Wrap Up • Think-Pair-Share – Share 2 things you learned with a partner – Be prepared to share with the group • Get the contact info for your team and set up your first

Before you go! Tweet us: @_technovation_ #technovation Join our Facebook community: Technovation Challenge

Before you go! Tweet us: @_technovation_ #technovation Join our Facebook community: Technovation Challenge