Tip:
Highlight text to annotate it
X
>> ROGER ZURAWICKI: Hello everyone.
Can I get your attention?
Thanks, guys.
Today I want to talk about Meteor.
It is a JavaScript framework.
We'll be going through how you can make really cool web apps.
>> Before we get into JavaScript, I just want to tell you guys that this will
be-- you'll have a later piece this semester.
It should be about JavaScript.
I think [INAUDIBLE] is first going to cover the web HTML PHP stuff before we
move to JavaScript.
And in CS50, JavaScript is considered like a client code.
So it only gets run in the web browser.
>> But thanks to recent advancements in technology, we have now managed to run
JavaScript as a server as well.
So this has created a really cool framework because now you can write
legitimately the same code for the client and the server.
And when you define functions in your server, your client can call those
same functions.
And it makes it a lot easier.
Whereas before, if you're using PHP on the server, JavaScript on the front
end, you have to write a PHP function and then a JavaScript version of the
same function to do the same kind of work.
>> So before we get started, I want to show you a demo of what
Meteor can do for you.
I will show you the demo, which is what you'll be able to create by the
end of this seminar.
We just go right here.
This is a Leaderboard app.
It's actually based out of the example that Meteor gives you.
>> Meteor is very nice because when you install it as a package, you can
basically play around with these four demos.
And the Leaderboard is the first of these demos.
After the seminar, I encourage you all to just explore the other demos
because I think they're really cool, and they show you the power of Meteor.
>> So what this is, this is hosted on Leaderboard.
This is just frankly a list of names.
And you can select people.
They turn yellow.
And then you can give them five points.
And you'll notice that the list is sorted because as I give myself more
and more points, I'm now at the top.
So this is where we start.
>> And what you'll be able to take away from this seminar is a few more
features I've added to the Leaderboard.
We'll be covering how to, as well as add five points to a player, we can
delete players, we can add new players, and we can choose how we want
to sort them.
And these are all very easy API calls that Meteor provides for you.
You also have a feature here to randomize the scores.
>> So what's really cool about this is you guys can actually
all go to the site.
I'll put it in bigger text here.
One-radical-lead erboard.meteor.com.
And when you guys go to the site, you should be able to edit the site, and
all of your edits will be visible to everybody else.
So you can-- are you guys all able to connect to the site?
So play around with it.
Go and start deleting some names.
See what happens.
>> So you see everybody can play.
This is just the default security mode for Meteor.
You see that everybody can change each other's data.
Don't worry.
Meteor does have security.
This is a very easily implemented feature, where you could set up users
and logins.
But right now, anybody who visits the site can give themselves as many
points as they want.
So I always like this because this is a fun way to get started.
And then we'll just talk about the details, how
Meteor makes this possible.
>> So I'm going to cover what Meteor is, and then we'll just need to cover the
two prerequisites that CS50 hasn't covered enough.
But by the end of the term, you should be comfortable with both HTML and
JavaScript to really get your hands dirty working with Meteor.
And I think it's just a great way for even less comfortable students to do
final projects because they can really stay in one language, and they get to
see the changes of their work right away.
>> So this slide shows just some of the major technologies that Meteor JS
gives to you.
Meteor is not a new technology on its own.
It's really a conglomeration of all these different things
we have on the internet.
As well as HTML, CSS, JavaScript, we have some technologies like Node.js,
which is what allows you to run JavaScript on the back end on your
server, as well some JavaScript libraries, like jQuery, Underscore.
>> All of these will be familiar to you by the end of the semester.
And we also get to use a database called mongoDB, which is a really
popular database now for these new startups.
You can think of it as like MySQL, but it works very nicely with JavaScript.
And there's some other technologies here and many more I haven't listed
that all interface really nicely with Meteor.
>> I have to put this slide because sometimes I get confusion about this.
Meteor is only JavaScript.
It is not PHP.
It is not Ruby on Rails.
So if you write code, if you want to write a Meteor project, you really
can't use Ruby code.
You really don't use PHP.
>> While we'll see that the differences in code and syntax might not be that
different, I want to stress to you that Meteor, everything you code is
only in JavaScript.
And everything that you show to the user will be HTML CSS.
But you're not actually using any of the other languages that other
seminars might cover.
What Meteor also is is a web server.
So even if you don't have any JavaScript, and you just want to serve
CSS and HTML files, Meteor can do that for you.
>> And here's the link again to the demo that I got you guys
started playing with.
But let's move on to HTML.
How many people here have no idea what HTML is?
OK great.
And that is completely fine.
You really don't need to know much about it because we will go over the
usage very simply.
>> This is what the simple HTML page looks like.
This can be like your hello, world for HTML, whereas we started in C with
hello, world.
I don't want you to stress on the details of what HTML, what head, what
body, what title is doing there.
I just want to stress the structure, how you have tags.
And that's the angle brackets.
And that's where you have your descriptors.
>> So you might have the HTML document.
And then you'll close the HTML document with backslash same thing.
And you have different kinds of tags.
And notice that they're all matched.
You'll have like a body tag and then a close body tag.
And inside the body tag, that'll be the contents of your web page.
So this web page would simply display in a white background and black text
hello, world.
Does that makes sense?
OK.
>> Now I'm going to quickly cover JavaScript.
In the words of a previous TF, "JavaScript is the best programming
language currently in existence.
Other people will try to tell you otherwise.
They are wrong." JavaScript is pretty nice, and I'll show you why.
>> So this is the classic example we start with in C. We have hello, world.
And you notice that even if you shrink it, you have to have at least two
lines of code here.
I have several lines of code.
This can be done very simply.
One line in JavaScript with console.log, and then your string,
hello, world.
>> Now, even though we're moving to a new language JavaScript, almost all of the
skills you've learned by coding in C are directly portable.
So strings, the idea of strings in double quotes, that's the same.
The semicolon, that's the same.
>> A neat feature about JavaScript actually is that you
don't need the semicolon.
It can guess that you should put a semicolon there.
But that said, you should always try to put your semicolons there.
It's considered good style.
And also, there's no main function.
You just start at the top of the file and read things line by line.
>> Then this is what it takes to make that hello, world program.
And then notice that you have to make hello and then run hello.
With JavaScript, it's considered an interpreted language.
What you need to know is that there is no making.
>> There's no compile.
You just run node.
And remember node is the program that will run your JavaScript on a console,
on a black box, not the website.
So you just give it the file, and it's going to print hello, world.
>> I'll actually do a little demo of that for you guys right here.
So let's go over to my Node.js terminal.
OK.
Let's move here.
So I'm going to start node.
And I'll show you guys in just a sec how to get that
installed, if you don't.
Let me make that a bit bigger.
OK.
I hope you guys can see.
>> So I can write code like I did before in console.log.
Hi, Roger.
And notice I don't have to do the semicolon, but then I get this weird
undefined thing.
Well actually, never mind about the undefined thing.
Things I want you to notice is that you don't need the main function here
to start running code.
And there's no backslash end.
There's some little features that JavaScript can do for you.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Oh yeah.
I'm sorry about that.
And that arrow just means node is ready for another command.
So you can have it do simple math, like 1 plus 1.
And just like in C, these math symbols are just the same.
I can do console.log of a number.
And then it prints two.
JavaScript is nice in that sense because even though two is an int,
like in C, if you did printf with two, you would get an error.
>> But JavaScript knows, oh, you're printing something.
I'm going to need a string.
So let me convert that two into a string for you.
And you can also do some weird stuff like hi and then plus two.
This is just another example how two can be converted in there as well.
>> So with that out of the way, let's just cover a bit more JavaScript.
So in C, we have types.
Whenever we created a new variable, we have to say that's it's char* or
string in the case CS50.
Or if we had a decimal number, we had to say float.
If we needed a Boolean, we had to say b.
And then once we had something that was b, it had to stay a bool.
We couldn't magically change it to an int unless we wrote in the
parentheses, int of b.
>> In JavaScript, there are no types.
You just think of it as var.
And var is how you create a new type.
So it can have var s being a string, var n being a float,
and var b being true.
And one thing that you can't do in C is I can now say, after that line, b
equals an integer.
And that works just fine.
Whereas in C, it would say like your integer is not a bool.
I can't do that for you.
Or [INAUDIBLE] would throw an error.
>> And I can quickly go back into node and show some of that functionality.
So I can have a var a.
Call it "Apple." So now when I print a, I get my string, 'Apple.' But I can
also now say a equals 3.
And notice there's no error.
And a now equals 3.
Any questions so far?
Yes.
>> AUDIENCE: Wait, so console.log is basically printf, right?
>> ROGER ZURAWICKI: Console.log is your printf.
>> AUDIENCE: Right.
So how come if you just type in eight or [INAUDIBLE], what does that
[INAUDIBLE]?
>> ROGER ZURAWICKI: Right.
So it is--
the stuff in green gets printed at the console.
And what we'll see next is when we move to the web
page, we won't be doing--
JavaScript will be having a HTML template, which I'll cover in the
Meteor part of the seminar.
And that's where you can say, give me the value of a, and it will put a in
your website.
Because every web browser actually has a little console.
And if you looked very carefully, you would get some information, like your
printf's appearing there with every web page you load.
>> AUDIENCE: How did you get to the shell screen?
>> ROGER ZURAWICKI: So there's a command called node, and it comes with Meteor.
So I'll just quit out of there.
Node is the program that runs JavaScript.
If you go to meteor.com, you can install Meteor, and
Meteor comes with node.
Because Meteor is just a collection of all these software packages.
When we get to our example, I will walk everybody through installing
Meteor, and then you can play with node yourself.
OK, great.
>> So another great feature about working with JavaScript is loops are the same.
Pretty much exactly the same.
For loops, while loops, do while loops, if else.
It's all the same with the braces.
It's the same syntax.
In the case of a for loop, the little detail that you have to pay attention
to is instead of int i equals 0, we have to say var i equals 0.
But that's because of the variables types that we talked about before.
>> Notice that the printf becomes a log, a console.log.
And we don't need to do the percent p backslash n and then pass in i.
You can just say i.
And it would print the numbers from zero to four.
If you guys want to try this, because you brought up a good point.
If you wanted to run this code on your own browser, I would recommend that
everybody opens Google Chrome.
Google Chrome or any web browser really, but I like Google Chrome
because it's very standardized.
>> You can go to, I believe, if you right click on any website, just in the
white space, you'll see an option called Inspect Element.
It's usually the last one.
And when you click it, you should get a thing to the bottom appear here.
Let me zoom in here.
And we have a few tabs here.
The one you care about is console.
>> And this is a JavaScript console that you can now work with.
Great.
So I can type in the same stuff I was typing before in node.
One plus one is two.
Var a equals "Apple".
And then I'd print a, and a is 'Apple'.
So in any web browser, Firefox, Chrome, Safari, whatever you use, as
long as you have access to a JavaScript console, the same kind of
code I was running in node you can run in your own console.
>> AUDIENCE: [INAUDIBLE]?
>> ROGER ZURAWICKI: How to get to the console?
You have to right click on empty space on the page, and then you go to
Inspect Element.
So actually, I'd like you guys to just make sure you can
Inspect Element in Chrome.
And see when you type in some code into the console
that it runs properly.
Feel free to ask any questions if something's not clear here.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Any type, right.
There's only one type for all variables in JavaScript.
And when you have to declare a variable, you say var.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Yeah.
It does, but in JavaScript, it's very smart about allocating memory.
There is no malloc.
There is no free.
So you don't need to worry about that.
That's another nice feature that JavaScript provides you.
>> So I'd like to move on.
Would that be OK?
OK.
Great.
>> AUDIENCE: I'm just having trouble finding the [? Inspect Element. ?]
>> ROGER ZURAWICKI: So Safari looks a bit different, but do you
have Chrome or Firefox?
Those are the easier ones to work with.
And for your projects, I recommend sticking with one browser because
you'll get a lot of bugs almost because every browser treats
JavaScript HTML a little differently.
So I think your life will be a lot easier if you stick to Chrome because
it's available on all machines.
And it's a pretty popular browser.
OK?
>> So the next topic that we should cover in JavaScript--
I'm sorry about the formatting here.
I had to stretch the slides to match the widescreen projector.
But I'd now like to talk about how you do functions.
In C, we have to declare every function.
Like int add, and it takes an int into x, and an int y, and then we add them
and return it.
>> In JavaScript, functions are actually another variable type.
So we just say var add, and it equals a function.
A function that takes an x and a y.
And what does that function do?
It returns x plus y in the exact same syntax as in C. And you notice that in
JavaScript, you won't be told what the function returns because since
variables don't have types anyway, it it's not really productive, I guess,
to be specifying all your types in your functions.
And then when you call a function, it's the exact same syntax as C. You
just pass in your two arguments.
I'd like to try this in my node.
Can I change the slide?
>> AUDIENCE: [INAUDIBLE].
Will we get a copy of the slides?
>> ROGER ZURAWICKI: Yes.
So let's go back to node.
OK.
So I'll say var add equals function.
Taking an x, taking a y.
And then it knows that the statement's not completed.
So in node or in your console, you'll notice dot dot dot.
So you can keep typing your code.
And now I'll say return x plus y.
And then close the brace.
And the moment I close the brace, it sees that the statement is finished.
>> And now I can say add one and two.
And I'll get three out.
Note that if I just did add, it tells me it's a function.
And one thing just to pay attention to is if you give it the wrong number of
arguments, it will make.
It will run, but you might get some really weird results.
Kind of like a garbage value, you can think of it.
So please go ahead and try this in your browsers.
>> OK, so in the interest of time, I'll now move on to the next features in
JavaScript.
So we've talked about functions.
We've talked about loops, if statements too.
The syntax is the same as C and variables.
And now I want to talk about arrays.
I'm sorry that the slides got a bit cut off.
But actually, in the first section, everything you need will work.
>> So we have another type for variables called arrays.
And we use square brackets to denote them.
So in the first example, var arr, empty array.
This is the empty list, so an array containing no elements.
And you can also have an array with three strings.
In C, every element in your array had to be the same type.
>> But because in JavaScript there is only one type, arrays can actually
have different types of values.
Like here, we have an array with a float, a bool, and an int.
The way you get a length of an array, you don't actually have to use size of
or anything.
You just say array and then dot length.
And this dot length, you can think of it kind of like a struct, how every
array has a field, an extra variable inside of it called length, which
keeps track of how long your array is.
>> So I'm just quickly going to go into node and show you guys the same thing.
So I can have an array.
It can be the empty list.
And it will print me back an empty list.
Great.
I can now say that the array has 1, and 2.3, and true.
So all different types.
And you notice it works just fine.
The array I get back supports all of the values I gave it.
>> If I wanted to get the first element of the array, the syntax is actually
the same as in C. You can say array zero.
And you get one.
I can say the same for array two, and I get true.
If I do something outside of the array, JavaScript is a safe language
because I won't get a seg fault.
I'll get undefined.
>> And this undefined, you can kind of think about it as null.
But it can be really annoying when you code because you'll have to check that
almost everything you do, you work with is undefined.
And we'll see some examples of this when we work in Meteor.
>> Although array four is undefined, I can assign it a value.
So I'll say it equals one.
And then if I go to array, I have the extra value there.
And notice that array three, which also was undefined, stays undefined.
So I now have an array with a hole in the middle.
But if I printed array four, I would get one.
If I did array three, I get undefined.
>> So the nice feature that JavaScript allows you to do is that lists can
change size.
Arrays, arrays being lists, they change size.
And you can specify any location inside of them.
And all the gaps will be filled with these undefined values.
>> So we've talked about arrays.
Now, the last thing I want to cover in JavaScript, and this is very important
to understanding the code that I'm going to show you,
is going to be objects.
And objects are a term in--
basically, they are present in many programming languages.
And each programming language likes to think of them a bit differently.
>> But I think for Meteor, a good analogy is the C struct.
In C, if we want to find the struct student, we'd have to specify all the
things inside of it.
So it has to have a name.
It has to have a year.
It has to have a gender.
But we also have to give it the types of all those things.
>> And now that we have this mold for the struct called student, we can have a
new struct, and then we can manually say what each of the fields are.
And that's where we use dot name, dot year, dot gender.
And then we just, in the last line of code here, I'm just printing out the
name of the struct student.
>> In the JavaScript world, there is no such thing as struct student.
You don't generate a preset structure.
You actually just, in these brackets, you say what everything is.
And it's this weird notation with the colon and then the comma, but you'll
get used to it soon enough.
>> And it's actually a really easy, flexible way of just
manipulating objects.
You notice that if I want to now get name from s, I just do s.name.
Are there any questions about this?
This usually has been a very confusing topic when we introduce people to
JavaScript.
I'll do some examples of this in node.
Yes?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: So do you have an example, multiple
variables of that type.
>> AUDIENCE: [INAUDIBLE].
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: OK.
So I guess the way you would go about is you would put objects in an array,
and now you'll have an array of objects.
Does that answer your question?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Yes.
S is one object.
So we can go into node and just play around a little bit.
>> AUDIENCE: [INAUDIBLE]?
>> ROGER ZURAWICKI: Oh, OK.
So if you're asking what classes are, classes are treated very differently,
and they have a really weird scheme called prototyping, which you don't
need to know about.
There is no fixed way to do it.
So if you want to generate multiple, you would just kind of have a function
or something.
You generate your own function.
And you would return an object.
That would be the easiest way to do it.
Does that make sense?
OK.
Great.
So once we have an understanding of JavaScript objects, they are--
oh, yes.
>> AUDIENCE: [INAUDIBLE]
example, what's the difference between "Roger" with double quotes versus
[INAUDIBLE] with single quotes.
>> ROGER ZURAWICKI: OK.
So this is in C, we have the single quotes representing chars, and double
quotes representing strings.
JavaScript actually throws this away because you can have strings with
single or double quotes, and there's no such thing as a single char.
But if you just copied the same C code, JavaScript would
treat it just fine.
Which is why I treated it as--
that's why I can literally port the code in that sense.
>> And I want to show you an example of a more complicated object.
So you can notice that one object can have strings as values.
It can have another list of values.
It could have a list of objects as values.
There's really no limit to this.
So here, it's just a good demonstration of how you can get a lot
different types going on all in one object.
Does this make sense?
>> Now, you can also have arrays of objects.
And here is kind of similar to what you asked, if you can have objects of
the same type.
But the problem is, there is no fixed format for objects in JavaScript.
So you have to specify them yourself.
And you have to make sure that they're uniform.
So here, when I create an object, I have to make sure that each one has a
name, and each one has a house.
>> And then I have an array of those, and that can be my cottage.
And then here you can kind of see the for loop going on.
The for loop being just a really common way to traverse over an array
in JavaScript.
Notice that this pattern is very similar to the C equivalent, where you
have int i equals zero. i is less than the length.
And then i plus plus.
>> It's almost the same code, except for a few details.
So does everybody understand what an object is?
Just think about it as a C struct.
And the way you access the fields is just with the dot.
And as long as you remember how to use the dot, you'll be fine.
>> OK, so now can everybody read that link?
This is the link to the project.
Is anyone having trouble seeing the link?
OK, let's change it then.
It's not--
Yeah, that's probably the easiest way to do it.
Great.
>> So if you go to this site, there should be some instructions that I'll
go over on how we can install Meteor and get our sample project running.
I want to make sure everybody has the link down before I move.
Can I move on?
OK, great.
>> So here I am at the website.
You'll notice in the readme file, we have some instructions on how
to get th set up.
You need to be either in the CS50 appliance or just on a Mac.
Windows will not work.
But basically anything that's not Windows should work with these
instructions just fine.
But I can make it a bit bigger as well.
>> So you'll run the first pair of commands.
These guys will just install Meteor.
I can go into my terminal.
And if I run the same thing now, I already have it installed.
So it's a bit shorter.
It might take a bit longer for you guys.
But I want to first make sure that we have Meteor running.
After Meteor has installed, you should be able to get node in the console.
>> AUDIENCE: They're asking for a password.
>> ROGER ZURAWICKI: That would be your user password, if you're on a Mac.
It just needs permission to modify some system files.
So the question was, if it asks you for a password, it's just asking you
for your username password when you log into your Mac.
And this is so that you can change system files.
>> And when you're ready, you can move on to the next step, which will copy the
sample code I have from the website.
And you'll get a new directory in your home directory called leaderboard, and
we can start working from there.
So I'm just copying and pasting these commands into my terminal.
And for me, I already cloned it.
So I can just now move into leaderboard.
And I should have a few files in there.
Any questions?
>> AUDIENCE: [INAUDIBLE] not working.
>> ROGER ZURAWICKI: Oh, you might need git installed as well.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Sorry?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Oh, OK.
OK.
That's because you might need to be logged in to GitHub to get this link.
If you guys can see that, the easiest way to do it I would then say is
download the zip.
And this will just download all the files.
And then once you put it in your download or your home directory--
I recommend putting it in your home directory so we can all
run the same commands.
As long as we have the files, we will be able to start working with them.
Let me know if people are having trouble downloading the files.
>> AUDIENCE: By home directory, you mean--
>> ROGER ZURAWICKI: So home directory would be John Harvard, if you are in
the CS50 appliance.
To get to your home directory, just type in C.
>> AUDIENCE: [INAUDIBLE]
CS50 appliance [INAUDIBLE].
>> ROGER ZURAWICKI: Yes.
You want to run the commands in your terminal.
>> AUDIENCE: [INAUDIBLE].
I got an error that says no such file or directory.
>> ROGER ZURAWICKI: We can take a quick break and just make sure that
everybody has Meteor installed, and I'll just go try to help people out.
Please try to help each other if you're running into problems.
Sorry, yeah.
Are you both in the appliance?
>> AUDIENCE: Yeah.
I have the RISA
>> ROGER ZURAWICKI: OK.
If you go back to the website, go scroll up to the top.
And there's this HTTPS.
>> AUDIENCE: Copy this?
>> ROGER ZURAWICKI: Yeah.
And then you want to type in git clone.
So if you press Control A--
>> AUDIENCE: Here?
And do [INAUDIBLE]?
>> ROGER ZURAWICKI: G-I-T.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Git and then clone.
So it's very similar to the command you had above, but the URL changed.
So before it was this, now it's this.
Let me update the--
yeah.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: This is downloaded.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Oh, so it didn't clone correctly.
I will fix that.
There's an error with trying to download the files.
Let me update the command for you guys so I can make sure it will work.
I'm sorry about that.
It should be the same for Macs or CS50 appliance.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: I've updated the command for number two, if
you refresh the page.
And with this, URL, you should be able to download the files.
>> AUDIENCE: So if we're still downloading [INAUDIBLE].
>> ROGER ZURAWICKI: If you're still downloading Meteor?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Yes, if you want to develop on your Mac.
But you need the Xcode developer tools installed.
I've tested these commands on the CS50 appliance, so I can guarantee
that it will work.
Yes. let me go and help you.
>> AUDIENCE: [INAUDIBLE].
I give my password.
This is Mac.
And then I do [INAUDIBLE].
>> ROGER ZURAWICKI: OK.
I would try running all the commands solely in the CS50 appliance terminal.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: I would get it working first on the terminal, on the
CS50 appliance, and then the Mac terminal.
>> AUDIENCE: So if you do it on the CS50 appliance like that, [INAUDIBLE].
>> ROGER ZURAWICKI: I would like to move on, but if people are still having
trouble setting up Meteor, Kevin is more than happy to help you guys out,
Kevin in the gray shirt.
What we should have is we're going to run the last command, number three, in
our terminal.
When we do that, we'll run Meteor.
>> And you should--
oh, I already have Meteor running.
So it's not going to let-- let me just close my other Meteor.
When I run Meteor, you should now see that--
you should see the current directory that it's serving.
And now it's going to say the server is running on http://localhost.
That's the URL you want to put in in your web browser.
>> And on that URL, you should be able to access a nice little leaderboard.
So notice that this is on localhost, which means that if you do any
changes, you're not going to see each other's changes.
Whereas on the website I showed you at the beginning, we could get
everybody's changes because everybody was accessing the same website.
>> So let me just go to [? word ?]
3,000.
So you should be able to just confirm that the functionality works.
You can select different people, and you can give them different points.
So I give somebody points.
You can also see that they rise in rank.
>> Now, in the interest of time, there are three features that I've
implemented.
And we're going to implement deleting users as our first feature.
But before we move on, are there any questions?
You had your hand up.
Yes?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Can you check that Meteor is installed?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Local host 3,000?
And you're in the CS50 appliance?
I can do--
you don't have to be on a Mac.
This will work in the appliance.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: In the normal web browser, yeah.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: Is Meteor running?
So OK, there's a distinction here.
If you're running it in the appliance, you have to do
localhost within the appliance.
If you're running it in your Mac, like I am, then I can do
my Mac Google Chrome.
But if you're using the CS50 appliance, you have to do everything
in the appliance.
So you have to use Google Chrome in the appliance.
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: It's still not working?
>> AUDIENCE: [INAUDIBLE].
>> ROGER ZURAWICKI: So just to repeat, how do you access the website now.
You have a URL here on localhost 3,000.
If you're in the CS50 appliance, you have to open CS50
appliance's Google Chrome.
And in that Google Chrome within the appliance, you can type in that URL,
and you should see a leaderboard.
So I'm going to just put it off to the side here a little bit.
And now I'm going to open my text editor over here.
So let me just make sure that the code is in order.
OK.
Great.
>> I'd like to now walk through the code a bit.
And the first file I'd like to start with is leaderboard.html.
You'll be able to get this code after the seminar, so I just want to show
you on my computer what's going on.
So I hope everybody can see this.
So at the very beginning of the file, we have our head and the title, which
is similar to what we saw in every HTML document.
And then we're going to have the body tag here.
>> What I've selected is the main body, basically what's
going to get displayed.
But there are some new non-HTML things, and that's in the
double angle brackets.
And these are template tags.
So you'll see here this bracket bracket new leaderboard.
And this is kind of-- think of it as calling a function for HTML.
>> This is a special version of HTML.
It's the version that Meteor uses, which is why you can display different
things, such as the leaderboard names and buttons.
But leaderboard tells you to go to the template with the name leaderboard.
So template does not get displayed by itself, but it's a function, so it
will get called.
And you'll substitute in all of this code right here into leaderboard.
>> The interesting part of leaderboard here is just this table.
If you just read it, read this code out loud, it should be intuitive
because leaderboard, all we have here is a table.
This ID class stuff you don't need to worry about.
Just know that there's a table header.
That's this thead.
>> And it finds a name and a score.
All these tags, like thtable, thead, you'll just learn as you go along.
It's not important that you memorize these because you can just access any
reference online.
Or by the end of the semester, these will just be very familiar with you.
>> After the header of the table, the part that I want to draw your
attention to is this h tag.
Because it's in double brackets, it's a template.
So that means for each of the players, whatever players is, we have to
display it.
And we go to the player template.
>> If we scroll down a bit more--
I hope everyone can see that.
We have the player template.
And this template basically defines a table cell, where you put in the name
here and the score.
Zooming out now, we can see that this chunk of code--
and that was our player down there--
defines one of these cells.
Each thing that I click becomes yellow.
>> A simple way I could change it now.
Make sure Meteor is still running.
Meteor should be a server process, so you just leave it
running when you developed.
Let's say I wanted to change all the names or the score.
And I would say I'm going to add points here.
So the change I made here was, instead of just score, I
add score space points.
>> I'm going to zoom out, and I'm going to save my file.
And after I save my file, I need to make sure Meteor is running.
Sorry about that.
I want to show you edits were done in real time.
So I'll just change some text.
Click a player.
I'm putting it in all caps.
And it should be that if this is working properly, when I save it, it
would update.
>> Oh, I think right now the problem is I'm not in the right directory.
OK.
I'm sorry about that.
So here, what you notice is my change went through.
Now say I want to revert the change.
I want to go back to what I had.
I'm just going to type it normally.
Click a player.
>> The moment I save it, the site refreshes for me.
And I see my change on the site instantly.
This is a really helpful feature in debugging because now
I don't have to--
when we write C code, not only did we have to save the file, but we had to
make it and then run it again.
Meteor is very nice because unlike C, the moment you save your HTML or
JavaScript file, the change shows up immediately.
>> One question is, in these templates, how do I get the values like players
or select a name?
If I zoom in here into my code, I see this for each players.
So the template knows that I have players somehow.
And it knows that there's a selected name.
Where does this come from?
That comes from the JavaScript.
>> And if you go to leaderboard.js, this file, now when I go here, we have a
few commands defined.
This is special Meteor syntax.
Notice that you don't need vars or anything.
But these are just structs upon structs upon structs or these objects.
And all I'm defining is the template called leaderboard.
>> Leaderboard should get a thing called players.
And what is players?
It's whatever this expression returns.
And what is selected name?
It's some more code.
The details of the code we'll cover a bit later.
But right now I want you to understand that in this code, we are taking
players, and we're giving it a value.
In this case, it's a function that gets executed.
So we can get the value back when we run the function.
This is a log.
Does that make sense?
>> I can change the way it's sorted.
Here, there's a sort object.
And what this says is I'm going to sort by score descending first and
then name ascending.
If I change this to one, it's going to sort score ascending.
So zero should be on the top.
And when I zoom into my website, we now see that the website updated.
And the score is ascend.
>> The next function I just want to cover is click increment.
Out of the interest of time, I won't be able to cover more of the Meteor
code, but there are plenty of resources available, and I will be
here after the seminar.
But I just want to cover the leaderboard events.
This syntax you'll learn a bit later in the lecture.
This is JavaScript.
>> We're just saying, when we get a click, and it's on the increment, this
hash just means ID.
On the increment ID tag, then we want to update-- the key words I want you
to watch is update and select and player.
So whichever player's selected, we update it.
And what we do is we increment its score by five.
And that will describe the functionality we have here.
>> After the end of this seminar, we'll be able to see some more code.
But going back to my goal that I want to change the site, I wanted over here
to add a remove button so I can delete the player.
So to do that, I need to do two things.
I need to update the HTML, update the view, what gets shown to the user, and
then have some JavaScript that when the button is pressed, Meteor is going
to do something.
It's going to remove that player.
>> So there are a lot of chunks of code that have basically already
been done for me.
If I look here, I already have a way of getting the selected player.
That's this stuff, if you can see it.
So if I just--
I'm going to have another event.
So I'm going to copy what I have.
Because this is a list, I just need a comma.
>> So now I'm going to click delete.
And then instead of players update, I'm going to do players delete.
And all players delete needs is a selected player.
So this function is all we need.
I do need to add some HTML here though.
So if I scroll down here, this is the HTML view.
We had a thing here, which was an a tag.
You don't need to worry about that.
>> What matters to you is this ID increment.
And this is what allowed us to say, when we clicked increment, we have to
give five points.
And you'll see that this is a button.
That's what the btn means.
And the text in the button is give five points.
So what I'm going to do is I'm going to copy this line.
I'm going to change the ID to delete.
And I'm going to change the text here to delete.
>> So make sure everything's saved.
I want to go back to my JavaScript to make sure that I have
delete lined up here.
Good.
So I'm going to save both files.
After saving both files, we can go back to the bottom.
And now we see we have a delete button.
And one more step.
You notice you might get an error because when I click
delete, nothing's happening.
>> A way to debug this is to go back to Inspect Element.
I'm doing this on purpose so you can see how you would debug something.
In Inspect Element, we have all of our text down here.
I want to go back to the console.
And what happens when I go here is I get some kind of error.
It says there's no method delete.
>> So what this is saying is when I go back to the code, I called player
delete here.
Delete is actually not the right command.
So to find out what the right command is, there's the Meteor API.
The documentation I want to point you guys to is just at meteor.com.
So I have it up here.
This is just so you guys know where to learn more.
>> There's a link to the documentation.
And basically, I can just do find for delete.
And what you see, delete is actually remove.
That is the command that I need to call.
So now that we know that, I'm going to change this delete to remove.
So now, when I go back to my leaderboard site, I'm going to click
delete, and now I'm gone.
There's no more Roger.
And I can keep going deleting every single name until I have nothing left.
>> So that was a little preview of how to use Meteor.
You'll be learning a lot more JavaScript and HTML necessary to make
it look prettier, which we'll cover in this week's [? piece ?] set for HTML
and JavaScript in the next [? piece ?] set.
>> So don't get worried if not all of this stuff comes easy to you.
It will by the time of the final project.
Thanks for showing up.
The link I will update soon after the seminar so you can see some more
examples that I've implemented on how to get the more advanced leaderboard
that I have on this website here at one-radical-leaderboard.meteor.
Thank you.
>> [APPLAUSE]