Let’s Learn: Meteor Pt 3

T-minus 15 seconds

Falling behind already? Don’t worry. Check out Pt 2 here!

In the last tutorial, we learned how to get our user’s age, have our employee do some magic, and make him console.log us the answers. All in all, a pretty sweet app if you ask me. But what if we wanted to save each entry so we could keep track of all of our friends’ ages? I wonder how hard that would be.

Most of the files we are going to be messing with are going to be from scratch so feel free to create a new Meteor app or just take the one you’re at and erase everything but:

if (Meteor.isClient) { 
  Template.templateName.helpers({});
  Template.templateName.events({});
}
if (Meteor.isServer) { }

Anywhere outside of .isClient or .isServer, we want to put the following code:

Friends = new Mongo.Collection('friends');

Can you guess what it does? Kinda like when we said var foo = bar, we are creating a new box for our employee to be able to look in. Except we aren’t putting the word var in front of it in order to let employees anywhere see and affect the box named Friends. If we put var in front of a variable/box name, we make it so that only the employee reading those instructions can affect it. What follows after the ‘=’ is kinda confusing right now so let’s just assume that we are telling all of our employees “This box is going to be like a database for us to mess with.” It’s a tad more complicated than that but who’s got time to figure that out?

Now that we’ve got our skeleton ready, let’s start actually creating something and stop wasting time!

Why can’t we be friends?

We’re going to fill that Friends box with a list of friends and their ages. We’re going to be doing almost exactly what we did with the console.log app that we built last time but we’re going to actually store some data and see how our employee understands instructions a little better. Ready? Ready.

First, we’re obviously going to need a place for our friends to enter their information, so let’s build a form like we did in the last section with input fields for all of the information we’ll need from them. You can copy/pasta your old one and build up, figure it out on your own, or copy/pasta what I’m copy/pasta-ing below. It’s like, your choice man.

<form id=”friends”>
  <input type="text" name="firstName" placeholder="First Name"><br>
    <input type="text" name="lastName" placeholder="Last Name"><br>
    <input type="tel" name="phoneNumber" placeholder="Phone Number"><br>
    <input type="tel" name="birthYear" placeholder="Birth Year"><br>
    <input type="submit" value="Submit">
</form>

If you want different values or information from your friends, change it up! This is your app and we always want to break the thing we’re learning about in order to not make those same mistakes later when someone is paying you. And for those that are zero coders, let’s walk through what some of the things are:

<form id=”friends”>

Here, we are simply declaring a form and giving it an id of friends so we can call it later in our JavaScript easier. Note: this friends has NOTHING to do with our Friends collection that we declared in the js file. Our employees are stupid and some of them don’t even speak the same languages. We’re simply giving this form an id in order for us to be able to tell our employees no matter where they’re at or what language they speak “When I tell you to look for #friends, this is the specific thing I’m talking about”.

<input type="text" name="firstName" placeholder="First Name"><br>

Just like last time, we are creating an input element and giving it some stuff to make our life easier. We are telling our employee that it will be a text input, that we want to call it firstName and that we want our employee to put First Name as a placeholder for text. The br is a break tag and creates a new line. Super simple right?

<input type="submit" value="Submit">

This is just creating a submit button. We could easily have made it a link and styled it but why go through the extra effort? And having it as submit makes our employees able to get information from it without us trying too hard. Now let’s hook up the data!

‘submit #friends’: function(event) {
   event.preventDefault();
   console.log(“Form #friends was submitted!”);
 }

Like last time, we are putting this in the Template.templateName.events({}); block of code, we are adding to the function a variable we are calling event, which is just passing some data, we are telling it to stop our event from doing whatever the default action of it is (which is refresh the page, which we don’t want) and then console.log a success message. With your meteor app running on localhost:3000, let’s click that submit button and see if it console.log’s anything! Be sure to have your browser console open (inspect element or ctl+shift+c) and you should get a message every time you click the button. Aww yiss.

Now, just like last time, let’s get all of the information from the form and pass it to your employee in the js file. Remember, we do that kinda like:

var firstName = event.target.firstName.value;

Simple right? Once you get all of your inputs linked up to a variable in the js file, we need to just double check that we are getting those values with a few console.logs that would probably look something like this (for each var that we created from the form data):

console.log(“I got “ + firstName + “ for firstName”);

Put some dummy data in the form and see if all of your console.logs made it and you got the right information! I am sure that it seems silly to write console.logs all of the time but truth be told, it is far more silly to not do it and have to figure out where your code is breaking an hour into coding. Trust me, it’s easier to delete console.logs as you go than figuring out where you bug is for half a day. Everything working? If not, try adding console.logs before/after you tell your employee anything in your list of instructions (before/after any var). It helps to narrow down where your mess-up is.

