[MUSIC PLAYING]
ROGER ZURAWICKI: Hi, my name is Roger Zurawicki,
and I will be covering the CS50 Meteor seminar.
Meteor is a new framework devoted to the new kind of web,
not the PHP making requests back and forth kind
of web we saw in the PHPP set, but the more dynamic JavaScript
parts of the web.
Things Meteor can do includes Live Updating
and immediately communicating between users of the same website.
>> For this seminar, we have code hosted at my GitHub.
You can go to this URL and download it.
If you know how to use Git, you can clone the repository.
If you don't know how to use Git or have not used GitHub,
that's completely fine.
I will show you really quickly how we can go to GitHub,
and there's an option to download a zip right there.
Once you download this directory, you can get started playing with our code.
>> More information about Meteor can be found at meteor.com.
In the Seminar folder, I actually have some Meteor projects we can use.
One of the folders we have in our seminar project is the todos app.
So if I go into it I, have Meteor installed.
So to run it, I just need to type Meteor, and Meteor will install.
As you can see, we have to make sure we installed Meteor.
So I'm just going to run it one more time
to make sure that Meteor is properly installed.
>> While I have Meteor installing, I can show you
some live demos of Meteor sites going live right now on the internet.
I have a demo of our app.
You can access it at the following URL.
This is the to do app that we have in our seminar directory.
The URL for this is rozu-rabbit.meteor.com.
You'll see that Meteor will actually host your Meteor projects for free.
And at the end of the seminar, you'll be able to do this as well.
>> This is a to do list app.
And you can sign in, create accounts, and add tasks.
You can create an account like so.
And now, once you have an account, you can add tasks.
For example, one of the tasks I might need to go pick up my laundry.
And if you're on this site online, you'll
actually see this task on your computer in real time.
>> I can show you a quick demo of this by opening rozu-rabbit
in another tab with the same URL.
And we see that the same data comes up.
We can also run it in a different browser.
Say I run it in Safari.
That way we're not logged in.
So we have the same Meteor app, and once it loads,
we'll see the same data we did in the first one.
As you can see, I'm not logged in here.
And when the audience checks data, it updates on all the browsers
simultaneously.
This is one of the really cool features about Meteor.
With almost no work, you have a live updating app
that changes on all of your devices at once.
>> If I check the check box here in my to do list, we will have,
in my other Chrome browser, the item checked off.
And this happens instantaneously.
All right.
So it looks like Meteor installation is ready now.
So now let's go back to the todos app and run this locally.
>> If you have a Meteor project, you can just run it with the command Meteor.
Once you do this, Meteor will do some preparation
to make sure all of your code is in check.
And then it'll tell you that the project is ready to be served.
You might need to allow your firewall, if your computer blocks you.
>> So what Meteor is telling me right now is that at this website
local to my computer, I can see what this Meteor project is.
Note that right now, my app is not accessible to the internet.
We'll cover how to bring your Meteor app to a live site a bit later on.
So I'm just going to copy this URL now and go into Google Chrome.
>> And this is the to do list from the example.
You can see they implemented a few more features here.
We have different tabs, we have the same account features,
and we can add new lists.
Now, one of the really cool feature about Meteor
is that not only can this work on your web browser,
but you can also create native iPhone and Android
apps through a tool called PhoneGap.
>> So some projects will come pre-configured for running
on iOS, like this todos app.
So all I need to do to run it in iOS is type Meteor, run, and then iOS.
And when I do that, Meteor will prepare the package again.
And then, once it's ready, it'll load the iOS simulator on my command.
Note you can only run iOS apps if you have a Mac computer.
You can run your apps on Android on all platforms.
>> So now you can see that my iPhone simulator came up on my screen.
And in just a moment, it'll load with the app.
If we make it just a bit smaller to fit on the screen,
we see we have our iPhone app.
And just so we don't get confused, let's make
sure we are on the same website, the local host 3000.
>> So right here is an example of the Meteor app I have,
the todos app, running both on a phone and on a web browser.
And when I change stuff in the web browser,
it immediately goes to the phone.
And I can delete something on the phone, and it changes in the web browser.
>> Now, normally to create native phone app for iOS or Android,
you need to know either Java or Objective C. The technology Meteor uses
to allow JavaScript to run as your app is called PhoneGap.
What your app essentially is is a web browser.
And Meteor handles all the tricky parts involved
for bringing that web browser to your iPhone or your Android device.
You can see that the user interface is smooth,
and it looks and feels very much like a native app.
Notice that if I go to the home screen now, I also get an icon.
This isn't a website like you'd find in Safari.
This is its own app.
You can install and delete it if you'd like.
>> We can briefly show you what the code for this kind of todos app looks like.
If you look in the todos folder, you will see there are many folders.
But over the course of the seminar, we'll
understand what each folder is used for.
Let's go into the terminal so we can see the files a bit better.
>> I'm going to press Control C to stop the server,
and now I'm back in the todos app.
I have different folders here, like the client folder, the server folder.
And these folders simply mean that everything in the client folder
gets executed on your web browser.
Everything in a server folder gets executed on a server.
>> What I want to point out is that what we had
when we had our phone running and our web browser, these were clients.
But what's running in a terminal, that's the server.
We have other folders, like lib, which is library code,
like your helper functions, which you can
use on both the client and the server.
And then you have a public folder and resources
folder necessary for getting your images and other CSS loaded.
>> If you have Meteor installed, we will continue with the tutorial for Meteor.
You can go to this URL, meteor.com/install,
to get the command line that I showed you that installs Meteor.
We will go through the first few steps to get a better
feel about how to install Meteor.
>> But first, I think it's important that we review a little bit of JavaScript.
To show you some examples of how our C knowledge can be translated
to JavaScript, I've created a few examples.
They are in the js directory.
So if in the seminars folder you look, there's a folder called js.
And in here, we have a few examples.
>> Let's open up the first example and see very quickly.
What we see is your standard hello world command.
You notice in C that you have quite a few lines.
And as CS50 students know, we need a main function,
and we have to include the standard I/O library in order to call printf.
>> Let's look at how JavaScript compares.
I'm going to open ex1.js.
Commented out is what the C code would look like,
and the line below is all you need to run in Node.
You don't need a main function, you don't need to include any files,
and you don't need to return.
You just call console.log.
This is the equivalent of your printf.
>> And it takes the same arguments printf would.
And in order to run it, instead of running make ex1,
you would just call Node ex1.js.
You write Node and then the file, and it gets run.
It does not get compiled.
JavaScript is a interpreted language.
So it doesn't need to be compiled before it's run.
If I wanted to run ex1.c, I have to make it first,
and then I can run the executable to get the same output.
>> Let's quickly cover some other JavaScript concepts.
Let's look at example two.
In ex2.js, in ex2.c, we can see that we have some code.
Let me quickly go to a better text editor
that will show these new lines a bit better.
All right.
Here we have example 2.c.
Here we have different types that we're printing out.
And as we know, printf takes different percent arguments
to access different pieces of data.
If we want to print a string, we call %s.
If we want to call a floating point number, we called %f.
And there's no easy way to call a Boolean by its true or false value.
But if you use %d, you can get a 0 or a 1 for false and true.
>> JavaScript is a bit nicer for us.
In JavaScript, let's look at the few differences we have in this file.
First, you notice that in C we have to initialize every variable with a type.
S is a char star.
It's a string, and it cannot be any other type.
N is a float.
B is a Bool.
>> But in JavaScript, there are dynamic types.
That means that you don't need to tell JavaScript
what types your variables will be.
You just say var for variable, the name of the variable, and then its value.
So a var can be anything really.
It can be a string.
It can be a floating point number.
It can be a character.
It can be a Boolean.
And console log works a bit differently.
If you want to print a number, you call %d.
But most values can be printed as strings just fine.
>> Let's run this in Node to see what would happen.
I can call Node ex2.js, and we get printf
with the values CS50, N as the floating point number,
and then B as the Boolean converted to a string true.
What about if we made example 2.c?
Well, we still have some more annoyances with printf.
Notice that the floating point number has to be formatted correctly,
and that the Boolean can't simply be displayed as true or false.
All right.
Now let's look at example three.
In example three, we are showing how you would use a for loop.
In fact, it's very simple.
One of the nice things about JavaScript is that it is C based.
That means that a lot of your code will look very similar
and feel very much the same.
In a for loop, the only thing that has really changed here
is instead of int i, we have var i.
We can still assign it to value zero, check that it's less than five,
and increment it by one with the ++ operator.
We call console.log on i, and that will print us a number with each line.
Let's run it really quickly to see what it outputs.
We get a new number in each line.
Another thing I want you to notice with console.log
is you didn't have to write backslash n for the new line.
Console.log will print everything on its own line.
That's a nice feature that JavaScript gives us.
>> Now let's open up example four.
In example four, first in the C, we are calling a few functions.
Notice that we have to declare the functions before we use them in main.
If we had main first and then add and then high, make,
clang, or GCC would give us an error saying
that it doesn't know what high is.
It doesn't know what add is.
So in C, you have to be picky about the order in which you call your functions.
>> Let's look at how you can do this in JavaScript.
We have different files because there are a few different ways to do this.
One way is pretty much a direct translation.
Because functions in C return types, and JavaScript
doesn't really know or care about what type you return,
you don't write a type.
Instead, you just need to write function,
and everything is pretty much the same as before.
>> When you have a variable, like in add, we just need to write x and y.
We don't need to say x is an int.
We don't need to say y is an int.
We return with the same syntax.
For high, we declare it with function instead of void.
Notice that whether it's void or non-void,
it's still all the same function.
And we simply don't put anything in parentheses,
and it looks very much like the C code.
And below, we can call it below.
>> If we look at example 4b, we notice that I've changed a few things.
The only thing I've changed really though is the order.
We have the same functions, but now they're
declared after they're used in console.log and high on lines 18, 19.
If you did this in C, make would throw an error.
Here, this works just fine.
And I can show this to you by calling Node on 4b example.
>> Another way we can call functions is by saving functions as variables.
Like I said, a variable can have any type.
One of the types a variable can have is a function.
So if you look at example 4c, what I've changed
here is var add instead of function add.
And now add equals a function.
This function here is anonymous.
It has no name, so it's just function and then the parentheses.
The syntax after that doesn't change, but you
do have to keep in mind that you have a variable that you're
storing the function into add, and a variable that you're storing into high.
>> Because add and high are now variables and not functions, something changes.
This is a common bug I see in a lot of people's JavaScripts,
and something to keep in mind.
When I run this, let's see what happens.
I get an error.
It's saying undefined at this point.
So it's saying it doesn't know what add is.
>> Because now add is not a function, add is a variable.
And you haven't actually given add a value yet when you used it.
That brings us to example 4d, where if you want to use variables as functions,
you just need to make sure they get the value before they're used.
>> Let's move on to example five then.
Here, we talk about structs in C. In C, structs
have this fixed structure to them because you have to declare them
before you use it, and you say I have a student,
and every student has exactly one name, one year, one gender.
It has to have all of them.
It can't have any other values, and they have to be specific types.
>> Then we can initialize the struct in this nice syntax
because it knows the order.
So it knows that Roger is a name.
It knows that 2016 is a year and M is a gender
because we told it this list is a struct student.
And then you can print it, accessing s.name.
Let's see how we would convert that to JavaScript.
Notice that s is now a variable, and there's no type.
It's just a var again.
Because it doesn't matter if the type of this variable is a pointer,
it's a struct, or anything else.
We have a slightly different syntax.
This syntax is the object syntax.
>> You might have seen it in JSON.
JSON actually stands for the JavaScript Object Notation.
This is how you define objects in JavaScript.
We have a key, which is the value, like name.
And we give it values on the other side of the colon.
And one thing to keep in mind is you don't need to have a name and a year
and a gender for an object.
An object can have no values.
It can have as many as you'd like.
>> We can use these objects in just the same way we would use a struct, s.name.
We can run it really quickly by doing node example 5.c.
We can't actually run a C file in Node.
It doesn't know what C is.
It only knows JavaScript.
When we run the ex5.js, we get the value, which we expected.
>> Let's move on to example six.
Here I just want to talk a little bit more about JavaScript arrays
because they're a bit different than what you're
used to in C. Arrays are notated, not with the brackets like in C,
with the curly braces, but brackets.
You can have an empty array, like arr in line four.
You can have arrays with multiple values.
And you access them just the same way in C.
>> Up to line seven, everything seems pretty straightforward.
One minor difference is here at line 10.
The way you get a length of an array is just by calling .length.
An array can actually be treated like an object,
and this object has a length property that you call to get the length of it.
Notice that this is different in C because in C you
have to know the length of your object ahead of time.
>> So another nice thing about arrays is that you can have different types.
If you have an array in C, there are arrays of a specific value,
either a struct pointer or floats or [INAUDIBLE].
Here, you can have different values.
I first had a floating point number, then a Boolean, then another integer.
And actually, they can change types too.
Look at line 16.
Array two is changing from being a number, an integer, to a string.
>> Another nice thing about arrays is here at line 19, they have infinite size.
You can just say I want the hundredth element to be the string legit.
And this doesn't seem to make sense because the array only
has space for three elements, so the end should be two.
But when you do this, let's see what array three becomes.
We would run this quickly with node example six.js.
We get this really long array, and what happens
is we have the first few elements and then a bunch of blanks
until we get our string.
JavaScript fills in the array as it's needed.
>> Let's finally go to our last example.
Here we have a list of different students.
I want to talk a little bit about some nice aspects
of for loops in JavaScript.
In C, for loops are kind of limited.
They have a fixed structure, where you have a variable, you have a condition,
and then you do something at the end of the loop.
And of course this works in JavaScript, as we saw in the previous examples.
But we also have nicer ways of doing this in JavaScript.
This is called a foreach loop.
>> Sorry, let's go back to example seven here.
We can also say section is a list.
So give me every i or every index in that list.
Then we can get the student by just calling section of i.
So all of the code of setting i equal to zero and making sure i
is less than the length and adding one to i every time, that's
taking care of you rather nicely with this foreach loop.
>> Not only do foreach loops work in lists or arrays,
they also work in objects, which is also nice.
You can get the name of every property by just taking
a dictionary or an object, like student, and then just saying give me every key.
A key would be these properties, name or house.
So what's going to happen here is that we print out first the name and then
the house of every student.
>> I can run this in Node really quickly to show you.
We get first the C style for loop, where we get every object being printed out.
And then we have the JavaScript style, where you can just
print out every key and value individually.
>> All right.
Now that we've covered Node.js, I think we're ready to get started with Meteor.
Like I said, Meteor did a great job of writing some ready-made examples
for you that you can explore through this tutorial or in the seminar folder.
But here I want to start more from scratch.
>> Let's create a simple to do application.
This is kind of the base of what the to do application I showed you earlier is.
In this tutorial, you will see that there's
a command Meteor create to create a new Meteor project.
You need to call this in order to run Meteor projects because it
will run the commands to create the Meteor
files necessary for your project.
>> If you go into the terminal, we can go into the folder called step one.
And step one will correspond with the first step in the tutorial.
Notice there are folders, step one, step two, all the way to five.
And each one is corresponding to a step in this tutorial.
I'm going to open it in my text editor here
so we can see a bit of what was created.
We notice that there are four main parts.
There's a Meteor directory, .meteor.
And that you usually don't need to touch.
Meteor takes care of that folder, and it just
makes sure that your project will work correctly.
>> We also have three files, a HTML file, a JavaScript file, and a CSS file.
Let's first start with the HTML file.
At first glance, this looks like a normal HTML document.
But notice that there are a few differences.
One, this isn't actually a complete HTML document.
We're missing the HTML tags.
This is normal.
In Meteor, you're not expected to create these HTML tags.
That's done for you.
You want to begin-- if you want to create a website,
you just need to start with the head tag,
define that, and then define the body tag.
>> But if you notice in this HTML file, we have a new tag.
We have the template tag.
This is not normal HTML.
This is a special version of HTML that Meteor makes available to you.
It's called space bars.
You can define templates as little modules, kind of like helper functions,
in your C or JavaScript code.
This template would have a name called task.
And you can see right here on line 13 that you can call these templates.
And what Meteor will do is just fill in these tasks for you.
>> Another thing you might notice is a bit different is this each function.
Each will take the variable tasks and kind of go through it
in that foreach loop we saw in example seven.
This each can take a dictionary or a list, an object or a list,
and it'll just go through all of the values like a foreach loop would.
So if we have a bunch of tasks, this will call the template on each task.
>> Let's run the Meteor project just to see that this happens.
I run the Meteor project with just Meteor or Meteor run.
And now Meteor just will need to quickly prepare the project,
start the database as necessary, and then post the app locally.
We can go to our web browser now.
And we'll see that we have a very simple app.
So what we saw showed up was actually the step one, the step one file.
>> Let's move on to step two only because I think it will serve the same purpose.
I'm just going to change to the step two directory
and run Meteor again so we can see the template we just worked with.
Yes, a question?
>> AUDIENCE: If we're getting permission denied, is that-- what's it
called for that?
ROGER ZURAWICKI: If you're running Meteor run,
and you have permission denied, some of your files
might not have the right permission set.
So you have to check where the permissions are off.
They could be off in your Meteor project,
or they could be off in the Meteor files themselves.
>> AUDIENCE: If I downloaded it just now from your GitHub, then what should I do
[INAUDIBLE]?
>> ROGER ZURAWICKI: If you want to make sure you can access it,
there's a command you can run.
Let me quickly write it out so other people can see it.
I'm going to open a new tab here and go into my seminar folder.
Chmod is the command to change permissions,
and you can say r for do it recursively for every file.
And permissions, you can try 0755 to make sure you have full access,
and everyone else can read.
And if you just run this command, it'll make
sure the permissions are in check for the whole directory.
Running ls-l can show you the permissions in more detail.
This looks OK.
>> What's most Important is that you have all three
rwx for all the files in the seminar directory.
Did that solve the problem?
>> AUDIENCE: It says missing operant [INAUDIBLE].
[INAUDIBLE]
ROGER ZURAWICKI: You have to make sure you
have a dot at the end of your command.
AUDIENCE: [INAUDIBLE].
ROGER ZURAWICKI: All right.
Let us quickly go back to the local host, the app we have.
And you'll see that we have a few tasks here, as expected.
We have a bunch of CSS, which you don't need to worry about.
The Meteor tutorial just gives this to you
to make your to do list look a bit nicer than the plain HTML.
And we have the JavaScript file, which I'll go into more detail a bit later,
but it just provides these tasks.
This is task one.
This is task two.
This is task three.
So this is the data Meteor's getting.
>> One of the cool things about Meteor is that changes can happen automatically.
If I wanted to change the name of the first task,
so it would say this is not task one, and I save it,
then when I go to the web browser, you can refresh it,
and it automatically says this is not task one.
You can do the same thing in any of these files.
Make a change, instead of to do list, I will have it my to do list.
>> And one thing you just noticed, that I didn't even have to refresh.
The idea of refreshing is kind of solved for you with Meteor.
Whenever it detects the file changes, it will load the changes for you.
This works on all files, whether it's HTML, CSS, or JavaScript.
To show you what this app would look like without CSS, I can remove it all.
And when it's reloaded, you now have a not as nice-looking to do list.
Let's put that content back.
And surely enough, it refreshes, and our CSS is back.
Great.
>> We can now move on with the tutorial.
Let's talk about step two, templates.
This is what we just saw with the different tasks.
Meteor will explain to you what templates and how this logic works.
But let's just look at the code to see if we can make sense out of it.
>> In very simple applications, like what we have in the simple
to do, step one, step two, step three, step four, step five,
we don't have any folders.
We don't have the server folder I mentioned.
We don't have the client folder that was mentioned.
So Meteor will run all the files.
It'll run it both on the client, both on the server.
>> And if you want parts of your JavaScript code to run just on the client,
they need to make sure that you have an if statement, kind of like what
we have in our JavaScript file here.
So Meteor, only if it's the client, then I
want to define a template helper called tasks.
What this code really does is it says there's
a object called template that Meteor provides.
And we're going to add a helper.
Helpers are these tasks, these things like the tasks.
>> You'll see that if we go back to the HTML file, we called each on tasks.
Tasks is not defined in the HTML.
It's defined in the JavaScript.
And Meteor needs to know what tasks is when we go into the JavaScript here.
Tasks is this helper.
Helper, you can think of it as a template variable.
And what does tasks do?
Well, it returns the list of values.
Because it's a list, we can call each in it.
So that's why we call each on tasks.
And now we have task.
>> What does task do?
Well, it has this arrow here after the curly braces.
That means task is a template.
It's not a helper, like what we just saw.
It's a template we've defined.
And where have we defined it?
We've defined it below right here.
>> All this template does is render a list item, and it calls text.
Now, text seems to be a helper, but I'll show you
that this is actually still a data member of tasks.
When you call each, it goes into the data structure a little bit.
Like the foreach loop, it now just looks at the first element in our object.
We see that text is defined here in our object.
So Meteor is smart to know that we're talking about this text,
not the helper called text.
It just gets the value of this text here and displays it as HTML,
and that's how the data goes from the JavaScript to the HTML.
>> Moving on though, in this example we hard coded those values.
Meteor does two really nice things for us.
Besides the live refresh that we showed, it also manages our database.
If you had to work with PHP, you had to configure phpMyAdmin.
You had to make sure your tables were all in check.
You had to do a lot of work to make sure your data was formatted correctly,
and PHP could communicate with it.
>> Now, Meteor uses a new paradigm.
This is a more modern way of handling a database.
It's a technology called MongoDB.
Just like in JavaScript, we saw that it didn't matter what types the data had.
Everything was a var.
It wasn't a charstar.
It wasn't an int.
It wasn't a struct.
It was just var this, var that.
>> MongoDB works kind of the same way.
You don't have to define your tables.
You don't have to say a table has a name, which has an int.
It has, I don't know, a dollar, which is a decimal.
It's just these JavaScript objects, all these vars, essentially.
And this is a really powerful way to prototype your app.
And that's why Meteor takes advantage of this.
>> If we go to step three, let's see what has changed.
If we look at the todos HTML, not much.
CSS hasn't changed at all.
But the small change we see in HTML is we've changed how tasks is defined.
Tasks is now a function.
That means that every time we want to get tasks,
we're going to run this function.
It doesn't return the function as a value.
>> Meteor is smart to actually run the function to see what we get out.
And it returns this thing called tasks.
We've defined tasks on line one, and it's a Mongo collection.
Mongo is referring to the database Meteor uses,
and this new just means let's make a new collection, call it tasks.
In MySQL, this would be equivalent to looking for the table called tasks.
Mongo has collections, not tables.
So this just looks for tasks.
>> Now, template in our helper in the template, all
we have to do to get all the tasks is this function, find
and this empty brace.
This is more particular to Mongo syntax.
There's plenty of documentation online for how
you can make efficient and really useful Mongo queries.
But something like this is good enough for just finding all the data.
>> Now, one of the issues you might see is that we never actually add data.
So what happens when we actually run step three?
Let's quickly go into step three and run Meteor.
Notice that I had another Meteor project running somewhere else,
so Meteor doesn't like that.
I'm just going to quickly close to the other Meteor with Control C,
go into step three, and run Meteor again.
Notice it's starting MongoDB because MongoDB
is a part of every Meteor project.
>> So it says my application has errors.
That's a nice feature Meteor has.
It makes sure your HTML is well validated.
Let's quickly look at why this might be.
It seems I have accidentally copied the wrong HTML code.
If I save it now, Meteor automatically restarted the server,
and now the app is running as expected.
Notice to fix this, you can just run the same HTML file from step two,
copy it into step three.
>> We can go back to our local host.
And now we see we have our to do list.
Great, but it's empty.
We don't actually have any tasks in our Mongo database.
So let's talk about a few ways we can do that.
If we go back to the terminal, we can close it and run Meteor Mongo.
>> If you're familiar with how Meteor works,
this actually gives you access to the full MongoDB for Meteor.
Notice that you have to be running Meteor first for this to work.
So if I run this in a new tab, I can go back to the same directory.
And now Meteor works just fine.
This is a prompt.
Let me make it a bit bigger so we can see.
This looks a bit different than what you might be used to you
don't really need to use Mongo.
The whole point of me here is so that you can use JavaScript.
But if you're curious, the Mongo API doesn't
use SQL, the Structured Query Language.
It uses its own language that looks a lot like JavaScript.
Very quickly, we can find the table via db.tasks.
And it's telling me turns out if we run find,
kind of similar to what we had with Meteor, we can load all the elements.
The problem is, we don't actually have any tasks defined.
So it can't get them.
>> We can insert, though.
So we can run insert with command insert.
And we just give it an object, and we just
make sure the format is what we expect.
If we looked at step two, we saw that every task
was an object with a text as the key and whatever
your to do item was as a variable.
So we can do something here.
>> We can have it insert a task called I come from Mongo.
And we press Enter, and it runs.
We can run find again, and we see that there is an object here.
Mongo assigns it an ID, which you don't really need to worry about.
What's important to you is the data you put in, is the data you get out.
>> Let's go back to our website, and hey, our task loaded.
And you can see that because Meteor is very smart
and always refreshes for you, I didn't have to touch the page.
It automatically loaded.
>> Let's run some code in JavaScript though to do this.
Like we have Node in the back end to execute out JavaScript,
we can also run JavaScript directly in our browsers.
You can do this by a feature called Inspect Element.
If I right click on a section of the page,
there's an option called Inspect Element.
If you're running a browser like Safari, you
may need to enable your developer tools before you get this feature.
>> What we care about is the console.
So we will just go to the console at the bottom.
Now we can run any JavaScript here, like the JavaScript
files I showed in the js example.
But now let's look at tasks.
We can run our command.
And hopefully I'll be able to make it a bit bigger so we can all see.
>> If we run tasks.find, and you'll see that this is the exact same code
that the JavaScript file uses in step three, this task.find.
We can run the same thing, and now we get some weird stuff.
How do we actually get the data?
Well, we have to run this command called fetch.
>> This is very useful for debugging.
What you get here is a cursor, and this is
a nice way Meteor has optimized fetching data.
This cursor has all the features for live updating and refreshing the page
when something has changed.
But it won't get us the data.
We can get the data via fetch.
And you see we have an object, and it's just like what we had in Mongo,
with an ID and the text we put in.
>> So how do we insert an item in Meteor?
Well, we just have tasks.
And then we can run the same insert command,
giving a dictionary or a object with the same format, text
and then I come from the console.
Take a look above because when I do this, it shows up on the website
automatically.
>> Notice that you can put anything you want in these items.
It doesn't have to have a fixed structure.
I could have a equal to the number three and b equal to false.
And it all works.
I can even choose not to include a text at all.
This is just not recommended though because then Meteor
will not know what to display.
But in each case, we get an ID, and that's
the ID of the object you can use.
>> As we continue with step four and step five,
the tutorial will show you ways that you can create UI elements using
the HTML you know to create different tasks.
Let's look at step four really quickly.
We'll see that we added a section about events.
Templates can have helpers, which get us data.
But it can also call events.
And this is where stuff becomes useful, because events
are what happen when you click on different things on your website.
>> Here, our code is telling us to add this event.
Add it when you've submitted something with the class new task.
What you have here is a CSS selector.
So this just looks for an HTML element that has the class new task.
And it looks for the event, like submit.
Other events include click, hover, double click,
similar to what you get in normal HTML.
>> What you give it here is now a function.
And you can have your code in that function.
This function is what ends up getting called when you submit this new task.
Let's look at the HTML just so we understand what this new task is.
We've added a form here with class new task.
And it has an input that takes text.
And this is where we will add our new tasks.
>> Let's run step four in the website to see what it looks like.
We can quit first out of the MongoDB we had
from our previous example with Control C.
And let's change it into the step four directory.
We'll run Meteor again to start the server.
And unfortunately, I had Meteor running in another terminal.
So I'm just going to make sure this closed.
Let's quit this and change to part four, step four.
OK.
>> Now our Meteor code is running.
And you can see that it updated, without us even having to refresh the page.
What has changed here is now that we don't have any tasks,
but we have a form here, this text box, to add our new tasks.
And we can type our task here.
I come from the HTML page.
When I press Enter, it got submitted.
>> We can see what happened as defined by the JavaScript code.
What this function did was take the text from the form,
and then just called tasks.insert, like we did in the console.
They also chose to add a createdAt date.
This is how you would specify the current time.
After that, it clears the form by making sure the value is the empty string.
>> And then it calls return false to make sure nothing else happens.
When you return false from a form event, that stops execution.
Say a form has an action, like submit to a PHP page.
If you had not returned false, you'd return true.
It would end up making that request.
False intercepts it and stops it right there.
>> So that was a little demo about how Meteor works, and we've
been following the tutorial for a while.
And you can please feel free to continue doing this.
There are plenty of resources, and the tutorial is actually just
very good about explaining what's going on.
I do want to show you now, in the few minutes we have left,
what are some of the cooler features of Meteor,
and what are some of the more useful packages.
One of the great things about Meteor is that you have a package system.
You can easily incorporate code that many thousands of developers
have written worldwide into your Meteor project.
One example of this is what you might do in step nine of the tutorial, where
you are trying to add accounts to your Meteor project.
If we have a CS50 PHP project, we would have
to rely on the framework or our own code to make
sure we securely handle passwords and usernames
and storing the database and all of that.
>> It turns out Meteor has some packages to do that for you,
and to do it very easily.
What we can do is add a few packages.
So let's do that right now in our console.
I'm going to quit the project and right now go into simple-todos.
Now, simple-todos is the project that you
will have after being done with step 11 or step 12,
at the end of this tutorial.
And let's quickly look at it to see what are the different features we have.
Let's just make sure it's running.
Sometimes it takes a while to refresh, but here it is.
>> We have our option to hide complete tasks, and we can sign in.
And this was done with the Meteor package.
It's great.
We have now username and password sign in.
But what if we wanted to add another kind of login mechanism?
Let's say I wanted to log in with my Meteor account.
I'm going to run meteor add, and this is the syntax for adding packages.
I can say accounts, and accounts.meteor.
It's going to now find the package and load it.
You can see that I have not found the right package name.
>> So how do you find out about packages?
Well there's a great website, made available by the Meteor people,
called atmospherejs.com.
Atmospherejs, one word, dot com, is a great repository
for finding all of the Meteor packages in the repository.
I can search accounts, and then it'll show me all the relevant stuff,
all packages with the account's name.
>> While that loads, we can try adding some other packages.
Maybe the Meteor package isn't working right now, but I can add Facebook.
I can add the account and then run the Meteor project again.
Once this starts, let's see what's changed on the website.
You can see-- I might have to refresh it here.
>> I have a button to configure Facebook login.
And here, I have all the instructions Meteor
has prepared for you for setting up a Facebook app.
And you can use that information to add your IDs.
Once that's done, you'll have Facebook login working in your app.
>> I'm just going to get an app ID and a secret,
just to show you how this might work.
You will need a Facebook account to use Facebook developer options.
Let me just quickly find the Meteor keys that are necessary.
I have another Meteor project that I'm going to use,
and I'm just going to take the keys from that file.
>> And once I find it, I'll just be able to copy these keys into my Facebook.
So here is a key.
And this is secret.
You should not be sharing this with people.
And then you give it your app secret.
And this is so Facebook knows you are you.
And you save the configuration.
>> I think in the process I have stopped my Meteor app.
So I just want to make sure it's still there.
OK, let's make sure our Meteor server is running so the web page is running.
Notice if we stop the Meteor server, the page is still there.
It just won't update anymore.
The Meteor server is necessary for making sure the page is live.
>> OK, I've submitted it, and now I can sign in with Facebook.
Now it's just a matter of having a Facebook pop up
and putting in your account information and logging in.
Once you do that, Facebook might nag you for some more security.
So we'll just stop there.
The point is that when you're done with that, you'll have Facebook login.
>> Meteor has a bunch of other packages as well.
You can log in with Google+.
You can log in with GitHub.
You can log in with Twitter.
Or if you search, you'll find plenty of other things
like Meetup, LinkedIn, and Meteor Developer.
So Meteor Developer was the package I was looking for.
meteor add accounts-meteor-developer.
In the meantime, I also want to recommend
some other packages for your projects.
It might prove useful to include the jQuery package.
This allows you to use jQuery in your clients.
You could just do it with one line, and Meteor will make sure you're up to date
on jQuery.
I also recommend houston:admin.
>> This is kind of like a phpMyAdmin kind of tool for your MongoDB.
This allows you to edit your data quite easily
without having to go to the Mongo shell, like I had done earlier in the seminar.
So now that that's running, let's run Meteor again and see what we can do.
>> You notice that adding some packages might have them present some warnings.
You won't need to worry about that with houston.
So we can now have the option to configure Meteor admin.
And they give you the directions if you want to set that up.
>> We can also now go to /admin.
This is brought to you by the houston package.
And this is Meteor admin interface.
You just create an admin account, like so.
And if you refresh the page, you might have some collections showing up.
>> It's a very useful tool, and I strongly recommend it.
You can see that because houston was giving some errors,
we don't have any collections showing up right now.
The way you would use houston is making sure this function gets
called in your simple-todos.
So houston doesn't know what my tasks are.
>> We set up a Mongo collection called tasks.
Let's go into simple-todos and just make sure that in the JavaScript,
we have added tasks to our collections.
We've now saved, and it's building the application, refreshing.
And let's see.
Now we have some tasks.
And we can add some new tasks.
But if we want to add tasks, let's do it with the app itself.
>> Now we can add some data.
Hi, this is a task.
It seems kind of strange that we're not seeing any tasks.
We might want to check if we got any errors here, or maybe somewhere else.
If we go into admin, that seems strange.
If you pull the repository after this seminar,
I will make sure that simple-todos works with houston.
Unfortunately, it doesn't seem to be working at this very moment.
>> Are there any other questions?
Houston normally is a tool that works very well.
Houston specifically is a bit buggier than the other ones,
but I do recommend it when it works.
Yeah.
>> AUDIENCE: What can you do with the Facebook package
once a user is logged in with their Facebook?
>> ROGER ZURAWICKI: Once a user's logged in,
you can make calls to the Facebook API.
A lot of that lies more in how Facebook opens their API.
Meteor, make sure you have the connection.
But everything after that is a matter of learning how to use the Facebook API.
AUDIENCE: [INAUDIBLE].
ROGER ZURAWICKI: All right.
Thank you very much for this CS50 seminar in Meteor.
If you have any questions, you can email me
at my email address listed below the seminar.
And I'll be happy to answer your questions.
I'll also be at the CS50 Hackathon should
you need help with your Meteor projects.
Thank you for watching.