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. Create a file called product_list.html in the public folder with this content:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Simple Product List</title>
</head>
<body>
<div id="products">
<p>Click to load products</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</body>
</html>
If we visit http://localhost:8080/products.json we'll get a JSON representation of the products in our database.
[
{
"created_at":"2015-01-23T09:10:57-05:00",
"description":"Description of Camera",
"id":1,
"image_url":null,
"name":"Nikon D90 Digial Camera",
"price":"500.0",
"updated_at":"2015-01-23T09:10:57-05:00"
},
{
"created_at":"2015-01-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":"2015-01-23T09:10:57-05:00"
}
]
Right below the closing body tag 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>
$("#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 .get() method in jQuery, which takes the URL and a callback that gets fired on success. The data from the server is passed to the callback.
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.
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.
<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=camera
You'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=2
This 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 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. If you send JSON in the request body, no nesting is required.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 1GET http://localhost:8080/categories/1/products.xml 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=2http://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.