Subtitles section Play video Print subtitles - 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.
A2 US paige app sofia screen prototype alien Code Break 2.0: Prototypes with Lyndsey Scott and Mark Cuban 4 0 Caurora posted on 2020/06/07 More Share Save Report Video vocabulary