Build Your Own Twitter-Clone with Sproute

27 Jun 2013 | By Louis Stowasser | Tags tutorials mongodb
Louis Stowasser is the creator of Crafty, and has worked at Mozilla. This tutorial is about Sproute, a commercial web framework that's similar to Meteor. DailyJS readers can download Sproute for free with the discount code dailyjs.

Sproute

Application development on the web is not easy. You need to understand server-side languages, databases, performance, security… the list goes on. It can take months to develop even simple applications. Sproute is a new kind of web framework that allows you to create apps in minutes.

In this tutorial we will be creating a mini-Twitter clone complete with a feed, login/register and profile page. It shall be called “Critter”.

Sproute is currently available on a commercial license to fund further development. Use the discount code dailyjs to get it free or contact us at contact@sproute.io.

The structure of a Sproute app is as follows:

  • Views: HTML pages with embedded template tags to request and display data.
  • Models: JSON object to define what the data looks like.
  • Controller: A mapping from URLs to Views using routes.

Setup

After installation you will need to edit config.json. Add a name property:

{
  "name": "critter"
}

This will create a Mongo database called critter.

The Feed

This will be a view that lists the micro-blog posts by a user. Create a view under the views/ directory called feed.sprt. .sprt is the default extension for views, you may change this in the config.json file.

To get the data from the Mongo database, we need to use the template language; in particular the tag get. All data is read, updated, created and deleted through an HTTP interface prefixed with /data/ so we must construct a URL to get the post data.

This will retrieve every row in the posts collection. Generally we want a feed of a particular user so we need to filter the results by username.

A few things to explain here. First of all the two parts to the URL will filter the results where the field name equals the value.

Secondly _creatorName is an in-built field so whenever a row is created, Sproute will automatically add some metadata about the row; in this case the username who created the post.

Lastly, params.user is a placeholder from a route in the controller that points to this view.

{
  "/:user": "feed"
}

This route means anything requested after / will render the view feed.sprt and put the value in the params object under the key user. Let’s use an example:

GET http://example.com/louisstow
params.user == "louisstow"

So now that we have all the post data under a given user, we need to render it by looping over each post. We do this with the template tag each and some HTML.

Before we run this, we’re missing one little piece. We’re requesting data from a collection called posts which doesn’t currently exist. We need to define it as a model to ensure some data integrity.

Models are defined as JSON files under the models/ directory. Create a file called posts.json. Sproute will create a collection for each model using the filename. Inside the model, we should define the field we will be using.

{
  "content": {"type": "String"}
}

Yep, that’s it. The model tells Sproute that the posts collection has a content field of type string (text). Everything else we use is an in-built field. You can add some more constraints in here such as minimum and maximum length. Maybe we could limit it to 140 characters ;).

Posting a Micro-Blog

Now that we can display the data, let’s make sure we can create it via some HTML in feed.sprt:

Plain old HTML is enough to insert data in Sproute by setting the action to the HTTP interface and the method to post.

Notice the query variable goto. It’s a nice feature that will redirect the user after doing the action, you will see it used in a few other end-points throughout the project. We also use self.url to get the current page to redirect to.

User Accounts

Sproute has user accounts built in. You just have to create the front-end including the login and register page. Create two views, login.sprt and register.sprt.

Send a POST request to /api/login with the username and password to create a session and log that user in.

Send a POST request to /api/register with the desired username, password and any other values you want stored with the user to create a new user row. This does not log them in.

Logging the user out is as simple as visiting /api/logout.

We can restrict HTML from rendering in our views if the user is not logged in. The form to post a micro-blog should only appear for users who are logged in:

The Home Page

Our controller doesn’t handle the index or home page. Add another route before the feed and create a view called home.sprt.

{
  "/": "home",
  "/:user": "feed"
}

What to put on the home page? This is up to you, maybe a bit of a splash page to introduce the reader to your new micro-blog. Maybe we want to show off some of the users.

Secure It

After creating a fully functioning micro-blog, the next step is to lock it down. Right now anyone can create a post whether or not they are logged in. There is a nice feature in Sproute where you can specify a route (just like the controller) and who can access it. It’s defined in permissions.json.

Let’s evaluate our product and decide what we need to secure. We don’t want just anybody creating a post, we want them at least to be members, so let’s add that restriction:

{
  "POST /data/posts": "member"
}

member is a default user type. You can create your own user types by overriding the in-built users model. There are also special user types:

  • owner: Give access to the logged in user where the _creator field matches their user ID.
  • stranger: Give access to a user who is not logged in.
  • anyone: No restriction.

For anyone to create a post, they must be logged in. We also need to make sure not just anybody can delete or edit the posts.

{
  "POST /data/posts": "member",
  "DELETE /data/posts": "admin",
  "DELETE /data/posts/*": "owner",
  "POST /data/posts/*": "owner"
}

An entire collection can be wiped by sending a DELETE request to /data/<collection> so add a restriction that only admin accounts can do that.

Let the creators be able to remove their own posts through DELETE /data/posts/*. Similarly let them edit their own posts.

Conclusion

The end! Hopefully this tutorial has taught you a few things about using the Sproute framework and how simple it is to build dynamic websites. Visit http://sproute.io to see all the other web applications you can build in minutes.


blog comments powered by Disqus