QEDServer

A standalone simple web app and database

Want to learn Knockout.js, Backbone, or Ember.js but need a web app with data to connect to?

Download Now Quick Tutorial

No server setup, no database administration, no fuss.

What is QEDServer?

You've just come across a great new client-side library that makes building richer client-side apps a breeze. It has support for client-side storage, but you're really interested in using this with an existing server-side web application, so you decide to try it out. Then you realize that to test everything, you need a backend. That means you need to write some server side code, set up a database, and you need to deploy the thing on a web server so that all the AJAX requests work right. And of course, you need to populate that database with dummy data. That's a lot of work just to try out a new framework!

QEDServer solves those pesky problems for you so you can focus on sharpening your front-end skills. In one small package, you get a simple web server that hosts a small "product catalog" web application and a database full of existing products. You can immediately start writing code against its RESTLike API that responds with JSON and XML.

How does it work?

Download the archive, extract it, and run the server. There's a bat file for Windows and a shell script for OSX and Linux.

When QEDServer starts, a database file and a `public` folder will appear in the folder where you ran the server. You put your files in the public folder, visit http://localhost:8080/index.html in your browser, and you can start coding against this simple backend. Since QEDServer is serving your HTML files, you avoid AJAX "same origin policy" issues while you write client-side code against the RESTLike backend that QEDServer provides through its API.

Additionally, QEDServer provides a web interface of its own that you can use to manage the stock data and add your own records.

And if you need a fresh start, just delete the `products.sqlite3` file and restart QEDServer. The database will be recreated so you'll have a clean environment again.

Quick Tutorial

Let's make a simple page that fetches the products from our database using jQuery. Download QEDServer and extract the archive to a convenient location. Next, launch server.sh (or server.bat for Windows) to start the server.

Create a file called product_list.html in the public folder with this content:


<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <title>Simple Product List</title>
    <script 
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'
      type='text/javascript'></script>
  </head>
  <body>
     <div id="products">
       <p>Click to load products</p>
     </div>
  </body>
</html>

If we visit http://localhost:8080/products.json we'll get a JSON representation of
the products in our database.


[
  {
    "created_at":"2011-05-23T09:10:57-05:00",
    "description":"Description of Camera",
    "id":1,
    "image_url":null,
    "name":"Nikon D90 Digial Camera",
    "price":"500.0",
    "updated_at":"2011-05-23T09:10:57-05:00"
  },
  {
    "created_at":"2011-05-23T09:10:57-05:00",
    "description":"Description of the Macbook 13",
    "id":2,
    "image_url":null,
    "name":"Macbook 13 inch",
    "price":"999.0",
    "updated_at":"2011-05-23T09:10:57-05:00"
  }
]

Within the head tags of our page, let's add another script block that fetches products into the page using the JSON feed we just inspected. We'll need to add a click event to our products region that triggers the AJAX request.


<script>
$(function(){
  $("#products").click(function(e){
  $.get("/products.json",
     function(data){
       var products = data;
       var ul = $("<ul></ul>"); // create a new unordered list

       $.each(products, function(index, product){
         var li = $("<li>" + product["name"] + "</li>");
         ul.append(li);  // add the listitem to the unordered list
       });

       $("#products").html(ul); // replace the products div with the ul
     }, "json");
  });
});
</script>

We fetch the data using the .ajax() method in jQuery, which takes the URL, a function, and the content type we expect to get back.

In our function, we construct an unordered list, iterate over the results we get back, append each result to the unordered list as a list item, and then we replace the contents of our projects div with the unordered list.

If you visit http://localhost:8080/product_list.html , you'll see our demo, which will pull records from our database.

You can stop QEDServer with CTRL+C.

That was just a short demo. You can use the other pieces of the API to add and delete records, or even perform searches against the data, which is perfect for testing out those fun auto-complete scripts everyone wants you to write.

The API

The API that's currently implemented is:

Products

Creating and updating products

To create products, send a POST request to http://localhost:8080/products . The
web server expects to find the parameters nested if you form-encode the data.

<input type="text" name="product[name]">

No nesting is required if you send the JSON in the request body.

When a product is created successfully via JSON, you'll get this response:

{success: true, message: "Created Camera."}

Deleting products

You can delete products by constructing a DELETE request to http://localhost:8080/products/1.json where 1 is the ID of the product you want to remove. You'll get a JSON response back that looks like this:

{success: true, message: "Camera was deleted."}

Searching for products

Searching for products is quite easy. You simply send a GET request to http://localhost:8080/products.json with a query paramter called q
like this:

http://localhost:8080/products.json?q=camera

You'll get back only products that have "camera" in the name or description.

Pagination

Results come back 10 pages at a time. Use the page query parameter to get additional results.

http://localhost:8080/products.json?page=2

This works with RSS, XML, and JSON, with or without keywords.

Categories

Creating, updating, deleting, pagination, and searching work the same as with Products.

Pagination and Searching

When looking at products within categories, you can apply the same pagination and querying as you would with products.

This works with RSS, XML, and JSON, with or without keywords.

JSON-P Support

You can get the JSON results back as JSON-P if you append a callback query parameter to the request. The result will be wrapped by the callback function you specify.

Right now we only support this for the following API endpoints.

Open Source

QEDServer is open-source software. If you're comfortable working with Ruby, you can begin customizing QEDServer right now by forking the project on Github.