• Meteor

Build a Simple Application Part 1

From the class:  Getting Started with Meteor

I'd like to build a simple Todos application with you. The goal will be to tour some key technologies of Meteor. We'll be looking at how to create a new application and use packages. We'll see how to make a user interface using the Meteor templating system. And then how to use data and collections with mini-mongo.

We'll see how to publish data and subscribe to that data. And then add accounts and security to secure our application. Along the way, we'll look at debugging tools in Chrome. At the end, you should feel comfortable knowing your way around a Meteor application and be ready to build something more complex.

Let's start off by creating an application and opening up our development environment. We can do that by typing Meteor Create, and I'll call the application Todos. Then we can change into todos and take a look at the files. You can see Meteor created a couple of files for us automatically-- the CSS, HTML, and JavaScript file.

Next, let's start up the server and open up a browser. When we're developing in Meteor, we can see our changes reflected in the browser automatically. So to start the server, I'll type Meteor.

OK. In the left, I now have my Meteor application running on local host port 3000. And in the right, I have a browser open, and you can see the default application that comes with Meteor. I've opened up the JavaScript console so that as we develop the app, we can see any errors that get thrown, and generally so that we can debug our app.

Now I'll create a new tab in my shell and open up my text editor so that we can start building the application. Again, I'm using VIM, but feel free to use whatever text editor you're comfortable with, like Sublime. I'm going to start us off in the JavaScript file. You'll notice a lot of boilerplate code here that gets created for us automatically. And I'm going to go ahead and delete that.

The second thing to notice is that we have to If statements here. The first one says, if we're on the client or the browser, then execute the code in here. And if we're on the server, you can execute the code in here. What this means is that this file will run in both places-- on the server and on the client. We can create code that runs in both places by simply putting that code outside of these If statements.

So to start us off, I'm going to create a new collection called Todos. This is where we'll store our todo documents. I create the new collection by calling new Meteor.Collection, and then naming the collection. So the string that I passed as a parameter is the name of the collection in Mongo database. And then I've assigned this collection to a variable called todos that we can use to reference it.

So if I save the file and I go back over to the browser, I should be able to type todos and see that it's a collection. Now, because we're working with mini-mongo, I can write queries right on this collection itself, right in the browser. And so far, you can see we don't have any todos in the collection quite yet.

So to get us started with a little bit of data, I can go ahead and insert a todo directly in the JavaScript console. Let's give it a subject of First Todo, and we'll say that it's not done yet. Now, if I do a Find and a Fetch on the Todos collection, you can see it has one document in it with a subject of First Todo and an is done value of false.

We can start off by just typing in HTML directly into the body tag. So I will create some divs with classes which will be used to style them. And we'll create those styles later. Next, I'm going to render a template. So I'm going to use this special syntax. These expressions are called handlebars or mustache expressions. And this is saying to render out the template called the Todos Panel. And then down below, I'll create this template and give it a name of Todos Panel.

And just to start us off, I'll say, Hello World. And when I save the file here, you should see that appear in the browser on the right. Now, a quick note here. We've rendered out the template called Todos Panel. And sometimes you'll see that people lowercase the name of the template. So instead of having this, it's like that. Just by convention, I use a capital letter for template names. And you can choose to do whatever you're most comfortable with.

So this is a key organizing principle of Meteor applications in the user interface. User interfaces are made up of templates, and templates can render other templates. Let's start off by creating a container div with a class of Todos Panel, which again I'll use to style this a little bit later. And then we'll create an unordered list, and we'll give it a class of Todos List.

Next, what we're going to do is to iterate over all of the items in our collection. To do that, I can use something called a block expression. That's with this pound symbol here. And then I'll type Each, and then Items, which we'll define a little bit later. You can think of items as an array of documents. And for each one of those documents, we're going to render out the HTML that's inside of here.

So in this case, we'll render out a list item, and we'll give it a class of Todo Item. And then inside of here, we'll render out another template called Todo Item. Now let's go down and define that todo item. So we'll create another template. And inside of this template for now we'll just say, it's a todo item.

Next, I've opened up the JavaScript file in the lower half of the editor so that we can take a look at HTML and JavaScript at the same time. What I'm going to do is inside of the client If statement, I'm going to define a helper on the Todos Panel. So I can reference the Todos Panel by typing Template and then Todos Panel. And I can call the Helpers method and pass an object of Helpers.

So what I need to do is to define the items helper. And that'll be a function that returns either a query from our collection, or an array, or some kind of data. And in this case, what we want to do is iterate over all of the items in our Todos collection. So what I can do is simply return the result of calling todos.find.

Now over in the right, you can see we have one item that shows up in the user interface. In the browser JavaScript console, I've called the find and then fetch method on our Todos collection so we can see, again, the documents that exist in it. So far we only have one todo with a subject of First Todo.

In the JavaScript, what we're doing is looping through all of those items that are returned from calling todos.find. And then for each one, we're rendering out this list item, and then rendering out the todo item template. So let's fill in the todo item template now.

In the todo item template, instead of just hardcoding item, instead let's print out the subject of the todo item. So now you can see over on the right, when I save the file, we see the subject of the todo printed as the list item. So it says First Todo.

We can access this value of subject because we have something called a data context. The data context is the object or the document that is the current data context for this template. In this case, it's our todo item. Because up above on line 14, we're looping through all of the items, or the todos, and for each one, we render out this todo item template. And so the data context for the todo item template is the particular item that we're on.

Next up, we'll add some styling using the bootstrap library. And we'll fill out our user interface with the ability to add new todos and then complete them. To do that, we'll look at more advanced helpers and event handlers.