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 ID: 481846
Download Presentation The PPT/PDF document "Hack Day" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Hack Day
Tweet about Hack Day
today! _
technovation
_Slide2
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?Slide3
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.Slide4
Technovation (video)Slide5
Peer To Peer University: P2PUSlide6
P2PU Task #1: Survey and Team Registration
Before completing tasks for Hack Day, you’ll need to take your pre
-survey:
surveymonkey.com
/s/
presurvey2013
…and
register your team (see next
two
slides)Slide7
Register your team
1. Create an account on P2PU
: www.p2pu.orgSlide8
Register your team
2. Complete the Technovation registration form:
bit.ly
/TCteam13Slide9
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.Slide10
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.Slide11
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 InventorSlide12
App Inventor: Designer
Design the user interface of the app!Slide13
App Inventor: Blocks Editor
Program the functionality of the app - how it works!Slide14
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.Slide15
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.
Set-up
WirelessSlide16
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.
Phone Settings for Development
Slide17
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 tap the screen to see the crystal ball’s response
. We’ll walk through it together.Slide18
CrystalBall
: Getting Started
To begin, go to
g
mail.com
and sign into your email account
Create a Gmail account if you do
n’
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
CrystalBallSlide19
Activity:
CrystalBall Hack
In the Designer
Add a
l
abel
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
sensorSlide20
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
itemsSlide21
Activity: CrystalBall
Hack
In the Blocks Editor
Find the
FortuneText
clicked event handler.
Set the
FortuneText.Text
to a blank text box.Slide22
Activity: CrystalBall
Hack
On the phone
Package for the phone
Test it!Slide23
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
Customizing Your AppSlide24
Activity:
CrystalBall Hack
How can we customize this app?
Change the look
Background picture
Add a sound
Add more answers
Other ideas?Slide25
Read the tutorial questions on your worksheet Discuss the answers in your group
Turn in to your teacherBe prepared to share with the group
DiscussionSlide26
An
event is an action that occurs
outside the program
Usually from the User!
Examples:
Key presses
Screen Touches
Event-driven ProgrammingSlide27
Just like with a computer, program events happen in your life everyday
ExamplesPhone rings
Your friend tosses a ball at you
Events in Real LifeSlide28
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
Events in Real LifeSlide29
In
CrystalBall, what was our event?
Phone was shaken
What did our event handler do?
Displayed an answer from the list!
Event-driven ProgrammingSlide30
A named container that holds a value
The value can change
Your wallet
S
ometimes might have $5
Other times it might have $20
Hair Color
Sally’s is Brown
Michael’s is …
VariablesSlide31
In this tutorial, you create an app that allows the user to draw lines and dots of various colors on the screen.
PaintPotHackSlide32
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 ProgrammingSlide33
Pair Programming in PracticeSlide34
If you have problems
Watch the YouTube videos (Part 1 & 2)
Post questions to the P2PU forum
Resources Slide35
How can we customize the app?
Add more color buttons
Have a random color button
Use
camera
to add background image
Others?
PaintPotHackSlide36
Camera DemoSlide37
Read the tutorial questions on your worksheet Discuss the answers in your group
Turn in worksheet to your teacherBe prepared to share your answers with the group
DiscussionSlide38
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.
MoleMash
HackSlide39
Resources
If you have
problems
Watch the YouTube videos (Part 1, 2 & 3)
Post question P2PU forumSlide40
A named sequence of stepsWhy is it useful to make procedures?
Code Reuse, less codingOnly need to change code in one place if there
are bugs or updates
ProcedureSlide41
What do you do when brushing your teeth?
Put toothpaste on brush, add water, brush, spit, rinse your brushIt’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 Real LifeSlide42
What procedures did we use in MoleMash
? What did they do?MoveMole
Update the position of the mole
UpdateScore
Print the new score
Procedures in
MoleMashSlide43
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
Do It
allows you to test procedures
DebuggingSlide44
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?
MoleMash
HackSlide45
Read the tutorial questions on your worksheet Discuss the answers in your group
Turn in to your teacherBe prepared to share
DiscussionSlide46
Work alone or in pairs to design and develop your own application
Try to use the tools you’ve learned
Events
Variables
Lists
Procedures
CameraButtons
Activity: Create Your Own App
Labels
Accelerometer
ImageSprites
Timer
SoundSlide47
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
S
how your friends & family!
Activity: Create Your Own AppSlide48
Read the tutorial questions on your worksheet Discuss the answers in your group
Turn in to your teacherBe prepared to share your answers with the group
DiscussionSlide49
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.
Activity: No Text While Driving HackSlide50
Resources
If you have
problems
Watch the YouTube videos (Part 1, 2, 3, 4 & 5)
Post questions to P2PU forumSlide51
How can we customize this app?
Custom
responses for different phone
numbers
Others?
Activity: No Text While Driving HackSlide52
Read the tutorial questions on your worksheet Discuss the answers in your group
Turn in to your teacherBe prepared to share your answers with the group
DiscussionSlide53
Think-Pair-Share
Share 2 things you learned with a partnerBe prepared to share with the groupGet the contact info for your team and set up your first meeting for January!
Wrap UpSlide54
Before you go!
Tweet us:
@_
technovation
_
#
technovation
Join our Facebook community:
Technovation Challenge