- Overview
- Transcript
3.3 Write a First Meteor Method
Meteor methods are the way we can execute server code from the client. This is a great and simple way to protect database operations. In this lesson, we'll write the first of many Meteor methods.
1.Getting Started3 lessons, 11:39
1.1Introduction00:39
1.2Application Demo05:23
1.3Application Setup05:37
2.First Steps4 lessons, 19:19
2.1Organizing Your Code05:44
2.2Set Up a Router07:24
2.3Add User Accounts03:39
2.4Collections02:32
3.The User List Page3 lessons, 23:41
3.1List Users12:38
3.2Making Friends04:57
3.3Write a First Meteor Method06:06
4.The Game List Page4 lessons, 39:05
4.1Waiting for Data08:15
4.2New Game Form08:35
4.3New Game Method09:42
4.4List the Games12:33
5.The Game Page10 lessons, 1:28:25
5.1Get the Game Data04:53
5.2Display the Game: Prep Work11:40
5.3Display the Game12:00
5.4Style the Chess Board02:50
5.5Making Moves: The Event Handler16:54
5.6Making Moves: The Meteor Method10:00
5.7Listing the Moves06:48
5.8Chat Between Users11:56
5.9Reviewing the Game09:29
5.10Deploy the Application01:55
6.Conclusion1 lesson, 00:44
6.1Conclusion00:44
3.3 Write a First Meteor Method
At the end of the last lesson, we wrote the line at meteor dot call set friend. And I said, that this was calling a meteor method, which is a method that we will write ourselves. So let me explain what a meteor method is. Meteor methods are functions that we can call from the client that run on the server. You remember that we removed the insecure package, so that we can't do database operations from the client. We could allow certain database operations in certain scenarios by using every meteor collections allow and deny methods. However, we're not going to be doing that in this course. Instead, we're going to be using meteor methods. Now to do this, we're going to create a file, lib/methods.js and notice, this is going in the lib folder. Which means this file will be loaded on both the client and the server. Now I said, that these functions only run on the server and they do. But they'll be run and I'm doing air quotes here, on the client as well. Which means that even though the database operations are not allowed on the client. We can perform database operations from within these functions. And they'll be faked on the client until the results return from the server. Basically, meteor is going to assume that the database operations will be performed successfully on the server. So, it fakes the operation on the client and then, when it receives confirmation from the server, everything's good. Now, if something fails on the server for some reason, then that will be undone on the client. And so, the fact that it's on the client before it's actually saved to the server. Just means that the user feels like the application is a lot more responsive. So, let's create our first meteor method. So we'll say meteor dot methods and this is a function that we pass an object to and in this object, we create our methods. Now we called our method set friend and it takes a single parameter. The ID, so let's go ahead and create the set friend method and it will take a user ID. So in here, we want to perform an update query to our currently logged in users. User record In the database, so let's create our query object and because we're working with an array in mungo d.b.. This is actually going to be pretty simple. So basically, what we're going to do is, we already know that the user objects in the mungo db database can have a profile property. And, that object is going to have a friends list in it, a friends array, so we're going to have Profile.friends is our array. Now of course, if the user is not a friend yet, we want to add a user ID to that array. If they already are our friend, we're going to remove an ID from that array. We have our query object and right now there's nothing in it. So, let's say query and then, we're going to have a square bracket here. Because the property that we need to add either has to have the Name push if we're trying to add to this user. Or pull if we're trying to remove it from this user. Now how can we figure out whether or not the user is already a friend? Well, we know how. We've already written this method and it's called alreadyFriends. And because this is globally accessible, we can reach it from inside our meteor method. So, we will pass the userId to alreadyFriend and if it returns true, that means we want to remove it. So we'll use pull otherwise assuming it returns false, we want to push this id into the friends list. So, we take our object here and all we have to do is reference the array, so that's going to be profile.friends. And then let's pass in the user ID as the property to add or remove from that array. Now we need to get our collection. This is going to be meteor.users and we're going to say users.update. Now update as the first parameter takes a query object, to know which record it's supposed to update. We could pass a whole object or we could just pass the user's Id. So, we'll just say this.userId and this is a shortcut that meteor allows us to use from within meteor methods. To get the idea of the currently logged in user and then, we'll pass our query as the second parameter and that's all we need to do. So, this should be the end of ourn add and remove friends feature. To recap, we have a button here in our template that the user will click. When they click it, we call setFriend and pass in the id and then, we check to see if that id is already in the friends list. If it is, we remove it if it isn't we push it in. We save those changes and then, because we have a publication, those changes will be percolated from the client to the server. And the client collection will be updated and our UI will change accordingly. Now of course, since we're using a Meteor method here, the UI will have already changed. assuming that the operation will have been successful, but we'll receive the confirmation of that and the UI will not change back. All right, so let's come here to our users page and I'm signed in as Andrew. And you can see right now beside Cameron, there's a plus button, which means he is not currently our friend. And we should actually be able to see this. We could, should be able to do meteor.user and you can see we have this object here. And right now, there's a profile object and it has no properties within it. All right, so I'm going to go ahead and click this button. Notice that it changes to a minus sign. That's good news. Let's rerun this query and now, if we look inside profile, we have friends And we have an id inside that friends list. That is excellent and not all of our collections are going to be this easy to see on the client. So if you ever want to look at your meteor data from a terminal, there is a handy mongo terminal you can use. So, in our new terminals have here, I'm going to run meteor mongo. And this connects specifically to the mongodb database that meteor is using. You can see, I can say show collections and you can see that we have our users collection here. We don't have the games or conversations collections yet ,because we haven't actually added anything to those collections. so they don't actually exist yet, so we can say db.users.find and you can see, we have one and two. You can see here's Cameron. He doesn't have anything in his profile yet. Here's Andrew and Andrew's profile has one friend in the friends array. So now, we are successfully adding and removing friends. Which means, that we are ready to start thinking about the games in our application.