sailsCasts

Learning about sails.js one screencast at a time.

Building an Angular Application in Treeline Sneak Peak: Implementing the Signup Page in Treeline.

| Comments

Signup for the Treeline Beta here.

Follow me on twitter here.

Subscribe to the sailscasts mailing list here.

Transcript

Howdy.

So, I wanted to do a quick screencast previewing a new project from the Sails crew called Treeline. So, let’s get busy.

In the last two episodes we implemented the /signup request via Sails blueprints and then a custom controller action. Today, I want to show you how I would do this in Treeline. So I have a Treeline project here, which should look very similar to a Sails project because that’s what it is with some very powerful additions. I’ve copied the assets folder from our existing activityOverlord20 project to the assets folder here. So we have the same front-end asset structure, but I’m going to create the back-end api in treeline.

So here I am in the Main Treeline Dashboard. We’ll go to apps, we’ll create a new app, and not surprisingly we’ll call it activityoverlord20. And the first thing we’re going to do is create our model. Now, in the past episode we created a user mode. We’ll add attributes to that model the first being name and notice that I’m going to add an example, and treeline will infer which type is appropriate. Next, I’ll add the other attributes title, email, password, and gravatar url.

So now that we have our user model let’s define the two routes that our front end requires. The first route will be GET /signup. This takes us into the circuit view. Since we just want to display our signup.ejs view we can specify that in an empty circuit here. Okay, next I’ll create the route to POST /signup. As you may recall we first wanted to take the password from our form and encrypt it. We used node-machines to do that. You can think of treeline as the visual interface for node-machines. So I’ll just drag the encrypt password machine as a part that will fit on something called a circuit. And then I’ll access the password field from our signup page via a route paramter.

Next we want to convert an email address into a gravatar url. I’ll search for the gravatar machinepack and install it. And from with that machinepack I’ll get the getImageUrl machine and put it on our circuit as well. Now similar to what we did with the encrypt password, I need to get our email address from our form and I’ll do that with a route parameter.

At this point we wanted to make sure that we had unique email addresses and if we didn’t to let the front in know via a 409 status code. So I’ll drag a findone user machine over to our circuit and look up the email address provided by our form in the user model. If a record is found, we know the email address is taken and we want to let the front end know so I’ll respond with a 409 status. If a record is not found, we want to go ahead and create the user so I’ll drag a create user machine over and start connecting the user model with our form fields. We’ll do this mainly through route parameters, so for the name we’ll get the route parameter, for the password we’re going to actually get the output of our encrypt password machine. For the email we’ll go ahead and use a route parameter, we’ll do the same for the title field, and finally for the gravatar url we’ll use the output of the gravatar machine.

Okay let’s see all of this in action. So we’ve built the api in Treeline and Treeline syncs the controller and model with our local project when I lift it using Treeline preview. So let’s head to our browser and navigate to localhost:1337/signup which will make the GET request to /signup and our signup view. Next, let’s go ahead and create a User record – Nikola Tesla.

Let’s go back to the signup page and create Nikola Tesla again and see if our duplicate email message is triggered.

And there it is…so this really just scratches the surface of the power of treeline. In addition to the activityoverlord20 screencasts I plan to do additional videos on this new tool. If you’re interested in using treeline, head over to treeline.io and sign up for the beta. As always thanks for watching.

Comments