Day 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 Whats your favorite app Why are you excited about the Technovation Challenge ID: 301623
Download Presentation The PPT/PDF document "Hack" 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
DaySlide2
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
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 EditorApp InventorSlide6
App Inventor: Designer
Design the user interface of the app!Slide7
App Inventor: Blocks Editor
Program the functionality of the app - how it works!Slide8
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.Slide9
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 WirelessSlide10
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 Slide11
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.Slide12
CrystalBall
: Getting Started
To begin,
go to
gmail.com and sign into your email accountCreate a Gmail account if you don’t have oneOpen 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
CrystalBallSlide13
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
sensorSlide14
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
itemsSlide15
Activity:
CrystalBall
Hack
In the Blocks Editor
Find the FortuneText clicked event handler.Set the FortuneText.Text to a blank text box.Slide16
Activity:
CrystalBall
Hack
On the phone
Package for the phoneTest it!Slide17
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 AppSlide18
Activity:
CrystalBall
Hack
How can we customize this app?
Change the lookBackground pictureAdd a soundAdd more answersOther ideas?Slide19
Read the tutorial questions on your worksheet
Discuss the answers in your group
Turn in to your teacher
Be prepared to
share with the groupDiscussionSlide20
An
event
is an
action that occurs
outside the programUsually from the User!Examples:Key pressesScreen TouchesEvent-driven ProgrammingSlide21
Just like with a
computer,
program events happen
in your life everyday
ExamplesPhone ringsYour friend tosses a ball at youEvents in Real LifeSlide22
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 HandlersNotice they can be different for each event
Events in Real LifeSlide23
In
CrystalBall
, what was our event?
Phone was shaken
What did our event handler do?Displayed an answer from the list!Event-driven ProgrammingSlide24
A named container that holds a value
The value can change
Your wallet
S
ometimes might have $5Other times it might have $20Hair ColorSally’s is BrownMichael’s is …
VariablesSlide25
In this tutorial, you create an app that allows the user to draw lines and dots of various colors on the screen.
PaintPotHackSlide26
Driver – hands on keyboard & mouse
Navigator –
reads instructions and tells
driver what to do
Switch every 5-10 minutesTwo brains are better than onePair ProgrammingSlide27
Pair Programming in PracticeSlide28
If you have problems
Watch the YouTube videos (Part 1 & 2)
Post questions to the
P2PU forum
Resources Slide29
How
can we
customize
the app?
Add more color buttonsHave a random color buttonUse camera to add background imageOthers?PaintPotHackSlide30
Camera DemoSlide31
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 groupDiscussionSlide32
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
HackSlide33
Resources
If you have
problems
Watch the YouTube videos (Part 1, 2 & 3)
Post question P2PU forumSlide34
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 updatesProcedureSlide35
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 Real LifeSlide36
What procedures did we use in
MoleMash
? What did they do?
MoveMole
Update the position of the moleUpdateScorePrint the new scoreProcedures in MoleMashSlide37
What are some ways you have found that work well to find errors in your app?
Proper Naming
Test frequently
Reread your code
Add CommentsDeactivate code that’s not in useUse the Watch
feature to
see
variables
Do It
allows you to test procedures
DebuggingSlide38
How can we customize it?
Add a second mole
Speed up the mole
Change the look
Change the moleChange the backgroundAdd a soundOthers?MoleMash HackSlide39
Read the tutorial questions on your worksheet
Discuss the answers in your group
Turn in to your teacher
Be prepared to share
DiscussionSlide40
Work alone or in pairs to design and develop your own application
Try to use the tools you’ve learned
Events
Variables
ListsProceduresCameraButtonsActivity: Create Your Own App
Labels
Accelerometer
ImageSprites
Timer
SoundSlide41
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 groupContinue to work on your app at home Show your friends & family!Activity: Create Your Own AppSlide42
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 groupDiscussionSlide43
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 HackSlide44
Resources
If you have
problems
Watch the YouTube videos (Part 1, 2, 3, 4 & 5)
Post questions to P2PU forumSlide45
How can we customize this app?
C
ustom
responses for different phone
numbersOthers?Activity: No Text While Driving HackSlide46
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 groupDiscussionSlide47
Think-Pair-Share
Share 2 things you learned with a partner
Be
prepared
to share with the groupGet the contact info for your team and set up your first meeting for January!Wrap UpSlide48
Before you go!
Tweet us:
@_
technovation
_
#
technovation
Join our Facebook community:
Technovation Challenge