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.
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.
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 that's currently implemented is:
GET http://localhost:8080/products.json
fetches a JSON feed of the productsGET http://localhost:8080/products.xml
fetches an XML feed of the productsGET http://localhost:8080/product/1.json
fetches the product with the ID of 1 as JSONGET http://localhost:8080/product/1.xml
fetches the product with the ID of 1 as XMLPOST http://localhost:8080/products.json
creates a new product. The fields need to be nested if you form-encode the data, so name your form fields product[name], etc. No nesting is required if you send the JSON in the request body.PUT http://localhost:8080/products/1.json
modifies the existing product with the id of 1. If you form-encode the data, you'll need
to post data in the nested format product[name]
, etc. If you send JSON in the request body, no nesting is required.DELETE http://localhost:8080/products/1.json
deletes the product with the ID of 1.GET http://localhost:8080/products.rss
fetches an RSS 2.0 feed of the productsTo 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."}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 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=cameraYou'll get back only products that have "camera" in the name or description.
Results come back 10 pages at a time. Use the
page query parameter to get additional
results.
http://localhost:8080/products.json?page=2This works with RSS, XML, and JSON, with or without keywords.
GET http://localhost:8080/categories.json
fetches a JSON feed of the categoriesGET http://localhost:8080/categories.xml
fetches an XML feed of the categoriesGET http://localhost:8080/categories/1.json
fetches the categoy with the ID of 1 as JSONGET http://localhost:8080/categories/1.xml
fetches the category with the ID of 1 as XMLPOST http://localhost:8080/categories.json
creates a new category. The fields need to be nested if you form-encode the data, so name
your form fields category[name] , etc. No nesting is required if you send the JSON data in the request body.PUT http://localhost:8080/categories/1.json
modifies the existing category with the id of 1. If you form-encode the data, you'll need
to post data in the nested format category[name]
, etc. Nesting of data is not required if you send the JSON data in the request body.DELETE http://localhost:8080/categories/1.json
deletes the category with the ID of 1.GET http://localhost:8080/categories.rss
fetches an RSS 2.0 feed of the categoriesGET http://localhost:8080/categories/1/products.json
fetches products in the category with the ID of 1Creating, updating, deleting, pagination, and searching work the same as with Products.
When looking at products within categories, you can apply the same pagination and querying as you would with products.
http://localhost:8080/categories/1/products.json?page=2
http://localhost:8080/categories/1/products.json?page=2&q=iPadThis works with RSS, XML, and JSON, with or without keywords.
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.
GET http://localhost:8080/products.json?callback=jsonpcallbackGET http://localhost:8080/products/1.json?callback=jsonpcallbackGET http://localhost:8080/categories.json?callback=jsonpcallbackGET http://localhost:8080/categories/1/products.json?callback=jsonpcallbackGET http://localhost:8080/categories/1/products/1.json?callback=jsonpcallbackQEDServer is open-source software. If you're comfortable working with Ruby, you can begin customizing QEDServer right now by forking the project on Github.