You should have gotten console.logs for all of your vars and they should equal what you are sending the form. Now we need to somehow insert that data into the Friends box. And luckily for us, Meteor has a pretty dope and easy way for us to do that.

Before we start adding data, let’s make sure we have something to put that data into. In your browser console (that place where the messages are popping into), there should be a “>” text area where you can type. Type in this and hit enter:

Friends.find().fetch()

We are telling our browser to look inside of the box Friends, find what is in there, and bring it back to me. Super simple and easy to understand, right guys? Right?

You should have been given an empty array, as denoted with “ [ ] “ which is great. It means that Meteor created the Friends box and set it an empty array that we can add stuff to. How awesome of them! Now let’s start inserting data!

Let’s try to think of how we would logically say it. How would you tell someone to do what you are wanting your computer to do, in our boxes/instructions sorta language? Probably something like:

I want you to find the box named Friends and insert the data I’m giving you into it.

That sounds like someone can’t mess that up. If only Meteor had an “insert” instruction we could just use…. IT DOES!

Friends.insert({});

Wow. Meteor/Mongo are just the best. Now let’s enter some text in our form, hit submit, and see if anything happens!

We should have gotten all of our console.logs we have set up before the .insert is called, which is good. And if you put any console.logs after the insert (which I almost always do, by the by) you should have gotten them. Which means the employee saw the insert instructions. Let’s see if he followed them!

Friends.find().fetch()

Once again, this should bring up the items inside of the Friends box. And this time, it should bring up something inside of the ‘ [ ] ‘ and it should have the word “Object”. Click that and see what it brings up.

It’s okay if your console doesn’t look like mine. Just make sure you are seeing something like this

If you only saw “_id= randomStringHere”, you might be wondering where our data is. Wait a second, where is all of our data? Let’s look at our Friends.insert({}); instructions and see where it all went wrong.

We can tell by there being a new Object inside of our Friends box that our employee did actually insert something. But he didn’t take any of the data that we gave him. What gives? Ya know, I bet you it has something to do with our employee being stupid and us not explicitly passing him the data we wanted him to use. Let’s try being more specific in what we want him to insert and see if that helps. To do that, we’re going to be between the curly brackets and type some code. Just copy and past and we’ll talk about what it is after.

Friends.insert({
 firstName: firstName,
 lastName: lastName,
 phoneNumber: phoneNumber,
 birthYear: birthYear
});

That looks hella confusing but I swear it’s pretty easy. I might get a little nerdy and use some words we don’t understand yet but just understanding what we’re doing is enough to let you hack away at it!

Friends.insert({

We all know what that means! But what do the {} mean? It means that we are inserting an Object into Friends (makes sense why our browser calls it an Object!). Our employee knows that we are going to give it a group of properties that we are going to set, which he will bundle up and present to us later. Think of an Object like a book: many chapters that can have many pages, but if you reference Moby Dick, you don’t have to reference every page. Make sense? Let’s try to hammer out the details.

firstName: firstName,
 lastName: lastName,
 phoneNumber: phoneNumber,
 birthYear: birthYear

Okay, it looks like I am just repeating myself but I’m truly not. And this is where I got stuck on so let’s go super clear for a second. The words on the left of the “ : “ are what our employee knows as “properties” and he knows to set it to whatever is to the right of the “ : “. We can think of properties kinda like chapters in books or like boxes inside of our Object.

What the words on the right of the colon are are simply boxes that we defined earlier! If we named our firstName box instead something like surName then we would say

firstName: surName

All we are doing is telling our employee that we are setting the tiny box firstName that is inside of the Object you are creating to put inside of the other box Friends equivalent to what the box he is holding named surName or firstName is. And since we have more than one property, we let our employee know by putting a ‘ , ‘ after each one. You’ll notice that the last one doesn’t have any punctuation after it and that’s because it’s the end of our list!

Now! Let’s try that and see what happens. Enter your friend’s first and last name, zipcode, and birth year into your form and click submit. Hopefully everything as before worked. And let’s do our Friends.find().fetch() command in our browser window and this time we should get 2 Objects inside of our array. Let’s click on the second one and see what it has.

Hopefully my number gets blown up by job offers and not single ladies in my area looking to have a good time.

The fight has just begun

Ta-da! We took data from our user, put it inside of boxes, gave those boxes along with some instructions to our employee, and he put them inside of smaller boxes for us! Now we know how to save data for our app but I wonder how we can retrieve that data later to view our friends without having to Friends.find().fetch() every time. You have any ideas? Hit me up on the Faces and Tweets and be sure to check out the GitHub if you want to just download this code and mess with it.

Till next time, console.log your way to success