[ Silence ]
>> Alright.
This is CS50.
Welcome to week 10!
We've got some great fun in stored for you today.
It is now in fact our final project season,
your pre-proposals were presumably sent
over to your TF a couple of hours ago.
If not, do make sure you are conversing
with your TFs about them.
But know that if you're looking for something new to try,
something new to learn or you've always wondered how iPhone apps
or Android apps or Facebook apps or Facebook plugins and all
of that works realizes that there's a good deal of seminars
that have happened this past Saturday.
The videos are starting to go up.
And they'll also be happening this coming weekend so check
out CS50.net/seminars if you'd like to bootstrap yourself
with something new entirely.
And that will be one of the themes
of today teaching yourself some new language
or topic altogether.
Also, to help seed you with some ideas
if you're not quite sure what you wanna do and you really--
you didn't know what even to pre-propose.
We've been gathering ideas over the past year
that now live at projects.cs50.net.
So you may recall if you are at Harvard Thinks Big I sort
of challenged that audience one night to submit their ideas.
And we had to go through and filter some of them
out because they simply weren't solvable by CS50,
cake in a blender, you may recall it was one of them.
But what you now see at projects.cs50.net is already 50
or more ideas that are right for the taking.
In fact we've had some faculties, some other students,
students groups on campus contribute some of these ideas.
So particularly if you would enjoy making something
that real people then go on to use friends, student groups,
departments or the like do sift
through the various posts that are here.
And in fact, if you yourself have some ideas do feel free
to click the very large link here post a project
and you'll be able to sift through some of the ideas
that are absolutely within the grasp now
of CS50 students to solve.
So that's projects.cs50.net.
So also coming up this Friday is the deadline for you
and your section mates to find all
of these computer scientists on campus.
So you recall from P set 5 you have recovered all
of these JPEGs and you now need
to discover these people on campus.
No one has submitted all of the photographs just
yet so realize the-- there's still plenty of time.
And we will do something a little special for the section
that ends up submitting the most photographs of themselves
with these various computer scientists.
You need not find the shark, just Lee here.
You need not to find the camel depicted here.
This fellow will be a little harder
than most to actually find.
But bonus points if you can actually score that photo.
This actually is how Jeremy studies.
So you might find him in his dorm room like this.
Some of our TFs of course have part time gigs else
where so you might find Ben, I think at Avalon or the like.
Phil here also likes to spend his time outdoors.
This one I actually never understood [laughter] what was
going on here.
And of course, we had a couple of masked staff depicted here
and here and a less effective mask here.
And you may recognize this face now from the article you read
from the recent P set namely Brian Kernighan my mentor who's
actually spending time with us this year.
And then a couple of the staff
of course are wearing their own CS50 wardrobe
which is now at store.cs50.net.
This isn't so much of our version of a bake sale
as it really is just an opportunity to wear CS50.
And tell your friends that, damn it, you took
and conquered CS50 half their term
and so we have Yuki depicted here in 2008's model.
Jan Sue [phonetic] pictured here.
And then also we have one
of the teaching fellow's daughters depicted here
with her lovable CS50 bear.
In fact, I asked if the TF could bring the bear
but unfortunately, his daughter would not let him.
I could not-- he writes me this morning in an e-mail.
Well, I could not separate my daughter from her bear
and I cannot bring to Sanders because she has to go to school
so here's a picture of the bear.
A few information points Julia, my daughter was born in Paris.
She's attending Harvard University,
the Child Care Center.
She had an Italian boyfriend
from Rome who's named is Alessandro
and he is also attending Harvard University
so that there is the CS50 bear.
But it's one thing to show you these things in picture form.
It's another thing to actually have humans parade here on stage
so I give you a little show from this year's TFs and CAs.
[ Background Music ]
>> So we all, by this point we all live and breathe CS50.
Now, it's time to start wearing CS50.
Ladies and gentlemen the 2010 CS50 collection!
[ Laughter ]
[ Applause ]
[ Background Music ]
>> Is this thing on?
Jan Sue, so hot right now.
Jan Sue. So, hi guys, I'm Alex and I'm a TF.
And I'm the president of the association of really, really,
ridiculously good looking male and not male CS50 TFs and CAs.
[Laughter] And if you want to be as cool
as us you should dress like us.
Guys let show them what we're wearing.
[ Laughter ]
[ Applause ]
>> So, we're pretty ridiculously good looking
and so we want you guys to be too.
So you guys should buy these shirts and pants and boxers,
Scott can show you those though [laughter] not on stage.
And yeah that's it.
You should buy our stuff.
[ Cheering ]
[ Appluase ]
[ Music ]
>> Alright, a very nice segway
from the faces pictured here is new faces for 2011.
So realize as the semester starts to wind down we start
to wind up the recruiting process for fall 2011.
As you may have gathered
from this year there're two primary roles
that we fill each year in CS50.
One is that of teaching fellow.
These are TFs in a typical sense leading sections.
We're working with students regarding problem sets,
holding office hours, fielding question and the like.
And then we also have the role of course assistant
which is a volunteer role of just 2 hours per week
where by the course assistance--
this is an opportunity to keep one foot in the course
and remain involved in the course in all CS50 goings on
and work with students, fall 2011 students, one on one,
you know, during office hour.
So realize if you'd like to maintain
that personal connection to the course and realize too
that if you'd like to learn this material all the better.
Frankly, there's no better way than actually teaching it one
on one with other students.
So realize that on the course's home page before long there will
be a link with which you can apply to be a TF or CA
and then we will begin this winter the interview process.
So we would love for as many of you as possible
to join next year's team.
So, we left off last time with the look at JavaScript
and various ways in which the wib--
web is getting much sexier these days.
And that's largely thanks to this technology called AJAX,
Asynchronous JavaScript and XML.
But that acronym really doesn't apply
so much anymore you can use various other technologies,
one of them called JSON,
JavaScript Object Notation instead of XML.
And we'll actually look at this JSON notation today.
But the picture we painted last week essentially boiled
down to this-- this graphic here.
If you have a website
like Facebook whose interface clearly updates itself
on a schedule, every few seconds a you post appears
in your news feed or every few seconds something interesting
happens on the courses home-- on the Facebook's home page.
Well, that's because the whole page is obviously not reloading.
You're not seeing a white screen for a moment
and then the whole page refreshes instead just small
subsets of this page are reloading.
And that's thanks
to a technology called AJAX whereby using JavaScript you can
write code that users-- Facebook users then download
that gets executed in their browser then on some schedule,
every few seconds or minutes re-requests data from the server
or gets that data back whether imaginary or text
and then it can be embedded into the web page's DOM
or Document Object Model.
And the special-- the special feature of modern browsers
that enable this is that thing called XMLHTTPRequest.
And so this picture here just paints the story that happens.
The browser there in step 1
in the user interface makes a JavaScript call,
using in step 2 this XMLHTTPRequest feature.
That feature enables a browser to make step 3, an HTTP request
to some server, www.facebook.com or CS50.net
or whatever the site may be.
In step 4, the web server actually responds
and what's neat is that the web server can respond
with just text, with something called XML which frankly is
like HTML but you make up your own tags
and so you can send back a database like information.
And then this thing called JSON notation,
JavaScript Object Notation which will again see today.
Recall to contextualize this last week.
We had that-- those very simple examples using Yahoo Finance
whereby we query the server without reloading the whole page
and then embedded the textual response,
the current stock price
of whatever stock ticker we entered into the pages DOM.
And that was a very small instance of AJAX but it's
with that basic building block that all of the magic happens
on Gmail and Facebook and the like these days.
Because in step 5 once
that response comes back whether an XML
or some other format your same JavaScript code has an event
handler, a function whose purpose in life is to receive
that response and then do something
with it namely updating the webpage.
So, all of this works because the internet of course,
underlies the World Wide Web.
>> The web is a service on the internet.
The internet is the physical infrastructure underlying
that service.
And just to recap some basic jargon before we take a more
visual tour of these topics, recall this few fundamentals,
so recall that we discussed two weeks ago IP, Internet Protocol.
And you almost always hear this thing in the context
of an IP address which is a numeric address
that uniquely identifies your computer.
We talked briefly about TCP this is a protocol that allows data
to get from point A to B reliably.
It's this software, this protocol TCP that ensures
that if something bad happens between points A and B,
a router goes down, packets get lost,
data gets corrupted just stuff happens well TCP insures
that it will resend that same data again and again
until your e-mail or your Instant Message
or your web page request actually makes it
through to point B. So that's TCP.
This is in contrast to another protocol called UDP.
And UDP is really just a best effort
and we'll see it mentioned in just a moment but UDP is good
for streaming protocols.
If you're watching like some baseball game live via web
browser being streamed from somewhere well,
you probably don't want the thing to buffer and buffer
if there's congestion on the internet
because then you the viewer are gonna fall behind.
And the baseball game is no longer gonna be real time
so sometimes there are contexts like that
where you don't really care if the data is recent resent,
you'd rather the program just forge ahead.
And I missed that play but that's fine,
I wanna stay in real time.
So that's something called UDP.
And then lastly, we talked about routers.
Routers are big-- are computers whose purpose in life is
to route data, data in this way, data out that way.
And then we talked about context of your homes.
You might have a switch.
A switch is a fairly dumb device that just has lots
of ethernet ports that allows you
to connect multiple computers together.
What you are about to see also I mentioned something called a
router switch, which really isn't standard terminology,
when they say router switch they mean switch, just the device
that connects all of these computers together.
So we saw the teaser trailer for this a couple of weeks ago.
The actual film is about 10 minutes long
but I think it does a far better job of painting a picture
of how the internet works
if with some silly-- silly names in it.
So I give you now for the next few minutes what's called
Warriors of the Net.
This is indeed how the internet works.
[ Music ]
[ Noise ]
>> For the first time in history people
and machinery are working together realizing a dream,
a uniting force that knows no geographical boundaries
without regard to race, greed, or color,
a new era where communication truly brings people together.
This is the dawn of the net.
[ Music ]
>> Wanna know how it works?
Click here to begin your journey into the Net.
[ Background Music ]
>> Now, exactly what happened when you click on that link?
You started a flow of information.
This information travels down into your own personal mail room
where Mr. IP packages it, labels it and sends it on its way.
Each packet is limited in its size.
The mail room must decide how to divide the information
and how to package it.
Now the package needs a label containing important information
such as sender's address, receiver's address
and the type of packet it is.
[ Music ]
[ Noise ]
[ Background Music ]
>> Because this particular packet is going
out on to the internet.
It also gets an address for the proxy server
which has a special function as we'll see later.
The packet is now launched on to your Local Area Network or LAN.
This network is used to connect all the local computers,
routers, printers et cetera for information exchange
within the physical walls of the buildings.
The LANs are pretty uncontrolled placed
and unfortunately accidents can happen.
[ Music ]
[ Noise ]
[ Background Music ]
>> The highway of the LAN is packed
with all types of information.
These are IP packets, Novel packets,
Appletalk packets they're going against traffic as usual.
The local router reads the address
and if necessary lifts the packet onto another network.
Ah, the router a symbol of control
in a seemingly disorganized world.
>> Oops, sorry about that--
[ Inaudible Remark ]
>> There he is systematic, uncaring, methodical,
conservative and sometimes not quite up to speed
but at least he is exact for the most part.
[ Inaudible Remark ]
>> As the packets leave the router they make their way
into the corporate internet and head for the router switch.
[Noise] A bit more efficient than the router,
the router switch plays fast and loose
with IP packets deadly routing them along the way,
a digital pinball wizard if you will.
>> Here we go, here we go.
Here's comes another one.
And there's another one.
Ooh I think one-- here it goes whoop!
Around the back-- hey, in there, in there,
in there over the left, over the right, over the left,
over the right, you got it.
Here it goes.
Right down and he shoot, he scores!
It's good.
Hey [inaudible] you watch out.
Here comes another one.
Oh, here we go, we're having fun.
[ Background Music ]
>> As packets arrive at their destination they're picked
up by the network interface,
ready to be sent to the next level.
In this case the proxy.
The proxy is used by many companies as sort
of the middle man in order to lessen the load
on their internet connection and for security reasons as well.
As you can see, the packets are all
of various sizes depending upon their content.
[ Music ]
[ Background Music ]
>> The proxy opens the packet and looks
for the web address or URL.
Depending upon whether the address is acceptable,
the packet is sent on to the internet.
[ Music ]
>> There are, however, some addresses which do not meet
with the approval of the proxy, that is to say, corporate
or management guidelines.
These are summerly dealt with.
We'll have none of that.
For those who make it, it's on the road again.
[ Music ]
[ Background Music ]
>> Next stop, the Firewall.
The corporate Firewall serves two purposes.
It prevents some rather nasty things from the internet
from coming into the intranet
and it can also prevent sensitive corporate information
from being sent out onto the internet.
Once through the Firewall, a router picks up the packet
and places it onto a much narrower road
or bandwidth as we say.
Obviously, the road is not broad enough to take them all.
Now you might wonder what happens to all those packets
which don't make it along the way.
Well, when Mr. IP doesn't receive an acknowledgment
that a packet has been received
in due time he simply sends a replacement packet.
We are now ready to enter the world of the internet,
a spider web of interconnected networks
which span our entire globe.
Here, router and switches establish links
between networks.
Now, the net is an entirely different environment
that you'll find within the protected walls of your LAN.
Out here it's a wild west, plenty of space,
plenty of opportunities, plenty of things
to explore and places to go.
>> Thanks to very little control and regulation,
new ideas find fertile soil to push the envelope
of their possibilities.
But because of this freedom certain dangers also lurk.
You'll never know when you'll meet the dreaded pain of death.
Special version of a normal request pain
which some idiot thought up to mess up unsuspecting hoses.
The path our packets take may be via satellite, telephone lines,
wireless or even transoceanic cable.
They don't always take the fastest
or shortest routes possible but they will get there, eventually.
Maybe that's why it's sometimes called the World Wide Wait.
But when everything is working smoothly,
you can circumvent the globe 5 times
over at the drop of a hat, literally.
And offer the cost of a local call or less.
Near the end of our destination, we'll find another Firewall.
Depending upon your perspective as a data packet,
the Firewall could be a [inaudible] security
or a dreaded adversary.
It all depends on which side you're on
and what your intentions are.
The Firewall is designed to let in only those packets
that meet its criteria.
This Firewall is operating on ports 80 and 25.
All attempts to enter through other ports are closed
for business.
[ Music ]
>> Port 25 is used for mail packets while port 80 is the
entrance for packets from the internet to the web server.
Inside the Firewall, packets are screened more thoroughly.
Some packets make it easily
through customs while others look just a bit dubious.
Now, the Firewall officer is not easily fooled such as
when this Ping of death packet tries to disguise itself
as a normal Ping packet.
>> It's okay, move on its okay.
No problem.
Have a nice day.
Be out of here, bye.
>> For those packets lucky enough to make it this far,
the journey is almost over.
It's just a line up on the interface to be taken
up into the web server.
Nowadays a web server can run on many things from a main frame
to a webcam, to the computer on your desk.
Why not your refrigerator?
With the proper set up you can find out if you have the makings
for chicken cacciatore or if you have to go shopping.
Remember, this is the dawn of the net,
almost anything is possible.
One by one the packets are received, opened and unpacked.
[Noise] The information they contain, that is your request
for information, is sent on to the web server application.
[Noise] The packet itself is recycled, ready to be used again
and filled with your requested information.
[ Music ]
[ Noise ]
[ Background Music ]
>> Address and send out on its way back to you.
Back pass the Firewall, routers and on through to the internet.
Back through your corporate Firewall
and onto your interface.
Ready to supply your web browser
with the information you requested that is this film.
[ Music ]
[ Background Music ]
>> Pleased with their efforts and trusting in a better world.
Our trustee data packets ride off blissfully into the sunset
of another day knowing fully they have served their
masters well.
Now isn't that a happy ending?
[ Music ]
>> Okay, so that clearly took some creative liberties there.
But that actually paints a pretty good picture
of what's been happening all this time.
If you think back a couple of weeks to when I ran
that little textual command called traceroute
where we traced the route between me
and Stanford.edu and me and CNN.co.jp.
I mean what's amazing I think
about visualizing this stuff now is all
of that is happening literally in a matter of 20 milliseconds,
60 milliseconds, 200 milliseconds
and literally are these data getting to and from Japan
and back, terribly, terribly fast.
It's actually pretty apropos too
that this film focuses on the web.
So, even though there are indeed all these various services
like e-mail and instant messaging
in the web it really is the web that's kind of taking charge
of what we all perceive to be the internet.
Odds are if you're on the internet right now,
you're probably using a web browser.
And you might be using an application
within that web browser whether it's Gmail
or Facebook or the like.
But that's what's kind of exciting now is
that web pages are much less like Netscape 4.0
which you saw depicted there.
And much more like interactive applications.
And this is exciting because it means that now using some
of the tools even we're talking about in this class like PHP
and Sequel and JavaScript, you can really start
to make applications that people use and start to rely on.
Case in point, for years all of us have been using things
like Microsoft Word and Excel
and you have to buy these things.
And you have to, or-- and you have to put the CD
in your computer or download some ISO.
And you need to double click an icon.
You need to install the software then you need
to configure the software.
And if you happen to have two computers or your happen
to be elsewhere you have to go
through this whole process again.
And if something goes wrong with your computer you now have
to reinstall everything, back--
restore things from backups and the like.
This is not a healthy system.
And in fact, I would argue that the state of our world today
as excited as we are by our iPhone and PCs
and Macs these days, it's all pretty primitive, right?
Like computers we use today are way more complicated
than they need to be.
And the fact that I have to help out certain members of my family
on the phone or by connecting remotely
to their computers is ridiculous I think.
Like these machines are very much in a very primitive state.
And I think what's really exciting
and where final projects are kind of exciting too is
that the trend really does seem to be toward the idea
of Google apps or Microsoft Office in the cloud so to speak
and these web-based applications.
And the fact that-- the fact that so many of you spend
so much time in Gmail and Facebook or the
like really suggest that this is the direction,
at least for several years, the internet is going.
So you will now have after this week and last
with an eye toward final projects, the skills with which
to participate in exactly that.
And so, with regard to Problem Set 8,
originally I had predicted
that we were gonna use Google's visualization APIs
which makes it super easy to actually have charts and graphs
and the like embedded in your own web page.
But truth be told, I was having some trouble last week just
getting excited about bar charts and pie charts and the like.
It's terrible useful and it's a wonderful way of presenting data
but it's not terribly fun.
And I thought it would be a much more fun way
to end this semester if we crafted some P set
that actually involves all of the TFs and CAs.
That actually involves Harvard's campus.
And actually is much more reminiscent of a game
that you would be-- would enjoy sharing with your family
and your friends back home since it is in fact on the internet,
not unlike what you did with scraps.
So, hopefully, many of you in week 0 and 1 had that sense
of gratification that damn, I made this project
and you shared it with at least one person, one roommate
and hopefully you'll have the chance now to do
that with what we've called CS50 Shuttle.
So problem set A is CS50 Shuttle is CS50 Shuttle,
it still uses some third party APIs but namely Google Earth API
and Google Maps API to implement the very first CS50 video game,
part of which we have implemented,
the rest of which you shall implement.
So here is a web browser, this is Firefox.
Here on the left hand side I see a picture of university hall
and Mem church and Weld over there on the right.
Down here on the bottom right I see a little blue bus
which represents me in a two dimensional version
of Harvard's map.
And then up here I apparently have 35 empty seats and a couple
of buttons for starting my engine, picking people up,
dropping people off because it turns out that
if I actually start my engine, read my little instructions here
for the keyboard controls and then start driving,
I can now navigate my way around Harvard's campus.
So I'm-- and go across the grass.
So here we have William James Hall up here.
Let me take a right over by this church here.
Follow the route that the shuttle takes.
Let me take spin up to say Lamont, alright.
I think that's Lamont, yup, over there is Lamont.
Let's take a right onto Mass, okay.
[Laughter] And oh, wait what's this?
Notice on the map here,
looks like Jesse Cohen is sitting inside this
building here.
If I hover over his little icon of a person over here,
Jesse Cohen is at Manter Hall
which is apparently a building right there
on Mass Ave. So, you know what?
I'm gonna go ahead and pick Jesse up and now notice
that top right, Jesse is destined for Kirkland House.
>> So my goal now is gonna be to drop off Jessie.
But we got plenty of empty seats here.
So let me back up here and let me see if we can find the quad,
I've heard a lot about it.
Alright, so--
[ Laughter ]
>> Been there about half an hour, I think.
Here we go, up Garden Streets, alright.
A registrar, coming up oh, that looks familiar,
let's take a right here and take a shortcut here and aha!
[Laughter] And there we have Pforzheimer House.
So you will now have in Problem Set 8 the framework with which
to make your own video game.
And this uses again a couple of third part APIs.
What I did was I pulled up the webpage for Google Earth
which normally is a program you actually download,
client side software, but that's not all that much fun and none
of your friends and family are gonna go
through a 5-minute process
of installing some special software, learning how to use it
and the like, they'd much rather just go to a URL,
be prompted for what to do and voila!
They too are taking a spin on Harvard's campus.
So Google Earth also provides what's called an API,
a plugin for the web whereby using JavaScript code you can
tell the camera of sorts here
on the left hand side where to navigate to.
And thanks to Google's investment in satellite imagery
and street view and the like, we have a ridiculous number
of 3-dimensional buildings and photography these days,
with which to actually explore places in the world.
And Harvard's own campus is now in fact one of them.
So underneath the hood of this, I have some JavaScript code
that we wrote that tells the camera what to do
when I hit the W key to go up or the A key to go left.
On the right hand side too, there's another API I'm using,
the Google Maps' API and it simultaneously is listening
for updates to my keyboard
so that I can then move this icon here
on the right hand side.
If you actually zoom out here on the map,
you'll see that here are the 3 houses.
So we have markers for Currier and Fojo and Cabot.
Up here apparently is another TF or CA.
Sophie Chang is at the Botanic Gardens at the moment.
If we zoom out, we'll see a couple of more staff.
Doug Lloyd is at the observatory.
Conlin is at the observatory also.
We have more staff over here, Anna, let's keep zooming out.
Kind of have a big staff.
So to get a lot of people that you have to pick
up in this game, and so actually,
even though this doesn't come built-in to the program,
we've implemented a few special features.
So if I happen to input that thing called Konami Code, up,
up, down, down, left, right, left, right,
B, A, I can then-- fly.
[ Laughter ]
>> So now let's see if we can find some of these TFs and CAs.
[ Laughter ]
>> You'll see that they're looming
out from the geography here.
Let's see if we can swoop in and pick up Caitlyn [phonetic].
Alright, there she is.
She needs a ride.
Whoops, sorry, Caitlyn.
She needs a ride to Law House.
So I'm gonna go ahead and pick her up.
Let's take to the air again.
And you'll see that you can explore all sorts
of parts of the world.
And so in fact, let me see
if I can start facing west here just to mess with this.
It turns out Harvard's campus is pretty big.
So you might have to go for quite a spin.
I'm gonna go ahead and kick this into, let's see, autopilot
and let's see by the end
of class how far west we actually get.
Let's go ahead and take a 5-minute break
and then discuss how you yourselves will be implementing
this game.
[ Noise ]
>> Alright.
So we are back.
We're only in Waltham, Massachusetts right now.
So it might take some time.
But that's not a problem because you'll find
that there are a number of optional features
that you yourself get to implement in this video game.
So we provide you with the general framework
that will start you to explore now toward two ends.
One, making sure you understand the context
in which we'll be playing this week.
But two, also so that you learn by example,
the various capabilities of JavaScript
and the syntactic differences with PHPNC
which you will find it quite familiar,
as you may have noticed last week syntactically
to these two languages.
Essentially, we provide you with this framework
but those buttons don't work out of the box.
You can't pick anyone up, you can't drop anyone off
but you can actually explore the campus.
So the engine of the shuttle works
but not the door so to speak.
And so the first thing you'll need
to do is implement the ability to pick up passengers.
Now, these passengers we'll see
in a moment are implemented essentially as a bunch
of constants, an array of teaching fellows
and course assistants.
Each of which have a number of properties associated with them.
So we've implemented the staff as what we call
"objects" in programming.
So this too may be your first taste
of what's called object-oriented programming which if you go
on to CS51 or 171 or if you come into the course
with a background in AP Computer Science or the like,
you probably know about this idea already.
And so we'll explore it, in this context with JavaScript
and then you'll have
to implement the ability to drop off.
But you'll have to drop people off only when you are
within 30 meters as we say in the spec of a particular house.
And we've given you essentially the GPS coordinates for each
of the houses or approximations thereof since some
of them have many buildings so we just picked a middle point
and you'll have to drop someone off at their homes.
But among the optional features that you get to choose from,
you have make one those 2 features
and then your choice of features.
One is that clearly there is an opportunity here for some kind
of point system where you can actually gather points based
on how many people you picked up or dropped off.
Two, there's clearly an opportunity
to give the person a ticking timer
so that you only have some number of seconds or minutes
to pick people up, not-- unlike a normal video game.
There is of course the Konami Code feature that I alluded
to you where you will implement the ability to fly
and explore campus above ground.
Another one of the options we prescribed is
to implement teleportation.
If you're a little tired of driving to the quad,
why not click a link and teleport yourself there.
Or put the shuttle on autopilot,
which is another feature as well.
And then two, another feature if you'd really
like to make your friends jealous is you can transplant
the game to some other university's campus
and actually let your friends explore their own school
or perhaps your parents, your hometown.
So in the PDF will you see a whole bunch of options
with which you can do that.
So let's actually take a look first
at how you might even begin implementing something
like this.
Or more generally, if you wanna tackle a final project
or after this course, just a programming project
of your own that's not been handed to you as a 10
or 20-page PDF that pretty much tells you what to do,
you yourself have to figure it out.
Let's see what that thought process is actually like.
So I kind of have this instinctive idea a week
or so ago that it would be great fun
to do something with Google Earth.
But I wasn't sure what you could do with the API,
and so I first started by Googling Google Earth API,
and I was led to a page that looks like this.
And what's pretty nice
about Google's own APIs is they're pretty well documented.
They have a number of examples
and reference material located there.
And you'll see at the left here, this is sort of the Hello,
World of Google Earth integration whereby
by default you just get the Earth.
And then you can navigate this Earth
by using the standard controls.
But of course it's a lot more fun in video game
like if we actually enable with your keyboard
so that you don't have to point and click
and use what's a fairly suboptimal interface.
But in fact, if we zoom in here, here, here, here and here,
we'll eventually see whatever town I'm actually hovering over
and whoever's home this actually is.
So in fact, if you play
around with CS50 Shuttle enough you can certainly drive
yourself, it might take a while to wherever you happen to live.
Well, actually it doesn't have to be continental US.
There's nothing stopping you from driving across the ocean
in this particular game.
So I went up here.
I went to the documentation and I saw, alright,
introduction, audience.
So I myself did-- took it upon myself to read through most
of this and realize you do absolutely
for this problem set don't need to understand or master all
of these various features.
But you're definitely gonna wanna turn to the documentation
when you start scratching your head and wonder,
oh, how could I do this?
So it doesn't matter
if you understand how you do everything.
But if you decide, you know what?
I'd like to plant a different icon, what Google calls a
"placemark" somewhere in the map.
Another one of the features actually is
to implement the idea of fuel.
So that as you drive, you're actually running low on fuel
so you could implement a gas station somewhere on campus
that you drive through and you can refuel.
Well, I want to put an icon or a picture
of an actual gas station somewhere.
Well, I might go up here to Google's documentation.
I heard in class and in the spec
that those icons are what Google calls placemarks.
And so what you'll see here is some pretty user friendly
documentation on how to add placemarks to the graph.
And we'll see some of the sample code in just a moment.
Now, meanwhile, I wanted to implement on the bottom
of the screen a little 2-dimensional map
because in playing with the framework for this piece
that I realized-- frankly, it's kind of easy to get lost
in the 3-dimensional world especially if you park inside
of the science center and don't realize where you are.
So I wanted to have a 2-dimensional rendition
of my world so that at least I could put myself back
into context.
So I checked that.
So, I wanted to use also the Google Map's API.
Now, Google is beginning the process
of actually combining all of these various APIs.
But in the end, you'll have
to use different reference material to navigate both.
So I started I think with the tutorial here and here too.
You have the Hello, World of Google Maps.
And as you consider final projects,
realize that it's super easy
to just embed Google Maps in your own webpage.
This is not the real Google Maps, this is just an example
and I could absolutely embed that in my own page.
Think back a few weeks to when we had the CS50 map with all
of you represented as icons all throughout the world
on the course's home page,
where we simply used the Google Maps' API to do that.
So I read up on how to do this.
I wanted to do things like markers.
It turns out the Google Maps API calls markers "overlays",
and there's different types of overlays
but markers are in fact one of them.
And so I just started reading through the code
and you'll notice some already familiar syntax.
The key word var where you see some curly braces
which we'll see again in just a moment, a slightly new keyword,
new, which is used generally in object-oriented programming.
So we'll glance at that today.
>> But in the end, it's all fairly readable.
And what's amazing, frankly, whether you use Google's APIs
or Bing's or any number
of freely available tools these days for your projects
or future programming work,
it's amazing just how relatively few lines of code you need
to write to actually do something interesting.
So let's see what it is we've actually given you here.
So I've SSH'd to the cloud and I've gone ahead
into my public HTML directory
and the spec will remind you how to do this.
I wanna go ahead and do CP dash R CS50 pub source PSET PSET 8,
and I'm gonna copy that here.
And just to recap a couple of basics,
if I now list this directory by default, it's only readable,
writable, executable by me.
That's what's suggested by the RWX there on the left hand side.
So I need to use the chmod command and I need to say,
give everybody the ability to execute it.
Or another way of doing this is 711.
And now if I relist the directory,
now it's all executable.
So this is very similar to PSET 7 stuff but again,
don't get tripped up initially on some
of these low level details.
So the spec will tell you what to do.
Now, I go into this directory and you'll see that none
of these files by default are readable, world readable,
which means if I try to visit my own files
with a web browser, it's not gonna work.
So in the past when we've done this, we've done chmod 644
as the spec will tell you.
And I wanna do this to all JavaScript files, all HTML files
and all CSS files, and now voila, I have a lot of R's
for readability which means I have distro code
for me should now work.
So I'm gonna go to my own URL, cloud dot CS50 dot net,
mail in PSET 8, enter, and there I have it.
The distribution code,
I'm planted by default at university hall.
I can confirm as much by taking a peek
at the John Harvard statue who is right there.
And if you wanna see that there is in fact more to the campus.
Weld actually looks beautiful as the [inaudible] here.
They got some really nice imagery here.
And it's very easy to get distracted
and start driving around just for fun.
So anyhow, so how do we actually then begin using this?
Well, if you take a look at index dot HTML, that's the file
that builds up the aesthetic framework of the site.
So you have among your printouts today, some of this code partly
so that you can actually see exactly how this framework
is working.
Not so much because in your future life,
you're gonna implement another videogame like this,
but because the code in here is very much representative
of doing anything interactive in today's websites,
anything involving Ajax or JavaScript.
Now, even though we ourselves won't have to, but you may,
write Ajax-like code for this problem set.
Google Earth and Google Maps own APIs
which are just big JavaScript files, the Google road
that you incorporate into your page.
Those files are making use of this technology called Ajax.
So when you drive around campus, at first,
some of the buildings might be a little blurry,
but that's to be expected
because Google can't possibly have known
where you were gonna start driving to.
And so just like the real Google Maps, things start
to download progressively.
And if you're on a fast internet connection,
it should be a pretty fast download.
So in fact, at the very top of my HTML file here,
notice I have one, some mention of service dot CSS.
This is just the separate file were I decided to put all
of my styles information.
This is a good principle on programming
or in software design to separate the data part
of your website from the stylization
or to separate the structure from the stylization.
So you'll see there's no mention of font sizes or colors
or anything like that this time.
In my index dot HTML, I factored that all out into the CSS file.
This though is one line of code
that had a copy paste from Google site.
So this long cryptic URL is one that when visited,
downloads a big JavaScript file from Google's own site.
If I visit this, this is the JavaScript code
that implements the Google Earth and Google Maps' API.
In fact, there is even more than just this.
This actually doesn't look like a huge amount of code
for the amazingness that the tool actually does.
But that's because their code is designed
to download more JavaScript
as well using again an Ajax-like technique.
So I realize there is a lot more magic happening there.
But then if I look back here,
now I have a bunch of script tags.
So for JavaScript this week, we're actually putting all
of our code in separate JS files
so that we're not mixing it up with our HTML.
So the code you're gonna write
for these problem set will largely be confined
to this file service or shuttle service dot JS.
But we'll explore for just a moment some
of these other files, Math3D dot JS is a library
with some 3-dimensional mathematics related functions,
some trig functions so that we can calculate some angles.
But you don't have to worry too much about how that one works.
But think of this as similar in spirit to sharp include
in the world of C, or the require function in PHP.
This is the way in the web context
to actually download some helper files.
In Buildings dot JS we'll see, thanks to the planning folks
on campus, that we have access to essentially a huge array
of all 500 plus buildings that Harvard owns.
This is a file that has some comments at the top.
It ends in dot JS.
Because of the script tag,
this file gets automatically loaded anytime you visit index
dot HTML in a browser.
And here is the syntax to understand
and it's actually pretty straightforward
as we'll see here.
Var just says, here comes the variable.
Buildings, I capitalized it 'cause I wanted
to convey the idea that this is--
these are some constant pieces of information.
You really shouldn't change where things are.
Then notice the square brackets.
So the square bracket says here comes an array.
If I fast forward to the very bottom of this file,
we'll see that the corresponding part is a close square bracket
at the very bottom followed by a semicolon, that's down here.
So that means this is a huge numerically indexed array
of something.
What are those somethings?
Well, notice that they're not just numbers or strings.
Every such something opens with a curly brace and some stuff,
then a close curly brace and a comma.
So this curly brace notation in JavaScript is adjacent notation,
JavaScript object notation.
The curly brace says here comes an object.
And an object is very similar in spirit
to what we called a struct in C. It's similar in spirit
to what we call the class like the stack class in PHP.
And what it is, is the collection of key value pairs.
So for PSET 6 you implemented a hash table.
That too is key value pairs.
So this object is really just a hash table.
So if you want a quick and dirty hash table in JavaScript,
you can say, here is a hash table,
here is an object more specifically
that goes from here to here.
And then it has a bunch of keys, root, name, address,
lat and longitude and then ach of those keys is associated
with the value by way of this colon syntax.
Now, as the spec says, it turns out Harvard has a--
every building in Harvard has a root value which is a unique ID.
Unfortunately, people didn't really plan ahead and a lot
of these root values start with leading zeros
which actually creates great headaches in programming.
Because if you convert it accidentally
to an int, what's gonna happen?
You're gonna lose the leading zero which tends to be bad
when you want to use it in if conditions and else if's
and you wanna compare it, so beware.
That's why we put the number in quotes to mitigate that.
Then we gave you the name of every building,
the address of every building
and then essentially the GPS coordinates thereof.
So in this file then, we have an array of objects,
each one of which represents one of Harvard's 500 plus buildings.
Meanwhile, if I go into Passengers dot JS,
I see a very similarly structured file.
But this one has a list of all of the staff on CS50.
So Var Passengers is another array
and each staff member has a username, name,
and a house associated with him or her.
And then lastly, we also came up with some coordinates
for the houses but this one is a little different.
So it turns out that sometimes you wanna be able to index
into an array as though it's an associate of array.
We introduced that jargon in problem set 7 and PHP.
So notice that these variable houses is actually an object
which is not-- so not an array, and then the keys
in this object are actually strings
under the names of the houses.
The value of my having implemented the houses data
structure like this, is now essentially,
I have a lookup table.
If I ever need to answer a question over the form,
what are the GPS coordinates of Adam's house,
I can index into this hash table.
I can index into this object and immediately get back the answer
for Adam's house which itself notice is what kind
of data structure.
[ Inaudible Remark ]
>> It's another struct.
It's another object thanks to those curly braces.
Now aesthetically, I just found it more readable
to put those curly braces
and those key value pairs on the same line.
But it's just an object containing keys whose values are
more objects.
And this is what's frankly really nice about some
of these higher level languages.
If you just need a data structure with which
to encapsulate some related information, bam,
just curly brace, curly brace.
Put whatever you want in there and now you can pass
around an object, a whole chunk of data
like latitude and longitude.
And realize too the utility here.
In C, if I wanted to find out the GPS coordinates
of Adam's house, I probably have
to call two functions 'cause a function generally can only
return one value.
What's nice here by just using a data structure, an object,
I can get back two values but really, one value in object
that happens to have two keys inside of it.
So what's really nice too about these objects is
that you can return and pass multiple values at once.
So let's see now how the whole game is actually structured.
It turns out even though my font is big,
there is not a huge amount of code here, right?
Most of the code is this silly list of empty seats
with this LI for list item tag.
So it turns out that really what I have done
in my HTML is just provide a structure
and I'm using this popular HTML element called div.
The div element says here is a division of the page.
Here is a rectangular something rather.
But with CSS, these rectangles no longer have
to span the whole page.
You can actually say, "You know what, for the Earth,
I need a rectangle that's about that big.
>> But then I want a 320 pixel by 320 pixel math--
div over here for the map.
Looks like we're in Pennsylvania now
as on the side I think, maybe?
No? Something like that.
And now if I go back here we'll see some other divs.
So long story short, there's a bunch of divs in here
that represent each area of the screen.
So how do you begin even figuring out how
to design something like this?
Well, to be honest the very first thing I did
when starting this is I didn't even use the Google Earth API.
I first destroyed some HTML with some CSS and I made
like the big left rectangle, I made it green
and then I made a yellow rectangle--
square over here then I made a white rectangle
up top 'cause I just kind of wanted to mock up the interface
that I wanted to then implement.
And so this is a very good starting point.
It's very easy with final projects to kind
of get overwhelmed when you've got this long list
of amazing features and it's just overwhelming
where you actually begin, start simply.
Honestly, I make something that looks ridiculously ugly
with just colored boxes here and there
by using the bgcolor attribute or the like.
And I just mock up sort of wire free my site
and then I start filling in some of those blanks.
Well how did I start filling in those blanks?
Well, notice I made ample use of this attribute called ID.
ID equals instructions, ID equals controls,
ID equals announcements so that now I have a unique keyword
with which I can address all of these different locations
in my overarching framework.
In fact, if you want to see how to embed a Google Earth
into your webpage in some sense it's as simple as that.
Create a div with nothing inside of it but give it a unique a ID
because I'm gonna call one JavaScript function that takes
as its argument the name of that div or the ID of that div
and Google's code is gonna handle the process
of taking this otherwise empty div and exploding it
to whatever sizes appropriate to fit that plugin,
that picture of the earth.
But here's how we've implemented the user interface.
So up here on the body tag I've got a few
of these event handlers.
We looked at a couple last week.
I think on Submit and on Click turns out you can get fancier.
There is onkeydown, so when you push a key
down that fires an event that you can listen for.
Onkeyup fires a different event that you can listen for too.
So if you think about how this game works, if I--
hold the W key as the instructions say,
that's like putting my foot on the gas and as long
as that key is down I want to keep going forward, forward,
forward but as soon as I lift up I wanna send a message
to the camera that says stop moving.
And so it basically boils
down to these two basic building blocks,
this event handler and this one.
And notice I'm returning the value of keystroke passing
in two arguments, it turns out keystroke is one
of the functions in service.js
that we'll look at in just a moment.
It's a function that I wrote.
Then we have onload and onunload.
These are the two functions that kick start the whole process.
So when this page loads a function called load gets called
and a function called unload gets called
when I close the page those two functions I myself wrote.
So let's take a quick look.
So if I open up service.js this is
where really the magic starts to happen.
So at the top of this file I've got some basic constants,
not unlike some of our past programs and some
of this was trial and error.
I've realized that those are the GPS coordinates roughly near
Johnston gate that will allow you at that heading,
that angle to face John Harvard statue.
And I just played around until I found something that worked.
I then decided that the bus, based on a conversation
with shuttle services supports up to 35 seated passengers
so I made a constant and then the velocity also trial
and error, I said 50,
which actually is probably roughly 50 miles per hour
and though not quite.
We actually did drive through those buildings pretty fast,
you might want to slow that down a bit.
And then notice this.
I decided to declare some global variables
which again is a bad habit to get in to excessively
but sometimes if you're implementing an application
that's clearly dedicated to one purpose
and is not gonna be integrated into someone else's work,
it's reasonable to have some global variables
and the variables through trial and error
that I realized I needed was a variable called earth that's
essentially a pointer to the earth that gets embedded
in the page but the jargon
for JavaScript is reference, it's not a pointer.
I needed another such reference for the map
and then I needed a couple of more
for what I called the shuttle and the bus which are the icons.
But again, some of this is discussed
in the spec. But here's what cool.
To use the Google APIs in your own page, all you need
to do is call two functions:
Google.load the earth API version 1,
Google.load the maps API version 3 with some other parameters.
And now, you have the ability to call any of the functions
and the documentation we just started to glance at.
So if I now scroll down to my function load,
let's just take a look at what's really going on and try
to tease apart just a few syntactic details.
Here's the function load
and thankfully the comments pretty much say what it does
but just notice-- don't be overwhelmed perhaps
by the syntax here.
So notice I'm declaring a variable called latlng equals
new google.maps.LatLng of this comma this.
So these capital words, those are the constants that--
those are the GPS coordinates of Johnston gate, give or take.
So this is new syntax at least to those of you
without prior programming background
and Java the keyword new in JavaScript
as in other languages says give me a new object.
It's kind of like malloc but it's a little fancier
but it's the same idea.
It allocates space for something that's apparently
called google.maps.LatLng.
So that google.maps.LatLng, it's a little longer a string
for a name but in fact that's just the name
of the structure really.
It's a LatLng data structure more generally called an object.
So now I've stored inside this variable,
essentially two values a latitude and a longitude
in this special type of structure.
Then I have this, map, which again is a global variable
up at the top of my file and I'm using that global 'cause I want
to remember the map and this is key if you want
to actually navigate on the 2D earth and the 3D earth you have
to remember references to or pointers
to those objects otherwise you're gonna create the map
and then lose control over it.
It's like for getting a pointer
and allocating memory never freeing it,
so I need to remember that reference.
It turns out the object
that represents the 2D map API called google.maps.map
and what does this represent here?
Document.getElementById "map" what role might
that serve just by inference here?
[ Inaudible Remark ]
>> Oh sorry.
[ Inaudible Remark ]
>> Exactly.
So this function, this is a JavaScript function that's
terribly useful document.getElementById
literally does that.
There is an element in the HTML presumably
that has an ID attribute of map
and so what this function does is it actually returns
to me essentially a pointer
to that specific element in the HTML.
Now even though HTML is text remember the picture we drew
last week when a browser reads HTML
into RAM it actually builds it
up as what kind of data structure?
What did it look like when we drew it?
>> A tree.
>> It was a tree, right?
And we called it the DOM, Document Object Model.
It was kind of like a family tree.
So when you say document.getElementById what
you're really getting back is essentially a pointer to one
of those nodes in the tree and this is useful
because now using our programming code I wanna be able
to take that otherwise empty div whose ID is map
and put something in it.
And that something is going to be this two-dimensional map
and that's done by this function call new google.maps.map,
this creates a new map at this location, that div,
and now notice this syntax 'cause you'll see it a huge
amount now on the web
and in anything JavaScript-based comma curly brace
which denotes what?
Object. So it looks like the second argument
to this function call is an object
and that object's keys are called center,
disable default UI, map type ID, navigation control,
scroll wheel zoom then notice the curly brace?
Then notice the close parenthesis which maps
to the beginning of this function call
and this is actually wonderfully helpful syntax in C
and even in PHP thus far.
Anytime you call a function you can provide zero
or more arguments and you usually call those arguments
with comma separating them.
This gets a little annoying though if some
of your functions now start to take one, two, three, four,
five, six arguments or seven really.
So notice that apparently you created a two-dimensional map
you need to tell Google the center of the map whether or not
to disable the default user interface, whatever that is.
You need to give the map a type ID then you need
to say do you want the navigation control there
or not, true or false?
Do you want the scroll wheel on the mouse to work?
Do you-- what zoom level do you want?
That's a ridiculous number of arguments
and you can imagine writing that function call.
Argument comma argument comma argument comma argument--
I mean, you would forget just the order of these things.
I'm a bit anal so I tend to alphabetize here
but I would otherwise have to check
in the documentation what is the exact order
of all seven of these arguments?
And that's just asking for trouble.
It's annoying and it also creates problems
if supposed I don't want to provide one
of those arguments now you have to start providing like null
or blank values in all of these arguments.
So in any case, in languages like PHP and JavaScript and Perl
and others thankfully you can pass in arguments by way
of these objects or really these hash tables so that you can pass
in all of these key value pairs but who cares what the order is?
You certainly do not have to.
So this is kind of the what's in vogue with JavaScript.
So that's it for creating a two-dimensional map.
If I want to plant a marker on that map I need
to make a function call like this,
create a new marker using this icon which happens
to represent a blue bus that I found on the internet.
Map, what map do I wanna use?
Well the one I just created.
And what title?
So where does you are here come from?
Well that's what happens when if I scroll
over here and hover my icon.
In fact you are here, so this all being done in code.
And then lastly, look at this.
Google.earth.createInstance of earth initCB and failureCB.
So this too is a new feature of JavaScript
versus other languages we've done.
>> It turns out that initializing a Google Earth
plugin requires a little more work on your part.
You first need to call this function called createInstance
but you also need to tell the API what function to call
if it is successful in loading the Google Earth plug in
or if it's unsuccessful.
And so what's neat about JavaScript 2 is
that you can pass in functions
as though they themselves are variables.
Up until now we've only called functions and defined functions.
We've never passed them around even though
in C you can pass functions by pointer.
It turns out that if I look at initCB this is just the name
of another function but notice what's crucial here.
When I passed in the name of this function
to my init function, let me go back to this real fast,
to my load function notice
that what I did not do is include parenthesis
after the function name here or here.
That means don't call this function just pass in the name
of or really a pointer to this function
so that it can be called later.
Well, what happens later?
Well again, this is just an instance
of my reading the documentation, I've never used this API before
like last Wednesday or so and so I decided
that I needed to read through it.
I understood roughly what most of these lines did
but some initially I just copied and post it 'cause I wanted
to see what the thing could do.
And the interesting part now is that finally in this init CB
for callback, callback is a function
that someone else calls I have this line.
And this is the last thing we'll turn our attention
to here 'cause this is really the code that the staff wrote.
So, we have now what we've decided to call a Shuttle.
A Shuttle, capital S, is what most people would call a class.
Now, as in the side, JavaScript does not have classes it's what
called a prototype-based language
but it is an object-oriented language which means
when I call new Shuttle this is creating a new data structure
and memory that represents a shuttle.
A shuttle has a few things associated with it.
One is the heading, what angle is it facing,
for instance the John Harvard statue?
What height is it?
I decided, roughly the-- what height a shuttle bus should be
so that you're not looming over the buildings
but you could make a, you know, 50-foot tall shuttle bus
if you wanted to see over the tops of buildings.
Where do you want it to start?
At what planet do you want to put this particular shuttle on?
And then what velocity do you want to actually start it with?
And then that code, just so you know where it is,
is in shuttle.js which is not a file you should need
to touch though you're welcome to especially for some
of the fun features but realize there's no mention
of the keyword struck, there is no mention
of the keyword class in JavaScript.
And if you take CS51 you'll use this jargon,
functions are first class objects which is a fancy way
of saying you can implement data structures using functions
and in fact, those of you
with prior backgrounds will recognize the keyword this,
which is very much used in Java and the like.
So the end result is we've got this index dot HTML page.
It references all these JS and CS files.
They all get downloaded by the browser.
My load function gets called,
the load function initializes both of the plugins and so
in the end I have a little interface like this.
If I zoom out here we have-- where are we?
Fitchburg-- oh wow!
We're barely on the border of Massachusetts here
so it's gonna take a long time to hit the West Coast here.
So I'm gonna go ahead and just go back
to the yard for just a moment.
Let me see if I can just find one staff member.
I'm just gonna-- gonna take some shortcuts if you don't mind.
Dupo is-- where is Dupo?
There he is, alright.
So let me-- Dupo is in Qdoba or wherever we are here, pick up.
Dupo goes to Elliot House and we reverse.
Let's try to take the road this time.
Okay, go down the road here to Elliot House, right.
Elliot, almost there, this is Elliot.
If I give it some time it will download in better fidelity.
Here we have Dupo for Elliot House.
I'm gonna go ahead and click Drop Off.
Uh-oh! He doesn't want to get off there,
kind of-- a little finicky.
Oh, he wants to be dropped off in the courtyard.
There we go and now Dupo has been dropped off
at Elliot House.
So you've been given this framework,
you've been given some
of the conceptual underpinnings for this.
It is now up to you to implement CS50 shuttle we will see you
on Wednesday.