Hack Day
Tweet about Hack Day
today! _technovation_
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 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 PSA Video
Peer To Peer
University: P2PU
P2PU Task #1: Survey
and Team Registration
• Before you begin Hack Day, you’ll need to
take your pre-survey:
surveymonkey.com/s/presurvey2013
• …and register your team (see next two
slides)
Register your team
1. Create an account on P2PU: www.p2pu.org
Register your team
2. Complete the Technovation registration form: bit.ly/TCteam13
Earn Badges on P2PU
A digital badge indicates your team's
achievement of a skill, quality or interested
through your Technovation Challenge
Journey. These badges let the
Technovation Community know a little more
about your team and help us all work
together.
Earn Badges on P2PU
Each time you
complete one of
the Technovation
Tasks, your
mentor can give
your team a
badge to award
your hard work.
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: 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
you can use the
emulator. It simulates a
phone on your
computer.
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
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.
Start thinking…
You’ll get to create your very
own app after lunch today
(not for the competition, just
as a practice exercise).
What kind of simple app could
you create based on what you
are learning today?
Activity: CrystalBall
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
shake the screen to see the
crystal ball’s response. We’ll
walk through it together.
CrystalBall: 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 CrystalBall
Activity: CrystalBall
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 “FortuneText”
and set the background to be the
Crystal Ball Image
• Set the text of the button to be “”.
• Add a label under the the button
that says “Tap to Clear..”
• Add an accelerometer
sensor
Activity: CrystalBall
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: CrystalBall
Hack
In the Blocks Editor
• Find the
FortuneText
clicked event
handler.
• Set the
FortuneText.Text
to a blank text
box.
Activity: CrystalBall
Hack
On the phone
• Package for the phone
• Test it!
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
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?
–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 CrystalBall, 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
• Your wallet
– Sometimes might have $5
– Other times it might have $20
• Hair Color
– Sally’s is Brown
– Michael’s is …
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: CrystalBall
Hack
How can we customize
this app?
• Change the look
– Background picture
• Add a sound
• Add more answers
• Other ideas?
Work Time
• Create a customization for your
app—make it your own!
• Show your customization to another
team, and post a screenshot on
P2PU to earn a badge
• Answer the tutorial questions on your
worksheet, discuss with your group
• Turn worksheet into your teacher
PaintPotHack
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 instructions and tells
driver what to do
• Switch every 5-10 minutes
• Two brains are better than one
Pair Programming in
Practice
Resources
If you have problems
• Watch the YouTube videos (Part 1 & 2)
• Post questions to the P2PU forum
PaintPot
How can we
customize the app?
– Add more color
buttons
– Have a random color
button
– Use camera to add
background image
– Others?
Camera Demo
Work Time
• Create a customization for your
app—make it your own!
• Show your customization to another
team, and post a screenshot on
P2PU to earn a badge
• Answer the tutorial questions on your
worksheet, discuss with your group
• Turn worksheet into your teacher
MoleMash
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 YouTube videos (Part 1, 2 & 3)
• Post question P2PU forum
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?
– 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 MoleMash
What procedures did we use in
MoleMash? What did they do?
–MoveMole
• Update the position of the mole
–UpdateScore
• Print the new score
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
MoleMash
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?
Work Time
• Create a customization for your
app—make it your own!
• Show your customization to another
team, and post a screenshot on
P2PU to earn a badge
• Answer the tutorial questions on your
worksheet, discuss with your group
• Turn worksheet into your teacher
LUNCH BREAK (30 min.)
Tweet us: @_technovation_
#technovation
Join our Facebook community:
Technovation Challenge
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
– ImageSprites
– Timer
– Sound
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!
Work Time
• 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
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 YouTube videos (Part 1, 2, 3, 4 & 5)
• Post questions to P2PU forum
Activity: No Text While
Driving
How can we customize
this app?
– Custom responses for
different phone numbers
– Others?
Work Time
• Create a customization for your
app—make it your own!
• Show your customization to another
team, and post a screenshot on
P2PU to earn a badge
• Answer the tutorial questions on your
worksheet, discuss with your group
• Turn worksheet into your teacher
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