Placeholder Image

Subtitles section Play video

  • - Hi everybody, welcome to code break.

  • My name is Hadi Partovi,

  • I'm calling from Code.org headquarters here in our studio.

  • Actually no, I'm just at home.

  • Let me change my virtual background.

  • This is my living room

  • and I'm joined with my daughter, Sofia.

  • Sofia is gonna be the soundboard manager.

  • (ceremony trumpets blow)

  • And we're joined here with a whole bunch of folks.

  • There's about 1200 people joined in on zoom already

  • and last week we had 10,000 viewers streaming live

  • on Facebook,

  • and there's people joining in as we're talking still,

  • about 10 or 20 per per second.

  • Last week we have 10,000 viewers joining

  • from places as far away as India, and Spain, and Greece,

  • Israel and Azerbaijan at all hours of the night, thank you.

  • We're hoping together to build

  • the world's largest live interactive classroom.

  • If you enjoy what we do here today,

  • please invite others to join as well.

  • If each one of you invites two other parents

  • or families to join,

  • we should hopefully be able to double every single week.

  • I wanna introduce our first special guest today,

  • Lyndsey Scott, who's a actress, model

  • and also an awesome software engineer.

  • Lyndsey, how are you doing?

  • - I'm doing well.

  • Thanks for asking.

  • - How are things in Los Angeles?

  • - They're good.

  • I've been home obviously quarantined

  • but I've enjoyed being home.

  • I think it's nice to have this time to

  • be at home and maybe learn something new

  • or try something that I normally would have that time to do.

  • - Do you have any thoughts you wanna share with the millions

  • of students who are at home without school?

  • - Yes, I think that code,

  • Code.org especially,

  • is a great way for you to maybe spend your time.

  • You can spend the next couple weeks in quarantine

  • or however long it takes

  • and then you could come out with a great new skill set.

  • - So you yourself have been successful

  • both as a model and an actress

  • but I'm most interested in your computer science background.

  • Can you share about how you got into computer science

  • and what you're doing with it?

  • - Sure, so I went into Amherst College knowing

  • that I wanted to act

  • but throughout my time there

  • I made my way into computer science class

  • and I loved it so much

  • that I ended up double majoring in both theater

  • and computer science.

  • - All right.

  • - And now it's perfect.

  • I'm able to programmed from home here in LA

  • and then normally go out and act,

  • and it's been a great way to fund my acting career

  • while I'm trying to work through that.

  • - That's great.

  • Lyndsey's got an incredible reputation

  • as a software engineer

  • and in fact, on Stack Overflow,

  • which is one of the top websites

  • for coders to ask questions and answers.

  • She has all sorts of questions

  • that people ask her about iOS engineering and making apps,

  • which she's done a lot of.

  • Is that your kitten?

  • - Yeah, that's Jade.

  • - You wanna introduce her?

  • - [Lyndsey] (laughs).

  • - Hi there.

  • So before we start, we're gonna do our joke of the day,

  • our computer joke of the day.

  • So Lyndsey, why was the computer cold?

  • - I don't know, why was it cold?

  • - Because it left the windows open.

  • - (laughs) Good one, great (mumbles) joke.

  • - Let's get a chance to say hi to all the other students

  • who are joining us from other the countries.

  • So if we could switch to gallery view

  • and we're gonna unmute everybody

  • so if you could.

  • - [Lyndsey] Oh, wow.

  • - Hi. - Hey everybody.

  • - Hi. - Thank you.

  • - Hello. - Hi.

  • - [Lyndsey] I see people are from Washington.

  • - Hello.

  • - Hey Brian, what's up?

  • - So the next thing we wanna do is we wanna say hello

  • to the audience who's not on camera.

  • - Yes. - Everybody

  • can see you have a chat button on your screen.

  • If you're on a tablet or phone,

  • you may need to tap the screen to see it.

  • If you click the chat,

  • what you need to do is to click the little blue drop down

  • that says and choose to all panelists and attendees,

  • and this way you can type in there and everybody can see it.

  • If you could all tell us where you from

  • and Lyndsey if you could read where people are from.

  • - So many people it's so hard to read so fast.

  • Illinois, Tennessee, Puerto Rico,

  • Nevada, Florida.

  • Let's see other countries.

  • We have Orlando, Memphis, Bellevue.

  • - Awesome.

  • Now can people also type what grade they're from?

  • - Lebanon, Honduras.

  • - Can you type in your grade?

  • - Yeah, what grade are you in?

  • - Fifth grade, 12th grade.

  • - 11th,

  • seventh, eighth.

  • Do we have any

  • younger kids here? - Ninth grade, tenth grade.

  • - Fourth grade.

  • First and third, wow!

  • - And so then the last thing I wanna ask if people could.

  • Wow 25th grade I saw.

  • I wanna get a sense

  • of people's computer science experience,

  • if you could type in either one if you're a beginner,

  • two if you're intermediate, three if you're advanced.

  • - Seems like we have a good mix some

  • some people are four, wow.

  • - I don't know if I'm even a four.

  • - I think I saw a 10, 000 go by.

  • - Yeah, 10,000 is.

  • - We're gonna have an opportunity to hear from,

  • to basically do all three different levels.

  • So we're gonna start with much more beginner stuff.

  • As we go along, I wanna give people,

  • let you know that there's a button for Q & A.

  • So if you have any questions as we go along,

  • you can click this button.

  • Those questions will come to the team at Code.org,

  • we'll try to answer them in real time.

  • And we'll get hopefully a chance later in the episode

  • to answer one or two questions live.

  • For today,

  • the agenda we have is we're gonna talk about prototyping

  • and we're gonna start learning about first designing an app

  • or designing on paper.

  • Second, we're gonna build an interactive card

  • and then lastly, we're gonna do rapid app design.

  • Those are the sort of three stages

  • of what we're gonna be doing.

  • And as we go through this, I also wanna call out

  • this is our second time hosting Code Break.

  • It is not a simple thing to pull together

  • with such a large live audience.

  • We have almost twice as many people today

  • as we had last week.

  • If we run into problems

  • we're gonna learn an important computer science concept

  • called debugging.

  • This is a bug that Sofia drew

  • and so when we run into bugs we'll just deal with them.

  • If we have tech issues,

  • if people have trouble calling in, et cetera.

  • So, I wanna start by showing some of the things that

  • the students who joined us last week submitted.

  • We learned about algorithms and how to make art using code,

  • and so many people shared your drawings to social media.

  • And I wanna share some of these on my screen.

  • So this one is from Lisia Tatuli

  • and this was a whole team of 20 kids in Milan, Italy

  • that drew these different shapes,

  • and she said even if we're on locked down in our houses,

  • we had fun.

  • So thank you Lisia, for calling in from Italy.

  • And this other one I wanna show is from Arnab Biswas,

  • whose daughter's Miranlini and Sharanya,

  • sent in these two drawings,

  • and then they've been coding all week

  • making different drawings.

  • Arnab are you they're very with us right now.

  • Can we unmute Arnab to just say hi briefly

  • with his daughters?

  • They're on.

  • - [Arnab] Hi.

  • - Hi Sharanya and Miranlini, how are you doing?

  • - [Miranlini] We're all serious.

  • - Great

  • So it's great to see you and

  • there dialing in from Bangalore, India.

  • What time is it in there in Bangalore right now?

  • - [Arnab] It's 10:40 pm right now.

  • - 10:40 pm in the night.

  • Well, thank you for joining us.

  • So today's computer science word of the day is prototype.

  • Thank you, Sofia for this design.

  • We're gonna learn how to prototype starting

  • with design on paper

  • but Lyndsey, since you've made so many apps,

  • what do you do when you are making an app?

  • Have you ever started by prototyping in some other tool

  • before you get started?

  • - [Lyndsey] Yeah, definitely.

  • Prototyping is a great way to work out

  • what your app will look like or do

  • before you put too much energy into it.

  • It's great way to show clients or customers,

  • what you have to look forward to

  • and hopefully they like it too, before you get started.

  • - So I wanna show sort of a view of an example

  • of an end result.

  • What we're gonna do today is prototype

  • and then build an interactive card.

  • This here if you see my screen is an example

  • of what the end result will look like.

  • And lemme see I'm not sure if it's showing for people yet.

  • Oops,

  • that's my whole screen.

  • Let me come back and do it differently.

  • This is what an example

  • of an interactive card would look like

  • that we're gonna build.

  • So you have a little bear here that you need to feed

  • and you can click on different foods for him,

  • so you can eat the watermelon or he can eat the hamburger

  • and he gets bigger as he heats food.

  • Each time we click on something the bear gets bigger

  • and finally says, "Happy Code Break," and we fed the bear.

  • It's a very simple card with a background and a character,

  • and then reacts to different behaviors.

  • We're gonna make a similar interactive card right now,

  • but we're gonna start by designing it on paper first.

  • So I wanna show the example

  • of what it's gonna end up looking like.

  • And now we wanna have a number of students basically join us

  • to help Lyndsey design her card.

  • So can we welcome David, Lana, and Claudia?

  • You're all gonna be now unmuted so you can say hello.

  • So David, are you there?

  • - [David] Yeah, I'm here.

  • - [Lyndsey] Hi David.

  • - [David] Hello.

  • - [Lyndsey] Where are you from?

  • - [David] Puerto Rico.

  • - [Lyndsey] Oh, Puerto Rico.

  • So what grade are you in?

  • - [David] The sixth.

  • - [Lyndsey] And have you ever done

  • computer programming before?

  • - [David] Well, they give it for a grade here in school.

  • - Oh, yeah, that's great. - My technology teacher.

  • - [Lyndsey] That's amazing.

  • - And Lana, are you there?

  • - [Lyndsey] Hi Lana.

  • So where are you from?

  • - [Lana] I'm from Massachusetts.

  • - [Lyndsey] Sorry, my animal's just made a little noise

  • fighting in the background.

  • Where did you say you're from?

  • - [Lana] Massachusetts.

  • - Massachusetts, where in Massachusetts?

  • - [Lana] Seekonk .

  • - [Lyndsey] Okay, I went to school in Massachusetts

  • that's why I asked.

  • So what grade are you in?

  • - [Lana] Third grade.

  • - [Lyndsey] And what's your favorite subject in school?

  • - [Lana] Reading.

  • - [Lyndsey] Reading?

  • - And Sophie, are you there with us as well?

  • - [Sophie] Yeah, hi.

  • - [Lyndsey] Hi Sophie.

  • - Hi. - How are you

  • and where you from?

  • - [Sophie] Bellevue, Washington.

  • - [Lyndsey] Bellevue, Washington.

  • And what grade are you in?

  • - [Sophie] I'm in ninth grade.

  • - [Lyndsey] Nice, high school.

  • So how are you enjoying your quarantine,

  • is there's something fun you've been up to?

  • - [Sophie] (laughs) Not really, I've been coding

  • and I've been working on my business.

  • - [Lyndsey] Oh, wow,

  • you have a business?

  • - [Sophie] Yeah.

  • - [Lyndsey] That's amazing.

  • - [Sophie] Yeah, I have a fashion bag company.

  • - [Lyndsey] Oh, wow.

  • Well, that's a great way to spend time at home.

  • That's so inspiring to be able

  • to have -- - Thank you.

  • - [Lyndsey] Your own business at your age, that's amazing.

  • - So now we're gonna switch to going into the prototype.

  • So Lyndsey, we want you to start by asking the folks

  • who are on screen

  • basic questions to basically help you design a card.

  • And for everybody else who's calling in,

  • if you have a paper and pen, please draw along with Lyndsey.

  • So we're gonna draw the card in the top part of your paper

  • and those of you who are live on camera,

  • you can do the same as well.

  • Go ahead, Lyndsey.

  • - So let's see.

  • First, we need to figure out what the background should be.

  • So should it be

  • a city, a farm, a desert, underwater,

  • a rainbow with sun, any ideas?

  • You guys can type it in the chat.

  • Underwater.

  • Underwater, people really seem to like this underwater idea

  • but that's very hard to draw.

  • Space, that's a good one.

  • Let's do the rainbow.

  • If I can draw a rainbow.

  • And so next,

  • what type of characters or objects

  • should we put on the card?

  • You can have a person, an alien, a bunny, a cow, a crab,

  • a fish, car, kangaroo anything.

  • I see some things in the chat

  • but do we have any ideas also from our panelists?

  • David or Lana or Claudia,

  • do you guys have any thoughts on that?

  • - [David] Maybe like a Martian or something.

  • - A Martian.

  • I like that and it seems like some people in the chat

  • have said alien too, so that works.

  • We'll have a rainbow and an alien.

  • Oh gosh, I need to draw an alien.

  • Well while I'm working on that.

  • The next thing we need to figure out is what happens

  • when we tap the alien.

  • Actually, let's come up with two objects.

  • There's the alien and what else?

  • Let's figure out one more object.

  • - Sofia do you want anything?

  • - Let's let the chat decide. - I see

  • a lot of people saying cats.

  • So we'll do a cat and an alien with a rainbow in the back.

  • So what happens when we tap that alien or cat?

  • They can move, they can jitter, they can wander around,

  • they could spin,

  • they can say something.

  • Any ideas?

  • Panelists?

  • Someone's said something in the chat.

  • - Maybe we can have it spin around

  • or something to that fact.

  • - That sounds good.

  • - We'll have the --

  • - [David] Maybe do a default dance

  • like somebody said here like in fortnight or something.

  • - Unfortunately, the program we're gonna use doesn't have

  • that kind of capability

  • but I'm sure you guys can create that

  • and code it sometime later. - Okay.

  • - So we'll have the alien spin.

  • And what's the other creature we chose?

  • - It was the cat. - Maybe like teleport

  • or something?

  • - Oh teleport, now we can't do that either unfortunately,

  • but we can make them move,

  • walk around,

  • say something.

  • Maybe maybe it should say something.

  • Anybody have an idea for what the cat can say.

  • - People are saying -- - And it doesn't have

  • to be meow. - It says meow or what's up?

  • - Happy April Fool's Day (laughs).

  • - Happy April Fool's Day.

  • Yeah, that's good.

  • So the cat will say.

  • So I'm going to write down

  • these behaviors at the bottom of my card

  • and I guess while I do that,

  • do you happen to have any trivia for me, Hadi?

  • - So Lyndsey's basically drawing

  • to write down basically what's gonna happen in terms

  • of the code what we're gonna do.

  • So she's saying that when the alien is clicked,

  • you want the alien to do some spinning

  • and when the cat is clicked, you want the cat to say,

  • "Happy April Fool's Day."

  • - [Lyndsey] Yes.

  • - And you're writing this down basically,

  • just to keep notes of over one to create in code.

  • And the reason to do this on pen and paper at first is

  • to plan out what you're gonna do in code.

  • It's easy when you're in code to basically make mistakes

  • and then get stuck, and then change your code as you go.

  • When you write down a plan in advance,

  • you can then basically organize your thoughts.

  • Then once you coming on the computer

  • you have a clear idea of what you wanna build.

  • Now for something that's simple you don't necessarily need

  • to do that

  • but it helps to organize your thoughts

  • in advance to do this.

  • Lyndsey are you close enough to done

  • to show us the finished product on paper?

  • - Yes.

  • - Let's see what you have here?

  • - Here's my

  • rainbow, my alien and my cat.

  • And then it says,

  • and I think it says it in reverse on camera.

  • But what it says here it says when alien is clicked,

  • it spins,

  • the cat says, "Happy April Fool's Day," when it's clicked.

  • And Sofia, did you make one of these yourself too?

  • - Yeah.

  • - Show yours.

  • Sofia do something very similar.

  • - Well I drew an obscure picture.

  • - Can everybody else,

  • can we see all the other students on camera so we can see

  • and hold up if you made drawings, what you made.

  • So we're gonna next jump into coding

  • to actually create something that does something like this

  • and thank you David, Lana and Sophie for joining us.

  • In a few minutes we're gonna learn

  • how to turn this paper prototype in an interactive card

  • that Lyndsey can share.

  • But first, I wanna.

  • Give me just one second.

  • First we wanna do trivia time.

  • Sofia, are you ready for today's trivia question?

  • (car horn beeps)

  • So we're gonna open a poll for everybody

  • to take a true and false question.

  • You're gonna see a poll pop up on your screen.

  • If you're following on Facebook Live

  • or some other platform you won't

  • but today's question is a true or false question.

  • True or false?

  • The term bug or debugging

  • was first used by Admiral Grace Hopper

  • who found a real life bug stuck inside

  • a computer during the 1940's.

  • So we're gonna keep the poll open,

  • there's over 2000 people on the live stream

  • who are able to answer the poll.

  • - [Girl] (speaks in a foreign language)

  • - [Man] (speaks in a foreign language)

  • - Can we get the

  • results of the poll up on the screen

  • for everybody to see?

  • So it looks like 75% of you said that the answer is true

  • and 25% of you said the answer is false.

  • The correct answer is false.

  • Even though Grace Hopper is known for having popularized

  • the term bug or debugging,

  • both terms that existed before

  • as far back as Thomas Edison in the 1870s

  • and throughout the 1900's.

  • Bugs, those words were used in the context

  • of flaws in engineering or robotics

  • that predated modern computers.

  • But Grace Hopper was the first to record an incident

  • where an actual real life bug, a moth,

  • got stuck inside a computer and then caused a problem.

  • Because she was such a well renowned computer scientist

  • for the work that she did in innovation with compilers,

  • she basically has been known as a person

  • who popularized the term.

  • So now we're gonna switch to having some real code written

  • and my sidekick Sofia is gonna be the one doing the coding.

  • And Lyndsey is gonna be instructing Sofia

  • how to basically create the interactive card that we saw.

  • I'm gonna start by sharing Sofia's screen.

  • Sofia, are you ready?

  • - Yep.

  • - Looks as if she was born ready.

  • So now we see Sofia's screen

  • and Lyndsey, are you ready to give Sofia instructions?

  • If Lyndsey is on mute, can we unmute Lyndsey?

  • So I'm gonna explain what we see on the screen.

  • On the left side of the screen here is

  • where the card is gonna be made.

  • On the middle are the commands that Sofia can use

  • and these are in different categories

  • like worlds, sprites, et cetera.

  • And on the right side over here is where

  • we're gonna make her code.

  • Lyndsey's a computer scientist so

  • she works in much harder tools than this

  • but she spent the night, last night,

  • to learn this tool to help teach it to Sofia.

  • So go ahead, Lyndsey.

  • Lyndsey is still muted.

  • Can somebody unmute Lyndsey?

  • - Yes, there we go.

  • Perfect.

  • So when run, we're going to, when run is tapped,

  • we ant to create a background.

  • So go to world

  • and we're going to set the background,

  • you can drag it into the project underneath run.

  • There we go.

  • And then we're gonna change that to,

  • tap the down arrow or tap city

  • and we're gonna change that to rainbow.

  • Let's do rainbow with sun,

  • I think there's a rainbow with sun option.

  • Well rainbow works too.

  • Oh, nice.

  • And next, we're going to add the sprites,

  • which are the objects.

  • So tap sprites underneath the blocks menu

  • and you're going to make a new sprite.

  • So drag that into the project

  • and this sprite is an alien.

  • So can you change that to an alien?

  • (laughs) that's alien like

  • and to change the position of the alien,

  • tap the pin next to the 200, 200.

  • And then you can move it around wherever you want

  • and it'll change the coordinates for you in the code.

  • That looks good.

  • And we're gonna add one more sprite, so go back to sprites.

  • And next we're going to add, so drag in the make new sprite.

  • - You have got this, Sofia.

  • - (chuckles) And you're gonna change that to a cat.

  • And if you don't see a cat here for anyone who needs help,

  • you could tap more at the bottom

  • and tap animals,

  • and you should be able to find a cat here.

  • So tap the cat and then go back to the down arrow

  • and you could find the cat in that menu.

  • There you go

  • and again, you could tap the pin and move the object around.

  • So now that we've got the scene in place,

  • the next step is to react when the objects are clicked.

  • So when the alien is clicked, it's going to spin.

  • In order to do this,

  • you're going to go to the events menu

  • and drag in the when clicked.

  • And you're going to actually put it separate

  • from the other code because it happens not

  • when the project runs, but when the item is clicked.

  • So you could change that to the alien.

  • Great

  • and we're going to add a behavior.

  • So go to the behaviors

  • and let's find the behavior of spinning.

  • Either left or right I think, either works.

  • One more thing back in behaviors,

  • scroll up and you're going to add the sprite begins

  • to connect the click action to the spinning action

  • and then put the spinning

  • when the click action begins, perfect.

  • Now change that sprite object

  • to the alien.

  • So when the alien is clicked, the alien will spin left.

  • Now let's try running it now, see what happens.

  • - All right. - Well

  • that aliens actually spinning kind of fast

  • for its own liking, we don't want it to get sick.

  • So let's press the edit button, stop the project,

  • press the edit button

  • and let's slow down that spin by cutting down

  • the numbers degrees

  • it goes for each timer cycle.

  • So let's change that.

  • - You can edit any of the behaviors

  • that you can actually see.

  • So Sofia, you can change the speed of the spin here.

  • - Yeah, so you could change that number 10 to one.

  • Let's be gentle to this alien.

  • - Nice. - Perfect.

  • Now let's try running that again, much better.

  • Let's stop it for now

  • and then we're gonna add the one last action

  • of the cat saying "Happy April Fool's Day."

  • So,

  • back in the events menu,

  • drag in a click action,

  • change that to cat.

  • and then the option to print something actually

  • is in the worlds menu.

  • So tap world and you could drag in print

  • and put it right under with when clicked

  • and you can type in "Happy April Fool's Day."

  • - You can type yourself.

  • - Perfect.

  • So now that everything's in place

  • we can build and run, well run.

  • Normally I build and run

  • because I have to compile the offset, run.

  • - Now you can click them and see them do these things.

  • - Yeah, and now we can click.

  • - "Happy April Fool's Day," it says at the top.

  • - Yeah, is that what you have?

  • Everything works and one last thing I wanna do

  • just for the more advanced people.

  • In the top right corner, there's a code button.

  • So let's take a look at what we did in code.

  • In the top right of the workspace.

  • There we go so that's real code underneath

  • all of that action.

  • Pretty cool.

  • - So this is the JavaScript code behind everything

  • that we did.

  • It includes the blocks that we dragged out

  • but it also includes the definitions

  • of the various behaviors as well,

  • as we can see spinning as defined as how it's done.

  • So behind all these blocks there's real JavaScript

  • and even though drag and drop coding

  • is the way people start learning it,

  • as you get more experienced you end up using

  • sort of a typed programming language

  • where you need to type in the code.

  • The capabilities are very, very similar

  • and it's more about thinking

  • how you wanna put your code interactions together.

  • What we built here today was relatively simple.

  • There's a lot more actions, a lot more types of events

  • and a whole lot of types of behaviors for what you can do

  • with making an interactive card.

  • And when you're done making your card,

  • you can click the share button

  • and then you get a link to the card that you can share

  • and send to a friend.

  • You can send it to a phone

  • or send it to your mom or dad's phone

  • to get your interactive card on your phone.

  • If you have an account on Facebook or Twitter,

  • you can post it to social media

  • and so basically, after you're done making your creation,

  • you can share it.

  • And at the end of this episode

  • we're gonna email all of you information

  • for how to make your own card

  • and we'd love to for you to share what you create.

  • And then on next week's show

  • we're gonna showcase the best things people created.

  • Next I wanna see if we have any questions for Lyndsey.

  • Let me stop doing my screen share.

  • And if you remember, we have the option for doing Q & A.

  • - I see one question already.

  • - Now is a good time to go through them.

  • - So chat apps don't I have to use Swifter iOS programming.

  • That's a good question, it's a bit more advanced

  • but I'm definitely gonna answer it.

  • So with the programming I do,

  • you can either use Swift,

  • which is Apple's programming language,

  • or you could use Objective C,

  • which is the older language

  • that was originally,

  • the only language you could use for iOS development.

  • So yeah, now I normally code in Swift.

  • - Do you normally code in Swift?

  • Later today is using a Code.org tool called the App Lab,

  • which is great for prototyping.

  • It doesn't create iOS apps,

  • it creates what's called web apps.

  • The benefit of web apps is that

  • you can see them on your phone very quickly

  • and you can see them on a page.

  • On any kind of phone rather than

  • the process of building a real iOS app

  • has a lot of extra steps

  • and you also need a more powerful computer

  • and you can only actually do it on a Mac, I believe.

  • - You can partition a drive on a different computer but

  • that's a great way, I need to check out this tool

  • before I get into the hard coding.

  • Definitely a good way to prototype sounds like.

  • - And Akiera, one other person from Code.org named Akiera,

  • is on the line as well to ask questions

  • from the broader audience that use the Q & A button.

  • Akiera, are you there?

  • - I am Hadi.

  • Hi, how are you all?

  • - [Sofia] Hi.

  • - So we have a question for both Hadi and Lyndsey first.

  • Why do you both like coding so much?

  • What drew you to the field?

  • - For me, it felt like as soon as I got into the class,

  • I was just so excited.

  • I was raising my hand all the time

  • because it felt like I was playing logic games.

  • So even now it still feels

  • like I'm solving these little logic games

  • and then I ended up with this masterpiece

  • at the end of creating exactly what I wanted

  • to create to begin with.

  • It's very exciting to me.

  • - I got into coding when I was growing up in Iran

  • and this was actually during the Iran Iraq war.

  • It was a terrible place to grow up.

  • My neighborhood was getting bombed every single night.

  • So we spent every night in the basement

  • holding our ears hoping our house

  • wasn't gonna get destroyed by the bombing.

  • But so for me, the computer that my dad brought home

  • for my brother and I was our one escape

  • from a really terrible world.

  • We learned how to code on that

  • and then when we came to the United States as immigrants,

  • my family didn't have a lot of money

  • but as as early as 14 years old,

  • I started interning at tech companies.

  • And so for me back then coding was just a way

  • to just make extra money

  • and to help our family get our life started

  • in a new country as immigrants.

  • But really the beauty of coming pewter science

  • and the reason I started Code.org

  • is not just because you can get jobs as a coder.

  • Because the creativity,

  • because it helps teach you how to think

  • and even if you don't wanna get into computer science

  • as a career,

  • it helps give you an understanding

  • how the world around you works.

  • Everything around us is increasingly impacted by technology

  • and the confidence of knowing you can build

  • that technology yourself,

  • you understand how it works,

  • you can program the world rather than having

  • the world program you is something

  • that every student should have the opportunity to learn.

  • - Yeah, that's one thing I love about programming is that

  • any interest you have can be made better by technology

  • and to have the tools to build that really powerful.

  • - And, Lyndsey, we have one more question

  • for you before you go.

  • This person said you're successful in so many fields,

  • you're an actress, you're a model,

  • you're a computer scientist,

  • you basically do it all.

  • What advice would you have for a young coder

  • who is also interested in other things?

  • How do you learn to balance all of your priorities?

  • - Yeah, I've been really lucky.

  • So at a certain time I was modeling

  • and it was so time consuming, that was all I could do.

  • But then I moved out to LA to focus on my acting

  • and in order to focus on it,

  • I knew that I had to make some money from doing something

  • and so that's when I started doing client work

  • for different app companies.

  • And so it's been great that I've been able

  • to make a living from doing that and support my acting work

  • but it's also been great that I've been able

  • to use my interest in acting to inspire

  • some of the apps that I create.

  • Like I just created this self tape app for actors and

  • it's just nice to have that perfect meshing

  • of my interest and my skill set.

  • - [Akiera] Thank you so much Lyndsey,

  • and thank you Hadi.

  • - Thank you.

  • And if we could switch to gallery view

  • and give a chance for everybody to say goodbye to Lyndsey.

  • Thank you so much for joining us, Lyndsey.

  • Lyndsey -- - I'd love to watch

  • the rest of it.

  • I'm I allowed to.

  • - No, you're allowed to stick around if you want to.

  • I wasn't sure if your time is limited,

  • we'd love to have you.

  • - I'll stick around a bit at least.

  • - Wonderful, then you can get

  • to see how App Lab works as well.

  • So thank you, Lyndsey.

  • Now we're gonna welcome our next special guest,

  • Mark Cuban needs no introduction

  • and we are so lucky to have him on the second episode

  • of Code Break.

  • Mark, I'm here with my daughter, Sofia.

  • - Hi Sofia. - And I'm joined

  • by a few dozen students you see on camera,

  • there's about 1700 students live on zoom.

  • And on Facebook, we're gonna have on the order of

  • 10 to 20,000 folks watching the live stream as well,

  • (mumbles) how are you doing?

  • - I'm hanging in there.

  • It's fascinating listening to your story, Hadi growing up,

  • and what you had to deal with

  • because it's relevant to what people

  • are going through today.

  • We've tried to teach our kids who are 10, 13 and 16,

  • that you may think this is bad

  • but what others have gone through this is nothing.

  • To wake up to bombs and not know

  • if you're building's still gonna be there,

  • where you're going to live.

  • It's a lesson of resilience that

  • I'm glad you could share with us.

  • - Thank you.

  • For folks in the audience

  • if you have questions for Mark, again, use the Q & A button

  • and we're gonna have a chance

  • to have some of those questions answered.

  • When you type your question, please enter your name

  • and also where you're from, so we can call that out.

  • So Mark 90% of the students in the world

  • are now studying home alone.

  • Do you have any words of inspiration

  • or encouragement for them?

  • - This is the chance you have,

  • if there's something you really like to do,

  • to try to be great at.

  • I started going back on the piano

  • which I haven't been in for years.

  • Just picking up some of my favorite songs

  • and annoying my kids and my wife, but

  • re-picking up books that I wanted to get to.

  • Whatever it may be, however you learn,

  • what a great time to learn.

  • - Absolutely.

  • You're so well known for the work on Shark Tank

  • and also for owning a basketball team

  • but the very first companies

  • that you started as businesses were tech companies,

  • can you tell us more about those and how you got your --

  • - One of my first jobs out of college is working

  • for a software company way back when

  • and I started a company called Micro Solutions in the 80's,

  • and we were one of the very first companies

  • to connect PCs together when back then people thought

  • there was no need to connect a PC together.

  • I'll just carry my floppy disk from this PC to that PC

  • and so I started doing local area networks.

  • I taught myself to code,

  • I didn't have a technical background

  • but the way I always looked at technology

  • was that there's the person who developed it,

  • whether it was software or hardware,

  • then there was everybody else.

  • So I was effectively tied for second place

  • and if I worked hard to learn it,

  • then I can learn it as well as everybody.

  • Maybe even as much as the original developer

  • and that gave me an edge to be able to apply it

  • to different businesses.

  • And that's how I grew that business.

  • And then after I sold that took a few years having fun

  • and then in the mid 90's

  • when the internet was starting to take off

  • a friend of mine from college, Todd Wagner,

  • and I decided you know what this new internet thing

  • there's gotta be a way we could do audio over the internet

  • so we can listen to Indiana basketball.

  • And effectively, we had the first streaming business

  • in the country, in the world.

  • And that was a company called Audio Net,

  • it was it was an early, early version

  • of what we're doing right now.

  • - Yeah, that's great.

  • So learning computer science is what we're here about

  • and it's obviously part of how you got your early start.

  • There's about 100,000 students in the country right now

  • that are taking a course called Computer Science Principles

  • and for many of them,

  • they're taking as an advanced placement course,

  • for college credits.

  • And in that course, one of the things you work up to

  • is to build and prototype an app

  • as something that you build by the end of the course.

  • And the students who take that course on Code.org

  • there's a tool called App Lab for their prototyping.

  • And in fact the AP exam, unlike most AP exams,

  • which are like a multiple choice test and just Q & A,

  • you actually need to submit the app you create

  • to the College Board and you're graded,

  • not only on your coding, but also in your creativity.

  • It's a wonderful course. - That's great.

  • - If there's any high school students in the audience,

  • if your high school offers CS Principles,

  • you should take the class.

  • And if it doesn't, I hope you encourage your principal

  • to add it to the class schedule with help from Code.org.

  • So for the next segment,

  • we've selected three students to pitch their app ideas.

  • - Great a little Shark Tank, I like it.

  • - It is like Shark Tank

  • but there's a twist.

  • They're gonna pitch you their ideas,

  • they're gonna get your feedback

  • but for the choice of which app we're gonna pick

  • we're gonna let the entire audience choose one winner.

  • - I like it, I like it a lot.

  • - I thought about this since our word of today is prototype,

  • what we're gonna do is we're gonna let the audience choose

  • the winning idea

  • and then we're gonna prototype it today live in code.

  • - Awesome. - And you know

  • how we're gonna prototype in live in code?

  • If you have a phone separate from the screen

  • you're watching on,

  • you'll be able to get it right on your phone

  • by the end of the hour.

  • - That's awesome.

  • - I'm not sure that's ever been done before,

  • it's our first time doing it.

  • Everything here, so --

  • - There's only one way to dive down, right?

  • - Please forgive us.

  • So we've now selected three students

  • to pitch their app ideas

  • to get their feedback from Mark.

  • We've had so many amazing students submissions, by the way,

  • since we announced this on Friday.

  • I made the time to look at all of them myself

  • and I was blown away.

  • The three we picked is what I thought

  • we could prototype in real time

  • because we wanna teach you how to make an app

  • and coding it live.

  • So now we want you to hear from students,

  • give them feedback from the idea.

  • I'm gonna introduce the students.

  • My daughter, Sofia, is gonna manage the one minute timer.

  • She's gonna say, ready, set, go.

  • And if people go over time, she's gonna make a sound.

  • Sofia, do you have a sound? - (laughs)

  • Sofia, do you wanna practice your sound first?

  • (laughs)

  • - That's the out of time sound.

  • And then Mark, after each pitch,

  • we wanted to ask probing questions.

  • - Sure. - Get feedback

  • and have them have a chance to talk with you.

  • So first, we have Yazmin and Anthea from Nevada,

  • and Yazmin is gonna present.

  • Yazmine, are you there with us?

  • - Yes, I'm here.

  • - Hi Yazmin.

  • - Hi.

  • Do I start now?

  • - [Hadi] Listen.

  • - Ready, set, go.

  • - Did you know that 57% of Generation Z doesn't know

  • what they have in their savings.

  • Quada Savings will fix that.

  • Our app is a financing app that teaches young adults

  • how to manage their expenses through a reward system.

  • Last summer, I had a difficult time managing my finances.

  • I didn't have the organizational skills needed

  • to create a balanced budget.

  • As I spoke to my peers, I realized the same problems as me.

  • As young adults

  • we're given many new financial responsibilities.

  • Many new financial responsibilities

  • but do not have the time or skills

  • to create balanced budgets.

  • This app divides your salary in different categories

  • that you choose such as housing and food

  • and each category you set a price range.

  • And if you stay within the price range, you earn points,

  • but if you exceed it, you lose points.

  • And once you accumulate a certain amount of points,

  • you can win prizes such as gift cards

  • and Quada merchandise.

  • This reward system is used

  • to make saving more fun for our users

  • and ultimately prepare the youth

  • for fully entering the consumer world.

  • Thank you.

  • - Great job. - Finished just before

  • the sound.

  • - I wish you can teach all the Shark Tank contestants

  • to go that fast and be that succinct.

  • It's a great idea.

  • Now there's a lot of competition out there.

  • There's others that deal with budgeting

  • but I think if you gear the app towards a younger audience,

  • like who's watching today,

  • then there's a real need for financial education.

  • Because to your point, most kids don't understand it

  • and even a lot of adults don't understand it.

  • So the question I would have is,

  • what kind of learning modules would you include

  • so that kids can learn more about finance and how it works?

  • - So in our app, it's going to automatically.

  • So it's gonna divide your salary into different categories

  • that we base it on.

  • So we're gonna have, I forgot the percent rule but

  • it might have been like the 30, 20, 10 rule.

  • I forgot. - But in terms

  • of distribution of where you put your money

  • and how you save your money.

  • And that's good

  • but I think the key to this is really working,

  • partnering with some folks

  • that can provide you a lot of educational materials.

  • Because it's hard to put together a budget

  • if you don't know what each category stands for.

  • It makes it more difficult.

  • And then second question is,

  • will you be able to retrieve specific category amounts

  • from someone's bank account

  • or are you're looking for them to enter it manually.

  • - So we're looking for them to

  • enter their own categories manually.

  • We'll sync up the purchases they make

  • with their Bing account.

  • So they have like a transportation category,

  • it's gonna show that purchase history with your gas

  • and your insurance bill and everything like that.

  • - [Mark] Got it.

  • - So let's switch to our next app

  • which is from Paige from Texas.

  • Paige, are you there with us?

  • Can we unmute Paige?

  • - Hello.

  • - [Mark] Hi Paige.

  • - Sofia, you wanna kick her off?

  • Are you ready?

  • - I'm ready whenever you are.

  • - Ready, set, go.

  • - Kids love repetitive games.

  • My app uses repetition by asking the user

  • to input one good thing about themselves per day.

  • The first time the user does this, a small tree is planted,

  • but each time they enter a compliment

  • to themselves, it grows.

  • As the user gets into the app,

  • they'll start to receive notifications

  • of positive impacts the tree has on the community

  • like being able to provide shade on a sunny day.

  • Not only does the repetition allow the kid to

  • have the habit or reform the habit of good self confidence,

  • but the symbolism of the tree shows that

  • our own self confidence positively impacts

  • the world around us.

  • This can be used by parents, kids, teachers

  • and counselors to show kids that

  • we can build our own self confidence

  • and have the tools we need to succeed.

  • - That's great.

  • I think it's a great idea.

  • How are you looking to code it?

  • What tools were you looking to use?

  • - So I'm in a computer science class right now

  • and we're in mobile app and gaming.

  • And definitely like Hadi said, using a web app

  • just so it was more accessible for people to get into it

  • but then also easier for me to code

  • just because web coding is a little bit easier than Swift.

  • - And how are you getting daily inspirations to people

  • to get them excited and remind them

  • to continue to use the app?

  • How I guess the better question is,

  • how are you going to incent them to continue to use it?

  • I like the reinforcement of the tree

  • but sometimes people need to be reminded?

  • - Sure, so I would probably, if I'm using a web app,

  • I would set up the email system

  • just so daily they would get an email

  • or they could opt out of that

  • if they feel they're comfortable.

  • But definitely an email system

  • and maybe adding things to the tree every once in a while,

  • like making it a cherry blossom on a certain day,

  • just so they're excited to come back.

  • - And will you allow other apps like Instagram?

  • - Absolutely.

  • - Cool.

  • I like it.

  • I like the idea.

  • - [Paige] Thank you.

  • - So the third student is Trisha from Pennsylvania.

  • So Trisha, we're gonna unmute you

  • so you got a chance to introduce yourself

  • and Sofia is gonna give you you're ready, set, go.

  • Are you are you there with us, Trisha?

  • - Hi, I am here.

  • - [Mark] Hi Trisha.

  • - Hi.

  • - Three, two, one, go.

  • - Hi, my name is Trisha

  • and I'm a junior at the Episcopal Academy

  • right outside of Philadelphia.

  • It is my passion to save the Mother Earth

  • that inspired me to start a Save The Planet club

  • in my sophomore year and it had an overwhelming response.

  • However, I always had one issue.

  • When approached by one of my peers who asked

  • how they can help in this global issue,

  • I was only able to give responses

  • that benefited my local community

  • due to a lack of centralized global data.

  • The homepage of my app list sustainability issues

  • such as ocean pollution, ozone depletion and deforestation.

  • The user can click one of these issues

  • and will be taken to a page that specifies

  • the broader concept.

  • For instance, ocean pollution,

  • the next step is plastic or wildlife.

  • As interested the user can select any one of these options,

  • each with their own facts and figures page,

  • and resources to directly aid each issue.

  • This format and many others

  • can be provided for a variety of global problems,

  • including COVID-19,

  • and provides a succinct platform to make a change.

  • - Well done.

  • So effectively, you wanna be a homepage

  • for all things related to sustainability for planet.

  • - Essentially, there are different options, hopefully,

  • so you can pick what you're interested in and aid in that.

  • - And how will you source all the data that you'll present?

  • - So a lot of these come from reputable sources.

  • So UN has a bunch of great sources, as does NASA

  • and I think if we collect data from those sites

  • that are incredibly reliable,

  • then the information will come together very quickly.

  • - And how will you make that connection?

  • How do you think you'll be able to automate it?

  • Are there API's to your sources, do you know yet?

  • - I don't. - Okay.

  • - However, I'm hoping that it will become clear once

  • that's all put together in one place.

  • - Yeah, because I think it could be really cool if

  • the data updates in real time

  • so it gives people a reason to go back all the time

  • because that's the hard part,

  • sustaining their interest in the app.

  • But it's a cool idea, congratulations.

  • - Thank you so much.

  • - I wanna thank all three of the panelists for your ideas

  • and I want to say also, again, that

  • like I said earlier,

  • we had so many amazing submissions from students,

  • it was so hard to pick the three that we picked

  • and part of why we picked them

  • is so that we could rapid prototype them.

  • So now we wanna let the audience choose

  • between these three app ideas

  • and to see which one we're gonna rapid prototype.

  • We're gonna put a poll on the screen.

  • So everybody should get a chance to vote.

  • For different screens,

  • that poll might take a little longer to take.

  • And for those who are watching the Facebook Live livestream,

  • it might be a little bit.

  • Well you won't see the poll

  • but we'll show you the results afterwards.

  • So the votes are coming in.

  • I can see them but we haven't shared them yet.

  • I think I see a winner already but it's a tight contest.

  • I don't wanna share the results yet until

  • we have more votes in so Paige.

  • - You won't let me vote.

  • You guys would let me vote, I'm mad (laughs).

  • - We didn't wanna put too much pressure on the students.

  • - That's okay.

  • - I think we're ready to share the results of the vote.

  • Do you all see them?

  • Can we share these out to the screen?

  • It was a tight contest.

  • - Wow!

  • That's really tight.

  • - Thank you so much to the other contestants.

  • And Paige, if you could stick around

  • because we're gonna want your help

  • for actually designing your app.

  • Obviously, everybody can stay online

  • but we're gonna mute folks.

  • Before we switch to the live coding and Mark,

  • since you're short on time,

  • we were gonna do the coding parts after you hang up with us

  • but we have a little bit of time

  • for some additional Q & A for Mark.

  • So students from home if you remember,

  • you can submit your question using the Q & A box.

  • We're gonna take two questions quickly

  • because Mark is short on time.

  • - But congratulations to Paige, it was a great app.

  • Paige, you were my favorite.

  • I kinda of liked the it turned out.

  • - So here's one from Mark, he says.

  • A question for Mark, a students says,

  • "I'm eight and I invest with my grandparents.

  • - (laughs).

  • - "Do you have any advice for how to wait or invest now?

  • "How do I learn from time?"

  • That was a great question.

  • - That is a great question.

  • First, I say watch Shark Tank on Friday nights on ABC,

  • because you'll learn about

  • all different kinds of businesses,

  • because the key to investing in the stock market

  • is understanding the company that you're going to invest in.

  • There's no real easy way,

  • that's why people make and lose money

  • but at eight years old,

  • I would tell you, look at the companies

  • that you'd like to use.

  • Maybe

  • if you're a gamer, what companies are into gaming?

  • But find the companies that you like

  • and if you think they're really popular,

  • check to see if there's stocks for them,

  • and dip your toe in.

  • And then in 30 years, 40 years, you'll be killing it.

  • - Another question's a student asks,

  • if a student has a great app idea

  • and has a paper or coded prototype,

  • where do they go to get it to the next level.

  • - You go right here and

  • you learn how to code.

  • You're old enough to learn how to code and to prototype it,

  • and to put together

  • at least a minimum viable product

  • is what they call it, an MVP,

  • so that you can see if it works.

  • And you know what?

  • I'm sure you have friends that are really into coding too.

  • It's really fun to work with your friends

  • and maybe even other family to put together apps.

  • It's a great goal to set together, especially now.

  • So you know what?

  • I have total confidence you can figure it out.

  • - In the next two months,

  • so many people are gonna be staying and studying at home,

  • it's a great opportunity to develop

  • a new skill. - Best time.

  • - Well thank you so much for that for these.

  • I'm gonna actually suggest.

  • Actually, there's one question that just came in.

  • Somebody said, how do you use computer science

  • to help your basketball team?

  • - We use it all the time.

  • We call it analytics

  • because we wanna be able to monitor during the game

  • is a player getting tired.

  • We monitor heart rates, we monitor speed,

  • we monitor our a lot of different variables

  • that we put into algorithms that tell us,

  • this is the path they're on,

  • they're gonna be tired too quickly.

  • We track how they work out, we track their performance,

  • how they shoot.

  • Every piece of data we try to use

  • to get a competitive advantage

  • to help our Mavericks win a game.

  • And I tell you this if you wanna work in sports,

  • learn to code, learn statistics

  • and learn artificial intelligence.

  • You may think because you're just a middle school

  • or younger, you may be too young, you're not.

  • Artificial intelligence is gonna be so impactful

  • that by learning your programming languages, any of them,

  • you'll be prepared to really be ahead of the curve

  • when you get to high school or college.

  • - Thank you so much, Mark. - Thank you Hadi.

  • - Before we jump into the rapid app design

  • and Mark you're welcome to stick around to watch.

  • It'll take about 15 minutes

  • but I don't think you have the time because --

  • - I gotta get rolling but I appreciate it.

  • Thanks Sofia, you were great.

  • And congratulations to Paige.

  • - Well thank you

  • and I'd like to invite everybody to wave goodbye to Mark,

  • as we say, for joining us.

  • Can you set the applause?

  • - Thanks guys, keep it up.

  • - Good bye Mark.

  • Thank you. - Thank Hadi.

  • - So now we're gonna switch

  • and introduce a lady named Hannah Walden.

  • Hannah is one of the top computer science teachers

  • in the entire country

  • and she's one of the co authors of the CS Principles course

  • that I was talking about earlier.

  • So Hannah is gonna be the one

  • to actually rapid prototype Paige's idea and app.

  • And also, Hannah has had a little bit of a head start

  • for the last five minutes of Q & A just because

  • we're short on time.

  • So she, hopefully, got started building some of it

  • but if we could unmute Hannah and introduce her.

  • - Hello everyone, hi Paige.

  • Congrats on your winning idea.

  • I'm super excited

  • to help you turn your mental wellness app

  • into this prototype now.

  • Paige are you there?

  • While we're getting Paige unmuted,

  • I'm gonna explain a little bit what's on your screen here.

  • So this is App Lab and we're gonna be working in App Lab.

  • App lab has a couple different modes.

  • I have design mode and code mode

  • and in design mode, I can set up just how I want my screen

  • to look by dragging on different elements.

  • So I can put a button on, I could put an image in,

  • I could put a drop down on

  • that the user could select like this, oops.

  • Let's go back to the screen that I'm on.

  • There we go.

  • And many different things that I can do.

  • And I can drag and drop these around,

  • I can change what's on these different buttons.

  • I can say hello and have the user click on this button.

  • So I can set all of this up in design mode.

  • And then in a little bit, we're gonna hop into code mode

  • and here's where I'm actually gonna code the app.

  • Paige, are you there?

  • - Hello.

  • - Hi Paige.

  • Let's get started.

  • So as Hadi said, while we were doing Q & A

  • I got a bit of a head start.

  • So I have just the basics of the app laid out here

  • but I wanna get some ideas from you Paige.

  • So first off, what would you like for the title of your app?

  • - Oh, gosh, that's probably one of the first things

  • you should think of and I didn't.

  • - (laughs)

  • - Maybe just.

  • - No pressure.

  • - Is this is something we could ask

  • the people watching for ideas?

  • - Sure, why don't people type in the chat

  • what the title should be.

  • - Sure.

  • And Hadi, can you read from the chat for me?

  • - The giving tree.

  • - Giving tree, perfect. - Thank you, I like that.

  • - Thank you (mumbles). - Love it.

  • So that's a great start.

  • And here's the basic layout of the home screen.

  • And again, Paige, this is all set

  • so that we can change things around, we can move things.

  • I've got an image here that starts, it's just a little seed

  • and then as the user interacts, it will grow into a tree.

  • I've got a place down here.

  • This is a user input box where users can type in

  • their positive comments

  • but what I'm missing here is a button

  • for users to click when they've added a comment.

  • So I'm gonna drag a button over here, like that.

  • And let's actually,

  • I'm gonna call this button my add button.

  • And instead of having the word button on it,

  • let's actually pick an icon instead.

  • So I'm gonna look and see what I have here.

  • Paige, what do you like?

  • I've got plus with the square, with the circle,

  • what looks good to you?

  • - I like the the plus square.

  • - Plus square, perfect.

  • We can also change the color of the icon.

  • Do you have a preference there?

  • - Maybe green

  • - Perfect.

  • Let's go with a green that shows up.

  • Kind of a bright green.

  • Perfect.

  • So now, when the user puts something in,

  • they're gonna click on this plus button, this add button,

  • and we will store their information

  • and that will impact the tree that we see here.

  • I also put together one other screen.

  • This is the journal screen.

  • So what I was thinking Paige was

  • if I'm on the home screen

  • and I add in different comments that I've made about myself,

  • and I wanna save them.

  • Now I can go to my journal by clicking

  • the growth journal button

  • and now I can see those things listed out here.

  • And I can go back to my home here.

  • Before I do that,

  • I have the journal right here

  • and it doesn't have a background color, it's transparent.

  • So I was wondering,

  • Paige do you have a color that you'd prefer

  • for our journal background?

  • - I like the light blue you chose.

  • - Let's see if I can get back to something,

  • do you mean this light blue right here?

  • - Right.

  • - Perfect.

  • So actually, I can copy that hex code, exactly.

  • Go back over here.

  • Go to my background color and now it matches perfectly.

  • So

  • we've got the basic layout of our app.

  • We've got the title, we've got the image,

  • we've got a place for the user to add their comment

  • and to add in the comment, and then we've got the journal.

  • So let's go code this app.

  • We're gonna work in block mode today.

  • And first, we're going to pick the variables

  • that we're gonna store information in.

  • So I'm gonna drag a variable block out here

  • and the first thing that I'm gonna store is the comment.

  • The next thing that I wanna store,

  • I know I'm gonna wanna store how many comments

  • the you user has made.

  • So I'm gonna say comments count.

  • And right now, how many comments do I have Paige.

  • - Zero. - Zero (chuckles).

  • So let's set that to zero.

  • I have no comments right now.

  • So I'm just gonna put an empty string up here,

  • it's completely blank.

  • Now, here's what's gonna happen.

  • When I click this button,

  • I'm gonna get the information from here.

  • It's gonna store in this variable up here,

  • the comment variable,

  • and then it's going to display the correct tree version.

  • And to do that, I'm going to grab an on event block,

  • this yellow on event block, I'm gonna drag it over.

  • And I'm going to choose the ID for this button,

  • which is the add button.

  • So when the add button is clicked,

  • I'm going to get the comment

  • and I'm gonna update my variable.

  • So I'm gonna put the name of the variable here, comment,

  • and now I'm gonna do some fancy stuff here.

  • I am going to and I'm actually gonna close down my toolbox

  • so you can see all this.

  • First, I'm going to get whatever comments

  • were previously stored.

  • At the beginning there's nothing, it's just blank

  • but as we add more and more comments,

  • we wanna make sure that we don't forget those old comments.

  • So I'm gonna get whatever comment was previously stored

  • and I'm going to add in a blank line between each comment,

  • and I do that by doing a backslash n.

  • And then I'm going to get the text from this area.

  • So I'm gonna say get text.

  • And if I click out of here now,

  • it will automagically turn those into blocks.

  • And now I can pick the ID for this area,

  • which is comment input.

  • There we go.

  • So that's now stored in comment

  • and each time we get a new comment,

  • we need to increase our comment count.

  • So I'm gonna do that here.

  • Comments count equals comments count, plus one.

  • Now here's the fun part.

  • Here's where we get to control our tree.

  • Now I wanna show you, Paige,

  • I go here into manage assets,

  • you can see that I have a couple trees already uploaded here

  • to show how the tree can grow over time.

  • So we're gonna throw in an if statement here.

  • I'm gonna choose this one.

  • And basically we're gonna say

  • if comments count is over a certain number,

  • we're gonna show a version of the tree.

  • So the first one I wanna set is the one

  • that will show the biggest tree.

  • So Paige, what's the biggest number you think

  • for the number of comments that should be

  • for the final version of the tree?

  • - Normally, I'd say probably like,

  • since it takes a couple months to form a habit

  • but we don't have that time.

  • So maybe seven.

  • - Perfect and that is exactly what I would say too.

  • So normally this might be a couple thousand maybe

  • or a a couple hundred

  • but since we're prototyping,

  • I don't wanna type in 1000 comments

  • to make sure this is working.

  • So we're just gonna put in seven

  • and let's actually put in a couple more.

  • So I'm just gonna go straight down

  • and say comments count

  • is over six,

  • comments count is over five.

  • Let's do comments count

  • is over four and one more,

  • comments count is over three

  • and now we're going to put in our picture images.

  • So if I go into the UI controls drawer

  • and I'm going to choose set image URL.

  • Now drag this over and again,

  • I'm gonna close down my toolbox so you can see this better.

  • And the image here is called tree picture.

  • So I'm gonna select tree picture.

  • And again, the most comments

  • that should get the biggest tree.

  • And then the next one, I'm gonna actually copy this

  • with Command C

  • and then Command V, I can paste this down here

  • to give me a little bit of a head start here.

  • So the next image,

  • we're gonna go with tree five,

  • and then tree four,

  • and then tree three,

  • and tree two

  • and finally, tree one, which is just a seed.

  • And there we go.

  • The final thing that we need to do here is

  • we need to make sure that all of these comments

  • are going to get sent over to our journal.

  • So I'm going to pick the set text block,

  • which is right here.

  • And if I go over to my journal screen,

  • I can see the this is called journal output.

  • So I'm gonna look for that.

  • Here it is journal output.

  • And I'm going to use that variable

  • where I stored all of my comments

  • and it will output it there.

  • So let's give this a try.

  • Paige, I need a compliment.

  • - I really like your glasses.

  • - There we go and I hit the plus button.

  • Oh, no.

  • Nothing happened when I clicked the plus button, any ideas?

  • Oh, now it is happening.

  • So do you know what happened their Paige,

  • why the tree didn't grow

  • the first time I clicked the plus button?

  • - I'm looking at your code.

  • Would it be that you didn't have an else for one compliment

  • you only had it for.

  • Oh, wait.

  • - Yeah, that's exactly it - Yeah.

  • - That's exactly it.

  • So I had tree one set all the way

  • until I have four comments in

  • and once I get four comments in,

  • then it starts showing an image.

  • - Okay. - So lets

  • actually bump that down a little bit

  • so we can test this out quickly.

  • So I'm gonna run this,

  • I'm gonna say,

  • I read a book today

  • and we hit plus.

  • And I could say, I

  • went

  • to the kitchen and ate a really great sandwich.

  • And plus and notice it's starting to grow.

  • And then the more comments that I added in,

  • it would continue to grow, and grow, and grow.

  • And now if I click on the growth journal button,

  • it would take me to my journal

  • but we haven't programmed that.

  • So let's do that really quick.

  • So I'm gonna grab my on event again.

  • I'm gonna go here and stick it on the bottom

  • and scroll down a little bit.

  • And now I'm gonna say

  • when I click on my growth journal button.

  • If my screen does not lock up.

  • - I'm not sure.

  • - I think it's locking up a little bit on me.

  • Lemme actually see if I can go to text

  • and see if I can fix it that way.

  • - I don't know if that's --

  • - Yep, that works.

  • So my growth journal button,

  • if we remember that's called journal button.

  • So I'm gonna go back here

  • and I'm gonna type journal button.

  • And by the way, what I did just there

  • is one of the fun parts of App Lab.

  • At any point I can switch back and forth

  • between blocks and text.

  • So when I click on the journal button,

  • I wanna switch my screen.

  • So I'm gonna actually go set screen

  • to the journal screen

  • and also, I'm going to make sure that I have it set

  • so that when I click on the home button,

  • if it's on the journal screen page.

  • I'm gonna go to my home screen.

  • I think we're ready to try this out, here we go.

  • We're gonna click run and hope for the best.

  • So my first compliment or my first comment might be again,

  • I read a book today.

  • I ate an apple.

  • I feel confident.

  • I can program an app.

  • I can be a computer scientist.

  • And my tree is growing every time I click on that,

  • let's go to my growth journal.

  • And now I can see that it is not displaying there.

  • Maybe it is but the text is actually blue (chuckles).

  • So we need to make sure that in our design

  • we account for that so that our text if you look here,

  • text color is the same as our background color.

  • The text was there, we just couldn't see it.

  • So one last quick test here.

  • We're just gonna say test,

  • test, test, test, test, test, growth journal

  • and there it is.

  • And our journal is populated

  • and we can go back to our home screen.

  • Now, here's the really great thing.

  • Actually, I'm going to change one quick thing with our text.

  • If you notice it was our code, every time I typed in here,

  • I had to delete my previous thing that I put in here

  • before I could put something else.

  • I can make that a lot easier

  • with code if I just put in a new set text

  • down here

  • and I'm going to say set the text for

  • my comment input.

  • I'm gonna set it to a blank string.

  • So what this means is when I put a new comment in,

  • it's gonna reset it to be blank.

  • So I'm gonna say test and it's blank.

  • Test and it's blank.

  • I go to my growth screen again,

  • my growth journal and it's ready.

  • This is really great, Paige.

  • I really hope that you can take something like this

  • and make it a full app.

  • Again, this is just a prototype.

  • But we were able to do this in 10 minutes,

  • which is incredible.

  • And for all of you at home, here's the really fun part.

  • I am now going to share this app

  • and I can click on send to phone.

  • Now you have an option here to send to a US phone number.

  • I am not going to be able to type in thousands

  • of phone numbers right now that would take way too long.

  • So what I'm gonna do is show you how to use this QR code.

  • If you have a smartphone nearby,

  • you can pick up your smartphone and turn on the camera,

  • and hold it up to your screen.

  • So I'm gonna do this right here

  • and once I hold it up to the screen,

  • I get a pop up you might get something similar

  • that says open in Safari.

  • So I'm going to open it and let it load for a minute.

  • And now,

  • I have Paige's app on my phone

  • and I hope you do too.

  • Hadi do you do you have it on your phone?

  • - Show the app on your phone.

  • On Sofia's kitty phone.

  • - That is so great, I love it.

  • And Paige this is such a great idea.

  • It was really fun to build this with you.

  • I hope that you continue to go with this idea

  • and make it even better.

  • And for all of you who are watching,

  • we are going to share this app out

  • and you can take it, you can remix it,

  • you can make it your own, you can make something similar.

  • Please share it back with us using the hashtag Code Break,

  • we really can't wait to see what you make.

  • And again, congratulations Paige.

  • Back to you Hadi.

  • - And everybody, I hope you've had a chance

  • to scan that QR code to get Paige's app.

  • I wanna say thank you everybody,

  • we're basically about to get done.

  • I wanted to talk about assignments and homework

  • or challenges that you can do

  • between now and next week.

  • We're gonna send you basically,

  • assignments or basically these challenges

  • to either make it interactive card for beginners,

  • or to make an app, or to do both if you wanna try.

  • If you aren't signed up via email, go to www.code.org/break,

  • and enter your email.

  • And then share out what you create using hashtag code break.

  • Also, because we're learning prototyping,

  • what you're gonna see

  • when you get the email is some printouts

  • that you can print first.

  • For your interactive card we want you to prototype

  • the card first

  • and write the behaviors before you jump into the code.

  • Or if you're making an app design printouts

  • to actually make the flow of what screen goes to what.

  • So you have different screens

  • that you can draw into your app

  • and draw out with your handwriting what you wanna create.

  • Like we said, today's word of the day is prototype.

  • And it's really important for any software engineer

  • to take notes in advance

  • and plan their code before they jump into it.

  • So parents, the weekly challenge email

  • is also gonna include activities

  • that students can do on a mobile phone

  • and a really fun unplugged activity

  • that teaches computer science without any screen time.

  • So if you haven't already signed up,

  • get on the mailing list by joining www.code.org/break.

  • Lastly, if you have any feedback on how we can improve,

  • please fill out our survey that's gonna be emailed to you

  • if you signed up.

  • And if you enjoyed the show,

  • please spread the word.

  • If each of you invites to other parents

  • and each of them invites to other families,

  • and each of them invites to other families

  • we'll soon have 100,000 families here.

  • And all of us can learn computer science together.

  • I wanna switch to the gallery view

  • and unmute everybody as we say goodbye.

  • - Bye. - Bye.

  • - Bye. - Bye.

  • - Bye.

  • - Bye. - Thank you.

  • - Take your code break, we'll see you next week.

- Hi everybody, welcome to code break.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it