Fancy working with a small team remotely? SupportBee is hiring developers!
Take a look at our jobs page
We will be taking you through building SupportBee, our single page customer support software. SupportBee is a Gmail like application that helps you manage your customer support emails. There are two main types of screens in SupportBee - A Ticket Listing (much like Gmail's Inbox/Sent) and a Ticket View (much like the email view in Gmail where you can read the thread and reply to it).
Over the course of the book, we will show you how we built SupportBee. We will start with simple listing and ticket view screens and then evolve the application as we go along.
To build the app, we would be using the SupportBee API. We will assume that authentication is already taken care of and we can simply focus on making the right API calls.
Out of the box, Backbone.js works with a RESTful API pretty well. However if the JSON API that you are talking to wraps the response in a root element, you need to hack
Backbone.Collection to be able to parse the root element. For example, the SupportBee API response for
If you notice, the individual tickets are inside a top level
tickets element. To parse API responses like this, you can use the script below and include it in your project after including Backbone.js. There is also some meta data in the response (like
current_page etc) that is also parsed by this script.
To use the script, you must now provide a name attribute when defining all models and collections that need to interact with the API. This property is used to unwrap the JSON provided by the API.
This is what our Jammit file looks like. I have removed many files from the lists to keep it short. I have commented the file to provide some hints on what's going on. However, you should checkout the Jammit documentation to understand better.
This step depends on the package manager that you are using. Jammit provides some helpers for Rails that you can use to include the packaged assets. In development mode, nothing is concatenated for easier debugging. In production, assets are concatenated, some assets are embedded in the stylesheeets (if you have the option turned on). This is how you can include the files in your HTML file (we use HAML with Rails and so the code below is HAML which is eventually converted to HTML).
=>) binds it to the current value of this. This makes things very predictable (pun intended)
You don't have to use coffeescript but I encourage you to check it out. It will make your life a lot easier as your project grows.
What else would you like to see? What do you think is missing or not needed?comments powered by